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

1 Like 0 留言 1032 瀏覽

鐵人賽自我挑戰組 DAY 8

進擊的轉職-平面設計邁向前端工程師之奇幻旅程系列第 8 篇

技術第 08 話兩個月後重新再學習一次，但又不像第一次

進度緩慢是不是要砍掉重練說實話，雖然坐月子期間有跟著前端社團以及書籍維持前端相關的知識與動態，但較少碰電腦學習依然有差，畢竟只有用看的跟實作去開發網頁落差還是...

Tim Hsu ‧ 2022-09-08

0 Like 0 留言 971 瀏覽

鐵人賽自我挑戰組 DAY 30

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

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

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

karakamin ‧ 2021-10-15

0 Like 0 留言 782 瀏覽

鐵人賽自我挑戰組 DAY 29

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

技術 [ Day 29 ] - this

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

karakamin ‧ 2021-10-14

0 Like 0 留言 821 瀏覽

鐵人賽自我挑戰組 DAY 28

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

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

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

karakamin ‧ 2021-10-13

0 Like 0 留言 719 瀏覽

鐵人賽自我挑戰組 DAY 27

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

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

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

karakamin ‧ 2021-10-12

0 Like 0 留言 1052 瀏覽

鐵人賽自我挑戰組 DAY 26

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

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

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

karakamin ‧ 2021-10-11

1 Like 0 留言 881 瀏覽

鐵人賽自我挑戰組 DAY 25

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

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

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

karakamin ‧ 2021-10-10

0 Like 0 留言 709 瀏覽

鐵人賽自我挑戰組 DAY 24

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

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

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

karakamin ‧ 2021-10-09

0 Like 0 留言 843 瀏覽

鐵人賽自我挑戰組 DAY 23

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

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

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

karakamin ‧ 2021-10-08

0 Like 0 留言 1221 瀏覽

鐵人賽自我挑戰組 DAY 22

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

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

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

karakamin ‧ 2021-10-07

0 Like 0 留言 1528 瀏覽

鐵人賽自我挑戰組 DAY 21

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

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

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

karakamin ‧ 2021-10-06

0 Like 0 留言 953 瀏覽

鐵人賽自我挑戰組 DAY 20

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

技術 [ Day 20 ] - AJAX

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

karakamin ‧ 2021-10-05

0 Like 0 留言 774 瀏覽

鐵人賽自我挑戰組 DAY 19

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

技術 [ Day 19 ] - 箭頭函式

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

karakamin ‧ 2021-10-04

0 Like 0 留言 991 瀏覽

鐵人賽自我挑戰組 DAY 18

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

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

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

karakamin ‧ 2021-10-03

0 Like 0 留言 974 瀏覽

鐵人賽自我挑戰組 DAY 17

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

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

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

karakamin ‧ 2021-10-02

0 Like 0 留言 504 瀏覽

鐵人賽自我挑戰組 DAY 16

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

技術 [ Day 16 ] - 事件

事件指的是在 DOM 上所發生的事件，換句話是可以是特定的動作被觸發後，必須要執行對應的事情。（如：點選某某功能、按下 ESC 鍵，就是觸發執行某件事。）...

karakamin ‧ 2021-10-01

0 Like 0 留言 645 瀏覽

鐵人賽自我挑戰組 DAY 15

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

技術 [ Day 15 ] - 取得節點內資料的方法

前面已經學習如何更改指定節點的內容今天來介紹如何取出指定節點的資料值 innerHTML 使用 innerHTML 取出指定節點內的 HTML 結構 HTML...

karakamin ‧ 2021-09-30

1 Like 0 留言 539 瀏覽

鐵人賽自我挑戰組 DAY 14

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

技術 [ Day 14 ] - 存取網頁元素之變更指定內容

上一篇提到可以取得指定的 DOM 節點今日來介紹可如何透過節點存取及變更文件節點 textContent 可以取得或更新指定元素內的文字範例中， h1...

karakamin ‧ 2021-09-29

0 Like 0 留言 721 瀏覽

鐵人賽自我挑戰組 DAY 13

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

技術 [ Day 13 ] - 如何透過 DOM 抓取網頁元素

