一、js基礎(chǔ)語法
<script type="text/javascript">
//1.注釋（和c的注釋一樣）
//單行注釋
/*
多行注釋
多行注釋
多行注釋
*/
//
//2.標(biāo)識符
//標(biāo)識符就是用來命名的(給變量命名，函數(shù)命名，對象命名)
//js中要求標(biāo)識符是由字符、數(shù)字、下劃線和$符組成，數(shù)字不能開頭
//js中大小寫敏感
var abc, ab12, hj_23, hj$
//console.log() --> 在控制臺(tái)打印括號中的內(nèi)容
//console.log(abc)
//3.常用數(shù)據(jù)類型
/*
a.數(shù)字類型(Number)、布爾(Boolean)、字符串(String)、
數(shù)組(Array)、對象(Object)、function(函數(shù))等
數(shù)字類型(Number)：包含所有的數(shù)字(整數(shù)和小數(shù)),支持科學(xué)計(jì)數(shù)法,不支持虛數(shù)
*/
100
13.9
-200
-12.34
console.log(2e2)
//布爾(Boolean)：true和false
true
false
//字符串(String)：用雙引號或者單引號括起來的
'abc'
"abc"
//數(shù)組(Array)：相當(dāng)于python中列表
[12, 23, 'abc', [1, 2]]
//對象(Object): python中對象和字典的結(jié)合
var p1 = {
name:'余婷',
age:18,
sex:'女'
}
//Function(函數(shù))：相當(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>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
二、變量
<script type="text/javascript">
/*
語法：
var 變量名
變量名 = 值
說明：
var - 是js關(guān)鍵字，聲明變量變量的時(shí)候的用。
var可以省略，省略的時(shí)候變量名后面必須賦值。
不省略的時(shí)候變量名后可以賦值，也可以不賦值，
不賦值的時(shí)候默認(rèn)值是undefined
變量名 - 標(biāo)識符，不能是關(guān)鍵字。駝峰式命名規(guī)范
*/
//聲明一個(gè)變量
var name1
console.log(name1)
name2 = '小明'
console.log(name2)
var name3 = '小花'
console.log(name3)
//同時(shí)聲明多個(gè)變量
var age=18, sex, score=100
console.log(age, sex, score)
age1 = 10, sex1 = '男'
console.log(sex1, age1)
//變量中的值: 可以賦任何其他類型的值
age = '老年'
console.log(age)
//注意：不支持這種寫法
// x, y = 10, 20
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
三、運(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, 20*10, 5/2, 5%2, 5**2)
//++(自加1)，--(自減1)
//變量++, ++變量, 變量--, --變量 (注意：變量必須要有值)
//注意賦值的時(shí)候，++和--寫在變量的前面和后面對應(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++ //相等于：number2=number1; number1+=1
console.log(number1, number2) // 2, 1
var number11 = 1, number22
number22 = ++number11 //相等于: 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
console.log(5!='5') //false
console.log(5!=='5') //true
// 3.邏輯運(yùn)算符:&&(與)、||(或)、!(非)
//運(yùn)算規(guī)則和python中的and,or,not一模一樣
// 4.賦值運(yùn)算符：=， +=， -=， *=， /=, %=
//和python一樣
// 5.位運(yùn)算符：&，|，^, ~, >>, <<
// & - 110 & 101 --> 100
// | - 110 | 101 --> 111
// ^ - 110 ^ 101 --> 011
// ~ - ~110 --> 001
//>> - num >> n --> num // (2**n)
//<< - num << n --> num * (2**n)
//和python一樣
console.log(1&2, 1|2, 1^2, ~1, 2>>1, 2<<1)
//6.復(fù)合運(yùn)算：數(shù)學(xué)>比較>邏輯>賦值
//可以通過加()來改變運(yùn)算順序
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
四、分支結(jié)構(gòu)
<script type="text/javascript">
//js中的分之結(jié)構(gòu)有兩個(gè)，分別是if語句和switch語句
/*
1.if語句
a.if結(jié)構(gòu)：
if(條件語句){
代碼段
}
說明：
if - 是關(guān)鍵字
(){} - 固定寫法
執(zhí)行過程:判斷條件語句是否為true,
為true就執(zhí)行{}中的代碼（不管縮進(jìn)問題）
*/
number = 110
if(number % 2 == 0){
console.log('是偶數(shù)')
console.log('=======')
}
console.log('!!!!!!')
/*
b.if-else結(jié)構(gòu):
if(條件語句){
代碼段1
}else{
代碼段2
}
*/
number2 = 11
if(number2%2==0){
console.log(number2,'是偶數(shù)')
}else{
console.log(number2, '是奇數(shù)')
}
/*
c.if- else if - else結(jié)構(gòu)
if(條件語句1){
代碼段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
...
default:
代碼3
}
執(zhí)行過程：先計(jì)算表達(dá)式的值，然后從上往下一一和
case后面的值進(jìn)行比較，找到第一個(gè)和表達(dá)式相等的case;
然后將這個(gè)case作為如果，依次執(zhí)行后邊的所有的代碼段，
直到執(zhí)行完或者遇到break為止。
如果沒有哪個(gè)case的值和表達(dá)式的值一樣，
就直接執(zhí)行default后面的代碼段
default可以省略
*/
num = 100
switch(num){
case 10:
console.log('10')
case 1:
console.log('1')
break
case 2:
console.log('2')
case 11:
console.log('11')
default:
console.log('default')
}
//練習(xí)：從服務(wù)器獲取到的星期對應(yīng)的值是0-6,
//在程序中對應(yīng)打印出其對應(yīng)的星期值：周1-周天
week = 6
switch(week){
case 0:
console.log('周一')
break
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
}
//練習(xí)2:有一個(gè)變量存績點(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('成績有誤！')
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
五、循環(huán)結(jié)構(gòu)
<script type="text/javascript">
//js中的循環(huán)有for循環(huán)和while循環(huán)
/*
1.for循環(huán)
a.for-in：和python的for循環(huán)的執(zhí)行過程一樣
for(變量 in 序列){
循環(huán)體
}
注意：取出來的是元素的下標(biāo)或者key(屬性名)
序列可以是字符串，數(shù)組和對象
*/
str1 = 'abc'
for(x in str1){
console.log(str1[x])
}
arr = [10, 20, 30]
for (x in arr) {
console.log(x, arr[x])
}
object1 = {name:'小明', age:18}
for (x in object1) {
console.log(x, object1[x])
}
/*
b.C的for循環(huán)結(jié)構(gòu)：
for(語句1；表達(dá)式2；語句3){
循環(huán)體
}
執(zhí)行過程：先執(zhí)行語句1，
再判斷表達(dá)式2的結(jié)果是否為true，為true就執(zhí)行循環(huán)體，
執(zhí)行完循環(huán)體再執(zhí)行語句3；
再判斷表達(dá)式2的結(jié)果是否為true，為true就執(zhí)行循環(huán)體，
執(zhí)行完循環(huán)體再執(zhí)行語句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+...+100
for(num1=1, sum1=0;num1<=100;num1 += 1){
// console.log(num)
sum1 += num1
}
console.log(sum1)
//死循環(huán)
// for(;true;){
//
// }
// while(true){
//
// }
/*
2.while循環(huán)
a.while循環(huán)：和python的while循環(huán)一樣
while(條件語句){
循環(huán)體
}
b.do-while循環(huán)
do{
循環(huán)體
}while(條件語句)
執(zhí)行過程：先執(zhí)行循環(huán)體，然后再判斷條件語句是否為true；
為true執(zhí)行循環(huán)體，執(zhí)行完又判斷條件語句是否為true；
以此類推，直到條件語句的結(jié)果為false，循環(huán)就結(jié)束
value = input('數(shù)字：')
while value !='0':
value = input('數(shù)字')
do{
value = input('數(shù)字：')
}while(value !='0')
*/
/*
3.break和continue
和python一樣
*/
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
六、函數(shù)
<script type="text/javascript">
//函數(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ù)名 = function (參數(shù)列表){
函數(shù)體
retrun 返回值
}
*/
function sum11(num1=1, num2=2){
console.log('求兩個(gè)數(shù)的和',num1, num2)
return num1+num2
}
var mul = function (num1, num2){
console.log('求兩個(gè)數(shù)的乘積',num1, num2)
return num1*num2
}
/*
2.函數(shù)的調(diào)用：
函數(shù)名(實(shí)參列表)
調(diào)用的時(shí)候，保證每個(gè)參數(shù)都有值
只能通過位置參數(shù)傳參
js中不支持不定長參數(shù)
*/
sum11(10, 20)
console.log(sum11())
console.log(mul(10, 4))
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
七、字符串
<script type="text/javascript">
/*
字符串: 由單引號或者雙引號括起來的
1.轉(zhuǎn)義字符: 和python一樣
2.字符串長度: 字符串.length
3.獲取單個(gè)字符：字符串[下標(biāo)]
注意: 下標(biāo)取值范圍是0 ~ 長度-1；超出范圍取到的是undefined;
js中沒有切片語法
*/
//轉(zhuǎn)義字符
console.log('abc\n123')
console.log('\tabc\'123')
//字符串長度
console.log('123abc'.length)
//獲取單個(gè)字符
str1 = 'hello world'
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一樣，還是比字符編碼值的大小
*/
console.log('abc'+'hnm')
console.log('abc'+100, 'abc'+true, 'abc'+[1,2,3])
// str1 = new String([10, 20, 30])
// console.log(str1)
// console.log('abc'*3)
// NaN -> 是數(shù)字類型中的一個(gè)特殊值，表示一個(gè)不存在的數(shù)字
// console.log(10/0) // Infinity -> 無窮大
console.log('abc' > 'abaaaa')
/*
5. 相關(guān)方法(看菜鳥的表)
match(正則表達(dá)式) - 根據(jù)正則表達(dá)式匹配結(jié)果。
js中的正則表達(dá)式是寫在//之間的
*/
str1 = 'abc23hjs89jskk834jsdfj78hfjh9sdf9'
result = str1.match(/[a-z]+/)
console.log(result[0])
result = str1.replace(/\d/, '*')
console.log(result)
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
八、數(shù)組
<script type="text/javascript">
//數(shù)組就是python中的列表
/*
1.數(shù)組是有序，可變的,里面的元素可以是任意類型的數(shù)據(jù)
2.增刪改查
*/
/*a.查(獲取數(shù)組中的元素) - 不支持切片
數(shù)組[下標(biāo)]
數(shù)組.slice(開始下標(biāo), 結(jié)束下標(biāo)) - 切片
*/
arr1 = [1, 2, 3, 'abc']
console.log(arr1[3])
//獲取數(shù)組的長度
console.log(arr1.length)
result = arr1.slice(0, 2)
console.log(result, arr1)
/*
b.增(添加元素)
數(shù)組.push(元素) - 將元素添加到數(shù)組的最后
*/
arr1.push('hello')
console.log(arr1)
/*
c.刪(刪除元素)
數(shù)組.pop() - 刪除最后一個(gè)元素
數(shù)組.splice(開始刪除的下標(biāo), 刪除的個(gè)數(shù)) - 從數(shù)組
指定的下標(biāo)開始刪除指定個(gè)數(shù)元素
*/
arr1.pop()
console.log(arr1)
arr1.splice(2, 1)
console.log(arr1)
/*
d.改（修改元素的值）
數(shù)組[下標(biāo)] = 新值 - 修改指定下標(biāo)的元素
數(shù)組.splice(開始下標(biāo),個(gè)數(shù), 多個(gè)其他參數(shù)) - 用其他
參數(shù)替換開始下標(biāo)開始后的指定個(gè)數(shù)個(gè)元素
*/
arr1 = [1, 2, 3, 4, 'abc']
arr1[0] = 10
console.log(arr1)
arr1.splice(1,2, 'a','b', 'c')
console.log(arr1)
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
九、對象
<script type="text/javascript">
//js中沒有python的類，只有對象和構(gòu)造方法
/*1.對象的字面量
對象名 = {屬性名:屬性值, 屬性名2: 屬性值2...}
*/
p1 = {
//對象屬性
name:'xiaoming',
age:30,
tel:'187382833',
//對象方法
eat:function (){
console.log('吃飯')
}
}
/*
2.使用對象屬性
對象[屬性名]
對象.屬性
*/
console.log(p1['name'], p1.name)
p1.eat()
/*
3.構(gòu)造方法 - 用來創(chuàng)建對象的
function 類名(參數(shù)列表){
this.屬性1 = 屬性值1
this.屬性2 = 屬性值2
...
return this //這句話必須寫
}
這兒的this類似python中的self，表示當(dāng)前對象
*/
function Person(name1, age1){
//對象屬性
this.name = name1
this.age = age1
this.tel = ''
this.sex = '男'
//對象方法
this.eat = function (food){
console.log(this.name+'在吃'+food)
}
return this
}
p2 = Person('小明', 18)
p2.tel = '1727839923'
p2.eat('面條')
p3 = Person('小花', 20)
p3.sex = '女'
p3.eat('面包')
//聲明一個(gè)狗的對象對應(yīng)的構(gòu)造方法，擁有屬性，顏色，年齡，品種；
//擁有方法：吃和叫
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
十、index
<!--
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è)對話框）
內(nèi)聯(lián)的js：寫在標(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屬性的值為js文件地址來導(dǎo)入
3.js能做什么事情
a. 可以修改標(biāo)簽中的內(nèi)容
b. 可以修改標(biāo)簽的樣式
3. 插入html代碼
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>js基礎(chǔ)</title>
<!--內(nèi)部js-->
<!--<script type="text/javascript">
window.alert('script標(biāo)簽中的js')
</script>-->
<!--外部js-->
<!--<script type="text/javascript" src="js/index.js">
</script>-->
</head>
<body>
<!--內(nèi)聯(lián)的js-->
<!--<button onclick="window.alert('按鈕被點(diǎn)了！')">
點(diǎn)我啊</button>-->
<!--插入html代碼-->
<script type="text/javascript">
var num = 11
if(num % 2 == 0){
document.write('<p>插入的段落</p>')
}
for (var x = 0; x < 50; x++) {
document.write('<a>超鏈接</a>')
}
</script>
<p id="p1">python基礎(chǔ)</p>
<!--修改標(biāo)簽中的內(nèi)容-->
<button onclick="document.getElementById('p1').innerHTML =
'js基礎(chǔ)'">修改內(nèi)容</button>
<!--修改標(biāo)簽的樣式-->
<button onclick="document.getElementById('p1').style.color =
'red'">修改樣式</button>
</body>
</html>
圖片內(nèi)容
luffy.jpg
