JavaScript 基礎知識

初識`JavaScript`

JavaScript一種指令碼語言，是一種動態型別、弱型別
JavaScript通常用來操作HTML頁面的
html骨架，css是樣式，js是行為

`js`程式碼寫在哪裡

JavaScript程式碼可以寫在頁面的script標籤裡面，或者單獨的js檔案裡面，或者標籤屬性裡面（不推薦）
寫在外部.js字尾檔案裡面，通過script標籤引入，類似於img的src標籤引入
- 在引入js檔案的script標籤裡面，一定不能再寫js程式碼
script標籤可以放置於任何位置，不同位置要注意載入順序，如果沒有什麼特殊要求，通常放在body結束之前。

如果script裡面涉及到操作後面的元素，而script又非得放在前面的話，需要加上window.onload

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div{
            width 
: 100px;
            height: 100px;
            background: red;
        }
    </style>
    <script>
         //如果script裡面涉及到操作後面的元素，而又非得把script放在前面的話，需要加上：
        window.onload = function () {
            alert("1我是寫在head裡面的js");//這裡再寫程式碼（意思是：當整個頁面載入完成之後，再執行這裡的程式碼）
        };//一個頁面中只能出現一次window.onload 

    </script>
</head>
<body>
    <!--<div onclick="alert(1);"></div>-->
    <script src="firstJS.js"></script>
    <script>
         /*
         1.JavaScript 是一種指令碼語言，是一種動態型別、弱型別
         2.JavaScript通常用來操作HTML頁面的
            html骨架，css是樣式，js是行為

        JS程式碼寫在哪裡：
            script標籤裡面
            寫在外部.js字尾檔案裡面，通過script標籤引入
            寫在標籤裡面
        注意：在引入js檔案的script裡面，一定不能再寫js程式碼
              標籤裡面寫js程式碼一般情況下不推薦

         script標籤的方式位置：
            head或者body裡面
            要注意是否需要加上window.onload
            如果說沒有什麼特別的要求，一般script標籤放在body結束之前
        */
         alert(1);//彈窗  用來除錯程式碼
         console.log(2);//列印到控制檯 用來除錯程式碼
    </script>
</body>
</html>

寫`js`程式碼需要注意什麼

註釋裡面是沒有要求的
嚴格區分大小寫
- alert()才是js本身自帶的，Alert()不是自帶的
語句字元都是半形字元（字串裡面可以使用任意字元）
某些完整語句後面要寫分號
程式碼要縮排，縮排要對齊
引號裡面代表字串，字串是沒有程式碼的功能的，所以不需要滿足上述要求。

註釋

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

`js`裡的系統彈窗程式碼

alert("內容")

`js`裡的列印

console.log(1);

`js`獲取元素及修改內容

其實，要操作頁面，就是操作標籤，JS要操作標籤，就要先獲取標籤

獨有標籤的獲取：

document.title  document.title
document.body   document.body.innerHTML 
               document.body.innerText 
document.head   document.head.innerHTML

其他標籤的獲取
- 通過id獲取元素
  - document.getElementById("box");
- 通過class獲取：（不相容IE8及以下）
  - .getElementsByClassName();
- 通過標籤名獲取
  - .getElementsByTagName();
- 通過選擇器的寫法獲取元素：（不相容IE7及以下）
  - .querySelector();
  - .querySelectorAll();
- 通過name獲取
  - .getElementsByName();

注意：除了ID獲取前面必須是document之外，其他的方式，前面可以是某個元素（不能是集合）

修改頁面title資訊
- document.title = "我要把標題改成666";
修改別的標籤的內容，得用innerHTML或者innerText
- innerHTML可以識別標籤
- innerText不能識別標籤

獲取某個確切的元素,可以直接操作這個元素
- document.getElementById("box").innerHTML = "吃驚！";
獲取的是一堆元素的集合，設定操作時要通過下標（索引、序號）拿到對應的某一個再用
- document.getElementsByClassName("box")[0].innerHTML = "美女";
document.write()

在文件流關閉之前，給body部分新增內容,在文件流關閉之後，修改整個HTML的內容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>
    <div id="box"></div>
    <p class="wrap">wrap1</p>
    <p class="wrap">wrap2</p>
    <p>ppp1</p>

    <div id="box1">
        <i class="box1">iii1</i>
        <p class="p">ppp2
            <i class="box1">iii2</i>
        </p>
       <!--#box1 .p .box1 -->
    </div>
    <script>
         /*
        那麼JS如何操作頁面：
            其實，要操作頁面，就是操作標籤，JS要操作標籤，就要先獲取標籤

        js如何獲取獨有標籤
            document.title
            document.head
            document.body

        其他標籤的獲取，id前面必須是document,其他的前面可以是某個元素(id,document)，但不能是集合
                通過id獲取元素，
                    document.getElementById()
                通過className獲取元素(不支援IE8及以下)
                    .getElementsByClassName()
                通過標籤名獲取元素
                    .getElementsByTagName()

                通過選擇器的寫法獲取元素（不相容IE7及以下）
                    .querySelector()
                    .querySelectorAll()
                通過name值獲取
                     document.getElementsByName（）
         */
