一、認識js

1，什么是js

js是javascript的縮寫，是一門專門用來控制網(wǎng)頁內(nèi)容的行為的腳本語言
js就是web標準中行為標準

2，在哪寫js代碼

a，寫到標簽的行為相關(guān)的屬性中，比如按鈕的onclicked

<button id="p1" onclick="window.alert('你好，python')"</button>
<input type="text" onfocus="這也可以寫代碼" />

b，寫到script標簽中（script標簽可以放在html中任意位置，但是一般情況還是放在head或者body中）

c，寫在外部js文件中,然后通過script標簽來導(dǎo)入，然后通過設(shè)置src屬性為js文件的路徑

<script type="text/javascript" src="js/01-js基礎(chǔ)語法.js">

3，js能做些什么事情

a,js可以在網(wǎng)頁中插入html代碼

<script type="text/javascript">
    document.write("<p>中秋節(jié)快樂</p>")
</script>

b,可以修改標簽內(nèi)容

<!--修改標簽內(nèi)容-->
<script type="text/javascript">
    document.getElementById("p1").innerHTML="教師節(jié)快樂"
</script>

c，可以修改標簽樣式

二、js基礎(chǔ)語法

1，注釋

//：單行注釋
/* 多行注釋*/

2.標識符

要求是由數(shù)字、字母、下劃線和$字符組成，數(shù)字不能開頭

var abc

3，js中大小寫敏感

4,基本數(shù)據(jù)類型

a，常用類型

Number（數(shù)字-包含所有數(shù)字）
Boolean（布爾類型）
String（字符串）
Array（數(shù)組）
Object（對象）

注意：js中沒有元祖和集合

b，常用的特殊的值：NaN(表示不存在的數(shù)字)，null（空，一般用來清空變量內(nèi)容），undefined（變量沒有賦值的時候，默認是undefined）

console.log(10*"abc")  //相當于print函數(shù)

5，字面量

• Number字面量；所有的數(shù)字（支持科學(xué)計數(shù)法，但不支持復(fù)數(shù)）
• Boolean字面量：只有true和false
• String字面量：由單引號或雙引號引起來的字符集，支持轉(zhuǎn)義字符（和python一樣）
• Array字面量：js中數(shù)組就相當于列表
  console.log(['adxa',123,'dvdvc'])
• Object對象字面量：相當于python中字典+對象
  注意：key相當于屬性，value相當于屬性的值
  var dict= {a:100,name:'cecec'}
  console.log(dict)

typeof：查看數(shù)據(jù)類型

console.log(typeof(100),typeof(dict))

6,js中的語句“

a，一條語句結(jié)束后可以寫分號，也可以不寫。如果一行寫寫多條語句就必須寫分號
b，js中沒有縮進語法的要求，需要使用代碼的時候使用{}

三、js中變量的聲明

1，js中變量的聲明

語法：var 變量名 或者 var 變量名=初值
a，var：是js中聲明變量的關(guān)鍵字
b，變量名：標識符，不能是js中關(guān)鍵字；規(guī)范：駝峰式命名（第一個單詞首字母小寫，后邊每一個單詞首字母大寫），見名知義
c，初值：聲明的時候可以賦初值，也可以不賦

var age=21
console.log(age)

var studentCount=100

//a，同時聲明多個變量
var age;var name
var age1,name1,studyId1
var age2=10,name2,studyId2
var Number=10
console.log(Number)

//b,一個變量可以存儲多種類型的值
var name = "張三"  //聲明變量（在內(nèi)存中開辟空間存儲數(shù)據(jù)）
name=100   //修改變量的值
console.log(name)

四、js中的運算符

js中的運算符包含：數(shù)學(xué)運算符、比較運算符、邏輯運算符、賦值運算符、三目運算符、（位運算）

1，數(shù)學(xué)運算符:+、-、、/、%、*（js7才有）、++、--

其中：+、-、、/、%、*和python中的功能一模一樣，js中沒有整除對應(yīng)的操作
注意：js中沒有整除對應(yīng)的操作，但是多了++和--

a，++（自加）：自加1
語法:變量++，++變量------>讓變量的值加1

var num=10
num++
console.log(num)
++num
console.log(num)

//b，--（自減1操作）
//語法:變量--，--變量------>讓變量的值減1
var num=10
num--
console.log(num)
--num
console.log(num)

//c,賦值時，++寫在變量后面，是先賦值，然后在讓變量自加；寫變量前面，就先自加，在賦值
var a1=10,a2=10,b,c
b=a1++
c=++a2
console.log(a1,a2,b,c)

2，比較運算符：>,<,==,!=,>=,<=,===,!==,>==,<==

