9.JavaScript

JavaScript簡介

Web前端有三層：

• HTML：從語義的角度，描述頁面結構

• CSS：從審美的角度，描述樣式（美化頁面）

• JavaScript：從交互的角度，描述行爲（提高用戶體驗）

JavaScript歷史背景介紹

布蘭登 • 艾奇（Brendan Eich，1961年～），1995年在網景公司，發明的JavaScript。

一開始JavaScript叫作LiveScript，可是因爲當時Java這個語言特別火，因此爲了傍大牌，就更名爲JavaScript。如同「北大」和「北大青鳥」的關係。「北大青鳥」就是傍「北大」大牌。

同時期還有其餘的網頁語言，好比VBScript、JScript等等，可是後來都被JavaScript戰勝了，因此如今的瀏覽器中，只運行一種腳本語言就是JavaScript

JavaScript和ECMAScript的關係

ECMAScript是一種由Ecma國際（前身爲歐洲計算機制造商協會,英文名稱是European Computer Manufacturers Association）制定的標準。

JavaScript是由公司開發而成的，問題是不便於其餘的公司拓展和使用。因此歐洲的這個ECMA的組織，牽頭制定JavaScript的標準，取名爲ECMAScript。

簡單來講，ECMAScript不是一門語言，而是一個標準。符合這個標準的比較常見的有：JavaScript、Action Script（Flash中用的語言）。就是說，你JavaScript學完了，Flash中的程序也就垂手可得了。

ECMAScript在2015年6月，發佈了ECMAScript 6版本，語言的能力更強（也包含了不少新特性）。可是，瀏覽器的廠商不能那麼快去追上這個標準。

JavaScript的發展：蒸蒸日上

http://2004.sina.com.cn/

http://2008.sina.com.cn/

http://2012.sina.com.cn/

上面三個網站能夠感覺一下網頁技術的發展。

 

2003年以前，JavaScript被認爲「牛皮鮮」，用來製做頁面上的廣告，彈窗、漂浮的廣告。什麼東西讓人煩，什麼東西就是JavaScript開發的。因此瀏覽器就推出了屏蔽廣告功能。

2004年，JavaScript命運開始改變，那一年，谷歌公司開始帶頭使用Ajax技術，Ajax技術就是JavaScript的一個應用。而且，那時候人們逐漸開始提高用戶體驗了。Ajax有一些應用場景。好比，當咱們在百度搜索框搜文字時，輸入框下方的智能提示，能夠經過Ajax實現。好比，當咱們註冊網易郵箱時，可以及時發現用戶名是否被佔用，而不用調到另一個頁面。

2007年喬布斯發佈了第一款iPhone，這一年開始，用戶就多了上網的途徑，就是用移動設備上網。
JavaScript在移動頁面中，也是不可或缺的。而且這一年，互聯網開始標準化，按照W3C規則三層分離，JavaScript愈來愈被重視。

2010年，人們更加了解HTML5技術，HTML5推出了一個東西叫作Canvas（畫布），工程師能夠在Canvas上進行遊戲製做，利用的就是JavaScript。

2011年，Node.js誕生，使JavaScript可以開發服務器程序了。

現在，WebApp已經很是流行，就是用網頁技術開發手機應用。手機系統有iOS、安卓。好比公司要開發一個「攜程網」App，就須要招聘三隊人馬，好比iOS工程師10人，安卓工程師10人，前端工程師10人。共30人，開發成本大；並且若是要改版，要改3個版本。如今，假設公司都用web技術，用html+css+javascript技術就能夠開發App。也易於迭代（網頁一改變，全部的終端都變了）。

雖然目前WebApp在功能和性能上的體驗遠不如Native App，可是「WebApp慢慢取代Native App」頗有多是將來的趨勢。

JavaScript入門易學性

• JavaScript對初學者比較友好。

• JavaScript是有界面效果的（好比C語言只有白底黑字）。

• JavaScript是弱變量類型的語言，變量只須要用var來聲明。而Java中變量的聲明，要根據變量的類型來定義。

好比Java中須要定義以下變量：

    int a;
    float a;
    double a;
    String a;
    boolean a;

而JavaScript中，只用定義一個變量：JavaScript的組成

   var a;

　　

• JavaScript不用關心其餘的一些事情（好比內存的釋放、指針等），更關心本身的業務。

JavaScript是前臺語言

JavaScript是前臺語言，而不是後臺語言。

JavaScript運行在用戶的終端網頁上，而不是服務器上，因此咱們稱爲「前臺語言」。JavaScript就是一個簡單的製做頁面效果的語言，就是服務於頁面的交互效果、美化、絢麗、不能操做數據庫。