//         document.title = "我是來改變標題的";
         //修改別的標籤的內容，得用innerHTML(會解析標籤)，innerText（不會解析標籤）
//         document.body.innerHTML = "<b><em>我想給body增加點東西</em></b>";
//        document.body.innerText = "<b><em>我想給body增加點東西</em></b>";

        //獲取的是確切的某個元素，可以直接操作這個元素
        document.getElementById("box").innerHTML = "我是通過id獲取的";

//獲取的是一堆元素的集合，設定操作的時候要通過下標（索引、序號）拿到對應的某一個
        /*document.getElementsByClassName("wrap")[0].innerHTML = "我是通過class獲取的1";
        document.getElementsByClassName("wrap")[1].innerHTML = "我是通過class獲取的2";
        alert(document.getElementsByClassName("wrap").length);//length 長度*/

//        document.getElementsByTagName("p")[0].innerHTML = "我是通過標籤名獲取的1";
//        document.getElementsByTagName("p")[1].innerHTML = "我是通過標籤名獲取的2";
//        document.getElementsByTagName("p")[2].innerHTML = "我是通過標籤名獲取的3";

//        document.querySelector("#box1 .p .box1").innerHTML = "我是iii2";
         //獲取第一個對應的元素
//        document.querySelector("#box1 .box1").innerHTML = "我是iii2";
//　　　　　var oBox = document.getElementsByClassName("box")[0]; 可以用變數來接收指定選取的元素
//　　　　　var oSpan = oBox.getElementsByTagName("span");
//　　　　  alert(oSpan.length);


        document.querySelectorAll("#box1 .box1")[1].innerHTML = "你猜我是哪一個";
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>
    <div>222</div>
    <script>
        /*
        document.write()
            在文件流關閉之前，給body部分新增內容
            在文件流關閉之後，修改整個html的內容

         */
//        document.write("我是新增加的內容");
        window.onload = function () {
            document.write("<b><em>我是新增加的內容</em></b>");
        }
    </script>
</body>
</html>

事件

使用者的操作元素.事件 = 函式；
滑鼠事件
- onclick左鍵單擊
- ondblclick左鍵雙擊
- onmouseenter滑鼠移入
- onmouseleave滑鼠移出

例項

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box{
            width: 100px;
            height: 100px;
            background: yellow;
        }
    </style>

</head>
<body>
    <div id="box"></div>
    <script>
        /*
        所謂事件，是指 JavaScript 捕獲到使用者的操作，並做出正確的響應。
        在事件函式裡面，有一個關鍵字this，代表當前觸發事件的這個元素
        事件：使用者的操作
        元素.事件 = 函式；
        滑鼠事件：
            左鍵單擊 onclick
            左鍵雙擊 ondblclick
            滑鼠移入 onmouseover/onmouseenter ***
            滑鼠移出 onmouseout/onmouseleave ***
         */
        document.getElementById("box").onclick = function () {
            console.log("我被點選了");
//            document.getElementById("box").innerHTML = "哈哈";
            this.innerHTML = "嘻嘻";
            alert("哈哈");
        };
        document.getElementById("box").onmouseenter = function () {
            console.log("我被移入了");
        };
        document.getElementById("box").onmouseleave = function () {
            console.log("我被移出了");
        }
    </script>
</body>
</html>

定義變數

不能使用關鍵字或者保留字（js裡面已經賦予它有意義的詞，或者留著備用的詞）
只能包含數字字母 _ $ 並且不能以數字開頭
嚴格區分大小寫
儘量見名知意
var 變數時並不要求立馬賦值
用,號可以讓一個var定義多個變數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box{
            width: 100px;
            height: 100px;
            background: purple;
        }
    </style>

</head>
<body>
    <div id="box"></div>
    <script>
        /*
        定義變數規則：
            1.不能使用關鍵字或者保留字,（js裡面已經賦予他有意義的詞，或者留著備用的詞）
            2.只能包含 數字 字母 $ _ 並且不能以數字開頭
            3.嚴格區分大小寫
            4.儘量見名知意

            用 ，號可以讓一個var定義多個變數
            var變數時並不要求立馬賦值
         */
