iT邦幫忙

前端新手村相關文章
共有 115 則文章
鐵人賽 Modern Web DAY 30
實作經典 JavaScript 30 系列 第 30

技術 Day30: 完賽心得

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

鐵人賽 Modern Web DAY 29
實作經典 JavaScript 30 系列 第 29

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

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

鐵人賽 Modern Web DAY 28
實作經典 JavaScript 30 系列 第 28

技術 Day28: Sticky Nav

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

鐵人賽 Modern Web DAY 27
實作經典 JavaScript 30 系列 第 27

技術 Day27:Speech Synthesis

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

鐵人賽 Modern Web DAY 26
實作經典 JavaScript 30 系列 第 26

技術 Day26: Follow Along Links

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

鐵人賽 Modern Web DAY 25
實作經典 JavaScript 30 系列 第 25

技術 Day25: Adding Up Times With Reduce

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

鐵人賽 Modern Web DAY 24
實作經典 JavaScript 30 系列 第 24

技術 Day24: Sort Without Articles

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

鐵人賽 Modern Web DAY 23
實作經典 JavaScript 30 系列 第 23

技術 Day23: Mouse Move Shadow

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

鐵人賽 Modern Web DAY 22
實作經典 JavaScript 30 系列 第 22

技術 Day22: LocalStorage(二)

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

鐵人賽 Modern Web DAY 21
實作經典 JavaScript 30 系列 第 21

技術 Day21: LocalStorage(ㄧ)

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

鐵人賽 Modern Web DAY 20
實作經典 JavaScript 30 系列 第 20

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

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

鐵人賽 Modern Web DAY 19
實作經典 JavaScript 30 系列 第 19

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

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

鐵人賽 Modern Web DAY 18
實作經典 JavaScript 30 系列 第 18

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

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

鐵人賽 Modern Web DAY 17
實作經典 JavaScript 30 系列 第 17

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

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

鐵人賽 Modern Web DAY 16
實作經典 JavaScript 30 系列 第 16

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

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

鐵人賽 Modern Web DAY 15
實作經典 JavaScript 30 系列 第 15

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

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

鐵人賽 Modern Web DAY 14
實作經典 JavaScript 30 系列 第 14

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

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

鐵人賽 Modern Web DAY 13
實作經典 JavaScript 30 系列 第 13

技術 Day13: 認識console

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

鐵人賽 Modern Web DAY 12
實作經典 JavaScript 30 系列 第 12

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

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

鐵人賽 Modern Web DAY 11
實作經典 JavaScript 30 系列 第 11

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

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

鐵人賽 Modern Web DAY 10
實作經典 JavaScript 30 系列 第 10

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

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

鐵人賽 Modern Web DAY 9
實作經典 JavaScript 30 系列 第 9

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

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

鐵人賽 Modern Web DAY 8
實作經典 JavaScript 30 系列 第 8

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

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

鐵人賽 Modern Web DAY 1

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

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

鐵人賽 Modern Web DAY 7
實作經典 JavaScript 30 系列 第 7

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

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

鐵人賽 Modern Web DAY 6
實作經典 JavaScript 30 系列 第 6

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

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

鐵人賽 自我挑戰組 DAY 1
溫故知新 JavaScript 系列 第 1

技術 Day1 - 前奏

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

鐵人賽 Modern Web DAY 5
實作經典 JavaScript 30 系列 第 5

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

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

鐵人賽 Modern Web DAY 4
實作經典 JavaScript 30 系列 第 4

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

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

鐵人賽 Modern Web DAY 3
實作經典 JavaScript 30 系列 第 3

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

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