JS(JavaScript)

1、JavaScript簡介
一、JS介紹

JavaScript，簡稱JS
JS是由網景公司提供的一門語言

JS是一門嵌入在瀏覽器中執行的腳本語言（一段小程序）
主要做用：用於實現網頁中的動畫效果和實現表單驗證
JS能夠運行在服務器端（Node.js）

二、JS的特色

JS是一門直譯式的語言（JS不須要編譯,執行的就是源代碼）
JS是一門基於對象的語言（JS能夠經過某些機制模擬面向對象）
JS是一門弱類型的語言（Java是強類型）
    Java: 
        int number = 100;
        boolean flag = true;
        String str = "abc";
    JS:
        var x; //undefined，undefined
        x = 100; //number
        x = "abc"; //string
        x = true; //boolean
        x = []; //object

三、JS的優點

JS具備良好的交互性(提出初衷,嵌入在瀏覽器中,可以提升用戶體驗)
JS具備必定的安全性(運行在瀏覽器內部,好比,不能訪問硬盤)
JS具備跨平臺性
    JS語言具備跨平臺性,是由於有瀏覽器

四、如何在HTML中引入JS？
4.1.方式一: 在head或者body內部能夠添加一個script標籤

在script標籤內部能夠直接書寫JS代碼
<!-- 方式一: 在script標籤內部直接書寫JS代碼
    type:能夠省略,指定語言類型是JS -->
<script type="text/javascript">
    // alert("Hello JS...111"); //彈出一個警告框
    console.log("Hello JS...111"); //輸出內容到瀏覽器的控制檯
</script>

4.2.方式二: 在head或者body內部能夠添加一個script標籤

在script標籤經過src屬性,能夠引入外部的JS文件

<!-- 方式二: 引入外部的JS文件 -->
<script src="js/demo.js"></script>

須要注意的是,第二種方式script標籤內部不要寫JS代碼,寫了也不會執行!
<script src="js/demo.js">
    console.log("Hello JS...333");//不會執行!
</script>

4.3.方式三:將JS代碼寫在標籤上

<!-- 方式三: 將JS代碼寫在html中的標籤上 -->
<input type="button" value="別點我~~~"
    onclick="alert('不讓你點,你非要點~~~')" />

2、JS的語法
一、JS的註釋

// 單行註釋
/* 多行註釋 */

二、JS數據類型
2.1.基本數據類型

1)數值類型(number)
    在JS的底層,全部的數值都是浮點型
    但在處理和顯示的過程當中,若是能夠顯示爲整型,會自動的在整型和浮點型之間進行轉換
    Infinity(正無窮大)
    -Infinity(負無窮大)
    NaN(Not a Number)非數值
    
2)字符串類型(string)
    JS中的字符串類型是基本數據類型,字符串能夠使用雙引號或者單引號引發來
    例如:
        var str1 = "Hello JS";
        var str2 = 'Hello JS';
        console.log( typeof str1 ); // string
        console.log( typeof str2 ); // string
    JS中提供了字符串的包裝對象--String
        var str3 = new String("Hello JS");
        console.log( typeof str3 ); // object
    str1和str2也能夠當作對象使用,在使用時,和str3沒有什麼區別
    
3)布爾類型(boolean)
    布爾類型值: true 和 false
    
4)undefined類型
    undefined 類型的值只有一個，就是undefined
    undefined: 表示聲明瞭變量,可是沒有爲變量賦值,該變量的值就是undefined
    undefined 不能調用屬性或者方法,不然會拋出異常!
    
5)null類型
    null類型的值也只有一個,就是null。
    null: 表示空值,能夠做爲函數的返回值,表示函數返回的是一個空的對象
    null不能調用屬性或者方法,不然會拋出異常!

2.2.複雜數據類型

對象,數組,函數

三、JS的變量聲明

JS中是經過var關鍵字聲明變量,經過var聲明的變量不區分類型,能夠指向任意的數據
    var s1 = "Hello World";
    s1 = 123;
    s1 = false;
    s1 = [];
    s1 = function(){}
JS中有自動斷句功能,即便一行後面不加分號,也能夠正常執行,可是建議加上分號;
JS中若是重複聲明變量,也不會報錯, 由於JS中聲明一個已存在的變量不會生效;
    var x = "abc"; //var x; x = "abc";
    var x = 123; //var x; x = 123;
    alert(x);

四、JS的運算符

算術運算符: +，-，*，/，%，++，--
賦值運算符: =，+=，-=，*=，/=，%=
比較運算符: ==，!=，>，>=，<，<=
位運算符: & ， |
邏輯運算符: && ，||   ( false && 表達式, true || 表達式 )
前置邏輯運算符: ! (not)
三元運算符: 表達式 ? 表達式1 : 表達式2
。。。

五、JS的語句
5.1.if分支

if(){...}
if(){...}else{...}
if(){...}else if(){...}else{...}

5.2.switch分支

switch(x){
    case opt1:
        代碼塊;
        break;
    case opt2:
        代碼塊;
        break;
    ...
    default:
        代碼塊;    
}

5.3.循環結構

for(){}
while(){}
do..while(){}

六、JS數組

JS的數組聲明方式:
    //聲明一個空數組,長度爲零
    var arr1 = []; //java中: int[] numbers = {10,8,45,99};
    //聲明一個具備初始值的數組
    var arr2 = [100,"abc",false,new Date()];
    //聲明一個空數組,長度爲零
    var arr3 = new Array();
    //聲明一個具備初始值的數組
    var arr4 = new Array(100,"abc",false,new Date());
    //指定長度的數組(只有一個參數而且是數值,這個數值是長度)
    var arr3 = new Array(10);
    var arr3 = new Array("abc");

JS數組的特色:
    1) JS中的數組能夠存儲任意類型的數據
    2) JS數組的長度能夠被任意改變

七、JS函數

JS的函數至關於Java中的方法
就是一個具備功能的代碼塊,經過函數名能夠反覆執行!
聲明方式1:
    function 函數名([參數列表]){
        函數體...
    }
    
聲明方式2:
    var 變量/函數名 = function([參數列表]){
        函數體...
    }

若是是隻須要執行一次的函數，能夠聲明爲匿名函數
(function([參數列表]){
    函數體
})([參數列表]);

3、JS的DOM操做

DOM: Document Object Model,文檔對象模型
其實就是JS專門爲操做html元素所提供的一套API。

一、獲取html元素

1) document.getElementById(id值);
-- 經過元素的id屬性值獲取一個html元素，返回值就是這個元素所對應的JS對象

2) document.getElementsByTagName(標籤名);
-- 經過元素名稱,獲取該名稱對應的全部元素組成的數組,能夠經過數組[下標]的形式獲取其中的每個元素,也能夠經過循環遍歷。

3) document.getElementsByClassName(class值);
-- 經過元素的class屬性值,獲取該class值對應的全部元素組成的數組,能夠經過數組[下標]的形式獲取其中的每個元素,也能夠經過循環遍歷。

4) ele.parentNode -- 獲取當前元素的上級元素(父元素)

5) ele.innerHTML -- 獲取元素的全部內容, 或者設置元素的內容(原內容會被覆蓋)

6) ele.value -- 獲取或設置表單項元素的value值

二、增刪改查元素

1)建立一個html元素
document.createElement(元素名/標籤名);
-- 建立一個指定名稱的元素,返回值就是這個建立的元素所對應的JS對象
2)添加子元素
parentEle.appendChild( childEle );
-- 父元素調用方法添加一個子元素到父元素內部

3)刪除子元素
parentEle.removeChild( childEle )
-- 父元素調用方法刪除內部的子元素