🔍 搜尋結果:JAVA

🔍 搜尋結果:JAVA

JavaScript 系列三:結語

在這份教材中,實際練習了實務上常見的 UI 元件 雖然只有少少幾個元件,但已能滿足許多網站設計需求 實務上,不會經常需要手做這些元件 通常會拿現成的 UI 套件包當作基礎,接著客製化與修改,例如最知名的 Bootstrap 套件 但是,不論是網頁設計師、前端工程師,在使用現成套件之餘,稍微知道背後的原理,比較好 這樣才能更好地掌握工具,以及在必要的時候能夠親自開發與修改 而到目前為止,我認為,你已經能夠親手製作出設計師要求的大部份靜態&動態設計了! --- 真正在工作的時候,也會很像本次課程這樣,幾乎完全沒人幫你 但或許會有人告訴你關鍵字,或是你覺得好像在哪邊看過某種功能、效果 所以雖然你還不會做、沒有做過,但你有信心,可以找到相關資源、可以做得出來 身為軟體工程師,需要有這種「大致知道自己潛力在哪」的能力與信心,才能不斷樂於接受超出能力的挑戰 要習慣這種感覺。就像在這次的七個 UI 元件練習中,在我完全沒有教學的情況下,你就成功做到了 --- 消化、研究完本課程之後,關於 JavaScript 更多必學的基本觀念 請接著前往「自學網頁の嬰兒教材:JavaScript(四)」開始學習吧! https://codelove.tw/@howtomakeaturn/course/837eq0

JavaScript 系列三:練習5 ── collapse 折疊效果

## 課程目標 認識並且能實做 collapse 效果 ## 課程內容 collapse 中文叫「折疊」效果,也就是內容可以展開、收起的效果 當頁面上「資訊非常多、多到難以閱讀」的時候,會使用這個效果來精簡資訊 通常用在 FAQ 常見問題集的頁面 一行一行列出各種常見問題,點擊問題旁邊的「+」符號,會在下面展開詳細回答,此時再次點擊問題,就可收起問題 請上網搜尋 `collapse item css`,四處觀摩一下業界常見的設計 --- 展開、收起的效果,通常會做成「滑下來、滑上去」,或者「淡入、淡出」,比較漂亮 關鍵字為 `slide down css` `slide up css` `fade in css` `fade out css` 請上網搜尋了解如何做到。不過,若是做不出來,就直接顯示、消失,也是沒關係 ## 課後作業 請使用 https://jsfiddle.net 假設正在幫一間電子商務公司,實做一個「FAQ」頁面 列出下列五個問題,點擊每個問題,會用 collapse 效果顯示出答案。再次點擊可以收起答案 - 如何辦理退換貨? -> 請參考退貨服務頁面。 - 退款方式及退款時間? -> 約7-8個工作天完成退款作業。 - 未退回的退款,是否可直接折抵新訂單? -> 很抱歉,重新訂購時無法直接於新訂單扣抵。 - 發票遺失是否仍能辦理退換貨? -> 很抱歉,需要有發票才能辦理退換貨。 - 什麼情況無法辦理退換貨? -> 超過7天退貨期限,就無法辦理。 請稍微加一些 css 屬性,弄得漂亮一點 做出以上功能,你就完成這次的課程目標了!

JavaScript 系列三:練習3 ── modal 互動視窗元件