//        var oBox = document.getElementById("box");
//        oBox.onclick = function () {
//            console.log("我被點選了");
//            this.innerHTML = "嘻嘻";
//        };
//        oBox.onmouseenter = function () {
//            console.log("我被移入了");
//        };
//        oBox.onmouseleave = function () {
//            console.log("我被移出了");
//        };

//        var a = 10;
//        var b = 20;
//        var a = 10 , b = 10;

        var a , b , c;
        a = 10;
        b = 10;
        c = 10;
        alert( a + b + c );
    </script>
</body>
</html>

`js`操作元素的標籤屬性

規範的標籤屬性：
- . 符號直接操作(可讀可寫)
不規範（自定義）的標籤屬性：
- 獲取getAttribute
- 設定setAttribute
- 移除removeAttribute

注意：所有的路徑/顏色獲取的結果不一定就是你寫的內容

通過ID獲取的元素賦值給變數後，假設修改了ID，這個變數還是表示這個元素

自定義標籤屬性的操作方式，同樣可以操作符合規範的標籤屬性

例項

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>
    <a href="http://www.baidu.com" id="box" class="box" xiaopo="meinv" target="_blank">連結</a>
    <script>
         /*
        js操作元素的標籤屬性：
            規範的標籤屬性：
                . 符號直接操作（可讀可寫）
            不規範（自定義）的標籤屬性：
                獲取：.getAttribute
                設定：.setAttribute
                移除：.removeAttribute

          注意：
          所有的 路徑、顏色 獲取的結果不一定是你寫的內容
          通過id獲取的元素賦值給變數後，假設修改了id，這個變數還是表示這個元素
          自定義標籤屬性的操作方式，同樣可以操作符合規範的標籤屬性
         */
         var oA = document.getElementById("box");
//         alert(oA.id);//可讀
//         alert(oA.target);
//         alert(oA.className);//class屬性 要用className
//        oA.className = "on";
//        oA.target = "_self";
//        alert(oA.xiaopo);
         alert(oA.href);
//        oA.target = "";
//        oA.id = "bbb";
//        oA.target = "_self";
//        alert(oA.getAttribute("xiaopo"));
//        alert(oA.getAttribute("id"));
//        alert(oA.getAttribute("class"));
//        oA.setAttribute("xiaopo","ccc");
//        oA.removeAttribute("xiaopo");
    </script>
</body>
</html>

控制元素的樣式

行內樣式標籤屬性：大部分情況下，js都是通過操作行內樣式達到修改樣式的目的

當我需要單個屬性去修改的時候,我們一般都是直接 . 操作去修改元素的行內樣式
操作複合屬性時，要注意用駝峰寫法（去掉-號，-號後面的第一個單詞大寫）

例項

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>

</head>
<body>
    <div id="box"></div>
    <script>
        /*
        行內樣式標籤屬性：大部分情況下，js都是通過行內樣式來達到修改樣式的目的
         */
        var oBox = document.getElementById("box");
        //當我們需要修改單個屬性的時候，我們一般都是直接.操作去修改元素的行內樣式
        /*oBox.style.height = "200px";
        oBox.style.width = "200px";
        oBox.style.background = "blue";*/
        /*oBox.style.cssText = "width: 200px;height: 200px;background: blue;";*/
         // 操作複合屬性時，要注意用駝峰寫法（去掉-號，-號後面的第一個單詞大寫）
//        oBox.style.marginLeft = "150px";
        oBox.style["margin-left"] = "150px";
    </script>
</body>
</html>

資料型別

number數字
string字串
boolean布林值truefalse
function函式
underfined未定義一個變數宣告之後沒有賦值就是undefined
object在js裡面null屬於物件型別，但是它不具有很多物件的共性，所以很多資料將它歸為單獨一類資料型別null

算數運算子

+ - * /