結(jié)果都是布爾值
相等==，只判斷值和類型是否相等
完全相等===，判斷值和類型是否相等

console.log(5==5)     //true
console.log('5'=='5') //true
console.log('5'==5)    //true

console.log(5===5)     //true
console.log('5'==='5') //false
console.log(5===5)     //true

3，邏輯運算符：&&（與），||(或)，?。ǚ牵?/h3>

js中邏輯運算符除了形式，其他的和python相同

4，賦值運算符：=，+=，-=，*=，/=，%=等，和python一樣

5，三目運算符

//語法： 表達式1？值1：值2--->判斷表達式1的值是否為真，為真整個運算符結(jié)果為“值1”，否則為“值2”

var value=10>20?10:20
console.log(value)

//練習(xí)，求三個數(shù)的最大值
var a=10,b=20,c=15
var num
num=a>b?a:b
num=num>c?num:c
console.log(num)

6,運算順序：和python基本一致（數(shù)學(xué)>比較>邏輯>賦值），也可以通過加括號來改變運算順序

五、分支結(jié)構(gòu)

if語句，switch

1，if語句

if結(jié)構(gòu)
if （條件語句）
{
代碼段
}
執(zhí)行過程：先判斷條件語句是否為true，為true就執(zhí)行代碼段

if-else結(jié)構(gòu)
if （條件語句）{
代碼段
}
else{
代碼段2
}

if-else if-else：（這的else if相當于elif）
if （條件語句1）{
代碼段1
}
else if （條件語句2）{
代碼段2
}
else{
代碼段3
}

判斷一個數(shù)是否是偶數(shù)，是就打印“偶數(shù)”

var num=14
if (num%2==0){
    console.log("偶數(shù)")
}

2，switch

a，結(jié)構(gòu)

switch（表達式）{
    case 值1：{
        代碼段1
        break
    }
    case 值2：{
        代碼段2
        break
    }
    ......
    default：{
        
    } 
}

b執(zhí)行過程：先計算表達式的值，然后再用這個值去和后邊case關(guān)鍵字后面的值一一比對，看是否相等。
找到第一個和表達式的值相等然后將這個case作為入口，依次執(zhí)行后面所有的代碼
直到遇到break或者switch結(jié)束。如果沒有找到和表達式的值相等的case就執(zhí)行default后面的代碼
注意：default可有可無，case可以有若干個

var num1=100
switch(num1){
    case 100:
        console.log('A')
    case 10:
        console.log('B')
    case 'abc':
        console.log('C')
    default:
        console.log('D')
}

練習(xí)根據(jù)數(shù)字不同，打印不同結(jié)果0-星期天，1-星期一

var week=1
switch (week){
    case 0:
        console.log('星期天')
        break
    case 1:
        console.log('星期1')
        break
    case 2:
        console.log('星期2')
        break
    case 3:
        console.log('星期3')
        break
    case 4:
        console.log('星期4')
        break
    case 5:
        console.log('星期5')
        break
        
    case 6:
        console.log('星期6')
        break
}

練習(xí)2，分等級；1-5，不及格；6，及格；7-8，良好；9-10，優(yōu)秀

var score=6
switch (score){
    case 1:
    case 2:
    case 3:
    case 4:
    case 5:
        console.log('不及格')
        break
    case 6:
        console.log('及格')
        break
    case 7:
    case 8:
        console.log('良好')
        break
    case 9:
    case 10:
        console.log('優(yōu)秀')
        break
    
    default:
        console.log('成績不對') 
}

六、循環(huán)結(jié)構(gòu)

js中循環(huán)結(jié)構(gòu)分為：for循環(huán)和while循環(huán)
1，for-in循環(huán)：（和Python的for循環(huán)一樣）

 for （var 變量 in 序列）
 {
    循環(huán)體
 }

執(zhí)行過程：依次從序列中取元素對應(yīng)的索引，取完為止，沒取一個執(zhí)行一次循環(huán)體

遍歷字符串，取的是字符對應(yīng)的下標
遍歷數(shù)組，取的是元素對應(yīng)的下標
遍歷對象，取的是屬性名

for (var i in 'abcd')
{
    console.log('abcd'[i])
}

2，for循環(huán)：（和c語言的for循環(huán)一樣）

 for（表達式1;表達式2;表達式3）{
    循環(huán)體
 }

執(zhí)行過程：先執(zhí)行表達式1，然后在判斷表達式2的結(jié)果是否為true，如果為true，就執(zhí)行循環(huán)體。執(zhí)行完循環(huán)體在執(zhí)行表達式3.
然后在判斷表達式2的結(jié)果是否為true，如果為true，就執(zhí)行循環(huán)體。執(zhí)行完循環(huán)體在執(zhí)行表達式3.
依次循環(huán)，直到表達式2的結(jié)果為false為止

