四、JavaScript進階篇①——基礎語法

時間 2020-06-03

原文原文鏈接

閱讀目錄（原創-萌小Q）javascript

1、認識JS
2、什麼是變量
3、表達式
4、操做符
5、數組
6、二維數組
7、流程控制語句

1、認識JS

你知道嗎，Web前端開發師須要掌握什麼技術?也許你已經瞭解HTML標記(也稱爲結構)，知道了CSS樣式(也稱爲表示)，會使用HTML+CSS建立一個漂亮的頁面，但這還不夠，它只是靜態頁面而已。咱們還需使用JavaScript增長行爲，爲網頁添加動態效果。準備好，讓JavaScript帶你進入新境界吧!html

JavaScript能作什麼？前端

1.加強頁面動態效果(如:下拉菜單、圖片輪播、信息滾動等)java

2.實現頁面與用戶之間的實時、動態交互(如:用戶註冊、登錄驗證等)web

JS進階篇學習什麼？面試

在JavaScript入門篇中，咱們學習瞭如何插入JS、輸出內容及簡單的DOM操做，JavaScript進階篇讓您進一步的瞭解JS的變量、數組、函數、語法、對象、事件、DOM操做，製做簡單的網頁動態效果。編程

注意:

1. JS是區分大小寫的，如：classname和ClassName是不同的。同時注意方法、屬性、變量等的大小寫吆。

2. JS中的字符、符號等必定要在英文狀態下輸入吆。

2、什麼是變量

什麼是變量? 從字面上看，變量是可變的量；從編程角度講，變量是用於存儲某種/某些數值的存儲器。咱們能夠把變量看作一個盒子,盒子用來存放物品,物品能夠是衣服、玩具、水果...等。數組

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)。

3、表達式

表達式與數學中的定義類似，表達式是指具備必定的值、用操做符把常數和變量鏈接起來的代數式。一個表達式能夠包含常數或變量。

咱們先看看下面的JavaScript語句：

生活中「再見」表達方法不少，如:英語(goodbye）、網絡語（88）、肢體語（揮揮手）等。在JavaScript表達式無處不在，因此必定要知道能夠表達哪些內容，看看下面幾種狀況:

注意:串表達式中mychar是變量

注意:數值表達式中num是變量

注意:布爾表達式中num是變量

4、操做符

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

5、數組

咱們知道變量用來存儲數據，一個變量只能存儲一個內容。假設你想存儲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>

6、二維數組

一維數組，咱們當作一組盒子，每一個盒子只能放一個內容。

一維數組的表示: 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表示表的列。

7、流程控制語句

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
{ 條件一、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後面的語句將會獲得執行，一樣，case六、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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。