## 課程目標 認識並且能實做 modal 元件 ## 課程內容 modal 中文叫「互動視窗」元件,也有人叫「燈箱」或者「視窗」 這是幾乎所有網站都會用到的元件 台灣各大媒體網站常見的「蓋板廣告」,就算是一種「視窗」 各大社群網站,逛一逛就跳出「視窗」強迫你登入 點擊照片或者貼文,以前常常會開啟新網頁,現在常常設計成打開「視窗」直接就可以看內容 modal 跳出時,通常會將整個背景變成半透明黑色或白色,來讓視窗內容更顯眼 並且 modal 會有按鈕可以關閉 請上網搜尋 `popup modal ui` `lightbox ui`,四處觀摩一下業界常見的設計 --- 要寫出這種視窗的效果,其實 css 的部份還比 js 的部份難一些 請上網搜尋 `燈箱 css` `popup modal css` `popup modal css` 了解各種不同的寫法與技巧 半透明背景遮罩的英文術語叫 `black overlay` 請上網搜尋 `css 黑色半透明遮罩` `full page black overlay css` 了解各種如何做到此效果。不過,若是做不出來,這個效果也是可以省略不做 ## 課後作業 請使用 https://jsfiddle.net 用以下 html 為基礎(你可以稍微修改),接著寫出 css 與 js 的部份 ``` <button onclick="loginModal()">點我登入帳號</button> <hr> <button onclick="postModal()">點我新增貼文</button> <div class="modal" id="login-modal"> <div>帳號:<input type="text"></div> <div>密碼:<input type="password"></div> <hr> <button class="btn-close">關閉</button> </div> <div class="modal" id="post-modal"> <div>標題:<input type="text"></div> <div>內文:<textarea></textarea></div> <hr> <button class="btn-close">關閉</button> </div> ``` --- 這邊共有兩個按鈕,模擬兩種使用情境 兩個視窗元件,一開始預設是隱藏的,不會在畫面上看到 點擊登入按鈕,會跳出登入視窗。可以點擊視窗內的關閉按鈕,來將視窗關閉 點擊貼文按鈕,會跳出貼文視窗。可以點擊視窗內的關閉按鈕,來將視窗關閉 --- 請稍微加一些 css 屬性,弄得漂亮一點 `<hr>` 只是方便隔開元素,方便別人查看元件用的,醜醜的留在畫面上沒關係 --- 做出以上功能,你就完成這次的課程目標了!

JavaScript 系列三:練習2 ── toast 吐司元件

## 課程目標 認識並且能實做 toast 元件 ## 課程內容 toast 中文叫「吐司」元件,就跟烤土司機,烤好吐司會跳出來一樣 用這元件來讓一些操作回饋訊息跳出,可以讓使用者體驗(User Experience,簡稱 UX)更好 很多網站因為沒有做好適當的 toast 元件,使用者在操作時常常覺得「表單到底有沒有送出?」「網站當機了是不是?」 通常要將 toast 做成幾種不同樣式,根據不同使用情境來使用 由於 toast 通常會直接蓋在網站的上方正中央(或者右上角、左下角,不一定) 會蓋到網頁畫面,所以通常會做成「顯示幾秒之後自動關閉」 請上網搜尋 `toast ui` `toast component`,四處觀摩一下業界常見的設計 --- 要在倒數幾秒之後執行任務,你需要 `setTimeout` 這個函式。請自行上網搜尋一下,了解這個函式的用法 ## 課後作業 請使用 https://jsfiddle.net 用以下 html 為基礎(你可以稍微修改),接著寫出 css 與 js 的部份 ``` <button onclick="toastSuccess()">成功訂購商品</button> <hr> <button onclick="toastError()">訂購商品失敗</button> <div class="toast toast-success"> 訂購成功!可以查看 Email 確認訂單細節! </div> <div class="toast toast-error"> 抱歉,訂購失敗!請稍後重新嘗試 </div> ``` --- 這邊共有兩個按鈕,模擬兩種使用情境 兩個吐司元件,一開始預設是隱藏的,不會在畫面上看到 請寫出 `toastSuccess` 函式的內容,在點擊按鈕後,將「成功吐司」顯示在畫面上 5 秒鐘,之後自動消失 請寫出 `toastError` 函式的內容,在點擊按鈕後,將「錯誤吐司」顯示在畫面上 5 秒鐘,之後自動消失 成功吐司請做成綠色 錯誤吐司請做成紅色 這個顏色變化,可以是邊框、背景顏色、字體顏色、影子顏色,都可以,你自由決定 --- 請稍微加一些 css 屬性,弄得漂亮一點 `<hr>` 只是方便隔開元素,方便別人查看元件用的,醜醜的留在畫面上沒關係 --- 做出以上功能,你就完成這次的課程目標了!

JavaScript 系列三:練習1 ── alert 示警元件

