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

0 Like 0 留言 983 瀏覽

鐵人賽自我挑戰組 DAY 30

初心者解任務啦！JS 的 30 道任務系列第 30 篇

技術 [ Day 30 ] - 初學者升級啦～完賽心得

初學者升級啦 YA！30天了～代表我連續 30 天學習 JS 了！（拍手～）第一次參加鐵人賽，其實當初活動開始的時候就一直猶豫，直到開賽最後一天下定決定報名！...

karakamin ‧ 2021-10-15

0 Like 0 留言 795 瀏覽

鐵人賽自我挑戰組 DAY 29

初心者解任務啦！JS 的 30 道任務系列第 29 篇

技術 [ Day 29 ] - this

基本概念 this 是一個關鍵字在不同執行環境中，this 所指向的值也會不同 this 和函式的呼叫方法有關在全域環境下 this 值在所有函式以外...

karakamin ‧ 2021-10-14

0 Like 0 留言 1763 瀏覽

鐵人賽自我挑戰組 DAY 29

開始入坑網頁吧! 系列第 29 篇

技術 JavaScript DOM classList

classList ClassList是一個物件，會返回一個 DOMTokenList，裡面包含此元素的類名列表常見方法:add():添加一個或多個類，如果此...

阿沁 ‧ 2021-10-13

0 Like 0 留言 876 瀏覽

鐵人賽自我挑戰組 DAY 28

初心者解任務啦！JS 的 30 道任務系列第 28 篇

技術 [ Day 28 ] - 作用域與範圍鏈

什麼是作用域靜態作用域：在語法解析時就確定作用域且不會再改變，JavaScript 屬於此類，又稱作語法作用域（lexical scope）動態作用域：在...

karakamin ‧ 2021-10-13

0 Like 0 留言 2204 瀏覽

鐵人賽自我挑戰組 DAY 28

開始入坑網頁吧! 系列第 28 篇

技術 JavaScript DOM | createElement()

接續昨天的 DOM 方法，JavaScript 常會出現:按一下某按鈕，頁面上會生出新的區塊，這是怎麼做到的? 用 createElement() 建立DOM...

阿沁 ‧ 2021-10-12

0 Like 0 留言 961 瀏覽

鐵人賽自我挑戰組 DAY 27

開始入坑網頁吧! 系列第 27 篇

技術 JavaScript Document Object

Document Object 我們知道 DOM 是 Document Object Model(文件物件模型)，Document Object，是window...

阿沁 ‧ 2021-10-11

0 Like 0 留言 726 瀏覽

鐵人賽自我挑戰組 DAY 27

初心者解任務啦！JS 的 30 道任務系列第 27 篇

技術 [ Day 27 ] - 樣板字面值（Template literals）

說明在先前的版本中被稱為樣板字串（template strings）早期在組字串資料時會用大量的 " + " 語法要組成的字串使用兩個...

karakamin ‧ 2021-10-12

0 Like 0 留言 1077 瀏覽

鐵人賽自我挑戰組 DAY 26

初心者解任務啦！JS 的 30 道任務系列第 26 篇

技術 [ Day 26 ] - 陣列的資料處理 - findIndex

特性與用途不會影響到原始陣列的資料回傳符合條件的一筆資料的 index（索引）直接進入寫法與範例範例一：找出 >= 10 的 index co...

karakamin ‧ 2021-10-11

0 Like 0 留言 895 瀏覽

鐵人賽自我挑戰組 DAY 26

開始入坑網頁吧! 系列第 26 篇

技術 JavaScript DOM | Window Object

使用Window 的方法可以省略掉 Window 字眼EX: window.alert('Hi!');//Hi! alert('Hi!');//Hi! set...

阿沁 ‧ 2021-10-10

1 Like 0 留言 895 瀏覽

鐵人賽自我挑戰組 DAY 25

初心者解任務啦！JS 的 30 道任務系列第 25 篇

技術 [ Day 25 ] - 陣列的資料處理 - find

特性與用途不會影響到原始陣列的資料篩選符合條件的第一筆資料，並且回傳至新的陣列直接進入寫法及範例範例一：找出陣列中 >= 10 的資料 con...

karakamin ‧ 2021-10-10

0 Like 1 留言 2198 瀏覽

鐵人賽 Modern Web DAY 24

這個網站也太嗨！30 個網頁動態提案系列第 26 篇

