iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
Modern Web

寫JS30天 系列

跟著JS30初步了解javascript

鐵人鍊成 | 共 30 篇文章 | 18 人訂閱 訂閱系列文 RSS系列文 團隊好想工作室第二屆鐵人賽
DAY 1

JS 30 - 01 - drum kit

JS30的第一天 要將鍵盤變成一個爵士鼓,首先看一下所拿到的.html檔 <div class="keys"> &l...

2018-10-16 ‧ 由 JasonYang 分享
DAY 2

JS 30 - 02 - JS and CSS Clock

今天我們要來做個時鐘,首先我們使用new Date()「在開啟網頁時」拿到當下時間 首先看到時鐘會發現秒針、分針、時針都是在9點鐘方向 所以要先記得一件事「之後...

2018-10-17 ‧ 由 JasonYang 分享
DAY 3

JS 30 - 03 - CSS Variables

首先先來看看 html <h2>Update CSS Variables with <span class='hl'>JS</sp...

2018-10-18 ‧ 由 JasonYang 分享
DAY 4

JS 30 - 04 - Array Cardio Part I

今天要介紹 Array 常用的 methed,廢話不多說,先來介紹今天學到的一些技巧 .filter() .filter() 會回傳一個陣列,其條件是 retu...

2018-10-19 ‧ 由 JasonYang 分享
DAY 5

JS 30 - 05 -Flex Panels Image Gallery

今天要製作一個點擊某區塊,該區塊的 大小會放大 隱藏內容顯示出來 首先先看看 css ,這裡的 css 很容易解析,就是一個 flex 容器包著另外一個 f...

2018-10-20 ‧ 由 JasonYang 分享
DAY 6

JS 30 - 06 - Ajax Type Ahead

Demo 首先到公眾運輸平台找 api let flights = []; fetch(flightApi) .then(blob => {...

2018-10-21 ‧ 由 JasonYang 分享
DAY 7

JS 30 - 07 - Array Cardio Part II

今天有幾題要來解決,首先我們拿到了一個裝滿許多個人資料的 array ,資料如下 const people = [{ name: 'Wes',...

2018-10-22 ‧ 由 JasonYang 分享
DAY 8

JS 30 - 08 - Fun with HTML5 Canvas

今天要用 canvas 來畫圖,canvas可以用來即時畫圖、畫動畫,還可以用來處理影片,為影片增加特效。今天要來做一個會隨著點擊時間「移動」、「變色」、「縮放...

2018-10-23 ‧ 由 JasonYang 分享
DAY 9

JS30 - 09 - Dev Tools Domination

想要了解 js 如何操作 css 我們可以鎖定目標 element 看他變化時, js 在背後做了什麼事 首先開啟開發者工具的 element 找到要觀察的...

2018-10-24 ‧ 由 JasonYang 分享
DAY 10

JS 30 - 10 - Hold Shift and Check Checkboxes

按著shift,一次選取上一次選到的chekbox至這次選取的checkbox const checkboxs = document.querySelector...

2018-10-25 ‧ 由 JasonYang 分享