- 1. 初試JS代碼
- 2. js基本語法
- 3. 字面量和變量
- 4. 標(biāo)識(shí)符
- 5. 數(shù)據(jù)類型
- 6. 強(qiáng)制數(shù)據(jù)轉(zhuǎn)換
- 7. 運(yùn)算符
- 8. 自增和自減
- 9. 邏輯運(yùn)算符
- 10 賦值運(yùn)算符
- 11 . 關(guān)系運(yùn)算符
- 13. 相等運(yùn)算符
- 14. 再談數(shù)值類型轉(zhuǎn)換
1. 初試JS代碼
- 就如css代碼,需要寫在style標(biāo)簽中,js代碼需要編寫在特定的標(biāo)簽中,-----head中的script標(biāo)簽中
<head>
<!-- js代碼寫在內(nèi)部的scrip標(biāo)簽中 -->
<script>
/*控制瀏覽器彈出一個(gè)警告框*/
alert('這是一個(gè)瀏覽器中的一個(gè)警告框!!!!');
// 讓計(jì)算機(jī)在頁面中輸出一個(gè)內(nèi)容
document.write('這是在瀏覽器頁面中顯示的內(nèi)容');
// 向控制臺(tái)輸出一個(gè)內(nèi)容
console.log('這是控制臺(tái)中輸出的內(nèi)容');
</script>
<!-- 引入外部js代碼 -->
<script type = 'text/javascrip' src = 'js/script.js'>
<!-- -->
</script>
</head>
<body>
<!-- 當(dāng)我們把js代碼編寫到標(biāo)簽的onclick屬性中當(dāng)我們點(diǎn)擊按鈕時(shí),js代碼才會(huì)執(zhí)行
雖然可以寫在標(biāo)簽的屬性中,但是他們屬于結(jié)構(gòu)與行為耦合闪唆,不方便維護(hù)盅粪,不推薦使用
-->
<button oncick = "alert('點(diǎn)點(diǎn)');">點(diǎn)擊一下</button>
<!-- 可以將js代碼寫在超鏈接的href屬性中,這樣當(dāng)點(diǎn)擊超鏈接時(shí)悄蕾,會(huì)執(zhí)行js代碼 -->
<a herf = "javascrip:alert('讓你點(diǎn)你就點(diǎn)!!!!');">驚喜</a>
</body>
注意 script標(biāo)簽一旦用于引入外部文件了票顾,就不能再編寫代碼了础浮,即使編寫了瀏覽器也會(huì)忽略
- 如果需要?jiǎng)t可以再創(chuàng)建一個(gè)新的script標(biāo)簽用于編寫內(nèi)部代碼
2. js基本語法
2.1 注釋
- 多行注釋----/**/
- 注釋中的內(nèi)容不會(huì)被執(zhí)行,但是可以在源代碼中查看,要養(yǎng)成良好的編寫注釋的習(xí)慣奠骄,也可以通過注釋來對(duì)代碼進(jìn)行一些簡(jiǎn)單的調(diào)試
- 單行注釋----//
// alert("hello");
// document.write("hello");
console.log("hello");//該語句用來在控制臺(tái)輸出一個(gè)日志
2.2 大小寫
JS中嚴(yán)格區(qū)分大小寫
2.3 語法結(jié)尾
- JS中每一條語句以分號(hào)(;)結(jié)尾
- 如果不寫分號(hào)豆同,瀏覽器會(huì)自動(dòng)添加,但是會(huì)消耗一些系統(tǒng)資源含鳞,
- 而且有些時(shí)候影锈,瀏覽器會(huì)加錯(cuò)分號(hào),所以在開發(fā)中分號(hào)必須寫
2.4 空格和換行
JS中會(huì)忽略多個(gè)空格和換行蝉绷,所以我們可以利用空格和換行對(duì)代碼進(jìn)行格式化
3. 字面量和變量
3.1 字面量----常量
- 都是一些不可改變的值,可以直接使用,但一般不會(huì)直接使用
- 比如 :1 2 3 4 5 "hello"
3.2 變量
- 變量可以用來保存字面量鸭廷,而且變量的值是可以任意改變的
- 變量更加方便我們使用,所以在開發(fā)中都是通過變量去保存一個(gè)字面量熔吗,而很少直接使用字面量,可以通過變量對(duì)字面量進(jìn)行描述
3.3 聲明變量
- var
var a = 123;
var age = 80;
console.log(age);
console.log(10);
4. 標(biāo)識(shí)符
- 標(biāo)識(shí)符:在JS中所有的可以由我們自主命名的都可以稱為是標(biāo)識(shí)符
- 例如:變量名辆床、函數(shù)名、屬性名都屬于標(biāo)識(shí)符
- 命名一個(gè)標(biāo)識(shí)符時(shí)需要遵守如下的規(guī)則:
- 標(biāo)識(shí)符中可以含有字母桅狠、數(shù)字讼载、_、$
- 標(biāo)識(shí)符不能以數(shù)字開頭
- 標(biāo)識(shí)符不能是ES中的關(guān)鍵字或保留字
- 標(biāo)識(shí)符一般都采用駝峰命名法
- 首字母小寫垂攘,每個(gè)單詞的開頭字母大寫维雇,其余字母小寫
helloWorld xxxYyyZzz- JS底層保存標(biāo)識(shí)符時(shí)實(shí)際上是采用的Unicode編碼,所以理論上講晒他,所有的utf-8中含有的內(nèi)容都可以作為標(biāo)識(shí)符
- 首字母小寫垂攘,每個(gè)單詞的開頭字母大寫维雇,其余字母小寫
5. 數(shù)據(jù)類型
- String Number Boolean Null Undefined屬于基本數(shù)據(jù)類型
- Object屬于引用數(shù)據(jù)類型
5.1 String 字符串
- 字符串的使用
- 在JS中字符串需要使用引號(hào)引起來
- 使用雙引號(hào)或單引號(hào)都可以吱型,但是不要混著用
- 引號(hào)不能嵌套,雙引號(hào)不能放雙引號(hào)陨仅,單引號(hào)不能放單引號(hào)
- 轉(zhuǎn)義字符----\
5.2 Number 數(shù)值
在JS中所有的數(shù)值都是Number類型津滞,包括整數(shù)和浮點(diǎn)數(shù)(小數(shù))
-
最大值
- Number.MAX_VALUE
- 1.7976931348623157e+308
- Number.MAX_VALUE
-
最小值
- Number.MIN_VALUE 大于0的最小值
- 5e-324
- Number.MIN_VALUE 大于0的最小值
-
超出最大最小值范圍:
- 如果使用Number表示的數(shù)字超過了最大值,則會(huì)返回一個(gè)
- Infinity 表示正無窮
-
-Infinity 表示負(fù)無窮
- 使用typeof檢查Infinity也會(huì)返回number
-
NaN 是一個(gè)特殊的數(shù)字灼伤,表示Not A Number,JS中當(dāng)對(duì)數(shù)值進(jìn)行計(jì)算時(shí)沒有結(jié)果返回
- 使用typeof檢查一個(gè)NaN也會(huì)返回number
- 如果使用Number表示的數(shù)字超過了最大值,則會(huì)返回一個(gè)
注意:如果使用JS進(jìn)行浮點(diǎn)運(yùn)算触徐,可能得到一個(gè)不精確的結(jié)果,所以千萬不要使用JS進(jìn)行對(duì)精確度要求比較高的運(yùn)算
5.3 Boolean 布爾值
- Boolean 布爾值主,要用來做邏輯判斷
- true
- 表示真
- false
- 表示假
- true
- 使用typeof檢查一個(gè)布爾值時(shí),會(huì)返回boolean
5.4 Null 空值
Null(空值)類型的值只有一個(gè)狐赡,就是null
null這個(gè)值專門用來表示一個(gè)為空的對(duì)象
使用typeof檢查一個(gè)null值時(shí)撞鹉,會(huì)返回object
5.5 Undefined 未定義
Undefined(未定義)類型的值只有一個(gè),就undefind
- 當(dāng)聲明一個(gè)變量颖侄,但是并不給變量賦值時(shí)鸟雏,它的值就是undefined
- 使用typeof檢查一個(gè)undefined時(shí)也會(huì)返回undefined
5.6 Object 對(duì)象
除了String Number Boolean Null Undefined屬于基本數(shù)據(jù)類型之外的數(shù)據(jù)類型稱之為Object
6. 強(qiáng)制數(shù)據(jù)轉(zhuǎn)換
- 指將一個(gè)數(shù)據(jù)類型強(qiáng)制轉(zhuǎn)換為其他的數(shù)據(jù)類型
- 類型轉(zhuǎn)換主要指,將其他的數(shù)據(jù)類型览祖,轉(zhuǎn)換為String Number Boolean
6.1 轉(zhuǎn)為String
- 將其他的數(shù)據(jù)類型轉(zhuǎn)換為String
- 方式一 :toString()
- 調(diào)用被轉(zhuǎn)換數(shù)據(jù)類型的toString()方法
- 該方法不會(huì)影響到原變量孝鹊,它會(huì)將轉(zhuǎn)換的結(jié)果返回
- 注意:null和undefined這兩個(gè)值沒有toString()方法,如果調(diào)用他們的方法展蒂,會(huì)報(bào)錯(cuò)
- 方式二:String()
- 調(diào)用String()函數(shù)又活,并將被轉(zhuǎn)換的數(shù)據(jù)作為參數(shù)傳遞給函數(shù)
- 使用String()函數(shù)做強(qiáng)制類型轉(zhuǎn)換時(shí)苔咪,對(duì)于Number和Boolean實(shí)際上就是調(diào)用的toString()方法,但是對(duì)于null和undefined,就不會(huì)調(diào)用toString()方法
- null ----'null'
- undefined ---- 'undefined'
- 方式一 :toString()
6.2 轉(zhuǎn)換為Number
- 使用Number()函數(shù)
- 字符串 --> 數(shù)字
1.如果是純數(shù)字的字符串柳骄,則直接將其轉(zhuǎn)換為數(shù)字
2.如果字符串中有非數(shù)字的內(nèi)容团赏,則轉(zhuǎn)換為NaN
3.如果字符串是一個(gè)空串或者是一個(gè)全是空格的字符串,則轉(zhuǎn)換為0 - 布爾 --> 數(shù)字
- true 轉(zhuǎn)成 1
- false 轉(zhuǎn)成 0
- null --> 數(shù)字 0
- undefined --> 數(shù)字 NaN
- 字符串 --> 數(shù)字
- 這種方式專門用來對(duì)付字符串
- parseInt() 把一個(gè)字符串轉(zhuǎn)換為一個(gè)整數(shù)
a = '123s12333';//123 a = 'a555';//NaN a = '123.456a789px';//123
- parseFloat() 把一個(gè)字符串轉(zhuǎn)換為一個(gè)浮點(diǎn)數(shù)
a = '123.456a789px';//123.456 a = '123.4154.122';//123.4154 a = true;//NaN;
- 如果對(duì)非String使用parseInt()或parseFloat()耐薯,它會(huì)先將其轉(zhuǎn)換為String然后在操作
- 其他進(jìn)制的數(shù)字
- 在js中馆里,表示16進(jìn)制的數(shù)字,則需要以0x開頭
- 表示8進(jìn)制的數(shù)字可柿,則需要以0開頭
- 表示2進(jìn)制的數(shù)字,則需要以0b開頭丙者,但是不是所有的瀏覽器都支持
<!-- 可以在parseInt()中傳遞一個(gè)第二個(gè)參數(shù)复斥,來指定數(shù)字的進(jìn)制 --> a = 0b10; a = parseInt(a,10)-----10進(jìn)制進(jìn)行解析 a = parseInt(a,8)-----8進(jìn)制進(jìn)行解析 a = parseInt(a,16)-----16進(jìn)制進(jìn)行解析
6.3 轉(zhuǎn)換為boolean
使用Boolean()函數(shù)
- 數(shù)字 ---> 布爾
- 除了0和NaN,其余的都是true
- 字符串 ---> 布爾
- 除了空串械媒,其余的都是true
- null和undefined都會(huì)轉(zhuǎn)換為false
- 對(duì)象也會(huì)轉(zhuǎn)換為true
7. 運(yùn)算符
- 通過運(yùn)算符可以對(duì)一個(gè)或多個(gè)值進(jìn)行運(yùn)算,并獲取運(yùn)算結(jié)果
- 比如:typeof就是運(yùn)算符目锭,可以來獲得一個(gè)值的類型,它會(huì)將該值的類型以字符串的形式返回
"number" "string" "boolean" "undefined" "object"
- 比如:typeof就是運(yùn)算符目锭,可以來獲得一個(gè)值的類型,它會(huì)將該值的類型以字符串的形式返回
7.1 算數(shù)運(yùn)算符
當(dāng)對(duì)非Number類型的值進(jìn)行運(yùn)算時(shí)纷捞,會(huì)將這些值轉(zhuǎn)換為Number然后再運(yùn)算
任何值和NaN做運(yùn)算都得NaN
-
+
- +可以對(duì)兩個(gè)值進(jìn)行加法運(yùn)算痢虹,并將結(jié)果返回
- 如果對(duì)兩個(gè)字符串進(jìn)行加法運(yùn)算,則會(huì)做拼串主儡,會(huì)將兩個(gè)字符串拼接為一個(gè)字符串奖唯,并返回
- 任何的值和字符串做加法運(yùn)算,都會(huì)先轉(zhuǎn)換為字符串糜值,然后再和字符串做拼串的操作
result = true + 1 ; //2
result = false + 1 ;//1
result = 2 + null;//2
result = 2 + NaN;//NaN
result = '123'+ '456';//'123456'
result = 123 + '1';//'1231'
- -
- -可以對(duì)兩個(gè)值進(jìn)行減法運(yùn)算丰捷,并將結(jié)果返回
- *
- * 可以對(duì)兩個(gè)值進(jìn)行乘法運(yùn)算
- /
- / 可以對(duì)兩個(gè)值進(jìn)行除法運(yùn)算
- %
- % 取模運(yùn)算(取余數(shù))
7.2 一元運(yùn)算符
- 一元運(yùn)算符,只需要一個(gè)操作數(shù)
- typeof
- typeof 數(shù) 值 number
- typeof 字符串 string
- typeof 布爾型 boolean
- typeof undefined undefined
- typeof null object
- + 正號(hào)
- 正號(hào)不會(huì)對(duì)數(shù)字產(chǎn)生任何影響
- - 負(fù)號(hào)
負(fù)號(hào)可以對(duì)數(shù)字進(jìn)行符號(hào)的取反
對(duì)于非Number類型的值寂汇,它會(huì)將先轉(zhuǎn)換為Number病往,然后再運(yùn)算
可以對(duì)一個(gè)其他的數(shù)據(jù)類型使用+,來將其轉(zhuǎn)換為number,它的原理和Number()函數(shù)一樣
- typeof
var a = 123
a = + a ;//123
a = - a ;//-123
a = true;
a = -true;//-1
a = '18';
a = -a ;//-18
a = +a;
a = 1 + +'2' + 3 ; // 6
<!-- 格式化輸出 -->
console.log("a = "+a)
8. 自增和自減
8.1 自增
無論是a++還是++a,都會(huì)立即使原變量的值自增1
- a++
- a++的值等于原變量的值(自增前的值)
- ++a
- ++a的值等于新值 (自增后的值)
var d = 20;
var result = d++ + ++d + d ;
8.2 自減
無論是a--還是--a都會(huì)立即使原變量的值自減1
- a--
- a-- 是變量的原值 (自減前的值)
- --a
- --a 是變量的新值 (自減以后的值)
var n1=10;
var n2=20;
var n = n1++; //先賦值n=10 后自增n1=11
console.log('n=' + n); //10
console.log('n1=' + n1); //11
n = ++n1; //先自增n1=12 后賦值n=12
console.log('n=' + n); //12
console.log('n1=' + n1); //12
n = n2--;//先賦值n=20 后自減n2=19
console.log('n=' + n); //20
console.log('n2=' + n2); //19
n = --n2; //先自減n2=18 后賦值n=18
console.log('n=' + n); //18
console.log('n2=' + n2); //18
9. 邏輯運(yùn)算符
9.1 ! 非
- 對(duì)布爾值:就是取反
- 對(duì)非布爾值,先轉(zhuǎn)換成布爾值,再進(jìn)行取反
- 可以利用非運(yùn)算,進(jìn)行數(shù)據(jù)轉(zhuǎn)換
b = 10;
a = !!b;
9.2 && 與
- 遇flase,則flase
- true && true ;// true
- true && false ;//false
- false && false;//false
- 非布爾值的情況
- 如果第一個(gè)值為true骄瓣,則必然返回第二個(gè)值
- 如果第一個(gè)值為false停巷,則直接返回第一個(gè)值
//與運(yùn)算:如果兩個(gè)值都為true,則返回后邊的
var result = 2 && 1;
//與運(yùn)算:如果兩個(gè)值中有false榕栏,則返回靠前的false
//false && true
result = 0 && 2;
result = 2 && 0;
//false && false
result = NaN && 0;
result = 0 && NaN;
9.3 * || 或
- ||true 則 true
- false || false;//false
- false || true;//true
- true || true;//true
- 非布爾值的情況
- 如果第一個(gè)值為true畔勤,則直接返回第一個(gè)值
- 如果第一個(gè)值為false,則返回第二個(gè)值
//true || true
//如果第一個(gè)值為true臼膏,則直接返回第一個(gè)值
result = 2 || 1;
result = 2 || NaN;
result = 2 || 0;
//如果第一個(gè)值為false硼被,則直接返回第二個(gè)值
result = NaN || 1;
result = NaN || 0;
result = "" || "hello";
result = -1 || "你好";
10 賦值運(yùn)算符
- =
- 可以將符號(hào)右側(cè)的值賦值給符號(hào)左側(cè)的變量
- +=
- a += 5 等價(jià)于 a = a + 5
- -=
- a -= 5 等價(jià)于 a = a - 5
- *=
- a *= 5 等價(jià)于 a = a5
- /=
- a /= 5 等價(jià)于 a = a / 5
- %=
- a %= 5 等價(jià)于 a = a % 5
11 . 關(guān)系運(yùn)算符
通過關(guān)系運(yùn)算符可以比較兩個(gè)值之間的大小關(guān)系,如果關(guān)系成立它會(huì)返回true渗磅,如果關(guān)系不成立則返回false
大于號(hào)
* 判斷符號(hào)左側(cè)的值是否大于右側(cè)的值
* 如果關(guān)系成立嚷硫,返回true检访,如果關(guān)系不成立則返回false= 大于等于
- 判斷符號(hào)左側(cè)的值是否大于或等于右側(cè)的值< 小于號(hào)
<= 小于等于
-
非數(shù)值的情況
- 對(duì)于非數(shù)值進(jìn)行比較時(shí),會(huì)將其轉(zhuǎn)換為數(shù)字然后再比較
- 如果符號(hào)兩側(cè)的值都是字符串時(shí)仔掸,不會(huì)將其轉(zhuǎn)換為數(shù)字進(jìn)行比較脆贵,而會(huì)分別比較字符串中字符的Unicode編碼
任何值和NaN做任何比較都是false
console.log(1 > true); //false
console.log(1 >= true); //true
console.log(1 > "0"); //true
console.log(10 > null); //true
任何值和NaN做任何比較都是false
console.log(10 > "hello"); //false
console.log(10 >= "hello"); //false
console.log(10 < "hello"); //false
console.log(10 <= "hello"); //false
console.log(true > false); //true
console.log("1" < "5"); //true
console.log("11" < "5"); //true
//比較兩個(gè)字符串時(shí),比較的是字符串的字符編碼
console.log("a" < "b");//true
//比較字符編碼時(shí)是一位一位進(jìn)行比較,如果兩位一樣起暮,則比較下一位卖氨,所以借用它來對(duì)英文進(jìn)行排序
console.log("abc" < "b");//true
console.log("bbc" < "b");//false
console.log("abc" < "bcd");//true
//比較中文時(shí)沒有意義
console.log("你" > "我"); //false
console.log("月" > "我"); //true
//如果比較的兩個(gè)字符串型的數(shù)字,可能會(huì)得到不可預(yù)期的結(jié)果
//注意:在比較兩個(gè)字符串型的數(shù)字時(shí)负懦,一定一定一定要轉(zhuǎn)型
console.log("11123123123123123123" < +"5"); //false
13. 相等運(yùn)算符
-
相等運(yùn)算符---- ==
- 用來比較兩個(gè)值是否相等筒捺,如果相等會(huì)返回true,否則返回false
- 當(dāng)使用==來比較兩個(gè)值時(shí)纸厉,如果值的類型不同系吭,則會(huì)自動(dòng)進(jìn)行類型轉(zhuǎn)換,將其轉(zhuǎn)換為相同的類型颗品,然后再比較
- 用來比較兩個(gè)值是否相等筒捺,如果相等會(huì)返回true,否則返回false
-
不相等---- !=
- 不相等用來判斷兩個(gè)值是否不相等肯尺,如果不相等返回true,否則返回false
- 使用 != 來做不相等運(yùn)算
- 不相等也會(huì)對(duì)變量進(jìn)行自動(dòng)的類型轉(zhuǎn)換躯枢,如果轉(zhuǎn)換后相等它也會(huì)返回false
- 不相等用來判斷兩個(gè)值是否不相等肯尺,如果不相等返回true,否則返回false
-
全等 ===
- 用來判斷兩個(gè)值是否全等则吟,它和相等類似,不同的是它不會(huì)做自動(dòng)的類型轉(zhuǎn)換
- 如果兩個(gè)值的類型不同锄蹂,直接返回false
- 用來判斷兩個(gè)值是否全等则吟,它和相等類似,不同的是它不會(huì)做自動(dòng)的類型轉(zhuǎn)換
-
不全等---- !==
- 用來判斷兩個(gè)值是否不全等氓仲,和不等類似,不同的是它不會(huì)做自動(dòng)的類型轉(zhuǎn)換
- 如果兩個(gè)值的類型不同得糜,直接返回true
- 用來判斷兩個(gè)值是否不全等氓仲,和不等類似,不同的是它不會(huì)做自動(dòng)的類型轉(zhuǎn)換
/* undefined 衍生自 null,所以這兩個(gè)值做相等判斷時(shí)寨昙,會(huì)返回true
console.log(undefined == null);//true
//NaN不和任何值相等,包括他本身
console.log(NaN == "1"); //false
console.log(NaN == "undefined"); //false
console.log(NaN == NaN); //false
var b = NaN;
//判斷b的值是否是NaN
console.log(b == NaN);//無法判斷掀亩,只會(huì)返回false
//可以通過isNaN()函數(shù)來判斷一個(gè)值是否是NaN,如果該值是NaN則返回true舔哪,否則返回false
console.log(isNaN(b)); //true
14. 再談數(shù)值類型轉(zhuǎn)換
- 任意數(shù)值類型轉(zhuǎn)換成字符串
var c = 123;
c = c + '';//'123'
console.log('c = ' + c);//c = '123'
- 任意數(shù)據(jù)類型轉(zhuǎn)換成boolean
- 可以為一個(gè)任意數(shù)據(jù)類型取兩次反,來將其轉(zhuǎn)換為布爾值槽棍,原理和Boolean()函數(shù)一樣
var b = 10;
b = !!b;
- 轉(zhuǎn)化成number
var d = '123';
d = d - 0;//123
d = d * 1;//123