week7(2021/5/24~2021/5/30)

Lu-yeom commented 3 years ago

日期：110年5月24日(星期一)20:00~22:30 今日進度：[FE102] 前端必備：JavaScript

課程筆記：一、如何在瀏覽器上執行Javascript？ (一)在哪裡執行？可用node.js編寫html，在、<head>，<body>中都可以輸入<script></script>，推薦作法是<script src=”./index.js”></script>來引入。 (二)Node.js與瀏覽器跑JS的差別？有些功能可能各不支援，Node.js能做到的較多。</p> <p>二、DOM(文件物件模型)是什麼？瀏覽器提供了一個橋樑，讓 JavaScript 去改變畫面上的東西，簡單理解就是將Document 轉換成 Object。</p> <p>三、如何選到想要的元素：getElement (一)const elements = document.getElementsByTagName('tagName') 例：</p> <body> <div> hello </div> <script> const elements = document.getElementsByTagName(‘div’) console.log(elements) </script> </body> //<script></script>建議放在<body></body>中 (二)const elements = document.getElementsByClassName('className') 例： <body> <div class=”block”> hello </div> <script> const elements = document.getElementsByClassName(‘block’) console.log(elements) </script> </body> (三)const elements = document.getElementById('Id Name') //注意沒有s，因為ID只有一個例： <body> <div ids=”block”> hello </div> <script> const elements = document.getElementById(‘block’) console.log(elements) </script> </body> (四)const elements = document.querySelector('CSS Selector') 回傳第一個元素例： <body> <div id=”block”> hello </div> <div class=”block”> yoyoyo </div> <script> const elements = document.querySelector(‘div’) console.log(elements) //只會回傳第一個div hello </script> </body> (五)const elements = document.querySelectorAll('CSS Selector') 回傳所有四、改變元素的 CSS <style> //先創造style的class .active { background: red; //在這裡描述 } </style> 五、改變元素的 Class <style> .active { background: red; } </style> <div id="block"> hello </div> <script> const elements = document.querySelector('#block') element.classList.add('active') </script> 利用 element.classList.add 新增 active 的效果 element.classList.add('className') // 新增 class element.classList.add('className', 'className') // 新增多個 class element.classList.remove('className') // 移除 class element.classList.toggle('className') // 切換 class（有變無，無變有）六、改變內容：inner、outer 的 HTML 與 text <div id="block"> yo <a> hello~ </a> </div> <script> const element = document.querySelector('#block') console.log(element.innerText) </script> 會印出 “yo hello~“ <script> const element = document.querySelector('#block > a'); element.innerText = 'i am a link' // 變更文字 console.log(element.innerText); </script> 會印出 “yo i am a link” 七、插入與刪除元素：appendChild 與 removeChild <div id="block"> yo <a> hello~ </a> </div> <script> const element = document.querySelector('#block') //要先指定目錄 element.removeChild(document.querySelector('a')) //指定刪除該元素 </script> <script> const element = document.querySelector('#block') const item = document.createElement('div') item.innerText = '123' element.appendChild(item) </script> 今日心得：我突然發現，我對html的標籤、目錄、元素之類的很不熟悉，奇怪了應該是有學過啊...可能是自己的筆記做得不好，要來翻找學長姐的筆記參考一下。 </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Lu-yeom"><img src="https://avatars.githubusercontent.com/u/82422161?v=4" />Lu-yeom</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>日期：110年5月26日(星期三)20:30~22:30 今日進度：[FE102] 前端必備：JavaScript</p> <p>課程筆記：一、eventListener(監聽事件) 與 callback function</p> <div id="block"> yo <a> hello~ </a> </div> <script> const element = document.querySelector('#block') element.addEventListener(‘click’, onClick) //插入函式onClick，點擊時會跳出視窗 function onClick() { //此為callback函式 alaert(‘click!’) } </script> <p>較常使用匿名函式，直接把函式寫入： const element = document.querySelector('#block') element.addEventListener(‘click’, onClick() { alaert(‘click!’) }) </p> <p>二、詳細講解 callback function callback funciton 為執行 addEventListener 背後的概念。它的目的就是為了不要讓其他事情被阻塞 (block)，而延伸出來的方式。概念有點像是美食街的呼叫器，『好了後再叫我』！</p> <p>三、event(e) 是什麼？ const element = document.querySelector('#block') element.addEventListener('click',function(e) { console.log(e) }) e代表MouseEvent 範例：</p> <div id="block"> yo <a> hello~ </a> <input /> </div> <script> const element = document.querySelector('input') element.addEventListener('keydown', function(e) { console.log(e.key) }) 在輸入窗格內輸入的每個按鍵都會被印出來（keydown）同場加映： <style> .active { background: red; } </style> </head> <body> <div id="block"> yo <a> hello~ </a> <input /> <button class=’change-btn’>change</button> </div> <script> const element = document.querySelector('.change-btn') element.addEventListener('click', function(e) { document.querySelector(‘body’).classList.toggle(‘active’) }) 點擊”change”按鈕背景會變成紅色四、表單事件處理 onSubmit 用於提交表單時的驗證。 <body> <form class="login-form"> <div> username: <input name='username' /> </div> <div> password: <input name='password' type='password' /> //可將輸入內容遮蔽 </div> <div> password again: <input name='password2' type='password'/> </div> <input type='submit' /> </form> <script> const element = document.querySelector('.login-form') element.addEventListener('submit', function(e) { const input1 = document.querySelector('input[name=password]') const input2 = document.querySelector('input[name=password2]') if(input1.value !== input2.value) { //如果密碼不同，防止表單送出 alert('密碼不同') e.preventDefault() } }) </script> </body> 五、阻止預設行為：preventDefault 範例：阻止表單送出 <script> const element = document.querySelector('.input[name=username]') element.addEventListener('keypress', function(e) { if(e.key === ‘e’) { //不能輸入’e’字母 e.preventDefault() } }) 另一種常見範例為防止點選連結六、比複雜更複雜的事件傳遞機制 <div class="outer"> outer <div class="inner"> inner <a href="#" class="btn">btn</a> </div> </div> <script> addEvent('.outer') addEvent('.inner') addEvent('.btn') function addEvent(className) { document.querySelector(className) .addEventListener('click', function(){ console.log(className) }) } </script> 瀏覽器事件傳遞機制中，如點選被包覆在inner、outer中的btn，會連同inner、outer一起被觸發。七、事件傳遞機制詳解：捕獲與冒泡參考Huli的文章：https://blog.techbridge.cc/2017/07/15/javascript-event-propagation/ DOM 的事件在傳播時，會先從根節點開始往下傳遞到target，這邊你如果加上事件的話，就會處於CAPTURING_PHASE，捕獲階段。 target就是你所點擊的那個目標，這時候在target身上所加的eventListenr會是AT_TARGET這一個 Phase。最後，事件再往上從子節點一路逆向傳回去根節點，這時候就叫做BUBBLING_PHASE，也是大家比較熟知的冒泡階段。基本原則為： 1.先捕獲，再冒泡 2.當事件傳到 target 本身，沒有分捕獲跟冒泡今日心得：覺得今天的課程有點吸收不來，沒有入到腦子裡的感覺。 </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Lu-yeom"><img src="https://avatars.githubusercontent.com/u/82422161?v=4" />Lu-yeom</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>日期：110年5月27日(星期四)15:00~17:00、20:00~22:30 今日進度：[FE102] 前端必備：JavaScript</p> <p>課程筆記：一、別向上級回報：stopPropagation 先以捕獲與冒泡的機制來說明： addEvent('.outer') addEvent('.inner') addEvent('.btn')</p> <p>function addEvent(className) { document.querySelector(className) .addEventListener('click', function(e){ console.log(className, '冒泡', e.eventPhase) }, false) // false : 放在冒泡階段上 (預設)</p> <pre><code>document.querySelector(className) .addEventListener('click', function(e){ console.log(className, '捕獲', e.eventPhase) }, true) // true : 放在捕獲階段上</code></pre> <p>} 以上例子為「先冒泡再捕獲」，如果要阻止「冒泡」： addEvent('.outer') addEvent('.inner')</p> <p>function addEvent(className) { document.querySelector(className) .addEventListener('click', function(e){ console.log(className, '冒泡', e.eventPhase) }) </p> <pre><code>document.querySelector(‘.btn’) .addEventListener('click', function(e) { e.stopPropagation() //點擊btn，阻止事件傳遞 console.log(‘.btn 冒泡’) })</code></pre> <p>如果是要在「捕獲」階段就阻止事件傳遞： addEvent('.outer') addEvent('.inner')</p> <p>window.addEventListener(‘click’, function(e) { e.stopPropagation() }, true) //點選outer、inner、btn都不會傳遞事件</p> <p>function addEvent(className) { document.querySelector(className) .addEventListener('click', function(e){ console.log(className, '冒泡', e.eventPhase) }) </p> <pre><code>document.querySelector(‘.btn’) .addEventListener('click', function(e) { e.stopPropagation() //點擊btn，阻止事件傳遞 console.log(‘.btn 冒泡’) })</code></pre> <p>但如果同一個節點尚有其他相同的事件，還是會觸發，如果也想阻止傳遞： document.querySelector(‘.btn’) .addEventListener('click', function(e) { e.stopImmediatePropagation() //立刻阻止其他相同事件 console.log(‘.btn click1’) }) document.querySelector(‘.btn’) .addEventListener('click', function(e) { e.stopPropagation()<br /> console.log(‘.btn click2’) })</p> <p>二、事件代理 Delegation 假如說我們有 100 li，若為每個 li 都添加事件，會造成 DOM 抓取次數太多，瀏覽器效能降低。為了不要重複做一樣的事情，我們可用事件代理方式！</p> <p>而事件代理是利用「事件傳遞的冒泡原理」，將子元素的監聽事件綁在父元素上。</p> <p>例如：當我們在最外層添加點擊事件時，裡面的 ul、 li 、a 的點擊事件都會冒泡到最外層的節點上，委託它代理執行事件。</p> <p>其中好處是：若有很多子元素，就無需一個一個綁定監聽事件。動態新增來的子元素，也會冒泡到上層，因此不怕沒監聽到它。</p> <html> <body> <ul id="list"> <li data-index="1">1</li> <li data-index="2">2</li> <li data-index="3">3</li> <a>點我<a> </ul> <script> document.getElementById('list').addEventListener('click', (e) => { console.log(e.target.getAttribute('data-index')); }) </script> </body> </html> <p>三、綜合示範：簡易密碼產生器 <!DOCTYPE HTML></p> <html> <head> <meta charset="utf-8" /> <title>密碼產生器

