4JavaScript進(jìn)階篇

1、1.1讓你認(rèn)識(shí)js你知道嗎，web前端開發(fā)師需要掌握什么技術(shù)?也許你已經(jīng)了解html標(biāo)記(也稱為結(jié)構(gòu))，知道了css樣式(也稱為表示)，會(huì)使用html+css創(chuàng)建一個(gè)漂亮的頁(yè)面，但這還不夠，它只是靜態(tài)頁(yè)面而已。我們還需使用javascript增加行為，為網(wǎng)頁(yè)添加動(dòng)態(tài)效果。準(zhǔn)備好，讓javascript帶你進(jìn)入新境界吧!javascript能做什么？1.增強(qiáng)頁(yè)面動(dòng)態(tài)效果(如:下拉菜單、圖片輪播、信息滾動(dòng)等)2.實(shí)現(xiàn)頁(yè)面與用戶之間的實(shí)時(shí)、動(dòng)態(tài)交互(如:用戶注冊(cè)、登陸驗(yàn)證等)js進(jìn)階篇學(xué)習(xí)什么？在javascript入門篇中，我們學(xué)習(xí)了如何插入js、輸出內(nèi)容及簡(jiǎn)單的dom操作，javascript進(jìn)

2、階篇讓您進(jìn)一步的了解js的變量、數(shù)組、函數(shù)、語(yǔ)法、對(duì)象、事件、dom操作，制作簡(jiǎn)單的網(wǎng)頁(yè)動(dòng)態(tài)效果。2.1什么是變量什么是變量? 從字面上看，變量是可變的量；從編程角度講，變量是用于存儲(chǔ)某種/某些數(shù)值的存儲(chǔ)器。我們可以把變量看做一個(gè)盒子,盒子用來(lái)存放物品,物品可以是衣服、玩具、水果.等。2.2給變量取個(gè)名字(變量命名)我們?yōu)榱藚^(qū)分盒子，可以用box1,box2等名稱代表不同盒子，box1就是盒子的名字（也就是變量的名字）。我們趕快給變量取個(gè)好名字吧!變量名字可以任意取，只不過(guò)取名字要遵循一些規(guī)則:1.必須以字母、下劃線或美元符號(hào)開頭，后面可以跟字母、下劃線、美元符號(hào)和數(shù)字。如下:正確: mysu

