javascript

Web前端有三層：

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

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

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

JavaScript和ECMAScript的關係

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

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

ECMAScript不是一門語言，而是一個標準。符合這個標準的比較常見的有：JavaScript、Action Script

 

JavaScript是前臺語言

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

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

 

JavaScript的組成

JavaScript基礎分爲三個部分：

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

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

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

 

JavaScript的特色

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

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

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

 

在頁面中，咱們能夠在body標籤中放入<script type=」text/javascript」></script>標籤對兒，<script type=」text/javascript」></script>標籤對兒

 

alert語句

<script type="text/javascript">
       alert("小馬哥");
</script>

alert（英文翻譯爲「警報」）的用途：彈出「警告框」。

 

語法規則

學習程序，是有規律可循的，就是程序是有相同的部分，這些部分就是一種規定，不能更改，咱們成爲：語法。

（1）JavaScript對換行、縮進、空格不敏感。

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

（2）全部的符號，都是英語的。好比括號、引號、分號。

（3）JavaScript的註釋：

　　單行註釋：

// 我是註釋

多行註釋：

/*
    多行註釋1
    多行註釋2
*/

 

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

彈出警告框：alert("")

控制檯輸出：console.log("")

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

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

 

用戶輸入：prompt()語句

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

代碼以下：

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

 

 

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

alert和prompt的區別：

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

 

直接量：數字和字符串

「直接量」即常量，也稱爲「字面量」。看見什麼，它就是什麼。

簡單的直接量有2種：數字、字符串。

（1）數值的直接量的表達很是簡單，寫上去就好了，不須要任何的符號。例如：

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

（2）字符串也很簡單，但必定要加上引號。能夠是單詞、句子等。

變量

變量的定義和賦值

var是英語「variant」變量的縮寫。後面要加一個空格，空格後面的東西就是「變量名」，

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

• 變量的賦值：等號表示賦值，將等號右邊的值，賦給左邊的變量。

• 變量名：咱們能夠給變量任意的取名字。

 

PS：在JavaScript中，永遠都是用var來定義變量，

變量要先定義，才能使用。好比，咱們不設置變量，直接輸出：

 

 var a;   // 定義
    a = 100;  //賦值
    console.log(a);  //輸出100

有經驗的程序員，會把定義和賦值寫在一塊兒：

var a = 100;    //定義，而且賦值100
console.log(a);  //輸出100

 

變量的命名規範

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

下列的單詞，叫作保留字，就是說不容許當作變量名，不用記：

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

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

var A = 250;    //變量1
    var a = 888;    //變量2

變量的類型

變量裏面可以存儲數字、字符串等。變量會自動的根據存儲內容的類型不一樣，來決定本身的類型。

 

數值型：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);

效果：（注意，字符串 - 數值 = 數值）

 

變量格式轉換

用戶的輸入

咱們在上面的內容裏講過，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

 

數據類型

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

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

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

1.基本數據類型

• 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
• Arrray
• String
• Date

function add(x,y){
    alert (x+y);
    return x+y;
}
    var sum = add(1,2);
    console.log(sum);

 

<script>
　　　　//函數對象

        var add = function() {
        alert(111);
        return 1;
        };
    console.log(typeof add);
    console.log(add);
</script>

        var arr = ['zhh','zhangqiang','xihu'];
        console.log(arr);
        var arr1 = [];
        arr1[0] = 'xxxx';
        console.log(arr1);

array

//concat
var north = ['北京','山東','天津'];
var south = ['東莞','深圳','上海'];
var newCity = north.concat(south);
console.log(newCity)

//push  相似append
var arr = ['張三','李四','王文','趙六'];
arr.push('alex');

//shift  移除第一個元素
arr.shift();

// unshift  第一個位置插入元素
arr.unshift('zhh')

數組的經常使用方法

var arr = ['張三','李四','王文','趙六'];
for(var i = 0; i < arr.length; i++){
    console.log(arr[i]);
    document.write(arr[i]+' ');

循環元素

 

運算符

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

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

 

 

2.算數運算符

var a = 5,b=2

 

3.比較運算符

var x = 5;