JS基礎入門篇（一）

時間 2019-12-13

原文原文鏈接

1.JS存放在代碼中的位置

1.JS寫在行間html

<div style="background-color: red;" onclick="alert(1)" >hello world</div>

優勢：直接，簡單
缺點：不方便複用和維護,不符合結構行爲分離規範

2.JS寫在script ( 通常寫在body結束標籤以前 )
由於JS的執行順序，須要將元素加載完成，才能獲取到元素，故通常寫在body結束標籤以前。dom

<body>
        <div id="box">hello</div>
        <div id="box2">world</div>    
        <script>
            document.getElementById("box").onclick = function(){
                alert(1);
            };
            document.getElementById("box2").onclick = function(){
                alert(2);
            };
        </script>
</body>

優勢：只要是在這個頁面中就可使用這段 js。
缺點： 1. 不方便修改維護 2. 不符合規範函數

3.寫在js文件中字體

1.建立一個js文件,寫入js代碼
2.讓html文件和js文件產生關聯,經過script標籤的 src 屬性連接到js文件。code

<body>
        <div id="box">miaov</div>
        <script src="index.js"></script>
</body>

優勢：htm

1.結構 行爲 徹底分離
2.方便修改維護
3.可複用性強

2.JS執行的順序

針對js的存放位置，若是js放在script標籤中，必須放到body結束標籤以前。緣由是js會讀取dom節點，必須等到dom節點都加載完成了，js代碼才取獲得對應節點。事件

若是JS代碼非要放在全部節點以前呢？？？
能夠將script代碼寫到head中，用window.onload把代碼塊包起來放到script中。圖片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #box{
                width:100px;
                height:100px;
                background-color:red;
            }
        </style>
        <script>
            window.onload = function(){
                document.getElementById("box").onclick = function(){
                    alert(1);
                }
            }
        </script>
    </head>
    <body>    
        <div id="box">miaov</div>
    </body>
</html>

以上方法不支持，由於window.onload是等到頁面全部dom節點，圖片資源加載完成才執行的。若是圖片資源不少的話，那麼用戶對頁面的操做就無效了。因此，通常放在body結束標籤以前。ip

3.註釋

分爲單行註釋和多行註釋。資源

//單行註釋
 //單行註釋
 //單行註釋

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

4.變量

變量：可變的量。
做用：複用數據，存儲數據。
申明變量： var 變量名; 以分號結束。只申明一個變量不賦值的話，那這個變量中默認存儲的是undefined
變量命名規範：能夠是數字(1234567890) 字母(abcdefg...)下劃線 ( _ )美圓符( $ )組成。
禁止：
```
1. 不容許數字開頭     
 2. 不容許使用關鍵字
 3. 不容許使用保留字
```

推薦：
駝峯式命名法+語義化單詞
駝峯式命名法:從第二個單詞開始，每一個單詞的首字母大寫。

屬性操做：

如下三種寫法均可以。

box.style["background-color"] = "green";
box["style"]["background-color"] = valStr;
box.style.backgroundColor = "green";

若是[ ]中間沒有用引號包起來,那麼會把中間的內容當作變量處理。
當須要改變的屬性值是一個變量的時候只能使用[ ],方括號中間若是是變量的話，不須要加引號。
當操做屬性的時候屬性名不符合變量命名規範的時候可使用[ ]。
若是必定要使用點( . )的話，須要改變成駝峯式命名法。

5.函數

（一）簡介

函數的做用：代碼塊的複用
函數的分類：
1.有名函數
2.匿名函數

（二）使用

1-有名函數
                聲明:
                    function 函數名(){ 
                        代碼塊 
                    }
                調用:
                    函數名();


2-匿名函數
                聲明: 
                    直接聲明一個匿名函數 會報錯
                調用:
                    能夠直接經過事件調用

eg：
案例一：有名函數的聲明和調用
 案例二：匿名函數直接聲明會報錯，能夠經過事件調用
 案例三：有名函數的錯誤調用，btn.onclick = fn();這樣調用是錯誤的，只會使函數馬上執行，傳給點擊事件的是個null。沒有點擊click按鈕，直接打開就發生變化了。
案例三：有名函數的正確調用，btn.onclick = fn;這樣調用是正確的。點擊click按鈕，紅色方塊才發生變化