• 第一章、認(rèn)識JS
• 第二章、JS基礎(chǔ)語法
• 第三章、數(shù)組
• 第四章、流程控制語句
• 第五章、函數(shù)
• 第六章、讓網(wǎng)頁交互
• 第七章、JavaScript內(nèi)置對象

第一章、認(rèn)識JS

JavaScript能做什么？

• 1.增強(qiáng)頁面動態(tài)效果(如:下拉菜單、圖片輪播、信息滾動等)

• 2.實(shí)現(xiàn)頁面與用戶之間的實(shí)時(shí)、動態(tài)交互(如:用戶注冊、登陸驗(yàn)證等)

第二章、JS基礎(chǔ)語法

什么是變量

變量是用于存儲某種/某些數(shù)值的存儲器。我們可以把變量看做一個(gè)盒子,盒子用來存放物品,物品可以是衣服、玩具、水果...等。

變量命名

遵循以下規(guī)則:

• 1.必須以字母、下劃線或美元符號開頭，后面可以跟字母、下劃線、美元符號和數(shù)字。如下:

正確:           
    mysum            
    _mychar         
    $numa1  

• 2.變量名區(qū)分大小寫，如:A與a是兩個(gè)不同變量。

• 3.不允許使用JavaScript關(guān)鍵字和保留字做變量名。

  
  
  image.png
  
  
  image.png

變量聲明

聲明變量語法: var 變量名;    

var就相當(dāng)于找盒子的動作，在JavaScript中是關(guān)鍵字（即保留字），這個(gè)關(guān)鍵字的作用是聲明變量，并為"變量"準(zhǔn)備位置(即內(nèi)存）。

var mynum ; //聲明一個(gè)變量mynum

當(dāng)然，我們可以一次找一個(gè)盒子，也可以一次找多個(gè)盒子，所以Var還可以一次聲明多個(gè)變量，變量之間用","逗號隔開。

var num1,mun2 ; //聲明一個(gè)變量num1

注意:變量也可以不聲明，直接使用，但為了規(guī)范，需要先聲明，后使用。

變量賦值

我們使用"="號給變量存儲內(nèi)容,看下面的語句:

var mynum = 5 ; //聲明變量mynum并賦值。
var num1 = 123;       // 123是數(shù)值
var num2 = "一二三";    //"一二三"是字符串
var num3=true;    //布爾值true（真），false(假)

注:這里 "="號的作用是給變量賦值，不是等于號。

表達(dá)式

表達(dá)式是指具有一定的值、用操作符把常數(shù)和變量連接起來的代數(shù)式。一個(gè)表達(dá)式可以包含常數(shù)或變量。
我們先看看下面的JavaScript語句：

image.png

image.png

image.png

image.png

加號操作符

JavaScript中還有很多這樣的操作符，例如，算術(shù)操作符(+、-、*、/等)，比較操作符(<、>、>=、<=等)，邏輯操作符(&&、||、！)。
注意: “=” 操作符是賦值，不是等于。
算術(shù)運(yùn)算符主要用來完成類似加減乘除的工作，在JavaScript中，“+”不只代表加法，還可以連接兩個(gè)字符串，例如：

mystring = "Java" + "Script"; // mystring的值“JavaScript”這個(gè)字符串

自加一，自減一 ( ++和- -)

注意：
a++是先取值后運(yùn)算，++a是先運(yùn)算后取值。a++表達(dá)式的值，看我前面的講解，a++的值就是a的值，也就是100。 別忘了這語句結(jié)束后a的值就會自增1

var a=3; var b=a++; var c=a;

輸出：a=4; b=3; c=4

var a=3;
var b=++a;
var c=a;
 document.write(a,b,c)

輸出：a=4; b=4; c=4

mynum = 10;
mynum++; //mynum的值變?yōu)?1
mynum--; //mynum的值又變回10

mynum++使mynum值在原基礎(chǔ)上增加1，mynum--使mynum在原基礎(chǔ)上減去1,其實(shí)也可以寫成:
mynum = mynum + 1;//等同于mynum++
mynum = mynum - 1;//等同于mynum--```

比較操作符

在JavaScript中，這樣的比較操作符有很多，這些操作符的含義如下:

532a3c150001c65802010207.jpg

var a = 5;//定義a變量，賦值為5
var b = 9; //定義b變量，賦值為9
document.write (a<b); //a小于b的值嗎? 結(jié)果是真(true)
document.write (a>=b); //a大于或等于b的值嗎? 結(jié)果是假(false)
document.write (a!=b); //a不等于b的值嗎? 結(jié)果是真(true)
document.write (a==b); //a等于b的值嗎? 結(jié)果是假(false)`

邏輯與操作符

數(shù)學(xué)中的“b大于a，b小于c”是“a<b<c”，那么在JavaScript中可以用&&表示，如下：

b>a && b<c    //“&&”是并且的意思, 讀法"b大于a"并且" b小于c "

邏輯與操作符值表:

52a16f880001d27803770180.jpg

邏輯或操作符

"||"邏輯或操作符，相當(dāng)于生活中的“或者”，當(dāng)兩個(gè)條件中有任一個(gè)條件滿足，“邏輯或”的運(yùn)算結(jié)果就為“真”。

var a=3;
var b=5;
var c;
c=b>a ||a>b;  //b>a是true，a>b是false，c是true

邏輯或操作符值表:

530a9d2b0001a33e03770178.jpg

邏輯非操作符

"!"是邏輯非操作符，也就是"不是"的意思,非真即假，非假即真。

52a1760c000159a702330111.jpg

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

操作符優(yōu)先級

操作符之間的優(yōu)先級（高到低）:
算術(shù)操作符 → 比較操作符 → 邏輯操作符 → "="賦值符號
如果同級的運(yùn)算是按從左到右次序進(jìn)行,多層括號由里向外。

第三章、數(shù)組

什么是數(shù)組

一個(gè)數(shù)組變量可以存放多個(gè)數(shù)據(jù)。

52c9ff5c0001085a05460266.jpg

<script type="text/javascript">
 var myarr=new Array(); //定義數(shù)組
 myarr[0]=80; 
 myarr[1]=60;
 myarr[2]=99;
 document.write("第一個(gè)人的成績是:"+myarr[0]);
 document.write("第二個(gè)人的成績是:"+myarr[1]);
 document.write("第三個(gè)人的成績是:"+myarr[2]);
</script>

結(jié)果：
第一個(gè)人的成績是:80第二個(gè)人的成績是:60第三個(gè)人的成績是:99

如何創(chuàng)建數(shù)組

使用數(shù)組之前首先要?jiǎng)?chuàng)建，而且需要把數(shù)組本身賦至一個(gè)變量。好比我們出游，要組團(tuán)，并給團(tuán)定個(gè)名字“云南之旅”。