## 課程目標 認識並且能實做 alert 元件 ## 課程內容 alert 中文叫「示警」元件,當有訊息要公告在網站上,就可使用 或者當用戶執行了某些動作,在頁面上要提示、回饋訊息的時候,也可使用 通常要將 alert 做成幾種不同樣式,根據不同使用情境來使用 由於 alert 可能會佔據網頁上方、或下方,一整塊長條區域 會有點佔空間,所以通常會多做「關閉」按鈕,方便用戶保持畫面整潔 請上網搜尋 `alert ui` `alert component`,四處觀摩一下業界常見的設計 ## 課後作業 請使用 https://jsfiddle.net 用以下 html 為基礎(你可以稍微修改),接著寫出 css 與 js 的部份 ``` <div class="alert alert-primary"> 歡迎您點擊「抖內」按鈕,以實際行動支持我們。 <button class="btn-close">×</button> </div> <hr> <div class="alert alert-success"> 您已成功下訂單!以下為您的訂單詳細資訊。 <button class="btn-close">×</button> </div> <hr> <div class="alert alert-danger"> 抱歉,系統發生錯誤,請稍後重新嘗試。 <button class="btn-close">×</button> </div> <hr> <div class="alert alert-warning"> 請注意,以下內容包含「劇透」爆雷資訊。 <button class="btn-close">×</button> </div> ``` --- 這邊共有四個 alert 元件,各自有不同樣式 primary 用在主要公告事項,呈現藍色 success 用來傳遞讓人安心的成功訊息,呈現綠色 danger 用來提示錯誤訊息,呈現紅色 warning 用來呈現敏感注意事項,呈現橘色 這個顏色變化,可以是邊框、背景顏色、字體顏色、影子顏色,都可以,你自由決定 --- 訊息的旁邊,有一個關閉按鈕,點擊按鈕,要能關閉整個 alert 元件 --- 請稍微加一些 css 屬性,弄得漂亮一點 `<hr>` 只是方便隔開元素,方便別人查看元件用的,醜醜的留在畫面上沒關係 --- 做出以上功能,你就完成這次的課程目標了!

JavaScript 系列二:結語

簡單複習一下,在這份教材中,我們學會了 - DOM 樹基本觀念 - DOM 樹新增、刪除 - DOM 樹找到元素的方法 - 基本的除錯技巧 - 動態加上 onclick 事件 - 操作 onchange 事件 - 基本的 for 迴圈用法 - 在 DOM 樹存取、修改元素的 class - 在 DOM 樹存取、修改元素的 style - 學會 `.querySelector()` `.querySelectorAll()` 的用法(Selector API) - 學會 `.closest()` 的用法 - 初步認識「重構」的觀念 利用本課程學到的技巧,你已能夠對 DOM 樹進行很多操作,也能夠處理工作上很多功能需求! DOM 的操作函式有非常多,本課只教了最基本的幾個,實務上你會看到超多尋找 DOM 元素的函式 你就隨便找、隨便用,都可以,能順利找到、處理元素就好! --- 觀察本課內容,你會發現完全沒有用到第三方套件,通通是寫原生 JavaScript 本課所學內容,其實就是所有前端框架的基礎。不管你用了任何複雜的工具或框架,它們的背後,其實就只是這樣操作 DOM 而已,並沒有很難 本課內容所教的開發方法,大概是西元 2000 - 2010 年代的開發方式,很傳統,現在比較少這樣寫 實務上,現代前端工程師,工作時主要在使用「框架」來開發,例如 Vue 或者 React 因此,坊間補習班,大多是直接從「現代前端框架」開始教 然而,我觀察到,大多數畢業學生,因此對於 DOM 基本觀念一知半解、覺得框架很黑箱,並且基本功非常不好 所以我課程設計先從老方法開始教,讓大家基本功比較好,接著再學工具與框架,會更有踏實的感覺 --- 消化、研究完本課程之後,關於 JavaScript 更多必學的基本觀念 請接著前往「自學網頁の嬰兒教材:JavaScript(三)」開始學習吧! https://codelove.tw/@howtomakeaturn/course/gqveaW

JavaScript 系列二:第7課 ── 用 Selector API 選取元素

