1.什么是js
js是javascript的縮寫,是web標準中的行為標準.負責網頁中變化的部分
2.在哪兒寫js代碼
a.寫標簽的事件相關屬性中名,例如按鈕的onvliced屬性
b.寫在script標簽中(將js代碼作為script標簽的內容)
注意,script標簽理論上可以放在html中的任何位置,但是一般放在head或者body中
3js能做什么
a.在網頁的指定位置插入標簽
b.修改網頁中標簽的內容
c.修改標簽樣式
4怎么寫js代碼
javasscript是一門編程語言,和python是一樣是一樣動態(tài)語言也是腳本語言.但是和java沒有關系
補充:
window.alert(信息)
- js代碼,在瀏覽器上彈出一個對話框,對話框中顯示指定信息
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.插入內容-->
<script type="text/javascript">
arr = ['海賊王', '火影', '魁拔', '一拳超人']
for (index in arr){
mesaage = '<h1>'+arr[index]+'</h1>'
//在網頁中添加內容
document.write(mesaage)
}
</script>
<!--b.修改標簽內容-->
<p id="p1">我是段落</p>
<button onclick="document.getElementById('p1').innerHTML='我是javascript!'">修改內容</button>
<!--c.修改標簽的樣式-->
<button onclick="document.getElementById('p1').style = 'color:red;font-size:30px;'">修改樣式</button>
<img id="img1" src="img/luffy.jpg"/>
<button onclick="document.getElementById('img1').src = 'img/luffy4.jpg'">修改圖片</button>
</body>
</html>
1基礎語法
1.控制臺輸出
console.log(100)
console.log(abc,200)
2.注釋 - 和 C一樣
單行注釋 //
多行注釋 /*
3標識符
由字母數字和下劃線和$組成,數字不能開頭.
a = 10
a20 = 100
a_10 = 200
$12S = 23
12abc = 100 報錯
as^ = 200 報錯
4.行和縮進
從語法角度看,js代碼怎么換行和縮進都無所謂,js中通過{}來確定代碼塊
常見的數據類型:數字,布爾,字符串,數組,對象,函數.
數字(Number) - 包含所有的數字,包括整數和小數
布爾(Boolean) - 只有兩個值 true和 false
字符串(String) - 使用單引號或者雙引號引起來的字符集"abc" 'an'
數組(Array) - 相當于python中的列表[12,'abs',true]
對象(Object) - 相當于python中的字典和對象
函數(Function) - 相當于python中的函數
2變量的聲明
語法1: 變量名 = 值
變量名 - 標識符,不能是關鍵字;
駝峰式命名(第一個單詞首字母小寫,后面每個單詞大寫);
語法2:var 變量名 = 值 或 var變量名
var- - 聲明變量的關鍵字
區(qū)別:聲明的時候加var,變量可以不用賦值,默認是undefined;不加var就必須賦值
補充:js中有兩個特殊的值 - undefined(沒有,空) 和 null(清空)
3運算符
1.數學運算符: + - * / % ++ --
前面四個和python一模一樣
++ --都是單目運算符,使用方式:變量++/--, ++/--變量
++ 自加1運算讓變量本身的值加1 (放前面是先自加 放后面是后自加)
-- 自檢1運算
2.比較運算符:< > == != >= <= === !==
結果是布爾值
比較大小的和python一樣
a. ==:判斷值是否相等
b. ===:判斷值和類型是否完全相等,相當于python中的==.!==相當于python中的!=.
3.邏輯運算符:&&邏輯與 ||邏輯或 !邏輯非
運算規(guī)則和使用方式和python的邏輯一模一樣
4.賦值運算符: = += -= *= /= %=
和python一模一樣
5.三目運算符 ?
語法:
條件語句 值1:值2 判斷條件語句的值是否為true,為true整個表達式的結果是值1,為false,結果是值2.
age = 16
is_man = age>=18 ? '成年':'未成年'
6運算順序
數學>比較>邏輯>賦值
如果有,括號里面的
4分之結構
js的分之結構有兩種 : if 和switch
1.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
}
2.switch語句
a.結構:
switch(表達式){
case值1:
代碼段1
case值2:
代碼段2
...
default:
代碼段3
}
b.執(zhí)行過程:
使用表達式的值依次和后面每個case后面的值進行比較，看是否相等。
找到第一個和表達式的值相等的case,將這個case作為入口，依次執(zhí)行后面所有的代碼，
直到執(zhí)行完成或者遇到break為止。如果每個case的值都和表達式的值不相等，
就執(zhí)行default后面的代碼
注意：case后面必須是一個有結果的表達式
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')
}
5
js中有for循環(huán)和while循環(huán)兩種
1.for循環(huán)
a.for - in
結構:
for(變量 in 序列){
循環(huán)體
}
執(zhí)行過程和python一樣,但是變量取到的不是元素,而是下標/key(屬性名)
序列 - 字符串,數組,對象
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)
結構：
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的結果為false為止(循環(huán)結束)
表達式1
while(表達式2){
循環(huán)體
表達式3
}
表達式1
for(;表達式2;){
循環(huán)體
表達式3
}
*/
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í)行一次
6函數
1.函數的聲明
function 函數名(參數列表){
函數體
}
js中的函數除了聲明的關鍵字不一樣,其他都一樣
參數可以設置默認值,也可以通過關鍵字參數來調用函數
function sum(num1, num2=3){
console.log('求兩個數的和')
return num1+num2
}
2.函數的調用
函數名(實參列表)
console.log(sum(10, 20))
js中所有的函數多有返回值,默認是undefined
``
function func1(){
console.log('我是js函數')
}
re = func1()
console.log(re)
##3.匿名函數(函數的字面量)
函數名 = function(參數列表){函數體}
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.全局變量:只要聲明在函數外面的變量就是全局變量;在函數中以'變量名=值'的形式聲明的變量也是全局的
b.局部變量:以var關鍵字聲明在函數中的變量,才是局部變量
var1 = 1000 //這是一個全局變量
var var2 = 'abc' //這是一個全局變量
for(xxx in 'hello'){
}
function abc(){
var2 = 'abcabc'
var3 = 111 //這個是一個全局變量
var var4 = 222 //這是一個局部變量
console.log(var1, var2, xxx)
}
abc()
console.log(var3)
console.log(var2)
```