var myarray=new Array();

image.png

我們創(chuàng)建數(shù)組的同時(shí)，還可以為數(shù)組指定長度，長度可任意指定。

var myarray= new Array(8); //創(chuàng)建數(shù)組，存儲8個(gè)數(shù)據(jù)。 

注意：
1.創(chuàng)建的新數(shù)組是空數(shù)組，沒有值，如輸出，則顯示undefined。
2.雖然創(chuàng)建數(shù)組時(shí)，指定了長度，但實(shí)際上數(shù)組都是變長的，也就是說即使指定了長度為8，仍然可以將元素存儲在規(guī)定長度以外。

數(shù)組賦值

數(shù)組的表達(dá)方式：

第一步：創(chuàng)建數(shù)組var myarr=new Array(); 
第二步：給數(shù)組賦值
        myarr[1]=" 張三";
        myarr[2]=" 李四";

注意：數(shù)組每個(gè)值有一個(gè)索引號，從0開始。
我們還可以用簡單的方法創(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ù)組存儲的數(shù)據(jù)可以是任何類型（數(shù)字、字符、布爾值等）

向數(shù)組增加一個(gè)新元素

52ca00eb0001dd4805120199.jpg

只需使用下一個(gè)未用的索引，任何時(shí)刻可以不斷向數(shù)組增加新元素。

myarray[5]=88; //使用一個(gè)新索引，為數(shù)組增加一個(gè)新元素

使用數(shù)組元素

我們知道數(shù)組中的每個(gè)值有一個(gè)索引號，從0開始，如下圖， myarray變量存儲6個(gè)人的成績：

52ca012800016f3505460234.jpg

要得到一個(gè)數(shù)組元素的值，只需引用數(shù)組變量并提供一個(gè)索引，如：
第一個(gè)人的成績表示方法：myarray[0]
第三個(gè)人的成績表示方法: myarray[2]

數(shù)組屬性length

如果我們想知道數(shù)組的大小，只需引用數(shù)組的一個(gè)屬性length。Length屬性表示數(shù)組的長度，即數(shù)組中元素的個(gè)數(shù)。
語法：

myarray.length; //獲得數(shù)組myarray的長度

注意：因?yàn)閿?shù)組的索引總是由0開始，所以一個(gè)數(shù)組的上下限分別是：0和length-1。如數(shù)組的長度是5，數(shù)組的上下限分別是0和4。
同時(shí)，JavaScript數(shù)組的length屬性是可變的，這一點(diǎn)需要特別注意

arr.length=10; //增大數(shù)組的長度
document.write(arr.length); //數(shù)組長度已經(jīng)變?yōu)?0

數(shù)組隨元素的增加，長度也會改變，如下:

var arr=[98,76,54,56,76]; // 包含5個(gè)數(shù)值的數(shù)組
document.write(arr.length); //顯示數(shù)組的長度5
arr[15]=34;  //增加元素，使用索引為15,賦值為34
alert(arr.length); //顯示數(shù)組的長度16

二維數(shù)組

一維數(shù)組，我們看成一組盒子，每個(gè)盒子只能放一個(gè)內(nèi)容。

一維數(shù)組的表示: myarray[ ]

二維數(shù)組，我們看成一組盒子，不過每個(gè)盒子里還可以放多個(gè)盒子。

二維數(shù)組的表示: myarray[ ][ ]

注意: 二維數(shù)組的兩個(gè)維度的索引值也是從0開始，兩個(gè)維度的最后一個(gè)索引值為長度-1。
1. 二維數(shù)組的定義方法一

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;   // 賦值，每個(gè)數(shù)組元素的值為i+j
   }
 }

注意: 關(guān)于for 循環(huán)語句，請看第四章4-5 。

將上面二維數(shù)組，用表格的方式表示:

537957a20001c24c03200210.jpg

3. 賦值
myarr[0][1]=5; //將5的值傳入到數(shù)組中，覆蓋原有值。

說明: myarr[0][1] ,0 表示表的行，1表示表的列。

第四章、流程控制語句

if語句

語法:

if(條件)
{ 條件成立時(shí)執(zhí)行代碼}

假設(shè)你應(yīng)聘web前端技術(shù)開發(fā)崗位，如果你會HTML技術(shù)，你面試成功，歡迎加入公司。代碼表示如下:

<script type="text/javascript">
  var mycarrer = "HTML";
  if (mycarrer == "HTML")
  {
    document.write("你面試成功，歡迎加入公司。");
  }
</script>

if...else語句

語法:

if(條件)
{ 條件成立時(shí)執(zhí)行的代碼}
else
{條件不成立時(shí)執(zhí)行的代碼}

if..else嵌套語句

語法:

if(條件1)
{ 條件1成立時(shí)執(zhí)行的代碼}
else  if(條件2)
![52d121a70001de7503470226.jpg](https://upload-images.jianshu.io/upload_images/13172591-7abba84428e2c7bb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
{ 條件2成立時(shí)執(zhí)行的代碼}
...
else  if(條件n)
{ 條件n成立時(shí)執(zhí)行的代碼}
else
{ 條件1、2至n不成立時(shí)執(zhí)行的代碼}

假設(shè)數(shù)學(xué)考試，小明考了86分，給他做個(gè)評價(jià)，60分以下的不及格，60(包含60分)-75分為良好，75(包含75分)-85分為很好，85(包含85分)-100優(yōu)秀。

541799000001aada05260280.jpg

結(jié)果:

52d121a70001de7503470226.jpg

Switch語句

當(dāng)有很多種選項(xiàng)的時(shí)候，switch比if else使用更方便。
語法:

switch(表達(dá)式)
{
case值1:
  執(zhí)行代碼塊 1
  break;
case值2:
 [圖片上傳中...(52d1293c0001394705510767.jpg-b47af4-1552638737562-0)]
 執(zhí)行代碼塊 2
  break;
...
case值n:
  執(zhí)行代碼塊 n
  break;
default:
  與 case值1 、 case值2...case值n 不同時(shí)執(zhí)行的代碼
}

語法說明:
Switch必須賦初始值，值與每個(gè)case值匹配。滿足執(zhí)行該 case 后的所有語句，并用break語句來阻止運(yùn)行下一個(gè)case。如所有case值都不匹配，執(zhí)行default后的語句。

假設(shè)評價(jià)學(xué)生的考試成績，10分滿分制，我們按照每一分一個(gè)等級將成績分等，并根據(jù)成績的等級做出不同的評價(jià)。
代碼如下:

52d1293c0001394705510767.jpg

52d128b80001995105210640.jpg

[圖片上傳中...(5579623800015fdb06300666.jpg-6e8533-1552639572297-0)]
在上面的代碼中，沒有break停止語句，如果成績是4分，則case 5后面的語句將會得到執(zhí)行，同樣，case6、7-10后面的語句都會得到執(zhí)行。

for循環(huán)

for語句結(jié)構(gòu)：

for(初始化變量;循環(huán)條件;循環(huán)迭代)
{     
    循環(huán)語句 
 }

假如，一個(gè)盒子里有6個(gè)球，我們每次取一個(gè)，重復(fù)從盒中取出球，直到球取完為止。

<script type="text/javascript">
var num=1;
for (num=1;num<=6;num++)  //初始化值；循環(huán)條件；循環(huán)后條件值更新
{   document.write("取出第"+num+"個(gè)球<br />");
}
</script>

結(jié)果:

while循環(huán)

while語句結(jié)構(gòu)：

while(判斷條件)
{
    循環(huán)語句
 }

使用while循環(huán)，完成從盒子里取球的動作，每次取一個(gè)，共6個(gè)球。

<script type="text/javascript">
var num=0;  //初始化值
while (num<=6)   //條件判斷
{
  document.write("取出第"+num+"個(gè)球<br />");
  num=num+1;  //條件值更新
}
</script>

Do...while循環(huán)

do while結(jié)構(gòu)的基本原理和while結(jié)構(gòu)是基本相同的，但是它保證循環(huán)體至少被執(zhí)行一次。因?yàn)樗窍葓?zhí)行代碼，后判斷條件，如果條件為真，繼續(xù)循環(huán)。
do...while語句結(jié)構(gòu)：

do
{
    循環(huán)語句
 }
while(判斷條件)=-=

我們試著輸出5個(gè)數(shù)字。

<script type="text/javascript">
   num= 1;
   do
   {
     document.write("數(shù)值為:" +  num+"<br />");
     num++; //更新條件
   }
   while (num<=5)
</script>

執(zhí)行結(jié)果:

52dc805c0001da3703680274.jpg

退出循環(huán)break

格式如下：

for(初始條件;判斷條件;循環(huán)后條件值更新)
{
  if(特殊情況)
  {break;}
  循環(huán)代碼
}

當(dāng)遇到特殊情況的時(shí)候，循環(huán)就會立即結(jié)束?？纯聪旅娴睦?，輸出10個(gè)數(shù)，如果數(shù)值為5，就停止輸出。

5579623800015fdb06300666.jpg

執(zhí)行結(jié)果:

52dc85920001b91503690273.jpg

繼續(xù)循環(huán)continue

語句結(jié)構(gòu)：

for(初始條件;判斷條件;循環(huán)后條件值更新)
{
  if(特殊情況)
  { continue; }
 循環(huán)代碼
}

上面的循環(huán)中，當(dāng)特殊情況發(fā)生的時(shí)候，本次循環(huán)將被跳過，而后續(xù)的循環(huán)則不會受到影響。好比輸出10個(gè)數(shù)字，如果數(shù)字為5就不輸出了。

52dc85920001b91503690273.jpg

執(zhí)行結(jié)果:

52dc88e800017b8d03700342.jpg

第五章、函數(shù)

什么是函數(shù)

使用函數(shù)

function add2(a,b){
sum = a + b;
 alert(sum);
} //  只需寫一次就可以

add2(3,2);
add2(7,8);
....  //只需調(diào)用函數(shù)就可以

定義函數(shù)

function  函數(shù)名( )
{
     函數(shù)體;
}

函數(shù)調(diào)用

第一種情況:在<script>標(biāo)簽內(nèi)調(diào)用。

 <script type="text/javascript">
    function add2()
    {
         sum = 1 + 1;
         alert(sum);
    }
  add2();//調(diào)用函數(shù)，直接寫函數(shù)名。
