JavaScript入門（上）基礎(chǔ)語法、數(shù)組靠粪、流程控制語句蜡吧、函數(shù)

認(rèn)識JS

JavaScript能做什么毫蚓？

增強(qiáng)頁面動(dòng)態(tài)效果(如:下拉菜單、圖片輪播昔善、信息滾動(dòng)等)
實(shí)現(xiàn)頁面與用戶之間的實(shí)時(shí)元潘、動(dòng)態(tài)交互(如:用戶注冊、登陸驗(yàn)證等)

JS進(jìn)階篇學(xué)習(xí)什么君仆？

在JavaScript入門篇中翩概，我們學(xué)習(xí)了如何插入JS、輸出內(nèi)容及簡單的DOM操作返咱，JavaScript進(jìn)階篇讓您進(jìn)一步的了解JS的變量钥庇、數(shù)組、函數(shù)咖摹、語法评姨、對象、事件萤晴、DOM操作吐句，制作簡單的網(wǎng)頁動(dòng)態(tài)效果。

基礎(chǔ)語法

變量

變量命名要遵循一些規(guī)則:

必須以字母店读、下劃線或美元符號開頭嗦枢，后面可以跟字母、下劃線两入、美元符號和數(shù)字净宵。如下:

正確:

    mysum            
    _mychar         
    $numa1

錯(cuò)誤:

  6num  //開頭不能用數(shù)字
  %sum //開頭不能用除(_ $)外特殊符號,如(%  + /等)
  sum+num //開頭中間不能使用除(_ $)外特殊符號，如(%  + /等)

變量名區(qū)分大小寫裹纳，如:A與a是兩個(gè)不同變量。
不允許使用JavaScript關(guān)鍵字和保留字做變量名紧武。

image

變量聲明

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

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

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

變量賦值

var mynum = 5 ; //聲明變量mynum并賦值剃氧。

也可以這樣寫:

var mynum; //聲明變量mynum
mynum = 5 ; //給變量mynum賦值

可以把任何東西存儲在變量里，如數(shù)值阻星、字符串朋鞍、布爾值等：

var num1 = 123;       // 123是數(shù)值
var num2 = "一二三";    //"一二三"是字符串
var num3=true;    //布爾值true（真），false(假)

其中妥箕，num1變量存儲的內(nèi)容是數(shù)值滥酥；num2變量存儲的內(nèi)容是字符串，字符串需要用一對引號""括起來畦幢，num3變量存儲的內(nèi)容是布爾值(true坎吻、false)。

表達(dá)式

表達(dá)式是指具有一定的值宇葱、用操作符把常數(shù)和變量連接起來的代數(shù)式瘦真。一個(gè)表達(dá)式可以包含常數(shù)或變量刊头。

image

+號操作符

操作符是用于在JavaScript中指定一定動(dòng)作的符號。

操作符

看下面這段JavaScript代碼诸尽。

sum = numa + numb;

其中的"="和"+"都是操作符原杂。

JavaScript中還有很多這樣的操作符，例如您机，算術(shù)操作符(+穿肄、-、*际看、/等)咸产，比較操作符(<、>仿村、>=锐朴、<=等)，邏輯操作符(&&蔼囊、||焚志、！)畏鼓。

注意: “=” 操作符是賦值酱酬，不是等于。

"+"操作符

算術(shù)運(yùn)算符主要用來完成類似加減乘除的工作云矫，在JavaScript中膳沽，“+”不只代表加法，還可以連接兩個(gè)字符串让禀，例如：

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

++和- -

算術(shù)操作符除了(+挑社、-、*巡揍、/)外痛阻，還有兩個(gè)非常常用的操作符，自加一“++”腮敌；自減一“--”阱当。首先來看一個(gè)例子：

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

比較操作符

<弊添、 >、 <=捌木、 >=油坝、 ==、 !=、

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)

邏輯與操作符

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

邏輯或操作符

"||"邏輯或操作符，相當(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

邏輯非操作符

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

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)行,多層括號由里向外拥峦。

var numa=3;
var numb=6;
jq= numa + 30 >10 && numb * 3<2;  //結(jié)果為false

數(shù)組

數(shù)組是一個(gè)值的集合，每個(gè)值都有一個(gè)索引號卖子，從0開始略号，每個(gè)索引都有一個(gè)相應(yīng)的值，根據(jù)需要添加更多數(shù)值洋闽。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>什么是數(shù)組</title>
<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>
</head>
<body>
 </html>

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

var myarray=new Array();

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

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

注意：

