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

0 Like 0 留言 851 瀏覽

鐵人賽自我挑戰組 DAY 22

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

技術 JavaScript 閉包(Closure) 下集

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

阿沁 ‧ 2021-10-06

0 Like 0 留言 1918 瀏覽

鐵人賽自我挑戰組 DAY 21

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

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

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

karakamin ‧ 2021-10-06

0 Like 0 留言 1911 瀏覽

鐵人賽 Modern Web DAY 21

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

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

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

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

0 Like 0 留言 954 瀏覽

鐵人賽自我挑戰組 DAY 21

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

技術 JavaScript 閉包(Closure) 上集

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

阿沁 ‧ 2021-10-05

0 Like 0 留言 1179 瀏覽

鐵人賽自我挑戰組 DAY 20

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

技術 [ Day 20 ] - AJAX

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

karakamin ‧ 2021-10-05

0 Like 0 留言 1084 瀏覽

鐵人賽自我挑戰組 DAY 19

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

技術 [ Day 19 ] - 箭頭函式

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

karakamin ‧ 2021-10-04

1 Like 0 留言 957 瀏覽

鐵人賽自我挑戰組 DAY 19

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

技術 JavaScript IIFE (立即函數)

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

阿沁 ‧ 2021-10-03

0 Like 0 留言 1204 瀏覽

鐵人賽自我挑戰組 DAY 18

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

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

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

karakamin ‧ 2021-10-03

0 Like 0 留言 945 瀏覽

鐵人賽自我挑戰組 DAY 18

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

技術 JavaScript Arguments and Spread

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

阿沁 ‧ 2021-10-02

0 Like 0 留言 1247 瀏覽

鐵人賽自我挑戰組 DAY 17

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

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

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

karakamin ‧ 2021-10-02

0 Like 0 留言 2019 瀏覽

鐵人賽 Modern Web DAY 15

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

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

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

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

1 Like 0 留言 2266 瀏覽

鐵人賽 Modern Web DAY 16

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

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

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

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

0 Like 0 留言 3333 瀏覽

鐵人賽 Modern Web DAY 14

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

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

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

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

0 Like 0 留言 1359 瀏覽

鐵人賽 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

1 Like 0 留言 3940 瀏覽

鐵人賽 Modern Web DAY 13

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

技術 #12-套件掰！用JS 做進場特效 (Intersection Observer API)

進場特效也是基本再基本的網頁動態！尤其是當網頁內容塞太多時，適當地加上進場特效可以幫助使用者閱讀重點。以前常用的套件如Scroll Magic，或計算網頁滑動...

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

0 Like 0 留言 841 瀏覽

鐵人賽自我挑戰組 DAY 12

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

技術 [ Day 12 ] - <script> 標籤放哪裡～

上一篇有提到，一個瀏覽器在解析網頁時，會將 HTML 內容由上至下一行一行解析成 DOM 的節點，並且透過 DOM API 來控制節點那麼，HTML 在寫 J...

karakamin ‧ 2021-09-27

1 Like 0 留言 3870 瀏覽

鐵人賽 Modern Web DAY 12

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

技術 #11-下滑動態做起來！(JS: scrollTo & scrollBy)

今天來介紹一下往下滑和往上滑的指引動畫和搭配Web API。現在都很流行第一屏設計做好做滿，有時候太美了會讓使用者忘記（/根本不想）往下滑，適當地指引下滑，就...

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

0 Like 0 留言 1317 瀏覽

鐵人賽 Modern Web DAY 27

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

技術 #27 JS: Timing Events - Part 1

What is timing event? "JavaScript can be executed in time-intervals. This i...

Vida Lin ‧ 2021-09-27

0 Like 0 留言 1026 瀏覽

鐵人賽自我挑戰組 DAY 1

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

技術 [ Day 1 ] - 變數與型別

變數與型別變數是什麼呢？把他想成是一個容器，容器可以存放需要的資訊，這一個資訊可以是一段文字、一個數字等。變數的命名規則開頭字元必須是英文大小寫字元...

karakamin ‧ 2021-09-16

0 Like 0 留言 935 瀏覽

鐵人賽 Modern Web DAY 15

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

技術 #15 JS: if else statement

To make the operators meaningful for users, let’s explain by examples if stateme...

Vida Lin ‧ 2021-09-15

0 Like 0 留言 1057 瀏覽

鐵人賽 Modern Web DAY 14

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

技術 #14 JS: create a calculator by prompt()

Final Calculator Design <!DOCTYPE html> <html> <head> <tit...