當不是數字之間的運算的時候
   + 字串拼接
   -/*%  儘量將字串轉換成數字（隱式型別轉換）

 NaN :Not a Number  number型別
   一般在非法運算的時候才會 出現NaN
 isNaN(引數) 非常討厭數字
   首先儘量把引數轉換成數字，然後
     當引數是 數字，返回 false
     當引數不是數字，返回 true

賦值運算子

+= -= *= /= %=


++ -- 兩個都存在隱式型別轉換，會全部轉換為數字
++x x++

比較運算子

< > == <= >= != === !==


== 和 ===的區別
== 只判斷值是否一樣
=== 不僅僅判斷值，還判斷型別是否一樣

邏輯運算子

  針對布林值
  &&  與 兩邊都為真，結果才為真，其他為假
  ||  或 兩邊都為假，結果才為假，其他都是真
  !  非 取反，真變假，假變真

  當邏輯運算子，兩邊不一定是布林值的時候
  && 遇到假就停，但是不會進行型別轉換
  || 遇到真就停，。。。
  ！ 隱式型別轉換，將後面的資料先轉換為布林值再取反

迴圈

for迴圈例項一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>
    <script>

        /*for(var i = 0;i < 10 ; i ++){
            console.log(i);
        }*/
        /*for(var i = 0 ; i < 5 ; i ++){
            for(var j = 0 ; j < 2; j ++){
                console.log(i +";"+ j);
            }
        }*/
        /*for(1;2;4){
            3;
            // 1 - 2 - 3 - 4 - 2 - 3 - 4 - 2 - 3 - 4 - 2 直到2為假
        }*/
        for(var i = 0 ; i < 10 ; i ++){
            if(i === 5){
//                break;//中斷迴圈，終止迴圈，結束迴圈，未執行的程式碼不執行
                continue;//跳出本次迴圈
            }
            console.log(i);
        }
    </script>
</body>
</html>

for迴圈例項二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
            width: 50px;
            height: 50px;
            background: red;
            border-bottom: 1px solid white;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        var oLi = document.getElementsByTagName("li");
        var length = oLi.length;
//        alert(length);
        /*oLi[0].onclick = function () {
            alert(0);
        };
        oLi[1].onclick = function () {
            alert(1);
        };
        oLi[2].onclick = function () {
            alert(2);
        };
        oLi[3].onclick = function () {
            alert(3);
        };*/
        for(var i = 0; i < length; i ++){
            oLi[i].index = i;//index aa  bb  dd 自定義變數
//            oLi[0].index = 0;
//            alert(i);//0 1 2 3
            oLi[i].onclick = function () {
                //迴圈完了的i
                alert(this.index);
//                alert(i);
            }
        }
        /*for(var i = 0; i < 10; i ++){
            console.log(i);
        }
        alert(i);//10*/

    </script>
</body>
</html>

while迴圈例項

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>
    <script>
//        var i = 0;
        /*for(;i<5;i++){
            console.log(i);
        }*/
        /*while(i<6){
            console.log(i);
            i ++;
        }*/

        var i = 40;
        /*while(i<5){
            console.log(i);
            i ++;
        }*/
        do{
            console.log(i);
            i++;
        }while(i<5);

    </script>
</body>
</html>

switch

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>
    <script>
        /*var name = "55";
        if(name === "小紅"){
            alert(name + "好漂亮");
        }else if(name === "小明"){
            alert(name + "超級帥");
        }else if(name === "東方"){
            alert(name + "很帥");
        }else{
            alert("你是誰");
        }*/

        //全等判斷
        var name = "小紅";
        switch(name){//你要判斷的變數
            case "小紅":
                alert(name + "好漂亮");
                break;
            case "小明":
                alert(name + "超級帥");
                break;
            case "東方":
                 alert(name + "很帥");
                 break;
            default:
                alert("你是誰");
                break;

        }
    </script>
</body>
</html>

`if`條件

當if的條件 運算完後不是布林值的時候，會被強制性的轉換為布林值
哪些值，在轉換為布林值的時候為false
    false          boolean
    0              number
    ""             string
    null           object
    undefined      undefined
    NaN            number
 在if裡面，能用布林值做條件判斷的時候，不要用其他的來代替，因為強制資料型別的轉換需要耗費時間
 在兩個值比較的時候，能用三等判斷的時候，就用三等判斷

例項：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>
    <script>
        /*
        if ==> 布林值
        判斷符
            > < >= <= == != !== ===
            ==   只判斷值是否一樣
            ===  不僅僅判斷值，還判斷型別是否一樣
        當if的條件 運算完後不是布林值的時候 會被強制性的轉換為布林值
        哪些值，在轉換為布林值的時候為false
            0         number
            false     boolean
            ""        string
            null      object/null
            undefined undefined
            NaN       number

            NaN :Not a Number   number型別
                 一般在非法運算的時候才會 出現NaN
             isNaN(引數) 非常討厭數字
                首先儘量把引數轉換成數字，然後
                    當引數是 數字，返回 false
                    當引數不是數字，返回 true

            在if裡面，能用布林值做條件判斷的時候，不要用其他的來代替，因為強制資料型別的轉換需要耗費時間
        在兩個值比較的時候，能用三等判斷的時候，就用三等判斷
         */
        /*if(3 === "3"){
             //這裡的程式碼只有當條件為true的時候才執行
            alert("真");
        }else{
             //這裡的程式碼只有當條件為false的時候才執行
            alert("假");
        }*/