## 課程目標 學會基本的 Selector API 用法 學會基本的 `.closest()` 的用法 ## 課程內容 課程到目前為止,要存取元素,都是使用 `document.getElementById` `.parentElement` `.children` 然後上上下下到處爬來爬去、找到目標元素 在網頁結構簡單的時候還好,一旦內容複雜起來,你會發現這樣寫,有點麻煩 其實,在學習 css 的時候,就有一套指定元素的方法了,如果能直接用 css 那套設定樣式的方法,來找到元素,那不是很方便嗎? ``` <div> <div id="wrapper"> 我想跟您說: <p> Hi, <span id="target">早上好</span> </p> <p> Hi, <span>中午好</span> </p> <p> Hi, <span>晚上好</span> </p> </div> </div> ``` ``` document.querySelector('#wrapper p span').style.color = 'red'; ``` 在 jsfiddle 試試看,會發現「早上好」變成紅字了 使用 `.querySelector()` 可以很方便的找到元素!如果找到多個元素,只會回傳第一個元素 接著試試這樣 ``` var spans = document.querySelectorAll('#wrapper p span'); for (span of spans) { span.style.color = 'red'; } ``` 在 jsfiddle 試試看,會發現三塊文字,都變成紅字了 使用 `.querySelectorAll()` 可以很方便的找到多個元素!接著就用陣列來處理即可! 以上兩種用法,是不是比之前的老方法方便許多呢? --- 有件事要提一下,老方法的 `.getElementById()` 只能用在 `document` 物件上 新方法的 `.querySelector()` `.querySelectorAll()` 除了可以用在 `document` 之外,還能用在一般 DOM 元素上喔! ``` var wrapper = document.querySelector('#wrapper') wrapper.querySelector('p span').style.color = 'red'; ``` 所以這樣寫也可以!是不是覺得更彈性、更強大、更好用了呢? 有了這些,可以完全取代 `document.getElementById` 與 `children` 的寫法! --- 接著來看看有什麼新方法可以取代 `.parentElement` 吧 ``` var target = document.querySelector('#target') target.closest('span').style.color = 'red'; ``` ``` var target = document.querySelector('#target') target.closest('p').style.color = 'red'; ``` ``` var target = document.querySelector('#target') target.closest('div').style.color = 'red'; ``` 在 jsfiddle 分別試試看,這三種程式碼,會讓哪些文字變紅色吧! `.closest()` 會回傳第一個找到的「祖先元素」 也就是順序為父元素、祖父元素、曾祖父元素,依此類推,不斷往上尋找,到找到第一個為止 實務上這個函式非常好用,可以完全取代 `.parentElement` 的寫法! ## 課後作業 接續前一課的作業,現在要來重構(refactor)程式碼 所謂的「重構」程式碼,就是程式的功能完全不變,但是讓程式碼更好讀、好維護 --- 請把作業中出現的 `.getElementById()` `.parentElement` `.children` 全部拿掉 通通使用本課教導的函式來改寫 改寫完之後,你會發現,原本的程式碼,如果不看 html,只看 JavaScript,只會看到 parentElement、children、跟一堆索引,到處爬,不知道在幹嘛 而在改寫之後,至少看起來比較像在寫 css 樣式的時候,會用 `span` `li` `button` 這些元素名稱來上下查找元素 光看 JavaScript 程式碼,會比原本好讀一些些! 單看這次作業,可能感覺還好。但在專案很大的時候,你不會想在程式碼看到全是 parentElement、children、跟一堆索引,你會希望有更多額外資訊 你會希望程式碼能更清楚表達:「目前到底是在找什麼元素」。所以實務上都是以新寫法為主的 不過呢,這依然是主觀問題。如果你喜歡整個職業生涯都用老寫法來做,應該也可以。高興就好囉! --- 完成這次重構,你就完成這次的課程目標了!

JavaScript 系列二:第6課 ── 讀取與修改 DOM 元素的 style

