【行動軟體設計】HTML5、Javascript
主要APP開發方式
Native APP(原生)：
優：速度快。
缺：無法跨平台使用，需學習專用程式語言。
Android APP使用程式語言：Java
Android Studio
App inventor
iOS APP使用程式語言：Object-C
Xcode
Web APP(網頁)：利用APP內嵌瀏覽器。
優：可跨平台、使用Web標準技術、開發環境單純。
缺：API功能有限、速度不如原生APP，但隨著科技進步，缺點大多被解決。
手機，可接受各種sensor(如：溫度、拍照)→API功能進步。
5G時代→速度加快。
動態布局(直式、橫式)→RWD。
Onsen UI：一種開源UI框架和組件，focus在行動裝置。
注重設計細節提升UX：
適合裝置顯示的操作介面
OS專屬使用經驗，如：iOS的HOME鍵、安卓的Home、Menu、Return鍵
按鍵、字型大小
支援離線執行→HTML5特性
Hybrid APP(混合)：結合原生APP和Web APP。
優：部分跨平台，速度尚可。
缺：架構複雜、整合技術困難。
架構
Client-Server架構
對等式架構：沒有特定伺服器，每一台電腦都是同等地位，可將各自的資源分享給其他人，達資源共享的目的。
ISO(國際標準化組織)提出OSI(Open System Interconnection Model)開放式系統互聯模型 7 Layers：
Physical Layer(實體層)
Data link Layer(資料連結層)
Network Layer (網路層)
Transport Layer(傳輸層)
Session Layer(會談層)
Presentation Layer(表現層)
Application Layer (應用層)
HTTP(HyperText Transfer Protocol)超文本傳輸協定：傳統資料傳輸協定，有些技術不能用→轉成HTTPS(HyperText Transfer Protocol Secure)超文本傳輸安全協定，在傳輸過程中使用SSL/TLS進行加密。
SMTP(Simple Mail Transfer Protocol)簡單郵件傳輸協定：在網路上傳輸電子郵件的標準。
IP(Internet Protocol)：
固定IP→須由TCP/IP設備進行設定，用於Server架設。
浮動IP→每次重新連結到網路將有不同的IP位址，減少IP使用量，避免IP位址不夠。
IPv4：192.168.0.0(十進位)，32位元(bits)/4位元組(bytes)，空間有232個位址。
A類：10.0.0.0到127.255.255.255主要分配給大量主機而區域網路數量較少的大型網路。
B類：128.0.0.0到191.255.255.255一般用於國際性大公司和政府機構。
C類：192.0.0.0到223.255.255.255用於一般小公司校園網研究機構等。
192.168..→私有IP(內網)
D類：224.0.0.0到239.255.255.255用於特殊用途，又稱作廣播地址。
E類：240.0.0.0到255.255.255.255暫時保留。
IPv6：2001:0db8:86a3:08d3:1319:8a2e:0370:7344，128位元(bits)，16位元為一組，分8組，每組有4位十六進位的數。空間有2128個位址。
Web技術
前端(front-end)：使用者直接看到的內容，含資料呈現、搜集使用者資料。
HTML5
CSS 3
Javascript
Javascript Bridge：一種與Native溝通的技術，就是Native的瀏覽器組件(WebView)與Javascript通信的通道，一般稱為WebView Javascript Bridge，也簡稱JS Bridge。
有了此項即成為Hybrid APP。
Bootstrap
JQuery：跨瀏覽器的Javascript函式庫，簡化HTML與Javascript之間的操作。
AJAX(Asynchronous Javascript and XML)：非同步的Javascript與XML技術，結合多項技術的前端Web開發技術。可達到不用換頁顯示畫面切換，如：Gmail。
後端(back-end)：使用者不會直接看到的內容。
負責資料管理，如：儲存、處理資料，和實做服務(商務邏輯)功能，如：演算法(algorithm)、資料結構(data sttucture)。
含Web/Cloud Server、Database。
PHP
Python
Javascript
Ruby
Perl
Web = 前端 + 後端
如： Javascript+PHP→C like的
vbscript +ASP→basic like的
↓
可用<script>來指定要用的language是什麼。
網址：http://xxx/x/index.html →無互動的網頁。
http://xxx/x/index.php或.asp →有互動的網頁。
vb.Net、ASP.Net、C#.Net都整合在Visal Studio(VS)裡面。
Web風格
MPA(Multi-Page Application)：多頁
傳統設計方法。
點擊需求切換頁面，瀏覽器不停地重載(Reload)。
進入門檻低，簡單套用jQuery Mobile就可完成。
SPA(Single-Page Application)：單頁
利用Javascript操作DOM的技術實現各種應用。
搭配AJAX使整體介面反應速度很快。如：Gmail。
門檻高。
HTML(HyperText Markup Language)超文件標示語言
W3C全球資訊網協會：2014.10月制定HTML5
HTML5廣義包含：HTML、JS、CSS新技術組合
目的：在行動裝置上支援多媒體，如：<vedio>播放mp4、<audio>播放mp3。
.avi：未壓縮的視訊檔。
.wav：未壓縮的聲音檔。
編輯器(editor)→產生原始程式：文字文件、VScode、Eclipse
BlueGriffon：免費、開放原始碼的HTML編輯器。
Frontpage：原為office系列→sharepoint designer(SPD)。要付費。
Dreamweaver：Adobe系列，要付費。
編譯器(compiler)：HTML不需要。但要有瀏覽器(browser)，將HTML的文字檔視覺化。
三個重要的標籤：
HTML5第一行宣告：<!DOCTYPE>
但現今的瀏覽器多能直接以HTML5讀，即使沒宣告似乎也能運行，保險起見還是宣告比較好。
相關名詞：
元素(element)：HTML文件可包含一或多個element，而元素又由tag、attribute組成。依用途分2種類型：
(1)網頁上的內容。如：<head>、<table>、<h1>(標題1)……。
(2)用來指向其他資源。如：<img>、<video>、<audio>、<a>等。
標籤(tag)：
有開始、結束標籤，如：<p>段落內容</p>。
單獨一個標籤，如：<input>、<a>。
屬性(attribute)：屬性間以空白隔開。
(1)屬性名稱：如：type、method、href、color……。
(2)屬性值(value)：前後需加雙引號(“)，有些值須從預先訂義好的範圍選取，不能自訂。如：<form method=”GET”(或”POST”)>。
一般屬性
事件屬性(event handler content attribute)：針對HTML元素的某事件設定處理程式(script)，如：onclick=”…”、onload=”…”
要有互動→script：
(1)Javascript：C like的
(2)VBscript：VB程式語言(basic)
巢狀標籤(nesting tag)：一個內容用多個tag包起來。
如：<h1><b>粗體標題</b><i>斜體標題</i><h1>
空白字元：瀏覽器會自動忽略空格、Enter鍵，編寫原始程式時有助於排版，但不會直接顯示在內容上，如：換行需用<br>，而不是直接Enter。
特殊字元：如要顯示保留給HTML原始碼使用的特殊字元，需輸入實體名稱(entity name)或實體數值(entity number)。
<head>裡的tag：
<title></title>：文件標題(分頁名稱)
<meta>：文件相關資訊(metadata)。
屬性有：
charset：編碼方式(設定字元集)。
如：<meta charset=”UTF-8”>
UTF-8：萬國碼
BIG-5：繁體中文
name：metadata的名稱，可供搜尋引擎使用，有助於搜尋引擎優化。
content：metadaata的內容。
如：<meta name="author" content=”Joe”> →author = Joe
http-equiv：取代name，因HTTP伺服器用http-equiv搜集HTTP標頭。
如：<meta http-equiv=”content-type” content=”text/html”>
<link>：與其他資源的關聯。
屬性有：
herf = “url”：設定連結網址。
自己的(相對路徑，Relative URL)
別人的(絕對路徑，Absolute URL，有關掉的風險，不推薦)
herflang = "language-code"：設定herf屬性值的語系。
rel = "..."：目前文件與其他資源的關聯。
如：<link herf="http://...或../xx.css" rel="stylesheet">→CSS樣式表
rev = “...”：目前文件與其他資源的反向關聯。
type = “content-type”：設定內容類型。
<style></style>：嵌入CSS樣式，如文字顏色、網頁背景、表格的形式…。
<base>：設定整個頁面中，所有連結類型的屬性的預設根網址 (base URL) 和預設連結目標 (base target)。
<script></script>：設定語言、插入script程式。放在head裡時，需要呼叫才會動作。
<body>：
<body 事件屬性>：
如：<body onload=”Javascript: alert(“Hello, world!”);”>
載入視窗時，(不一定要指定語言)，跳出視窗顯示Hello, world!
<form>：
要用表單有關的tag去layout介面，如：<input>。
將表單內的資料透過<form>的屬性傳送到後端的程式(xxx.php)。
重要屬性：
method = “{POST}”或"{GET}"
action = “url”：資料要傳送到的位址，如：xxx.php、emial
<input>：
屬性：
type = “...”，如：
disabled：取消欄位，使該欄資料無法被接受或提交。
前台的程式透過<form>、<input>等tag設計出的UI和後台做連結，如果後台是單純PC、筆電，那就要安裝伺服器軟體，如：WAMP Server、LAMP Server…。
網頁分割：以前用<div>，HTML5有：
<header>頁首
<main>主要內容，包含：
<section>區塊、區段，如網頁不同主題的區塊，或文章不同的分段。
<article>網頁本文，如：文章。
圖片、影片。
<nav>導覽列
<footer>頁尾：放copyright、解析度、browser等。
<aside>側邊欄：包含摘要、廣告等可從區塊內容抽離的其他內容。
Javascript
Javascript是由Netscape開發的一種高階、物件導向(基於原型)的直譯式(interpreter)程式語言，屬於用戶端(前端)的技術。
程式語言的類型：
高階
低階
網頁
Javascript的目的：提高網頁的互動性。
AJAX：不換頁存取資料→SPA網頁。
<script>：
在<body>中：馬上執行。
在<head>中：被呼叫的函式或事件。
在xxx.js中可放多個javascript的function。
要和.html放在一起，.js也可用文字文件寫，副檔名存.js。
引用的時候：
<script src = “xxx.js”>
</script>
目的：
避免程式碼太多
很多網頁使用同一功能，Debug方便。
寫javascript的注意事項：
英文字母大小寫視為不同。
Javascript保留字無法當作變數、常數、函式或物件的名稱。
如：
break、case、catch、const、continue、debugger、default、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with
程式敘述結尾分號。
註解符號：
多行：/*...*/
單行：//
程式碼內縮，排版美觀方便閱讀。
在javascript中for、while、do...while、if、if...else、if...elseif...、switch...case...用法跟C語言都一樣。
如：
if ( 條件式 )
{
敘述;
}
++、--、+=、-=、*=、/=、%=
寫程式的良好習慣：
程式要有層次感。→用[tab]鍵縮排。
要寫註解，如：
檔案名稱、變數名稱要取有意義的。
顯示結果的方法(也可用來debug)：
JS：
alert(“字串");
跳出一個視窗，把結果show在上面。
document.write(“字串”);
直接將結果show在網頁上。
總字串 = "字串1" + name(字串型別的變數) + "<br>"(將HTML的tag當字串，如此可執行此tag的功能。)
顯示特殊符號，如：
document.write(“<”);→show出<(小於)符號。
用HTML的tag。
變數宣告：
變數名稱不允許使用數字0~9開頭。
英文大小寫視為不同。
命名最好有意義且與資料有關連性。
允許使用中文字做變數名稱，但避免混淆不介意使用。
保留字不允許做為變數名稱。
注意原始碼掃描軟體，如：HP Fortify，以特定關鍵字做為變數名稱可能會有資安風險。
特殊數值：
NaN(Not a Number)：非數值
Infinity：正無限大
-Infinity：負無限大
二進位數值：0b/0B(前置詞)
八進位數值：0o/0O
十六進位數值：0x/0X
函式：
五個part：
name
input
output
功能
區域變數
DOM(Document Object Model)文件物件模型：將HTML文件的內容物件化，希望用Javascript來存取HTML tag，為傳址呼叫。
如：(1)windows物件：瀏覽器視窗、索引標籤(tab)、框架。
(2)document物件：HTML本身。
物件：
屬性
事件
方法，如：alert()、resizeTo(x,y)→IE有Chrome沒支援……。(有些瀏覽器有，有些無)
DOM tree：browser解析一份HTML時，建立一個由多個物件構成的集合，方便存取。
如：
W3C全球資訊網協會制定標準物件模型，希望解決各browser物件不一致的問題。
DOM的節點：
Document：文件
Element：tag
Text：被tag包起來的文字
Attribute：tag的相關屬性
window.alert(“hi”);
→全域物件(global object)/預設物件，window可省略不寫。
window子物件：
標準內建物件：存取data、運算，如：Array。
環境物件：存取browser或螢幕的資訊。
document物件：存取HTML文件元素。
document.getElementById()
document.getElementByName()
document.getElementByClassName()
例子：求最大公因數(GCD)
HTML5提供給Javascript很多API撰寫強大功能，如：繪圖、多媒體……。
open()外觀參數有些browser有，有些無。
Native APP(原生)：
優：速度快。
缺：無法跨平台使用，需學習專用程式語言。Android APP使用程式語言：Java
Android Studio
App inventor
iOS APP使用程式語言：Object-C
Xcode
Web APP(網頁)：利用APP內嵌瀏覽器。
優：可跨平台、使用Web標準技術、開發環境單純。
缺：API功能有限、速度不如原生APP，但隨著科技進步，缺點大多被解決。手機，可接受各種sensor(如：溫度、拍照)→API功能進步。
5G時代→速度加快。
動態布局(直式、橫式)→RWD。
Onsen UI：一種開源UI框架和組件，focus在行動裝置。
注重設計細節提升UX：
適合裝置顯示的操作介面
OS專屬使用經驗，如：iOS的HOME鍵、安卓的Home、Menu、Return鍵
按鍵、字型大小
支援離線執行→HTML5特性
Hybrid APP(混合)：結合原生APP和Web APP。
優：部分跨平台，速度尚可。
缺：架構複雜、整合技術困難。
架構
Client-Server架構
對等式架構：沒有特定伺服器，每一台電腦都是同等地位，可將各自的資源分享給其他人，達資源共享的目的。
ISO(國際標準化組織)提出OSI(Open System Interconnection Model)開放式系統互聯模型 7 Layers：
Physical Layer(實體層)
Data link Layer(資料連結層)
Network Layer (網路層)
Transport Layer(傳輸層)
Session Layer(會談層)
Presentation Layer(表現層)
Application Layer (應用層)
HTTP(HyperText Transfer Protocol)超文本傳輸協定：傳統資料傳輸協定，有些技術不能用→轉成HTTPS(HyperText Transfer Protocol Secure)超文本傳輸安全協定，在傳輸過程中使用SSL/TLS進行加密。
SMTP(Simple Mail Transfer Protocol)簡單郵件傳輸協定：在網路上傳輸電子郵件的標準。
IP(Internet Protocol)：
固定IP→須由TCP/IP設備進行設定，用於Server架設。
浮動IP→每次重新連結到網路將有不同的IP位址，減少IP使用量，避免IP位址不夠。
IPv4：192.168.0.0(十進位)，32位元(bits)/4位元組(bytes)，空間有232個位址。
A類：10.0.0.0到127.255.255.255主要分配給大量主機而區域網路數量較少的大型網路。
B類：128.0.0.0到191.255.255.255一般用於國際性大公司和政府機構。
C類：192.0.0.0到223.255.255.255用於一般小公司校園網研究機構等。
192.168..→私有IP(內網)
D類：224.0.0.0到239.255.255.255用於特殊用途，又稱作廣播地址。
E類：240.0.0.0到255.255.255.255暫時保留。
IPv6：2001:0db8:86a3:08d3:1319:8a2e:0370:7344，128位元(bits)，16位元為一組，分8組，每組有4位十六進位的數。空間有2128個位址。
Web技術
前端(front-end)：使用者直接看到的內容，含資料呈現、搜集使用者資料。
HTML5
CSS 3
Javascript
Javascript Bridge：一種與Native溝通的技術，就是Native的瀏覽器組件(WebView)與Javascript通信的通道，一般稱為WebView Javascript Bridge，也簡稱JS Bridge。
有了此項即成為Hybrid APP。
Bootstrap
JQuery：跨瀏覽器的Javascript函式庫，簡化HTML與Javascript之間的操作。
AJAX(Asynchronous Javascript and XML)：非同步的Javascript與XML技術，結合多項技術的前端Web開發技術。可達到不用換頁顯示畫面切換，如：Gmail。
後端(back-end)：使用者不會直接看到的內容。
負責資料管理，如：儲存、處理資料，和實做服務(商務邏輯)功能，如：演算法(algorithm)、資料結構(data sttucture)。
含Web/Cloud Server、Database。PHP
Python
Javascript
Ruby
Perl
Web = 前端 + 後端
如： Javascript+PHP→C like的
vbscript +ASP→basic like的
↓
可用<script>來指定要用的language是什麼。網址：http://xxx/x/index.html →無互動的網頁。
http://xxx/x/index.php或.asp →有互動的網頁。vb.Net、ASP.Net、C#.Net都整合在Visal Studio(VS)裡面。
Web風格
MPA(Multi-Page Application)：多頁
傳統設計方法。
點擊需求切換頁面，瀏覽器不停地重載(Reload)。
進入門檻低，簡單套用jQuery Mobile就可完成。
SPA(Single-Page Application)：單頁
利用Javascript操作DOM的技術實現各種應用。
搭配AJAX使整體介面反應速度很快。如：Gmail。
門檻高。
HTML(HyperText Markup Language)超文件標示語言
W3C全球資訊網協會：2014.10月制定HTML5
HTML5廣義包含：HTML、JS、CSS新技術組合
目的：在行動裝置上支援多媒體，如：<vedio>播放mp4、<audio>播放mp3。
.avi：未壓縮的視訊檔。
.wav：未壓縮的聲音檔。
編輯器(editor)→產生原始程式：文字文件、VScode、Eclipse
BlueGriffon：免費、開放原始碼的HTML編輯器。
Frontpage：原為office系列→sharepoint designer(SPD)。要付費。
Dreamweaver：Adobe系列，要付費。
編譯器(compiler)：HTML不需要。但要有瀏覽器(browser)，將HTML的文字檔視覺化。
三個重要的標籤：
.svg)
HTML5第一行宣告：<!DOCTYPE>
但現今的瀏覽器多能直接以HTML5讀，即使沒宣告似乎也能運行，保險起見還是宣告比較好。相關名詞：
元素(element)：HTML文件可包含一或多個element，而元素又由tag、attribute組成。依用途分2種類型：
(1)網頁上的內容。如：<head>、<table>、<h1>(標題1)……。
(2)用來指向其他資源。如：<img>、<video>、<audio>、<a>等。標籤(tag)：
有開始、結束標籤，如：<p>段落內容</p>。
單獨一個標籤，如：<input>、<a>。
屬性(attribute)：屬性間以空白隔開。
(1)屬性名稱：如：type、method、href、color……。
(2)屬性值(value)：前後需加雙引號(“)，有些值須從預先訂義好的範圍選取，不能自訂。如：<form method=”GET”(或”POST”)>。一般屬性
事件屬性(event handler content attribute)：針對HTML元素的某事件設定處理程式(script)，如：onclick=”…”、onload=”…”
要有互動→script：
(1)Javascript：C like的
(2)VBscript：VB程式語言(basic)巢狀標籤(nesting tag)：一個內容用多個tag包起來。
如：<h1><b>粗體標題</b><i>斜體標題</i><h1>空白字元：瀏覽器會自動忽略空格、Enter鍵，編寫原始程式時有助於排版，但不會直接顯示在內容上，如：換行需用<br>，而不是直接Enter。
特殊字元：如要顯示保留給HTML原始碼使用的特殊字元，需輸入實體名稱(entity name)或實體數值(entity number)。
<head>裡的tag：
<title></title>：文件標題(分頁名稱)
<meta>：文件相關資訊(metadata)。
屬性有：charset：編碼方式(設定字元集)。
如：<meta charset=”UTF-8”>UTF-8：萬國碼
BIG-5：繁體中文
name：metadata的名稱，可供搜尋引擎使用，有助於搜尋引擎優化。
content：metadaata的內容。
如：<meta name="author" content=”Joe”> →author = Joehttp-equiv：取代name，因HTTP伺服器用http-equiv搜集HTTP標頭。
如：<meta http-equiv=”content-type” content=”text/html”><link>：與其他資源的關聯。
屬性有：herf = “url”：設定連結網址。
自己的(相對路徑，Relative URL)
別人的(絕對路徑，Absolute URL，有關掉的風險，不推薦)
herflang = "language-code"：設定herf屬性值的語系。
rel = "..."：目前文件與其他資源的關聯。
如：<link herf="http://...或../xx.css" rel="stylesheet">→CSS樣式表rev = “...”：目前文件與其他資源的反向關聯。
type = “content-type”：設定內容類型。
<style></style>：嵌入CSS樣式，如文字顏色、網頁背景、表格的形式…。
<base>：設定整個頁面中，所有連結類型的屬性的預設根網址 (base URL) 和預設連結目標 (base target)。
<script></script>：設定語言、插入script程式。放在head裡時，需要呼叫才會動作。
<body>：
<body 事件屬性>：
如：<body onload=”Javascript: alert(“Hello, world!”);”>
載入視窗時，(不一定要指定語言)，跳出視窗顯示Hello, world!<form>：
要用表單有關的tag去layout介面，如：<input>。
將表單內的資料透過<form>的屬性傳送到後端的程式(xxx.php)。
重要屬性：method = “{POST}”或"{GET}"
action = “url”：資料要傳送到的位址，如：xxx.php、emial
<input>：
屬性：type = “...”，如：
disabled：取消欄位，使該欄資料無法被接受或提交。
前台的程式透過<form>、<input>等tag設計出的UI和後台做連結，如果後台是單純PC、筆電，那就要安裝伺服器軟體，如：WAMP Server、LAMP Server…。
網頁分割：以前用<div>，HTML5有：
<header>頁首
<main>主要內容，包含：
<section>區塊、區段，如網頁不同主題的區塊，或文章不同的分段。
<article>網頁本文，如：文章。
圖片、影片。
<nav>導覽列
<footer>頁尾：放copyright、解析度、browser等。
<aside>側邊欄：包含摘要、廣告等可從區塊內容抽離的其他內容。
Javascript
Javascript是由Netscape開發的一種高階、物件導向(基於原型)的直譯式(interpreter)程式語言，屬於用戶端(前端)的技術。
程式語言的類型：
高階
低階
網頁
Javascript的目的：提高網頁的互動性。
AJAX：不換頁存取資料→SPA網頁。<script>：
在<body>中：馬上執行。
在<head>中：被呼叫的函式或事件。
在xxx.js中可放多個javascript的function。
要和.html放在一起，.js也可用文字文件寫，副檔名存.js。引用的時候：
<script src = “xxx.js”>
</script>目的：
避免程式碼太多
很多網頁使用同一功能，Debug方便。
寫javascript的注意事項：
英文字母大小寫視為不同。
Javascript保留字無法當作變數、常數、函式或物件的名稱。
如：break、case、catch、const、continue、debugger、default、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with
程式敘述結尾分號。
註解符號：
多行：/*...*/
單行：//
程式碼內縮，排版美觀方便閱讀。
在javascript中for、while、do...while、if、if...else、if...elseif...、switch...case...用法跟C語言都一樣。
如：if ( 條件式 )
{
敘述;
}
++、--、+=、-=、*=、/=、%=
寫程式的良好習慣：
程式要有層次感。→用[tab]鍵縮排。
要寫註解，如：
檔案名稱、變數名稱要取有意義的。
顯示結果的方法(也可用來debug)：
JS：
alert(“字串");
跳出一個視窗，把結果show在上面。document.write(“字串”);
直接將結果show在網頁上。總字串 = "字串1" + name(字串型別的變數) + "<br>"(將HTML的tag當字串，如此可執行此tag的功能。)
顯示特殊符號，如：
document.write(“<”);→show出<(小於)符號。用HTML的tag。
變數宣告：
變數名稱不允許使用數字0~9開頭。
英文大小寫視為不同。
命名最好有意義且與資料有關連性。
允許使用中文字做變數名稱，但避免混淆不介意使用。
保留字不允許做為變數名稱。
注意原始碼掃描軟體，如：HP Fortify，以特定關鍵字做為變數名稱可能會有資安風險。
特殊數值：
NaN(Not a Number)：非數值
Infinity：正無限大
-Infinity：負無限大
二進位數值：0b/0B(前置詞)
八進位數值：0o/0O
十六進位數值：0x/0X
函式：
五個part：
name
input
output
功能
區域變數
DOM(Document Object Model)文件物件模型：將HTML文件的內容物件化，希望用Javascript來存取HTML tag，為傳址呼叫。
如：(1)windows物件：瀏覽器視窗、索引標籤(tab)、框架。
(2)document物件：HTML本身。物件：
屬性
事件
方法，如：alert()、resizeTo(x,y)→IE有Chrome沒支援……。(有些瀏覽器有，有些無)
DOM tree：browser解析一份HTML時，建立一個由多個物件構成的集合，方便存取。
如：
W3C全球資訊網協會制定標準物件模型，希望解決各browser物件不一致的問題。
DOM的節點：
Document：文件
Element：tag
Text：被tag包起來的文字
Attribute：tag的相關屬性
window.alert(“hi”);
→全域物件(global object)/預設物件，window可省略不寫。window子物件：
標準內建物件：存取data、運算，如：Array。
環境物件：存取browser或螢幕的資訊。
document物件：存取HTML文件元素。
document.getElementById()
document.getElementByName()
document.getElementByClassName()
例子：求最大公因數(GCD)
HTML5提供給Javascript很多API撰寫強大功能，如：繪圖、多媒體……。
open()外觀參數有些browser有，有些無。
