跳至內容

網頁程式設計/JavaScript

Add links
來自華夏公益教科書，開放的書籍，面向開放的世界

資源

JavaScript 通常被視為客戶端網頁程式設計的關鍵部分。

JavaScript 是一種指令碼語言。當附加到網頁 (HTML) 時，它會被網路瀏覽器解釋，並且可用於透過響應各種事件來操作網頁。傳統上，JavaScript 在客戶端執行，以建立動態行為，例如表單驗證，以使頁面更具互動性。最近，JavaScript 越來越多地用於進行非同步網路請求 (ajax) 並在伺服器上處理網路請求 (node.js)。

生命週期

[編輯 | 編輯原始碼]

Hello world 一個 JavaScript 程式是一個包含 JavaScript 程式碼的純文字檔案。當指令碼檔案（程式碼）載入時，JavaScript 直譯器會按順序解析檔案中的語句並執行操作。如果語句定義了一個函式，直譯器會記住定義，並且僅在呼叫該函式時執行該函式。以下 JavaScript 程式碼定義了一個函式，該函式使用 alert() 函式說“Hello”。當指令碼載入時，它會執行一個語句，該語句呼叫 sayHello() 函式，然後它會執行函式定義中的內容。

function sayHello(){
    alert("Hello!");
}

sayHello();

客戶端 JavaScript 檔案始終附加到 HTML 檔案，這允許指令碼訪問表示頁面的物件 (DOM)。通常，我們在指令碼中首先做的事情是將函式附加到頁面元素，以處理各種事件。以下 HTML 程式碼定義了一個按鈕，幷包含一個 demo.js 檔案，透過處理事件使頁面具有互動性。

<!DOCTYPE html>
<html>
<head>
  <script src="demo.js" type="text/javascript"></script>
</head>
<body>
<button id="say_hello">Say Hello</button>
</body>
</html>

demo.js 檔案包含以下內容。

window.onload = function(){
  document.getElementById("say_hello").onclick = sayHello;
};

function sayHello(){
  alert("Hello!");
}

在指令碼中，隱式 window 物件用於將事件處理程式附加到 onload 事件，該事件在整個網頁載入完畢時發生。事件處理程式被定義為一個匿名函式，這很好，因為該函式只被引用一次。在函式中，我們使用隱式 document 物件（表示頁面）透過其 ID 找到按鈕物件，並將 sayHello() 函式附加到按鈕的 click 事件。請注意，前三行程式碼是一個語句，這就是為什麼它需要以“;”結尾的原因。匿名函式在整個頁面載入之前不會執行，sayHello() 函式在按鈕被點選之前不會執行。我們必須等待頁面載入完畢才能將事件處理程式附加到頁面元素，因為元素必須存在才能引用它們。

指令碼可以如下直接包含在 HTML 中。這可以，但它沒有乾淨地分離內容（HTML）和行為（JavaScript），並阻礙了程式碼重用（你不能在其他頁面上使用該指令碼）。我將在以後的示例中使用這種樣式，因為程式碼以緊湊的形式保留在一個檔案中。

<!DOCTYPE html>
<html>
<body>
<button id="say_hello">Say Hello</button>
<script>
  window.onload = function(){
    document.getElementById("say_hello").onclick = sayHello;
  }

  function sayHello(){
    alert("Hello!");
  }
</script>
</body>
</html>

DOM

[編輯 | 編輯原始碼]

在前面的示例中，“document”指向一個 DOM（文件物件模型）物件，該物件表示網頁。事實上，在瀏覽器在螢幕上繪製頁面之前，它必須下載定義頁面的 HTML 程式碼，然後在記憶體中為頁面構建一個 DOM 物件。因此，頁面的 DOM 物件是螢幕上渲染頁面的底層資料結構。我們可以透過更改其 DOM 物件來修改螢幕上的頁面，例如修改元素的內容或樣式，新增新元素，以及刪除元素。

