一:JavaScript簡介
JavaScript 是一種專爲與網頁交互而設計的腳本語言
在HTML中使用JavaScript:
<!-- 方式一:內嵌 -->
<script type="text/javascript">
alert("hello world");
</script>
<!-- 方式二:導入外部js -->
<script src="/javascripts/application.js" type="text/javascript" charset="utf-8" async defer></script>
<script>屬性介紹:
type:type="text/javascript"
src:外部JS文件URL
defer:表示腳本延遲到文檔完全被解析和顯示後再執行;相當於告訴瀏覽器立即下載,但延遲執行;只應用於外部腳本
async:表示應該立即下載腳本,但不應妨礙頁面中的其他操作(異步);只應用於外部腳本
<script>元素最好放在<body>元素中最後面。
原因:JavaScript文件若放在<head>中,意味着必須等到全部JavaScript代碼都被下載、解析和執行後,才能開始呈現頁面的內容,這會造成頁面呈現的明顯延遲
ECMAScript中的一切(變量名、函數名和操作符)都區分大小寫。
標識符:變量、函數、屬性的名字
①可包含字母、數字、下劃線和美元符號$
②首字符不能爲數字
ECMAScript標識符采用駝峯大小寫格式,如getElementById
ECMAScript的變量是鬆散類型的,即一個變量可以用來保存任何類型的數據
註釋://單行註釋 /* 多行註釋 */
二:數據類型
ECMAScript數據類型:5種基本數據類型 + 1種複雜數據類型
1,基本數據類型
1.1 undefined:聲明變量但未初始化,其值自動被賦予undefined;var message;
1.2 null:表示一個空對象指針;如果定義的變量準備在將來用於保存對象,那麼最好將該變量初始化爲null值
1.3 Boolean:布爾值,只有兩種值 true 和 false
函數Boolean()可將所有數據類型轉換爲其對應的Boolean值(布爾值爲false的有:false、""(空字符串)、0、NaN、null、undefined)
1.4 Number:數值類型
函數isFinite()可以確定一個數值是不是有窮數
函數isNaN()可以確定一個數是否“不是數值”,該函數會嘗試將其他數據類型轉換爲數值,如字符串"10"或Boolean值
由於保存浮點數值需要的內存空間是保存整數值的兩倍,因此ECMAScript會不失時機地將浮點數值轉換爲整數值
由於浮點數值計算會產生舍入誤差的問題,因此,永遠不要測試某個特定的浮點數值!
<script type="text/javascript">
var a=0.1;
var b=0.2;
var c;
if (a+b == 0.3){ //不要做這樣的測試!
c=1;
}
console.log(c) //結果爲: undefined
</script>
NaN:非數值(Not a Number);NaN不等於其本身!可以把非數值轉換爲數值的3個函數:
①Number():用於任何數據類型
true-->1;false-->0;null-->0;""-->0;undefined-->NaN;"hello"-->NaN;"12blue"--> NaN;"123"-->123; "1.1" -->1.1; "011"--> 11(無法解析八進制值); "0xA"--> 10(可以解析十六進制值);
②parseInt():用於把字符串轉換成數值(整數)
"12blue"--> 12; ""--> NaN; "22.5"--> 22; "0xA"--> 10
parseInt()解析八進制字符串時,ECMAScript 3和ECMAScript 5存在分歧!爲消除此困惑,可以爲此函數提供第二個參數:轉換時使用的基數
parseInt("070",8); //56 parseInt("070",10); //70
③parseFloat():用於把字符串轉換成數值(浮點數),只解析十進制值(無法解析八進制與十六進制值)
"12blue"--> 12; ""--> NaN; "22.5"--> 22.5; "0xA"--> 0
1.5 String:字符串類型,由雙引號或單引號表示
轉換爲字符串的方法:
toString()方法:null和undefined沒有這個方法
String()函數:有toString方法的,返回其結果;null,undefined分別返回"null" 和 "undefined"
var a=10;
a.toString(); //"10"
a.toString(2); // "1010"
a.toString(8); // "12"
a.toString(16); // "a"
2,複雜數據類型
Object:對象類型
ECMAScript中的對象其實就是一組數據和功能的集合
var hi = new Object();
在ECMAScript中,Object類型是所有它的實例的基礎,即Object是所有對象的基礎
Object屬性和方法:①構造函數 constructor:保存着用於創建當前對象的函數
②hasOwnProperty(propertyName):用於檢查給定的屬性在當前對象實例中是否存在;屬性名必須以字符串形式指定
③isPrototypeOf(Object):用於檢查傳入的對象是否是當前對象的原型
④propertyIsEnumerable(propertyName):用於檢查給定的屬性是否能夠使用for-in語句來枚舉;屬性名必須以字符串形式指定
⑤toLocalString():返回對象的字符串表示,該字符串與執行環境的地區對應
⑥toString():返回對象的字符串表示
⑦valueOf():返回對象的字符串、數值或布爾值表示
三:操作符
1,一元操作符
①前置遞增和遞減操作符:變量的值是在語句被求值之前改變的
var m = 1;
++m; //等價於 m=m+1
--m; //等價於 m=m-1
②後置遞增和遞減操作符:在包含它們的語句被求值之後才執行的
var m = 1;
m++; //等價於 m=m+1
m--; //等價於 m=m-1
③一元加和減操作符:
m= +m; //對數值m不會產生任何影響;若m爲非數值類型,則將其轉換爲數值類型
m= -m; //主要用於表示負數
一元操作符適用於任何值:數值、字符串、布爾值、對象
一元操作符能將非數值類型轉換爲數值類型
2,位操作符
ECMAScript中的所有數值都以IEEE-754 64位格式存儲,但位操作符並不直接操作64位的值,而是先將64位的值轉換成32位的整數,然後執行操作,最後再將結果轉換回64位。
第32位用於表示數值的符號:0表示整數,1表示負數
負數採用二進制補碼格式存儲:①求這個數值絕對值的二進制碼;②求二進制反碼,即0-->1,1-->0;③得到的二進制反碼加1
按位非 | 表示符號:~ | 返回數值的反碼 |
按位與 | 表示符號:& | 將兩個數值的每一位對齊進行邏輯與操作 |
按位或 | 表示符號:| | 將兩個數值的每一位對齊進行邏輯或操作 |
按位異或 | 表示符號:^ | 兩個數值對應位上不同時返回1,相同時返回0 |
左移 | 表示符號:<< | 將數值的所有位向左移動指定的位數 不影響符號位;以0填充右側多出的空位 |
有符號的右移 | 表示符號:>> | 將數值的所有位向左移動指定的位數 不影響符號位;用符號位的值填充所有空位 |
無符號的右移 | 表示符號:>>> | 將數值的所有32位(包括符號位)都向右移動 以0來填充空位 |
3,布爾操作符
邏輯非 | 表示符號:! | 先將它的操作數轉換爲一個布爾值,然後再對其求反 |
邏輯與 | 表示符號:&& | 兩個操作數均爲true時返回true 屬於短路操作符 |
邏輯或 | 表示符號:|| | 有一個爲true返回true;兩個操作數均爲false時返回false 屬於短路操作符 |
短路操作符:如果第一個操作數能夠決定結果,就不會再對第二個操作數求值
邏輯與運算規則:
第一個操作數是對象,則返回第二個操作數;
第一個操作數求值結果爲true,第二個操作數是對象,返回該對象;
第一個操作數是null、NaN、undefined,則返回null、NaN、undefined
邏輯或運算規則:
第一個操作數是對象,則返回第一個操作數;
第一個操作數求值結果爲false,則返回第二個操作數;
兩個操作數都是null、NaN、undefined,則返回null、NaN、undefined
4,乘性操作符
若參與乘性計算的某個操作數不是數值,後臺會先使用Number()函數將其轉換爲數值
乘法 | 符號:* | 1,乘積超過數值表示範圍,返回Infinity或-Infinity 2,若有一個操作數是NaN,則返回NaN 3,Infinity與0相乘,返回NaN 4,Infinity與非0相乘,返回Infinity或-Infinity |
除法 | 符號:/ | 1,若有一個操作數是NaN,則返回NaN 2,Infinity被Infinity除,零被零除,結果爲NaN 3,非零的有限數被零除,返回Infinity或-Infinity 4,Infinity被任何非零有限數值除,返回Infinity或-Infinity |
求模(取餘) | 符號:% | 1,被除數是無窮大值而除數是有限大的數值,結果爲NaN 2,被除數是有限大的數值而除數是零,Infinity被Infinity除,結果爲NaN 3,被除數是有限大的數值而除數是無窮大的數值,結果是被除數 4,被除數是零,則結果爲零 |
5,加性操作符
加法 | 符號:+ | 1,兩個操作數都是數值,執行常規的加法計算; Infinity加-Infinity,其結果是NaN; 2,有一個操作數是字符串,則加號起到連接符的作用 會將另一個不是字符串的操作數轉換爲字符串 3,有一個操作數是對象、布爾值、null或undefined,將它們轉換爲相應數值類型 |
減法 | 符號:- | 1,Infinity減Infinity,-Infinity減-Infinity,其結果是NaN; 2,有一個操作數是字符串、布爾值、null或undefined,則先在後臺調用Number() 函數將其轉換爲數值再進行減法運算 3,有一個操作數是對象,則調用對象的valueOf()方法取得表示該對象的數值,若無 valueOf()方法,則調用其toString()方法並將得到的字符串轉換爲數值 |
6,關係操作符
有 < (小於),> (大於), <= (小於等於), >= (大於等於)。
規則:
①兩個操作數都是字符串,則比較兩個字符串對應的字符編碼值;
②有一個操作數是數值,則將另一個操作數轉換爲一個數值,再進行數值比較;
③一個操作數是布爾值,則先將其轉換爲數值,再進行比較
7,相等操作符
7.1 相等(==)和不相等(!=):先轉換再比較
規則:
①有一個操作數是布爾值,先將其轉換爲數值再進行比較;
②一個操作數是數值,另一個是字符串,先將字符串轉換爲數值;
③null和undefined不能轉換成其他值,且null==undefined;
④NaN不等於其本身,即NaN != NaN;
⑤兩個操作數都是對象,則比較它們是不是同一個對象
7.2 全等(===)和不全等(!==):僅比較而不轉換
null !== undefined;NaN !== NaN
8,賦值操作符
符號:=
複合賦值操作符:+=、-=、*=、/=、%=、<<=、>>=、>>>=
var m = 1;
m += 1; //等價於 m = m+1;其它類推
9,條件操作符(三元表達式)
variable = boolean_expression ? true_value : false_value;
條件表達式爲真,則將值true_value賦給變量variable;條件表達式爲真,則將值false_value賦給變量variable
補充:typeof操作符
typeof操作符:用於檢測給定變量的數據類型
typeof返回值:
undefined 值未定義;
boolean 布爾值;
string 字符串;
number 數值 (包括NaN);
object 對象或null(null被認爲是一個空的對象引用;
function 函數
四:語句
1,if語句
if (condition1){
statement1
}else if (condition2){
statement2
}else{
statement3
}
2,do_while語句
// 循環體內的代碼至少會被執行一次
do {
statement
}while(expression);
3,while語句
while(expression){
statement
}
4,for語句
// 參數分別爲:初始化表達式;控制表達式;循環後表達式 (均爲可選)
for(initialization;expression;post-loop-expression){
statement
}
5,for-in語句:是一種精準的迭代語句,可用來枚舉對象的屬性
for (property in expression){
statement
}
6,label語句:在代碼中添加標籤,以便將來使用
label:statement
7,break和continue語句
它們用於在循環中精確地控制代碼的執行,可與label語句聯合使用
break; //會立即退出循環,強制繼續執行循環後面的語句
continue; //立即結束本次循環,繼續執行下一次循環
8,with語句:將代碼的作用域設置到一個特定的對象中
其目的主要是爲了簡化多次編寫同一個對象的工作
with (expression){
statement
}
9,switch語句
可在switch語句中使用任何數據類型;
每個case的值不一定是常量,可以是變量,甚至是表達式;
switch語句在比較值時使用的是全等操作符,因此不會發生類型轉換。
switch (expression) {
case label_1:
// statements_1
break;
case label_2:
// statements_2
break;
default:
// statements_def
break;
}