計算1+2+3.。。+100

var num=0

for (var i=1;i<=100;i++)
{
    num+=i
}
console.log(num)

3,while循環(huán)：（和python一樣）

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

var sum=0
var i=1
while(i<=100)
{
    sum+=i
    i+=1
}
console.log(sum)

4,do-while

 do{
    循環(huán)體
 }while（條件語句）

執(zhí)行過程：先執(zhí)行一次循環(huán)體，然后在判斷條件語句是否為true，為true又執(zhí)行循環(huán)體，依次類推，直到條件語句為false，循環(huán)就結(jié)束

sum=0
i=1
do{
    sum+=i
    i+=1
}
while(i<=100)
console.log(sum)

七、js函數(shù)

1,函數(shù)的聲明

 function 函數(shù)名（參數(shù)列表）{
    函數(shù)體
 }

說明：
a，function：是js中聲明函數(shù)的關(guān)鍵字
b，函數(shù)名：標識符，不能是關(guān)鍵字；見名知義，駝峰式命名
c，參數(shù)列表：參數(shù)名1，參數(shù)名2.。。。；形參：將數(shù)據(jù)從函數(shù)外面?zhèn)鞯胶瘮?shù)里面
d，函數(shù)體：實現(xiàn)函數(shù)的功能
注意：函數(shù)體只有在函數(shù)調(diào)用的時候才執(zhí)行

function sum(num1,num2){
   console.log(num2,10000)
   console.log(num1+num2)
}

function sum2(num1,num2){
   console.log(num2)
   console.log(num1+num2)
}

2,函數(shù)的調(diào)用：和python一樣

函數(shù)的調(diào)用的時候要保證每個參數(shù)都有值
支持位置參數(shù)、關(guān)鍵字參數(shù)、參數(shù)設(shè)置默認值（js6）
js中不支持不定長參數(shù)

sum(num2=20,num1=10)

3，函數(shù)的返回值

js中函數(shù)如果沒有遇到return，函數(shù)的返回值是undefined
注意：js中不能同時返回多個值（有元祖語法的語言才支持返回多個值）

function func1(){
    console.log("func1")
    return 100,'abc'
}
console.log(func1())

4，js中，函數(shù)也可以作為變量

5，另外一種聲明函數(shù)的方式

 var 變量=function（參數(shù)列表）{
    函數(shù)體 
 }

var func2=function(){
    console.log('這是函數(shù)類型的數(shù)據(jù)')
}

func2()

八、數(shù)據(jù)類型

new 類型名（值）----》可以將其他類型的數(shù)據(jù)轉(zhuǎn)換成相應(yīng)類型的值

1，數(shù)字類型（Number）：所有數(shù)字對應(yīng)的類型

不能轉(zhuǎn)換的結(jié)果是NaN

var num1=100
var num2=new Number('12')
console.log(num2+100,num1)

2,布爾：true和false

數(shù)字-->布爾：只有0，和NaN是false，其他是true
字符串--->布爾：空串是false，其他是true
總結(jié)：所有為0為空的轉(zhuǎn)換成布爾是false，NaN，null,undefined都是false；其他都是true

var bool=new Boolean(NaN)
console.log(bool)

3，字符串（String）

a，獲取單個字符：通過字符串[下標]
b，注意：

• js中不支持切片
• js中的下標只支持0-長度減一，不支持負值

var str1='abcde'
console.log(str1[1])

c，長度

console.log(str1.length)

d，運算符：比較和+
比較和python一樣，用Unicode碼
+：如果其他數(shù)據(jù)類型和字符串相加，都是先將其他數(shù)據(jù)類型轉(zhuǎn)換成字符串，然后做字符串拼接操作

console.log('abc'+'123')
console.log(123+'abc')

e，其他的方法

4，數(shù)組（相當于Python中的列表）

a，有序，可變的，元素的類型可以是任意類型的數(shù)據(jù)

var array=[1,'as',true,[1,2,3]]

查

console.log(array[1])

增

array.push('aa')
console.log(array)

刪

array.pop()    //刪除最后一個元素
console.log(array)
array.shift()  //刪除第一個元素
console.log(array)

//splice(刪除的開始下標，刪除的元素的個數(shù))
var array=[1,'as',true,[1,2,3]]
array.splice(1,1)
console.log(array)


//splice(被刪除的下標/添加的開始下標，添加元素的個數(shù)，添加元素列表)
var array=[1,'as',true,[1,2,3]]
array.splice(4,2,'aa','bb')
console.log(array)

d，改

var array=[1,'as',true,[1,2,3]]
array[0]=100
console.log(array)