//        if(){}else{}

        //當真語句只有一行的時候，可以去掉大括號，還可以直接寫在條件的後面
        /*if(3<5){
            alert("真");
        }*/
        /*if(3<5)alert("真");*/

        /*if(5<4){
            alert(1);
        }else{
            alert(0);
        }*/
        //真語句一行，假語句一行
//        5<4?alert(1):alert(0);//條件?真語句:假語句;
//        var x;
        /*if(5<6){
            x = 10;
        }else{
            x = 20;
        }*/
        //當三目的真假語句都是給同一個變數賦值的時候，可以更近一步簡寫
//        x = 5 < 4?10:20;
//        alert(x);
        /*var x = 50;
        if(x>60){
            alert("x大於60");
        }else if(x > 40){
            alert("x大於40");
        }else if(x > 20){
            alert("x大於20");
        }else if(x >= 0){
            alert("x大於等於0");
        }else if(x < 0){
            alert("x小於0");
        }*/

        /*if(null){
            alert(1);
        }else{
            alert(0);
        }*/
        /*var a;
        var x = a +1;
        alert(a);
        alert(x);
        alert(typeof x);*/
        if(isNaN("5")){
            alert(1);
        }else{
            alert(0);
        }


    </script>
</body>
</html>

函式

有名函式
   有名字的函式
   可以加括號自執行，執行的位置可以在定義的前面
   可以把名字放在事件後面，充當一個事件函式，事件觸發的時候執行
   fn();
     function fn() {
       alert(1);}
    
     document.getElementById("box").onclick = fn;
        function fn(){
           alert(1); }
匿名函式
   沒有名字的函式
   匿名函式不能單獨出現 一般充當事件函式
   window.onclick = function{
     alert( 1 );
     }

函式表示式：
 特點：可以在後面加括號立即執行
 （） + - ! ~ 可以將匿名函式變為函式表示式

例項：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>
    <script>
        /*
        函式表示式：
            特點：可以在後面加括號立即執行
            （） + - ! ~ 可以將匿名函式變為函式表示式
         */

        /*fn();
        function fn() {
            alert(2);
        }//函式定義 可以在定義前加括號執行，也可以在定義後加括號執行
//        fn();*/

        //函式表示式
//        fn1();
        /*var fn1 = function () {//通過var 的函式，只能在後面執行
            alert(3);
        };
        fn1();*/

        /*var fn2 = function () {
            alert(4);
        }();*/

        /*!function () {
            alert(6);
        }();*/

        /*(function () {
            alert(7);
        }());*/

        /*+function () {
            alert(6);
        }();*/

        /*~function () {
            alert(6);
        }();*/

        -function () {
            alert(6);
        }();

    </script>
</body>
</html>

我們在使用函式時，加括號導致的函式執行時，可以傳遞引數
  形參
  實參
  不定參

例項一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>
    <script>
        /*
        我們在使用函式時，加括號導致的函式執行時，可以傳遞引數
               形參
               實參
               不定參
         */
//        fn(8);//執行函式時 可以傳遞 實參(用已知的變數 / 具體的資料)
        /*var s = 20;
        fn(s);*/
        function fn(q) {//形參（相當於函式區域性的變數，命名規則和var相同）(定義，無中生有)
//            var q;
            alert(q);
        }

        //形參 / 實參都可以有多個，用 , 隔開
        /*sum(4,5);
        function sum(a,b) {
            alert(a+b);
        }*/

        //實參和形參個數不一定非得一樣，但是不一樣的時候要注意一一對應的關係
        /*sum(4,5,6,7);
        function sum(a,b) {
            alert(a+b);
        }*/


        //形參多了的話，沒有對應的那些形參，值就是undefined
        sum(1,2);
        function sum(a,b,c) {
//            var c;
            //給形參新增預設值
            a = a || 0;
            b = b || 0;
            c = c || 0;
            alert(c);
            alert(a+b+c);
        }



    </script>
</body>
</html>

例項二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>
    <script>
        sum(1,2,3,4,5,6,7,8,9);
        function sum() {
            //不定參 arguments,儲存著所有 實參 的集合
            // 無論有沒有形參，實參都會被存在 不定參 裡面
            /*alert(arguments.length);
            alert(arguments[3]);*/
            var x = 0;
            for(var i = 0,len = arguments.length; i < len; i ++){
                x += arguments[i];
            }
            alert(x);
        }
    </script>
</body>
</html>

作用域：
javascript解析順序
   1.（定義）先解析var function 引數
       a.該步驟的var只定義變數，後面的=賦值不解析
       b.該步驟的函式只定義函式，函式的執行不解析
       c.重名的只留一個，var 和函式重名  函式優先
   2.（執行）再從上至下執行其他程式碼
  
   作用域：
         作用：讀寫
         域：範圍，區域
       解析：
         從上至下
           1 找 var 定義函式 引數
           2 執行
