變量作用域
變量作用域指的是變量的作用范圍膀懈，javascript中的變量分為全局變量和局部變量顿锰。
1、全局變量：在函數(shù)之外定義的變量启搂，為整個(gè)頁(yè)面公用硼控，函數(shù)內(nèi)部外部都可以訪問(wèn)。
2胳赌、局部變量：在函數(shù)內(nèi)部定義的變量牢撼，只能在定義該變量的函數(shù)內(nèi)部訪問(wèn)，外部無(wú)法訪問(wèn)疑苫。
<script type="text/javascript">
? ? //全局變量
? ? var a = 12;
? ? function myalert()
? ? {
? ? ? ? //局部變量
? ? ? ? var b = 23;
? ? ? ? alert(a);
? ? ? ? alert(b);
? ? }
? ? myalert(); //彈出12和23
? ? alert(a);? //彈出12? ?
? ? alert(b);? //出錯(cuò)
</script>
封閉函數(shù)
封閉函數(shù)是javascript中匿名函數(shù)的另外一種寫(xiě)法熏版，創(chuàng)建一個(gè)一開(kāi)始就執(zhí)行而不用命名的函數(shù)纷责。
一般定義的函數(shù)和執(zhí)行函數(shù)：
function changecolor(){
? ? var oDiv = document.getElementById('div1');
? ? oDiv.style.color = 'red';
}
changecolor();
封閉函數(shù)：
(function(){
? ? var oDiv = document.getElementById('div1');
? ? oDiv.style.color = 'red';
})();
還可以在函數(shù)定義前加上“~”和“!”等符號(hào)來(lái)定義匿名函數(shù)
!function(){
? ? var oDiv = document.getElementById('div1');
? ? oDiv.style.color = 'red';
}()
閉包
什么是閉包?
函數(shù)嵌套函數(shù)，內(nèi)部函數(shù)可以引用外部函數(shù)的參數(shù)和變量撼短，參數(shù)和變量不會(huì)被垃圾回收機(jī)制收回
function aaa(a){? ? ?
? ? ? var b = 5;? ? ?
? ? ? function bbb(){
? ? ? ? ? a++;
? ? ? ? ? b++;
? ? ? ? alert(a);
? ? ? ? alert(b);
? ? ? }
? ? ? return bbb;
? }
var ccc = aaa(2);
ccc();
ccc();
改寫(xiě)成封閉函數(shù)的形式：
var ccc = (function(a){
? var b = 5;
? function bbb(){
? ? ? a++;
? ? ? b++;
? ? alert(a);
? ? alert(b);
? }
? return bbb;
})(2);
ccc();
ccc();
用處?
1再膳、將一個(gè)變量長(zhǎng)期駐扎在內(nèi)存當(dāng)中，可用于循環(huán)中存索引值
<script type="text/javascript">
? ? window.onload = function(){
? ? ? ? var aLi = document.getElementsByTagName('li');
? ? ? ? for(var i=0;i<aLi.length;i++)
? ? ? ? {
? ? ? ? ? ? (function(i){
? ? ? ? ? ? ? ? aLi[i].onclick = function(){
? ? ? ? ? ? ? ? ? ? alert(i);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })(i);
? ? ? ? }
? ? }
</script>
......
<ul>
? ? <li>111</li>
? ? <li>222</li>
? ? <li>333</li>
? ? <li>444</li>
? ? <li>555</li>
</ul>
2曲横、私有變量計(jì)數(shù)器喂柒，外部無(wú)法訪問(wèn)，避免全局變量的污染
<script type="text/javascript">
var count = (function(){
? ? var a = 0;
? ? function add(){
? ? ? ? a++;
? ? ? ? return a;
? ? }
? ? return add;
})()
count();
count();
var nowcount = count();
alert(nowcount);
</script>
內(nèi)置對(duì)象
1胜榔、document
document.referrer? //獲取上一個(gè)跳轉(zhuǎn)頁(yè)面的地址(需要服務(wù)器環(huán)境)
2胳喷、location
window.location.href? //獲取或者重定url地址
window.location.search //獲取地址參數(shù)部分
window.location.hash //獲取頁(yè)面錨點(diǎn)或者叫哈希值
3、Math
Math.random 獲取0-1的隨機(jī)數(shù)
Math.floor 向下取整
Math.ceil 向上取整
4夭织、其他
Array:
concat 返回一個(gè)由兩個(gè)數(shù)組合并組成的新數(shù)組吭露。
join? 返回一個(gè)由數(shù)組中的所有元素連接在一起的 String 對(duì)象。
pop? 刪除數(shù)組中的最后一個(gè)元素并返回該值尊惰。
push 向數(shù)組中添加新元素讲竿，返回?cái)?shù)組的新長(zhǎng)度。
shift 刪除數(shù)組中的第一個(gè)元素并返回該值弄屡。
unshift 返回一個(gè)數(shù)組题禀，在該數(shù)組頭部插入了指定的元素。
sort? 返回一個(gè)元素被排序了的 Array 對(duì)象
reverse? 返回一個(gè)元素反序的 Array 對(duì)象膀捷。
slice 返回?cái)?shù)組的一個(gè)片段迈嘹。
splice 從數(shù)組中刪除元素
Date:
getYear()?返回年份（2位或4位）
getFullYear()?返回年份（4位）
getMonth()?返回月份? 0-11
getDate()?返回日期?1-31
getDay()?返回星期數(shù)?0-6
getHours()?返回小時(shí)數(shù)?0-23
getMinutes()?返回分鐘數(shù)?0-59
getSeconds()?返回秒數(shù)?0-59
getMilliseconds()?返回亳秒數(shù)0-999
創(chuàng)建對(duì)象的方法?
1、單體
<script type="text/javascript">
var Tom = {
? ? name : 'tom',
? ? age : 18,
? ? showname : function(){
? ? ? ? alert('我的名字叫'+this.name);? ?
? ? },
? ? showage : function(){
? ? ? ? alert('我今年'+this.age+'歲');? ?
? ? }
}
</script>
2全庸、工廠模式
<script type="text/javascript">
function Person(name,age,job){
? ? var o = new Object();
? ? o.name = name;
? ? o.age = age;
? ? o.job = job;
? ? o.showname = function(){
? ? ? ? alert('我的名字叫'+this.name);? ?
? ? };
? ? o.showage = function(){
? ? ? ? alert('我今年'+this.age+'歲');? ?
? ? };
? ? o.showjob = function(){
? ? ? ? alert('我的工作是'+this.job);? ?
? ? };
? ? return o;
}
var tom = Person('tom',18,'程序員');
tom.showname();
</script>
2秀仲、構(gòu)造函數(shù)
<script type="text/javascript">
? ? function Person(name,age,job){? ? ? ? ? ?
? ? ? ? this.name = name;
? ? ? ? this.age = age;
? ? ? ? this.job = job;
? ? ? ? this.showname = function(){
? ? ? ? ? ? alert('我的名字叫'+this.name);? ?
? ? ? ? };
? ? ? ? this.showage = function(){
? ? ? ? ? ? alert('我今年'+this.age+'歲');? ?
? ? ? ? };
? ? ? ? this.showjob = function(){
? ? ? ? ? ? alert('我的工作是'+this.job);? ?
? ? ? ? };
? ? }
? ? var tom = new Person('tom',18,'程序員');
? ? var jack = new Person('jack',19,'銷售');
? ? alert(tom.showjob==jack.showjob);
</script>
3、原型模式
<script type="text/javascript">
? ? function Person(name,age,job){? ? ? ?
? ? ? ? this.name = name;
? ? ? ? this.age = age;
? ? ? ? this.job = job;
? ? }
? ? Person.prototype.showname = function(){
? ? ? ? alert('我的名字叫'+this.name);? ?
? ? };
? ? Person.prototype.showage = function(){
? ? ? ? alert('我今年'+this.age+'歲');? ?
? ? };
? ? Person.prototype.showjob = function(){
? ? ? ? alert('我的工作是'+this.job);? ?
? ? };
? ? var tom = new Person('tom',18,'程序員');
? ? var jack = new Person('jack',19,'銷售');
? ? alert(tom.showjob==jack.showjob);
</script>
4壶笼、繼承
<script type="text/javascript">
? ? ? ? function fclass(name,age){
? ? ? ? ? ? this.name = name;
? ? ? ? ? ? this.age = age;
? ? ? ? }
? ? ? ? fclass.prototype.showname = function(){
? ? ? ? ? ? alert(this.name);
? ? ? ? }
? ? ? ? fclass.prototype.showage = function(){
? ? ? ? ? ? alert(this.age);
? ? ? ? }
? ? ? ? function sclass(name,age,job)
? ? ? ? {
? ? ? ? ? ? fclass.call(this,name,age);
? ? ? ? ? ? this.job = job;
? ? ? ? }
? ? ? ? sclass.prototype = new fclass();
? ? ? ? sclass.prototype.showjob = function(){
? ? ? ? ? ? alert(this.job);
? ? ? ? }
? ? ? ? var tom = new sclass('tom',19,'全棧工程師');
? ? ? ? tom.showname();
? ? ? ? tom.showage();
? ? ? ? tom.showjob();
? ? </script>
(計(jì)算器)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jisuanji</title>
<script type="text/javascript">
window.onload = function(){
var one = document.getElementById('one');
var otow = document.getElementById('tow');
var ocount = document.getElementById('count');
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
var val01 = one.value;
var val02 = otow.value;
if(val01=="" || val02==""){
alert('輸入框不能為空神僵！');
return;
}
if(isNaN(val01) || isNaN(val02)){
alert('請(qǐng)輸入數(shù)字！');
return;
}
switch(ocount.value){
case '0':
alert((parseFloat(val01)*100 + parseFloat(val02)*100)/100);
break;
case '1':
alert((parseFloat(val01)*100 - parseFloat(val02)*100)/100);
break;
case '2':
alert((parseFloat(val01)*100) * (parseFloat(val02)*100)/10000);
break;
case '3':
alert((parseFloat(val01)*100) / (parseFloat(val02)*100));
break;
}
}
}
</script>
</head>
<body>
<h1>計(jì)算器</h1>
<input type="text"id="one" />
<select id="count">
<option value="0">+</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
<lect>
<input type="text" id="tow" />
<input type="button" value="計(jì)算" id="btn" />
</body>
</html>
