js
1.什么是js
js是JavaScript的縮寫，是web標準中的行為標準。負責(zé)網(wǎng)頁中變化的部分。
2.在哪里寫js代碼
a.寫在標簽的事件相關(guān)屬性中，例如按鈕的onclick屬性
b.寫在script標簽中(將js代碼作為script標簽的內(nèi)容)
注意：script標簽理論上可以放在html中的任何位置，但是一般放在head或者body中
c.寫在js文件中，在html中通過script標簽將文件導(dǎo)入(src屬性值就是要導(dǎo)入的js文件的路徑)
3.js能做什么
a.在網(wǎng)頁的指定位置插入標簽
b.修改網(wǎng)頁中標簽的內(nèi)容
c.修改標簽樣式
4.怎么寫js代碼
JavaScript是一門編程語言，和python一樣是動態(tài)語言也是腳本語言。和Java沒有半毛錢關(guān)系！
補充：
window.alert(信息) - js代碼，在瀏覽器上彈出一個對話框，對話框中顯示指定的信息。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!--1.js代碼寫在哪兒-->
<!--<script type="text/javascript" src="js/index.js">
</script>
<script type="text/javascript">
//在這兒寫js代碼
window.alert('python and js!')
</script>
<button onclick="window.alert('你好！')">點我呀！</button>
-->
<h1>我是標題</h1>
<!--2.js能做什么-->
<!--a.插入內(nèi)容-->
<script type="text/javascript">
arr = ['海賊王', '火影', '魁拔', '一拳超人']
for (index in arr) {
message = '<h1>'+arr[index]+'</h1>'
//在網(wǎng)頁中添加內(nèi)容
document.write(message)
}
// for (i=0; i < 20; i++){
// document.write('<h1>我是標題</h1>')
// }
</script>
<!--b.修改標簽內(nèi)容-->
<p id="p1">我是段落</p>
<button onclick="document.getElementById('p1').innerHTML='我是JavaScript！'">修改內(nèi)容</button>
<!--c.修改標簽的樣式-->
<button onclick="document.getElementById('p1').style='color:red; font-size:30px'">修改樣式</button>
</body>
</html>
01.基本語法
1.控制臺輸出
console.log(輸出的內(nèi)容) - 和print的功能一樣
console.log(100)
console.log('abc', 200)
2.注釋 - 和c一樣
單行注釋
/*
* 多行注釋
* 多行注釋
*/
3.標識符
由字母數(shù)字下劃線和$組成，數(shù)字不能開頭。
a = 10
a20 = 100
a_100 = 200
$12s = 23
//12abc = 100 //報錯！
4.行和縮進
從語法角度，js代碼怎么換行和縮進都無所謂。js中通過大括號{}來確定代碼塊。
5.常見的數(shù)據(jù)類型：數(shù)字，布爾，字符串，數(shù)組，對象，和函數(shù)
a.數(shù)字(Number) - 包含所有的數(shù)字，包括整數(shù)、小數(shù)和科學(xué)計數(shù)法(不支持復(fù)數(shù)類型！)。例如:10，12.3，-14，-2.34,3e2
b.布爾(Boolean) - 只有兩個值true和false。這兩個值是關(guān)鍵字，分別代表真和假。
c.字符串(String) - 使用單引號或者雙引號引起來的字符串集， 'abc', "abd"
d.數(shù)組(Array) - 相當(dāng)于python中的列表，[12, 'abc', ture]
e.對象(Object) - 相當(dāng)于python中的字典和對象，{name: '小明', age: 10}
f.函數(shù)(Function) - 相當(dāng)于python中的函數(shù)
console.log(3e2, '我是字符串', "我是字符串！")
obj1 = {name: '小明', age: 10}
console.log(obj1['name'], obj1.name)
//聲明函數(shù)
function eat(name,food){
console.log(name+'吃'+food)
}
eat(obj1.name,'面條')
02.變量
1.變量的聲明
語法1：變量名 = 值
變量名 - 標識符，不能是關(guān)鍵字；
駝峰式命名(第一個單詞首字母小寫，后面每個單詞的首字母大寫)
語法2：var 變量名 = 值 或 var 變量名
var - 聲明變量的關(guān)鍵字
區(qū)別：聲明的時候加var，變量可以不用賦值，默認是undefined；不加var，變量必須賦值，否則會報錯
補充：js中兩個特殊的值 - undefined(沒有，空)和null(清空)
name = '小明'
console.log(name)
var age = 10
var sex // 通過var聲明變量的時候如果不賦值，默認是undefined
console.log(age, sex)
//重新給變量賦值
name = '小明'
age = 18
sex = '男'
console.log(name, age, sex)
//同時聲明多個變量，賦一樣的值
a1 = a2 = a3 = 10
console.log(a1, a2, a3)
var b1 = 1, b2 = 2, b3 = 3, b4
console.log(b1, b2, b3, b4)
// arr1 = [1, 24, 45]
// console.log(arr1[10])
03.運算符
1.數(shù)學(xué)運算符：+, -, *, /, %, ++, --
前面五個運算符合python一模一樣
++， -- - 都是單目運算符，使用方式：變量++/--， ++/--變量
a.++ - 自加1運算；讓變量本身的值加1
b.-- - 自減1運算；讓變量本身的值減1
num = 10
num ++
console.log(num) // 11
++num
console.log(num) // 12
num--
console.log(num) // 11
--num
console.log(num) // 10
坑：用一個變量單獨使用++/--的時候，++/--放前面和放后面效果一樣；
如果是使用++/--運算的結(jié)果給另一個變量賦值，++/--放前面是先自加再自加或自減，++/--放后面是先賦值再自加或自減
num2 = 10
num = ++num2 //相當(dāng)于： num2 += 1; num = num2
console.log(num, num2) // 11 11
num2 = 10
num = num2++ //相當(dāng)于： num = num2 ; num2 += 1
console.log(num, num2) // 10 11
2.比較運算符：>, <, ==, !=, >=, <=, ===, !==
結(jié)果是布爾值
比較大小和python一樣
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.邏輯運算符：&&(邏輯與)、||(邏輯或)、！(邏輯非)
運算規(guī)則和使用方式和python的邏輯運算一模一樣
console.log('=================')
console.log(true && true) //true
console.log(true && false) //false
console.log(false || true) //true
console.log(false || false) //false
console.log(!true) //false
4.賦值運算符：=, +=, -=, *=, /=, %=
和python一模一樣
5.三目運算符 - ？：
語法：
條件語句？值1:值2 - 判斷條件語句的值是否為true，為true整個表達式的結(jié)果就是值1，否則就是值2
age = 16
is_man = age >= 18 ? '成年' : '未成年'
console.log(is_man)
6.運算順序
數(shù)學(xué) > 比較 > 邏輯 > 賦值
如果由括號，先算括號里
04.分之結(jié)構(gòu)
js中的分之結(jié)構(gòu)有兩種：if和switch
1.if語句
a.if
if(條件語句){
滿足條件會執(zhí)行的代碼
}
b.if-else
if(條件語句){
代碼段1
}else{
代碼段2
}
c.if - else if - else
if(條件語句){
代碼段1
}else if(條件語句2){
代碼段2
}else if(條件語句3){
代碼段3
}else{
代碼段4
}
執(zhí)行過程和python一模一樣
num = 11
if (num % 2) {
console.log('奇數(shù)')
} else{
console.log('偶數(shù)')
}
age = 18
if (age < 18) {
console.log('未成年')
} else if(age < 60){
console.log('成年')
}else{
console.log('老年')
}
2.switch語句
a.結(jié)構(gòu)：
switch(表達式){
case 值1：
代碼段1
case 值2：
代碼段2
...
default：
代碼段3
}
b.執(zhí)行過程：
使用表達式的值依次和后面每個case后面的值進行比較，看是否相等；找到第一個和表達式的值相等的case，將這個case作為入口，依次執(zhí)行后面的所有的代碼，直到執(zhí)行完成后或者遇到break位置。如果每個case的值和表達式的值都不相等，就執(zhí)行default后面的代碼。
注意：case后面必須是一個有結(jié)果的表達式
a = 15
switch (a){
case 5:
console.log('表達式1')
case 6:
console.log('表達式2')
case 7:
console.log('表達式3')
case 10:
console.log('表達式4')
case 11:
console.log('表達式5')
break
default:
console.log('表達式6')
}
練習(xí)：用一個變量保存10分制的成績，根據(jù)成績打印情況：0 ~ 5(不及格)、6(及格)、7 ~ 8(良好)、9~10(優(yōu)秀)
scoers = 3
switch (scoers){
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)秀')
}
05.循環(huán)結(jié)構(gòu)
js中有for循環(huán)和while循環(huán)兩種
1.for循環(huán)
a.for-in
結(jié)構(gòu)：
for(變量 in 序列){
循環(huán)體
}
執(zhí)行過程和python一樣，但是變量取到的不是元素，而是下標/key(屬性名)
序列 - 字符串，數(shù)組，對象
str1 = 'abc'
for(x in str1){
console.log('=========')
console.log(x, str1[x])
}
arr1 = [1, 'aaa', true, 12.5]
for (index in arr1) {
console.log(index, arr1[index])
}
person1 = {name:'小明', age: 18, sex:'男'}
for (x in person1) {
//typeof() - 獲取值的類型
console.log(x, typeof(x))
console.log(person1[x])
}
b.c的for循環(huán)
結(jié)構(gòu)：
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)體；
...以此類推，直到表達式2的結(jié)果為false為止(循環(huán)結(jié)束)。
類似：
表達式1
while 表達式2：
循環(huán)體
表達式3
表達式1
for(;表達式2;){
循環(huán)體
表達式3
}
num = 1
sum1 = 0
while(num <= 100){
sum1 += num
num++
}
console.log(sum1)
for(num=1, sum1=0;num<=100;++num){
sum1 += num
}
console.log(sum1)
2.while循環(huán)
a.while循環(huán)
while(條件語句){
循環(huán)體
}
執(zhí)行過程和python一模一樣
b.do-while循環(huán)
do{
循環(huán)體
}while(條件語句)
區(qū)別：do-while的循環(huán)體至少會執(zhí)行一次
//1~100的和
num = 1
sum1 = 0
do{
sum1 += num
num++
}while (num<=100)
console.log(sum1)
06.函數(shù)
1.函數(shù)的聲明
function 函數(shù)名(參數(shù)列表){
函數(shù)體
}
js中的函數(shù)除了聲明的關(guān)鍵字不一樣，其他的都一樣
參數(shù)可以設(shè)置默認值，也可以通過關(guān)鍵字參數(shù)來調(diào)用函數(shù)
function sum(num1, num2=3){
console.log('求兩個數(shù)的和')
return num1 + num2
}
2.函數(shù)的調(diào)用
函數(shù)名(實參列表)
console.log(sum(10, 20))
console.log(sum(10))
console.log(sum(num1=12, num2=200))
js中所有的函數(shù)都有返回值，默認值是undefined
function func1(){
console.log('我是js函數(shù)')
}
re = func1()
console.log(re, typeof(re))
3.匿名函數(shù)(函數(shù)的字面量)
函數(shù)名 = function(參數(shù)列表){函數(shù)體}
func2 = function(a, b){
console.log(a, b)
return a * b
}
console.log(func2(3, 4))
funcs_arr = [func1, function(a){console.log(a)}]
funcs_arr[0]()
funcs_arr[1]('abc')
4.變量的作用域
a.全局變量：只要聲明在函數(shù)的外面的變量就是全局變量
b.局部變量
var1 = 1000 //這是一個全局變量
var var2 = 'abc' //這是一個全局變量
for(xxx in 'hello'){
}
function abc(){
var3 = 111 //這是一個全局變量
var4 = 222 //這是一個局部變量
console.log(var1, var2, xxx)
}
abc()
console.log(var3)
function func3(){
num3 = 4
}
func3()
num4 = 5
console.log(num3+num4)
07.字符串
1.字符串字面量
a.使用雙引號或者單引號括起來的字符集
b.除了普通字符以外還可以是轉(zhuǎn)移字符：\n, \t, \, ', "
c.\u4位16進制值對應(yīng)的Unicode編碼，\u4e00 - ——
str1 = '\\abc\n"123\''
str2 = "abc\"123\u4e00==="
console.log(str1, str2)
2.獲取字符
字符串[下標] - 獲取單個字符
下標 - 范圍是0 ~ 長度-1；
js中沒有切片語法([::])
str1 = 'hello js'
console.log(str1[1])
3.相關(guān)運算： +
NaN - js中一個特殊的值，類似undefined、null，用來表示一個不存在是數(shù)值。
支持字符串和其他任何數(shù)據(jù)相加，是將其他數(shù)據(jù)全部轉(zhuǎn)換成字符串，然后再拼接。
str2 = 'abc'+'123'
console.log(str2)
str2 = 'abc'+100
console.log(str2)
str2 = 'abc'*2
console.log(str2) // NaN
str2 = 'abc'+[1, 'abc', 2, '123']
console.log(str2)
補充：js中數(shù)據(jù)類型轉(zhuǎn)換:類型名()
num_str = String(123)
str_num = Number('a23.45')
console.log(num_str, str_num, typeof(num_str), typeof(str_num))
4.字符串長度
console.log('hello world'.length)
str3 = 'abc' // str3是String類型
str4 = new String('abc') //object
console.log(str3 == str4, str3 ===str4)
console.log(str3[1], str4[1])
5.字符串相關(guān)方法
function gary_print(aa){
console.log(aa)
}
gary_print('abc'.charAt(2))
gary_print(String.fromCharCode(97))
result = 'abcd12abc23hhh123'.replace(/\d+/g, '*')
gary_print(result)
for(index in result){
gary_print(index)
}
6.js中的數(shù)組只需要關(guān)注：
a.怎么獲取數(shù)組中的元素
b.數(shù)組對應(yīng)的方法
c.元素可以是任何類型
arr = [1, 'abc', true]
gary_print(arr)
nums = [1, 34, 67, 2, 344]
new_nums = nums.sort(function(a,b){return b-a})
gary_print(new_nums)
08.數(shù)組
輸出函數(shù)
function gary_print(aa){
console.log(aa)
}
1.數(shù)組 - 數(shù)組對象是使用單獨的變量名來存儲一系列的值
a.創(chuàng)建數(shù)組
var arr = [3, 'abc', true, [2,'ag']]
// var arr = new Array()
// arr[0] = 3
// arr[1] = 'abc'
// arr[2] = true
// arr[3] = [2, 'ag']
var num_arr = [1, 2, 56, 23, 376]
var str_arr = ['gary', 'ab', 'left', 'right']
b.輸出數(shù)組中的元素 - for...in
for (index in arr) {
gary_print(index) //直接遍歷數(shù)組，得到的是數(shù)組元素中的下標
gary_print(arr[index]) //只能通過索引值獲取數(shù)組中的元素
}
c.合并數(shù)組 - concat
gary_print(arr.concat(num_arr)) //[3, "abc", true, Array(2), 1, 2, 56, 23, 876] - 元素中有數(shù)組，合并后以Array(n)顯示
gary_print(arr.concat(num_arr, str_arr)) //[3, "abc", true, Array(2), 1, 2, 56, 23, 876, "ab", "gary", "left", "right"]
d.獲取數(shù)組的長度 - length
gary_print(arr.length) // 4 - 獲取數(shù)組的長度
gary_print(num_arr.indexOf(876))
e.join - 用數(shù)組的元素組成字符串
str1 = str_arr.join('*')
gary_print(str1) //數(shù)組中的元素合成一個字符串 - ab*gary*left*right
gary_print(str1[5]) //r
f.pop - 刪除數(shù)組中的最后一個元素
``
gary_print(arr.pop()) // [2, "ag"]
gary_print(arr) // [3, "abc", true]
###### g.push - 數(shù)組的末尾添加新的元素
``
gary_print(arr.push(89))
gary_print(arr) //[3, "abc", true, 89]
h.reverse - 將數(shù)組中的元素反向排序
str2 = str_arr.reverse()
gary_print(str2) //["right", "left", "ab", "gary"]
i.shift - 刪除數(shù)組中的第一個元素
``
arr1 = arr.shift()
gary_print(arr) //["abc", true, 89]
###### j.slice - 從數(shù)組中選擇元素
``
arr2 = str_arr.slice(1,4)
gary_print(arr2) // ["left", "ab", "gary"]
k.sort() - 數(shù)組排序，默認是按數(shù)組中每個元素中的字符一一比較，根據(jù)Unicode編碼值大小排序，類似python中的字符串排序方法。
gary_print(arr.sort()) //[89, "abc", true]
gary_print(num_arr.sort()) //[1, 2, 23, 376, 56]
gary_print(num_arr.sort(function(a,b){return a-b})) // [1, 2, 23, 56, 376] 升序- 如需按數(shù)字大小排序，需要一個判斷兩個數(shù)大小的函數(shù)
gary_print(num_arr.sort(function(a,b){return b-a})) //[376, 56, 23, 2, 1] 降序 - function(a,b){return b-a}：兩個數(shù)比較后，返回一個大于0的數(shù)
l.splice - 在數(shù)組的第二個元素添加一個元素
arr2 = ["abc", true, 89]
arr2.splice(2,0,"gary")
gary_print(arr2) //["abc", true, "gary", 89]
toString - 將素組轉(zhuǎn)換成字符串
str3 = arr2.toString()
gary_print(str3) //abc,true,gary,89
gary_print(str3[4]) // 4
unshift - 在數(shù)組開頭添加新元素
arr2.unshift(17)
gary_print(arr2) // [17, "abc", true, "gary", 89]