## 課程目標 能動態在 DOM 樹修改元素的 style 屬性 ## 課程內容 實務上有個功能很常見,就是元素開關(toggle)的效果 點一下讓某元素出現,再點一下讓某元素消失 例如:跳出一張照片顯示、再關閉這張照片;或者顯示提示訊息文字,點擊後關閉文字(不是 alert 那種喔,是更漂亮、用 html/css 實做的那種漂亮小框框訊息) 讓元素開開關關出現的情境有很多,該怎麼做到呢?其實,修改元素的 css 屬性 `display` 就可以了 ``` <button onclick="myFunction()">點我開開關關</button> <div id="myDIV"> 我會一下出現一下消失 </div> ``` ``` function myFunction() { var x = document.getElementById("myDIV"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } ``` 如果你不知道 css 的 display 是什麼,以及有哪些值可用,請去查詢一下 最簡單、常用的基本上是 ``` display: none; display: inline; display: block; display: inline-block; ``` 修改這個值,就能做到開關顯示元素的效果了 --- 目前為止,你應該發現,能用 JavaScript 動態修改 class,也能動態修改 style 感覺好像網頁上任何東西、html、css,都可以用 JavaScript 動態修改? 你猜得沒錯!在前端工程領域,就是幾乎什麼東西都能用 JavaScript 來操作,所以現代的各種網頁,才會那麼強大、那麼多功能! 如果有個東西你不知道怎麼改,但感覺應該能用 JavaScript 做到,那就上網搜尋一下,一定會找到屬性或者函式可以用的! ## 課後作業 接續前一課的作業,現在要進一步加強清單功能 你發現有些事項,完成之後,你不想要刪除掉,你想要留著,比較有成就感 但又需要知道哪些已完成,所以要有能備註完成與否的方法 --- 請在每個事項後面,加上 `(已完成)` 的文字,但是 display 為 none 所以先不顯示 然後在這文字後面,再加上「標示為已完成」的按鈕,點下去才顯示 `(已完成)` 文字 舉例來說,建立了三則待辦事項之後,看起來像這樣 ``` - 倒垃圾 [標示為已完成][刪除] - 繳電話費 [標示為已完成][刪除] - 採買本週食材 [標示為已完成][刪除] ``` 如果倒完垃圾了,就可以點擊按鈕,來備註已完成,這時才顯示 `(已完成)` 文字 ``` - 倒垃圾(已完成)[標示為未完成][刪除] - 繳電話費 [標示為已完成][刪除] - 採買本週食材 [標示為已完成][刪除] ``` 這時後面的按鈕就變成「標示為未完成」了 所以這個完成與否按鈕,就是一個開關(toggle),可以開開關關的 做出這個功能,你就完成這次的課程目標了!

JavaScript 系列二:第5課 ── 認識 onchange 事件

## 課程目標 學會 onchange 事件的用法 ## 課程內容 目前為止,應該已經熟悉 `onclick` 事件的用法 接下來,學一個很常用、很好用的新事件 `onchange` ``` <select onchange="show1()"> <option value="apple">蘋果</option> <option value="banana">香蕉</option> </select> <label> <input type="radio" name="gender" value="male" onchange="show2()"> 男生 </label> <label> <input type="radio" name="gender" value="female" onchange="show2()"> 女生 </label> ``` ``` function show1() { alert(event.target.options[event.target.selectedIndex].value) } function show2() { alert(event.target.value) } ``` 到 jsfiddle 試試看,就會清楚實際效果囉! --- 不同的 html 元素,對於觸發 `onchange` 的定義有點不同,取得「變化後的新值」的方式也有點不同 上面簡單示範兩種。實務上,如果一直觸發不了,或是抓不到值的話,就多上網查查範例 然後一直嘗試 alert 或者 console.log 看看到底抓到什麼變數、到底變數內容是什麼 多實驗、多練習,習慣之後就會上手了 ## 課後作業 接續前一課的作業,現在要讓清單看起來更「花俏一點」 你希望選擇任務急迫性之後,輸入文字的框框,能跟著有樣式變化 --- 目前的 select 選單 選單內有「一般」、「重要」、「緊急」三種選項 請在選單加上 onchange 事件,讓選項改變的時候,輸入文字的框框,能跟著有樣式變化 請讓文字輸入框框,在選單為「重要」時,顯示為「橘色」;在選單為「緊急」時,顯示為「紅色」 這個顏色變化,可以是邊框、背景顏色、字體顏色、影子顏色,都可以,你自由決定 目的只是讓用戶有更多「視覺回饋」,讓用戶可以預期,新事項在清單內會變色而已 請在 `<input>` 或者在它父元素,加上不同的 class,用不同 class 顯示的不同顏色,來做到這點 做出這個功能,你就完成這次的課程目標了!

JavaScript 系列二:第4課 ── 讀取與修改 DOM 元素的 class

