5.1 什么是js
1.什么是js
js是JavaScript的縮寫优炬，是web標(biāo)準(zhǔn)中的行為標(biāo)準(zhǔn)驳遵，負(fù)責(zé)網(wǎng)頁(yè)中變化的部分。
2.在哪寫js代碼津畸。
a.寫在標(biāo)簽的時(shí)間相關(guān)屬性中振定，例如按鈕的onclick屬性
b.寫在script標(biāo)簽中（將js代碼作為script標(biāo)簽的內(nèi)容）
c.寫在js文件中，在html中通過(guò)script標(biāo)簽將文件導(dǎo)入肉拓。(script標(biāo)簽的src屬性就是要導(dǎo)入的js文件的路徑)
3.js能做什么
a.在網(wǎng)頁(yè)指定位置插入標(biāo)簽
b.修改網(wǎng)頁(yè)中標(biāo)簽的內(nèi)容
c.修改標(biāo)簽樣式
4.怎么寫js代碼
javascript是一門編程語(yǔ)言后频，和python一樣是腳本/動(dòng)態(tài)語(yǔ)言。和java沒(méi)聯(lián)系
注意：script標(biāo)簽理論上可以放在任何位置帝簇，但是一般放在head或body中徘郭。
補(bǔ)充：
window.alert（信息）-js代碼靠益，在瀏覽器上彈出一個(gè)對(duì)話框丧肴，對(duì)話框顯示指定信息。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--1.js代碼寫在哪-->
<!--c位置3-->
<script type="text/javascript" src="js/index.js">
</script>
<!--b位置2-->
<script type="text/javascript">
//在這寫js代碼
window.alert('蓮生三十二')
</script>
</head>
<body>
<!--a位置1-->
<button onclick="window.alert('一劍光寒十九州')">不準(zhǔn)點(diǎn)</button>
<hr />
<!--js能做什么-->
<!--a.插入內(nèi)容-->
<script type="text/javascript">
arr = ['海賊王','火影','一拳超人']
// for(i=0;i<3;i++){
// document.write('<h1>我是js代碼寫的標(biāo)題</h1>')
// }
for (i in arr) {
message = '<h1>'+arr[i]+'</h1>'
//在網(wǎng)頁(yè)中添加內(nèi)容
document.write(message)
}
</script>
<!--b修改標(biāo)簽內(nèi)容-->
<p id="p1">我是段落</p>
<p id="p2">我是段落2</p>
<button onclick="document.getElementById('p1').innerHTML='我是jsｋ屎蟆芋浮！'">修改內(nèi)容</button>
<hr />
<!--c修改標(biāo)簽樣式-->
<button onclick="document.getElementById('p2').style='color:red;font-size:30px;'">
修改樣式
</button>
</body>
</html>
5.2 js基本語(yǔ)法
<script type="text/javascript">
1.控制臺(tái)輸出
console.log(輸出的內(nèi)容) - 和print功能一樣
console.log(100)
console.log('abc')
console.log('abc',1233)
2.注釋 - 和c一樣
//單行注釋
/*
*多行注釋
*多行注釋
*/
3.標(biāo)識(shí)符
由字母數(shù)字下劃線和$符組成，數(shù)字不能開頭
a = 10
a20 = 122
a_2 = 111
$22 = 333
12a = 12 as^ = 200 報(bào)錯(cuò)
4.行和縮進(jìn)
從語(yǔ)法來(lái)說(shuō)js代碼沒(méi)有換行縮進(jìn)要求壳快，通過(guò){}來(lái)確定代碼塊纸巷。
5.常見(jiàn)的數(shù)據(jù)類型：數(shù)字、布爾眶痰、字符串瘤旨、數(shù)組、對(duì)象竖伯、函數(shù)（類型名大寫）
a數(shù)字（Number）：包括整數(shù)和小數(shù)存哲；如：100 12.5 -20 -3.14
支持科學(xué)計(jì)數(shù)法，不支持虛數(shù)
console.log(3e2) //300
b布爾（Boolean）：只有兩個(gè)值true和false七婴，這兩個(gè)是關(guān)鍵字祟偷。代表真假
c字符串（String）：js中只有單行字符串，'' ""都可以
console.log('我是單引號(hào)',"我是雙引號(hào)",3e3)
d數(shù)組（Array）：相當(dāng)于python中的列表打厘。
e對(duì)象（Object）：表現(xiàn)時(shí)像字典修肠，用時(shí)像對(duì)象。{}
obj1 = {name:'小花',age:18}
console.log('字典方式取值',obj1['name'])
console.log('對(duì)象方式取值',obj1.name)
f函數(shù)（Function）：相當(dāng)于python中的函數(shù)
//聲明函數(shù)
function eat(food){
console.log('吃'+food)
}
//調(diào)用函數(shù)
eat('米飯')
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
5.3 變量
<script type="text/javascript">
1.變量的聲明
語(yǔ)法1： 變量名=值
變量名：標(biāo)識(shí)符户盯，不能是關(guān)鍵字嵌施；駝峰式命名饲化，第一個(gè)單詞首字母小寫，后面每個(gè)單詞首字母大寫吗伤，見(jiàn)名知意
語(yǔ)法2：var 變量名 = 值 或 var 變量
var：聲明變量關(guān)鍵字
區(qū)別：加var滓侍，變量可以不用賦值，默認(rèn)undefined牲芋；不加var必須賦值撩笆，否則會(huì)報(bào)錯(cuò)
補(bǔ)充：js中兩個(gè)特殊值：undefined（沒(méi)有，空缸浦；常用于自動(dòng)賦值空夕冲，如：打印一個(gè)未聲明的變量時(shí)，會(huì)默認(rèn)空）和null(清空裂逐，需要手動(dòng)賦值)
console.log(name)
name1 = 2
console.log(name1) //2
var age
console.log(age) //undefined,通過(guò)var聲明變量不賦值時(shí)歹鱼，默認(rèn)為undefined
age = 18 //重新給變量賦值
//同時(shí)聲明多個(gè)變量賦同一個(gè)值
a1 = a2 = a3 = 10
console.log(a1,a2,a3) //10 10 10
//同時(shí)聲明多個(gè)變量賦不同值
var a1 = 1, a2 = 2, a3 = 3 // 等價(jià)a1 = 1, a2 = 2, a3 = 3
console.log(a1,a2,a3) //1 2 3
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
5.4 運(yùn)算符
<script type="text/javascript">
1.數(shù)學(xué)運(yùn)算符：+ - * / % ++ --
前5個(gè)和python一樣
++ --都是單目運(yùn)算符:變量++/-- ++/--變量
a.變量++：變量自增1
b.變量--：變量自減1
num = 10
num++ //11
++num //12
num-- //11
--num //10
坑：用一個(gè)變量單獨(dú)使用++/--時(shí)，++/--放前后效果一樣卜高；
如果使用++/--給另一個(gè)變量賦值弥姻，++/--放前面是先自加/自減再賦值，放后面先賦值掺涛，再自加自減
num2 = 10
num = num2++ //num=num2;num2 += 1
console.log(num,num2) // 10 11
num2 = 10
num = ++num2 //num2 +=1;num=num2
console.log(num,num2) // 11 11
2.比較運(yùn)算符：< > == != >= <= ; === !==
比較大小的和python一樣庭敦，結(jié)果是布爾值
a.==判斷值是否相等
b.===完全相等，判斷值和類型是否相等薪缆，相當(dāng)于python中的==秧廉，！==相當(dāng)于python中的不等
console.log(5 == 5) //true
console.log(5 == '5') //true
console.log(5 != 5) //false
console.log(5 != '5') //false
console.log(5 === 5) //true
console.log(5 === '5') //false
console.log(5 !== 5) //false
console.log(5 !== '5') //true
3.邏輯運(yùn)算符：&&（and拣帽，邏輯與） ||（or疼电，邏輯或） ！（not减拭，邏輯非）
運(yùn)算規(guī)則蔽豺，和使用方式和python一樣
console.log('=========')
4.賦值運(yùn)算符：= += -= *= /= %=
和python一模一樣
5.三目運(yùn)算符：？：
條件語(yǔ)句?值1:值2：判斷條件語(yǔ)句值是否為true拧粪，是則表達(dá)式結(jié)果為值1修陡，否則為值2
age = 18
is_man = age>=18?'成年':'未成年'
console.log(is_man)
6.運(yùn)算順序
數(shù)學(xué)>比較>邏輯>賦值 如果有括號(hào)，其優(yōu)先級(jí)最高
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
5.5 分之結(jié)構(gòu)
<script type="text/javascript">
- js中分支有兩種：if和switch
1.if語(yǔ)句
a：if
if (條件語(yǔ)句){
滿足條件會(huì)執(zhí)行的代碼
}
b：if-else
if (條件語(yǔ)句){
代碼段1
}else{
代碼段2
}
c：if-else if-else
if (條件語(yǔ)句){
代碼段1
}else if(條件語(yǔ)句2){
代碼段2
}else{
代碼段3
}
執(zhí)行過(guò)程和python一模一樣*/
num = 10
if(num%2){
console.log('奇數(shù)')
}else{
console.log('偶數(shù)')
}
2.switch語(yǔ)句
a：結(jié)構(gòu)：
switch（表達(dá)式）{
case 值1：
代碼段1
case 值2：
代碼段2
default：
代碼段3
}
b：執(zhí)行過(guò)程
使用表達(dá)式值按順序與case后的值進(jìn)行比較既们，看是否相等濒析，找到第一個(gè)和表達(dá)式相等的case，將此case作為入口啥纸，依次執(zhí)行后面所有的代碼号杏，直到執(zhí)行完成，或者遇到break為止。如果每個(gè)case都和表達(dá)式不等盾致，就執(zhí)行default后的代碼主经。
注意：case后面必須是一個(gè)有結(jié)果的表達(dá)式
a=10
switch(a){
case 5:
console.log('表達(dá)式1')
case 6:
console.log('表達(dá)式2')
case 10:
console.log('表達(dá)式3')
case 11:
console.log('表達(dá)式4')
default:
console.log('表達(dá)式5')
}
//練習(xí)：用一個(gè)變量保存10分制成績(jī)，根據(jù)成績(jī)打印情況：0-5不及格庭惜，6及格罩驻，7-8良好，9-10優(yōu)秀
score = 10
switch (score){
case 0:
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
default:
console.log('優(yōu)秀')
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
5.6 循環(huán)結(jié)構(gòu)
<script type="text/javascript">
js循環(huán)結(jié)構(gòu)：for护赊、while
1.for循環(huán)
a.for-in
for（變量 in 序列）{
循環(huán)體
}
執(zhí)行過(guò)程和python一樣惠遏，但是變量取到的不是元素。而是下標(biāo)/key(屬性名)
序列：字符串骏啰，數(shù)組节吮，對(duì)象
for(x in '543210'){
console.log(x,'543210'[x])
}
arr1 = [1, 'aaa', true, 12.8]
for(x in arr1){
console.log(x,arr1[x])
}
person1 = {name:'小王八',age:10}
for(x in person1){
console.log(x,typeof(x))
console.log(person1[x])
}
b.c的for循環(huán)
結(jié)構(gòu)：
for(表達(dá)式1；表達(dá)式2判耕；表達(dá)式3){
循環(huán)體
}
執(zhí)行過(guò)程：先執(zhí)行表達(dá)式1透绩，然后判段表達(dá)式2的值是否為true，如果為true執(zhí)行循環(huán)體壁熄，執(zhí)行完循環(huán)體后執(zhí)行表達(dá)式3帚豪，再判斷
表達(dá)式2的值是否為true，如果為true執(zhí)行循環(huán)體草丧，執(zhí)行完循環(huán)體后執(zhí)行表達(dá)式3狸臣。。方仿。
相當(dāng)于：
表達(dá)式1
while(表達(dá)式2){
循環(huán)體
表達(dá)式3
}
console.log('==========')
for(i=1;i<=100;i++){
i += i
console.log(i)
}
console.log(i)
2.while循環(huán)
a.python的while循環(huán)
while(條件語(yǔ)句){
循環(huán)體
}
執(zhí)行過(guò)程和python一樣
b.do-while循環(huán)
do{
循環(huán)體
}while(條件語(yǔ)句)
區(qū)別：do-while的循環(huán)體至少會(huì)執(zhí)行一次*/
//1+2+3+固棚。。仙蚜。+100（do-while）
i=sum=0
do{
sum+=i
i++
}while(i<101)
console.log(sum)
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
5.7 函數(shù)
<script type="text/javascript">
- 函數(shù)
1.函數(shù)聲明
function 函數(shù)名(參數(shù)列表){
函數(shù)體
}
js中函數(shù)除了聲明關(guān)鍵字不一樣，其它的都一樣
參數(shù)可設(shè)置默認(rèn)值厂汗，也可以通過(guò)關(guān)鍵字參數(shù)調(diào)用
function my_sum(num1,num2=2){
return num1+num2
}
2.函數(shù)調(diào)用,js中函數(shù)都有返回值委粉，默認(rèn)是undefined
console.log(my_sum(1,2))
console.log(my_sum(1))
console.log(my_sum('￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥'))
function f1(){
console.log('我沒(méi)有return值')
}
console.log(f1(), typeof(f1()))
console.log(my_sum('￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥'))
3.匿名函數(shù)（函數(shù)的字面量）
函數(shù)名=function（參數(shù)列表）{函數(shù)體}
var quan_ju_1 = 1008 //此處可以在函數(shù)中修改，也可在外修改
quan_ju = 1004
f2 = function(a,b){
ju_bu = 10
var ju_bu_b = 100 // 局部變量
console.log(a,b)
console.log(quan_ju)
return a*b
}
console.log(f2(3,4))
console.log('+++++++++++++++++++++++')
console.log(ju_bu)
4.變量作用域
a.全局變量：只要聲明在函數(shù)外面的變量就是全局變量娶桦；在函數(shù)中以 變量名=值 的形式聲明的變量也是全局的贾节，前提是函數(shù)被調(diào)用過(guò)
b.局部變量：以var關(guān)鍵字聲明在函數(shù)中的變量，才是局部變量
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
5.8 字符串
<script type="text/javascript">
1.字符串字面量
a.使用雙引號(hào)或者單引號(hào)括起來(lái)的字符集
b.除了普通字符外還可以是轉(zhuǎn)義字符\n \t \ ' "
c.\u四位16進(jìn)制值對(duì)應(yīng)的Unicode編碼衷畦，如：\u4e00 (一)
str1 = 'abc\n314143'
console.log(str1) // 換行
2.獲取字符
字符串[下標(biāo)]：獲取單個(gè)字符
下標(biāo)：范圍是0~長(zhǎng)度減1栗涂；下標(biāo)越界不會(huì)報(bào)錯(cuò)，取到的值是undefined
js中沒(méi)有切片方法
str2 = 'hello js'
console.log(str2[1]) // e
3.相關(guān)運(yùn)算+
支持字符串和其他任何數(shù)據(jù)相加祈争，是將其他數(shù)據(jù)全部轉(zhuǎn)換成字符串斤程，然后再拼接。
console.log('123'*2) // NaN;js中一個(gè)特殊的值菩混，類似undefined忿墅、null扁藕，用來(lái)表示一個(gè)不存在的數(shù)值。
str3 = 'a'+[1, 'e', true]
console.log(str3) // a1,e,true
//補(bǔ)充：js中數(shù)據(jù)類型轉(zhuǎn)換 類型名(需要轉(zhuǎn)換的數(shù)據(jù))
num_str = String(12314)
str_num = Number('232431.12')
str_num = Number('wqw232431.12') // NaN
4.字符串長(zhǎng)度
console.log('hello world'.length) // 11
5.字符串相關(guān)方法(見(jiàn)菜鳥教程)
console.log('abc'.charAt(2)) // c
console.log(String.fromCharCode(97)) // a
console.log('abcd12abc23hhh123'.match(/\d+/)) //數(shù)字出現(xiàn)1次或多次
console.log('abcd12abc23hhh123'.replace(/\d+/g,'*')) //abcd*abc*hhh*
console.log()
console.log()
console.log()
console.log()
console.log()
6.js中數(shù)組只需要關(guān)注：1.怎么獲取元素 2.數(shù)組的方法 3.元素可以是所有類型
arr = []
console.log(arr)
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