英文

數字

特殊符號

四、綜合示範：動態表單通訊錄

動態表單通訊錄

Name: Mobile:

今日心得：今天的課程也是很難消化，還是沒搞懂冒泡的順序。

Lu-yeom commented 3 years ago

日期：110年5月29日(星期六)21:00~23:00 今日進度：[FE102] 前端必備：JavaScript

課程筆記：一、網頁的資料都存在哪裡？ (一)最古老的方式：Cookie：　　其實是個小文字檔，會自動帶到Server。瀏覽器中有一個資訊為Set-Cookie，可當成通行證來識別。

(二)最推薦的儲存方式local storage：

(三)session storage： coding寫法如上，只要把localStorage改成sessionStorage即可。資料只會存在一個分頁中的區間，如果另開分頁，資料不會保存，較常使用在短時間的資訊儲存。

今日心得：從上週的切版課程開始跟課就有一點吃力，總覺得好像少上了一些部份，想找補充資料又不知道要看哪個...嗚嗚，要前功盡棄了嗎。

Lu-yeom commented 3 years ago

日期：110年5月30日(星期日)15:00-17:00、19:00-22:30 今日進度：寫作業

一、hw1：表單驗證&二、hw2：餐廳 FAQ 頁面　　因自主學習所以沒有權限可以讀取、提交作業。