技術 #23-用Canvas做Google恐龍遊戲(都市老妹生存記!能擊退經痛加班和渣男嗎?）

大家都知道Google斷線時會有小恐龍的離線遊戲，以前第一次看到的時候超驚喜！（我到現在斷線的時候還是會玩一下XD）品牌如果發揮一點創意，將品牌元素加進小遊戲裡...

Global Rachel ‧ 2021-10-09 ‧團隊寫 code 需要講幹話

0 Like 0 留言 720 瀏覽

鐵人賽自我挑戰組 DAY 24

初心者解任務啦！JS 的 30 道任務系列第 24 篇

技術 [ Day 24 ] - 陣列資料處理 - filter

特性與用途不會影響到原始陣列的資料可以篩選符合條件的內容，並且回傳至新的陣列直接進入寫法及範例範例一：找出陣列中 >= 10 的資料 cons...

karakamin ‧ 2021-10-09

0 Like 0 留言 1129 瀏覽

鐵人賽自我挑戰組 DAY 24

開始入坑網頁吧! 系列第 24 篇

技術 JavaScript Prototype (原型)

原型 Prototype 與原型鍊 Prototype Chain JavaScript 每一個物件(包含函數)都有原型這個屬性用來繼承屬性與方法。原型會去參...

阿沁 ‧ 2021-10-08

0 Like 0 留言 903 瀏覽

鐵人賽自我挑戰組 DAY 23

初心者解任務啦！JS 的 30 道任務系列第 23 篇

技術 [ Day 23 ] - 陣列資料處理 - map

陣列資料處理 - map 特性可以將原始陣列經過處理後，重新組合回傳一個新陣列不會影響原始陣列範例一：將陣列內的資料做運算處理 const dataL...

karakamin ‧ 2021-10-08

0 Like 0 留言 1069 瀏覽

鐵人賽自我挑戰組 DAY 23

開始入坑網頁吧! 系列第 23 篇

技術 JavaScript Callback(回呼)

Callback Function 回呼函數 A function you give to another function, to be run when...

阿沁 ‧ 2021-10-07

0 Like 0 留言 1277 瀏覽

鐵人賽自我挑戰組 DAY 22

初心者解任務啦！JS 的 30 道任務系列第 22 篇

技術 [ Day 22 ] - 陣列資料處理 - forEach

陣列資料處理 - forEach 會將陣列中的每一個元素資料進行處理使用範例 let dataList = [10, 20, 30, 40]; dataLis...

karakamin ‧ 2021-10-07

0 Like 0 留言 586 瀏覽

鐵人賽自我挑戰組 DAY 22

開始入坑網頁吧! 系列第 22 篇

技術 JavaScript 閉包(Closure) 下集

