- PDF 免费下载

Size: px

Start display at page:

Download ""

亚住焦
5 years ago
Views:

2 JavaScrip jquery JavaScript HTML CSS JavaScrtip 1 JavaScript 2 3 JavaScript JavaScript Notepad TextEdit Sublime Text Coda 2

有時你只是想存取一個節點 ( 或一部分的頁面內容儲存在一個節點中 ); 有時可能會想存取一群節點, 例如, 頁面中的所有 <h1> 元件, 或在一個特定清單裡的 <li> 元件若方法回傳了多個元件, 它會以節點串列的方式回傳, 就是由多個節點所組成的一個集合 ( 即使只有找到一個符合的元件 ) 要自其中挑選出你想要的元件就必須使用索引值 ( 這代表索引值起始於 0, 如資料項在陣列一般 )

3 有時你只是想存取一個節點 ( 或一部分的頁面內容儲存在一個節點中 ); 有時可能會想存取一群節點, 例如, 頁面中的所有 <h1> 元件, 或在一個特定清單裡的 <li> 元件若方法回傳了多個元件, 它會以節點串列的方式回傳, 就是由多個節點所組成的一個集合 ( 即使只有找到一個符合的元件 ) 要自其中挑選出你想要的元件就必須使用索引值 ( 這代表索引值起始於 0, 如資料項在陣列一般 ) 舉例來說, 在頁面中可能會有多個元件均使用同樣的標籤, 所以使用 getelementsbytagname() 方法均會以節點串列的方式回傳結果值 192 文件物件模型如下,DOM 樹表示了一個清單範例的頁面內容 ; 為了先專注在元件存取的討論上, 它只顯示了元件節點在下頁的圖示中特別標示了執行 DOM 查詢時會回傳的元件 ( 記住, 元件節點就是元件在 DOM 的呈現 ) 以最快的方式擷取到你頁面中的元件, 可以使頁面操作感覺較為快速且 / 或較具反應性最快的方式意指至目標元件所經過最少數目節點的路徑例如,getElementById() 可快速回傳一元件 ( 因為在同一頁面裡不會有兩個元件有相同的 id 屬性值 ), 但是它只能夠在目標節點具有 id 屬性時使用何謂程式碼? 我該如何撰寫? 如何將電腦技術運用於生活中? 我要如何撰寫程式碼來製作網頁? 當你學習這些基本概念後, 在接下來的章節將會讓你瞭解, 如何透過 JavaScript 語言告訴瀏覽器你的需求依據所提供的 id 屬性值選取所指定的元件在元件的 HTML 內容中必須有 id 屬性才可被選取初次支援 :IE5.5 Opera 7 全系列版本的 Chrome Firefox 和 Safari 使用 CSS 選擇器語法可選取一或多個元件此方法則只會回傳第一個符合條件的元件初次支援 :IE8 Firefox 3.5 Safari 4 Chrome 4 Opera 10 依據所提供的 class 屬性選取一或多個元件在元件的 HTML 內容中必須有 class 屬性才可被選取此方法較使用 queryselectorall() 更快速初次支援 :IE9 Firefox 3 Safari 4 Chrome 4 Opera 10 ( 多種早期版本的瀏覽器僅有部分 / 多臭蟲的低支援度 ) 依據所指定的 HTML 標籤名稱選取一或多個元件此方法較使用 queryselectorall() 更快速初次支援 :IE6+ Firefox 3 Safari 4 Chrome Opera 10 ( 多種早期版本的瀏覽器僅有部分 / 多臭蟲的低支援度 ) 使用 CSS 選擇器語法以選取一或多個元件, 並回傳所有符合條件的元件初次支援 :IE8 Firefox 3.5 Safari 4 Chrome 4 Opera 10 getelementbyid('one') queryselector('li.hot') getelementsbyclassname('hot') getelementsbytagname('li') queryselectorall('li.hot') 文件物件模型 193 在左方行中, 描述活動所在位置的超鏈結均將 id 屬性值設定為兩個字元, 資訊位於 : <a id="tx" href="tx.html">... Austin, TX</a> 活動課程時間顯示於中間行, 每個活動課程的標題文字都包含於超鏈結中, 利用超鏈結的點擊以顯示活動課程的描述內容 <a href="descriptions.html#circuit-hacking"> Circuit Hacking</a> 在右方行活動課程的描述內容可自 HTML 檔案中取得每個活動課程會儲存於對應的元件中, 且元件的 id 屬性值包含活動課程的名稱 ( 但空白字元以破折號取代 ) <div id="intro-to-3d-modeling"> <h3>intro to 3D Modeling</h3> <p>come learn how to create 3D models of...</p> </div> 因超鏈結會被動態加入和移除, 故需使用事件委派機制 400 AJAX 與 JSON AJAX 與 JSON 401 本範例以實字標示法建立物件開始此物件稱為為 hotel, 它代表一間旅館, 名稱為 Quay, 並有 40 間房間 ( 其中 25 間已被預訂 ) 接下來, 網頁的內容會依物件的資料內容進行更新, 它會顯示旅館名稱和空房數量, 其資料可藉由存取物件的 name 特性和 checkavailability() 方法取得為存取物件特性, 可於物件名稱後接著一個句點符號, 和欲存取的物件特性名稱的方式表示相同地, 若要使用物件方法, 可於物件名稱後接著一個句點符號, 和欲使用的物件方法名稱的方式操作如果方法需要傳入參數, 你可在方法名稱後的小括號中提供 ( 就像將引數傳遞至函式一般 ) 104 函式方法與物件第一次迴圈執行時, 變數 i( 計數器 ) 被指定為數值決策與迴圈 408 AJAX 與 JSON c3/js/object-literal.js 每次迴圈執行時, 均需檢測條件是否符合變數 i 是否小於 10? JAVASCRIPT 結果若符合條件, 接著便會執行迴圈裡的程式碼 ( 大括號裡的敘述句 ) JAVASCRIPT 結果變數 i 可在迴圈中使用在此範例被用於輸出至頁面中的數值 c03/js/object-literal2.js 當程式敘述句執行完畢後, 變數在這你會看到另一個物件同樣地, 它也叫做 hotel, 但是這次它代表的是另一間旅館想像一下這是同一個旅遊網站上的不同頁面名稱為 Park 的旅館較上一間更大, 它有 120 間房間且有 77 間已被預訂比較上一個例子, 需要變更程式碼的地方只有在 hotel 物件的特性值 : 名稱房間總數已被預訂的房間數本頁剩下的部分也都是在做同樣的動作頁面中旅館名稱的顯示也是使用相同的程式碼, 而 checkavailability() 方法也沒有改變且以同樣方式呼叫如果這個旅遊網站中有 1,000 間旅館, 唯一需要更改的就只有物件的三個特性因為我們已經為旅館建立了一個模型, 使用相同的程式敘述就可以存取和顯示任一間遵循此模型的旅館資訊若需要在同一頁中有兩個物件, 你仍可以用同樣的表示法建立這兩個物件, 但分別儲存在兩個不同名稱的變數即可函式方法與物件 105 當條件不再為 true 時, 迴圈將會停止程式碼將會移動到迴圈外的下一行決策與迴圈程式設計 ABC 在學習如何閱讀和編寫 JavaScript 語言之前, 有些程式設計的概念必須要先行瞭解本章節內容會涵蓋以下基礎概念 : A B C 以實字標示法建立物件 hotel.checkavailability() var hotel = { name: 'Quay', rooms: 40, booked: 25, checkavailability: function() { return this.rooms - this.booked; } }; var elname = document.getelementbyid('hotelname'); elname.textcontent = hotel.name; var elrooms = document.getelementbyid('rooms'); elrooms.textcontent = hotel.checkavailability(); var hotel = { name: 'Park', rooms: 120, booked: 77, checkavailability: function() { return this.rooms - this.booked; } }; var elname = document.getelementbyid('hotelname'); elname.textcontent = hotel.name; var elrooms = document.getelementbyid('rooms'); elrooms.textcontent = hotel.checkavailability(); 建立更多實字物件 HTML CSS JavaScript 存取元件回傳單一元件節點的方法 : getelementbyid('id') 循環執行 for (var i = 0; i < 10; i++) { document.write(i); } DOM 查詢可以回傳一個元件, 也可以回傳一個節點串列 (NodeList), 節點串列就是一個節點的集合 queryselector('css selector') 是否 0 < 10? 將 0 加 1 是否 1 < 10? 將 1 加 1 是否 8 < 10? 將 8 加 1 是否 9 < 10? 將 9 加 1 是否 10 < 10? body div 回傳一或多個元件節點的方法 ( 以節點串列回傳 ): getelementsbyclassname('class') 寫入頁面 : 0 寫入頁面 : 1 寫入頁面 : 8 寫入頁面 : 9 h1 h2 ul script 多組元件節點 li li li 最快路徑 li getelementsbytagname('tagname') 開始 i = 0 i = 1 i = 2 i = 8 i = 9 i = 10 結束 queryselectorall('css selector') i 會增加一範例 AJAX 與 JSON 重點回顧 AJAX 與 JSON 此範例會顯示三個活動的資訊, 活動資訊分別來自三個不同的資料來源 1) 當頁面載入時, 活動的地點資訊會被編碼後置於 HTML 頁面內容中使用者點選左方行的活動, 便會更新中間行的活動課程時間表 2) 活動課程時間儲存於 JSON 物件中, 儲存於外部的檔案 ; 當 DOM 載入完成後, 便會自檔案擷取資訊當使用者點選中間行的活動課程時間, 活動課程的說明內容便會呈現於右方行中 3) 所有活動課程的描述內容均儲存於一個 HTML 檔案中個別活動課程的描述則利用 jquery 的.load() 方法取得 ( 如第 390 頁的 # 選擇器 ) Ajax 代表一系列的技術, 可允許你只變更頁面中部分內容 ( 而不需要重新載入整個頁面 ) HTML XML 或 JSON 資料均可用於你的頁面 (JSON 已逐漸成為主流 ) 欲自其他網域載入 JSON 資料, 你可以使用 JSONP; 但必須確認資料是來自於受信任的來源 jquery 提供多種方法, 讓使用 Ajax 更為簡便.load() 是最簡單將 HTML 載入至你的頁面的方法, 也允許你只變更頁面中的一個內容區塊.ajax() 更具威力, 也更加複雜 ( 也有多種快捷方法提供使用 ) 需考量使用者未啟用 JavaScript, 或無法自伺服器端擷取資料時, 如何能讓網站功能繼續正確運作, 是一個重要的議題 3

JAVASCRIPT 1 ACCESS CONTENT JavaScript HTML <h1> class note id email

4 JAVASCRIPT 1 ACCESS CONTENT JavaScript HTML <h1> class note id JavaScript HTML 2 MODIFY CONTENT JavaScript HTML <h1> class CSS <img> 4

5 3 PROGRAM RULES viewport JavaScript 4 REACT TO EVENTS 5

6 JAVASCRIPT JavaScript HTML Access Modify Program React HTML React Access Modify Program Modify React Program Modify JavaScript React Access Program Modify 6

7 JavaScript Access Modify Program React 8 12 React Access Program Access Modify HTML <img> React Program <img> Program React Program Modify 7

8 JavaScript JavaScript JavaScript 1 JavaScript HTML 2 4 JavaScript 5 DOM 6 Events 7 jquery 8 Ajax 9 APIs HTML5 Google Maps JavaScript JavaScript 10 JavaScript JavaScript 8

9 HTML & CSS JavaScript HTML CSS HTML Attributes CSS Properties Name / Value HTML HTML HTML HTML <img> selfclosing HTML / <p class="fruit">peach</p> CSS CSS HTML CSS Selector Declaration block CSS HTML CSS.fruit {color: pink;} 9

10 IE8 com JavaScript IE8 JavaScript JavaScript jquery jquery jquery IE8 IE8 IE8 10

ii Vue Bootstrap 4 ES 6 Vue Vue Bootstrap 4 ES 6 Vue 2 vue html vue html vue Vue HTML 5 CSS ES 6 HTML 5 CSS Visual Studio Code h

ii Vue Bootstrap 4 ES 6 Vue Vue Bootstrap 4 ES 6 Vue 2 vue010101.html vue010104.html vue0101 01 04 Vue HTML 5 CSS ES 6 HTML 5 CSS Visual Studio Code https://code.visualstudio.com/ Chrome XAMP Visual Studio