在下一個示例中，我們透過更改段落的內容來說“Hello”，而不是使用彈出視窗，彈出視窗可能會令人討厭。段落元素有一個名為 innerHTML 的屬性，表示其內容。我們可以更改此屬性來更改網頁上段落的內容。

<!DOCTYPE html>
<html>
<body>
<button id="say_hello">Say Hello</button>
<p id="output"></p>

<script>
  window.onload = function(){
    document.getElementById("say_hello").onclick = sayHello;
  };

  function sayHello(){
    var output = document.getElementById("output");
    output.innerHTML = "Hello";
  }
</script>
</body>
</html>

事件

[編輯 | 編輯原始碼]

除了 onclick 事件之外，還有很多 其他事件 我們可以選擇處理。大多數事件是由使用者操作觸發的。有時，我們希望以延遲或週期性的方式以程式設計方式觸發事件。以下示例使用計時器來延遲函式的呼叫。setTimout() 函式接受兩個引數：第一個是我們在計時器到期時要呼叫的函式的名稱，第二個引數指定以毫秒為單位的延遲。

<!DOCTYPE html>
<html>
<body>

<p id="display">5</p>

<button id="start">Start</button>

<script>
  document.getElementById("start").onclick = 
    function() {
      var seconds = document.getElementById('display').innerHTML;
      setTimeout(timesUp, seconds*1000);
    };
  
  function timesUp(){
    alert('Time is up!');
  }
</script>
</body>
</html>

對頁面上的倒計時進行動畫處理會更有意思，這意味著我們需要定期更新段落的內容。我們可以使用間隔設定計時器，並在計數達到零時清除它。下一個示例演示了這個想法。

<!DOCTYPE html>
<html>
<body>

<p id="display"></p>

<button id="start">Start</button>

<script>
  var seconds = 10;
  var timer;

  document.getElementById('display').innerHTML=seconds;
  document.getElementById("start").onclick = 
    function() {
      timer = setInterval(update, 1000); // expires every second
    };
  
  function timesUp(){
    alert('Time is up!');
  }
  
  function update(){
    seconds = seconds - 1;
    document.getElementById('display').innerHTML=seconds;
    if (seconds==0){
      clearInterval(timer);
      timesUp();
    }
  }
</script>
</body>
</html>

我們可以使用這個想法構建一個完整的秒錶。

<html>
<head>
  <script src="stopwatch.js" type="text/javascript"></script>
</head>
	
<body>
<span id="mm">00</span>:<span id="ss">00</span>
<br/>
<button id="reset">reset</button>
<button id="start">start</button>

<script>
window.onload = function(){
  document.getElementById("reset").onclick = reset;
  document.getElementById("start").onclick = start;
};

var timer = null;
var minutes = 0;
var seconds = 0;
 
function reset(){
  //alert("reset");
  document.getElementById("ss").innerHTML = "00";
  document.getElementById("mm").innerHTML = "00";
  minutes = 0;
  seconds = 0;
}

function start(){
  timer = setInterval(update, 100);
  document.getElementById("reset").disabled = "disabled";
  document.getElementById("start").innerHTML = "stop";
  document.getElementById("start").onclick = stop;
}

function stop(){
  clearInterval(timer);
  document.getElementById("reset").disabled = "";
  document.getElementById("start").innerHTML = "start";
  document.getElementById("start").onclick = start;
  //alert("stop");
}

function update(){
  seconds++;
  if (seconds > 59){
    seconds = 0;
    minutes++;
  }
  if (seconds < 10){
    document.getElementById("ss").innerHTML = "0"+seconds;
  }else{
    document.getElementById("ss").innerHTML = seconds;
  }
	
  if (minutes < 10){
    document.getElementById("mm").innerHTML = "0"+minutes;
  }else{
    document.getElementById("mm").innerHTML = minutes;
  }
}
</script>
</body>
</html>

jQuery