## 課程目標 能動態在 DOM 樹存取元素的 class 能動態在 DOM 樹修改元素的 class ## 課程內容 學到現在,應該會發現,DOM 元素,一堆屬性,都可以直接讀取、修改,很方便 連我們設計樣式會用到的 class 也是一樣簡單,很方便 ``` <div id="div1" class="greeting"> hello </div> <div id="div2" class="greeting big-font"> hey </div> ``` ``` var div1 = document.getElementById('div1') var div2 = document.getElementById('div2') alert(div1.className) alert(div2.className) ``` 你可能會想,為何要叫 `className` 而不是 `class` 就好? 其實是因為,`class` 在大部份程式語言,都是「宣告類別、支援物件導向程式設計」的關鍵字。看不懂沒關係,反正 `class` 基本上不能隨便用就對了 就跟宣告變數的 `var` 一樣,是重要的關鍵字,所以保留起來,避免混淆 --- 讀取 class 很簡單,其實修改也一樣簡單 ``` var div1 = document.getElementById('div1') var div2 = document.getElementById('div2') div1.className = div1.className + " border"; div2.className = div2.className + " border"; alert(div1.className) alert(div2.className) ``` 直接修改屬性 `.className` 的值就可以了 到 jsfiddle 試試看,就會清楚實際效果囉! ## 課後作業 接續前一課的作業,現在要加強清單的功能 你希望可以將任務按照急迫性分類 --- 在現有的文字輸入框、新增按鈕之外,多增加一個 select 選單 選單內有「一般」、「重要」、「緊急」三種選項 新增之後,重要的事項會顯示為「橘色」,緊急的事項會顯示為「紅色」 這個顏色變化,可以是邊框、背景顏色、字體顏色、影子顏色,都可以,你自由決定 請在 `<li>` 或者 `<span>` 加上不同的 class,用不同 class 顯示的不同顏色,來做到這點 --- 除此之外,還要更新「匯出為純文字」的功能 根據事項,如果是重要事項,請用星號包起來 `*重要任務*`,如果是緊急事項,請用雙星號包起來 `**緊急任務**` 舉例來說,按下匯出按鈕之後,就用 alert 跳出訊息「`今日待辦:1. 洗衣服 2. *買文具* 3. **去健身房**`」 --- 做出以上功能,你就完成這次的課程目標了!

JavaScript 系列二:第3課 ── 認識 for 迴圈

## 課程目標 學習基本的 for 迴圈用法 ## 課程內容 之前的課程中,我們學過陣列&索引的基本用法 實務上,使用陣列時,通常會需要寫一些 for 迴圈搭配使用 for 的寫法有很多種,我們先學 for of 的寫法就好 ``` var fruits = ["Apple", "Banana", "Orange"]; var text = ""; for (var x of fruits) { text = text + x; } alert(text); ``` 像這樣,就能依序存取到陣列內的每個內容 for 迴圈後面是大括號 `{}` 把任務包起來 就跟 if 一樣,裡面當然也可以放多行程式碼 ``` var fruits = ["Apple", "Banana", "Orange"]; var num = 1; var text = ""; for (var x of fruits) { alert(num.toString() + ') ' + x ); text = text + x; num = num + 1; } alert(text); ``` 在上面的範例,也同時示範了,如果想要同時知道「當前內容在陣列內的順序」 只要宣告一個整數的變數,每次迴圈內都幫它 +1 即可 到 jsfiddle 試試看,就會清楚實際效果囉! ## 課後作業 接續前一課的作業,現在待辦清單基本功能有了 你希望可以把清單內容自動轉變為純文字,方便貼到 LINE 群組之類的地方,分享給別人看 這次要來實作「匯出為純文字」的功能 --- 請在清單的下方,新增一個「匯出為純文字」的按鈕 假設清單內目前有三個事項「洗衣服」、「買文具」、「去健身房」 按下匯出按鈕之後,就用 alert 跳出訊息「今日待辦:1. 洗衣服 2. 買文具 3. 去健身房」 alert 的內容,滑鼠移上去,應該是可以選取&複製的(如果您的瀏覽器不支援,也沒關係,反正就是 alert 出來就對了) 請稍微替這個匯出按鈕加一點 css 屬性,弄得漂亮一點,看起來才專業 做出這個功能,你就完成這次的課程目標了!

JavaScript 系列二:第2課 ── 從 DOM 樹移除元素、動態加上 onclick 事件