後臺語言是運行在服務器上的，好比PHP、ASP、JSP等等，這些語言都可以操做數據庫，都可以對數據庫進行「增刪改查」操做。Node.js除外。

JavaScript的組成

JavaScript基礎分爲三個部分：

• ECMAScript：JavaScript的語法標準。包括變量、表達式、運算符、函數、if語句、for語句等。

• DOM：操做網頁上的元素的API。好比讓盒子移動、變色、輪播圖等。

• BOM：操做瀏覽器部分功能的API。好比讓瀏覽器自動滾動。

PS：JS機械重複性的勞動幾乎爲0，基本都是創造性的勞動。而不像HTML、CSS中margin、padding都是機械重複勞動。

JavaScript的特色

（1）簡單易用：可使用任何文本編輯工具編寫，只須要瀏覽器就能夠執行程序。

（2）解釋執行（解釋語言）：事先不編譯、逐行執行、無需進行嚴格的變量聲明。

（3）基於對象：內置大量現成對象，編寫少許程序能夠完成目標

 初始JavaScript

語法規則

學習程序,是有規律可循的,就是程序是有相同的部分,這些部分就是一種規定,不能更改,咱們稱之爲:語法

(1)JavaScript對換行,縮進,空格不敏感

　　備註:每一條語句末尾要加上分號,雖然分號不是必須加的,可是爲了程序從此要壓縮,若是不加分號,壓縮以後將不能運行.

(2)全部訂單符號,都是英語的.好比括號,引號,分號.

(3)JavaScript的註釋: 單行註釋: //   多行註釋: /*   */

備註:sublime中,單行註釋的快捷鍵是Ctrl+/,多行註釋的快捷鍵是Crtl+shift+/

JavaScript在網頁中輸出信息的寫法

1.彈出'警告框':alert(英文翻譯爲'警報'): 

2.控制檯輸出: console.log("")

console.log()表示在控制檯中輸出。console表示「控制檯」，log表示「輸出」。

控制檯在Chrome瀏覽器的F12中。控制檯是工程師、程序員調試程序的地方。程序員常用這條語句輸出一些東西，來測試程序是否正確。

用戶輸入:prompt()

prompt()就是專門用來彈出可以讓用戶輸入的對話框.

代碼以下:

<script type="text/javascript">
        var a = prompt('今天是什麼天氣？');
        console.log(a);
</script>

上方的代碼中,用戶輸入的內容,將被傳遞到變量a裏面.

prompt()語句中,用戶無論輸入什麼內容,都是字符串.

alert和prompt的區別:

alert("從前有座山");                //直接使用，不須要變量
var a = prompt("請輸入一個數字");   // 必須用一個變量，來接收用戶輸入的值

直接量:數字和字符串

直接量即常量,也稱爲字面量.看見什麼,它就是什麼.

簡單的直接量有2種:數字,字符串.

(1)數值的直接量的表達很是簡單,寫上去就好了,不須要任何的符號.例如:

alert(886);  //886是數字，因此不須要加引號。

(2)字符串也很簡單,但必定要加上引號.能夠是單詞,句子等.

變量

var是英語'variant'變量的縮寫,後面要加一個空格,空格後面的東西就是'變量名',

定義變量:var就是一個關鍵字,用來定義變量.所謂關鍵字,就是有特殊功能的小詞語.關鍵字後面必定要有空格隔開.

變量的賦值:等號表示賦值,將等號右邊的值,賦給左邊的變量.

變量名:變量名有命名規範,只能由英語字母,數字,下劃線,美圓符號$構成,且不能以數字開頭,而且不能是JavaScript保留字.

PS:1.在JavaScript中,永遠都是用var來定義變量.

      2.下列的單子,,叫作保留字,就是說不容許當作變量名,不用記

abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto
implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile

      3.大寫字母是可使用的,而且大小寫敏感,也就是說A和a是兩個變量.

變量的類型

變量裏面可以存儲數字,字符串等.變量會自動的規矩存儲內容的類型不一樣,來決定本身的類型.

數值型:number

若是一個變量中,存放了數字,那麼這個變量就是數值型的

    var a = 100;            //定義了一個變量a，而且賦值100
    console.log(typeof a);  //輸出a變量的類型

typeof表示獲取變量的類型,語法爲:

typeof 變量

在JavaScript中,只要是數,就是數值型(number)的.不管整浮,浮點數,不管大小,不管正負,都是number類型的.

字符串型:string

var a = "abcde";
    var b = "路飛";
    var c = "123123";
    var d = "哈哈哈哈哈";
    var e = "";     //空字符串

    console.log(typeof a);
    console.log(typeof b);
    console.log(typeof c);
    console.log(typeof d);
    console.log(typeof e);

連字符和加號的區別

