1.javascript基礎語法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//那些老舊的實例可能會在 <script> 標簽中使用 type="text/javascript"。現在已經不必這樣做了。JavaScript 是所有現代瀏覽器以及 HTML5 中的默認腳本語言。
//1.注釋(和C語言注釋一樣)
//單行注釋：在注釋文字前加//
/*
多行注釋1
多行注釋2
*/
//2.標識符
//由字母、數字、下劃線和$符組成，數字不能開頭。（注意:$不輕易使用，在JQ有特殊的意義）
num = 23
_num = 100
//3.關鍵字
//for、if、var、while、func、true、false等....
//4.數據類型
//1）類型
//類型名首字母都是大寫的
// Number(數字)、String(字符串)、Boolean(布爾)、Array(數組)、Object(對象)
// a.Number - 包含所有的數字(包括整數和小數),例如: 100, 0.23, -23, 2e5
// b.String - 用雙引號或者單引號引起來的字符集, 支持轉義字符和編碼字符
// c.Boolean - 只有true和false兩個值，分別代表真和假
// d.Array - 相當于python中的列表, 用中括號括起來的多個元素。[12, 'abc', true, [1, 2, 3]]
// e.Object - 類似python中字典和對象的結合
//2)typeof函數
//3)類型名(數據) - 類型轉換
//parseFloat(數據) - 將數據轉換成浮點數
//parseInt(數據) - 將數據轉換成整數
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(數據) - 獲取數據對應的類型
console.log(2e5) //在控制臺打印，相當于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))
//5.語句
//一行一般情況下只寫一條語句,語句結束后可以有分號也可以沒有；如果一行有多條語句，語句之間必須有分號
//縮進無要求
//大小寫敏感
num1 = 100
num2 = 200
num3 = 300
num = 1000
NUM = 2000
console.log(num, NUM)
</script>
2. javascript變量
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//1.聲明變量的語法
/*
* 1)語法1:
* 變量名 = 值
* 2)語法2:
* var 變量名 / var 變量名 = 值
*
* 3)說明
* 變量名 - 標識符、不能是關鍵字; 采用駝峰式命名
* 聲明變量如果沒有給變量賦值(語法2才支持),變量的默認值是undefined
*/
num = 100
console.log(num)
var num2
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>
3. javascript運算符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//js支持數學運算符、比較運算符、邏輯運算符、賦值運算符、(位運算)
//1.數學運算符：+, -, *, /, %, ++,--
//+, -, *, /, %和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
// 支持表示范圍的連續寫法
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.復合運算和python一樣
//6.三目運算符 - 表達式?值1:值2
//判斷表達式的值是否為true,如果為true整個運算的結果是值1，否則是值2
age = 16
reslut = age>18?'成年':'未成年'
console.log(reslut)
</script>
4. javascript分之結構
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//js有if和switch兩種分之結構
//1.if分之
/*
1)結構1: if
js寫法:
if(條件語句){
滿足條件執行的代碼塊
}
python寫法:
if 條件語句:
滿足條件執行的代碼塊
2)結構2： if-else
js寫法:
if(條件語句){
滿足條件執行的代碼塊
}else{
不滿足條件執行的代碼塊
}
python寫法:
if 條件語句:
滿足條件執行的代碼塊
else:
不滿足條件執行的代碼塊
3)結構3：if-elif...else
js寫法:
if(條件語句1){
滿足條件1執行的代碼塊
}else if(條件語句2){
滿足條件2執行的代碼塊
}
...
python寫法:
if 條件語句1:
滿足條件1執行的代碼塊
elif 條件語句2:
滿足條件2執行的代碼塊
...
*/
//2.switch
/*
1)語法:
switch(表達式){
case 值1:
代碼塊1
case 值2:
代碼塊2
case 值3:
代碼塊3
...
default:
代碼塊N
}
2)執行過程
先計算表達式的結果，然后讓這個結果按順序從前往后和每個case后面的值進行比較。
如果哪個case后面的值和表達式的結果相等，就將這個case作為入口，依次后面所有代碼塊，
直到執行完最后一個代碼塊或者遇到break為止。
如果每個case后面的值都和表達式的結果不相等，直接執行default后面的代碼塊（default可以不寫）
*/
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')
}
week = 1
switch(week){
case 1:
console.log('周一')
break
case 2:
console.log('周二')
break
case 3:
console.log('周三')
break
case 4:
console.log('周四')
break
case 5:
console.log('周五')
break
case 6:
console.log('周六')
break
case 7:
console.log('周日')
break
}
grade = 2
switch(grade){
case 0:
console.log('不及格')
break
case 1:
case 2:
case 3:
console.log('及格')
break
case 4:
case 5:
console.log('優秀')
break
}
</script>
5. 循環結構
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//js中循環分為for循環和while循環
//1.for循環
/*
1).for-in循環
for(變量 in 序列){
循環體
}
讓變量依次獲取序列中元素的下標(下標/屬性名),一個一個取，取完為止，每取一個值執行一次循環體
*/
str1 = 'abc'
for(x in str1){
console.log(x, str1[x])
}
//2)C中的for循環
/*
for(表達式1;表達式2;表達式3){
循環體
}
執行過程: 先執行表達式1，再判斷表達式2的值是否為true;如果為true執行循環體，執行完循環體再執行表達式3；
再判斷表達式2是否為true,如果為true執行循環體，執行完循環體再執行表達式3；
再判斷表達式2是否為true,如果為true執行循環體，執行完循環體再執行表達式3；
依此類推，直到表達式2的結果為false，循環結束
相當于python中的以下結構:
表達式1
while 表達式2:
循環體
表達式3
*/
sum1 = 0
for(num=1;num<=100;num++){
sum1 += num
}
console.log(sum1)
//2.while循環
/*
1)while循環
while(條件語句){
循環體
}
執行過程和python一樣
2)do-while循環
do{
循環體
}while(條件語句)
執行過程: 執行循環體，判斷條件語句是否為true,為true再執行循環體
執行完循環體又判斷條件語句是否為true
以此類推，直到條件語句為false循環結束
循環體
while(條件語句){
循環體
}
*/
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)
//練習: 打印所有的水仙花數
//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>
6. 函數
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="sum()"></button>
</body>
</html>
<script type="text/javascript">
/*
1.語法
function 函數名(參數列表){
函數體
}
*/
function sum(num1, num2=20){
console.log(num1, num2, num1+num2)
}
//位置參數有效
sum(10, 30)
//關鍵參數不報錯，但是順序無效
sum(num1=2, num2=4) // 2 4 6
sum(num2=9, num1=8) // 9 8 17
//參數可以設置默認值(有默認值的參數要在后面)
sum(10)
function sum1(num1=10, num2){
console.log(num1, num2, num1+num2)
}
sum1(20) // 20 undefined NaN(無效數字)
//不支持不定長參數
// function sum2(*nums){
// console.log(nums)
// }
// sum2(1, 3)
function sum3(num1, num2){
return num1+num2
}
console.log(sum3(23, 45))
//聲明函數其實就是聲明一個類型是Function的變量
x = sum3
console.log(typeof(x))
console.log(x(90, 9))
/*
2.匿名函數
function (參數列表){
函數體
}
*/
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>
7. 字符串
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//1.字符串
//單引號或者雙引號引起來的字符集，支持轉義字符和編碼字符
str1 = 'hello world'
str2 = 'hello\t\'world\''
//2.獲取字符
//字符串[下標]
//注意: 1)下標只有正值，沒有負的; 2)下標越界不會報錯，獲取到的值是undefined
console.log(str1[0])
console.log(str1[-1])
//js中不支持[]對應的切片語法，但是有相應的方法
//3.相關操作
//1)加法運算
//支持字符串和任何數據相加, 如果另外一個數據不是字符串就先轉換成字符串再進行拼接操作
console.log('abc'+'hello') //abchello
console.log('abc'+123) // abc123
//2)比較運算: 和python一樣
//3)字符串長度: 字符串.length
console.log(str2.length)
//4.相關方法
str2 = new String('hello world')
console.log(str2)
//1)字符串.charCodeAt(下標)
console.log(str2.charCodeAt(0))
//2)字符串.match(正則表達式),相當于python中的re.match
re = /\d{3}[a-z]{3}/
console.log('234abc====='.match(re))
//3)字符串.slice(開始下標,結束下標)
console.log(str2.slice(0, 3))
</script>
8. 數組
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//js中的數組相當于python中的列表
//1.查
arr1 = [10, 2, 30, 4, 5]
//1）獲取單個元素: 數組[下標]
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)數組.push(元素) - 在數組的最后添加元素
arr1.push(100)
console.log(arr1)
//2)數組.splice(下標,0,元素) - 在指定的下標前插入指定的元素
//數組.splice(下標,0,元素1,元素2,...) - 在指定的下標前插入多個元素
arr1 = [1, 2, 3, 6, 7,8]
arr1.splice(3,0,4,5)
console.log(arr1)
//3.刪
console.log('=============刪除==================')
//1)數組.pop() - 取出數組中的最后一個元素
re = arr1.pop()
console.log(arr1, re)
//2)數組.shift() - 取出數組中第一個元素
re = arr1.shift()
console.log(arr1, re)
//3)數組.splice(開始刪除的下標,刪除的個數)
arr1 = [10, 30, 20, 40]
arr1.splice(1,2)
console.log(arr1)
//4.改
//數組[下標] = 值
arr1[0] = 200
console.log(arr1)
//5.排序
//sort(函數對象)
//函數對象 - 函數，有兩個參數(代表數組中的兩個元素), 返回值代表排序方法
console.log('=================排序==============')
nums = [90 ,23, 56, 7, 89, 70]
//數組元素從大到小排序
nums.sort(function(a,b){return b-a})
console.log(nums)
//數組元素從小到大排序
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}
]
//將數組元素按照元素的age屬性從下到大排序
// students.sort(function(a,b){return a.age - b.age})
// console.log(students)
//將數組元素按照元素的score屬性從大到小排序
students.sort(function(a,b){return b.score - a.score})
console.log(students)
</script>
9. 對象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//1.什么是對象
//和python類的對象一樣，主要由對象屬性和對象方法組成
//2.創建對象
//1)對象值
obj1 = {
name: '余婷',
age: 18,
gender:'女'
}
console.log(typeof(obj1), obj1)
//2)new 類型()
obj2 = new Object()
console.log(typeof(obj2), obj2)
obj2.name = '小明'
console.log(obj2)
//3.構造方法 - 一個用來創建對象的函數
//1)函數名相當于類名，首字母要大寫
//2)函數的功能是通過this添加對象屬性和對象方法（這兒的this就相當于self）
//3)返回值是this
function Person(name, age, gender='男'){
// 通過new的方式調用, this：Person {}
// 直接調用, 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.使用構造方法創建對象
//對象 = new 構造方法()
p1 = new Person('小花', 20, '女')
p2 = new Person('小明', 35)
//5.通過對象使用對象屬性和調用對象方法
p1.name = '小花花'
console.log(p1.name, p1['name'])
p1.eat('面條')
p2.eat('面包')
//6.添加/修改屬性
//對象.屬性 = 值
p1.height = 160
console.log(p1, p2)
function func1(){
console.log('普通函數')
console.log(this)
}
// func1()
window.func1()
num = 100 // window.num=100
console.log(num, window.num)
</script>
