iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
自我挑戰組

JavaScript 30天挑戰 自學筆記 系列

JavaScript 30 是由一個加拿大的全端工程師Wes Bos建立的一系列課程,
挑戰無框架×無編譯器×無函式庫×無樣板,只使用純JS在30天內每天實作一個小東西,
想透過這個系列加強自己對JS的熟悉度,並將學習過程記錄成筆記
如有錯誤的地方歡迎大家提出修正!

鐵人鍊成 | 共 30 篇文章 | 2 人訂閱 訂閱系列文 RSS系列文
DAY 1

JS30 自學筆記 Day01_JavaScript Drum Kit

今日任務:點擊鍵盤,畫面會出現相對應的按鈕縮放並發出不同的聲音 keydown window.addEventListener(keydown,要執行的函式)偵...

2022-09-16 ‧ 由 jen147774ny 分享
DAY 2

JS30 自學筆記 Day02_CSS + JS Clock

今日任務:做一個時鐘 HTML部分 <section> <div class="clock">...

2022-09-17 ‧ 由 jen147774ny 分享
DAY 3

JS30 自學筆記 Day03_Playing with CSS Variables and JS

今日任務:拖動橫軸可以調整圖片的邊框大小、模糊程度和改變顏色 HTML 拖拉軸<input type="range" min=&quo...

2022-09-18 ‧ 由 jen147774ny 分享
DAY 4

JS30 自學筆記 Day04_Array Cardio Day 1

今日任務:認識陣列的方法 作者已先給兩個資料陣列: const inventors = [ { first: 'Albert', last:...

2022-09-19 ‧ 由 jen147774ny 分享
DAY 5

JS30 自學筆記 Day05_Flex Panels Image Gallery

今日任務:滑鼠碰到其中一個會展開,並顯示上下文字主要著重在css flexbox transition HTML部分 <div class="p...

2022-09-20 ‧ 由 jen147774ny 分享
DAY 6

JS30 自學筆記 Day06_Ajax Type Ahead

今日任務: 輸入關鍵字後,顯示所有與關鍵字相關的城市或景點 作者有給我們資料網址 const endpoint ='https://gist.githubuse...

2022-09-21 ‧ 由 jen147774ny 分享
DAY 7

JS30 自學筆記 Day07_Array Cardio Day 2

今日任務:認識陣列的方法2 資料 const people = [ { name: 'Wes', year: 1988 }, { name: '...

2022-09-22 ‧ 由 jen147774ny 分享
DAY 8

JS30 自學筆記 Day08_Fun with HTML5 Canvas

在這之前程式碼結束都是沒有加分號的,覺得加分號比較清楚,這邊開始程式碼結束都會加上分號 今日任務:認識Canvas,可用滑鼠在畫面上塗鴉,並不斷改變筆刷顏色與粗...

2022-09-23 ‧ 由 jen147774ny 分享
DAY 9

JS30 自學筆記 Day09_14 Must Know Dev Tools Tricks

今日任務:認識console相關方法 如果想要看該元素到底是觸發了什麼 JavaScript 事件,可以在該元素上面設定斷點。這裡因為點選該文字後會導致該元素的...

2022-09-24 ‧ 由 jen147774ny 分享
DAY 10

JS30 自學筆記 Day10_Hold Shift to Check Multiple Checkboxes

今日任務:按住Shift鍵,點選兩個Checkbox,並將之間的數個Checkboxes打勾 取得checkbox,加上監聽事件 const checkboxe...

2022-09-25 ‧ 由 jen147774ny 分享