iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 9
0
Modern Web

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

Day8 [JavaScript-1]

  • 分享至 

  • xImage
  •  

認識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()。
http://ithelp.ithome.com.tw/upload/images/20161211/20103385C1cwlAOGDU.png
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()


上一篇
Day7 [CSS介紹-2]
下一篇
Day 9 [JavaScript-2]
系列文
網頁程式設計so easy30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言