Day8 [JavaScript-1]

2017 iT 邦幫忙鐵人賽

DAY 9

Modern Web

網頁程式設計so easy系列第 9 篇

2017鐵人賽 javascript

smallone1

2016-12-09 11:56:15

3530 瀏覽

分享至

認識JavaScript

動態網頁特效
檢查網頁表單輸入內容
即時更新網頁狀態
補足瀏覽器功能的不足

在網頁中加入JavaScript程式

以script元素將javascript程式內嵌於網頁中

<head>
  <meta charset="UTF-8">
  <title>JavaScriptt</title>
  <script>
  	//放JavaScript程式
  </script>
</head>

將javascript程式另外存檔，透過script元素載入

<head>
  <meta charset="UTF-8">
  <title>JavaScriptt</title>
  <script src="js檔案路徑"></script>
</head>

以事件屬性將javascript程式內嵌於元素標籤中

<body>
    <p onclick="alert('Hello!');">Hello</p>
</body>

JavaScript內建物件

window物件：網頁文件所在的瀏覽器視窗物件。ex:window.alert();

document物件：代表HTML網頁內容的物件，透過此物件可存取網頁中的元素、屬性、甚至樣式等。ex: document.write("<h1>Hello</h1>");

修改網頁元素

getElementById()

var x = getElementById("theId");
x.innerHTML = '<p>theId_changed</p>'

自訂函式與呼叫函式

function theFunction(){
    ...
}

範例

DOM物件模型

文件物件模型（Document Object Model, DOM）是 HTML、XML 和 SVG 文件的程式介面。它提供了一個文件（樹）的結構化表示法，並定義讓程式可以存取並改變文件架構、風格和內容的方法。DOM 提供了文件以擁有屬性與函式的節點與物件組成的結構化表示。節點也可以附加事件處理程序，一旦觸發事件就會執行處理程序。本質上，它將網頁與腳本或程式語言連結在一起。

更詳細說明可參考：https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
http://www.w3schools.com/js/js_htmldom.asp

取得子節點
firstChild：document.firstChild
lastChild：document.lastChild
childNodes：document.childNodes[0]

備註：索引值從0開始，以上範例程式碼即為選取第0個子節點物件。
head：document.head
body：document.body
備註：以上如果想要測試可打開開發者工具(Chrome->F12)並使用console.log()。

firstElementChild：document.firstElementChild
lastElementChild：document.lastElementChild
children：document.children[0]

取得元素節點
getElementByTagName()：document.getElementByTagName('li')可取得所有li元素的集合
getElementByName()：document.getElementByName('Name')可取得所有name=Name的元素集合
新增元素
document.createElement()
document.createTextNode()
appendChild()