JavaScript 開發系列

涵蓋 JavaScript 核心觀念與動手練習，適合打底與複習。

2021年12月19日
[React]meetup-react-sample 範本

環境與版本作業系統：Window10 64x | 版本：20H2 | OS組件：19042.1110 開發軟 […]
2021年11月28日
[React]組件三大屬性(2)-props(properties的簡寫)

理解每個組件對象都會有props(properties的簡寫)屬性組件標籤的所有屬性都保存在props中 […]
2021年11月23日
[React]組件三大屬性(1)-State、setState

理解 state是組件對象最重要的屬性, 值是對象(可以包含多個key-value的組合) 組件被稱為&#82 […]
2021年10月30日
[React]CRUD 備忘錄範本

網址 https://github.com/steven5j/Steven.ReactJsLab/tree/m […]
2021年6月7日
[JavaScript]物件 Object

JavaScript 是物件導向語言，代表物件是這種語言最基本的類型，JavaScript 與其他物件導向語言 […]
2021年4月21日
[JavaScript]Date 物件

Date 物件為複雜類型之一，僅限於「時間」用途，仍為常用物件，Date 物件能夠表示 1970/01/01 […]
2021年4月16日
[JavaScript]使用控制結構

JavaScript 具有大部分程式語言提供的標準條件敘述，其語法來自 Java 和 C，這些敘述都是分支敘述 […]
2021年4月15日
[JavaScript]簡單變數類型

所有的程式設計工作都可以歸結對「某些資料」進行「某種操作」，而變數就是代表「資料」的存在：變數是一個臨時的儲存 […]
2020年12月27日
JavaScript-發送HTTP請求 Fetch API

繼上一篇 [JavaScript-發送HTTP請求 XMLHttpRequest jQuery方式 AJAX] […]
2020年12月23日
JavaScript-發送HTTP請求 XMLHttpRequest jQuery方式 AJAX

繼上一篇 [JavaScript-發送HTTP請求 XMLHttpRequest] 延續，這一篇是主要紀錄使用 […]
2020年12月20日
JavsScript-發送HTTP請求 XMLHttpRequest

XMLHttpRequest (XHR)，是最常見的 JavaScript HTTP Client，支援IE， […]
2020年12月12日
[JS作品]JS30系列30 – Whack A Mole

主題目標製作一個打地鼠小遊戲作品網址：處理步驟步驟一：地鼠是隨機出現在 6 個地洞中，而且出現時間也 […]
2020年12月11日
[JS作品]JS30系列29 – Countdown Timer

主題目標製作一個倒數計時器，頁面上已經有固定秒數的選項，也有 form 的自訂時間的倒數。作品網址：處理 […]
2020年12月10日
[JS作品]JS30系列28 – Video Speed Controller

主題目標使用 div 來製作一個速度條，來調整影片播放速度。需要實現的效果是當鼠標拖動滑塊時，實時改變視頻播 […]
2020年12月9日
[JS作品]JS30系列27 – Click and Drag

主題目標拖拉畫面的時候等於移動卷軸，以達到移動的目的。作品網址：處理步驟步驟一：滑鼠點擊的時候，有樣 […]
2020年12月5日
[JS作品]JS30系列26-Stripe Follow Along Nav

主題目標本次的編程任務需要實現的效果是當鼠標懸停於導航按鈕時，顯示對應下拉菜單的內容。（說明：下拉菜單內容 […]
2020年12月2日
[JS作品]JS30系列25-Event Capture, Propagation, Bubbling and Once

主題目標初始文檔index-start.html提供了3個尺寸不一的元素，本次挑戰是一次學習任務，主要了解學 […]
2020年11月29日
[JS作品]JS30系列24-Sticky Nav

主題目標利用 CSS 來讓製作網站的置頂選單作品網址：處理步驟利用 CSS 的 posi […]
2020年11月26日
[JS作品]JS30系列23 – Speech Synthesis

主題目標初始文檔index-start.html提供了一個閱讀器，您需要完成如下編程任務：1. […]
2020年10月23日
[JS學習]JS 陣列、字串、類陣列(NodeList、HTMLCollection )、集合(MAP&SET)

