一、認識JS
你知道嗎，Web前端開發師需要掌握什麼技術?也許你已經瞭解HTML標記(也稱為結構)，知道了CSS樣式(也稱為表示)，會使用HTML+CSS建立一個漂亮的頁面，但這還不夠，它只是靜態頁面而已。我們還需使用JavaScript增加行為，為網頁新增動態效果。準備好，讓JavaScript帶你進入新境界吧!
JavaScript能做什麼？
1.增強頁面動態效果(如:下拉選單、圖片輪播、資訊滾動等)
2.實現頁面與使用者之間的實時、動態互動(如:使用者註冊、登陸驗證等)
JS進階篇學習什麼？
在JavaScript入門篇中，我們學習瞭如何插入JS、輸出內容及簡單的DOM操作，JavaScript進階篇讓您進一步的瞭解JS的變數、陣列、函式、語法、物件、事件、DOM操作，製作簡單的網頁動態效果。
注意: 1. JS是區分大小寫的，如：classname和ClassName是不一樣的。同時注意方法、屬性、變數等的大小寫吆。 2. JS中的字元、符號等一定要在英文狀態下輸入吆。
二、什麼是變數
什麼是變數? 從字面上看，變數是可變的量；從程式設計角度講，變數是用於儲存某種/某些數值的儲存器。我們可以把變數看做一個盒子,盒子用來存放物品,物品可以是衣服、玩具、水果…等。
1. 給變數取個名字(變數命名)
我們為了區分盒子，可以用BOX1,BOX2等名稱代表不同盒子，BOX1就是盒子的名字（也就是變數的名字）。
我們趕快給變數取個好名字吧!變數名字可以任意取，只不過取名字要遵循一些規則:
1.必須以字母、下劃線或美元符號開頭，後面可以跟字母、下劃線、美元符號和數字。如下:
正確:
mysum
_mychar
$numa1
錯誤: 6num //開頭不能用數字 %sum //開頭不能用除(_ $)外特殊符號,如(% + /等) sum+num //開頭中間不能使用除(_ $)外特殊符號，如(% + /等)
2.變數名區分大小寫，如:A與a是兩個不同變數。
3.不允許使用JavaScript關鍵字和保留字做變數名。
2. 變數宣告
我們要使用盒子裝東西,是不是先要找到盒子,那在程式設計中，這個過程叫宣告變數,找盒子的動作，如何表示：
宣告變數語法: var 變數名;
var就相當於找盒子的動作，在JavaScript中是關鍵字（即保留字），這個關鍵字的作用是宣告變數，併為”變數”準備位置(即記憶體）。
var mynum ; //宣告一個變數mynum
當然，我們可以一次找一個盒子，也可以一次找多個盒子，所以Var還可以一次宣告多個變數，變數之間用”,”逗號隔開。
var num1,mun2 ; //宣告一個變數num1
注意:變數也可以不宣告，直接使用，但為了規範，需要先宣告，後使用。
3. 變數賦值
我們可以把變數看做一個盒子,盒子用來存放物品,那如何在變數中儲存內容呢?
我們使用"="號給變數儲存內容,看下面的語句:
var mynum = 5 ; //宣告變數mynum並賦值。
這個語句怎麼讀呢？ 給變數mynum賦值，值為5。我們也可以這樣寫:
var mynum; //宣告變數mynum mynum = 5 ; //給變數mynum賦值
注:這裡 "="號的作用是給變數賦值，不是等於號。
盒子可以裝衣服、玩具、水果…等。其實，變數是無所不能的容器，你可以把任何東西儲存在變數裡，如數值、字串、布林值等，例如：
var num1 = 123; // 123是數值 var num2 = "一二三"; //"一二三"是字串 var num3=true; //布林值true（真），false(假)
其中，num1變數儲存的內容是數值；num2變數儲存的內容是字串，字串需要用一對引號""括起來，num3變數儲存的內容是布林值(true、false)。
三、表示式
表示式與數學中的定義相似，表示式是指具有一定的值、用操作符把常數和變數連線起來的代數式。一個表示式可以包含常數或變數。
我們先看看下面的JavaScript語句：
生活中“再見”表達方法很多，如:英語(goodbye）、網路語（88）、肢體語（揮揮手）等。在JavaScript表示式無處不在，所以一定要知道可以表達哪些內容，看看下面幾種情況:
注意:串表示式中mychar是變數
注意:數值表示式中num是變數
注意:布林表示式中num是變數
四、操作符
1. +號操作符
操作符是用於在JavaScript中指定一定動作的符號。
（1）操作符
看下面這段JavaScript程式碼。
sum = numa + numb;
其中的"="和"+"都是操作符。
JavaScript中還有很多這樣的操作符，例如，算術操作符(+、-、*、/等)，比較操作符(<、>、>=、<=等)，邏輯操作符(&&、||、！)。
注意: “=” 操作符是賦值，不是等於。
(2) "+"操作符
算術運算子主要用來完成類似加減乘除的工作，在JavaScript中，“+”不只代表加法，還可以連線兩個字串，例如：
mystring = "Java" + "Script"; // mystring的值“JavaScript”這個字串
2. 自加一，自減一 ( ++和- -)
算術操作符除了(+、-、*、/)外，還有兩個非常常用的操作符，自加一“++”；自減一“--”。首先來看一個例子：
mynum = 10; mynum++; //mynum的值變為11 mynum--; //mynum的值又變回10
上面的例子中，mynum++使mynum值在原基礎上增加1，mynum–使mynum在原基礎上減去1,其實也可以寫成:
mynum = mynum + 1;//等同於mynum++ mynum = mynum - 1;//等同於mynum--
3. 比較操作符
我們先來做道數學題，數學考試成績中，小明考了90分，小紅考了95分，問誰考的分數高? 答: 因為“95 > 90”，所以小紅考試成績高。
其中大於號”>” 就是比較操作符，小紅考試成績和小明考試成績就是運算元，並且是兩個運算元。
也就是說兩個運算元通過比較操作符進行比較，得到值為真（true）和假(false)。
在JavaScript中，這樣的比較操作符有很多，這些操作符的含義如下:
看看下面例子:
var a = 5;//定義a變數，賦值為5 var b = 9; //定義b變數，賦值為9 document.write (a<b); //a小於b的值嗎? 結果是真(true) document.write (a>=b); //a大於或等於b的值嗎? 結果是假(false) document.write (a!=b); //a不等於b的值嗎? 結果是真(true) document.write (a==b); //a等於b的值嗎? 結果是假(false)
4. 邏輯與操作符
數學裡面的“a>b”，在JavaScript中還表示為a>b；數學中的“b大於a，b小於c”是“a<b<c”，那麼在JavaScript中可以用&&表示，如下：
b>a && b<c //“&&”是並且的意思, 讀法"b大於a"並且" b小於c "
好比我們參加高考時,在進入考場前,必須出示准考證和身份證,兩者缺一不可，否則不能參加考試，表示如下:
if(有準考證 &&有身份證)
{
進行考場考試
}
“&&”是邏輯與操作符，只有“&&”兩邊值同時滿足(同時為真)，整個表示式值才為真。
邏輯與操作符值表:
注意: 如果A為假，A && B為假，不會在執行B; 反之，如果A為真，要由 B 的值來決定 A && B 的值。
5.邏輯或操作符
"||"邏輯或操作符，相當於生活中的“或者”，當兩個條件中有任一個條件滿足，“邏輯或”的運算結果就為“真”。
例如：本週我們計劃出遊,可是週一至週五工作,所以週六或者週日哪天去都可以。即兩天中只要有一天有空，就可以出遊了。
var a=3; var b=5; var c; c=b>a ||a>b; //b>a是true，a>b是false，c是true
邏輯或操作符值表:
注意: 如果A為真，A || B為真，不會在執行B; 反之，如果A為假，要由 B 的值來決定 A || B 的值。
6. 邏輯非操作符
"!"是邏輯非操作符，也就是”不是”的意思,非真即假，非假即真。好比小華今天買了一個杯子，小明說:”杯子是白色的”，小亮說:“杯子是紅色的”，小華說：”小明說的不是真話，小亮說的不是假話“。猜猜小華買的什麼顏色的杯子，答案：紅色杯子。
邏輯非操作符值表:
看下面程式碼，變數c的值是什麼:
var a=3; var b=5; var c; c=!(b>a); // b>a值是true,! (b>a）值是false c=!(b<a); // b<a值是false, ! (b<a）值是true
7. 操作符優先順序
我們都知道，除法、乘法等操作符的優先順序比加法和減法高，例如：
var numa=3; var numb=6 jq= numa + 30 / 2 - numb * 3; // 結果為0
如果我們要改變運算順序，需新增括號的方法來改變優先順序:
var numa=3; var numb=6 jq= ((numa + 30) / (2 - numb)) * 3; //結果是-24.75
操作符之間的優先順序（高到低）:
算術操作符 → 比較操作符 → 邏輯操作符 → “=”賦值符號
如果同級的運算是按從左到右次序進行,多層括號由裡向外。
var numa=3; var numb=6; jq= numa + 30 >10 && numb * 3<2; //結果為false
五、陣列
我們知道變數用來儲存資料，一個變數只能儲存一個內容。假設你想儲存10個人的姓名或者儲存20個人的數學成績，就需要10個或20個變數來儲存，如果需要儲存更多資料，那就會變的更麻煩。我們用陣列解決問題，一個陣列變數可以存放多個資料。好比一個團，團裡有很多人，如下我們使用陣列儲存5個學生成績。
陣列是一個值的集合，每個值都有一個索引號，從0開始，每個索引都有一個相應的值，根據需要新增更多數值。
示例程式碼：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>什麼是陣列</title>
6 <script type="text/javascript">
7 var myarr=new Array(); //定義陣列
8 myarr[0]=80;
9 myarr[1]=60;
10 myarr[2]=99;
11 document.write("第一個人的成績是:"+myarr[0]);
12 document.write("第二個人的成績是:"+myarr[1]);
13 document.write("第三個人的成績是:"+myarr[2]);
14 </script>
15 </head>
16 <body>
17 </html>
1. 如何建立陣列
使用陣列之前首先要建立，而且需要把陣列本身賦至一個變數。好比我們出遊，要組團，並給團定個名字“雲南之旅”。
建立陣列語法：
var myarray=new Array();
我們建立陣列的同時，還可以為陣列指定長度，長度可任意指定。
var myarray= new Array(8); //建立陣列，儲存8個資料。
注意：
1.建立的新陣列是空陣列，沒有值，如輸出，則顯示undefined。
2.雖然建立陣列時，指定了長度，但實際上陣列都是變長的，也就是說即使指定了長度為8，仍然可以將元素儲存在規定長度以外。
程式碼示例：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>建立陣列</title>
6 <script type="text/JavaScript">
7 var myarr=new Array();
8 document.write("陣列的第一個值："+myarr[0]);
9 </script>
10 </head>
11 <body>
12 </body>
13 </html>
結果：
陣列的第一個值：undefined
2. 陣列賦值
陣列建立好，接下來我們為陣列賦值。我們把陣列看似旅遊團的大巴車，大巴車裡有很多位置，每個位置都有一個號碼，顧客要坐在哪個位置呢？
第一步：組個大巴車
第二步：按票對號入座
大巴車的1號座位是張三
大巴車的2號座位是李四
陣列的表達方式：
第一步：建立陣列var myarr=new Array();
第二步：給陣列賦值
myarr[1]=" 張三";
myarr[2]=" 李四";
下面建立一個陣列，用於儲存5個人的數學成績。
var myarray=new Array(); //建立一個新的空陣列 myarray[0]=66; //儲存第1個人的成績 myarray[1]=80; //儲存第2個人的成績 myarray[2]=90; //儲存第3個人的成績 myarray[3]=77; //儲存第4個人的成績 myarray[4]=59; //儲存第5個人的成績
注意：陣列每個值有一個索引號，從0開始。
我們還可以用簡單的方法建立上面的陣列和賦值：
第一種方法：
var myarray = new Array(66,80,90,77,59);//建立陣列同時賦值
第二種方法：
var myarray = [66,80,90,77,59];//直接輸入一個陣列（稱 “字面量陣列”）
注意：陣列儲存的資料可以是任何型別（數字、字元、布林值等）
3. 向陣列新增一個新元素
上一節中，我們使用myarray變數儲存了5個人的成績，現在多出一個人的成績，如何儲存呢？
只需使用下一個未用的索引，任何時刻可以不斷向陣列增加新元素。
myarray[5]=88; //使用一個新索引，為陣列增加一個新元素
4. 使用陣列元素
我們知道陣列中的每個值有一個索引號，從0開始，如下圖， myarray變數儲存6個人的成績：
要得到一個陣列元素的值，只需引用陣列變數並提供一個索引，如：
第一個人的成績表示方法：myarray[0]
第三個人的成績表示方法: myarray[2]
5. 陣列屬性length
如果我們想知道陣列的大小，只需引用陣列的一個屬性length。Length屬性表示陣列的長度，即陣列中元素的個數。
語法：
myarray.length; //獲得陣列myarray的長度
注意：因為陣列的索引總是由0開始，所以一個陣列的上下限分別是：0和length-1。如陣列的長度是5，陣列的上下限分別是0和4。
var arr=[55,32,5,90,60,98,76,54];//包含8個數值的陣列arr document.write(arr.length); //顯示陣列長度8 document.write(arr[7]); //顯示第8個元素的值54
同時，JavaScript陣列的length屬性是可變的，這一點需要特別注意。
arr.length=10; //增大陣列的長度 document.write(arr.length); //陣列長度已經變為10
陣列隨元素的增加，長度也會改變，如下:
var arr=[98,76,54,56,76]; // 包含5個數值的陣列 document.write(arr.length); //顯示陣列的長度5 arr[15]=34; //增加元素，使用索引為15,賦值為34 alert(arr.length); //顯示陣列的長度16
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>陣列長度</title>
6 <script language="javascript">
7 var mynum=new Array(65,90,88,98);
8 document.write("陣列的長度是:"+ mynum.length );
9 </script>
10 </head>
11 <body>
12 </body>
13 </html>
六、二維陣列
一維陣列，我們看成一組盒子，每個盒子只能放一個內容。
一維陣列的表示: myarray[ ]
二維陣列，我們看成一組盒子，不過每個盒子裡還可以放多個盒子。
二維陣列的表示: myarray[ ][ ]
注意: 二維陣列的兩個維度的索引值也是從0開始，兩個維度的最後一個索引值為長度-1。
1. 二維陣列的定義方法一
var myarr=new Array(); //先宣告一維
for(var i=0;i<2;i++){ //一維長度為2
myarr[i]=new Array(); //再宣告二維
for(var j=0;j<3;j++){ //二維長度為3
myarr[i][j]=i+j; // 賦值，每個陣列元素的值為i+j
}
}
將上面二維陣列，用表格的方式表示:
2. 二維陣列的定義方法二
var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3, ]]
3. 賦值
myarr[0][1]=5; //將5的值傳入到陣列中，覆蓋原有值。
說明: myarr[0][1] ,0 表示表的行，1表示表的列。
七、流程控制語句
1. if語句
if語句是基於條件成立才執行相應程式碼時使用的語句。
語法:
if(條件)
{ 條件成立時執行程式碼}
注意：if小寫，大寫字母（IF）會出錯！
假設你應聘web前端技術開發崗位，如果你會HTML技術，你面試成功，歡迎加入公司。程式碼表示如下:
<script type="text/javascript">
var mycarrer = "HTML";
if (mycarrer == "HTML")
{
document.write("你面試成功，歡迎加入公司。");
}
</script>
2. if…else語句(二選一)
if…else語句是在指定的條件成立時執行程式碼，在條件不成立時執行else後的程式碼。
語法:
if(條件)
{ 條件成立時執行的程式碼}
else
{條件不成立時執行的程式碼}
假設你應聘web前端技術開發崗位，如果你會HTML技術，你面試成功，歡迎加入公司，否則你面試不成功，不能加入公司。
程式碼表示如下:
<script type="text/javascript">
var mycarrer = "HTML"; //mycarrer變數儲存技能
if (mycarrer == "HTML")
{ document.write("你面試成功，歡迎加入公司。"); }
else //否則，技能不是HTML
{ document.write("你面試不成功，不能加入公司。");}
</script>
3. if…else巢狀語句(多重判斷)
要在多組語句中選擇一組來執行，使用if..else巢狀語句。
語法:
if(條件1)
{ 條件1成立時執行的程式碼}
else if(條件2)
{ 條件2成立時執行的程式碼}
...
else if(條件n)
{ 條件n成立時執行的程式碼}
else
{ 條件1、2至n不成立時執行的程式碼}
假設數學考試，小明考了86分，給他做個評價，60分以下的不及格，60(包含60分)-75分為良好，75(包含75分)-85分為很好，85(包含75分)-100優秀。
程式碼表示如下:
結果：
4. Switch語句(多種選擇)
當有很多種選項的時候，switch比if else使用更方便。
語法:
switch(表示式)
{
case值1:
執行程式碼塊 1
break;
case值2:
執行程式碼塊 2
break;
...
case值n:
執行程式碼塊 n
break;
default:
與 case值1 、 case值2...case值n 不同時執行的程式碼
}
語法說明:
Switch必須賦初始值，值與每個case值匹配。滿足執行該 case 後的所有語句，並用break語句來阻止執行下一個case。如所有case值都不匹配，執行default後的語句。
假設評價學生的考試成績，10分滿分制，我們按照每一分一個等級將成績分等，並根據成績的等級做出不同的評價。
程式碼如下:
執行結果:
評語: 及格，加油!
注意:記得在case所執行的語句後新增上一個break語句。否則就直接繼續執行下面的case中的語句，看以下程式碼:
執行結果:
評語: 繼續努力! 評語: 及格，加油! 評語: 湊合，奮進 評語: 很棒，很棒 評語: 高手，大牛
在上面的程式碼中，沒有break停止語句，如果成績是4分，則case 5後面的語句將會得到執行，同樣，case6、7-10後面的語句都會得到執行。
5. for迴圈
很多事情不只是做一次，要重複做。如列印10份試卷，每次列印一份，重複這個動作，直到列印完成。這些事情，我們使用迴圈語句來完成，迴圈語句，就是重複執行一段程式碼。
for語句結構：
for(初始化變數;迴圈條件;迴圈迭代)
{
迴圈語句
}
假如，一個盒子裡有6個球，我們每次取一個，重複從盒中取出球，直到球取完為止。
<script type="text/javascript">
var num=1;
for (num=1;num<=6;num++) //初始化值；迴圈條件；迴圈後條件值更新
{ document.write("取出第"+num+"個球<br />");
}
</script>
結果:
執行思路:
6. while迴圈
和for迴圈有相同功能的還有while迴圈, while迴圈重複執行一段程式碼，直到某個條件不再滿足。
while語句結構：
while(判斷條件)
{
迴圈語句
}
使用while迴圈，完成從盒子裡取球的動作，每次取一個，共6個球。
<script type="text/javascript">
var num=0; //初始化值
while (num<=6) //條件判斷
{
document.write("取出第"+num+"個球<br />");
num=num+1; //條件值更新
}
</script>
7. Do…while迴圈
do while結構的基本原理和while結構是基本相同的，但是它保證迴圈體至少被執行一次。因為它是先執行程式碼，後判斷條件，如果條件為真，繼續迴圈。
do…while語句結構：
do
{
迴圈語句
}
while(判斷條件)
我們試著輸出5個數字。
<script type="text/javascript">
num= 1;
do
{
document.write("數值為:" + num+"<br />");
num++; //更新條件
}
while (num<=5)
</script>
執行結果:
為什麼呢?我們來看下執行思路：
8. 退出迴圈break
在while、for、do…while、while迴圈中使用break語句退出當前迴圈，直接執行後面的程式碼。
格式如下：
for(初始條件;判斷條件;迴圈後條件值更新)
{
if(特殊情況)
{break;}
迴圈程式碼
}
當遇到特殊情況的時候，迴圈就會立即結束。看看下面的例子，輸出10個數，如果數值為5，就停止輸出。
執行結果:
注:當num=5的時候迴圈就會結束，不會輸出後面迴圈的內容。
9. 繼續迴圈continue
continue的作用是僅僅跳過本次迴圈，而整個迴圈體繼續執行。
語句結構：
for(初始條件;判斷條件;迴圈後條件值更新)
{
if(特殊情況)
{ continue; }
迴圈程式碼
}
上面的迴圈中，當特殊情況發生的時候，本次迴圈將被跳過，而後續的迴圈則不會受到影響。好比輸出10個數字，如果數字為5就不輸出了。
執行結果:
注:上面的程式碼中，num=5的那次迴圈將被跳過。
程式碼練習：
在一個大學的程式設計選修課班裡，我們得到了一組參加該班級的學生資料，分別是姓名、性別、年齡和年級，接下來呢，我們要利用JavaScript的知識挑出其中所有是大一的女生的的名字哦。
學生資訊如下：
(`小A`,`女`,21,`大一`), (`小B`,`男`,23,`大三`),
(`小C`,`男`,24,`大四`), (`小D`,`女`,21,`大一`),
(`小E`,`女`,22,`大四`), (`小F`,`男`,21,`大一`),
(`小G`,`女`,22,`大二`), (`小H`,`女`,20,`大三`),
(`小I`,`女`,20,`大一`), (`小J`,`男`,20,`大三`)
任務
第一步： 把這些資料組成一個陣列，方便我們之後操作哦。
提示: 使用二維陣列。
第二步： 篩選資料吧，首先找出都是大一的所有資訊 ;
第三步： 最後再一次篩選上一步得到的資料，列印出都是女生的姓名 ;
提示: 可以用switch 或 if 語句進行篩選。
1 !DOCTYPE HTML>
2 <html >
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>流程控制語句</title>
6 <script type="text/javascript">
7
8 //第一步把之前的資料寫成一個陣列的形式,定義變數為 infos
9 var infos=[[`小A`,`女`,21,`大一`],
10 [`小B`,`男`,23,`大三`],
11 [`小C`,`男`,24,`大四`],
12 [`小D`,`女`,21,`大一`],
13 [`小E`,`女`,22,`大四`],
14 [`小F`,`男`,21,`大一`],
15 [`小G`,`女`,22,`大二`],
16 [`小H`,`女`,20,`大三`],
17 [`小I`,`女`,20,`大一`],
18 [`小J`,`男`,20,`大三`]
19 ];
20
21 var b=new Array();
22 var j=0;
23 //第一次篩選，找出都是大一的資訊
24 for(var i=0;i<infos.length;i++){
25 if(infos[i][3]=="大一"){
26 b[j]=infos[i];
27 j++;
28 document.write(infos[i]+"<br/>");
29 }
30 }
31
32 //第二次篩選，找出都是女生的資訊
33 for(var i=0;i<b.length;i++){
34 if(b[i][1]=="女"){
35 document.write(b[i][0]+"<br/>");
36 }
37 }
38
39 </script>
40 </head>
41 <body>
42 </body>
43 </html>