iT邦幫忙

javascript相關文章
共有 5179 則文章
鐵人賽 Modern Web DAY 19

技術 那些被忽略但很好用的 Web API / MutationObserver

我的改變,你看得見! 在開發網頁過程中,我們最常做的事情就是對資料進行修改後運用在 DOM 元素上,像是新增 / 刪除節點、調整樣式、改寫內容或是屬性(at...

鐵人賽 Modern Web DAY 27

技術 Chapter5 - 當一個勤勞的園丁,來修剪我們美麗的樹(II)Canvas素材 修圖、壓縮、效能優化

樹葉問題 先前在第三章畫樹時,就有發現把樹葉畫上去時,系統工作時間會增加而導致掉偵,原圖是300x300,50kb左右,不是很大,但是我們要畫一大堆落葉的話,計...

鐵人賽 自我挑戰組 DAY 19

技術 [ Day 19 ] - 箭頭函式

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

鐵人賽 Modern Web DAY 25

技術 不只懂 Vue 語法:試解釋 hash 與 history 模式的分別? 為何 history 模式會回傳 404?

問題回答 Vue 預設是使用 hash 模式,但可選擇使用 history 模式。hash 模式時的 URL 會帶 # 符號,例如 https://exampl...

鐵人賽 Modern Web DAY 19
追求JS小姊姊30天 系列 第 19

技術 追求JS小姊姊系列 Day19 -- 工具力,原來如此:原型與原型鍊。

前情提要: 建構式模式加上new是很擅長創造的能力。 我:這能力也太強了吧,所以new是只有你才會嗎? (傳出熟悉的聲音) 阿物件:在討論這件事,還記得在前...

鐵人賽 Software Development DAY 19

技術 Day 19 - Maybe Monad

yo, what's up 在之前我們都是用 Identity 作為例子,但其功用並不大,所以今天要來開始介紹一些比較常用的 ADTs,今天就從 Maybe 開...

鐵人賽 自我挑戰組 DAY 20
開始入坑網頁吧! 系列 第 20

技術 JavaScript Call, Bind, Apply

Call, Bind, Apply 這些方法可以讓你去指定綁定的 this 如果沒有綁定this的話,下面的this指的是 window 物件 function...

鐵人賽 Modern Web DAY 21

技術 【Day21】導航元件 - Drawer

元件介紹 Drawer 抽屜元件,由螢幕邊緣滑出的浮動面版,常見的應用是作為導航用途,例如 Navigation drawers。 參考設計 & 屬性分...

鐵人賽 Modern Web DAY 19
舌尖上的JS 系列 第 19

技術 D19 - 今晚我想來點 唯獨派 getter 唯寫派 setter

前言 JavaScript 內的物件都有內建的兩個屬性,可以實現對物件的存取,稱為: getter 取值器 setter 設值器 他們是什麼 不同於一般物件...

鐵人賽 Software Development DAY 23

技術 【Day23】[演算法]-插入排序法Insertion Sort

插入排序法(Insertion Sort),原理是逐一將原始資料加入已排序好資料中,並逐一與已排序好的資料作比較,找到對的位置插入。例如:已有2筆排序好資料,將...

鐵人賽 Modern Web DAY 25
入門前端技能之旅 系列 第 25

技術 Day.25 「從 事件綁定 與 定時器 認識回調函式!」 —— JavaScript 定時器 & Callback

我們前面已經瞭解了事件綁定與事件冒泡了,但是使用 物件元素.綁定事件 有不方便的地方 只能同時為一個元素的一個事件綁定一個響應函式 不能綁定多個,如果綁定...

鐵人賽 Modern Web DAY 25
我的JavaScript日常 系列 第 25

技術 JavaScript Day 25. DOM Node 常用方法

文章寫到第 25 篇,從這樣的過程也穩固了自己不少觀念,今天依然攪進腦汁將查找的資料盡量用自己的話寫出來,也為今天的自己加油吧。 DOM 節點新增 docu...

鐵人賽 Modern Web DAY 20

技術 中階魔法 - 範圍鍊 Scope Chain

前情提要 上回與艾草玩遊戲輸了要接受處罰。 「都躲這麼遠了,她應該找不到我了吧!」 艾草:「啊哈,原來你躲在這裡呀!」 「你怎麼找到的?明明我跑超遠了呀。」 艾...

鐵人賽 Modern Web DAY 19
Vue.js 進階心法 系列 第 19

技術 載入頁面,什麼時候發 API 適合?

我們想要找一個適合的地方送出 $store.dispatch('fetchUser', 1); 今天就來聊聊放在哪最適合 一開始,官網教 axios 的地方 U...

鐵人賽 Modern Web DAY 19

技術 Day 19 - UML x Component — Independent (上)

前面把有依賴關係的 Component 都講一講之後,今天就來帶過其他的 UI 元件吧,因為想介紹的元件還有點多,因此會區分成兩天,今天主要講的是 Navig...

鐵人賽 Modern Web DAY 18

技術 #18 No-code 之旅 — 讀取資料庫來實作部落格 ft. Notion SDK

嗨大家~ 像昨天文章裡提的,這專案會採用 Notion 來當 CMS (包含資料庫),意思是部落格文章的新增編輯刪除都會發生在 Notion 裡。所以,這專案需...

鐵人賽 Modern Web DAY 19
JavaScript Easy Go! 系列 第 19

技術 #19 Telegram Bot 起手式

今天開始做我們的 Telegram Bot! Telegram Telegram 是一個通訊軟體,就像是 Messenger 或 Line 一樣,只不過它更加的...

鐵人賽 Modern Web DAY 18

技術 Day 18 — To Do List (5) 新增 To Do Event

昨天我們快樂 (?) 的把資料 render 到網頁上(雖然會有點 Delay,對 UX 不好…不過那可以靠其他東西稍微彌補的。有空才處理) 那麼下一步我們就來...

鐵人賽 Modern Web DAY 18
JavaScript 筆記 2 版 系列 第 18

技術 JavaScript Day18 - 陣列操作(filter、find、findIndex)

filter filter() 會建立一個新的陣列,其內容為原陣列的每一個元素經由回呼函式判斷後所回傳的結果之集合 可以看到是回傳一個新的陣列,所以原本的...

鐵人賽 Modern Web DAY 26

技術 Chapter5 - 當一個勤勞的園丁,來修剪我們美麗的樹(I)Canvas繪圖 Y型樹枝(愛心型) + 控制分支的變化

提醒:本篇承接第三章 讓我們說回那顆樹 既然樹是我們遊戲場景的主體之一,首先當然是要來整修一下我們的樹,此時我意外發現有個很讚的教學影片:Fractal T...

鐵人賽 自我挑戰組 DAY 19
開始入坑網頁吧! 系列 第 19

技術 JavaScript IIFE (立即函數)

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

鐵人賽 Modern Web DAY 24

技術 不只懂 Vue 語法:試解釋如何使用導航守衛?

問題回答 導航守衛(Navigation Guard)可以在 3 個地方使用,包括全域、元件和路由。所謂導航守衛就是在訪問頁面之前,會像一個守衛攔截並執行你所設...

鐵人賽 Modern Web DAY 18
舌尖上的JS 系列 第 18

技術 D18 - 吃一顆 Class 語法糖 (下)比較 Constructor 與 Class

前言 語法糖 Syntactic sugar,指電腦語言中添加的某種語法,這種語法對語言的功能沒有影響,但是讓程式更加簡潔,有更高的可讀性。 而 class 稱...

鐵人賽 Modern Web DAY 21

技術 DAY21-導覽設計之Navbar

前言: 接下來要來完成我們網站的導覽部分了,這裡阿森主要分為兩個大項目,分別是Navbar和Sidebar。Navbar就是一般看網頁時會浮在最上面的導覽選單...

鐵人賽 Modern Web DAY 18

技術 那些被忽略但很好用的 Web API / RequestIdleCallback

時間管力大師就是要忙裡偷閒 各位應該知道 JavaScript 是單執行緒(單線程)的程式語言,也就是一次只能處理一件事情。這樣的特性會使得事件的執行必定有...

鐵人賽 Software Development DAY 18

技術 Day 18 - Chain

yo, what's up 又看到了這張熟悉的表了,想必大家都已經知道這章要來介紹什麼了, 但在這之前先來複習一下,兩個程式 f 與 g 如何進行 compos...

鐵人賽 Modern Web DAY 24
入門前端技能之旅 系列 第 24

技術 Day.24 「你點了按鈕~同時也點了網頁本身!」 —— JavaScript 事件冒泡(Event bubbling)

我們上一個篇章認識了綁定事件,了解到不管是什麼節點,都可以綁定事件 那為什麼 JavaScript 會知道我們觸發事件? 事件觸發流程 當我們點擊網頁中任何一...

鐵人賽 自我挑戰組 DAY 18

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

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

鐵人賽 Modern Web DAY 24
我的JavaScript日常 系列 第 24

技術 JavaScript Day 24. DOM API 節點

之前我們有提到,JavaScript 如何與瀏覽器溝通,於是我們討論到透過 JavaScript 取得 DOM API 節點,使瀏覽器可以處理使用者行為與互動。...

鐵人賽 Modern Web DAY 19

技術 中階魔法 - 執行環境與執行堆疊

前情提要 上回偷拿遠距離初階魔法攻擊艾草。 艾草:「我看你拿魔法丟我丟得挺順的了(╬•᷅д•᷄╬),那開始教你中階魔法吧!」 「喔喔喔喔喔,被我扔到良心發現了嗎...