iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
JavaScript

火箭通關JS30 系列

主要是在紀錄連續30天實作JS30,對其產生的心得、筆記,透過這樣的方式幫自己的js打下基礎

參賽天數 15 天 | 共 30 篇文章 | 1 人訂閱 訂閱系列文 RSS系列文
DAY 1

JS30-01 - JavaScript Drum Kit

前情提要: JS30,是由加拿大工程師Wes Bos所建立一系列課程,課程中我們可以學到很多JS的實際應用,對於我這種自學踏入前端的人來說,透過這些課題能夠對J...

DAY 2

JS30-02-JS and CSS Clock

課程目的: 這次的內容是如何在網頁上用JS配合CSS做出時鐘,當時在做的時候順便也想練習一下CSS於是手刻了自己版本的時鐘。 成品範例如下: 本次功能實作重點...

DAY 3

JS30-03-CSS Variables

課程目的: 這個章節,告訴我們該如何利用CSS變數(不是SASS)來調整圖片中黃框的pandding,邊框及JS字體顏色,以及模糊 本次功能實作重點: 了解...

DAY 4

JS30-04 - Array Cardio Day 1

課程目的: 這次的內容是,給我們兩個陣列讓我們對array使用不同的methods去達成我們的題目要求 接下來就讓我們去試著運用array.method!實做連...

DAY 5

JS30-05 - Flex Panel Gallery

課程目的: 這次的內容是如何利用CSS的flex屬性去控制展開頁面,達到點擊展開,字往內移動的效果作品實做 本次功能實作重點: 完善CSS 偵測點擊執行動...

DAY 6

JS30-06-Type Ahead

課程目的: 這次的內容是,當我們在搜索欄打字母,會篩選出相應的城市名稱,達到搜尋篩選的效果實做連結 本次功能實作重點: 綁定事件監聽器 抓取城市數據 查找相...

DAY 7

JS30-07 - Array Cardio Day 2

課程目的: 這次的內容是JavaScript 陣列操作的幾個常見方法,特別是針對物件陣列的操作, some()、every()、find() 和 findInd...

DAY 8

JS30-08 - Fun with HTML5 Canvas

課程目的: 本次的內容是利用Html5的Canvas元素製作畫布,讓我們可以在網頁上的畫布區塊做簡單的塗鴉作品實做 本次功能實作重點: 元素選取與繪圖環境設定...

DAY 9

JS30-09 - Dev Tools Domination

課程目的: 這個章節的內容,是介紹console各種的用法,像是我們常用的console.log,除此之外其實還有其他方法可以調用,接下來就讓我們來看看 本次功...

DAY 10

JS30-10 - Hold Shift and Check Checkboxes

課程目的: 這次的範例給我們的是一個list選單,而我們要實作的功能是當我們勾選了其中一個A選項,當我們壓著shift並且勾選B選項時,可以將A~B之間的選項...