## 課程目標 能動態加上 onclick 事件屬性 能選取到父元素、子元素 能夠在 DOM 樹進行「移除」 能存取到 onclick 事件發生的元素 ## 課程內容 現在已經會在 DOM 樹增加元素、加入文字了 記得之前寫過的「事件」嗎? ``` <button onclick="myFunction()">Click me</button> ``` ``` function myFunction() { alert('你點擊了按鈕!'); } ``` 這當然也能用 JavaScript 動態加上去 ``` <button id="my-btn">Click me</button> ``` ``` function myFunction() { alert('你點擊了按鈕!'); } var btn = document.getElementById('my-btn'); btn.onclick = myFunction; ``` 在 JavaScript 裡面,像這樣定義的「函式」,它的「名稱」其實也會是一個「變數」 所以可以直接指派給 `.onclick` 屬性 覺得有點怪,沒關係,先知道可以這樣設定「事件屬性」就好 這種「把函式設定到事件屬性」的行為,我們叫「綁定」 因為在事件發生的時候,要固定執行任務,就像是綁定任務給你,固定由你來負責的感覺 --- 接著多談一下元素的父子關係 ``` <div id="app"> 這是簡介 <h1>這是標題</h1> <p id="para">這是段落文字</p> </div> ``` ``` var app = document.getElementById('app'); alert(app.children[0].textContent) alert(app.children[1].textContent) ``` 到 jsfiddle 執行看看,有看懂了嗎? 元素的 `.children` 屬性可以存取到子元素,以陣列的形式出現 別忘記陣列的索引是從 0 開始喔 接著試試這樣 ``` var para = document.getElementById('para'); alert(para.parentElement.textContent) ``` 元素的 `.parentElement` 屬性可以存取到父元素 這邊把父元素的整個內容跳出來看,像這樣跳一堆字,實務上沒什麼用 重點是,可以存取到父元素、子元素,就可以在整個 DOM 上上下下跑來跑去,用上一課教的 `.append()` 來到處新增元素啦! --- 接著,來學學如何刪除元素吧 繼續上面的範例,請在 jsfiddle 試試這段 ``` var para = document.getElementById('para'); para.remove(); ``` 然後試試這樣 ``` var app = document.getElementById('app'); app.remove(); ``` 很簡單、直觀吧! --- 最後,來學習怎麼抓到事件發生當下的元素 記得之前有學過一個 `document` 物件嗎? 這是一個 JavaScript 在瀏覽器中內建的「物件」,這個物件代表網頁「當下的狀態」,有很多資料、函數可以呼叫使用 現在來學另一個 `event` 物件,這個物件代表網頁「當下正在發生的事件」,也有很多資料、函數可以呼叫使用 ``` <button onclick="hello()">蘋果</button> <button onclick="hello()">香蕉</button> <button onclick="hello()">西瓜</button> ``` ``` function hello() { alert(event.target.textContent) } ``` 綁定函式到事件屬性之後,可以利用 `event.target` 來找到當前發生事件的元素 找到元素之後,就可以自由的存取元素屬性、或者對元素做任何你想做的事情囉! ## 課後作業 接續前一課的作業,這次要來實作「刪除事項」的功能 --- 請在事項的旁邊,加上刪除按鈕,請使用這樣的結構 ``` <ul> <li> <span>倒垃圾</span> <button>刪除</button> </li> <li> <span>繳電話費</span> <button>刪除</button> </li> <li> <span>採買本週食材</span> <button>刪除</button> </li> </ul> ``` 點擊「刪除」按鈕,會將事項刪除不見 如此一來,你的清單小程式,就可以新增事項、也可以刪除事項囉 請稍微替這個「刪除」按鈕加一點 css 屬性,弄得漂亮一點,看起來才專業 做出這個功能,你就完成這次的課程目標了!

JavaScript 系列二:第1課 ── 認識 DOM 樹、新增元素