看這個程式碼，結果會是如何? function ArrFunction(){ var arr=[]; for(var i=0;i<3;i++){ arr...

阿沁 ‧ 2021-10-06

0 Like 0 留言 1552 瀏覽

鐵人賽自我挑戰組 DAY 21

初心者解任務啦！JS 的 30 道任務系列第 21 篇

技術 [ Day 21 ] - 認識 JS 原生寫法處理 AJAX

JS 原生寫法處理 AJAX XMLHttpRequest 透過建立一個XMLHttpRequest物件，開啟一個 URL 並發送請求，此為較為傳統的方式範例如...

karakamin ‧ 2021-10-06

0 Like 0 留言 1506 瀏覽

鐵人賽 Modern Web DAY 21

這個網站也太嗨！30 個網頁動態提案系列第 23 篇

技術 #20-有看到我的貓嗎？用offsetPath讓貓貓滾起來！(SVG)

偶爾會看到，往下滾，球就會跟著滾動的幅度以拋物線移動。今天就來使用SVG的Path做做看！其實是我做好的第二個版本，第一個是使用GSAP & Scro...

Global Rachel ‧ 2021-10-06 ‧團隊寫 code 需要講幹話

0 Like 0 留言 831 瀏覽

鐵人賽自我挑戰組 DAY 21

開始入坑網頁吧! 系列第 21 篇

技術 JavaScript 閉包(Closure) 上集

閉包內部函數總是可以訪問其所在的外部函數中聲明的參數和變數，即使外部函式已經結束執行了。看看這個例子:EX: function greet(what){...

阿沁 ‧ 2021-10-05

0 Like 0 留言 959 瀏覽

鐵人賽自我挑戰組 DAY 20

初心者解任務啦！JS 的 30 道任務系列第 20 篇

技術 [ Day 20 ] - AJAX

AJAX 是什麼？ AJAX 全名是 Asynchronous JavaScript And XML，是 JavaScript 使用非同步處理的技術，可以達到無...

karakamin ‧ 2021-10-05

0 Like 0 留言 810 瀏覽

鐵人賽自我挑戰組 DAY 19

初心者解任務啦！JS 的 30 道任務系列第 19 篇

技術 [ Day 19 ] - 箭頭函式

這邊先簡單介紹前面有用到的函式陳述式和函式表達式函式陳述式：特性是放在宣告的 function 前或後都可以執行 function numA(x) {...

karakamin ‧ 2021-10-04

1 Like 0 留言 721 瀏覽

鐵人賽自我挑戰組 DAY 19

開始入坑網頁吧! 系列第 19 篇

技術 JavaScript IIFE (立即函數)

甚麼是立即函數? IIFE (Immediately Invoked Function Expression)從字面上可以知道就是一個在宣告當下就會馬上被執行...

阿沁 ‧ 2021-10-03

0 Like 0 留言 1016 瀏覽

鐵人賽自我挑戰組 DAY 18

初心者解任務啦！JS 的 30 道任務系列第 18 篇

技術 [ Day 18 ] - 取消 HTML 預設的觸發行為

HTML 部份元素會有預設的觸發行為，像是的連結、表單的 submit若是需要在這些元素綁定事件，讓指定的元素可以執行指定的程式碼那就得取消 HTML 預設...

karakamin ‧ 2021-10-03

0 Like 0 留言 786 瀏覽

鐵人賽自我挑戰組 DAY 18

開始入坑網頁吧! 系列第 18 篇

技術 JavaScript Arguments and Spread

Arguments 它會回傳一個類陣列包含所有你傳到函數中的參數 **類陣列(Array-like):跟Array很像，但只有陣列的length屬性和通過索...

阿沁 ‧ 2021-10-02

0 Like 0 留言 994 瀏覽

鐵人賽自我挑戰組 DAY 17

初心者解任務啦！JS 的 30 道任務系列第 17 篇

技術 [ Day 17 ] - Event 物件中的資訊

使用 addEventListener 進行事件監聽，此時 EvetnListener 會建立事件物件（ Event Object）並且以參數的型式回傳 &lt...

karakamin ‧ 2021-10-02

0 Like 0 留言 1334 瀏覽

鐵人賽 Modern Web DAY 15

這個網站也太嗨！30 個網頁動態提案系列第 17 篇

技術 #14-撒花～Button慶祝動態自己來！～ (JS)

敝人很常踩到詐騙網站，第一屏就是一個慶祝的小動畫，恭喜我中獎（好想中威力彩啊）網頁也很常有這種獎勵使用者的小動畫，譬如說送出一個訂單、或是幫忙寫了一個評價，我...

Global Rachel ‧ 2021-09-30 ‧團隊寫 code 需要講幹話

1 Like 0 留言 1847 瀏覽

鐵人賽 Modern Web DAY 16

這個網站也太嗨！30 個網頁動態提案系列第 18 篇

技術 #15- 滾起來！頁面動態進度條(JS算網頁長度)

進度條一般都是搭配文章使用，主要是告訴使用者目前閱讀到哪裡～這是我自己非常喜歡的網頁設計，讓你可以預設自己閱讀的進度，安排自己時間～（太長就快逃啊！）看到了這...

Global Rachel ‧ 2021-10-01 ‧團隊寫 code 需要講幹話

0 Like 0 留言 2739 瀏覽

鐵人賽 Modern Web DAY 14

這個網站也太嗨！30 個網頁動態提案系列第 16 篇

技術 #13-消失吧！Navbar！讓你的網頁更多空間 (JS)

好的Nav bar的動態可以讓網站不那麼呆板，其實實作的技術也不難，就是偵測頁面的滾動向下滑的時候再出現今天實作兩個：提案 Nav bar的消失 Na...

Global Rachel ‧ 2021-09-29 ‧團隊寫 code 需要講幹話

0 Like 0 留言 982 瀏覽

鐵人賽 Modern Web DAY 28

Learn & Play JavaScript -- Entry-Level Front-End Web Development 系列第 28 篇

技術 #28 JS: Timing Events - Part 2

After introducing about the 2 methods for timing events in the last article, let...

Vida Lin ‧ 2021-09-28