<h5>第1章 系好安全帶,準(zhǔn)備啟航 </h5>
<b>1.1讓你認(rèn)識(shí)JS</b>
1.1.1 JavaScript能做什么例隆？
增強(qiáng)頁(yè)面動(dòng)態(tài)效果(如:下拉菜單柑潦、圖片輪播幔欧、信息滾動(dòng)等)
實(shí)現(xiàn)頁(yè)面與用戶之間的實(shí)時(shí)匙铡、動(dòng)態(tài)交互(如:用戶注冊(cè)撵摆、登陸驗(yàn)證等)
1.1.2 任務(wù)
我們先來(lái)回顧下JS入門(mén)篇的基礎(chǔ)內(nèi)容诞挨，在網(wǎng)頁(yè)中插入JS代碼凡橱，實(shí)現(xiàn)輸出"JS進(jìn)階篇",并彈出對(duì)話框，內(nèi)容為"關(guān)注JS高級(jí)篇"亭姥。
注意:
JS是區(qū)分大小寫(xiě)的稼钩，如：classname和ClassName是不一樣的。同時(shí)注意方法达罗、屬性坝撑、變量等的大小寫(xiě)吆。
JS中的字符粮揉、符號(hào)等一定要在英文狀態(tài)下輸入吆
<b>提示：頁(yè)面加載就引用函數(shù)方式：window.onload = function XXX(){ }</b>
<i>代碼：</i>
<script language="javascript">
window.onload = function AlertDialog(){
document.write("JS進(jìn)階篇");//輸出
confirm("關(guān)注JS高級(jí)篇");//彈出確認(rèn)框
}
</script>
<b>1.2 編程練習(xí)</b>
1.2.1 任務(wù)
第一步:把注釋語(yǔ)句注釋巡李。
第二步:編寫(xiě)代碼，在頁(yè)面中顯示 “系好安全帶,準(zhǔn)備啟航--目標(biāo)JS”文字扶认；
第三步:編寫(xiě)代碼侨拦，在頁(yè)面中彈出提示框“準(zhǔn)備好了，起航吧辐宾！”
<i>提示: 可以把彈框方法寫(xiě)在函數(shù)里狱从。</i>
第四步:使用引入JS外部文件的方式實(shí)現(xiàn)以上的任務(wù)。
<i>代碼：</i>
引入方式<script src="script.js"></script>
<i>功能代碼：</i>
document.write("系好安全帶,準(zhǔn)備啟航--目標(biāo)JS");
confirm("準(zhǔn)備好了叠纹，啟航吧季研！");
<h5>第2章 你要懂的規(guī)則(JS基礎(chǔ)語(yǔ)法)</h5>
<b>2.1 什么是變量</b>
??什么是變量? 從字面上看，變量是可變的量誉察；從編程角度講与涡，變量是用于存儲(chǔ)某種/某些數(shù)值的存儲(chǔ)器。我們可以把變量看做一個(gè)盒子,盒子用來(lái)存放物品,物品可以是衣服、玩具驼卖、水果...等氨肌。
<b>2.2 給變量取個(gè)名字(變量命名)</b>
??我們?yōu)榱藚^(qū)分盒子，可以用BOX1,BOX2等名稱代表不同盒子酌畜，BOX1就是盒子的名字（也就是變量的名字）儒飒。
<i>注意：</i>
<i>代碼：</i>
<script type="text/JavaScript">
var myname ;
</script>
<b>2.3 確定你的存在(變量聲明)</b>
??我們要使用盒子裝東西,是不是先要找到盒子,那在編程中，這個(gè)過(guò)程叫聲明變量,找盒子的動(dòng)作檩奠，如何表示：
聲明變量語(yǔ)法: var 變量名;
var就相當(dāng)于找盒子的動(dòng)作桩了，在JavaScript中是關(guān)鍵字（即保留字），這個(gè)關(guān)鍵字的作用是聲明變量埠戳，并為"變量"準(zhǔn)備位置(即內(nèi)存）井誉。
var mynum ; //聲明一個(gè)變量mynum
當(dāng)然，我們可以一次找一個(gè)盒子整胃，也可以一次找多個(gè)盒子颗圣，所以Var還可以一次聲明多個(gè)變量，變量之間用","逗號(hào)隔開(kāi)屁使。
var num1,mun2 ; //聲明一個(gè)變量num1
<i>注意:變量也可以不聲明在岂，直接使用，但為了規(guī)范蛮寂，需要先聲明蔽午，后使用。</i>
<b>2.4 多樣化的我(變量賦值）</b>
例一：var mynum = 5 ; //聲明變量mynum并賦值酬蹋。
例二：var mynum; //聲明變量mynum
???mynum = 5 ; //給變量mynum賦值
例三：var num1 = 123; // 123是數(shù)值
???var num2 = "一二三"; //"一二三"是字符串
???var num3=true; //布爾值true（真）及老，false(假)
<b>2.5 表達(dá)出你的想法(表達(dá)式)</b>
??表達(dá)式與數(shù)學(xué)中的定義相似，表達(dá)式是指具有一定的值范抓、用操作符把常數(shù)和變量連接起來(lái)的代數(shù)式骄恶。一個(gè)表達(dá)式可以包含常數(shù)或變量。
<b>2.6 我還有其它用途( +號(hào)操作符）</b>
??可用作字符串拼接和數(shù)字的相加匕垫。只要當(dāng)都為數(shù)字時(shí)僧鲁，才用作數(shù)字相加。例如：
<script type="text/javascript">
var num1 = 5;
var num2 = "你好";
var result1 = num1 + num2;
var result2 = num2 + num1;
alert(result1);
alert(result2);
alert(num1 + num1);
</script>
<i>注意：當(dāng)一行代碼輸出過(guò)長(zhǎng)時(shí)象泵，不要直接換行师枣，用字符串拼接實(shí)現(xiàn)炕桨。例如：</i>
<script type="text/javascript">
//錯(cuò)誤的表達(dá)方式
alert("你好你好你好你好你好你好你好你好你好你好你好你
好你好你好你好你好你好你好你好你好");
//正確的表達(dá)方式
alert("你好你好你好你好你好你好你好你好你好你好你好你"+
"好你好你好你好你好你好你好你好你好");
</script>
<b>2.7 自加一渗勘，自減一 ( ++和- -)</b>
??算術(shù)操作符除了(+躁垛、-、*洲鸠、/)外，還有兩個(gè)非常常用的操作符，自加一“++”扒腕；自減一“--”绢淀。首先來(lái)看一個(gè)例子：
mynum = 10;
mynum++; //mynum的值變?yōu)?1
mynum--; //mynum的值又變回10
上面的例子中，mynum++使mynum值在原基礎(chǔ)上增加1瘾腰，mynum--使mynum在原基礎(chǔ)上減去1,其實(shí)也可以寫(xiě)成:
mynum = mynum + 1;//等同于mynum++
mynum = mynum - 1;//等同于mynum--
<b>2.8 較量較量(比較操作符)</b>
<b>2.9 我與你同在(邏輯與操作符）</b>
<b>2.10 我或你都可以 (邏輯或操作符）</b>
<b>2.11 是非顛倒(邏輯非操作符）</b>
<b>2.12 保持先后順序(操作符優(yōu)先級(jí)）</b>
操作符之間的優(yōu)先級(jí)（高到低）:
算術(shù)操作符 → 比較操作符 → 邏輯操作符 → "="賦值符號(hào)
<b>2.13 編程練習(xí)</b>
對(duì)比第二個(gè)輸出皆的，看看自己能寫(xiě)對(duì)多少
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS基礎(chǔ)</title>
<script type="text/javascript">
var a,b,sum;
var a = 5;
var b = 100%7;
sum = a > b && a*b > 0 ;
document.write( "我認(rèn)為 a 的值是:" + 5 + " b的值是:" + 2 + "sum 的值是:" + 1+"<br/>");
document.write( "答案是,第一輪計(jì)算后，a 為："+ a +";b為："+b +";第一次計(jì)算sum為："+ sum +"<br/>");
sum = ( (++a) + 3 ) / (2 - (--b) ) * 3;
document.write( "再一次計(jì)算后蹋盆，我認(rèn)為 a 的值是:" + 6 + " b的值是:" + 1 + "sum 的值是:" + 3 +"<br/>");
document.write( "答案是费薄，第二輪計(jì)算后，a 為：" + a + ";b為：" + b +";第二次計(jì)算sum為："+ sum +",sum的類型也發(fā)生變化了栖雾。");
</script>
</head>
<body>
</body>
</html>
真糟糕楞抡，寫(xiě)錯(cuò)兩個(gè)。
<h5>第3章 一起組團(tuán)(數(shù)組)</h5>
<b>3.1 一起組團(tuán)（什么是數(shù)組） </b>
在c析藕，java中數(shù)組長(zhǎng)度是一開(kāi)始就定義好的召廷，可以是常量，也可以是變量账胧。
可是在js中竞慢，由于其靈活性，數(shù)組定義時(shí)長(zhǎng)度可以控制也可以不去控制治泥。
使用方式：
<script type="text/javascript">
//var mycars=new Array(3)
//mycars[0]="Saab"
//mycars[1]="Volvo"
//mycars[2]="BMW"
var myarr=new Array(); //定義數(shù)組
myarr[0]=80;
myarr[1]=60;
myarr[2]=99;
document.write("第一個(gè)人的成績(jī)是:"+myarr[0]);
document.write("第二個(gè)人的成績(jī)是:"+myarr[1]);
document.write("第三個(gè)人的成績(jī)是:"+myarr[2]);
</script>
<b>3.2 組團(tuán)筹煮，并給團(tuán)取個(gè)名（如何創(chuàng)建數(shù)組）</b>
??使用數(shù)組之前首先要?jiǎng)?chuàng)建，而且需要把數(shù)組本身賦至一個(gè)變量居夹。好比我們出游寺谤，要組團(tuán)，并給團(tuán)定個(gè)名字“云南之旅”吮播。
<i>注意：
1.創(chuàng)建的新數(shù)組是空數(shù)組变屁，沒(méi)有值，如輸出意狠，則顯示undefined粟关。
2.<b>雖然創(chuàng)建數(shù)組時(shí)，指定了長(zhǎng)度环戈，但實(shí)際上數(shù)組都是變長(zhǎng)的闷板，也就是說(shuō)即使指定了長(zhǎng)度為8，仍然可以將元素存儲(chǔ)在規(guī)定長(zhǎng)度以外院塞。</b></i>
<b>3.3 誰(shuí)是團(tuán)里成員（數(shù)組賦值）</b>
第一種方法：
var myarray=new Array(); //創(chuàng)建一個(gè)新的空數(shù)組
myarray[0]=66; //存儲(chǔ)第1個(gè)人的成績(jī)
myarray[1]=80; //存儲(chǔ)第2個(gè)人的成績(jī)
第二種方法：
var myarray = new Array(66,80,90,77,59);//創(chuàng)建數(shù)組同時(shí)賦值
第三種方法：
var myarray = [66,80,90,77,59];//直接輸入一個(gè)數(shù)組（稱 “字面量數(shù)組”）
<b>3.4團(tuán)里添加新成員（向數(shù)組增加一個(gè)新元素）</b>
因?yàn)閿?shù)組的長(zhǎng)度是可變的遮晚，所以只需使用下一個(gè)未用的索引，任何時(shí)刻可以不斷向數(shù)組增加新元素拦止。
<b>3.5 呼叫團(tuán)里成員(使用數(shù)組元素)</b>
<b>3.6 了解成員數(shù)量(數(shù)組屬性length)</b>
語(yǔ)法：
myarray.length; //獲得數(shù)組myarray的長(zhǎng)度
<b>3.7 二維數(shù)組</b>
二維數(shù)組的表示: myarray[ ][ ]
創(chuàng)建一個(gè)二維數(shù)組【3】【6】县遣，并賦值糜颠。
<script type="text/javascript">
var myarr=new Array(); //先聲明一維
for(var i=0;i<3;i++){ //一維長(zhǎng)度為3
myarr[i]=new Array(); //再聲明二維
for(var j=0;j<6;j++){ //二維長(zhǎng)度為6
myarr[i][j]=i*j; // 賦值，每個(gè)數(shù)組元素的值為i*j
}
}
</script>
在js中二維數(shù)組的定義不太像java中的int 【】【】myarr = new int【2】【2】萧求；這種方式其兴。下面介紹下，js的二維數(shù)組的定義夸政。
實(shí)例一：
var arr = [[1,2],[a,b]];
alert(arr[1][0]); //a 第2列第1行所在的元素
實(shí)例二：
var arr = new array(new array(1,2),new array("a","b"));
alert(arr[1][0]);
實(shí)例三：二維數(shù)組的聲明：
var arr = new array(); //先聲明一維
for(var i=0;i<5;i++){ //一維長(zhǎng)度為5
arr[i]=new array(); //在聲明二維
for(var j=0;j<5;j++){ //二維長(zhǎng)度為5
arr[i][j]=1;
}
}
<h5>第4章 跟著我的節(jié)奏走(流程控制語(yǔ)句)</h5>
<b>4.1 做判斷（if語(yǔ)句）</b>
<i>語(yǔ)法:</i>
if(條件)
{ 條件成立時(shí)執(zhí)行代碼}
<b>注意：if小寫(xiě)元旬，大寫(xiě)字母（IF）會(huì)出錯(cuò)！</b>
<b>4.2 二選一 （if...else語(yǔ)句）</b>
<i>語(yǔ)法:</i>
if(條件)
{ 條件成立時(shí)執(zhí)行的代碼}
else
{條件不成立時(shí)執(zhí)行的代碼}
<b>4.3 多重判斷（if..else嵌套語(yǔ)句）</b>
<i>語(yǔ)法:</i>
if(條件1)
{ 條件1成立時(shí)執(zhí)行的代碼}
else if(條件2)
{ 條件2成立時(shí)執(zhí)行的代碼}
...
else if(條件n)
{ 條件n成立時(shí)執(zhí)行的代碼}
else
{ 條件1守问、2至n不成立時(shí)執(zhí)行的代碼}
<b>4.4 多種選擇（Switch語(yǔ)句)</b>
<i>語(yǔ)法:</i>
switch(表達(dá)式)
{
case值1:
執(zhí)行代碼塊 1
break;
case值2:
執(zhí)行代碼塊 2
break;
...
case值n:
執(zhí)行代碼塊 n
break;
default:
與 case值1 匀归、 case值2...case值n 不同時(shí)執(zhí)行的代碼
}
<b>4.5 重復(fù)重復(fù)（for循環(huán)）</b>
<i>for語(yǔ)句結(jié)構(gòu)：</i>
for(初始化變量;循環(huán)條件;循環(huán)迭代)
{
循環(huán)語(yǔ)句
}
這個(gè)地方我寫(xiě)mymoney < 11竟然說(shuō)我錯(cuò)，不給力耗帕。
<script type="text/JavaScript">
var mymoney,sum=0;//mymoney變量存放不同面值穆端，sum總計(jì)
for(mymoney=1;mymoney<=10;mymoney++)
{
sum= sum + mymoney;
}
document.write("sum合計(jì):"+sum);
</script>
<b>4.6 反反復(fù)復(fù)(while循環(huán))</b>
<i>while語(yǔ)句結(jié)構(gòu)：</i>
while(判斷條件)
{
循環(huán)語(yǔ)句
}
<script type="text/javascript">
var num=0; //初始化值
while (num<=6) //條件判斷
{
document.write("取出第"+num+"個(gè)球<br />");
num=num+1; //條件值更新
}
</script>
<b>4.7 來(lái)來(lái)回回(Do...while循環(huán))</b>
<i>do...while語(yǔ)句結(jié)構(gòu)：</i>
do
{
循環(huán)語(yǔ)句
}
while(判斷條件)
<b>4.8 退出循環(huán)break</b>
<i>格式如下：</i>
for(初始條件;判斷條件;循環(huán)后條件值更新)
{
if(特殊情況)
{break;}
循環(huán)代碼
}
<b>4.9 繼續(xù)循環(huán)continue</b>
<i>語(yǔ)句結(jié)構(gòu)：</i>
for(初始條件;判斷條件;循環(huán)后條件值更新)
{
if(特殊情況)
{ continue; }
循環(huán)代碼
}
<h5>第5章 小程序，大作用（函數(shù)）</h5>
<b>5.1 什么是函數(shù)</b>
??函數(shù)兴垦，又稱方法徙赢，函數(shù)的作用，可以寫(xiě)一次代碼探越，然后反復(fù)地重用這個(gè)代碼狡赐。
<b>5.2 定義函數(shù)</b>
如何定義一個(gè)函數(shù)呢？看看下面的格式：
function 函數(shù)名( )
{
函數(shù)體;
}
在此處并沒(méi)有像java和c#一樣钦幔，對(duì)方法的訪問(wèn)權(quán)限還有一定的限制枕屉，如public static void等。無(wú)需定義返回類型鲤氢，也沒(méi)有入口函數(shù)搀擂，寫(xiě)好之后，調(diào)用即可卷玉。
例如下面代碼：
<script type="text/javascript">
function sub2() //定義函數(shù)
{
sub=5-2;
alert("5和2的差:"+sub);
}
</script>
</head>
<body>
<form>
<input type="button" value="點(diǎn)擊我" onclick="sub2()" /><!--點(diǎn)擊后引用函數(shù)-->
</form>
<b>5.3 函數(shù)調(diào)用</b>
??函數(shù)定義好后哨颂，是不能自動(dòng)執(zhí)行的，需要調(diào)用它,直接在需要的位置寫(xiě)函數(shù)名相种。
第一種情況:在<script>標(biāo)簽內(nèi)調(diào)用威恼。
<script type="text/javascript">
function add2()
{
sum = 1 + 1;
alert(sum);
}
add2();//調(diào)用函數(shù)，直接寫(xiě)函數(shù)名寝并。
</SCRIPT>
第二種情況:在HTML文件中調(diào)用箫措，如通過(guò)點(diǎn)擊按鈕后調(diào)用定義好的函數(shù)。
<html>
<head>
<script type="text/javascript">
function add2()
{
sum = 5 + 6;
alert(sum);
}
</script>
</head>
<body>
<form>
<input type="button" value="click it" onclick="add2()"> //按鈕,onclick點(diǎn)擊事件衬潦，直接寫(xiě)函數(shù)名
</form>
</body>
</html>
<b>5.4 有參數(shù)的函數(shù)</b>
格式：
function 函數(shù)名(參數(shù)1,參數(shù)2)
{
函數(shù)代碼
}
樣例代碼：
function add2(x,y)
{
sum = x + y;
document.write(sum);
}
<b>5.5 返回值的函數(shù)</b>
基本格式：
function add2(x,y)
{
sum = x + y;
return sum; //返回函數(shù)值,return后面的值叫做返回值斤蔓。
}
使用方式：
<script type="text/javascript">
function app2(x,y)
{ var sum,x,y;
sum = x * y;
return sum;
}
var req1 = app2(5,6);
var req2 = app2(2,3);
var sumq = req1 + req2;
document.write("req1的值:"+req1+"<br/>");
document.write("req2的值:"+req2+"<br/>");
document.write(req1+"與"+req2+"和:"+sumq);
</script>
既然有了返回值，我們就可以進(jìn)行利用镀岛，將其存放在變量之中弦牡。
運(yùn)行結(jié)果：
<h5>第6章 事件響應(yīng)友驮，讓網(wǎng)頁(yè)交互</h5>
<b>6.1 什么是事件</b>
??JavaScript 創(chuàng)建動(dòng)態(tài)頁(yè)面。事件是可以被 JavaScript 偵測(cè)到的行為喇伯。 網(wǎng)頁(yè)中的每個(gè)元素都可以產(chǎn)生某些可以觸發(fā) JavaScript 函數(shù)或程序的事件喊儡。
??比如說(shuō)拨与，當(dāng)用戶單擊按鈕或者提交表單數(shù)據(jù)時(shí)稻据，就發(fā)生一個(gè)鼠標(biāo)單擊（onclick）事件，需要瀏覽器做出處理买喧，返回給用戶一個(gè)結(jié)果捻悯。
主要事件表：
<b>6.2 鼠標(biāo)單擊事件( onclick ）</b>
?&esmp;onclick是鼠標(biāo)單擊事件，當(dāng)在網(wǎng)頁(yè)上單擊鼠標(biāo)時(shí)淤毛，就會(huì)發(fā)生該事件今缚。同時(shí)onclick事件調(diào)用的程序塊就會(huì)被執(zhí)行，通常與按鈕一起使用低淡。
基本使用方式：
<html>
<head>
<script type="text/javascript">
function add2(){
var numa,numb,sum;
numa=6;
numb=8;
sum=numa+numb;
document.write("兩數(shù)和為:"+sum); }
</script>
</head>
<body>
<form>
<input name="button" type="button" value="點(diǎn)擊提交" onclick="add2()" />
</form>
</body>
</html>
<b>6.3 鼠標(biāo)經(jīng)過(guò)事件（onmouseover）</b>
??鼠標(biāo)經(jīng)過(guò)事件姓言，當(dāng)鼠標(biāo)移到一個(gè)對(duì)象上時(shí)，該對(duì)象就觸發(fā)onmouseover事件蔗蹋，并執(zhí)行onmouseover事件調(diào)用的程序何荚。
基本使用方式：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 鼠標(biāo)經(jīng)過(guò)事件 </title>
<script type="text/javascript">
function message(){
confirm("請(qǐng)輸入密碼后，再單擊確定!"); }
</script>
</head>
<body>
<form>
密碼:<input name="password" type="password" onmouseover = "message()">
<input name="確定" type="button" value="確定"/>
</form>
</body>
</html>
6.4 鼠標(biāo)移開(kāi)事件（onmouseout）
??鼠標(biāo)移開(kāi)事件猪杭，當(dāng)鼠標(biāo)移開(kāi)當(dāng)前對(duì)象時(shí)餐塘，執(zhí)行onmouseout調(diào)用的程序。
基本使用方式：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠標(biāo)移開(kāi)事件 </title>
<script type="text/javascript">
function message(){
alert("不要移開(kāi)皂吮，點(diǎn)擊后進(jìn)行慕課網(wǎng)!"); }
</script>
</head>
<body>
<form>
<a onmouseout = "message()">點(diǎn)擊我</a>
</form>
</body>
</html>
6.5 光標(biāo)聚焦事件（onfocus）
??當(dāng)網(wǎng)頁(yè)中的對(duì)象獲得聚點(diǎn)時(shí)戒傻，執(zhí)行onfocus調(diào)用的程序就會(huì)被執(zhí)行。
基本使用：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 光標(biāo)聚焦事件 </title>
<script type="text/javascript">
function message(){
alert("請(qǐng)選擇蜂筹，您現(xiàn)在的職業(yè)需纳！");
}
</script>
</head>
<body>
請(qǐng)選擇您的職業(yè)：<br>
<form onfocus = "message()">
<select name="career">
<option>學(xué)生</option>
<option>教師</option>
<option>工程師</option>
<option>演員</option>
<option>會(huì)計(jì)</option>
</select>
</form>
</body>
</html>
這個(gè)地方也沒(méi)有輸入框，怎么聚焦嘞……這個(gè)好像不能調(diào)用這個(gè)函數(shù)艺挪，再另外寫(xiě)一個(gè)輸入框來(lái)驗(yàn)證這個(gè)函數(shù)把不翩，可能我還不知道怎么聚焦這form上吧，不過(guò)出于用戶角度闺属，也很少有人找到吧慌盯，嘿嘿……
調(diào)用上面已經(jīng)編寫(xiě)好的函數(shù)：
<input type="text" onfocus = "message()">
<b>6.6 失焦事件</b>
??onblur事件與onfocus是相對(duì)事件掂器，當(dāng)光標(biāo)離開(kāi)當(dāng)前獲得聚焦對(duì)象的時(shí)候亚皂，觸發(fā)onblur事件，同時(shí)執(zhí)行被調(diào)用的程序国瓮。
代碼：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 失焦事件 </title>
<script type="text/javascript">
function message(){
alert("請(qǐng)確定已輸入密碼后灭必，在移開(kāi)!"); }
</script>
</head>
<body>
<form>
用戶:<input name="username" type="text" value="請(qǐng)輸入用戶名狞谱！" ><br/><br/>
密碼:<input name="password" type="text" value="請(qǐng)輸入密碼！" onblur = "message()">
</form>
</body>
</html>
<b>6.7 內(nèi)容選中事件（onselect）</b>
??選中事件禁漓，當(dāng)文本框或者文本域中的文字被選中時(shí)跟衅，觸發(fā)onselect事件，同時(shí)調(diào)用的程序就會(huì)被執(zhí)行播歼。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 內(nèi)容選中事件 </title>
<script type="text/javascript">
function message(){
alert("您觸發(fā)了選中事件伶跷！"); }
</script>
</head>
<body>
<form>
個(gè)人簡(jiǎn)介：<br>
<textarea name="summary" cols="60" rows="5" onselect="message()">請(qǐng)寫(xiě)入個(gè)人簡(jiǎn)介，不少于200字秘狞！</textarea>
</form>
</body>
</html>
<b>6.8 文本框內(nèi)容改變事件（onchange）</b>
??通過(guò)改變文本框的內(nèi)容來(lái)觸發(fā)onchange事件叭莫，同時(shí)執(zhí)行被調(diào)用的程序。
改變內(nèi)容后烁试，光標(biāo)離開(kāi)后便開(kāi)始出發(fā)事件雇初。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 文本框內(nèi)容改變事件 </title>
<script type="text/javascript">
function message(){
alert("您改變了文本內(nèi)容！"); }
</script>
</head>
<body>
<form>
個(gè)人簡(jiǎn)介：<br>
<textarea name="summary" cols="60" rows="5" onchange="message()">請(qǐng)寫(xiě)入個(gè)人簡(jiǎn)介减响，不少于200字靖诗！</textarea>
</form>
</body>
</html>
<b>6.9 加載事件（onload）</b>
??事件會(huì)在頁(yè)面加載完成后，立即發(fā)生支示，同時(shí)執(zhí)行被調(diào)用的程序刊橘。
<body onload="message()"> </body>
<b>6.10 卸載事件（onunload）</b>
當(dāng)用戶退出頁(yè)面時(shí)（頁(yè)面關(guān)閉、頁(yè)面刷新等）悼院，觸發(fā)onUnload事件伤为，同時(shí)執(zhí)行被調(diào)用的程序。
<font color="red">注意：不同瀏覽器對(duì)onunload事件支持不同据途。</color>
試了下绞愚，2345，谷歌都沒(méi)效果颖医，在editplus里調(diào)試的瀏覽器上出現(xiàn)了效果位衩，而且是我已經(jīng)關(guān)了瀏覽器之后才出現(xiàn)的，可見(jiàn)這個(gè)已經(jīng)被淘汰了熔萧。
<b>6.11 編程練習(xí)（簡(jiǎn)單的計(jì)算器）</b>
代碼：
<!DOCTYPE html>
<html>
<head>
<title> 事件</title>
<script type="text/javascript">
function count(){
//獲取第一個(gè)輸入框的值
var txt1 = document.getElementById("txt1").value;
//獲取第二個(gè)輸入框的值
var txt2 = document.getElementById("txt2").value;
//獲取選擇框的值
var selection = document.getElementById("select").value;
var result;
//獲取通過(guò)下拉框來(lái)選擇的值來(lái)改變加減乘除的運(yùn)算法則
switch(selection){
case "+": result = parseFloat(txt1) + parseFloat(txt2);break;
case "-": result = parseFloat(txt1) - parseFloat(txt2);break;
case "*": result = parseFloat(txt1) * parseFloat(txt2);break;
case "/" : result = parseFloat(txt1) / parseFloat(txt2);break;
default :document.write("there is a error");
}
document.getElementById("fruit").value = result;
}
</script>
</head>
<body>
<input type='text' id='txt1' />
<select id='select'>
<option value='+'>+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type='text' id='txt2' />
<input type='button' value=' = ' onclick = "count()"/> <!--通過(guò) = 按鈕來(lái)調(diào)用創(chuàng)建的函數(shù)糖驴，得到結(jié)果-->
<input type='text' id='fruit' />
</body>
</html>
第7章 JavaScript內(nèi)置對(duì)象
7-1 什么是對(duì)象
什么是對(duì)象
??JavaScript 中的所有事物都是對(duì)象，如:字符串佛致、數(shù)值贮缕、數(shù)組、函數(shù)等俺榆，每個(gè)對(duì)象帶有屬性和方法(在java/c#中的解釋也是萬(wàn)物皆對(duì)象感昼，面向?qū)ο缶幊虩o(wú)論使用什么語(yǔ)言，其思想是一樣的罐脊，方法也是類似的)定嗓。
??對(duì)象的屬性：反映該對(duì)象某些特定的性質(zhì)的蜕琴，如：字符串的長(zhǎng)度、圖像的長(zhǎng)寬等宵溅；
??對(duì)象的方法：能夠在對(duì)象上執(zhí)行的動(dòng)作凌简。例如，表單的“提交”(Submit)恃逻，時(shí)間的“獲取”(getYear)等雏搂；
??JavaScript 提供多個(gè)內(nèi)建對(duì)象，比如 String辛块、Date畔派、Array 等等铅碍，使用對(duì)象前先定義润绵，如下使用數(shù)組對(duì)象：
var objectName =new Array();//使用new關(guān)鍵字定義對(duì)象
或者
var objectName =[];
訪問(wèn)對(duì)象屬性的語(yǔ)法:
objectName.propertyName
訪問(wèn)對(duì)象的方法：
objectName.methodName()
7.2 Date 日期對(duì)象
??日期對(duì)象可以儲(chǔ)存任意一個(gè)日期，并且可以精確到毫秒數(shù)（1/1000 秒）胞谈。
定義一個(gè)時(shí)間對(duì)象 :
var Udate=new Date();
<i>注意:使用關(guān)鍵字new尘盼，Date()的首字母必須大寫(xiě)。</i>
訪問(wèn)方法語(yǔ)法：“<日期對(duì)象>.<方法>”
下圖注意月份要加一和毫秒與秒是1s = 1000ms;
7.3 返回/設(shè)置年份方法
get/setFullYear() 返回/設(shè)置年份烦绳，用四位數(shù)表示卿捎。
7.4 返回星期方法
??getDay() 返回星期，返回的是0-6的數(shù)字径密，0 表示星期天午阵。如果要返回相對(duì)應(yīng)“星期”，通過(guò)數(shù)組完成享扔，代碼如下:
<script type="text/javascript">
var mydate=new Date();//定義日期對(duì)象
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
//定義數(shù)組對(duì)象,給每個(gè)數(shù)組項(xiàng)賦值
var mynum=mydate.getDay();//返回值存儲(chǔ)在變量mynum中
document.write(mydate.getDay());//輸出getDay()獲取值
document.write("今天是："+ weekday[mynum]);//輸出星期幾
</script>
7.5 返回/設(shè)置時(shí)間方法
??get/setTime() 返回/設(shè)置時(shí)間底桂，單位毫秒數(shù)，計(jì)算從 1970 年 1 月 1 日零時(shí)到日期對(duì)象所指的日期的毫秒數(shù)惧眠。
7.6 String 字符串對(duì)象
<i>用法：</i>
var mystr = "I love JavaScript!"
7.7 返回指定位置的字符
??charAt() 方法可返回指定位置的字符籽懦。返回的字符是長(zhǎng)度為 1 的字符串。
<i>語(yǔ)法：</i>
stringObject.charAt(index)
<i>參數(shù)說(shuō)明：</i>
7.8 返回指定的字符串首次出現(xiàn)的位置
??indexOf() 方法可返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置氛魁。
<i>語(yǔ)法：</i>
stringObject.indexOf(substring, startpos)
參數(shù)說(shuō)明：
<i>例題：</i>
??補(bǔ)充右邊編輯器第8行暮顺，使用indexOf()方法，檢索第二個(gè)字符ｏ出現(xiàn)的位置秀存。
<i>代碼：</i>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>string對(duì)象 </title>
<script type="text/javascript">
var mystr="Hello World!"
document.write(mystr.indexOf("o",2));
</script>
</head>
<body>
</body>
</html>
7.9 字符串分割split()
<i>說(shuō)明：</i>
??split() 方法將字符串分割為字符串?dāng)?shù)組捶码，并返回此數(shù)組。
<i>語(yǔ)法：</i>
stringObject.split(separator,limit)
<i>參數(shù)說(shuō)明：</i>
<i>例題：</i>
??運(yùn)用split()方法或链，完成以下任務(wù)惫恼，并輸出:
??1. 補(bǔ)充右邊編輯器第8行，以字符"-"分隔字符串對(duì)象mystr株扛。
??2. 補(bǔ)充右邊編輯器第9行尤筐，將字符串對(duì)象mystr每個(gè)字符分割汇荐。
??3. 補(bǔ)充右邊編輯器第10行，將字符串對(duì)象mystr分割成字符盆繁，分割3次掀淘。
<i>代碼：</i>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無(wú)標(biāo)題文檔</title>
<script type="text/javascript">
var mystr="86-010-85468578";
document.write( mystr.split("-") + "<br />");
document.write( mystr.split("") + "<br />");
document.write(mystr.split("",3) );
</script>
</head>
<body>
</body>
</html>
7.10 提取字符串substring()
<i>語(yǔ)法：</i>
stringObject.substring(startPos,stopPos)
<i>參數(shù)說(shuō)明：</i>
<i>注意：</i>
??1. 返回的內(nèi)容是從 start開(kāi)始(包含start位置的字符)到 stop-1 處的所有字符，其長(zhǎng)度為 stop 減start油昂。
??2. 如果參數(shù) start 與 stop 相等革娄，那么該方法返回的就是一個(gè)空串（即長(zhǎng)度為 0 的字符串）。
??3. 如果 start 比 stop 大冕碟，那么該方法在提取子串之前會(huì)先交換這兩個(gè)參數(shù)拦惋。
7.11 提取指定數(shù)目的字符substr()
??substr() 方法從字符串中提取從 startPos位置開(kāi)始的指定數(shù)目的字符串。
<i>語(yǔ)法:</i>
??stringObject.substr(startPos,length)
<i>參數(shù)說(shuō)明:</i>
<i>注意：</i>
??如果參數(shù)startPos是負(fù)數(shù)安寺，從字符串的尾部開(kāi)始算起的位置厕妖。也就是說(shuō)，-1 指字符串中最后一個(gè)字符挑庶，-2 指倒數(shù)第二個(gè)字符言秸，以此類推。
??如果startPos為負(fù)數(shù)且絕對(duì)值大于字符串長(zhǎng)度迎捺，startPos為0举畸。
7.12 Math對(duì)象
??Math對(duì)象，提供對(duì)數(shù)據(jù)的數(shù)學(xué)計(jì)算凳枝。
<i>注意：</i>
??Math 對(duì)象是一個(gè)固有的對(duì)象抄沮，無(wú)需創(chuàng)建它，直接把 Math 作為對(duì)象使用就可以調(diào)用其所有屬性和方法岖瑰。這是它與Date,String對(duì)象的區(qū)別叛买。
<i>Math 對(duì)象的屬性</i>
<i>Math對(duì)象的方法</i>
7.13 向上取整ceil()
<i>語(yǔ)法:</i>
Math.ceil(x)
<i>參數(shù)說(shuō)明:</i>
7.14 向下取整floor()
<i>語(yǔ)法:</i>
Math.floor(x)
<i>參數(shù)說(shuō)明:</i>
7.15 四舍五入round()
<i>語(yǔ)法:</i>
Math.round(x)
<i>參數(shù)說(shuō)明:</i>
7.16 隨機(jī)數(shù) random()
??random() 方法可返回介于 0 ~ 1（大于或等于 0 但小于 1 )之間的一個(gè)隨機(jī)數(shù)。
<i>語(yǔ)法：</i>
Math.random();
<i>注意：</i>
返回一個(gè)大于或等于 0 但小于 1 的符號(hào)為正的數(shù)字值锭环。
7.17 Array 數(shù)組對(duì)象
??數(shù)組對(duì)象是一個(gè)對(duì)象的集合聪全，里邊的對(duì)象可以是不同類型的。數(shù)組的每一個(gè)成員對(duì)象都有一個(gè)“下標(biāo)”辅辩，用來(lái)表示它在數(shù)組中的位置难礼，是從零開(kāi)始的
<i>數(shù)組定義的方法：</i>
- 定義了一個(gè)空數(shù)組:
var 數(shù)組名= new Array();
- 定義時(shí)指定有n個(gè)空元素的數(shù)組：
var 數(shù)組名 =new Array(n);
3.定義數(shù)組的時(shí)候，直接初始化數(shù)據(jù)：
var 數(shù)組名 = [<元素1>, <元素2>, <元素3>...];
3.定義myArray數(shù)組玫锋，并賦值蛾茉，代碼如下：
var myArray = [2, 8, 6];
<i>說(shuō)明：</i>
定義了一個(gè)數(shù)組 myArray，里邊的元素是：myArray[0] = 2; myArray[1] = 8; myArray[2] = 6撩鹿。
<i>數(shù)組元素使用：</i>
數(shù)組名[下標(biāo)] = 值;
<i>注意:</i>
數(shù)組的下標(biāo)用方括號(hào)括起來(lái)谦炬，從0開(kāi)始。
<i>數(shù)組屬性：</i>
<i>length 用法：</i>
<數(shù)組對(duì)象>.length；返回：數(shù)組的長(zhǎng)度键思，即數(shù)組里有多少個(gè)元素溜腐。它等于數(shù)組里最后一個(gè)元素的下標(biāo)加一括勺。
<i>數(shù)組方法：</i>
7.18 數(shù)組連接concat()
concat() 方法用于連接兩個(gè)或多個(gè)數(shù)組。此方法返回一個(gè)新數(shù)組，不改變?cè)瓉?lái)的數(shù)組夯缺。
語(yǔ)法:
arrayObject.concat(array1,array2,...,arrayN)
參數(shù)說(shuō)明：
**注意: **該方法不會(huì)改變現(xiàn)有的數(shù)組纺蛆，而僅僅會(huì)返回被連接數(shù)組的一個(gè)副本瓢剿。
7.19 指定分隔符連接數(shù)組元素join()
join()方法用于把數(shù)組中的所有元素放入一個(gè)字符串额划。元素是通過(guò)指定的分隔符進(jìn)行分隔的。
語(yǔ)法：
arrayObject.join(分隔符)
參數(shù)說(shuō)明:
<i>注意：</i>
返回一個(gè)字符串疾党，該字符串把數(shù)組中的各個(gè)元素串起來(lái)音诫，用<分隔符>置于元素與元素之間。這個(gè)方法不影響數(shù)組原本的內(nèi)容雪位。
<i>代碼:</i>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Array對(duì)象 </title>
<script type="text/javascript">
var myarr1= new Array("86","010")
var myarr2= new Array("84697581");
var myarr3= myarr1.concat(myarr2);
document.write(myarr3.join("-"));
</script>
</head>
<body>
</body>
</html>
7.20 顛倒數(shù)組元素順序reverse()
??reverse() 方法用于顛倒數(shù)組中元素的順序竭钝。
<i>語(yǔ)法：</i>
arrayObject.reverse()
<i>注意：</i>
該方法會(huì)改變?cè)瓉?lái)的數(shù)組，而不會(huì)創(chuàng)建新的數(shù)組茧泪。
7.21 選定元素 slice（）
slice() 方法可從已有的數(shù)組中返回選定的元素蜓氨。
<i>語(yǔ)法</i>
arrayObject.slice(start,end)
??1.返回一個(gè)新的數(shù)組，包含從 start 到 end （不包括該元素）的 arrayObject 中的元素队伟。
??2. 該方法并不會(huì)修改數(shù)組，而是返回一個(gè)子數(shù)組幽勒。
<i>注意：</i>
??1. 可使用負(fù)值從數(shù)組的尾部選取元素嗜侮。
??2.如果 end 未被規(guī)定，那么 slice() 方法會(huì)選取從 start 到數(shù)組結(jié)尾的所有元素啥容。
??3. String.slice() 與 Array.slice() 相似锈颗。
7.22 數(shù)組排序sort()
??sort()方法使數(shù)組中的元素按照一定的順序排列。
<i>語(yǔ)法:</i>
arrayObject.sort(方法函數(shù))
<i>參數(shù)說(shuō)明：</i>
??1.如果不指定<方法函數(shù)>咪惠，則按unicode碼順序排列击吱。
??2.如果指定<方法函數(shù)>，則按<方法函數(shù)>所指定的排序方法排序遥昧。
myArray.sort(sortMethod);
<i>注意: </i>
??該函數(shù)要比較兩個(gè)值覆醇，然后返回一個(gè)用于說(shuō)明這兩個(gè)值的相對(duì)順序的數(shù)字。比較函數(shù)應(yīng)該具有兩個(gè)參數(shù) a 和 b炭臭，其返回值如下：
??若返回值<=-1永脓，則表示 A 在排序后的序列中出現(xiàn)在 B 之前。 若返回值>-1 && <1鞋仍，則表示 A 和 B 具有相同的排序順序常摧。 若返回值>=1，則表示 A 在排序后的序列中出現(xiàn)在 B 之后。
<i>升序排序例題：</i>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Array對(duì)象 </title>
<script type="text/javascript">
function sortNum(a,b) {
return a -b ;
}
var myarr = new Array("80","16","50","6","100","1");
document.write(myarr.sort(sortNum));
</script>
</head>
<body>
</body>
</html>
感覺(jué)這個(gè)地方有點(diǎn)難懂……
<i>資料查找</i>
貌似還不能解決問(wèn)題……
<i>接著查：</i>
代碼：
function sortNumber(a, b){
return a - b; //這里返回的是他們的差值落午，如果是小于0的值谎懦，就會(huì)將a排在前面，如果大于0,就會(huì)將b排在前面溃斋，如果是0的話党瓮，就隨便。（冒泡排序法Ｑ卫唷Ｄ椤）
}
因?yàn)椋喝?a 小于 b，在排序后的數(shù)組中 a 應(yīng)該出現(xiàn)在 b 之前在跳，則返回一個(gè)小于 0 的值枪萄。
??若 a 等于 b，則返回 0猫妙。
??若 a 大于 b瓷翻，則返回一個(gè)大于 0 的值
這里說(shuō)明一下這個(gè)過(guò)程，明明sortNum應(yīng)該是有兩個(gè)參數(shù)割坠，但是我們?cè)谡{(diào)用時(shí)卻一個(gè)參數(shù)都沒(méi)有齐帚，怎么進(jìn)行比較啊彼哼？這里是這樣的对妄，當(dāng)arr從第一個(gè)數(shù)開(kāi)始調(diào)用sort時(shí)，80前面是沒(méi)有數(shù)與它比較的敢朱，所以就到第二個(gè)剪菱，就是16，這時(shí)80就會(huì)與16比較拴签，于是就會(huì)調(diào)用sortNumber并將80和16傳進(jìn)去孝常，這是sort（）的特性。
7.23 編程練習(xí)
<i>要求：</i>
??第一步：可通過(guò)javascript的日期對(duì)象來(lái)得到當(dāng)前的日期蚓哩。
??提示:使用Date()日期對(duì)象构灸，注意星期返回值為0-6，所以要轉(zhuǎn)成文字"星期X"
??第二步：一長(zhǎng)竄的字符串不好弄岸梨，找規(guī)律后分割放到數(shù)組里更好操作哦喜颁。
??第三步：分割字符串得到分?jǐn)?shù)，然后求和取整盛嘿。
<i>代碼：</i>
<!DOCTYPE HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>系好安全帶,準(zhǔn)備啟航</title>
<script type="text/javascript">
//通過(guò)javascript的日期對(duì)象來(lái)得到當(dāng)前的日期洛巢，并輸出。
var weekday=["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];
var nowDate=new Date();
document.write(nowDate.getFullYear()+"年"+(nowDate.getMonth()+1)+"月"+nowDate.getDate()+"日"+" "+weekday[nowDate.getDay()]+"--班級(jí)總分為：");
//成績(jī)是一長(zhǎng)竄的字符串不好處理次兆，找規(guī)律后分割放到數(shù)組里更好操作哦
var scoreStr = "小明:87;小花:81;小紅:97;小天:76;小張:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76";
//從數(shù)組中將成績(jī)撮出來(lái)稿茉，然后求和取整，并輸出。
var newArr=scoreStr.split(";");
var sum=0;
for (var i=0;i< newArr.length;i++) {
sum=sum+parseInt(newArr[i].substring(3));
}
document.write("班級(jí)平均分為："+Math.round(sum/newArr.length));
</script>
</head>
<body>
</body>
</html>
第8章 瀏覽器對(duì)象
8.1 window對(duì)象
??window對(duì)象是BOM的核心漓库，window對(duì)象指當(dāng)前的瀏覽器窗口恃慧。
window對(duì)象方法：
注意:
在JavaScript基礎(chǔ)篇中，已講解了部分屬性渺蒿，window對(duì)象重點(diǎn)講解計(jì)時(shí)器痢士。
例題：彈出一個(gè)網(wǎng)頁(yè)(window.open()的使用練習(xí))
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>window對(duì)象</title>
<script type="text/javascript">
function Wopen(){
var mymessage=confirm("are you sure?");
if(mymessage==true)
{
window.open('http://www.iotzzh.com','_blank','width=600,height=400,top100px,left=0px');
}
}
</script>
</head>
<body>
<form>
<input type="button" value="點(diǎn)擊我，打開(kāi)新窗口" onClick="Wopen()"/>
</form>
</body>
</html>
8.2 JavaScript 計(jì)時(shí)器
??在JavaScript中茂装，我們可以在設(shè)定的時(shí)間間隔之后來(lái)執(zhí)行代碼怠蹂，而不是在函數(shù)被調(diào)用后立即執(zhí)行。
計(jì)時(shí)器類型：
??一次性計(jì)時(shí)器：僅在指定的延遲時(shí)間之后觸發(fā)一次少态。
??間隔性觸發(fā)計(jì)時(shí)器：每隔一定的時(shí)間間隔就觸發(fā)一次城侧。
計(jì)時(shí)器方法：
8.3 計(jì)時(shí)器setInterval()
??在執(zhí)行時(shí),從載入頁(yè)面后每隔指定的時(shí)間執(zhí)行代碼。
語(yǔ)法:
setInterval(代碼,交互時(shí)間);
參數(shù)說(shuō)明：
??1. 代碼：要調(diào)用的函數(shù)或要執(zhí)行的代碼串彼妻。
2. 交互時(shí)間：周期性執(zhí)行或調(diào)用表達(dá)式之間的時(shí)間間隔嫌佑，以毫秒計(jì)（1s=1000ms）。
返回值:
??一個(gè)可以傳遞給 clearInterval() 從而取消對(duì)"代碼"的周期性執(zhí)行的值侨歉。
調(diào)用函數(shù)格式(假設(shè)有一個(gè)clock()函數(shù)):
setInterval("clock()",1000)
或
setInterval(clock,1000)
8.4 取消計(jì)時(shí)器clearInterval()
?emsp;clearInterval() 方法可取消由 setInterval() 設(shè)置的交互時(shí)間屋摇。
語(yǔ)法：
clearInterval(id_of_setInterval)
參數(shù)說(shuō)明:
id_of_setInterval：由 setInterval() 返回的 ID 值。
例題：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>計(jì)時(shí)器</title>
<script type="text/javascript">
function clock(){
var time=new Date();
document.getElementById("clock").value = time;
}
var T = setInterval(clock,1000);
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50" />
<input type="button" value="Stop" onclick = "clearInterval(T)" />
</form>
</body>
</html>
8.5 計(jì)時(shí)器setTimeout()
??setTimeout()計(jì)時(shí)器幽邓，在載入后延遲指定時(shí)間后,去執(zhí)行一次表達(dá)式,僅執(zhí)行一次炮温。
語(yǔ)法:
setTimeout(代碼,延遲時(shí)間);
參數(shù)說(shuō)明：
??1. 要調(diào)用的函數(shù)或要執(zhí)行的代碼串。
??2. 延時(shí)時(shí)間：在執(zhí)行代碼前需等待的時(shí)間颊艳，以毫秒為單位（1s=1000ms)茅特。
例題：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>計(jì)時(shí)器</title>
</head>
<script type="text/javascript">
var num=0;
function startCount() {
document.getElementById('count').value=num;
num=num+1;
setTimeout("startCount()",3000);
}
setTimeout("startCount()",3000);
</script>
</head>
<body>
<form>
<input type="text" id="count" onclick = "startCount()" />
</form>
</body>
</html>
說(shuō)明：
里面的timeout是設(shè)置3秒后調(diào)用自己，外面的timeout是設(shè)置打開(kāi)3秒后第一次調(diào)用該函數(shù)
8.6 取消計(jì)時(shí)器clearTimeout()
??setTimeout()和clearTimeout()一起使用棋枕，停止計(jì)時(shí)器。
語(yǔ)法:
clearTimeout(id_of_setTimeout)
參數(shù)說(shuō)明:
id_of_setTimeout：由 setTimeout() 返回的 ID 值妒峦。該值標(biāo)識(shí)要取消的延遲執(zhí)行代碼塊重斑。
例題：點(diǎn)擊按鈕控制是否計(jì)數(shù)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>計(jì)時(shí)器</title>
</head>
<script type="text/javascript">
var num=0;
var i;
function startCount(){
document.getElementById('count').value=num;
num=num+1;
i=setTimeout("startCount()",1000);
}
function stopCount(){
clearTimeout(i);
}
</script>
</head>
<body>
<form>
<input type="text" id="count" />
<input type="button" value="Start" onclick="startCount()" />
<input type="button" value="Stop" onclick="stopCount()" />
</form>
</body>
</html>
8.7 History 對(duì)象
??history對(duì)象記錄了用戶曾經(jīng)瀏覽過(guò)的頁(yè)面(URL)，并可以實(shí)現(xiàn)瀏覽器前進(jìn)與后退相似導(dǎo)航的功能肯骇。
注意:
從窗口被打開(kāi)的那一刻開(kāi)始記錄窥浪，每個(gè)瀏覽器窗口、每個(gè)標(biāo)簽頁(yè)乃至每個(gè)框架笛丙，都有自己的history對(duì)象與特定的window對(duì)象關(guān)聯(lián)漾脂。
語(yǔ)法：
window.history.[屬性|方法]
注意：window可以省略。
History 對(duì)象屬性
History 對(duì)象方法
8.8 返回前一個(gè)瀏覽的頁(yè)面
??back()方法胚鸯，加載 history 列表中的前一個(gè) URL骨稿。
語(yǔ)法：
window.history.back();
比如，返回前一個(gè)瀏覽的頁(yè)面，代碼如下：
window.history.back();
注意：等同于點(diǎn)擊瀏覽器的倒退按鈕坦冠。
back()相當(dāng)于go(-1),代碼如下:
window.history.go(-1);
8.9 返回下一個(gè)瀏覽的頁(yè)面
??forward()方法形耗，加載 history 列表中的下一個(gè) URL。如果倒退之后辙浑，再想回到倒退之前瀏覽的頁(yè)面激涤，則可以使用forward()方法。
window.history.forward();
window.history.go(1);
8.10 返回瀏覽歷史中的其他頁(yè)面
??go()方法判呕，根據(jù)當(dāng)前所處的頁(yè)面倦踢，加載 history 列表中的某個(gè)具體的頁(yè)面。
語(yǔ)法：
window.history.go(number);
8.11 Location對(duì)象
??location用于獲取或設(shè)置窗體的URL侠草，并且可以用于解析URL辱挥。
語(yǔ)法:
location.[屬性|方法]
location 對(duì)象屬性：
location 對(duì)象方法:
8.12 Navigator對(duì)象
??Navigator 對(duì)象包含有關(guān)瀏覽器的信息，通常用于檢測(cè)瀏覽器與操作系統(tǒng)的版本梦抢。
對(duì)象屬性:
8.13 userAgent
8.14 screen對(duì)象
??screen對(duì)象用于獲取用戶的屏幕信息般贼。
語(yǔ)法：
window.screen.屬性
對(duì)象屬性
8.15 屏幕分辨率的高和寬
??window.screen 對(duì)象包含有關(guān)用戶屏幕的信息。
??1. screen.height 返回屏幕分辨率的高
??2. screen.width 返回屏幕分辨率的寬
注意:
??1.單位以像素計(jì)奥吩。
??2. window.screen 對(duì)象在編寫(xiě)時(shí)可以不使用 window 這個(gè)前綴哼蛆。
8.16 屏幕可用高和寬度
??1. screen.availWidth 屬性返回訪問(wèn)者屏幕的寬度，以像素計(jì)霞赫，減去界面特性腮介，比如任務(wù)欄。
??2. screen.availHeight 屬性返回訪問(wèn)者屏幕的高度端衰，以像素計(jì)叠洗，減去界面特性，比如任務(wù)欄旅东。
注意:
??不同系統(tǒng)的任務(wù)欄默認(rèn)高度不一樣灭抑，及任務(wù)欄的位置可在屏幕上下左右任何位置，所以有可能可用寬度和高度不一樣抵代。
第9章 DOM對(duì)象腾节，控制HTML元素
9.1 認(rèn)識(shí)DOM
??文檔對(duì)象模型DOM（Document Object Model）定義訪問(wèn)和處理HTML文檔的標(biāo)準(zhǔn)方法。DOM 將HTML文檔呈現(xiàn)為帶有元素荤牍、屬性和文本的樹(shù)結(jié)構(gòu)（節(jié)點(diǎn)樹(shù)）案腺。
將HTML代碼分解為DOM節(jié)點(diǎn)層次圖:
節(jié)點(diǎn)屬性:
遍歷節(jié)點(diǎn)樹(shù):
DOM操作:
注意:前兩個(gè)是document方法。
9.2 getElementsByName()方法
語(yǔ)法：
document.getElementsByName(name)
注意:
??1. 因?yàn)槲臋n中的 name 屬性可能不唯一康吵，所有 getElementsByName() 方法返回的是元素的數(shù)組劈榨，而不是一個(gè)元素。
2. 和數(shù)組類似也有l(wèi)ength屬性晦嵌，可以和訪問(wèn)數(shù)組一樣的方法來(lái)訪問(wèn)同辣，從0開(kāi)始拷姿。
9.3 getElementsByTagName()方法
語(yǔ)法:
document.getElementsByTagName(Tagname)
說(shuō)明:
- Tagname是標(biāo)簽的名稱，如p邑闺、a跌前、img等標(biāo)簽名。
- 和數(shù)組類似也有l(wèi)ength屬性陡舅，可以和訪問(wèn)數(shù)組一樣的方法來(lái)訪問(wèn)抵乓，所以從0開(kāi)始。
9.4 區(qū)別getElementByID,getElementsByName,getElementsByTagName
??以人來(lái)舉例說(shuō)明靶衍，人有能標(biāo)識(shí)身份的身份證灾炭，有姓名，有類別(大人颅眶、小孩蜈出、老人)等。
1. ID 是一個(gè)人的身份證號(hào)碼涛酗，是唯一的铡原。所以通過(guò)getElementById獲取的是指定的一個(gè)人。
2. Name 是他的名字商叹，可以重復(fù)燕刻。所以通過(guò)getElementsByName獲取名字相同的人集合。
3. TagName可看似某類剖笙，getElementsByTagName獲取相同類的人集合卵洗。如獲取小孩這類人，getElementsByTagName("小孩")弥咪。
9.5 getAttribute()方法
語(yǔ)法：
elementNode.getAttribute(name)
9.6 setAttribute()方法
語(yǔ)法：
elementNode.setAttribute(name,value)
9.7 節(jié)點(diǎn)屬性
??在文檔對(duì)象模型 (DOM) 中过蹂，每個(gè)節(jié)點(diǎn)都是一個(gè)對(duì)象。DOM 節(jié)點(diǎn)有三個(gè)重要的屬性 ：
??1. nodeName : 節(jié)點(diǎn)的名稱
??2. nodeValue ：節(jié)點(diǎn)的值
??3. nodeType ：節(jié)點(diǎn)的類型
一聚至、nodeName 屬性: 節(jié)點(diǎn)的名稱酷勺，是只讀的。
??1. 元素節(jié)點(diǎn)的 nodeName 與標(biāo)簽名相同
??2. 屬性節(jié)點(diǎn)的 nodeName 是屬性的名稱
??3. 文本節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #text
??4. 文檔節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #document
二扳躬、nodeValue 屬性：節(jié)點(diǎn)的值
??1. 元素節(jié)點(diǎn)的 nodeValue 是 undefined 或 null
??2. 文本節(jié)點(diǎn)的 nodeValue 是文本自身
??3. 屬性節(jié)點(diǎn)的 nodeValue 是屬性的值
例題：
代碼：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>節(jié)點(diǎn)屬性</title>
</head>
<body>
<ul>
<li>javascript</li>
<li>HTML/CSS</li>
<li>jQuery</li>
</ul>
<script type="text/javascript">
var node = document.getElementsByTagName("li");
for(var i = 0;i < node.length;i++){
document.write(node[i].nodeName);
document.write(node[i].nodeValue);
document.write(node[i].nodeType);
}
</script>
</body>
</html>
9.8 訪問(wèn)子節(jié)點(diǎn)childNodes
??訪問(wèn)選定元素節(jié)點(diǎn)下的所有子節(jié)點(diǎn)的列表鸥印，返回的值可以看作是一個(gè)數(shù)組，他具有l(wèi)ength屬性坦报。
<i>語(yǔ)法：</i>
elementNode.childNodes
<i>注意：</i>
如果選定的節(jié)點(diǎn)沒(méi)有子節(jié)點(diǎn)，則該屬性返回不包含節(jié)點(diǎn)的 NodeList狂鞋。
9.9 訪問(wèn)子節(jié)點(diǎn)的第一和最后項(xiàng)
??一片择、firstChild 屬性返回‘childNodes’數(shù)組的第一個(gè)子節(jié)點(diǎn)。如果選定的節(jié)點(diǎn)沒(méi)有子節(jié)點(diǎn)骚揍，則該屬性返回 NULL字管。
<i>語(yǔ)法：</i>
node.firstChild
<i>說(shuō)明：</i>與elementNode.childNodes[0]是同樣的效果啰挪。
??二、 lastChild 屬性返回‘childNodes’數(shù)組的最后一個(gè)子節(jié)點(diǎn)嘲叔。如果選定的節(jié)點(diǎn)沒(méi)有子節(jié)點(diǎn)亡呵，則該屬性返回 NULL。
語(yǔ)法：
node.lastChild
說(shuō)明：與elementNode.childNodes[elementNode.childNodes.length-1]是同樣的效果硫戈。
<i>注意:</i>
上一節(jié)中锰什，我們知道Internet Explorer 會(huì)忽略節(jié)點(diǎn)之間生成的空白文本節(jié)點(diǎn)，而其它瀏覽器不會(huì)丁逝。我們可以通過(guò)檢測(cè)節(jié)點(diǎn)類型汁胆，過(guò)濾子節(jié)點(diǎn)。
看到這霜幼，我貌似知道css3里的xx：firstchild{}這種偽類選擇器怎么來(lái)的了……
哦對(duì)了嫩码，利用此類方式得到的結(jié)果并不是直觀看到的那種，例如：
9.10 訪問(wèn)父節(jié)點(diǎn)parentNode
??獲取指定節(jié)點(diǎn)的父節(jié)點(diǎn)
<i>語(yǔ)法：</i>
elementNode.parentNode
<i>注意:</i>
父節(jié)點(diǎn)只能有一個(gè)罪既。
9.11 訪問(wèn)兄弟節(jié)點(diǎn)
??1. nextSibling 屬性可返回某個(gè)節(jié)點(diǎn)之后緊跟的節(jié)點(diǎn)（處于同一樹(shù)層級(jí)中）铸题。
<i>語(yǔ)法：</i>
nodeObject.nextSibling
<i>說(shuō)明：</i>如果無(wú)此節(jié)點(diǎn)，則該屬性返回 null琢感。
??2. previousSibling 屬性可返回某個(gè)節(jié)點(diǎn)之前緊跟的節(jié)點(diǎn)（處于同一樹(shù)層級(jí)中）丢间。
語(yǔ)法：
nodeObject.previousSibling
說(shuō)明：如果無(wú)此節(jié)點(diǎn)，則該屬性返回 null猩谊。
注意: 兩個(gè)屬性獲取的是節(jié)點(diǎn)千劈。Internet Explorer 會(huì)忽略節(jié)點(diǎn)間生成的空白文本節(jié)點(diǎn)（例如，換行符號(hào)）牌捷，而其它瀏覽器不會(huì)忽略墙牌。
9.12 插入節(jié)點(diǎn)appendChild()
在指定節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)列表之后添加一個(gè)新的子節(jié)點(diǎn)。
語(yǔ)法:
appendChild(newnode)
參數(shù):
newnode：指定追加的節(jié)點(diǎn)暗甥。
9.13 插入節(jié)點(diǎn)insertBefore()
??nsertBefore() 方法可在已有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)喜滨。
語(yǔ)法:
insertBefore(newnode,node);
參數(shù):
newnode: 要插入的新節(jié)點(diǎn)。
node: 指定此節(jié)點(diǎn)前插入節(jié)點(diǎn)撤防。
我們?cè)趤?lái)看看下面代碼虽风，在指定節(jié)點(diǎn)前插入節(jié)點(diǎn)。
9.14 刪除節(jié)點(diǎn)removeChild()
??removeChild() 方法從子節(jié)點(diǎn)列表中刪除某個(gè)節(jié)點(diǎn)寄月。如刪除成功辜膝，此方法可返回被刪除的節(jié)點(diǎn)，如失敗漾肮，則返回 NULL厂抖。
語(yǔ)法:
nodeObject.removeChild(node)
參數(shù):
node ：必需，指定需要?jiǎng)h除的節(jié)點(diǎn)克懊。
9.15 替換元素節(jié)點(diǎn)replaceChild()
??replaceChild 實(shí)現(xiàn)子節(jié)點(diǎn)(對(duì)象)的替換忱辅。返回被替換對(duì)象的引用七蜘。
語(yǔ)法：
node.replaceChild (newnode,oldnew )
參數(shù)：
newnode : 必需，用于替換 oldnew 的對(duì)象墙懂。
oldnew : 必需橡卤，被 newnode 替換的對(duì)象。
9.16 創(chuàng)建元素節(jié)點(diǎn)createElement
??createElement()方法可創(chuàng)建元素節(jié)點(diǎn)损搬。此方法可返回一個(gè) Element 對(duì)象碧库。
語(yǔ)法：
document.createElement(tagName)
參數(shù):
tagName：字符串值，這個(gè)字符串用來(lái)指明創(chuàng)建元素的類型场躯。
注意：要與appendChild() 或 insertBefore()方法聯(lián)合使用谈为，將元素顯示在頁(yè)面中。
9.17 創(chuàng)建文本節(jié)點(diǎn)createTextNode
??createTextNode() 方法創(chuàng)建新的文本節(jié)點(diǎn)踢关，返回新創(chuàng)建的 Text 節(jié)點(diǎn)伞鲫。
語(yǔ)法：
document.createTextNode(data)
參數(shù)：
data : 字符串值，可規(guī)定此節(jié)點(diǎn)的文本签舞。
9.18 瀏覽器窗口可視區(qū)域大小
獲得瀏覽器窗口的尺寸（瀏覽器的視口秕脓，不包括工具欄和滾動(dòng)條）的方法:
一、對(duì)于IE9+儒搭、Chrome吠架、Firefox、Opera 以及 Safari：
window.innerHeight - 瀏覽器窗口的內(nèi)部高度
window.innerWidth - 瀏覽器窗口的內(nèi)部寬度
二搂鲫、對(duì)于 Internet Explorer 8傍药、7、6魂仍、5：
? document.documentElement.clientHeight表示HTML文檔所在窗口的當(dāng)前高度拐辽。
? document.documentElement.clientWidth表示HTML文檔所在窗口的當(dāng)前寬度。
或者
Document對(duì)象的body屬性對(duì)應(yīng)HTML文檔的<body>標(biāo)簽
? document.body.clientHeight
? document.body.clientWidth
在不同瀏覽器都實(shí)用的 JavaScript 方案：
var w= document.documentElement.clientWidth
|| document.body.clientWidth;
var h= document.documentElement.clientHeight
|| document.body.clientHeight;
9.19 網(wǎng)頁(yè)尺寸scrollHeight
??scrollHeight和scrollWidth擦酌，獲取網(wǎng)頁(yè)內(nèi)容高度和寬度俱诸。
??一、針對(duì)IE赊舶、Opera:
scrollHeight 是網(wǎng)頁(yè)內(nèi)容實(shí)際高度睁搭，可以小于 clientHeight。
二笼平、針對(duì)NS园骆、FF:
scrollHeight 是網(wǎng)頁(yè)內(nèi)容高度，不過(guò)最小值是 clientHeight寓调。也就是說(shuō)網(wǎng)頁(yè)內(nèi)容實(shí)際高度小于 clientHeight 時(shí)遇伞，scrollHeight 返回 clientHeight 。
三捶牢、瀏覽器兼容性
var w=document.documentElement.scrollWidth
|| document.body.scrollWidth;
var h=document.documentElement.scrollHeight
|| document.body.scrollHeight;
注意:區(qū)分大小寫(xiě)
scrollHeight和scrollWidth還可獲取Dom元素中內(nèi)容實(shí)際占用的高度和寬度鸠珠。
9.20 網(wǎng)頁(yè)尺寸offsetHeight
??offsetHeight和offsetWidth，獲取網(wǎng)頁(yè)內(nèi)容高度和寬度(包括滾動(dòng)條等邊線秋麸，會(huì)隨窗口的顯示大小改變)渐排。
??一、值
offsetHeight = clientHeight + 滾動(dòng)條 + 邊框灸蟆。
二驯耻、瀏覽器兼容性
var w= document.documentElement.offsetWidth
|| document.body.offsetWidth;
var h= document.documentElement.offsetHeight
|| document.body.offsetHeight;
9.21 網(wǎng)頁(yè)卷去的距離與偏移量
??scrollLeft:設(shè)置或獲取位于給定對(duì)象左邊界與窗口中目前可見(jiàn)內(nèi)容的最左端之間的距離 ，即左邊灰色的內(nèi)容炒考。
scrollTop:設(shè)置或獲取位于對(duì)象最頂端與窗口中可見(jiàn)內(nèi)容的最頂端之間的距離 可缚，即上邊灰色的內(nèi)容。
offsetLeft:獲取指定對(duì)象相對(duì)于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置 斋枢。
offsetTop:獲取指定對(duì)象相對(duì)于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算頂端位置 帘靡。
注意:
1. 區(qū)分大小寫(xiě)
2. offsetParent：布局中設(shè)置postion屬性(Relative、Absolute瓤帚、fixed)的父容器描姚，從最近的父節(jié)點(diǎn)開(kāi)始，一層層向上找戈次，直到HTML的body轩勘。
<h5>第10章 編程挑戰(zhàn)</h5>
??編寫(xiě)一個(gè)選項(xiàng)卡
代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>實(shí)踐題 - 選項(xiàng)卡</title>
<style type="text/css">
/* CSS樣式制作 */
.selection-tab{text-align: center;margin-top: 100px;}
.nav>div{display: inline;padding: 0px 10px;}
.nav>div:hover{cursor:pointer;}
ul,li{list-style: none;}
#home-furnishing-info,#second-hand-house-info{display: none;}
</style>
<script type="text/javascript">
// JS實(shí)現(xiàn)選項(xiàng)卡切換
function showHP() {
document.getElementById("house-property-info").style.display = "block";
document.getElementById("home-furnishing-info").style.display = "none";
document.getElementById("second-hand-house-info").style.display = "none";
}
function showHF() {
document.getElementById("house-property-info").style.display = "none";
document.getElementById("home-furnishing-info").style.display = "block";
document.getElementById("second-hand-house-info").style.display = "none";
}
function showSHH() {
document.getElementById("house-property-info").style.display = "none";
document.getElementById("home-furnishing-info").style.display = "none";
document.getElementById("second-hand-house-info").style.display = "block";
}
</script>
</head>
<body>
<!-- HTML頁(yè)面布局 -->
<div class="selection-tab">
<div class="nav">
<div id="house-property" onclick="showHP()">房產(chǎn)</div>
<div id="home-furnishing" onclick="showHF()">家居</div>
<div id="second-hand-house" onclick="showSHH()">二手房</div>
</div>
<div class="content">
<ul id="house-property-info">
<li>275萬(wàn)購(gòu)昌平鄰鐵三居 總價(jià)20萬(wàn)買(mǎi)一居</li>
<li>200萬(wàn)內(nèi)購(gòu)五環(huán)三居 140萬(wàn)安家東三環(huán)</li>
<li>北京首現(xiàn)零首付樓盤(pán) 53萬(wàn)購(gòu)東5環(huán)50平</li>
<li>京樓盤(pán)直降5000 中信府 公園樓王現(xiàn)房</li>
</ul>
<ul id="home-furnishing-info">
<li>40平出租屋大改造 美少女的混搭小窩</li>
<li>經(jīng)典清新簡(jiǎn)歐愛(ài)家 90平老房煥發(fā)新生</li>
<li>新中式的酷色溫情 66平撞色活潑家居</li>
<li> 瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計(jì)</li>
</ul>
<ul id="second-hand-house-info">
<li>通州豪華3居260萬(wàn) 二環(huán)稀缺2居250w甩</li>
<li> 西3環(huán)通透2居290萬(wàn) 130萬(wàn)2居限量搶購(gòu)</li>
<li>黃城根小學(xué)學(xué)區(qū)僅260萬(wàn) 121平70萬(wàn)拋!</li>
<li> 獨(dú)家別墅280萬(wàn) 蘇州橋2居優(yōu)惠價(jià)248萬(wàn)</li>
</ul>
</div>
</div>
</body>
</html>
第一次遇到這個(gè)，哈哈……