集合轉換成陣列 Array.from 用於陣列轉換Array.from 亦可用來轉換集合(Set &am […]
2020年7月30日
[JS作品]JS30系列22 – Follow Along Link Highlighter

主題目標當鼠標移動至某個對應標籤上時，為標籤添加一個白色的背景框，高亮表示該標籤被選中，當鼠標 […]
2020年7月29日
[JS作品]JS30系列21 – Geolocation 地理定位

主題目標利用瀏覽器內置Web Geolocation API,將獲取到的地理位置 […]
2020年7月27日
[JS作品]JS30系列20-Speech Detection

本次的挑戰任務，是利用瀏覽器內置Web speech API,將自己所說的話輸出在頁面上,僅chrome瀏覽器 […]
2020年7月26日
[JS作品]JS30系列19-Webcam Fun

這一關的挑戰，應該會是難度最高的，看了很多線上其他挑戰者的筆記分享，也都是說這關相較於其他關比較 […]
2020年4月5日
[JS作品]JS30系列16-Mouse Move Shadow 文字陰影的鼠標隨動效果

作品網址：主題目標初始文件index-start.html中提供 […]
2020年4月5日
[JS作品]JS30系列17-Sort Without Articles 數組的去前綴排序

作品網址：主題目標初始文件index-start.html中提供了一個無序列表 […]
2020年4月5日
[JS作品]JS30系列18-Adding Up Times With Reduce 使用reduce進行時間累加

作品網址：主題目標初始文件index-start.html中提供 […]
2020年4月3日
[JS作品]JS30系列14 – JavaScript References vs Copying JS中的引用與復制

作品網址：主題目標隨著卷軸移動到中央，讓圖片動態顯示。需求思考 […]
2020年4月3日
[JS作品]JS30系列15 – LocalStorage

作品網址：主題目標讓使用者可以自行記錄該小吃的項目，並確認是否選 […]
2020年3月30日
[JS作品]JS30系列13 – Slide in on Scroll 圖片隨屏幕滾動而滑入滑出的效果指南

作品網址：主題目標隨著卷軸移動到中央，讓圖片動態顯示。需求思考 […]
2020年3月29日
[JS作品]JS30系列12 – Key Sequence Detection 鍵盤輸入序列的驗證指南

作品網址：主題目標要對照 Console 才能觀看，主要是偵測輸入按鍵，一開始 […]
2020年3月26日
[JS作品]JS30系列11 – Custom Video Player 自定義視頻播放器

作品網址：主題目標為video元素添加自定義樣式的播放控制面板 […]
2020年3月21日
[JS作品]JS30系列10-Hold Shift and Check Checkboxes 選單多重選取功能

作品網址：主題目標類似 Gmail 信箱的 checkbox 多選功能，當選取 […]
2020年3月15日
[JS作品]JS30系列08 : Fun with HTML5 Canvas HTML5 Canvas的樂趣

作品網址：主題目標做出繪圖畫板。需求思考分析滑鼠點下去會開始 […]
2020年3月15日
[JS作品]JS30系列09 – Dev Tools Domination 開發工具統計

作品網址：主題目標開發工具 Console 的運用說明。介紹 l […]
2020年3月9日
[JS作品]JS30系列07 : Array Cardio Day 2 陣列的有氧運動2

作品網址：主題目標提出幾個陣列的題目，用提示的函式把答案呈現出來 […]
2020年3月8日
[JS作品]JS30系列06 : Type Ahead 關鍵字建議提示訊息

作品網址：主題目標製作一個關鍵字建議提示訊息的功能需求思考分析 […]
2020年1月2日
[JS作品]JS30系列05 : Flex Panel Gallery 柔性面板畫廊

作品網址：主題目標用CSS與JS來製作一個點擊後會 […]
2019年12月22日
[JS作品]JS30系列04：Array Cardio Day 1 陣列的有氧運動

作品網址需求思考分析各陣列函式回傳值不同，reduce回傳是一個 […]
2019年12月6日
[JS作品]JS30系列03 – CSS Variables(CSS 變數)

作品網址： ↓每次進去圖片都會不一樣↓ 思考需求分析 1.spacing對應到下方圖片的邊框寬。 […]
2019年12月1日
[JS作品]JS30系列02：JS + CSS Clock

作品網址思考需求分析 1.能抓取時間點。 2.區分時針、分針、秒針。 3.時間數值可以轉換成旋轉的角度。 4 […]
2019年11月22日
[JS作品]JS30系列01：JavaScript Drum Kit監聽按鍵事件及撥放音效

JS30系列：監聽按鍵事件及撥放音效作品網址需求思考分析瀏覽器能夠辨認使用者在鍵盤上所按下的按鍵當鍵盤 […]
2019年9月27日
JavaScript作品 F2e_2nd 六角學院第一關番茄鐘

六角學院第一關番茄鐘 F2e 2nd作品連結：https://challenge.thef2e.com/us […]
2019年9月27日
JavaScript作品 digiclock_漂亮數位時鐘

digiclock_漂亮數位時鐘作品連結：https://steven5j.github.io/digicl […]
2019年9月27日
JavaScript作品 JS故事-走出魔幻森林

JS_Story走出魔幻森林作品連結： https://steven5j.github.io/JS_Stor […]
2019年9月27日
JavaScript作品 OpenData_衛福部合格醫院

作品連結：https://steven5j.github.io/opendata_API_mohw.gov/ […]

[React]meetup-react-sample 範本

[React]組件三大屬性(2)-props(properties的簡寫)

[React]組件三大屬性(1)-State、setState

[React]CRUD 備忘錄 範本

[JavaScript]物件 Object

[JavaScript]Date 物件

[JavaScript]使用控制結構

[JavaScript]簡單變數類型

JavaScript-發送HTTP請求 Fetch API

JavaScript-發送HTTP請求 XMLHttpRequest jQuery方式 AJAX

JavsScript-發送HTTP請求 XMLHttpRequest

[JS作品]JS30系列30 &#8211; Whack A Mole

[JS作品]JS30系列29 &#8211; Countdown Timer

[JS作品]JS30系列28 &#8211; Video Speed Controller

[JS作品]JS30系列27 &#8211; Click and Drag

[JS作品]JS30系列26-Stripe Follow Along Nav

[JS作品]JS30系列25-Event Capture, Propagation, Bubbling and Once

[JS作品]JS30系列24-Sticky Nav

[JS作品]JS30系列23 &#8211; Speech Synthesis

[JS學習]JS 陣列、字串、類陣列(NodeList、HTMLCollection )、集合(MAP&#038;SET)

[JS作品]JS30系列22 &#8211; Follow Along Link Highlighter

[JS作品]JS30系列21 &#8211; Geolocation 地理定位

[JS作品]JS30系列20-Speech Detection

[JS作品]JS30系列19-Webcam Fun

[JS作品]JS30系列16-Mouse Move Shadow 文字陰影的鼠標隨動效果

[JS作品]JS30系列17-Sort Without Articles 數組的去前綴排序

[JS作品]JS30系列18-Adding Up Times With Reduce 使用reduce進行時間累加

[JS作品]JS30系列14 &#8211; JavaScript References vs Copying JS中的引用與復制

[JS作品]JS30系列15 &#8211; LocalStorage

[JS作品]JS30系列13 &#8211; Slide in on Scroll 圖片隨屏幕滾動而滑入滑出的效果指南

[JS作品]JS30系列12 &#8211; Key Sequence Detection 鍵盤輸入序列的驗證指南

[JS作品]JS30系列11 &#8211; Custom Video Player 自定義視頻播放器

[JS作品]JS30系列10-Hold Shift and Check Checkboxes 選單多重選取功能

[JS作品]JS30系列08 : Fun with HTML5 Canvas HTML5 Canvas的樂趣

[JS作品]JS30系列09 &#8211; Dev Tools Domination 開發工具統計

[JS作品]JS30系列07 : Array Cardio Day 2 陣列的有氧運動2

[JS作品]JS30系列06 : Type Ahead 關鍵字建議提示訊息

[JS作品]JS30系列05 : Flex Panel Gallery 柔性面板畫廊

[JS作品]JS30系列04：Array Cardio Day 1 陣列的有氧運動

[JS作品]JS30系列03 &#8211; CSS Variables(CSS 變數)

[JS作品]JS30系列02：JS + CSS Clock

[JS作品]JS30系列01：JavaScript Drum Kit監聽按鍵事件及撥放音效

JavaScript作品 F2e_2nd 六角學院 第一關番茄鐘

JavaScript作品 digiclock_漂亮數位時鐘

JavaScript作品 JS故事-走出魔幻森林

JavaScript作品 OpenData_衛福部合格醫院

[React]CRUD 備忘錄範本

[JS作品]JS30系列30 – Whack A Mole

[JS作品]JS30系列29 – Countdown Timer

[JS作品]JS30系列28 – Video Speed Controller

[JS作品]JS30系列27 – Click and Drag

[JS作品]JS30系列23 – Speech Synthesis

[JS學習]JS 陣列、字串、類陣列(NodeList、HTMLCollection )、集合(MAP&SET)

[JS作品]JS30系列22 – Follow Along Link Highlighter

[JS作品]JS30系列21 – Geolocation 地理定位

[JS作品]JS30系列14 – JavaScript References vs Copying JS中的引用與復制

[JS作品]JS30系列15 – LocalStorage

[JS作品]JS30系列13 – Slide in on Scroll 圖片隨屏幕滾動而滑入滑出的效果指南

[JS作品]JS30系列12 – Key Sequence Detection 鍵盤輸入序列的驗證指南

[JS作品]JS30系列11 – Custom Video Player 自定義視頻播放器

[JS作品]JS30系列09 – Dev Tools Domination 開發工具統計

[JS作品]JS30系列03 – CSS Variables(CSS 變數)

JavaScript作品 F2e_2nd 六角學院第一關番茄鐘