3、m _mychar $numa1 錯(cuò)誤: 6num /開頭不能用數(shù)字 %sum /開頭不能用除(_ $)外特殊符號(hào),如(% + /等) sum+num /開頭中間不能使用除(_ $)外特殊符號(hào)，如(% + /等)2.變量名區(qū)分大小寫，如:a與a是兩個(gè)不同變量。3.不允許使用javascript關(guān)鍵字和保留字做變量名。2.3確定你的存在(變量聲明)我們要使用盒子裝東西,是不是先要找到盒子,那在編程中，這個(gè)過(guò)程叫聲明變量,找盒子的動(dòng)作，如何表示：聲明變量語(yǔ)法: var 變量名; var就相當(dāng)于找盒子的動(dòng)作，在javascript中是關(guān)鍵字（即保留字），這個(gè)關(guān)鍵字的作用是聲明變量，并為變量準(zhǔn)備位置(

4、即內(nèi)存）。var mynum ; /聲明一個(gè)變量mynum當(dāng)然，我們可以一次找一個(gè)盒子，也可以一次找多個(gè)盒子，所以var還可以一次聲明多個(gè)變量，變量之前用,逗號(hào)隔開。var num1,mun2 ; /聲明一個(gè)變量num1注意:變量也可以不聲明，直接使用，但為了規(guī)范，需要先聲明，后使用。2.4多樣化的我(變量賦值）我們可以把變量看做一個(gè)盒子,盒子用來(lái)存放物品,那如何在變量中存儲(chǔ)內(nèi)容呢?我們使用=號(hào)給變量存儲(chǔ)內(nèi)容,看下面的語(yǔ)句:var mynum = 5 ; /聲明變量mynum并賦值。這個(gè)語(yǔ)句怎么讀呢？ 給變量mynum賦值，值為5。我們也可以這樣寫:var mynum; /聲明變量mynumm

5、ynum = 5 ; /給變量mynum賦值注:這里=號(hào)的作用是給變量賦值，不是等于號(hào)。盒子可以裝衣服、玩具、水果.等。其實(shí)，變量是無(wú)所不能的容器，你可以把任何東西存儲(chǔ)在變量里，如數(shù)值、字符串、布爾值等，例如：var num1 = 123; / 123是數(shù)值var num2 = 一二三; /一二三是字符串var num3=true; /布爾值true（真），false(假)其中，num1變量存儲(chǔ)的內(nèi)容是數(shù)值；num2變量存儲(chǔ)的內(nèi)容是字符串，字符串需要用一對(duì)引號(hào)括起來(lái)，num3變量存儲(chǔ)的內(nèi)容是布爾值(true、false)。2.5表達(dá)出你的想法(表達(dá)式)表達(dá)式與數(shù)學(xué)中的定義相似，表達(dá)式是指具有一

6、定的值、用操作符把常數(shù)和變量連接起來(lái)的代數(shù)式。一個(gè)表達(dá)式可以包含常數(shù)或變量。我們先看看下面的javascript語(yǔ)句：生活中“再見”表達(dá)方法很多，如:英語(yǔ)(goodbye）、網(wǎng)絡(luò)語(yǔ)（88）、肢體語(yǔ)（揮揮手）等。在javascript表達(dá)式無(wú)處不在，所以一定要知道可以表達(dá)哪些內(nèi)容，看看下面幾種情況:注意:串表達(dá)式中mychar是變量注意:數(shù)值表達(dá)式中num是變量注意:布爾表達(dá)式中num是變量2.6我還有其它用途( +號(hào)操作符）操作符是用于在javascript中指定一定動(dòng)作的符號(hào)。（1）操作符看下面這段javascript代碼。sum = numa + numb;其中的=和+都是操作符。java

7、script中還有很多這樣的操作符，例如，算術(shù)操作符(+、-、*、/等)，比較操作符(、=、 90”，所以小紅考試成績(jī)高。其中大于號(hào) 就是比較操作符，小紅考試成績(jī)和小明考試成績(jī)就是操作數(shù)，并且是兩個(gè)操作數(shù)。也就是說(shuō)兩個(gè)操作數(shù)通過(guò)比較操作符進(jìn)行比較，得到值為真（true）和假(false)。在javascript中，這樣的比較操作符有很多，這些操作符的含義如下:看看下面例子:var a = 5;/定義a變量，賦值為5var b = 9; /定義b變量，賦值為9document.write (a=b); /a大于或等于b的值嗎? 結(jié)果是假(false)document.write (a!=b);

8、/a不等于b的值嗎? 結(jié)果是真(true)document.write (a=b); /a等于b的值嗎? 結(jié)果是假(false)2.9我與你同在(邏輯與操作符）數(shù)學(xué)里面的“ab”，在javascript中還表示為ab；數(shù)學(xué)中的“b大于a，b小于c”是“aba & ba |ab; /ba是true，ab是false，c是true邏輯或操作符值表:注意:如果a為真，a |b為真，不會(huì)在執(zhí)行b; 反之，如果a為假，要由 b 的值來(lái)決定a | b 的值。2.11是非顛倒(邏輯非操作符）!是邏輯非操作符，也就是不是的意思,非真即假，非假即真。好比小華今天買了一個(gè)杯子，小明說(shuō):杯子是白色的，小亮說(shuō):“杯子

9、是紅色的”，小華說(shuō)：小明說(shuō)的不是真話，小亮說(shuō)的不是假話。猜猜小華買的什么顏色的杯子，答案：紅色杯子。邏輯非操作符值表:看看下面代碼，變量c的值是什么:var a=3;var b=5;var c;c=!(ba); / ba值是true,! (ba）值是falsec=!(ba); / ba值是false, ! (b10 & numb * 32; /結(jié)果為false3.1一起組團(tuán)（什么是數(shù)組）我們知道變量用來(lái)存儲(chǔ)數(shù)據(jù)，一個(gè)變量只能存儲(chǔ)一個(gè)內(nèi)容。假設(shè)你想存儲(chǔ)10個(gè)人的姓名或者存儲(chǔ)20個(gè)人的數(shù)學(xué)成績(jī)，就需要10個(gè)或20個(gè)變量來(lái)存儲(chǔ)，如果需要存儲(chǔ)更多數(shù)據(jù)，那就會(huì)變的更麻煩。我們用數(shù)組解決問(wèn)題，一個(gè)數(shù)組變量

10、可以存放多個(gè)數(shù)據(jù)。好比一個(gè)團(tuán)，團(tuán)里有很多人，如下我們使用數(shù)組存儲(chǔ)5個(gè)學(xué)生成績(jī)。數(shù)組是一個(gè)值的集合，每個(gè)值都有一個(gè)索引號(hào)，從0開始，每個(gè)索引都有一個(gè)相應(yīng)的值，根據(jù)需要添加更多數(shù)值。3.2組團(tuán)，并給團(tuán)取個(gè)名（如何創(chuàng)建數(shù)組）使用數(shù)組之前首先要?jiǎng)?chuàng)建，而且需要把數(shù)組本身賦至一個(gè)變量。好比我們出游，要組團(tuán)，并給團(tuán)定個(gè)名字“云南之旅”。創(chuàng)建數(shù)組語(yǔ)法：var myarray=new array(); 我們創(chuàng)建數(shù)組的同時(shí)，還可以為數(shù)組指定長(zhǎng)度，長(zhǎng)度可任意指定。var myarray= new array(8); /創(chuàng)建數(shù)組，存儲(chǔ)8個(gè)數(shù)據(jù)。 注意：1.創(chuàng)建的新數(shù)組是空數(shù)組，沒(méi)有值，如輸出，則顯示undefined

11、。2.雖然創(chuàng)建數(shù)組時(shí)，指定了長(zhǎng)度，但實(shí)際上數(shù)組都是變長(zhǎng)的，也就是說(shuō)即使指定了長(zhǎng)度為8，仍然可以將元素存儲(chǔ)在規(guī)定長(zhǎng)度以外。3.3誰(shuí)是團(tuán)里成員（數(shù)組賦值）數(shù)組創(chuàng)建好，接下來(lái)我們?yōu)閿?shù)組賦值。我們把數(shù)組看似旅游團(tuán)的大巴車，大巴車?yán)镉泻芏辔恢?，每個(gè)位置都有一個(gè)號(hào)碼，顧客要做在哪個(gè)位置呢？第一步：組個(gè)大巴車第二步：按票對(duì)號(hào)入座 大巴車的1號(hào)座位是張三 大巴車的2號(hào)座位是李四數(shù)組的表達(dá)方式：第一步：創(chuàng)建數(shù)組var myarr=new array(); 第二步：給數(shù)組賦值 myarr1= 張三; myarr2= 李四;下面創(chuàng)建一個(gè)數(shù)組，用于存儲(chǔ)5個(gè)人的數(shù)學(xué)成績(jī)。var myarray=new array();

12、 /創(chuàng)建一個(gè)新的空數(shù)組myarray0=66; /存儲(chǔ)第1個(gè)人的成績(jī)myarray1=80; /存儲(chǔ)第2個(gè)人的成績(jī)myarray2=90; /存儲(chǔ)第3個(gè)人的成績(jī)myarray3=77; /存儲(chǔ)第4個(gè)人的成績(jī)myarray4=59; /存儲(chǔ)第5個(gè)人的成績(jī)注意：數(shù)組每個(gè)值有一個(gè)索引號(hào)，從0開始。我們還可以用簡(jiǎn)單的方法創(chuàng)建上面的數(shù)組和賦值：第一種方法：var myarray = new array(66,80,90,77,59);/創(chuàng)建數(shù)組同時(shí)賦值第二種方法： var myarray = 66,80,90,77,59;/直接輸入一個(gè)數(shù)組（稱 “字面量數(shù)組”）注意：數(shù)組存儲(chǔ)的數(shù)據(jù)可以是任何類型（數(shù)字、

13、字符、布爾值等）3.4團(tuán)里添加新成員（向數(shù)組增加一個(gè)新元素）上一節(jié)中，我們使用myarray變量存儲(chǔ)了5個(gè)人的成績(jī)，現(xiàn)在多出一個(gè)人的成績(jī)，如何存儲(chǔ)呢？只需使用下一個(gè)未用的索引，任何時(shí)刻可以不斷向數(shù)組增加新元素。myarray5=88; /使用一個(gè)新索引，為數(shù)組增加一個(gè)新元素3.5呼叫團(tuán)里成員(使用數(shù)組元素)我們知道數(shù)組中的每個(gè)值有一個(gè)索引號(hào)，從0開始，如下圖， myarray變量存儲(chǔ)6個(gè)人的成績(jī)：要得到一個(gè)數(shù)組元素的值，只需引用數(shù)組變量并提供一個(gè)索引，如：第一個(gè)人的成績(jī)表示方法：myarray0第三個(gè)人的成績(jī)表示方法:myarray23.6了解成員數(shù)量(數(shù)組屬性length)如果我們想知道數(shù)組

14、的大小，只需引用數(shù)組的一個(gè)屬性length。length屬性表示數(shù)組的長(zhǎng)度，即數(shù)組中元素的個(gè)數(shù)。語(yǔ)法：myarray.length; /獲得數(shù)組myarray的長(zhǎng)度注意：因?yàn)閿?shù)組的索引總是由0開始，所以一個(gè)數(shù)組的上下限分別是：0和length-1。如數(shù)組的長(zhǎng)度是5，數(shù)組的上下限分別是0和4。var arr=55,32,5,90,60,98,76,54;/包含8個(gè)數(shù)值的數(shù)組arr document.write(arr.length); /顯示數(shù)組長(zhǎng)度8document.write(arr7); /顯示第8個(gè)元素的值54同時(shí)，javascript數(shù)組的length屬性是可變的，這一點(diǎn)需要特別注意。

15、arr.length=10; /增大數(shù)組的長(zhǎng)度document.write(arr.length); /數(shù)組長(zhǎng)度已經(jīng)變?yōu)?0數(shù)組隨元素的增加，長(zhǎng)度也會(huì)改變，如下:var arr=98,76,54,56,76; / 包含5個(gè)數(shù)值的數(shù)組document.write(arr.length); /顯示數(shù)組的長(zhǎng)度5arr15=34; /增加元素，使用索引為15,賦值為34alert(arr.length); /顯示數(shù)組的長(zhǎng)度163.7二維數(shù)組一級(jí)數(shù)組，我們看成一組盒子，每個(gè)盒子只能放一個(gè)內(nèi)容。一維數(shù)組的表示: myarray 二維數(shù)組，我們看成一組盒子，不過(guò)每個(gè)盒子里還可以放多個(gè)盒子。二維數(shù)組的表示: myarray 注意:二維數(shù)組的兩個(gè)維度的索引值也是從0開始，兩個(gè)維度的最后一個(gè)索引值為長(zhǎng)度-1。1. 二維數(shù)組的定義方法一var myarr=new array(); /先聲明一維 for(var i=0;i2;