## 課程目標 認識 DOM 樹基本觀念 能夠在 DOM 樹進行「新增」 學會基本的除錯技巧 ## 課程內容 請打開這個網站,用這個網站來練習&寫作業: https://jsfiddle.net 在學 JavaScript 的時候,你會聽到很多人在講「DOM 樹」這個名詞 什麼是「DOM 樹」? 其實只是,你在網頁上看到的東西,瀏覽器會在背後的 JavaScript 環境,維持一個對應的「DOM 樹」 比如說,當你寫這樣的 html(這邊先省略內容,只留結構) ``` <html> <head> <script></script> </head> <body> <div> <h1></h1> <p></p> </div> </body> </html ``` 瀏覽器會在背後創造一個這樣的資料結構 ``` document └── html ├── head │   └── script └── body └── div ├── h1 └── p ``` 很像是樹吧?這就是「DOM 樹」 記得之前用過的 `document.getElementById` 嗎? 這就是 DOM 最上面的 document 物件 所謂的「DOM 樹」其實就是一個「巢狀物件」。 「巢狀物件」的意思是,物件的屬性,又是另一個物件,然後這物件的屬性,又可以是另一個物件 用 JavaScript 來表示的話,類似這樣(只是概念喔,真實的物件不只是這樣,而是有一堆內建函式與屬性可以用) ``` var document = { name: 'document', children: [ { name: 'html', children: [ { name: 'head', children: [ { name: 'script', children: [] } ] }, { name: 'body', children: [ { name: 'div', children: [ { name: 'h1', children: [] }, { name: 'p', children: [] } ] } ] } ] } ] } ``` 在 DOM 中,被包起來的元素,稱為子元素;把別人包起來的元素,稱為父元素。就跟學 html 時的稱呼一樣 瀏覽器會確保用戶介面(User Interface,簡稱 UI)上看到的,跟環境中實際運行的 DOM 長得一模一樣 也就是說,你修改 UI 的內容,DOM 物件就會自動更新;你用 JavaScript 修改 DOM 物件的內容,UI 就會自動更新 --- 來學學怎麼用 JavaScript 操作 DOM 樹吧! 如果原本 html 長這樣 ``` <div id="app"></div> ``` 只要加入這段程式碼 ``` var heading = document.createElement('h1'); heading.textContent = '這是標題'; var para = document.createElement('p'); para.textContent = '這是段落文字'; var app = document.getElementById('app'); app.append(heading); app.append(para); ``` 利用 document 的內建函數 `createElement` 來動態創造新的元素 修改元素的屬性 `.textContent` 來設定文字內容 接著用 `.append()` 函數來讓元素吃下別的元素,也就是「把另一個元素收為子元素」,就跟收養子女一樣! 最後 html 就會變成這樣 ``` <div id="app"> <h1>這是標題</h1> <p>這是段落文字</p> </div> ``` 馬上貼到 jsfiddle 試試看,實驗一下、玩玩看! --- 在寫 html 的時候,出現巢狀結構是很常見的 操作 DOM 時,當然也可以自由創造巢狀結構 ``` var elem1 = document.createElement('div'); elem1.textContent = 'level 1'; var elem2 = document.createElement('div'); elem2.textContent = 'level 2'; var elem3 = document.createElement('div'); elem3.textContent = 'level 3'; var app = document.getElementById('app'); app.append(elem1); elem1.append(elem2); elem2.append(elem3); ``` 到 jsfiddle 試試看,就會清楚實際效果囉! --- 在開發的過程中,基本上會不斷打錯字、寫錯用法。程式跑不出結果,很正常 這種時候,有兩個常用的除錯方法,我們叫「debug 的方法」 第一個方法是 `alert`,你就把不確定的內容,給 alert 出來看看就對了,到處寫 alert 看一下變數內容,確定內容跟預期一樣,再接著繼續寫 第二個方法是 `console.log()`,把參數傳進去,接著打開瀏覽器的「開發者工具」,就會看到結果,通常會比 alert 內容更詳細、更方便除錯 除此之外,JavaScript 相關的各種錯誤訊息,都會在「開發者工具」出現。請去研究你所使用的瀏覽器,如何打開這個工具 ``` var x = 123; var y = 'hello'; var z = document.createElement('div'); console.log(x) console.log(y) console.log(z) ``` 請打開瀏覽器的開發者工具,實際看一下上述範例的結果。 ## 課後作業 假設你是一個健忘的人,你決定寫一個「待辦事項管理」應用程式,來幫助自己 這一課,先實作「新增事項」的功能 --- 在上面,做一個文字輸入框,旁邊有一個「新增」按鈕 在下面,做一個展示待辦事項的清單,請使用這樣的結構,id 跟 css 之類的你可以自由決定 ``` <ul> <li> <span>倒垃圾</span> </li> <li> <span>繳電話費</span> </li> <li> <span>採買本週食材</span> </li> </ul> ``` 點擊「新增」按鈕,會將新事項插入到清單最底部 請稍微替這個清單工具加一點 css 屬性,弄得漂亮一點,這樣的工具才讓人想用 --- 除此之外,請練習一下 `console.log` 的用法,不然之後遇到錯誤,幾乎沒辦法除錯 請把作業內容中,出現的變數,隨便挑三個,用 `console.log` 印到開發者工具中,然後用瀏覽器看一下內容 --- 做出以上功能,你就完成這次的課程目標了!