javaScript------------------基礎
阿新 • • 發佈：2017-05-26
body meta switch語句 技術分享 使用 整合 其余 mas -- 
javaScript概述
javaScript的歷史：
- 1992年Nombas開發出C-minus-minus(C--)的嵌入式腳本語言(最初綁定在CEnvi軟件中).後將其改名ScriptEase.(客戶端執行的語言)
- Netscape(網景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0產品中開發出一套livescript的腳本語言.Sun和Netscape共同完成.後改名叫Javascript
- 微軟隨後模仿在其IE3.0的產品中搭載了一個JavaScript的克隆版叫Jscript.
- 為了統一三家,ECMA(歐洲計算機制造協會)定義了ECMA-262規範.國際標準化組織及國際電工委員會（ISO/IEC）也采納 ECMAScript 作為標準（ISO/IEC-16262）。從此，Web 瀏覽器就開始努力（雖然有著不同的程度的成功和失敗）將 ECMAScript 作為 JavaScript 實現的基礎。EcmaScript是規範.
ECMAscript：
ECMAscrpipt是javascript的重要標準，他只是javascript的一部分，實際上，一個完整的javascript是由以下三部分組成的：
1，核心：ECMAscript
2，文檔對象模型：DOM（Document object model）整合js，css，html
3，瀏覽器對象模型：BOM（Broswer object model）整合js，瀏覽器
javascript在開發中絕大多數是基於對象開發色，也是一種面向對象的語言。
ECMAscript描述了下面內容：
- 語法
- 類型
- 語句
- 關鍵字
- 保留字
- 運算符
- 對象（多態，封裝，繼承）
javascript的引入方式，也就是調用方式，有兩種：
- 直接在HTML文件中以script關鍵字編寫js代碼
- 在HTML文件中導入有js代碼的js文件
1，直接引用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!------直接引用js------> <script> var a = "hello"; console.log(a); </script> </head> <body> <div>hello world</div> </body> </html>
2，導入js文件（推薦用法），使HTML文件變得清晰客觀
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!------導入js文件------> <script src="index.js"></script> </head> <body> <div>hello world</div> </body> </html>
javascript基礎：
1，變量：
var a = 1
var b = 2
var c = a + b
在javascript中，a，b，c，都是變量，存儲值，聲明變量時全部使用var關鍵字，不適用var關鍵字，比如變量a就變成了全局變量。
一行可以聲明多個不同類型的變量，
//每行代碼結尾要加上分好 ‘ ; ‘ var name="jon",age=20,job="IT";
變量命名，不能以關鍵字，保留字，數字，下劃線命名，
命名最好用首字母大寫，駝峰命名法，
//變量名長的時候用，見名之意 var MyJavaScript = 100;
2，標識符：
- 由不以數字開頭的字母、數字、下劃線(_)、美元符號($)組成
- 常用於表示函數、變量等的名稱
- 例如：_abc,$abc,abc,abc123是標識符，而1abc不是
- JavaScript語言中代表特定含義的詞稱為保留字，不允許程序再定義為標識符
關鍵字：
2，數據類型
數字類型（number）整形和浮點型屬於number類型
- 整形int，浮點型float
字符串類型（sring）
- 是由Unicode字符，數字，標識符組成的序列，
- 由雙引號或單引號闊起來，如"hello",‘world‘
布爾類型（boolean）
- 只有兩個值true和false，
- 在python中是首字母大寫True，False
Null和Undefined// undefined 類型
// undefined類型只有一個值，就是undefined，有兩種情況返回undefined
// 1，當聲明變量未初始化時，該變量的默認值是undefined
// 2，當函數沒有明確的返回值時，返回的也是undefined
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//只是聲明了變量test，沒有使用
var test;
console.log(test);//結果 undefined
//test函數沒有給一個明確的返回值
// test十一個空函數
function foo() {
}
console.log(foo());//undefined
</script>
</head>
<body>
</body>
</html>
// Null 類型 只有一個值的類型是 Null，它只有一個專用值 null，即它的字面量。值 undefined 實際上是從值 null 派生來的，因此 ECMAScript 把它們定義為相等的。 盡管這兩個值相等，但它們的含義不同。undefined 是聲明了變量但未對其初始化時賦予該變量的值，null 則用於表示尚未存在的對象
。如果函數或方法要返回的是對象，那麽找不到該對象時，返回的通常是 null。 var person=new Person() var person=null
數據類型轉化：
javascript是一種弱性語言，也是松散型的
變量在聲明的時候不需要指定數據類型
變量在賦值的時候才會確定數據類型
在表達式中，包含不同類型的運算在計算過程中會強制進行類型轉換
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//字符串和數字相加，
// javascript自動把整形1轉成字符串了，在拼接字符串
console.log(1+" hello");// 1 hello
//布爾值和數字相加，true是1，false是0
console.log(true+1); //2
console.log(false+1); //1
//布爾值和字符串相加，把true轉換成字符串true
console.log(true+"hello"); //truehello
//強制類型轉化函數
// parseInt函數：把浮點型強轉成整數
console.log(parseInt(3.1314)); // 3
// parsrFloat函數 ：把浮點型強轉成整形
parseFloat(3); //3.0
// eval函數 ：將字符串強轉成表達式計算結果
console.log(eval("1+2"));// 3
// typeof函數 ：查詢當前數據類型
console.log(typeof("hello"));//string
console.log(typeof(10));// number
console.log(typeof(10.11));// number
console.log(typeof(NaN)); //number
console.log(typeof(null)); //object
//註意：表達式運算的結果不是數字，就會返回NaN
// 因為NaN代表的就是number類型
console.log(123+"test"*12)//NaN
</script>
</head>
<body>
</body>
</html>
3，ECMAscript運算符：
算術運算符：
加（+）減（-）乘（*）除（/）取余（%） ‘ - ‘ 除了當做減法，還可以用作負數 如 -2 ‘ + ‘除了當做加法，還可以用於字符串連接 如 "hello"+"world"
++ 自加1 -- 自減1 var i=1; i++ // 2 i-- // 0
i++和i-- 是先引用，後運算
++i //2
--i //0
這是先運算，後引用
邏輯運算符：
== 等於 != 不等於 > 大於 < 小於 >= 大於等於 <= 小於等於 === 完全等於 !== 完全不等於 && 與 || 或 ! 非
賦值運算符：
等號= 在javascript是代表賦值 var a = 10;//把10賦值給a變量
等性運算符：
執行類型轉換的規則如下：
- 如果一個運算數是 Boolean 值，在檢查相等性之前，把它轉換成數字值。false 轉換成 0，true 為 1。
- 如果一個運算數是字符串，另一個是數字，在檢查相等性之前，要嘗試把字符串轉換成數字。
- 如果一個運算數是對象，另一個是字符串，在檢查相等性之前，要嘗試把對象轉換成字符串。
- 如果一個運算數是對象，另一個是數字，在檢查相等性之前，要嘗試把對象轉換成數字。
在比較時，該運算符還遵守下列規則：
- 值 null 和 undefined 相等。
- 在檢查相等性時，不能把 null 和 undefined 轉換成其他值。
- 如果某個運算數是 NaN，等號將返回 false，非等號將返回 true。
- 如果兩個運算數都是對象，那麽比較的是它們的引用值。如果兩個運算數指向同一對象，那麽等號返回 true，否則兩個運算數不等。
關系運算符：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
//字符串 "Blue" 小於 "alpha"，因為字母 B 的字符代碼是 66，字母 a 的字符代碼是 97。
var bar = "Blue" < "alpha";
arelt(bar) // true
//比較數字的字符串
//兩個數字的字符串比較，則按照ascall碼表來比較
var bar = "25" < "3";
alert(bar); //true
//數字字符串和數字比較
// 把字符串轉為整形，在比較，25 < 3,結果是false
var foo = "25" < 3;
alert(foo)//false
</script>
</html>
3,控制語句
if else控制語句
if (表達式){ 語句1 }else{ 語句2 } 表達式的結果為true執行語句1，否則執行else的語句2 <script> // 結果為false， var num = 100; if (num>101){ console.log("true") }else { console.log("false") } </script>
if else if 控制語句：
<script>
// 結果為 no
var num = 10;
if (num < 10 ){
console.log("yes")
} else if(num < 20 ){
console.log("no")
}else {
console.log("yes or no")
}
</script>
switch case選擇控制語句
<script>
// 表達式的條件滿足哪個case，就執行哪個，跳出switch語句
switch (表達式){
case 值1:語句1;break;
case 值2:語句2;break;
case 值3:語句3;break;
case 值4:語句4;break;
}
</script>
//switch語句裏的表達式結果，直接找對應的case值沒找到執行case語句 var x =1; switch(x){ case 1:console.log(y="星期一"); break; case 2:console.log(y="星期二"); break; case 3:console.log(y="星期三"); break; case 4:console.log(y="星期四"); break; case 5:console.log(y="星期五"); break; case 6:console.log(y="星期六"); break; case 7:console.log(y="星期日"); break; default: y="未定義";} // 結果 星期一
switch比eles if 給夠更清晰，更簡潔，是程序可讀性更強，效率更高
首先要看一個問題，if 語句適用範圍比較廣，只要是 boolean 表達式都可以用 if 判斷；而 switch 只能對基本類型進行數值比較。兩者的可比性就僅限在兩個基本類型比較的範圍內。 說到基本類型的數值比較，那當然要有兩個數。然後重點來了—— if 語句每一句都是獨立的，看下面的語句： if (a == 1) ... else if (a == 2) ... 這樣 a 要被讀入寄存器兩次，1 和 2 分別被讀入寄存器一次。於是你是否發現其實 a 讀兩次是有點多余的，在你全部比較完之前只需要一次讀入寄存器就行了，其余都是額外開銷。但是 if 語句必須每次都把裏面的兩個數從內存拿出來讀到寄存器，它不知道你其實比較的是同一個 a。 於是 switch case 就出來了，把上面的改成 switch case 版本： switch (a) { case 0: break; case 1: } 總結: 1.switch用來根據一個整型值進行多路分支，並且編譯器可以對多路分支進行優化 2.switch-case只將表達式計算一次,然後將表達式的值與每個case的值比較,進而選 擇執行哪一個case的語句塊 3.if..else 的判斷條件範圍較廣，每條語句基本上獨立的，每次判斷時都要條件加載 一次。 所以在多路分支時用switch比if..else if .. else結構要效率高。總結switch和else if
for 循環控制語句
for循環基本格式 for (初始化；條件；增量){ 語句..... } 當條件滿足時執行，不滿足 跳出循環
<script>
// 5個hello
for (i=0;i<5;i++){
console.log("hello")
}
</script>
while 循環
while循環基本格式 while (條件){ 語句 }
//5個world var i = 0; while (i<5){ console.log("world"); i++; }
javaScript------------------基礎