iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

3 Like 1 留言 78 瀏覽

鐵人賽 Modern Web DAY 30

實作經典 JavaScript 30 系列第 30 篇

技術 Day30: 完賽心得

第30天，不免俗要來寫個完賽心得雖然javascript-30還差個幾天，才能把全部的實例都做完但還是要給自己拍拍手，利用這30天養成了一個好習慣而且真的...

喬依司 ‧ 2020-10-08 ‧團隊自討苦吃三十天#像極了愛情

1 Like 0 留言 69 瀏覽

鐵人賽 Modern Web DAY 29

實作經典 JavaScript 30 系列第 29 篇

技術 Day29: Event Capture, Propagation, Bubbling and Once

WES BOS系列影片 Alex快速導讀系列影片今天比較偏觀念的講解主要是希望能較深入理解addEventListener() 學習DOM的事件機制，包括事...

喬依司 ‧ 2020-10-07 ‧團隊自討苦吃三十天#像極了愛情

1 Like 0 留言 149 瀏覽

鐵人賽 Modern Web DAY 28

實作經典 JavaScript 30 系列第 28 篇

技術 Day28: Sticky Nav

WES BOS系列影片 Alex快速導讀系列影片今天針對常用的Navbar做fix的狀態這真的是很常見的功能，可以立馬學起來 1.先抓出NavBar的位置，...

喬依司 ‧ 2020-10-06 ‧團隊自討苦吃三十天#像極了愛情

1 Like 0 留言 78 瀏覽

鐵人賽 Modern Web DAY 27

實作經典 JavaScript 30 系列第 27 篇

技術 Day27:Speech Synthesis

WES BOS系列影片 Alex快速導讀系列影片今天來認識 Web Speech API中的兩個功能一個是 SpeechSynthesisUtterance...

喬依司 ‧ 2020-10-05 ‧團隊自討苦吃三十天#像極了愛情

1 Like 0 留言 72 瀏覽

鐵人賽 Modern Web DAY 26

實作經典 JavaScript 30 系列第 26 篇

技術 Day26: Follow Along Links

WES BOS系列影片 Alex快速導讀系列影片今天的練習是用js控制滑鼠游標，當滑鼠游標到達當前的連結時，我們使用一個新的方法 getBoundin...

喬依司 ‧ 2020-10-04 ‧團隊自討苦吃三十天#像極了愛情

2 Like 0 留言 152 瀏覽

鐵人賽 Modern Web DAY 25

實作經典 JavaScript 30 系列第 25 篇

技術 Day25: Adding Up Times With Reduce

WES BOS系列影片 Alex快速導讀系列影片今天的練習會用到reduce() 還有用一些數學的運算，將秒數換算成時分秒然後又複習了一下dataset的用...

喬依司 ‧ 2020-10-03 ‧團隊自討苦吃三十天#像極了愛情

1 Like 0 留言 169 瀏覽

鐵人賽 Modern Web DAY 24

實作經典 JavaScript 30 系列第 24 篇

技術 Day24: Sort Without Articles

WES BOS系列影片 Alex快速導讀系列影片今天要結合正規表達式跟sort()來做排序的功能作者這邊假設了一個情境就是我們拿到了一串樂團的清單，...

喬依司 ‧ 2020-10-02 ‧團隊自討苦吃三十天#像極了愛情

2 Like 0 留言 159 瀏覽

鐵人賽 Modern Web DAY 23

實作經典 JavaScript 30 系列第 23 篇

技術 Day23: Mouse Move Shadow

WES BOS系列影片 Alex快速導讀系列影片今天的練習重點是抓取DOM容器的座標與mousemove事件我們要做一個文字陰影與滑鼠互動的效果要做出這個...

喬依司 ‧ 2020-10-01 ‧團隊自討苦吃三十天#像極了愛情

2 Like 0 留言 158 瀏覽

鐵人賽 Modern Web DAY 22

實作經典 JavaScript 30 系列第 22 篇

技術 Day22: LocalStorage(二)

