JS基礎入門篇（一）

時間 2019-11-11

原文原文鏈接

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

1.JS寫在行間html

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

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

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

<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文件中code

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

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

優勢：事件

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

2.註釋

分爲單行註釋和多行註釋。ip

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

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

3.變量

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

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

屬性操做：

如下三種寫法均可以。io

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

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

4.函數

（一）簡介function

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

（二）使用

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


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

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