創(chuàng)建的新數(shù)組是空數(shù)組刊懈，沒有值这弧，如輸出，則顯示undefined虚汛。
雖然創(chuàng)建數(shù)組時(shí)匾浪，指定了長度，但實(shí)際上數(shù)組都是變長的卷哩，也就是說即使指定了長度為8户矢，仍然可以將元素存儲在規(guī)定長度以外。

數(shù)組賦值

數(shù)組創(chuàng)建好殉疼，接下來我們?yōu)閿?shù)組賦值。我們把數(shù)組看似旅游團(tuán)的大巴車捌年，大巴車?yán)镉泻芏辔恢闷澳龋總€(gè)位置都有一個(gè)號碼，顧客要坐在哪個(gè)位置呢礼预？

第一步：組個(gè)大巴車
第二步：按票對號入座
        大巴車的1號座位是張三
        大巴車的2號座位是李四

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

//第一步：創(chuàng)建數(shù)組
var myarr=new Array(); 

//第二步：給數(shù)組賦值
myarr[1]=" 張三";
myarr[2]=" 李四";

下面創(chuàng)建一個(gè)數(shù)組眠砾，用于存儲5個(gè)人的數(shù)學(xué)成績兔毙。

var myarray=new Array(); //創(chuàng)建一個(gè)新的空數(shù)組
myarray[0]=66; //存儲第1個(gè)人的成績
myarray[1]=80; //存儲第2個(gè)人的成績
myarray[2]=90; //存儲第3個(gè)人的成績
myarray[3]=77; //存儲第4個(gè)人的成績
myarray[4]=59; //存儲第5個(gè)人的成績

注意：數(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è)新元素

上一節(jié)我們使用myarray變量存儲了5個(gè)人的成績谷丸，現(xiàn)在多出一個(gè)人的成績堡掏，如何存儲呢？

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

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

使用數(shù)組元素

要得到一個(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碍扔。

var arr=[55,32,5,90,60,98,76,54];//包含8個(gè)數(shù)值的數(shù)組arr 
document.write(arr.length); //顯示數(shù)組長度8
document.write(arr[7]); //顯示第8個(gè)元素的值54

同時(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。

二維數(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
   }
 }

二維數(shù)組的定義方法二

var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]]

賦值

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

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

流程控制語句

if語句

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

if...else語句

<script type="text/javascript">
  var mycarrer = "HTML"; //mycarrer變量存儲技能
  if (mycarrer == "HTML")
    { document.write("你面試成功旨椒，歡迎加入公司晓褪。");  }
  else  //否則，技能不是HTML
    { document.write("你面試不成功综慎，不能加入公司涣仿。");}
</script>

if..else嵌套語句

<script type="text/JavaScript">
    var myage =99;//趙紅的年齡為99
    if(myage<=44){
        document.write("青年");
        
    } else if(myage<=59) {
        document.write("中年人");
        
    } else if(myage<=89) {
        document.write("老年人");
        
    } else {
        document.write("長壽老年人");
        
    }
</script>

Switch語句

Switch必須賦初始值，值與每個(gè)case值匹配寥粹。滿足執(zhí)行該 case 后的所有語句变过，并用break語句來阻止運(yùn)行下一個(gè)case。如所有case值都不匹配涝涤，執(zhí)行default后的語句媚狰。
在case所執(zhí)行的語句后添加上一個(gè)break語句。否則就直接繼續(xù)執(zhí)行下面的case中的語句

var myWeek = 3;
switch(myWeek){
    case 1:
    case 2:{
        document.write("學(xué)習(xí)理念知識");
    }

    break;
    case 3:
    case 4:{
        document.write("到企業(yè)實(shí)踐");
    }

    break;
    case 5:{
        document.write("總結(jié)經(jīng)驗(yàn)");
    }

    break;
    case 6:
    case 7:{
        document.write("周六阔拳、日休息和娛樂");
    }
    break;
    default:
    break;
}

for循環(huán)

var num = 1;
for (num = 1; num <= 6; num++) {
    document.write("取出第"+num+"個(gè)球<br>");
    
}

while循環(huán)

var num = 0;
while (num < 6){
    document.write("取出第"+num+"個(gè)球");
    num++;
}

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

var mynum = 6;
do{
    document.write("數(shù)字:"+mynum+"<br/>");
    mynum--;
    
} while(mynum > 0)

退出循環(huán)break

在while崭孤、for、do...while糊肠、while循環(huán)中使用break語句退出當(dāng)前循環(huán)辨宠，直接執(zhí)行后面的代碼:

var mynum =new Array(70,80,66,90,50,100,89);//定義數(shù)組mynum并賦值
var i=0;
while(i<mynum.length)
{
  if(mynum[i]<60)
   {
    document.write("成績"+mynum[i]+"不及格，不用循環(huán)了"+"<br>");
    break;
   }
  document.write("成績:"+mynum[i]+"及格货裹，繼續(xù)循環(huán)"+"<br>");
  i++;
  
}

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