例項

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>
    <script>
        /*
        javascript解析順序
            1.（定義）先解析var function 引數
                a.該步驟的var只定義變數，後面的=賦值不解析
                b.該步驟的函式只定義函式，函式的執行不解析
                c.重名的只留一個，var 和函式重名  函式優先
            2.（執行）再從上至下執行其他程式碼

            作用域：
                作用：讀寫
                域：範圍，區域
            解析：
                從上至下
                    1 找 var 定義函式 引數
                    2 執行
         */

        /*alert(a);
        var a = 5;
        alert(a);*/
        /*
        1 找
            a = undefined;==>a = 5;
        2 執行
            alert(a); == > a = undefined;
            a = 5;
            alert(a);== > 5
         */

        /*alert(a);
        function a() {
            alert(6);
        }
        alert(a);*/
        /*
        1 找
            a = function a() {
                    alert(6);
                }
        2 執行
            alert(a);== > 函式塊
            alert(a);== > 函式塊
         */

        /*alert(a);
        function a() {
            alert(6);
        }
        a();
        alert(a);*/
        /*
        1 找
            a = function a() {
                    alert(6);
                }
        2 執行
            alert(a); == >函式塊
            a();函式呼叫 是新的作用域 只要是作用域 解析時就要分兩步
                1 找
                2 執行
                    alert(6); == > 6
              alert(a);== > 函式塊
         */

        /*alert(a);
        function a() {
            alert(6);
        }
        var a = 520;
        alert(a);*/
        /*
        1 找
            a = function a() {
                    alert(6);
                } == > a = 520;
            a = undefined //重名 被幹掉
        2 執行
            alert(a); == >函式塊
            a = 520;
            alert(a); == > 520
         */

        /*var a = 1;
        function fn() {
             alert(2);
             var a = 3;
        }
         fn();
         alert(a);*/
         /*
         1 找
            a = und; == > a = 1
            fn = function fn() {
                     alert(2);
                     var a = 3;
                 }
         2 執行
            a = 1;
            fn();函式呼叫
                1 找
                    a = und;==>a = 3;
                2 執行
                    alert(2); == > 2
                    a = 3;
              alert(a);==> 1
          */

         /*var a = 1;
         function fn() {
             alert(2);
             a = 3;
         }
         fn();
         alert(a);*/
         /*
         1 找
            a = und;==>a = 1;==>a = 3;
            fn = function fn() {
                     alert(2);
                     a = 3;
                 }
         2 執行
            a = 1;
            fn();
                1 找
                2 執行
                    alert(2); ==>2
                    a = 3;(此函式沒有 會從裡往外找 去父級的作用域)
             alert(a);== > 3
          */

        /*var a = 1;
        function fn( a ) {
            alert(2);
            a = 3;
        }
        fn();
        alert( a );*/
        /*
        1 找
            a = und；==>a = 1;
            fn = function fn( a ) {
                    alert(2);
                    a = 3;
                }
        2 執行
            a = 1;
            fn();
                1 找
                    a = und; ==>a = 3;
                2 執行
                    alert(2);==>2
                    a = 3;
            alert( a );== >1
         */

         /*var a = 1;
         function fn( a ) {
             alert(2);
             a = 3;
         }
         fn( a );
         alert( a );*/
         /*
         1 找
            a = und;==>a = 1;
            fn = function fn( a ) {
                     alert(2);
                     a = 3;
                 }
         2 執行
            a = 1;
            fn( a );=>fn(1)
                1 找
                    a = und ==>a = 1; ==>a = 3;
                2 執行
                    a = 1;
                    alert(2); ==>2
                    a = 3;
            alert( a );==>1
          */

         /*var a = function () {
            alert( 1 )
         };
         function a() {
            alert( 2 )
         }
         a();*/
         /*
         1 找
            a = und;//重名 被幹掉
            a = function a() {
                    alert( 2 )
                 } == > a = function () {
                    alert( 1 )
                 };
         2 執行
            a = function () {
                    alert( 1 )
                 };
             a();
                1 找
                2 執行
                  alert( 1 )；==> 1
          */
    </script>
</body>
</html>

`number`方法

number()——引數中必須能被轉換成數字，否則返回NaN
parseInt()——將引數轉換為數字，整數部分遇到不是數字就停
parseFloat()——將引數轉換為數字，直到小數部分遇到不是數字就停
num.toFixed()——四捨五入保留兩位小數，返回字串
NaN(Not a Number)NaN自己不等於自己

`Math`數學方法