[編輯 | 編輯原始碼]

jQuery 是一個 JavaScript 庫，它擴充套件了“原生”JavaScript 的功能。它是最受歡迎的 JavaScript 庫，因為它

  • 簡化了 DOM 操作，
  • 允許使用 CSS 選擇器進行元素選擇，
  • 解決了瀏覽器相容性問題，
  • 提供了函數語言程式設計能力（將操作對映到一組元素），
  • 透過從大多數函式返回呼叫者物件來提供方法鏈。

語法

[編輯 | 編輯原始碼]

簡單的語法規則可以在以下位置找到

常見的實用方法包括

一些有趣的結構包括

$(function () {
  //code here
});

是以下內容的簡寫

$(document).ready(function(){
  //code here
});

任何依賴於完全載入頁面的程式碼都需要進入此函式。

以下是立即函式，它會立即執行，而無需等待文件準備就緒：在一個語句中定義和呼叫一個函式。

  (function($){
    //code here
   })(jQuery);

元素選擇

[編輯 | 編輯原始碼]

jQuery 為選擇 HTML 元素提供了更豐富的 API，幾乎可以想象所有可能的方式。大多數選擇器在 https://w3schools.tw/jquery/jquery_selectors.asp 中有描述，你可以在 https://w3schools.tw/jquery/trysel.asp 中找到一個全面的演示

jQuery 選擇器會查詢/選擇一些 HTML 元素，我們可以在其上應用操作。

DOM 操作

[編輯 | 編輯原始碼]

jQuery 透過提供我們可以使用的一組豐富的 方法來簡化 DOM 操作。以下是此類方法的主要類別

  • 獲取內容和屬性：當選擇多個元素時，該方法會連線內容/屬性並返回一個字串。
  • 設定內容和屬性：我們可以將相同的值設定為所有選定的元素，或者使用回撥函式根據元素在選定元素中的索引設定不同的值。
  • 新增新內容或元素：$('<tag>') 方法可以建立具有任何標籤名稱的元素。
  • 刪除內容或元素: 可以使用選擇器過濾要刪除的元素。

以下示例在單擊按鈕時生成一個新的正方形（div）並將其新增到父容器中。

<!DOCTYPE html>
<html>
<head>
<style>
#box{
  height: 200px;
  width: 200px;
  border: 1px solid black;
}

.square{
  height: 20px;
  width: 20px;
  background-color: blue;
  float: left;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $('button').click(function(){
    var square = $('<div>').addClass('square');
    $('#box').append(square);
  });
});
</script>
</head>
<body>
<div id="box"></div>
<button id="button">add square</button>
</body>
</html>

CSS 操作

[編輯 | 編輯原始碼]

操作樣式資訊的理想方法是定義 CSS 類，並透過將元素新增到類或從類中刪除元素來更改元素的樣式：獲取和設定 CSS 類。

jQuery 還提供一個通用的 .css() 函式，用於直接操作單個 CSS 屬性：css() 方法。當 css() 方法用一個引數呼叫時，它獲取與引數名稱相同的屬性。當它用兩個引數呼叫時，它使用第二個引數作為值來設定屬性。當 css() 方法在一個選定元素集中呼叫時，它的行為會根據它是獲取還是設定而有所不同：獲取會返回第一個選定/匹配元素的屬性值，而設定會更改所有選定元素的屬性值。

事件處理

[編輯 | 編輯原始碼]

jQuery 旨在響應 HTML 頁面上的各種事件。

效果

[編輯 | 編輯原始碼]

可以使用 jQuery 實現以下效果

jQuery UI

[編輯 | 編輯原始碼]

jQuery UI 是使用 jQuery、HTML 和 CSS 構建的 GUI 小部件集合。可以在 jQuery 學習中心 找到入門指南。

Retrieved from "https://wikibook.tw/w/index.php?title=Web_Programming/JavaScript&oldid=4232613"
華夏公益教科書