continue的作用是僅僅跳過本次循環(huán)嗤形，而整個(gè)循環(huán)體繼續(xù)執(zhí)行:

 var mynum =new Array(70,80,66,90,50,100,89);//定義數(shù)組mynum并賦值
 var i;
 for(i=0;i<mynum.length;i++)
 {
    if(mynum[i]<60)
    {
    document.write("成績不及格，不輸出弧圆！"+"<br>");
    continue;
    }
    document.write("成績:"+mynum[i]+"及格赋兵，輸出!"+"<br>");
}

函數(shù)

函數(shù)的作用，可以寫一次代碼搔预，然后反復(fù)地重用這個(gè)代碼霹期。

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

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

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

函數(shù)定義好后，是不能自動(dòng)執(zhí)行的拯田，需要調(diào)用它,直接在需要的位置寫函數(shù)名历造。

第一種情況:在<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ù)

上節(jié)中add2()函數(shù)不能實(shí)現(xiàn)任意指定兩數(shù)相加。其實(shí)张弛，定義函數(shù)還可以如下格式：

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

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

按照這個(gè)格式，函數(shù)實(shí)現(xiàn)任意兩個(gè)數(shù)的和應(yīng)該寫成：

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

x和y則是函數(shù)的兩個(gè)參數(shù)刻剥，調(diào)用函數(shù)的時(shí)候遮咖，我們可通過這兩個(gè)參數(shù)把兩個(gè)實(shí)際的加數(shù)傳遞給函數(shù)了。

有返回值的函數(shù)

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

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

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

最后編輯于：2018.09.06 20:27:36

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末漓藕，一起剝皮案震驚了整個(gè)濱河市陶珠，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌享钞，老刑警劉巖揍诽，帶你破解...
沈念sama閱讀 206,723評論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異栗竖，居然都是意外死亡暑脆，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,485評論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門狐肢，熙熙樓的掌柜王于貴愁眉苦臉地迎上來添吗，“玉大人，你說我怎么就攤上這事份名〉” “怎么了？”我有些...
開封第一講書人閱讀 152,998評論 0贊 344
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵同窘，是天一觀的道長玄帕。經(jīng)常有香客問我，道長想邦，這世上最難降的妖魔是什么裤纹？我笑而不...
開封第一講書人閱讀 55,323評論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮丧没，結(jié)果婚禮上鹰椒，老公的妹妹穿的比我還像新娘。我一直安慰自己呕童，他們只是感情好漆际，可當(dāng)我...
茶點(diǎn)故事閱讀 64,355評論 5贊 374
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著夺饲，像睡著了一般奸汇。火紅的嫁衣襯著肌膚如雪施符。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 49,079評論 1贊 285
城市分裂傳說
那天擂找，我揣著相機(jī)與錄音戳吝，去河邊找鬼。笑死贯涎，一個(gè)胖子當(dāng)著我的面吹牛听哭，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播塘雳，決...
沈念sama閱讀 38,389評論 3贊 400
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼陆盘，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了败明？” 一聲冷哼從身側(cè)響起隘马，我...
開封第一講書人閱讀 37,019評論 0贊 259
萬榮殺人案實(shí)錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎肩刃，沒想到半個(gè)月后祟霍，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 43,519評論 1贊 300
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡盈包，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 35,971評論 2贊 325
?白月光啟示錄
正文我和宋清朗相戀三年沸呐，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片呢燥。...
茶點(diǎn)故事閱讀 38,100評論 1贊 333
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡崭添，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出叛氨，到底是詐尸還是另有隱情呼渣，我是刑警寧澤，帶...
沈念sama閱讀 33,738評論 4贊 324
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布寞埠，位于F島的核電站屁置，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏仁连。R本人自食惡果不足惜蓝角，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,293評論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望饭冬。院中可真熱鬧使鹅，春花似錦、人聲如沸昌抠。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,289評論 0贊 19
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽炊苫。三九已至裁厅，卻和暖如春冰沙，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背姐直。一陣腳步聲響...
開封第一講書人閱讀 31,517評論 1贊 262
情欲美人皮
我被黑心中介騙來泰國打工倦淀，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人声畏。一個(gè)月前我還...
沈念sama閱讀 45,547評論 2贊 354
代替公主和親
正文我出身青樓，卻偏偏與公主長得像姻成，于是被迫代替她去往敵國和親插龄。傳聞我的和親對象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 42,834評論 2贊 345

JavaScript入門（上）基礎(chǔ)語法、數(shù)組淮韭、流程控制語句垢粮、函數(shù)