Math.pow(16,2)——16^2 = 256
Math.round(0.52)——四捨五入（取整）
Math.ceil(0.1)——向上取整
Math.floor(0.9)——向下取整
Math.max()——取引數中最大的值
Math.min()——取引數中最小的值
Math.random()——0-1的隨機數
Math.PI()—— π

`string`字串

索引、下標、偏移值——從0開始

str[index]——通過索引取字串
str.length——獲取長度空格也算
toString——轉換字串
str.substring(2,6)——擷取字串會比較引數值小的引數在前面負數變為0
str.slice()——切片不會交換位置負數倒著數從右到左
str.split()——字串切割返回陣列
str.indexOf()——查詢字串成功返回索引反之返回-1

alert(str.indexOf("xiaopo",str.indexOf("xiaopo")+1));
str.toUpperCase()——全部轉換到大寫
str.toLowerCase()——全部轉換到小寫

例項

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>
    <script>
        /*
        string 字串
            索引、下標、偏移量——從0開始
            str[index];——通過索引取字串
            str.length;——獲取長度  空格也算
            value.toString();——轉換字串
            str.substring();——擷取字串 會比較引數值的大小，
             小的引數在前面,負數變為0
            str.slice()——切片,不會交換位置，負數從右到左數
            str.split()——字串切割，返回陣列
            str.indexOf——查詢字串，成功返回索引，反之返回-1
            str.toUpperCase()——全部轉換大寫
            str.toLowerCase()——全部到小寫
         */
        /*var str = "ni shi shui";
//        alert(str.length);//可讀
//        alert(str[1]);//通過下標訪問子元素
        str[1] = "Y";//只能讀，不能寫（修改）
        console.log(str);*/

        /*var a = 456;
        alert(a.toString());
        alert(typeof a.toString());*/

        var str = "ni shi shui";
        /*console.log(str.substring(1,5));
        console.log(str.substring(8,5));
        console.log(str.substring(-2,5));*/
        /*console.log(str.slice(1,5));
        console.log(str.slice(-6,-3));*/
//        console.log(str.split("i"));
//        alert(str.indexOf("i"));
//        alert(str.indexOf("H"));
//        alert(str.indexOf("i",2));
        console.log(str.toUpperCase());
        console.log(str.toLowerCase());
    </script>
</body>
</html>

陣列

主要存放資料
.push往陣列後面追加
.unshift往陣列前面追加
.pop刪除陣列最後一位
shift刪除陣列的第0位

例項

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>
    <script>
        /*
            陣列 主要存放資料的
               arr.length
                   檢視陣列的個數
               arr[]
                   可以讀可寫
               arr.push
                    在後面新增 能同時新增多個值
               arr.unshift()
                   在前面新增  能同時新增多個值
               arr.pop()
                   刪除陣列的最後一個
               arr.shift()
                   刪除陣列的第一個
               arr.splice()
                   (0, 1) 從第0位開始刪除第一個 返回刪除的那個
                   (2, 3, 'a') 從第二位開始後面三位全部替換成 a
                   (2, 0, 'a') 第二位開始前面插入 a
               arr.sort()
                   順序來排序
               arr.reverse()
                   倒序排序
               arr.join()
                   arr.join('a')  以`a`為界限拼接字串
        */
        /*var arr = ["xiaopo",12,true];
//        alert(arr.length);
//        alert(arr[1]);//可讀
        arr[1] = "haha";//可以寫（修改）
        console.log(arr);
        console.log(arr.join("你好"));
        console.log(typeof arr.join());*/

         //以建立物件的形式 建立陣列
        /*var arr = new Array();
        arr[0] = "nihao0";
        arr[1] = "nihao1";
        arr[2] = "nihao2";
        arr[3] = "nihao3";
        console.log(arr);*/

        /*var arr = [[1,2,3],4,6,[4,8,9]];
//        alert(arr.length);
        alert(arr[0][1]);*/

        /*var arr = ["花花","草草","樹樹","木木"];
        console.log(arr);
//        arr.push("風","雨");//往陣列後面 追加
//        console.log(arr);
//        arr.unshift("雷","電");//往陣列前面 追加
//        arr.pop();//刪除陣列最後一位
//        arr.shift();//刪除陣列的 第0位
//        arr.splice(3);//陣列的長度為3    ****
//        arr.splice(1,2);//從下標1開始 刪除2位  ****
        arr.splice(0,2,"風");//從下標0開始 刪除2位 新增元素  ***
        console.log(arr);*/

        var arr = [1,6,8,2,-8];
//        arr.sort();//從小到大
//        arr.sort().reverse();//從大到小
//        console.log(arr);

        arr.sort(function (a,b) {
//            return a-b;//從小到大
//            return b-a;//從大到小
//            return 1;//倒敘
            return -1;
        });
        console.log(arr);

    </script>