Vida Lin ‧ 2021-09-14

0 Like 0 留言 1028 瀏覽

鐵人賽 Modern Web DAY 13

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

技術 #13 JS: Intro to Data, Variables, Operators

Data: Number, String, Boolean Number: e.g. 7, 17 String: consist of quotation m...

Vida Lin ‧ 2021-09-13

0 Like 0 留言 1239 瀏覽

鐵人賽 Modern Web DAY 12

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

技術 #12 JavaScript Introduction

What is JavaScript? HTML is like the structure/bone of our body; JavaScript is...

Vida Lin ‧ 2021-09-12

1 Like 1 留言 3317 瀏覽

技術 TDX api 串接將 ajax 改為 axios，解決 415 錯誤，解決 headers content-type 無法更新

今天跟著 TDX 的串接說明文（TDX運輸資料流通服務API介接範例程式碼說明）試圖串一串 TDX API TDX 官方有提供 Ajax 的串接範例（Sampl...

lobsterpp ‧ 2022-05-05

0 Like 0 留言 993 瀏覽

技術 js notes(1)

case 1 var book = { title:"The Hobbit", author:"J.R.R.Tolkien...

jpchyng ‧ 2021-02-24

3 Like 3 留言 1218 瀏覽

技術 Day [4] — this：指定物件 — JS之浸豬籠系列

Day [4] — this：指定物件 — JS之浸豬籠系列我們在前面幾章知道 this 會依據呼叫方式印出不同結果，那如果我們希望可以存取 this 的某個...

pokaeatlunch ‧ 2022-07-07

0 Like 0 留言 1204 瀏覽

技術 Day [3] — this：建構物件 — JS之浸豬籠系列

如果你不知道這個系列為什麼叫這種激烈的名字可以看這篇： Day [0] — JS之浸豬籠系列如果你還沒看過前面的章節，不會太難理解今天這篇，但因為我寫得很讚...

pokaeatlunch ‧ 2021-01-07

1 Like 0 留言 1350 瀏覽

技術 Day [2] — this：作用域 — JS之浸豬籠系列

如果你不知道這個系列為什麼叫這種激烈的名字可以看這篇：Day [0] — JS之浸豬籠系列如果你還沒看過這篇，可能會有點難理解今天這篇，建議你先企看看！Da...

pokaeatlunch ‧ 2021-01-06

1 Like 1 留言 1430 瀏覽

技術 Day [1] — this：存在於物件 — JS之浸豬籠系列

太想要放梗圖ㄌ..... this = 這個。如果對this的理解到這裡，很棒您跟我一樣完全看不懂this呢！接下來就從豬腦浸豬籠ㄉ角度來看 this是...

pokaeatlunch ‧ 2021-01-06

1 Like 0 留言 1444 瀏覽

技術 Day [0] — JS之浸豬籠系列

大家好，打給安安，我是六角學院火箭隊6th前端組的小廢物ＰＯＫＡ看我的ＩＤ就知道我是來吃午餐ㄉ！???（有同學一起吃午餐真開心）其實我本來是想先寫一個連豬腦...

pokaeatlunch ‧ 2021-01-06

技術 JavaScript 閉包(Closure) 下集

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

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

技術 JavaScript 閉包(Closure) 上集

技術 [ Day 20 ] - AJAX

技術 [ Day 19 ] - 箭頭函式

技術 JavaScript IIFE (立即函數)

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

技術 JavaScript Arguments and Spread

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

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

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

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

技術 #28 JS: Timing Events - Part 2

技術 #12-套件掰！用JS 做進場特效 (Intersection Observer API)

技術 [ Day 12 ] - <script> 標籤放哪裡～

技術 #11-下滑動態做起來！(JS: scrollTo & scrollBy)

技術 #27 JS: Timing Events - Part 1

技術 [ Day 1 ] - 變數與型別

技術 #15 JS: if else statement

技術 #14 JS: create a calculator by prompt()

技術 #13 JS: Intro to Data, Variables, Operators

技術 #12 JavaScript Introduction

技術 TDX api 串接將 ajax 改為 axios，解決 415 錯誤，解決 headers content-type 無法更新

技術 js notes(1)

技術 Day [4] — this：指定物件 — JS之浸豬籠系列

技術 Day [3] — this：建構物件 — JS之浸豬籠系列

技術 Day [2] — this：作用域 — JS之浸豬籠系列

技術 Day [1] — this：存在於物件 — JS之浸豬籠系列

技術 Day [0] — JS之浸豬籠系列

標記使用者