</SCRIPT>

第二種情況:在HTML文件中調(diào)用，如通過點(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)擊事件，直接寫函數(shù)名
</form>
</body>
</html>

有參數(shù)的函數(shù)

function 函數(shù)名(參數(shù)1,參數(shù)2)
{
     函數(shù)代碼
}

注意:參數(shù)可以多個(gè)，根據(jù)需要增減參數(shù)個(gè)數(shù)。參數(shù)之間用(逗號，）隔開。

function add2(x,y)
{
   sum = x + y;
   document.write(sum);
}

返回值的函數(shù)

function add2(x,y)
{
   sum = x + y;
   return sum; //返回函數(shù)值,return后面的值叫做返回值。
}

還可以通過變量存儲調(diào)用函數(shù)的返回值，代碼如下:

result = add2(3,4);//語句執(zhí)行后,result變量中的值為7。

**注意:函數(shù)中參數(shù)和返回值不只是數(shù)字，還可以是字符串等其它類型。 **

第六章、事件響應(yīng)，讓網(wǎng)頁交互

什么是事件

JavaScript 創(chuàng)建動態(tài)頁面。事件是可以被 JavaScript 偵測到的行為。 網(wǎng)頁中的每個(gè)元素都可以產(chǎn)生某些可以觸發(fā) JavaScript 函數(shù)或程序的事件。

比如說，當(dāng)用戶單擊按鈕或者提交表單數(shù)據(jù)時(shí)，就發(fā)生一個(gè)鼠標(biāo)單擊（onclick）事件，需要瀏覽器做出處理，返回給用戶一個(gè)結(jié)果。

主要事件表:

53e198540001b66404860353.jpg

鼠標(biāo)單擊事件( onclick ）

onclick是鼠標(biāo)單擊事件，當(dāng)在網(wǎng)頁上單擊鼠標(biāo)時(shí)，就會發(fā)生該事件。同時(shí)onclick事件調(diào)用的程序塊就會被執(zhí)行，通常與按鈕一起使用。

比如，我們單擊按鈕時(shí)，觸發(fā) onclick 事件，并調(diào)用兩個(gè)數(shù)和的函數(shù)add2()。代碼如下：

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

鼠標(biāo)經(jīng)過事件（onmouseover）

鼠標(biāo)經(jīng)過事件，當(dāng)鼠標(biāo)移到一個(gè)對象上時(shí)，該對象就觸發(fā)onmouseover事件，并執(zhí)行onmouseover事件調(diào)用的程序。

現(xiàn)實(shí)鼠標(biāo)經(jīng)過"確定"按鈕時(shí)，觸發(fā)onmouseover事件，調(diào)用函數(shù)info()，彈出消息框，代碼如下:

52dc85920001b91503690273.jpg

運(yùn)行結(jié)果:

53e196fd00017d8704870416.jpg

鼠標(biāo)移開事件（onmouseout）

鼠標(biāo)移開事件，當(dāng)鼠標(biāo)移開當(dāng)前對象時(shí)，執(zhí)行onmouseout調(diào)用的程序。

當(dāng)把鼠標(biāo)移動到"登錄"按鈕上，然后再移開時(shí)，觸發(fā)onmouseout事件，調(diào)用函數(shù)message()，代碼如下:

53e196fd00017d8704870416.jpg

運(yùn)行結(jié)果:

53e195bf00010d1804760385.jpg

光標(biāo)聚焦事件（onfocus）

當(dāng)網(wǎng)頁中的對象獲得聚點(diǎn)時(shí)，執(zhí)行onfocus調(diào)用的程序就會被執(zhí)行。

如下代碼, 當(dāng)將光標(biāo)移到文本框內(nèi)時(shí)，即焦點(diǎn)在文本框內(nèi)，觸發(fā)onfocus 事件，并調(diào)用函數(shù)message()。

里53e19337000113d108390338.jpg

運(yùn)行結(jié)果：

5312c566000很快就來1821a04300326.jpg

失焦事件（onblur）

onblur事件與onfocus是相對事件，當(dāng)光標(biāo)離開當(dāng)前獲得聚焦對象的時(shí)候，觸發(fā)onblur事件，同時(shí)執(zhí)行被調(diào)用的程序。

如下代碼, 網(wǎng)頁中有用戶和密碼兩個(gè)文本框。當(dāng)前光標(biāo)在用戶文本框內(nèi)時(shí)（即焦點(diǎn)在文本框），在光標(biāo)離開該文本框后（即失焦時(shí)），觸發(fā)onblur事件，并調(diào)用函數(shù)message()。

阿斯頓發(fā)送到.jpg

運(yùn)行結(jié)果：

阿斯頓發(fā)送到.jpg

內(nèi)容選中事件（onselect）

選中事件，當(dāng)文本框或者文本域中的文字被選中時(shí)，觸發(fā)onselect事件，同時(shí)調(diào)用的程序就會被執(zhí)行。

如下代碼,當(dāng)選中用戶文本框內(nèi)的文字時(shí)，觸發(fā)onselect 事件，并調(diào)用函數(shù)message()。

53e190b70001ffa908560325.jpg

運(yùn)行結(jié)果：

5312d7ba00013fff03950319.jpg

文本框內(nèi)容改變事件（onchange）

通過改變文本框的內(nèi)容來觸發(fā)onchange事件，同時(shí)執(zhí)行被調(diào)用的程序。

如下代碼,當(dāng)用戶將文本框內(nèi)的文字改變后，彈出對話框“您改變了文本內(nèi)容！”。

trh.jpg

運(yùn)行結(jié)果：

image.png

加載事件（onload）

事件會在頁面加載完成后，立即發(fā)生，同時(shí)執(zhí)行被調(diào)用的程序。
注意：

1. 加載頁面時(shí)，觸發(fā)onload事件，事件寫在<body>標(biāo)簽內(nèi)。

2. 此節(jié)的加載頁面，可理解為打開一個(gè)新頁面時(shí)。
   如下代碼,當(dāng)加載一個(gè)新頁面時(shí)，彈出對話框“加載中，請稍等…”。

   
   
   image.png
   
   

   運(yùn)行結(jié)果：

   
   
   image.png

卸載事件（onunload）

當(dāng)用戶退出頁面時(shí)（頁面關(guān)閉、頁面刷新等），觸發(fā)onUnload事件，同時(shí)執(zhí)行被調(diào)用的程序。

注意：不同瀏覽器對onunload事件支持不同。

如下代碼,當(dāng)退出頁面時(shí)，彈出對話框“您確定離開該網(wǎng)頁嗎？”

image.png

運(yùn)行結(jié)果：（IE瀏覽器）

image.png

使用JS完成一個(gè)簡單的計(jì)算器功能。實(shí)現(xiàn)2個(gè)輸入框中輸入整數(shù)后，點(diǎn)擊第三個(gè)輸入框能給出2個(gè)整數(shù)的加減乘除。

提示：獲取元素的值設(shè)置和獲取方法為：例：賦值：document.getElementById(“id”）.value = 1； 取值：var = document.getElementById(“id”）.value；

<!DOCTYPE html>
<html>
 <head>
  <title> 事件</title>  
  <script type="text/javascript">
   function count(){
       
  var firstValue=parseInt(document.getElementById("txt1").value);
  var seconedValue=parseInt(document.getElementById("txt2").value);//獲取第二個(gè)輸入框的值
  var myoption=document.getElementById("select").value;//獲取通過下拉框來選擇的值來改變加減乘除的運(yùn)算法則
  switch (myoption) {
      case "+":
      var lastValue=firstValue+seconedValue;
        break;
      case "-":
      var lastValue=firstValue-seconedValue;
      break;
      case "*":
      var lastValue=firstValue*seconedValue;
      break;
      default:
      var lastValue=firstValue/seconedValue;
    }  
    document.getElementById("fruit").value=lastValue;
   }
  </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()" /> <!--通過 = 按鈕來調(diào)用創(chuàng)建的函數(shù)，得到結(jié)果--> 
   <input type='text' id='fruit' />   
 </body>
</html>

效果：

image.png

第七章、javascript內(nèi)置對象

JavaScript 中的所有事物都是對象，如:字符串、數(shù)值、數(shù)組、函數(shù)等，每個(gè)對象帶有屬性和方法。
對象的屬性：反映該對象某些特定的性質(zhì)的，如：字符串的長度、圖像的長寬等；
對象的方法：能夠在對象上執(zhí)行的動作。例如，表單的“提交”(Submit)，時(shí)間的“獲取”(getYear)等；
JavaScript 提供多個(gè)內(nèi)建對象，比如 String、Date、Array 等等，使用對象前先定義，如下使用數(shù)組對象：

  var objectName =new Array();//使用new關(guān)鍵字定義對象
或者
  var objectName =[];

訪問對象屬性的語法:

objectName.propertyName

如使用 Array 對象的 length 屬性來獲得數(shù)組的長度：

var myarray=new Array(6);//定義數(shù)組對象
var myl=myarray.length;//訪問數(shù)組長度length屬性

訪問對象的方法：

var mystr="Hello world!";//創(chuàng)建一個(gè)字符串
var request=mystr.toUpperCase(); //使用字符串對象方法

以上代碼執(zhí)行后，request的值是：HELLO WORLD!

Date 日期對象

日期對象可以儲存任意一個(gè)日期，并且可以精確到毫秒數(shù)（1/1000 秒）。

定義一個(gè)時(shí)間對象 :

var Udate=new Date(); 

注意:使用關(guān)鍵字new，Date()的首字母必須大寫。
使 Udate 成為日期對象，并且已有初始值：當(dāng)前時(shí)間(當(dāng)前電腦系統(tǒng)時(shí)間)。

如果要自定義初始值，可以用以下方法：

var d = new Date(2012, 10, 1);  //2012年10月1日
var d = new Date('Oct 1, 2012'); //2012年10月1日

我們最好使用下面介紹的“方法”來嚴(yán)格定義時(shí)間。

訪問方法語法：“<日期對象>.<方法>”
Date對象中處理時(shí)間和日期的常用方法：

image.png

返回/設(shè)置年份方法

get/setFullYear() 返回/設(shè)置年份，用四位數(shù)表示。

var mydate=new Date();//當(dāng)前時(shí)間2014年3月6日
document.write(mydate+"<br>");//輸出當(dāng)前時(shí)間
document.write(mydate.getFullYear()+"<br>");//輸出當(dāng)前年份
mydate.setFullYear(81); //設(shè)置年份
document.write(mydate+"<br>"); //輸出年份被設(shè)定為 0081年。

注意:不同瀏覽器， mydate.setFullYear(81)結(jié)果不同，年份被設(shè)定為 0081或81兩種情況。
結(jié)果:

Thu Mar 06 2014 10:57:47 GMT+0800
2014
Thu Mar 06 0081 10:57:47 GMT+0800

注意:

1.結(jié)果格式依次為：星期、月、日、年、時(shí)、分、秒、時(shí)區(qū)。(火狐瀏覽器)

2. 不同瀏覽器，時(shí)間格式有差異。

返回星期方法

getDay() 返回星期，返回的是0-6的數(shù)字，0 表示星期天。如果要返回相對應(yīng)“星期”，通過數(shù)組完成，代碼如下:

<script type="text/javascript">
  var mydate=new Date();//定義日期對象
  var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
//定義數(shù)組對象,給每個(gè)數(shù)組項(xiàng)賦值
  var mynum=mydate.getDay();//返回值存儲在變量mynum中
  document.write(mydate.getDay());//輸出getDay()獲取值
  document.write("今天是："+ weekday[mynum]);//輸出星期幾
</script>

返回/設(shè)置時(shí)間方法

get/setTime() 返回/設(shè)置時(shí)間，單位毫秒數(shù)，計(jì)算從 1970 年 1 月 1 日零時(shí)到日期對象所指的日期的毫秒數(shù)。

如果將目前日期對象的時(shí)間推遲1小時(shí)，代碼如下:

<script type="text/javascript">
  var mydate=new Date();
  document.write("當(dāng)前時(shí)間："+mydate+"<br>");
  mydate.setTime(mydate.getTime() + 60 * 60 * 1000);
  document.write("推遲一小時(shí)時(shí)間：" + mydate);
</script>

結(jié)果:

當(dāng)前時(shí)間：Thu Mar 6 11:46:27 UTC+0800 2014

推遲一小時(shí)時(shí)間：Thu Mar 6 12:46:27 UTC+0800 2014

注意:

1. 一小時(shí) 60 分，一分 60 秒，一秒 1000 毫秒
2. 時(shí)間推遲 1 小時(shí),就是: “x.setTime(x.getTime() + 60 * 60 * 1000);”

String 字符串對象

在之前的學(xué)習(xí)中已經(jīng)使用字符串對象了，定義字符串的方法就是直接賦值。比如：

var mystr = "I love JavaScript!"

定義mystr字符串后，我們就可以訪問它的屬性和方法。

訪問字符串對象的屬性length:

stringObject.length; 返回該字符串的長度。

var mystr="Hello World!";
var myl=mystr.length;

以上代碼執(zhí)行后，myl 的值將是：12

訪問字符串對象的方法：
使用 String 對象的 toUpperCase() 方法來將字符串小寫字母轉(zhuǎn)換為大寫：

var mystr="Hello world!";
var mynum=mystr.toUpperCase();

以上代碼執(zhí)行后，mynum 的值是：HELLO WORLD!

返回指定位置的字符

charAt() 方法可返回指定位置的字符。返回的字符是長度為 1 的字符串。
語法:

stringObject.charAt(index)

image.png

注意：
1.字符串中第一個(gè)字符的下標(biāo)是 0。最后一個(gè)字符的下標(biāo)為字符串長度減一（string.length-1）。

2.如果參數(shù) index 不在 0 與 string.length-1 之間，該方法將返回一個(gè)空字符串。

如:在字符串 "I love JavaScript!" 中，返回位置2的字符：

<script type="text/javascript">
  var mystr="I love JavaScript!"
  document.write(mystr.charAt(2));
</script>

注意：一個(gè)空格也算一個(gè)字符。

以上代碼的運(yùn)行結(jié)果：
1

返回指定的字符串首次出現(xiàn)的位置

indexOf() 方法可返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置。
語法

stringObject.indexOf(substring, startpos)

參數(shù)說明：

image.png

1.該方法將從頭到尾地檢索字符串 stringObject，看它是否含有子串 substring。

2.可選參數(shù)，從stringObject的startpos位置開始查找substring，如果沒有此參數(shù)將從stringObject的開始位置查找。

3.如果找到一個(gè) substring，則返回 substring 的第一次出現(xiàn)的位置。stringObject 中的字符位置是從 0 開始的。

注意：

1.indexOf() 方法區(qū)分大小寫。

2.如果要檢索的字符串值沒有出現(xiàn)，則該方法返回 -1。

例如: 對 "I love JavaScript!" 字符串內(nèi)進(jìn)行不同的檢索：

<script type="text/javascript">
  var str="I love JavaScript!"
  document.write(str.indexOf("I") + "<br />");
  document.write(str.indexOf("v") + "<br />");
  document.write(str.indexOf("v",8));
</script>

以上代碼的輸出：
0
4
9

字符串分割split()

知識講解：

split() 方法將字符串分割為字符串?dāng)?shù)組，并返回此數(shù)組。
語法：

stringObject.split(separator,limit)

image.png

注意：如果把空字符串 ("") 用作 separator，那么 stringObject 中的每個(gè)字符之間都會被分割。

我們將按照不同的方式來分割字符串：

使用指定符號分割字符串，代碼如下:

var mystr = "www.imooc.com";
document.write(mystr.split(".")+"<br>");
document.write(mystr.split(".", 2)+"<br>");

運(yùn)行結(jié)果:

www,imooc,com
www,imooc

將字符串分割為字符，代碼如下：

document.write(mystr.split("")+"<br>");
document.write(mystr.split("", 5));

運(yùn)行結(jié)果:

w,w,w,.,i,m,o,o,c,.,c,o,m
w,w,w,.,i

提取字符串substring()

substring() 方法用于提取字符串中介于兩個(gè)指定下標(biāo)之間的字符。

語法:##

stringObject.substring(startPos,stopPos) 

參數(shù)說明:

image.png

1. 返回的內(nèi)容是從 start開始(包含start位置的字符)到 stop-1 處的所有字符，其長度為 stop 減start。

2. 如果參數(shù) start 與 stop 相等，那么該方法返回的就是一個(gè)空串（即長度為 0 的字符串）。

3. 如果 start 比 stop 大，那么該方法在提取子串之前會先交換這兩個(gè)參數(shù)。

使用 substring() 從字符串中提取字符串，代碼如下

<script type="text/javascript">
  var mystr="I love JavaScript";
  document.write(mystr.substring(7));
  document.write(mystr.substring(2,6));
</script>

運(yùn)行結(jié)果:

JavaScript
love

提取指定數(shù)目的字符substr()

substr() 方法從字符串中提取從 startPos位置開始的指定數(shù)目的字符串。
語法:

stringObject.substr(startPos,length)

image.png

如果startPos為負(fù)數(shù)且絕對值大于字符串長度，startPos為0。

使用 substr() 從字符串中提取一些字符，代碼如下：

<script type="text/javascript">
  var mystr="I love JavaScript!";
  document.write(mystr.substr(7));
  document.write(mystr.substr(2,4));
</script>

運(yùn)行結(jié)果：

JavaScript!
love

Math對象

Math對象，提供對數(shù)據(jù)的數(shù)學(xué)計(jì)算。使用 Math 的屬性和方法，代碼如下:

<script type="text/javascript">
  var mypi=Math.PI; 
  var myabs=Math.abs(-15);
  document.write(mypi);
  document.write(myabs);
</script>

運(yùn)行結(jié)果:
3.141592653589793
15
Math 對象是一個(gè)固有的對象，無需創(chuàng)建它，直接把 Math 作為對象使用就可以調(diào)用其所有屬性和方法。這是它與Date,String對象的區(qū)別。
Math 對象屬性

532fe7cf0001e7b505170269.jpg

532fe841000174db05160622.jpg

取整ceil()

ceil() 方法可對一個(gè)數(shù)進(jìn)行向上取整。
語法:

Math.ceil(x)

532fe8e00001e4e605230063.jpg

<script type="text/javascript">
  document.write(Math.ceil(0.8) + "<br />")
  document.write(Math.ceil(6.3) + "<br />")
  document.write(Math.ceil(5) + "<br />")
  document.write(Math.ceil(3.5) + "<br />")
  document.write(Math.ceil(-5.1) + "<br />")
  document.write(Math.ceil(-5.9))
</script>

運(yùn)行結(jié)果：
1
7
5
4
-5
-5

向下取整floor()

floor() 方法可對一個(gè)數(shù)進(jìn)行向下取整。
語法:

Math.floor(x)

參數(shù)說明：

532fe8e00001e4e605230063 (1).jpg

注意：返回的是小于或等于x，并且與 x 最接近的整數(shù)。

我們將在不同的數(shù)字上使用 floor() 方法，代碼如下:

<script type="text/javascript">
  document.write(Math.floor(0.8)+ "<br>")
  document.write(Math.floor(6.3)+ "<br>")
  document.write(Math.floor(5)+ "<br>")
  document.write(Math.floor(3.5)+ "<br>")
  document.write(Math.floor(-5.1)+ "<br>")
  document.write(Math.floor(-5.9))
</script>

運(yùn)行結(jié)果：
0
6
5
3
-6
-6

四舍五入round()

round() 方法可把一個(gè)數(shù)字四舍五入為最接近的整數(shù)。
**語法:

Math.round(x)

532feb70000180ab03210059.jpg

注意：

1. 返回與 x 最接近的整數(shù)。

2. 對于 0.5，該方法將進(jìn)行上舍入。(5.5 將舍入為 6)

3. 如果 x 與兩側(cè)整數(shù)同等接近，則結(jié)果接近 +∞方向的數(shù)字值 。(如 -5.5 將舍入為 -5; -5.52 將舍入為 -6),如下圖:

53fc4cc8000169a907530196.jpg

<script type="text/javascript">
  document.write(Math.round(1.6)+ "<br>");
  document.write(Math.round(2.5)+ "<br>");
  document.write(Math.round(0.49)+ "<br>");
  document.write(Math.round(-6.4)+ "<br>");
  document.write(Math.round(-6.6));
</script>

運(yùn)行結(jié)果：
2
3
0
-6
-7

隨機(jī)數(shù) random()

random() 方法可返回介于[ 0 ~ 1)（大于或等于 0 但小于 1 )之間的一個(gè)隨機(jī)數(shù)。
語法：

Math.random();

<script type="text/javascript">
  document.write(Math.random());
</script>

運(yùn)行結(jié)果：
0.190305486195328
獲得0 ~ 10之間的隨機(jī)數(shù)，代碼如下:

<script type="text/javascript">
  document.write((Math.random())*10);
</script>

運(yùn)行結(jié)果：

8.72153625893887

Array 數(shù)組對象

數(shù)組對象是一個(gè)對象的集合，里邊的對象可以是不同類型的。數(shù)組的每一個(gè)成員對象都有一個(gè)“下標(biāo)”，用來表示它在數(shù)組中的位置，是從零開始的
數(shù)組定義的方法：

1. 定義了一個(gè)空數(shù)組:

var  數(shù)組名= new Array();

2. 定義時(shí)指定有n個(gè)空元素的數(shù)組：

var 數(shù)組名 =new Array(n);

3.定義數(shù)組的時(shí)候，直接初始化數(shù)據(jù)：

var  數(shù)組名 = [<元素1>, <元素2>, <元素3>...];

我們定義myArray數(shù)組，并賦值，代碼如下：

var myArray = [2, 8, 6]; 

說明：定義了一個(gè)數(shù)組 myArray，里邊的元素是：myArray[0] = 2; myArray[1] = 8; myArray[2] = 6。
數(shù)組元素使用：

數(shù)組名[下標(biāo)] = 值;

注意: 數(shù)組的下標(biāo)用方括號括起來，從0開始。
數(shù)組屬性：
length 用法：<數(shù)組對象>.length；返回：數(shù)組的長度，即數(shù)組里有多少個(gè)元素。它等于數(shù)組里最后一個(gè)元素的下標(biāo)加一。
數(shù)組方法：

533295ab0001dead05190599.jpg

數(shù)組連接concat()

concat() 方法用于連接兩個(gè)或多個(gè)數(shù)組。此方法返回一個(gè)新數(shù)組，不改變原來的數(shù)組。
語法:

arrayObject.concat(array1,array2,...,arrayN)

5332968d0001d39b05010137.jpg

注意: 該方法不會改變現(xiàn)有的數(shù)組，而僅僅會返回被連接數(shù)組的一個(gè)副本。

<script type="text/javascript">
  var mya = new Array(3);
  mya[0] = "1";
  mya[1] = "2";
  mya[2] = "3";
  document.write(mya.concat(4,5)+"<br>");
  document.write(mya); 
</script>

運(yùn)行結(jié)果：
1,2,3,4,5
1,2,3
我們創(chuàng)建了三個(gè)數(shù)組，然后使用 concat() 把它們連接起來，代碼如下：

<script type="text/javascript">
  var mya1= new Array("hello!")
  var mya2= new Array("I","love");
  var mya3= new Array("JavaScript","!");
  var mya4=mya1.concat(mya2,mya3);
  document.write(mya4);
</script>

運(yùn)行結(jié)果：

hello!,I,love,JavaScript,!

指定分隔符連接數(shù)組元素join()

join()方法用于把數(shù)組中的所有元素放入一個(gè)字符串。元素是通過指定的分隔符進(jìn)行分隔的。
語法：

arrayObject.join(分隔符)

參數(shù)說明:

533297ff0001516905150059.jpg

注意：返回一個(gè)字符串，該字符串把數(shù)組中的各個(gè)元素串起來，用<分隔符>置于元素與元素之間。這個(gè)方法不影響數(shù)組原本的內(nèi)容。 我們使用join（）方法，將數(shù)組的所有元素放入一個(gè)字符串中，代碼如下：

<script type="text/javascript">
  var myarr = new Array(3);
  myarr[0] = "I";
  myarr[1] = "love";
  myarr[2] = "JavaScript";
  document.write(myarr.join());
</script>

運(yùn)行結(jié)果：
I,love,JavaScript
我們將使用分隔符來分隔數(shù)組中的元素，代碼如下：

<script type="text/javascript">
  var myarr = new Array(3)
  myarr[0] = "I";
  myarr[1] = "love";
  myarr[2] = "JavaScript";
  document.write(myarr.join("."));
</script>

運(yùn)行結(jié)果：
I.love.JavaScript

顛倒數(shù)組元素順序reverse()

reverse() 方法用于顛倒數(shù)組中元素的順序。

arrayObject.reverse()

注意：該方法會改變原來的數(shù)組，而不會創(chuàng)建新的數(shù)組。

定義數(shù)組myarr并賦值，然后顛倒其元素的順序：

<script type="text/javascript">
  var myarr = new Array(3)
  myarr[0] = "1"
  myarr[1] = "2"
  myarr[2] = "3"
  document.write(myarr + "<br />")
  document.write(myarr.reverse())
</script>

運(yùn)行結(jié)果：
1,2,3
3,2,1

選定元素slice()

slice() 方法可從已有的數(shù)組中返回選定的元素。
語法
arrayObject.slice(start,end)
參數(shù)說明：

533299680001637b05160145.jpg

注意：

1. 可使用負(fù)值從數(shù)組的尾部選取元素。

2.如果 end 未被規(guī)定，那么 slice() 方法會選取從 start 到數(shù)組結(jié)尾的所有元素。

3. String.slice() 與 Array.slice() 相似。

我們將創(chuàng)建一個(gè)新數(shù)組，然后從其中選取的元素，代碼如下：

<script type="text/javascript">
  var myarr = new Array(1,2,3,4,5,6);
  document.write(myarr + "<br>");
  document.write(myarr.slice(2,4) + "<br>");
  document.write(myarr);
</script>

運(yùn)行結(jié)果：
1,2,3,4,5,6
3,4
1,2,3,4,5,6

數(shù)組排序sort()

sort()方法使數(shù)組中的元素按照一定的順序排列。
語法:
arrayObject.sort(方法函數(shù))
參數(shù)說明：

53329a2a000127f705170060.jpg

2.如果指定<方法函數(shù)>，則按<方法函數(shù)>所指定的排序方法排序。

myArray.sort(sortMethod);

注意: 該函數(shù)要比較兩個(gè)值，然后返回一個(gè)用于說明這兩個(gè)值的相對順序的數(shù)字。比較函數(shù)應(yīng)該具有兩個(gè)參數(shù) a 和 b，其返回值如下：

若返回值<=-1，則表示 A 在排序后的序列中出現(xiàn)在 B 之前。
若返回值>-1 && <1，則表示 A 和 B 具有相同的排序順序。
若返回值>=1，則表示 A 在排序后的序列中出現(xiàn)在 B 之后。

1.使用sort()將數(shù)組進(jìn)行排序，代碼如下：

<script type="text/javascript">
  var myarr1 = new Array("Hello","John","love","JavaScript"); 
  var myarr2 = new Array("80","16","50","6","100","1");
  document.write(myarr1.sort()+"<br>");
  document.write(myarr2.sort());
</script>

運(yùn)行結(jié)果：

Hello,JavaScript,John,love
1,100,16,50,6,80

注意:上面的代碼沒有按照數(shù)值的大小對數(shù)字進(jìn)行排序。

2.如要實(shí)現(xiàn)這一點(diǎn)，就必須使用一個(gè)排序函數(shù)，代碼如下：

<script type="text/javascript">
  function sortNum(a,b) {
  return a - b;
 //升序，如降序，把“a - b”該成“b - a”
}
 var myarr = new Array("80","16","50","6","100","1");
  document.write(myarr + "<br>");
  document.write(myarr.sort(sortNum));
</script>

運(yùn)行結(jié)果：
80,16,50,6,100,1
1,6,16,50,80,100