JavaScript基礎
前言
JavaScript(簡稱 JS)一種直譯式腳本語言，是一種動态類型、弱類型、基于原型的語言，内置支援類型。它的解釋器被稱為JavaScript引擎，為浏覽器的一部分，廣泛用于用戶端的腳本語言，最早是在HTML（标準通用标記語言下的一個應用）網頁上使用，用來給HTML網頁增加動态功能。
在1995年時，由
Netscape
公司的Brendan Eich，在
網景導航者浏覽器
上首次設計實作而成。因為
Netscape
與
Sun
合作，Netscape管理層希望它外觀看起來像Java，是以取名為JavaScript。但實際上它的文法風格與
Self
及
Scheme
較為接近。 [1]
為了取得技術優勢，微軟推出了JScript，CEnvi推出ScriptEase，與JavaScript同樣可在浏覽器上運作。為了統一規格，因為JavaScript相容于ECMA标準，是以也稱為ECMAScript。
1. 掌握JavaScript的組成
- 為什麼學習JavaScript？
- 可以做表單驗證
- 可以做頁面的動态互動
-
JS是什麼？
W3C設立的标準：
- 結構語言：HTML…
- 表現語言：CSS
- 行為/互動語言：JS…
JavaScript曆史：
JavaScript誕生于1995年。起初它的主要目的是處理以前由伺服器端負責的一些表單驗證。在那個絕大多數使用者都在使用數據機上網的時代，使用者填寫完一個表單點選送出，需要等待幾十秒，完了伺服器回報給你說某個地方填錯了…在當時如果能在用戶端完成一些基本的驗證絕對是令人興奮的。當時走在技術革新最前沿的Netscape（網景）公司，決定着手開發一種用戶端語言，用來處理這種裝簡單的驗證。當時就職于Netscape公司的布蘭登·艾奇開始着手計劃将1995年2月釋出的LiveScript同時在浏覽器和伺服器中使用。為了趕在釋出日期前完成LiveScript的開發，Netscape與Sun公司成立了一個開發聯盟。而此時，Netscape為了搭上媒體熱炒Java的順風車，臨時把LiveScript改名為JavaScript，是以從本質上來說JavaScript和Java沒什麼關系。（文法上模拟了Java）
JavaScript 1.0獲得了巨大的成功，Netscape随後在Netscape Navigator 3（網景浏覽器）中釋出了JavaScript 1.1。之後作為競争對手的微軟在自家的IE3中加入了名為JScript（名稱不同是為了避免侵權）的JavaScript實作。而此時市面上意味着有3個不同的JavaScript版本，IE的JScript、網景的JavaScript和ScriptEase中的CEnvi。當時還沒有标準規定JavaScript的文法和特性。随着版本不同暴露的問題日益加劇，JavaScript的規範化最終被提上日程。
1997年，以JavaScript1.1為藍本的建議被送出給了歐洲計算機制造商協會（ECMA，European Computer Manufactures Association）該協會指定39号技術委員會負責将其進行标準化，TC39來此各大公司以及其他關注腳本語言發展的公司的程式員組成，經過數月的努力完成了ECMA-262——定義了一種名為ECMAScript的新腳本語言的标準。第二年，ISO/IEC（國标标準化組織和國際電工委員會）也采用了ECMAScript作為标準（即ISO/IEC-16262）。
**JavaScript**這種語言目前也是發展的非常好，而且基于它産生了很多的架構和庫。
Angular、React、Node、Vue、JQuery .... JS 插件等等....
JavaScript這種腳本語言和Java這種非腳本靜态語言有什麼差別？
- 編譯器
- 編譯器：
- Java這種非腳本的靜态語言，它們是先進行編譯，然後編譯後的代碼才可以在某些機器上運作。
- 缺點：如果修改了源代碼那麼Java這種靜态語言必須要重新編譯。
- 優點：當編譯完之後，如果下次要再執行，無需編譯直接執行，速度較快。
- 解釋器：
- 一般解釋器作為編譯器的都是一些腳本語言/動态語言，無需編譯，寫完就可以運作。
- 優點：無需編譯，修改完直接可以運作展示最新的。
- 缺點：每次都需要進行編譯(解釋)，速度慢。
- 編譯器：
JavaScript的組成：
- ECMAScript - 核心文法(标準) 歐洲計算機制造商協會設立的标準 。目前最常用版本為5.1，最新版為6。
- BOM 浏覽器對象模型
- DOM 文檔對象模型
2. 掌握JavaScript的基本文法
<script type="text/javascript">
/* 當初JS标準打的火熱 如果有浏覽器不支援JS，那麼後果就是代碼會被認為普通文字展示在頁面 */
/* 是以為了讓不支援的浏覽器别瞎顯示 是以放上了HTML注釋 */
/* 現在沒這問題了 不支援的基本涼了 */
<!--
document.write("<h1>Hello World！</h1>");
-->
</script>
2.1 JavaScript的引入方式
聯想記憶CSS。
-
行内引入
借助于标簽内置的事件屬性，來實作。
常用的事件屬性有：onclick 點選事件 onmouseover 滑鼠懸浮事件 onblur 失去焦點事件
-
内部引入
在上編寫
2.2 JavaScript變量
Java中變量的組成：
- 變量的資料類型
- 變量名
- 變量值
// 先聲明再指派
int num;
num = 10;
// 聲明并指派
int num = 10;
JavaScript中變量的組成：
- 變量的資料類型
- var (variable) 動态類型識别
- 變量名
- 它由數字、字母、下劃線、$等組成，但是數字不能開頭
- 見名知義
- 采用小駝峰命名法
- 也可以采用_連接配接命名法
- 變量值(單一類型的資料)
// 先聲明再指派
var num;
num = 10;
// 聲明并指派
var num = 10;
2.3 JavaScript資料類型
Java中的資料類型：
- 基本資料類型
- 數值類：byte 、 short 、int 、long、float、double
- 非數值類：char、boolean
- 引用資料類型
- 數組、類(String)、Enum枚舉、接口…
JavaScript中的資料類型：
- undefined：未定義 如果一個變量沒有指派過它的類型就是undefined
- null：表示一個空值 它可以和undefined做相等判斷
- number：表示數值，整數或浮點數
- boolean：表示真和假 true、false
- string：表示字元串 (單引号或雙引号引起來的内容)
- object：表示對象類型 (因為曆史原因，以前的bug，是以當你測試null類型的資料時顯示的是object)
如果檢驗是什麼類型的？
typeof
<script type="text/javascript">
alert("它的資料類型是什麼？"+(typeof "文字"));
</script>
2.3 JavaScript常用運算符
- 算術運算符
-
關系/比較運算符
全等和==的差別？
- ==隻比較内容
- ===不僅比較内容 還比較類型
var str1 = "12"; var num1 = 12; alert(str1 === num1); // false alert(str1 == num1); // true - 指派運算符
- 邏輯運算符
2.4 JavaScript控制語句
選擇結構：
- 基礎if選擇結構
if(條件表達式){ // 代碼 } - if-else選擇結構
if(條件表達式){ // 代碼1 }else{ // 代碼2 } - 多重if選擇結構
if(條件表達式1){ // 代碼1 }else if(條件表達式2){ // 代碼2 }else{ // 代碼3 } - 嵌套if選擇結構
if(條件表達式1){ if(條件表達式2){ } } - switch選擇結構
switch(表達式){ case 常量1: break; case 常量2: break; .... default: break; }
循環結構：
- while循環
while(循環條件){ 循環體 } - for循環
for(初始化循環變量;循環條件;循環出口){ 循環體/循環操作 }
循環控制關鍵字：
- break 結束循環
- continue 結束本次循環，進入下次循環
2.5 數組
// 1.
var arr = new Array(3);
arr[0] = "張三";
arr[1] = "李四";
arr[2] = "王五";
// 2.
var arr = new Array("張三","李四","王五");
// 3.
// JSON(非常重要的文本格式 未來學)
var arr = ["張三","李四","王五"];
3. 掌握JavaScript的函數使用
函數：方法：功能
一系列代碼組成的一個完整功能。
3.1 基本的系統函數使用
- 輸出：alert(); 會彈出一個帶有确定按鈕的提示框
- 輸入：prompt(); 會彈出一個帶有輸入框的提示框。
// 如果輸入了 則傳回輸入的内容 否則為null // p1：提示的内容 p2:輸入框中預設的文本内容 var pwd = prompt("請輸入您的密碼：","預設的文本内容"); alert("您輸入的是："+pwd); - parseInt() 轉換為整數
- parseFloat() 轉換為小數
var num1 = prompt("請輸入第一個整數：") - 0; // - 0也可以實作下方效果 var num2 = prompt("請輸入第二個整數：") - 0; // 轉換為整數 // var num1 = parseInt(prompt("請輸入第一個整數：")); // var num2 = parseInt(prompt("請輸入第二個整數：")); /*var num1 = parseFloat(prompt("請輸入第一個整數：")); var num2 = parseFloat(prompt("請輸入第二個整數："));*/ // alert("兩數的差為："+(num1 - num2)); // prompt()傳回的類型是字元串 是以加号自動拼接 alert("兩數的和為："+(num1 + num2));
3.2 會自定義函數(方法)
方法的分類(按有返和無返等分類)：
- 無參無返
// function ： 函數/功能 function 方法名(){ // 方法代碼 } // 無參無返 function method1(){ alert("我是無參無返！"); } // 方法需要調用 method1(); - 無參有返
function 方法名(){ // 方法代碼 // 傳回值 return 傳回值; } function method2(){ alert("我是無參有返！"); return "hehe"; } var result = method2(); alert(result); - 有參無返
function 方法名(形參清單){ // 方法代碼 } function method3(name,age){ alert("有參無返："+name+"："+age); } method3("xxx",12); - 有參有返
function 方法名(形參清單){ // 方法代碼 return 傳回值; } function method4(name){ alert("有參有返:"+name); return "xx"; }
3.3 函數的使用
/*function dianni(){
alert(1);
}*/
var btn = document.getElementById("btn");
// 綁定事件
// 匿名函數 沒有方法名 隻能使用一次
/*btn.onclick = function(){
alert(1);
}*/
// 綁定事件 如果函數綁定寫上小括号() 表示調用函數并傳回結果
// 如果隻是寫上方法名 這表示綁定函數
btn.onclick = dianni;
function dianni(){
alert(2);
}
3.4 函數中的變量作用域
// 成員變量
var i = 11;
function method1(){
// 局部變量
var i = 10;
alert(i);
}
function method2(){
alert(i);
}
method1();
// method2(i);
![Java String.format方法的簡單使用[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)