1.認(rèn)識(shí)js
1.什么是js
js是javascript的縮寫浸赫，是一門專門用來處理網(wǎng)頁中的行為的腳本語言排霉，也是web標(biāo)準(zhǔn)中的行為標(biāo)準(zhǔn)
javascript和java沒有關(guān)系
2.在什么地方寫js代碼
（window.alert()）--網(wǎng)頁上面彈出一個(gè)對(duì)話框
內(nèi)聯(lián)的：寫在標(biāo)簽事件相關(guān)的屬性中顿锰，例如onclick屬性寓免，屬性值是js代碼
內(nèi)部的js:寫在script標(biāo)簽的內(nèi)容中,script標(biāo)簽理論上是可以放在整個(gè)html文件的任意位置叠荠，
但是一般放在head或body中
外部的js:寫在外部的一個(gè)js文件中（后綴是.js的文件）中胸梆，然后再通過script標(biāo)簽設(shè)置src設(shè)置的值為js文件地址來導(dǎo)入
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- 內(nèi)部js -->
<script type="text/javascript">
window.alert('script標(biāo)簽中的js')
</script>
<script type="text/javascript" scr="js/index.js">
</script>
</head>
<body>
<!-- 內(nèi)聯(lián)js -->
<button onclick="window.alert">點(diǎn)一下</button>
</body>
</html>
3.js能做什么事情
a.js可以去修改標(biāo)簽中的內(nèi)容
b.修改標(biāo)簽中的樣式
c.插入html代碼
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<!-- 插入html代碼 -->
<script type="text/javascript">
document.write('<p>插入段落</p>')
</script>
<p id="p1">python基礎(chǔ)</p>
<!-- 修改標(biāo)簽中內(nèi)容 -->
<button onclick="document.getElementById('p1').innerHTML =' js基礎(chǔ)'">修改</button>
<!-- 修改標(biāo)簽的樣式 -->
<button onclick="document.getElementById('p1').style.color = 'red'">修改樣式</button>
</body>
</html>
2.js基礎(chǔ)語法
<script type="text/javascript">
//1.注釋(和c注釋一樣）)
//單行注釋
/*
多行注釋
多行注釋
多行注釋
2.標(biāo)識(shí)符
標(biāo)識(shí)符就是用來命名的是由字母敦捧，數(shù)字，下劃線和
console.log()-->在控制臺(tái)打印括號(hào)中的內(nèi)容
console.log(abc)
3.常用數(shù)據(jù)類型
數(shù)字類型(Number),布爾(Boolean),字符串(String),數(shù)組(Array),對(duì)象(Object),函數(shù)(functipn)等
數(shù)字類型(Number):包含所有的數(shù)字(整數(shù)和小數(shù))支持科學(xué)奇數(shù)法,不支持虛數(shù)
*/
100
12.3
-100
-23.3
console.log(2e2)
//布爾(Boolean):true和false
true
false
//字符串(String):用雙引號(hào)或者單引號(hào)括起來的
'abc'
"abc"
//數(shù)組(Array):相當(dāng)于Python中列表
[12,22,34,'abc',[1,2]]
//對(duì)象(Object):python中對(duì)象和字典的結(jié)合
var p1= {
name:'王秋容',
age:20,
sex:'女'
}
//函數(shù)(function):相當(dāng)于Python中的函數(shù)
function function_name(){
console.log('函數(shù)體')
}
function_name()
//b. typeof(數(shù)據(jù))-獲取數(shù)據(jù)類型
console.log(typeof(100))
console.log(typeof([1,2,3]))
//c.new 類型名(數(shù)據(jù))-將數(shù)據(jù)轉(zhuǎn)換成指定的類型
var a = new Boolean(100)
console.log(a)
//d.常用的特殊值:undefined(相當(dāng)于Python碰镜，None),null(一般用來清空變量)
//4.格式:js沒有縮進(jìn)的要求
</script>
3.變量
/*
語法：
var 變量名
變量名 = 值
說明：
var-是js關(guān)鍵字兢卵，聲明變量的時(shí)候用,var可以省略，省略的時(shí)候變量名必須賦值绪颖，
不省略的時(shí)候變量名后可以賦值秽荤，也可以不賦值，不賦值的時(shí)候默認(rèn)值是underfined
變量名-標(biāo)識(shí)符柠横，不能是關(guān)鍵字窃款，駝峰式命名規(guī)范
*/
//聲明一個(gè)變量
<script type="text/javascript">
var name1
console.log(name1)
var name2 = '小明'
console.log(name1)
name3 = 'abc'
console.log(name1)
//同時(shí)聲明多個(gè)變量
var age=18, sex,score=100
console.log(age,sex,score)
age1 =10, sex1='男'
console.log(sex1,age1)
//變量中的值
age = '少年'
console.log(age)
</script>
4.運(yùn)算符
<script type="text/javascript">
//js中支持:數(shù)學(xué)運(yùn)算符,比較運(yùn)算符,邏輯運(yùn)算符,賦值運(yùn)算符,位運(yùn)算符
//1.數(shù)學(xué)運(yùn)算符:+,-,,/,%,(js7),++,--
//+,-,,/,%,和Python一樣,但是js中不支持整除(//)
console.log(20+10,20-10,2010,5/2,5%2,5*2)
//++(自加1),--(自減1)
//變量++,++變量,變量--,--變量(注意：變量必須要有值)
//注意賦值的時(shí)候++和--寫在變量的前面和后面對(duì)應(yīng)的效果不一樣
var number = 10
number++ //讓number的值加1, number += 1
//++number 讓number的值加1 number +=1
console.log(number)
number--
//--number
console.log(number)
var number1 = 1, number2
number2 = number1++ //相當(dāng)于:number2=number1, number+=1
console.log(number1,number2) //2,1
var number11 = 1, number22
// number22 = ++numbe11 //相當(dāng)于:number11+=1, number22=number11
console.log(number11,number22) //2,2
//2.比較運(yùn)算符:>,<,==,!=,>=,<=,===,!==,>==,<==
//比較運(yùn)算符的返回值都是布爾值
//==(相等):判斷值是否相等
//===(完全相等):判斷值和類型是否相等
console.log(5==5) //true
console.log(5=='5') //true
console.log(5===5) //true
console.log(5==='5') //false
//3.邏輯運(yùn)算符:&&(與),||(或),！(非)
//運(yùn)算規(guī)則和Python中的and,or,not一模一樣
//4.賦值運(yùn)算符:=,+=,-=,*=,/=,%=
//和Python一樣
//5.位運(yùn)算符:&,|,^,~,>>,<<
//和Python一樣
console.log(1&2,1|2,1^2,~1,2>>1,2<<1)
</script>
5.分之結(jié)構(gòu)
<script type="text/javascript">
//js中的分之結(jié)構(gòu)有兩個(gè),分別是if和switch語句
/*
1.if語句
結(jié)構(gòu)：
if（條件語句）{
代碼段
}
說明：
if-是關(guān)鍵字
（）{}-固定寫法
執(zhí)行過程：判斷條件語句是否為true牍氛，為true就執(zhí)行{}中的代碼（不管縮進(jìn)問題）
number = 10
if(number %2 == 0){
console.log('是偶數(shù)')
console.log('====')
}
b.if-else結(jié)構(gòu)：
if(條件語句){
代碼段1
}else{
代碼段2
}
number2 = 10
if(number2 %2==0){
console.log(number2, '是偶數(shù)' )
}else{
console.log(number2 ,'是奇數(shù)' )
}
c.if-else if-else結(jié)構(gòu)
if(條件語句){
代碼段1
}else if(條件語句2){
代碼段2
}else if(條件語句3){
代碼段3
}else{
代碼段4
}
else if 相當(dāng)于Python中的elif
/
/
2.switch語句
結(jié)構(gòu)：
switch(變量晨继、表達(dá)式){
case 值1：{
代碼段1
}
case 值2{
代碼段2
}
case 值3{
代碼段3
}
.....
default:{
代碼段4
}
}
執(zhí)行過程：先計(jì)算表達(dá)式的值，然后從上往下搬俊，一一和case后面的值進(jìn)行比較紊扬，然后找到第一個(gè)和表達(dá)式相等的case
然后將這個(gè)case作為結(jié)果，依次執(zhí)行后邊所有的代碼段唉擂，直到執(zhí)行完或者遇到 break為止
如果沒有哪個(gè)和case的值和表達(dá)式的值一樣餐屎，就直接執(zhí)行default后面的代碼段
default可以省略
num = 10
switch(num){
case 1:
console.log('1')
case 2:
console.log('2')
case 10:
console.log('10')
case 11:
console.log('11')
default:
console.log('default')
}
//練習(xí):從服務(wù)器獲取到的星期對(duì)應(yīng)的值是0-6,在程序中對(duì)應(yīng)打印出其對(duì)應(yīng)的星期值(周一到周天)
week = 1
switch(week){
case 0:
console.log('星期一')
break
case 1:
console.log('星期二')
break
case 2:
console.log('星期三')
break
case 3:
console.log('星期四')
break
case4:
console.log('星期五')
break
case 5:
console.log('星期六')
break
case 6:
console.log('星期日')
}
//練習(xí):有一個(gè)變量存的是績(jī)點(diǎn)(整數(shù)：0=5),要求是0-不及格,1-3-及格,4-5優(yōu)秀
score = 3
switch(score){
case 0:
console.log('不及格')
break
case 1:
case 2:
case 3:
console.log('及格')
break
case 4:
case 5:
console.log('優(yōu)秀')
break
default:
console.log('成績(jī)有誤')
}
</script>
6.for循環(huán)
<script type="text/javascript">
js中的循環(huán)有for和while循環(huán)
1.for循環(huán)
a.for-in和Python的for循環(huán)的執(zhí)行過程一樣
for 變量 in 序列{
循環(huán)體
}
注意：取出來的是元素的下標(biāo)或者key（屬性名）
序列可以是字符串，數(shù)字和對(duì)象
str1 = 'abc'
for( i in 'str1'){
console.log(str1[i])
}
arr = [12,23,45]
for (i in arr ){
console.log(i, arr[i])
}
Object1 = {name:'小明', age:18}
for (i in Object1){
console.log(i, Object1[i])
}
b.c的for循環(huán)結(jié)構(gòu)：
for（表達(dá)式1玩祟；表達(dá)式2腹缩，表達(dá)式3）{
循環(huán)體
}
執(zhí)行過程：先執(zhí)行表達(dá)式1，再判斷表達(dá)式2的結(jié)果是否為true空扎，為true就執(zhí)行循環(huán)體庆聘，執(zhí)行完循環(huán)體再判斷表達(dá)式3
再判斷表達(dá)式2是否為true，為true執(zhí)行循環(huán)體勺卢，執(zhí)行完循環(huán)體再執(zhí)行表達(dá)式3伙判，依次類推，直到表達(dá)式2的結(jié)果為false黑忱，整個(gè)循環(huán)結(jié)束
指導(dǎo)思想：語句1-里面寫循環(huán)開始前的準(zhǔn)備工作
表達(dá)式2-控制循環(huán)次數(shù)的
語句3-改變循環(huán)次數(shù)
*/
//計(jì)算:1+2+3+....10
for(num1 = 1, sum1 = 0;num1<=100;num1+=1){
sum1+=num1
}
console.log(sum1)
</script>
7.函數(shù)
<script type="text/javascript">
//js函數(shù)分為聲明和調(diào)用,聲明的時(shí)候不會(huì)執(zhí)行函數(shù)體,只有調(diào)用的時(shí)候才會(huì)執(zhí)行函數(shù)體
/*
1.函數(shù)的聲明
a.和Python相同的聲明方式
function 函數(shù)名 （參數(shù)列表）{
函數(shù)體
return 返回值
}
說明：
function-聲明函數(shù)的關(guān)鍵字
函數(shù)名-駝峰式命名宴抚，見名之義
參數(shù)列表-參數(shù)如果沒有設(shè)置默認(rèn)值勒魔，相當(dāng)于設(shè)置默認(rèn)值為undefined
返回值-沒有return返回值是undefined
b.以聲明函數(shù)變量的形式聲明函數(shù)
函數(shù)名 = function （參數(shù)列表）{
函數(shù)體
return 返回值
}
function sum1(num1 = 1, num2 = 2){
console.log('求兩個(gè)數(shù)的和',num1,num2)
return num1+num2
}
mul = function (num1, num2){
console.log('求兩個(gè)數(shù)的乘積',num1,num2)
return num1*num2
}
sum1(10,20)
sum1 ()
console.log(mul(2,3))
</script>
/*函數(shù)的調(diào)用
函數(shù)名（實(shí)參列表）
調(diào)用的時(shí)候保證每個(gè)參數(shù)都有值
只能通過位置參數(shù)傳參
js中不支持不定長(zhǎng)參數(shù)
7.字符串
<script type="text/javascript">
字符串：由單引號(hào)或者雙引號(hào)括起來的
1.轉(zhuǎn)義字符：和Python一樣
2.字符串的長(zhǎng)度：字符串.length
3.獲取單個(gè)字符：字符串[下標(biāo)]
注意：下標(biāo)的取值范圍是0-長(zhǎng)度-1，超出范圍取到的是 undefined
js中沒有切片語句
//轉(zhuǎn)義字符
console.log('abc\n123')
console.log('\tabc\'123')
//字符串長(zhǎng)度
console.log('abc'.length)
//獲取單個(gè)字符
str1 = 'abcdf'
console.log(str1[1])
4.相關(guān)運(yùn)算符
+--將兩個(gè)字符串拼接在一起產(chǎn)生一個(gè)新的字符串
注意：如果是一個(gè)字符串加上其他的數(shù)據(jù)菇曲，會(huì)先將其他數(shù)據(jù)轉(zhuǎn)換成字符串再相加
js不支持*運(yùn)算符
比較運(yùn)算（>,<,==,!==,===,!===）
,<-->和Python一樣冠绢，函數(shù)比字符編碼值的大小
console.log('abc'+'123')
console.log('abc'+100,'abc'+[1,2,3],'abc'+true)
str1 = new String([10,20,30])
console.log(str1)
// console.log('abc'*3) NaN-->是數(shù)字類型中的特殊值,表示一個(gè)不存在的數(shù)字
//console.log(10/0) Infinty-->無窮大
console.log('abc' > 'abbbbb' )
//5.相關(guān)方法(看菜鳥的表)
//match(正則表達(dá)式)-根據(jù)正則表達(dá)式的匹配結(jié)果
str1 = 'afd466fgdgfdssdddvddf3243'
result = str1.match(/[a-z]+/)
console.log(result)
result = str1.replace(/\d/m, '*' )
console.log(result)
</script>
8.數(shù)組
<script type="text/javascript">
/*
數(shù)組就是Python中的列表
1.數(shù)組是有序，可變的,里面的元素可以是任意類型
2.增刪改查
/
/
a.查(獲取數(shù)組中的元素)
數(shù)組[下標(biāo)]
數(shù)組.slice(開始下標(biāo)常潮，結(jié)束下標(biāo))--切片
arr1 = [1,2,3,'abc']
console.log(arr1[3])
result = arr1.slice(0,3)
console.log(result,arr1)
//獲取數(shù)組的長(zhǎng)度
console.log(arr1.length)
b.增（添加元素）
數(shù)組.push(元素)-將元素添加到數(shù)組的最后
arr1.push('hello')
console.log(arr1)
c.刪（刪除元素）
數(shù)組.pop()-刪除最后一個(gè)元素
數(shù)組.splice(開始刪除下標(biāo)弟胀，刪除的歌)--從數(shù)組指定的下標(biāo)開始刪除指定個(gè)數(shù)元素
arr1.pop()
console.log(arr1)
arr1.splice(0,1)
console.log(arr1)
d.改（修改元素的值）
數(shù)組[下標(biāo)]=新值-修改指定下標(biāo)的元素
arr1 = [1,2,3,4,5, 'abc' ]
arr1[0] = 10
console.log(arr1)
arr1.splice(1,2,'a','b')
console.log(arr1)
</script>
9.對(duì)象
<script type="text/javascript">
//js中沒有Python的類,只有對(duì)象和構(gòu)造方法
/*
1.對(duì)象的字面量
{屬性名：屬性值，屬性名2：屬性值2...}
p1={
//對(duì)象屬性
name:'小明',
age:18,
tel:243365687,
//對(duì)象方法
eat:function(){
console.log('吃飯')
}
}
/*
2.使用對(duì)象屬性
對(duì)象 [屬性名]
對(duì)象.屬性
*/
console.log(p1['name'],p1.name)
p1.eat()
/*
3.構(gòu)造方法-用來創(chuàng)建對(duì)象的
function 類名（參數(shù)列表）{
this.屬性1 = 屬性值1
this.屬性2 = 屬性值2
....
return this
}
這兒的this類似Python中的self喊式，表示當(dāng)前對(duì)象
*/
function Person(name, age = 18){
this.name = name
this.age = age
this.tel = ''
this.sex = '男'
//對(duì)象方法
this.eat = function(food){
console.log(this.name+'在吃'+food)
}
return this
}
p2 = Person('小明')
p2.tel= '12345678'
p2.eat('面條')