</body>
</html>

時間物件

.getFullYear()
.getMonth()
.getDate()
.getHours()
.getMinutes()
.getSeconds()
.getDay()

例項

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>
    <script>
        var data = new Date();
//        var strap = data*1;
//        var strap = data.getTime();
//        alert(strap);

        var year = data.getFullYear();//獲取年份
        var month = data.getMonth()+1;//獲取月份 取值為0~11之間的整數
        var date = data.getDate();//獲取日數 取值為1~31之間的整數
        var hour = data.getHours();//獲取小時數
        var min = data.getMinutes();//獲取分鐘數 取值為0~59之間的整數
        var sec = data.getSeconds();// 獲取秒數 取值為0~59之間的整數
        var day = data.getDay();//獲取周幾 取值為0~6之間的整數
        document.body.innerHTML = year + "年"+ month + "月" + date + "日" + hour +"時"+ min +"分"+ sec+"秒" + "星期"+day;

    </script>
</body>
</html>

JSON

JSON:一種互動的格式，所有的語言基本上都有字串，可以傳遞
js物件:是一種js資料型別，是js特有的，無法傳遞互動資料

JSON語法規則：
1.json資料格式的屬性（鍵和字串）的值都為雙引號
2.值:整數、浮點數（小數）、字串、布林、陣列、物件（除了undefined/NaN）

JSON用js定義：
通過字串來定義
通過js物件來定義，最後傳輸的時候將物件轉換為字串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>
    <script>
        /*
            JSON:輕量級的資料互動格式，它實際在傳輸的時候都是字串
            ****JSON:一種互動的格式，所有的語言基本上都有字串，可以傳遞
            js物件:是一種js資料型別，是js特有的，無法傳遞互動資料

            JSON語法規則：
             1.json資料格式的屬性（鍵和字串）的值都為雙引號
             2.值:整數、浮點數（小數）、字串、布林、陣列、物件（除了undefined/NaN）

             JSON用js定義：
             通過字串來定義
                    var obj = '{"name": "xiaopo"}';
             通過js物件來定義，最後傳輸的時候將物件轉換為字串
                    var obj = {"name": "xiaopo"};
                    JSON.stringify(obj)
         */
       /* var obj1= {"name": "xiaopo","sex": "woman","age": "18"};
//        var obj2 = '{"name": "xiaopo","sex": "woman","age": "18"}';
        var obj2 = JSON.stringify(obj1);
        console.log(obj1);
        console.log(typeof obj1);
        console.log(obj2);
        console.log(typeof obj2);*/

         /*JSON字串解析js物件*/
         var obj1 = '{"name": "xiaopo","sex": "woman","age": "18"}';
         var obj2 = JSON.parse(obj1);
         console.log(obj1);
        console.log(typeof obj1);
        console.log(obj2);
        console.log(typeof obj2);
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>
    <script>
        var obj = {"name": "xiaopo","sex": "woman","age": "18"};
        /*console.log(obj);
        console.log(obj.name);
        console.log(obj.length);//undefined*/
        for(var key in obj){
            console.log(key,obj[key]);
        }//key是{}裡的屬性名稱，obj[key] {}裡面屬性的值
    </script>
</body>
</html>

定時器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>
    <script>
       /* function fn() {
            console.log(1);
        }
//        fn();
//        setTimeout(fn,2000);//延遲定時器 2000毫秒後執行一次且只執行一次
        setInterval(fn,2000);//隔2000毫秒一直不停地 在執行*/

       setInterval(function () {
           console.log(2);
       },13);
//       setInterval(函式，時間)

        var x = str.split("value")
        arr.join()
    </script>
</body>
</html>

清除定時器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div{
            width: 300px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            border: 1px solid red;
            margin: 50px auto;
            font-size: 13px;
        }
        span{
            color: red;
            font-size: 20px;
            font-weight: bold;
        }
    </style>

</head>
<body>
    <div id="box">
        <p>
            404,此頁面找不到，頁面將在<span id="timer">4s</span>後跳轉到百度首頁
        </p>
    </div>
    <script>
        var timer = document.getElementById("timer");
        var num = 4;
        var time;
        time = setInterval(function () {
            num --;
            timer.innerHTML = num + "s";
            if(num === 1){
                clearInterval(time);
                window.location.href = "http://www.baidu.com";
            }
//            console.log(num);
        },1000)
    </script>
</body>
</html>

JavaScript 基礎知識

初識JavaScript

js程式碼寫在哪裡

寫js程式碼需要注意什麼

註釋

js裡的系統彈窗程式碼

js裡的列印

js獲取元素及修改內容

事件