1 js簡介
- 什么是js
- js是JavaScript的縮寫，是一門唯一的用來控制網(wǎng)頁內(nèi)容的腳本語言；
- 是web標準中的行為標準-用來控制網(wǎng)頁內(nèi)容的變化
- .js寫在什么位置
- 內(nèi)聯(lián) - 將js代碼寫在標簽的事件相關(guān)屬性中,例如：onclick屬性
- 內(nèi)部 - 將js代碼寫在script標簽中(既可以放在head標簽中也可以放在body標簽)
- 外部 - 將js代碼寫在js文件中, 然后通過script標簽導(dǎo)入
- js能做什么事情
- 修改標簽內(nèi)容
- 修改標簽屬性
- 修改標簽樣式
- 添加內(nèi)容
- 怎么寫js代碼？
- js語法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!--1.內(nèi)聯(lián)js-->
<button onclick="alert('內(nèi)聯(lián)js')">按鈕</button>
<!--2.內(nèi)部js-->
<!--<script type="text/javascript">
//彈出警告框
alert('內(nèi)部js')
</script>-->
<!--3.外部js-->
<!--<script type="text/javascript" src="js/index.js"></script>-->
<!--修改標簽內(nèi)容-->
<p id="p1">我是段落</p>
<button onclick="document.getElementById('p1').innerText = 'hello js'">修改內(nèi)容</button>
<br /><br />
<!--修改標簽屬性-->
<img src="img/luffy.jpg" id="img1"/>
<button onclick="document.getElementById('img1').src = 'img/luffy1.png'">修改圖片</button>
<br /><br />
<!--修改標簽樣式-->
<p id="p2">我是一段文字</p>
<button onclick="document.getElementById('p2').style='color:red;font-size:25px;'">修改樣式</button>
<!--網(wǎng)頁中添加內(nèi)容-->
<script type="text/javascript">
for(x=1;x<=10;x++){
document.write('<h1>我是標題'+x+'</h1>')
}
</script>
</body>
</html>
2 js 語法基礎(chǔ)
2.1 注釋(和C語言注釋一樣)
//單行注釋：在注釋文字前加//
/*
多行注釋1
多行注釋2
*/
2.2 標識符
- 由字母、數(shù)字、下劃線和$符組成，數(shù)字不能開頭。
- 注意:$不輕易使用，在JQ有特殊的意義
num = 23
_num = 100
2.3 關(guān)鍵字
//for、if、var、while、func、true、false等....
2.4數(shù)據(jù)類型
- 類型名首字母都是大寫的 js有以下數(shù)據(jù)類型 Number(數(shù)字)、String(字符串)、Boolean(布爾)、Array(數(shù)組)、Object(對象)
- Number - 包含所有的數(shù)字(包括整數(shù)和小數(shù)),例如: 100, 0.23, -23, 2e5
- String - 用雙引號或者單引號引起來的字符集, 支持轉(zhuǎn)義字符和編碼字符
- Boolean - 只有true和false兩個值，分別代表真和假
- Array - 相當(dāng)于python中的列表, 用中括號括起來的多個元素。[12, 'abc', true, [1, 2, 3]]
- Object - 類似python中字典和對象的結(jié)合
- typeof函數(shù) 查看數(shù)據(jù)類型
- 類型名(數(shù)據(jù)) - 類型轉(zhuǎn)換
- parseFloat(數(shù)據(jù)) - 將數(shù)據(jù)轉(zhuǎn)換成浮點數(shù)
- parseInt(數(shù)據(jù)) - 將數(shù)據(jù)轉(zhuǎn)換成整數(shù) 數(shù)據(jù)類型不變 js里沒整除，可以用parseInt實現(xiàn)
- 語句
- 一行一般情況下只寫一條語句,語句結(jié)束后可以有分號也可以沒有；如果一行有多條語句，語句之間必須有分號
- 縮進無要求
- 大小寫敏感
<script type="text/javascript">
//轉(zhuǎn)換類型
result = String(100)
console.log('=====:',result, typeof(result))
result = parseFloat('12.34')
console.log('=====:',result, typeof(result))
result = parseInt('12.34')
console.log('=====:',result, typeof(result))
//typeof(數(shù)據(jù)) - 獲取數(shù)據(jù)對應(yīng)的類型
console.log(2e5) //在控制臺打印，相當(dāng)于python的print
console.log(typeof(0.12))
console.log(typeof(120))
str1 = 'hello'
str2 = "Hello\t你好\u4e00"
console.log(str2)
arr1 = [10, 'abc', false, [1, 2, 3]]
console.log(arr1, arr1[1])
obj1 = {
'name':'小明',
'age': 18,
'sex':'女'
}
console.log(obj1, typeof(obj1))
console.log(obj1['name'], obj1.name)
obj2 = {
name:'小明',
age:18,
sex:'男'
}
console.log(obj2, typeof(obj2))
//語句
num1 = 100
num2 = 200
num3 = 300
num = 1000
NUM = 2000
console.log(num, NUM)
</script>
2.5變量
聲明變量的語法
- 語法1:
- 變量名 = 值
- 語法2:
- var 變量名 / var 變量名 = 值
- 說明
- 變量名 - 標識符、不能是關(guān)鍵字; 采用駝峰式命名
- 聲明變量如果沒有給變量賦值(語法2才支持),變量的默認值是undefined
<script type="text/javascript">
num = 100 //必須賦值
console.log(num)
var num2 //不賦值是undefined
console.log(num2)
studentName = '小明'
//同時聲明多個變量，賦相同的值
a = b = c = 10
console.log(a,b,c)
//同時聲明多個變量，賦不同的值
var a1, b1=10, c1=30
console.log(a1, b1, c1)
</script>
2.6 運算符
js支持數(shù)學(xué)運算符、比較運算符、邏輯運算符、賦值運算符、(位運算)
<script type="text/javascript">
//1.數(shù)學(xué)運算符：+, -, *, /, %, ++,--
//+, -, *, /, %和python一樣
console.log(10+20, 10-20, 10*20, 10/20, 10%20)
//1)自加1運算: 變量++, ++變量
num = 10
num++ //num += 1
console.log(num) // 11
++num
console.log(num) // 12
//2)自減1運算: 變量--, --變量
num = 10
num--
console.log(num)
--num
console.log(num)
//3)自加自減的坑
num = 10
num2 = num++ // num2 = num; num+=1
console.log(num2)
num = 10
num2 = ++num // num+=1; num2=num
console.log(num2)
//2.比較運算符: >,<,==,!=,>=,<=, ===, !==
// 比較大小和python一樣
// == : 判斷值是否相等(不管類型)
// === : 同時判斷值和類型是否相等(python中的==)
console.log(5 == '5') // true
console.log(5 === '5') // false
console.log(5 != '5') //false
console.log(5 !== '5') // true
// 支持表示范圍的連續(xù)寫法
num = 10
reslut = 0 < num <100
console.log(reslut)
//3.邏輯運算：&&(邏輯與運算)、||(邏輯或運算)、!(邏輯非運算)
//和python中的and,or,not功能一樣
console.log(true && true, true && false)
console.log(true || true, true || false)
console.log(!true)
//4.賦值運算符: =, +=, -=, *=, /=, %=
//和python一樣
//5.復(fù)合運算和python一樣
//6.三目運算符 - 表達式?值1:值2
//判斷表達式的值是否為true,如果為true整個運算的結(jié)果是值1，否則是值2
age = 16
reslut = age>18?'成年':'未成年'
console.log(reslut)
</script>
2.7 分之結(jié)構(gòu)
js有if和switch兩種分之結(jié)構(gòu)
2.7.1 if分之
- 結(jié)構(gòu)1: if
if(條件語句){
滿足條件執(zhí)行的代碼塊
} - 結(jié)構(gòu)2： if-else
if(條件語句){
滿足條件執(zhí)行的代碼塊
}else{
不滿足條件執(zhí)行的代碼塊
} - 結(jié)構(gòu)3：if-elif...else
if(條件語句1){
滿足條件1執(zhí)行的代碼塊
}else if(條件語句2){
滿足條件2執(zhí)行的代碼塊
}
2.7.2 switch
- 語法:
switch(表達式){
case 值1:
代碼塊1
case 值2:
代碼塊2
case 值3:
代碼塊3
...
default:
代碼塊N} - 執(zhí)行過程
先計算表達式的結(jié)果，然后讓這個結(jié)果按順序從前往后和每個case后面的值進行比較。
如果哪個case后面的值和表達式的結(jié)果相等，就將這個case作為入口，依次后面所有代碼塊，
直到執(zhí)行完最后一個代碼塊或者遇到break為止。
如果每個case后面的值都和表達式的結(jié)果不相等，直接執(zhí)行default后面的代碼塊（default可以不寫）
<script type="text/javascript">
switch(2){
case 1:
console.log('表達式1')
case 15:
console.log('表達式15')
case 10:
console.log('表達式10')
case 8:
console.log('表達式8')
default:
console.log('表達式d')
}
grade = 2
switch(grade){
case 0:
console.log('不及格')
break
case 1:
case 2:
case 3:
console.log('及格')
break
case 4:
case 5:
console.log('優(yōu)秀')
break
}
</script>
2.8 循環(huán)結(jié)構(gòu)
js中循環(huán)分為for循環(huán)和while循環(huán)
2.8.1 for循環(huán)
- for-in循環(huán)
for(變量 in 序列){
循環(huán)體}
讓變量依次獲取序列中元素的下標(下標/屬性名),一個一個取，取完為止，每取一個值執(zhí)行一次循環(huán)體 - c中的for循環(huán)
- for(表達式1;表達式2;表達式3){
循環(huán)體 } - 執(zhí)行過程:
- 先執(zhí)行表達式1，再判斷表達式2的值是否為true;如果為true執(zhí)行循環(huán)體，執(zhí)行完循環(huán)體再執(zhí)行表達式3；
- 再判斷表達式2是否為true,如果為true執(zhí)行循環(huán)體，執(zhí)行完循環(huán)體再執(zhí)行表達式3；
- 再判斷表達式2是否為true,如果為true執(zhí)行循環(huán)體，執(zhí)行完循環(huán)體再執(zhí)行表達式3；
- 依此類推，直到表達式2的結(jié)果為false，循環(huán)結(jié)束
- 相當(dāng)于python中的以下結(jié)構(gòu):
表達式1
while 表達式2:
循環(huán)體
表達式3
- for(表達式1;表達式2;表達式3){
2.8.2 while循環(huán)
- while循環(huán)
while(條件語句){
循環(huán)體}
執(zhí)行過程和python一樣 - do-while循環(huán)
do{
循環(huán)體
}while(條件語句)
執(zhí)行過程: 執(zhí)行循環(huán)體，判斷條件語句是否為true,為true再執(zhí)行循環(huán)體，執(zhí)行完循環(huán)體又判斷條件語句是否為true，以此類推，直到條件語句為false循環(huán)結(jié)束
<script type="text/javascript">
str1 = 'abc'
for(x in str1){
console.log(x, str1[x])
}
//2)C中的for循環(huán)
sum1 = 0
for(num=1;num<=100;num++){
sum1 += num
}
console.log(sum1)
//2.while循環(huán)
sum1 = 0
for(num=1;num<=100;num++){
sum1 += num
}
console.log(sum1)
sum1 = 0
num = 1
while(num<=100){
sum1 += num
num++
}
console.log(sum1)
sum1 = 0
num = 1
for(;num<=100;){
sum1 += num
num++
}
console.log(sum1)
//練習(xí): 打印所有的水仙花數(shù)
//153 == 1**3+5**3+3**3
console.log('===========================')
for (num=100;num<=999;num++) {
ge = num % 10
shi = parseInt(num/10)%10
bai = parseInt(num/100)
if (ge**3 + shi**3 + bai**3 == num){
console.log(num)
}
}
</script>
3 js函數(shù)
語法:
function 函數(shù)名(參數(shù)列表){
函數(shù)體}
<script type="text/javascript">
function sum(num1, num2=20){
console.log(num1, num2, num1+num2)
}
//位置參數(shù)有效
sum(10, 30)
//關(guān)鍵參數(shù)不報錯，但是順序無效
sum(num1=2, num2=4) // 2 4 6
sum(num2=9, num1=8) // 9 8 17
//參數(shù)可以設(shè)置默認值(有默認值的參數(shù)要在后面)
sum(10)
function sum1(num1=10, num2){
console.log(num1, num2, num1+num2)
}
sum1(20) // 20 undefined NaN(無效數(shù)字)
function sum3(num1, num2){
return num1+num2
}
console.log(sum3(23, 45))
//聲明函數(shù)其實就是聲明一個類型是Function的變量
x = sum3
console.log(typeof(x))
console.log(x(90, 9))
/*
2.匿名函數(shù)
function (參數(shù)列表){
函數(shù)體
}
*/
func1 = function(x, y){
console.log(x, y, x+y)
return x+y
}
func1(1, 2)
a = function(x, y){
console.log(x, y, x+y)
return x+y
}(10, 20)
console.log(a) // 30
</script>
4 字符串
<script type="text/javascript">
//1.字符串
//單引號或者雙引號引起來的字符集，支持轉(zhuǎn)義字符和編碼字符
str1 = 'hello world'
str2 = 'hello\t\'world\''
//2.獲取字符
//字符串[下標]
//注意: 1)下標只有正值，沒有負的; 2)下標越界不會報錯，獲取到的值是undefined
console.log(str1[0])
console.log(str1[-1])
//js中不支持[]對應(yīng)的切片語法，但是有相應(yīng)的方法
//3.相關(guān)操作
//1)加法運算
//支持字符串和任何數(shù)據(jù)相加, 如果另外一個數(shù)據(jù)不是字符串就先轉(zhuǎn)換成字符串再進行拼接操作
console.log('abc'+'hello') //abchello
console.log('abc'+123) // abc123
//2)比較運算: 和python一樣
//3)字符串長度: 字符串.length
console.log(str2.length)
//4.相關(guān)方法
str2 = new String('hello world')
console.log(str2)
//1)字符串.charCodeAt(下標)
console.log(str2.charCodeAt(0))
//2)字符串.match(正則表達式),相當(dāng)于python中的re.match
re = /\d{3}[a-z]{3}/
console.log('234abc====='.match(re))
//3)字符串.slice(開始下標,結(jié)束下標)
console.log(str2.slice(0, 3))
</script>
##5 數(shù)組
~~~html
<script type="text/javascript">
//js中的數(shù)組相當(dāng)于python中的列表
//1.查
arr1 = [10, 2, 30, 4, 5]
//1）獲取單個元素: 數(shù)組[下標]
console.log(arr1[3]) //4
console.log(arr1[10]) //undefined
//2)遍歷
for(index in arr1){
console.log('index:'+index, arr1[index])
}
//2.增
console.log('=============增加==================')
//1)數(shù)組.push(元素) - 在數(shù)組的最后添加元素
arr1.push(100)
console.log(arr1)
//2)數(shù)組.splice(下標,0,元素) - 在指定的下標前插入指定的元素
//數(shù)組.splice(下標,0,元素1,元素2,...) - 在指定的下標前插入多個元素
arr1 = [1, 2, 3, 6, 7,8]
arr1.splice(3,0,4,5)
console.log(arr1)
//3.刪
console.log('=============刪除==================')
//1)數(shù)組.pop() - 取出數(shù)組中的最后一個元素
re = arr1.pop()
console.log(arr1, re)
//2)數(shù)組.shift() - 取出數(shù)組中第一個元素
re = arr1.shift()
console.log(arr1, re)
//3)數(shù)組.splice(開始刪除的下標,刪除的個數(shù))
arr1 = [10, 30, 20, 40]
arr1.splice(1,2)
console.log(arr1)
//4.改
//數(shù)組[下標] = 值
arr1[0] = 200
console.log(arr1)
//5.排序
//sort(函數(shù)對象)
//函數(shù)對象 - 函數(shù)，有兩個參數(shù)(代表數(shù)組中的兩個元素), 返回值代表排序方法
console.log('=================排序==============')
nums = [90 ,23, 56, 7, 89, 70]
//數(shù)組元素從大到小排序
nums.sort(function(a,b){return b-a})
console.log(nums)
//數(shù)組元素從小到大排序
nums.sort(function(a,b){return a-b})
console.log(nums)
students = [
{name:'小明', age:18, score:90},
{name:'小花', age:20, score:70},
{name:'小紅', age:15, score:78},
{name:'小李', age:30, score:60}
]
//將數(shù)組元素按照元素的age屬性從下到大排序
// students.sort(function(a,b){return a.age - b.age})
// console.log(students)
//將數(shù)組元素按照元素的score屬性從大到小排序
students.sort(function(a,b){return b.score - a.score})
console.log(students)
</script>
6 對象
<script type="text/javascript">
//1.什么是對象
//和python類的對象一樣，主要由對象屬性和對象方法組成
//2.創(chuàng)建對象
//1)對象值
obj1 = {
name: '張三',
}
console.log(typeof(obj1), obj1)
//2)new 類型()
obj2 = new Object()
console.log(typeof(obj2), obj2)
obj2.name = '小明'
console.log(obj2)
//3.構(gòu)造方法 - 一個用來創(chuàng)建對象的函數(shù)
//1)函數(shù)名相當(dāng)于類名，首字母要大寫
//2)函數(shù)的功能是通過this添加對象屬性和對象方法（這兒的this就相當(dāng)于self）
//3)返回值是this
function Person(name, age, gender='男'){
// 通過new的方式調(diào)用, this：Person {}
// 直接調(diào)用, this： Window
console.log(this)
//添加對象屬性
this.name = name
this.age = age
this.gender = gender
//添加對象方法
this.eat = function(food){
console.log(this.name+'在吃'+food)
}
return this
}
//4.使用構(gòu)造方法創(chuàng)建對象
//對象 = new 構(gòu)造方法()
p1 = new Person('小花', 20, '女')
p2 = new Person('小明', 35)
//5.通過對象使用對象屬性和調(diào)用對象方法
p1.name = '小花花'
console.log(p1.name, p1['name'])
p1.eat('面條')
p2.eat('面包')
//6.添加/修改屬性
//對象.屬性 = 值
p1.height = 160
console.log(p1, p2)
function func1(){
console.log('普通函數(shù)')
console.log(this)
}
// func1()
window.func1()
num = 100 // window.num=100
console.log(num, window.num)
</script>