三、hw3：Todo List 試著切版看看，但是功能沒有做好...

Todo List

看線上課程
運動

四、簡答題

什麼是 DOM？

　　文件物件模型，瀏覽器提供了一個橋樑，讓 JavaScript 去改變畫面上的東西，簡單理解就是將Document 轉換成 Object。

事件傳遞機制的順序是什麼；什麼是冒泡，什麼又是捕獲？

　　DOM 的事件在傳播時，會先從根節點開始往下傳遞到target，這邊你如果加上事件的話，就會處於CAPTURING_PHASE，捕獲階段。　　target就是你所點擊的那個目標，這時候在target身上所加的eventListenr會是AT_TARGET這一個 Phase。　　最後，事件再往上從子節點一路逆向傳回去根節點，這時候就叫做BUBBLING_PHASE，也是冒泡階段。

什麼是 event delegation，為什麼我們需要它？

　　事件代理是利用「事件傳遞的冒泡原理」，將子元素的監聽事件綁在父元素上。　　例如：當我們在最外層添加點擊事件時，裡面的 ul、 li 、a 的點擊事件都會冒泡到最外層的節點上，委託它代理執行事件。　　其中好處是：　　若有很多子元素，就無需一個一個綁定監聽事件。　　動態新增來的子元素，也會冒泡到上層，因此不怕沒監聽到它。

event.preventDefault() 跟 event.stopPropagation() 差在哪裡，可以舉個範例嗎？

　　1.取消事件傳遞stopPropagation：　　　先以捕獲與冒泡的機制來說明： addEvent('.outer') addEvent('.inner') addEvent('.btn')

function addEvent(className) { document.querySelector(className) .addEventListener('click', function(e){ console.log(className, '冒泡', e.eventPhase) }, false) // false : 放在冒泡階段上 (預設)

document.querySelector(className)
    .addEventListener('click', function(e){
        console.log(className, '捕獲', e.eventPhase)
    }, true) // true : 放在捕獲階段上

} 　　以上例子為「先冒泡再捕獲」，如果要阻止「冒泡」： addEvent('.outer') addEvent('.inner') function addEvent(className) { document.querySelector(className) .addEventListener('click', function(e){ console.log(className, '冒泡', e.eventPhase) })

document.querySelector(‘.btn’)
    .addEventListener('click', function(e) {
        e.stopPropagation()  //點擊btn，阻止事件傳遞
        console.log(‘.btn 冒泡’)
    })

　　如果是要在「捕獲」階段就阻止事件傳遞： addEvent('.outer') addEvent('.inner')

window.addEventListener(‘click’, function(e) { e.stopPropagation() }, true) //點選outer、inner、btn都不會傳遞事件

function addEvent(className) { document.querySelector(className) .addEventListener('click', function(e){ console.log(className, '冒泡', e.eventPhase) })

document.querySelector(‘.btn’)
    .addEventListener('click', function(e) {
        e.stopPropagation()  //點擊btn，阻止事件傳遞
        console.log(‘.btn 冒泡’)
    })

　　2.阻止預設行為：preventDefault 　　　範例：阻止表單送出

Githubissues.

Githubissues is a development platform for aggregating issues.

Lu-yeom / mentor-program-5th-self-learning