JS基礎入門篇（ 一 ）

樑志芳發表於2019-02-16
JS

1.JS存放在程式碼中的位置

1.JS寫在行間

<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檔案中

1.建立一個js檔案,寫入js程式碼
2.讓html檔案 和js檔案產生關聯,通過script標籤的 src 屬性 連結到js檔案。

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

優點：

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結束標籤之前。

3.註釋

分為單行註釋和多行註釋。

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

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

4.變數

  • 變數：可變的量。
  • 作用：複用資料，儲存資料。
  • 申明變數： var 變數名; 以分號結束 。只申明一個變數不賦值的話，那這個變數中預設儲存的是undefined

  • 變數命名規範：可以是數字(1234567890) 字母(abcdefg…)下劃線 ( _ )美元符( $ )組成。
    禁止：

     1. 不允許數字開頭     
 2. 不允許使用關鍵字
 3. 不允許使用保留字
推薦：
駝峰式命名法+語義化單詞
駝峰式命名法:從第二個單詞開始，每個單詞的首字母大寫。
  • 屬性操作 ：

以下三種寫法都可以。

box.style["background-color"] = "green";
box["style"]["background-color"] = valStr;
box.style.backgroundColor = "green";
  1. 如果[ ]中間沒有用引號包起來,那麼會把中間的內容當做變數處理。
  2. 當需要改變的屬性值是一個變數的時候只能使用[ ],方括號中間如果是變數的話，不需要加引號。
  3. 當操作屬性的時候屬性名不符合變數命名規範的時候可以使用[ ]。
  4. 如果一定要使用點( . )的話，需要改變成駝峰式命名法。

5.函式

（一）簡介

  • 函式的作用：程式碼塊的複用
  • 函式的分類：
    1.有名函式
    2.匿名函式

（二）使用

1-有名函式
                宣告:
                    function 函式名(){ 
                        程式碼塊 
                    }
                呼叫:
                    函式名();


2-匿名函式
                宣告: 
                    直接宣告一個匿名函式 會報錯
                呼叫:
                    可以直接通過事件呼叫

eg：
案例一：有名函式的宣告和呼叫
案例二：匿名函式直接宣告會報錯，可以通過事件呼叫
案例三：有名函式的錯誤呼叫，btn.onclick = fn();這樣呼叫是錯誤的，只會使函式立刻執行，傳給點選事件的是個null。沒有點選click按鈕，直接開啟就發生變化了。
案例三：有名函式的正確呼叫，btn.onclick = fn;這樣呼叫是正確的。點選click按鈕，紅色方塊才發生變化

6.innerHTML 和 src

innerHTML:修改雙標籤裡面的內容。
innerHTML舉例：以下程式碼的作用是，點選頁面任何位置，修改紅色方塊的內容。
src：需要注意的是，在js中，img.src獲取到的是絕對路徑，很少進行比較。

7.基礎篇練習

看完以上的小夥伴，可以看兩個例子的效果，試著做一下。
練習一：點選按鈕，設定方塊大小
練習二：點選按鈕，增加或減小字型大小

相關文章