鍵盤上的+多是連字符,也多是數字的加號.以下

   console.log("我" + "愛" + "你");   //連字符，把三個獨立的漢字，鏈接在一塊兒了
    console.log("我+愛+你");           //原樣輸出
    console.log(1+2+3);             //輸出6

總結:若是加號兩邊都是數值,此時是加.不然,就是連字符(用來鏈接字符串).

變量值的傳遞(賦值)

語句: a = b;

把b的值賦給a, b不變.

將等號右邊的值,賦給左邊的變量;等號右邊的變量,值不變

舉個特殊的例子:

        var a = "3";
        var b = 2;
        console.log(a-b);

效果: 1

注意:字符串-數值= 數值

 

變量格式轉換

用戶的輸入

咱們在上面的內容講過,prompt()就是專門用來彈出可以讓用戶輸入的對話框.重要的是:用戶無論輸入什麼,都是字符串.

parseInt():字符串轉數字

parseInt()能夠將字符串轉數字.parse表示轉換,Int表示整數(注意Int的拼寫),例如:

parseInt('5');

parseInt()還具備如下特性:

(1)帶有自動淨化的功能;只保留字符串最開頭的數字,後面的中文自動消失.例如:

console.log(parseInt("2018你真帥！！"));

(2)自動帶有截斷小數的功能:取整,不四捨五入.

var a = parseInt(5.8) + parseInt(4.7);
console.log(a);   9
var a = parseInt(5.8 + 4.7);
console.log(a);  10

數據類型

數據類型包括:基本數據類型和引用數據類型

基本數據類型指的是簡單的數據段,引用數據類型指的是有多個值構成的對象.

當咱們把變量賦值給一個變量時,解析器首先要確認的就是這個值是基本類型值仍是引用類型值.

基本數據類型

• number

var a = 123;
//typeof 檢查當前變量是什麼數據類型
console.log(typeof a)
//特殊狀況
var a1 = 5/0;
console.log(typeof e1) //Infinity 無限大. number類型

• string

var str  = '123'
console.log(typeof str)

• boolean

var b1 = false;
console.log(typeof b1)

• null

var c1 = null;//空對象. object
console.log(c1)

• undefined

var d1;
//表示變量未定義
console.log(typeof d1)

 

引用數據類型

• Function
• Object
• Array
• String
• Date

後面會講解.

運算符

js中的運算符跟python中的運算符有點相似,但也有不一樣.所謂運算,在數學上,是一種行爲,經過已知量的可能的組合,得到新的量

1.賦值運算符

以var x = 12 , y = 5來演示示例

2.算數運算符

 var a = 5,b=2

 

 

 3比較運算符

var x = 5;

4.特殊狀況

字符串拼接+字符串運算特殊狀況.python中有拼接字符串更簡便的辦法,其實js中也有,,你們能夠百度搜索es6模板字符串

var  firstName  = '小';
var lastName = '馬哥';
var name = '伊拉克';
var am = '美軍';
// 字符串拼接
var str = "2003年3月20日,"+name+"戰爭爆發，以美軍爲主的聯合部隊僅用20多天就擊潰了薩達姆的軍隊。這是繼十多年前的海灣戰爭後，"+am+"又一次取得的大規模壓倒性軍事勝利。"
var fullStr = str;
console.log(fullStr)

var fullName = firstName +" "+ lastName;
console.log(fullName)

// 不能對字符串進行+運算 只能拼接
var a1 = '1';
var a2 = '2';
console.log(a1+a2)    //12


var b1 = 'one';
var b2  = 'two';

// NaN. ==== not a number 是number類型
console.log(typeof(b1*b2))

數據類型轉換

 語言中咱們的數據類型有不少,在某個頁面中展現的數據類型也不一樣,好比說電話號碼我就要求number類型,而輸入姓名的時候要求string類型.

那麼在適當的狀況下咱們能夠將數據類型進行轉換.

1.將數值類型轉換成字符串類型

隱式轉換

var n1 = 123;
var n2 = '123';
var n3 = n1+n2;
// 隱式轉換
console.log(typeof n3);

強制類型轉換

var n1 = 123;
// 強制類型轉換String(),toString()
var str1 = String(n1);
console.log(typeof str1);

var num = 234;
console.log(num.toString())

2.將字符串類型轉換成數值類型

var  stringNum = '789.123wadjhkd';
var num2 =  Number(stringNum);
console.log(num2)

// parseInt()能夠解析一個字符串 而且返回一個整數
console.log(parseInt(stringNum))
console.log(parseFloat(stringNum));

3.任何數據類型均可以轉化成布爾類型

var b1 = '123'; 
var b2 = 0;
var b3 = -123

var b4 = Infinity; 
var b5 = NaN;

var b6; //undefined
var b7 = null;

// 非0既真
console.log(Boolean(b7))