Vue

JavaScript 初探

JavaScript（簡稱 JS）

具有一級函數 (First-class functions) 的輕量級、直譯式或即時編譯（JIT-compiled）的程式語言。
網頁的腳本語言而大為知名，但也用於許多非瀏覽器的環境，像是 Node.js、Apache CouchDB。
JavaScript 是一個的基於原型的、多範型的、動態語言，支援『物件導向』、指令式以及宣告式（如函數式程式設計）風格。

別搞混了 JavaScript 和 Java 程式語言。雖然「Java」和「JavaScript」都是 Oracle 公司在美國和其他國家的商標或註冊商標，但兩個語言有著非常不同的語法、語意和用途。

JavaScript 初探

JavaScript 是一種腳本，也能稱它為程式語言，可以讓你在網頁中實現出複雜的功能。當網頁不只呈現靜態的內容，另外提供了像是：內容即時更新、地圖交動、繪製 2D/3D 圖形，影片播放控制……等，你就可以大膽地認為 JavaScript 已經參與其中。它是標準網頁技術蛋糕的第三層，而其他兩層（HTML 和 CSS）我們在其他學習單元中有更多詳細的介紹。

Web包含以下：

html是一種標記語言，我們使用它組織網頁裡的內容並給予定義， 例如：定義段落、標題、資料表格，或是在頁面嵌入圖片和影片。. 
1
<p>Lara</p>
css是一種樣式規則的語言，用來幫我們的 HTML 內容上套用樣式，例如：設置背景顏色、字型，或讓內容以多欄的方式呈現。 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
p {
  font-family: "helvetica neue", helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid rgba(0, 0, 200, 0.6);
  background: rgba(0, 0, 200, 0.3);
  color: rgba(0, 0, 200, 0.6);
  box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
  border-radius: 10px;
  padding: 3px 10px;
  display: inline-block;
  cursor: pointer;
}
javascript是一種腳本語言，它使你能夠動態的更新內容、控制多媒體、動畫……幾乎所有事。（好吧，不是所有事情，但神奇的是你可以通過短短幾行 JavaScript 程式碼實現。） 
1
2
3
4
5
6
7
8
9
10
//綁定p元件
const para = document.querySelector("p");

para.addEventListener("click", updateName);

function updateName() {
  let name = prompt("輸入新的名字");
  para.textContent = "Player 1: " + name;
}

JavaScript 語言的核心包含了很多常用的程式功能供你使用
DOM （文件物件模型Document Object Model） API 讓你能操作 HTML 和 CSS，像是建立、移除或改變 HTML 元素，或動態地將新樣式套用到頁面…等等。每當你看到彈出視窗，或有新的內容出現在畫面上（就像上面的範例所展示的）， 那就是 DOM 在動作。
### DOM節點 DOM會形成一個樹狀的結構且擁有各個節點，而其節點通常分為四種，包括 Document、Element、Text 與 Attribute。
  • Document(文件)
    Document是HTML文件的開端，所有標籤都會由此向下延伸。
  • Element(元素)
    Element是文件的各種標籤，像是＜head＞、＜body＞、＜p＞或是＜div＞等，都屬於Element元素節點。
  • Text(文本)
    指的是被標籤包起來的文字。 像是本節點標題「DOM節點」的後端語法是＜h3＞DOM節點＜/h3＞，而其中被Element元素包起來的文字就是Text文本。
  • Attribute(屬性)
    指的是各個標籤內的相關屬性，用來敘述Element元素的相關性質，這種附加在 Element元素上的東西就稱為Attribute屬性。