我們就必須使用LocalStorage 來讓瀏覽器記住剛才輸入的資料紀錄完成後，同時將表單的回復成未輸入的狀態 localStorage.setItem('i...

喬依司 ‧ 2020-09-30 ‧團隊自討苦吃三十天#像極了愛情

2 Like 0 留言 157 瀏覽

鐵人賽 Modern Web DAY 21

實作經典 JavaScript 30 系列第 21 篇

技術 Day21: LocalStorage(ㄧ)

WES BOS系列影片 Alex快速導讀系列影片今天要來認識 LocalStorage 看不太懂的話，這裡也有一篇我覺得寫得很好理解的筆記可以參考 local...

喬依司 ‧ 2020-09-29 ‧團隊自討苦吃三十天#像極了愛情

2 Like 0 留言 151 瀏覽

鐵人賽 Modern Web DAY 20

實作經典 JavaScript 30 系列第 20 篇

技術 Day20: JS中引用與複製的差異(二)

今天針對物件來看引用與複製的差異先創造一個簡單的物件 const person = { name: 'Wes Bos', age: 80 }; 再製...

喬依司 ‧ 2020-09-28 ‧團隊自討苦吃三十天#像極了愛情

2 Like 0 留言 160 瀏覽

鐵人賽 Modern Web DAY 19

實作經典 JavaScript 30 系列第 19 篇

技術 Day19: JS中引用與複製的差異(一)

WES BOS系列影片 Alex快速導讀系列影片最一開始可以先試試看這兩段程式碼 let age = 100; let age2 = age; console...

喬依司 ‧ 2020-09-27 ‧團隊自討苦吃三十天#像極了愛情

1 Like 0 留言 178 瀏覽

鐵人賽 Modern Web DAY 18

實作經典 JavaScript 30 系列第 18 篇

技術 Day 18 : 為網頁增加圖片動畫效果

WES BOS系列影片 Alex快速導讀系列影片今天要為靜態的文章，添加一些圖片進場的動畫效果練習抓取螢幕與圖片的長度，進而控制圖片的進場時間。 1.先...

喬依司 ‧ 2020-09-26 ‧團隊自討苦吃三十天#像極了愛情

1 Like 0 留言 162 瀏覽

鐵人賽 Modern Web DAY 17

實作經典 JavaScript 30 系列第 17 篇

技術 Day17: 為網站設計一個彩蛋

WES BOS系列影片 Alex快速導讀系列影片今天的實例用到了cornify.js這個套件，功能類似打電動時要放大絕招前，一定要輸入一段指令串。例如:...

喬依司 ‧ 2020-09-25 ‧團隊自討苦吃三十天#像極了愛情

2 Like 0 留言 163 瀏覽

鐵人賽 Modern Web DAY 16

實作經典 JavaScript 30 系列第 16 篇

技術 Day16: 自製的影片撥放器(二)

今天首先要控制音量大小與調整播放速度 1.先設定會使用到的函式名稱 function handleRangeUpdate() { console.log(t...

喬依司 ‧ 2020-09-24 ‧團隊自討苦吃三十天#像極了愛情

1 Like 0 留言 155 瀏覽

鐵人賽 Modern Web DAY 15

實作經典 JavaScript 30 系列第 15 篇

技術 Day15: 自製的影片撥放器(一)

WES BOS系列影片 Alex快速導讀系列影片今天要來製作自己的影片撥放器，覺得原始的控制套件很醜? 那就自己做一個，不過作者已經幫我們做好樣式了。我們還...

喬依司 ‧ 2020-09-23 ‧團隊自討苦吃三十天#像極了愛情

1 Like 0 留言 150 瀏覽

鐵人賽 Modern Web DAY 14

實作經典 JavaScript 30 系列第 14 篇

技術 Day14: 一次選取想要選取的checkbox

WES BOS系列影片 Alex快速導讀系列影片今天要嘗試做一個todo-list的小功能，按下shift鍵時，可以一次勾選代辦事項。 1.首先抓出所有ch...

喬依司 ‧ 2020-09-22 ‧團隊自討苦吃三十天#像極了愛情

1 Like 0 留言 163 瀏覽

鐵人賽 Modern Web DAY 13

實作經典 JavaScript 30 系列第 13 篇

技術 Day13: 認識console

WES BOS系列影片 Alex快速導讀系列影片今天比較輕鬆，作者帶我們深入了解console的一些使用方法，記錄下來，也許那天突然就會用到也不一定。作者...

喬依司 ‧ 2020-09-21 ‧團隊自討苦吃三十天#像極了愛情

2 Like 0 留言 155 瀏覽

鐵人賽 Modern Web DAY 12

實作經典 JavaScript 30 系列第 12 篇

技術 Day12: 在Canvas畫布上，用滑鼠畫畫(二)

今天可以再來玩一些Canvas的功能 1.更改畫筆的顏色，讓畫筆畫出彩虹的顏色這邊是使用HSL色彩概念， HSL即色相、飽和度、亮度(hue,Saturati...

喬依司 ‧ 2020-09-20 ‧團隊自討苦吃三十天#像極了愛情

1 Like 0 留言 169 瀏覽

鐵人賽 Modern Web DAY 11

實作經典 JavaScript 30 系列第 11 篇

技術 Day11: 在Canvas畫布上，用滑鼠畫畫(ㄧ)

WES BOS系列影片 Alex快速導讀系列影片今天要用滑鼠在網頁上畫畫。初探Canvas元素的使用方式，可與MDN的Canvas教學手冊搭配服用但若是只...

喬依司 ‧ 2020-09-19 ‧團隊自討苦吃三十天#像極了愛情

1 Like 0 留言 158 瀏覽

鐵人賽 Modern Web DAY 10

實作經典 JavaScript 30 系列第 10 篇

技術 Day10: 針對陣列的操作練習(三)

WES BOS系列影片 Alex快速導讀系列影片開始前一樣可以先讀這篇卡斯伯的大補帖 https://wcc723.github.io/javascript/...

喬依司 ‧ 2020-09-18 ‧團隊自討苦吃三十天#像極了愛情

2 Like 0 留言 165 瀏覽

鐵人賽 Modern Web DAY 9

實作經典 JavaScript 30 系列第 9 篇

技術 Day09: Ajax Type Ahead with fetch()(二)

WES BOS系列影片 Alex快速導讀系列影片再來，進入學習的第二個重點部分- 嘗試利用正規表達式來篩選資料在此之前，先將前置作業完成 1.先抓出需要設置...

喬依司 ‧ 2020-09-17 ‧團隊自討苦吃三十天#像極了愛情

2 Like 0 留言 167 瀏覽

鐵人賽 Modern Web DAY 8

實作經典 JavaScript 30 系列第 8 篇

技術 Day08: Ajax Type Ahead with fetch() (一)

WES BOS系列影片 Alex快速導讀系列影片學習重點: 1.使用fetch()來發送請求，串接遠端資料 2.嘗試利用正規表達式來篩選資料使用fetch(...

喬依司 ‧ 2020-09-16 ‧團隊自討苦吃三十天#像極了愛情

3 Like 2 留言 371 瀏覽

鐵人賽 Modern Web DAY 1

For 前端小幼苗的圖解筆記系列第 1 篇

技術《For 前端小幼苗的圖解筆記》參賽宣言

首次挑戰鐵人賽，不囉嗦，首發直接上目錄＆自我介紹！《For 前端小幼苗的圖解筆記》 Day About Subject 01 Autor 關於《...

Eudora ‧ 2020-09-16

1 Like 0 留言 170 瀏覽

鐵人賽 Modern Web DAY 7

實作經典 JavaScript 30 系列第 7 篇

技術 Day07: Flexbox + JavaScript 製作手風琴版面

WES BOS系列影片 Alex快速導讀系列影片作者可能怕我們忘記flex怎麼用，在中間穿插了這個課程，練習JS之餘，也能夠再複習一下flexbox 所以在...

喬依司 ‧ 2020-09-15 ‧團隊自討苦吃三十天#像極了愛情

1 Like 0 留言 177 瀏覽

鐵人賽 Modern Web DAY 6

實作經典 JavaScript 30 系列第 6 篇

技術 Day06: 針對陣列的操作練習(二)

WES BOS系列影片 Alex快速導讀系列影片做完基礎陣列練習後，來做些進階的練習進階練習目標 : 6.Sort the inventors by yea...

喬依司 ‧ 2020-09-14 ‧團隊自討苦吃三十天#像極了愛情

1 Like 0 留言 273 瀏覽

鐵人賽自我挑戰組 DAY 1

溫故知新 JavaScript 系列第 1 篇

技術 Day1 - 前奏

HI 大家好，我是 AWEI 首次參加IT邦鐵人賽，這次想透過 30 天的時間帶大家一起來認識 JavaScript ，至於為什麼會叫溫故知新JavaScri...

AWEI ‧ 2020-09-14

1 Like 0 留言 171 瀏覽

鐵人賽 Modern Web DAY 5

實作經典 JavaScript 30 系列第 5 篇

技術 Day05: 針對陣列的操作練習(一)

WES BOS系列影片 Alex快速導讀系列影片開始前建議可以先讀這篇卡斯伯的大補帖 https://wcc723.github.io/javascript/...

喬依司 ‧ 2020-09-13 ‧團隊自討苦吃三十天#像極了愛情

1 Like 0 留言 196 瀏覽

鐵人賽 Modern Web DAY 4

實作經典 JavaScript 30 系列第 4 篇

技術 Day04:用CSS + JS 做一個時鐘

WES BOS系列影片 Alex快速導讀系列影片原作者的時鐘版本比較簡易些，對於時間的算式也比較不直覺，而Alex大大的版本將時鐘做得更細緻，時間算式也更完...

喬依司 ‧ 2020-09-12 ‧團隊自討苦吃三十天#像極了愛情

2 Like 1 留言 209 瀏覽

鐵人賽 Modern Web DAY 3

實作經典 JavaScript 30 系列第 3 篇

技術 Day03:來做個鍵盤鼓手(二)

接續第一天的練習，我們成功加上了樣式，卻沒有移除它。開始來想辦法在我們不需要這個樣式時，將它移除 JS的監聽器也是可以監聽元素的變化，這時我們監聽的動作會...

喬依司 ‧ 2020-09-11 ‧團隊自討苦吃三十天#像極了愛情