本日要來說明如何透過 DOM 取得網頁元素，直接動手做看看！下面 JS 所使用的 HTML 範例如下： <h1 class="header...

karakamin ‧ 2021-09-28

0 Like 0 留言 690 瀏覽

鐵人賽自我挑戰組 DAY 12

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

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

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

karakamin ‧ 2021-09-27

0 Like 0 留言 882 瀏覽

鐵人賽自我挑戰組 DAY 11

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

技術 [ Day 11 ] - DOM

DOM DOM 是什麼呢？ DOM（Document Object Model）當瀏覽器進入網頁時，將 HTML 文件會以樹狀結構的解析，此稱為 DOM Tre...

karakamin ‧ 2021-09-26

0 Like 0 留言 554 瀏覽

鐵人賽自我挑戰組 DAY 10

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

技術 [ Day 10 ] - 傳值與傳址

傳值與傳址先來看案例案例一 let a = 50; let b = a; console.log (a); // 顯示為 50 console.log(b)...

karakamin ‧ 2021-09-25

0 Like 0 留言 921 瀏覽

鐵人賽自我挑戰組 DAY 9

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

技術 [ Day 9 ] - 函式

函式一個函式內會包裝一段執行的動作，可以被重複的使用如何宣告函式宣告函式時，需要使用 function 關鍵字，並且給函式一個名稱，再接著一組括號，寫法如...

karakamin ‧ 2021-09-24

0 Like 0 留言 588 瀏覽

鐵人賽自我挑戰組 DAY 8

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

技術 [ Day 8 ] - 迴圈

迴圈想要重複做一件事，會依據條件而有不同的執行次數 for 迴圈寫法如下 for (let i = 0; i < 5; i++){ conso...

karakamin ‧ 2021-09-23

0 Like 0 留言 600 瀏覽

鐵人賽自我挑戰組 DAY 7

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

技術 [ Day 7 ] - 判斷與流程控制

判斷與流程控制 if 判斷式以白話文來說，就是『當符合某一個條件，就做某一件事』語法範例： if( 條件式 ) { 條件式成立時執行的內容 } 以...

karakamin ‧ 2021-09-22

0 Like 0 留言 568 瀏覽

鐵人賽自我挑戰組 DAY 6

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

技術 [ Day 6] - 陣列與物件的混合使用

陣列與物件混合使用陣列與物件的混合使用範例直接以範例說明，需要設計的範例資料上有兩間店，分別有各自販售的品項，以及地址資料資料集的設計以以下的方式呈現： l...

karakamin ‧ 2021-09-21

0 Like 0 留言 751 瀏覽

鐵人賽自我挑戰組 DAY 5

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

技術 [ Day 5 ] - 物件

物件物件的格式會使用 { } 前後包住資料集內容會有屬性和值 let shop = { Name : "happy Store",...

karakamin ‧ 2021-09-20

0 Like 0 留言 509 瀏覽

鐵人賽自我挑戰組 DAY 4

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

技術 [ Day 4 ] - 陣列基本介紹

陣列的基本介紹簡單來說是存放一組資料集陣列會使用 [ ] 前後包住資料集下面的範例意思是 drinks 中有 coffee、tea、juice 三種值...

karakamin ‧ 2021-09-19

0 Like 0 留言 510 瀏覽

鐵人賽自我挑戰組 DAY 3

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

技術 [ Day 3 ] - 運算式與運算子

運算式與運算子運算式透過運算子進行運算而得到指定的結果值運算子的介紹這邊會列出幾個簡單算是常用的進行說明算術運算數字型態的資料，也可以直接使用算數運...

karakamin ‧ 2021-09-18

0 Like 0 留言 387 瀏覽

鐵人賽自我挑戰組 DAY 2

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

技術 [ Day 2 ] - 變數與型別（二）

變數與型別（二）變數簡單回顧一下，變數的宣告方式 let catNum = 3; 用比較口語的方式說明意思是就宣告一個變數名稱為 catNum ，賦予資...

karakamin ‧ 2021-09-17

技術 第 08 話 兩個月後重新再學習一次，但又不像第一次