iT邦幫忙

javascript相關文章
共有 5672 則文章
鐵人賽 Modern Web DAY 22

技術 Day22 陣列資料處理 (1) - forEach()

陣列資料處理 forEach 是其中一種陣列處理方法,只有陣列才能使用,為什麼要學陣列資料處理呢? let data = [11,52,34]; 假設想要求得...

鐵人賽 自我挑戰組 DAY 25

技術 Day25- 使用robotjs自動化控制滑鼠及鍵盤

去年才寫過Python的控制鍵盤滑鼠套件-PyAutoGUI。今年學Javascript當然也不能錯過啦!在Node.js中,當然也有控制滑鼠及鍵盤的套件,這個...

鐵人賽 Modern Web DAY 21

技術 【D21】 小工具:身分證製造機(part 3)-檢查驗證碼

大部分檢查功能已經在昨日做完,剩下的就是最重要的檢查碼,現在來討論一下檢查碼如何做吧!(其實已經逃避兩天了 XD) 檢查碼規則 何謂檢查碼 Checksum 被...

鐵人賽 影片教學 DAY 13
從麻瓜變成前端魔法師 系列 第 21

技術 Day21【從麻瓜變成前端魔法師】JS 流程控制 if else

俗話說~沒有什麼事是 1 杯酒解決不了的,如果有,那就喝 2 杯。 我們來把它寫成 if else : <script> let mo...

鐵人賽 Modern Web DAY 23

技術 Day 23:Image Overlay 組件實作

組件實作:Demo 一、前言 Image Overlay 指的是圖片上的覆蓋效果,我們要做的是:「使用滑鼠移動到圖片上,頁面會從四個方向來滑入頁面,像是從...

鐵人賽 Modern Web DAY 21

技術 想轉職的鯊魚從零基礎開始學習JavaScript Day-21 The if / switch Statement(條件句) 與 Iteration Statements(迭代/迴圈)

前言 JavaScript的八種型別乘載了資料,那麼Statement則化作軌跡驅使資料的運動;所以當鯊魚理解型別的本質之後,就要繼續滲入探套Statement...

鐵人賽 Modern Web DAY 23

技術 [DAY 23] 自己的 Hook 自己做! useDates 兩個時間恰恰好

承繼上篇,useDate 變兩個就成了 useDates :) DEMO 在這裡 情境 除了用一個 useDate 之外,有時候需要兩個關聯的時間(區間)來提...

鐵人賽 Modern Web DAY 23

技術 Have fun! 新手也能打造的Javascript微型專案! Day23: 你的頁面有表格嗎? 替它加個輸出成Csv檔案按鈕吧!

tags: ItIron2022 Javascript 前言 嚴格說起來這並不算個微型專案,不過確實是一個相當常見的功能,許多在實務上的專案會直接採用第三方套件...

鐵人賽 Modern Web DAY 22

技術 Day 22:鍵盤輸入事件實作

組件實作:Demo 一、前言 鍵盤輸入監聽事件是一個很有用的功能,或許在瀏覽一般的網頁時,比較不常使用鍵盤控制。但如果是遊玩網頁遊戲,取得鍵盤的監聽就會變...

鐵人賽 自我挑戰組 DAY 22

技術 Day 22:SVG Path 急速入門

組件實作:Demo 一、前言 今天要來介紹的東西是「與繪畫相關的東西 - CSS 和 SVG」,CSS 來製作圖形是一件很常見的事情,至於為什麼會特別的提...

鐵人賽 自我挑戰組 DAY 30
JavaScript亂記 系列 第 30

技術 標籤樣板字面值

標籤樣板字面值是一種更高級的樣板字面值形式,允許你透過標籤函數操作樣板字面值的輸出。標籤函數的第一個參數是一字串陣列,其餘參數則是處理過的表達式。最終,你可以返...

鐵人賽 Modern Web DAY 21

技術 JS之路 Day21 - recursion(遞迴)

今天假如要寫一個求 1 + 2 + … + n 的總和,一般人可能很直覺的就想到說,要用迴圈的方式把所有值都加在一起。 function add(n) {...

鐵人賽 自我挑戰組 DAY 30

技術 Day 30 Side Project : pokedex 精靈寶可夢圖鑑

超白話畫面和功能拆解 背景顏色取決於寶可夢的類型 CSS手刻卡片排版 每個卡片內包含寶可夢圖片、名稱、編號、背景顏色、類型,以上這些都要動態呈現 運...

鐵人賽 Modern Web DAY 21

技術 菜鳥初探設計模式-D21

為什麼要了解設計模式 當我說"沉默螺旋"(spiral of silence),你知道我在說什麼嗎? 你如果知道,我就不用解釋繼續講下去,甚...

鐵人賽 Modern Web DAY 21

技術 Day21 事件 Event

事件 (Event) 網頁的事件可說是無所不在,從瀏覽器載入網頁開始,只要有在使用網頁,就隨時都有事件正在被觸發。 事件類型 事件類型非常多種,比較常見的例如:...

鐵人賽 Modern Web DAY 21

技術 Day 21 咩色用得好 - Array.prototype.findLast

Abstract 我是阿傑,既然前面介紹了這麼多 找東西 的咩色 (find、filter、indexOf...),我們今天就來介紹一個最新最時尚的咩色 -...

鐵人賽 自我挑戰組 DAY 24

技術 Day24- 使用正則表達式進行字串匹配

原本要繼續打Node的套件的,可是突然想到忘記講這個常用的東西,趕快來惡補( 前面有學到了很多有關於字串的操作。今天要來學習的是用來匹配字串的正則表達式(或叫正...

鐵人賽 Modern Web DAY 20

技術 【D20】 小工具:身分證製造機(part 2)-身分證檢查功能

已經瞭解規則,接著就開始製作身分證製造機的作業。在開始前,先做個檢查機制,檢查我們的身分證號碼是否正確,也就是 TDD 的精神,這樣才能確認我們的身分證製造機產...

鐵人賽 影片教學 DAY 13
從麻瓜變成前端魔法師 系列 第 20

技術 Day20【從麻瓜變成前端魔法師】JS 物件 object

若想知道更多資訊,可參考文字敘述:Day19【每天5分鐘】學前端 | JavaScript 物件 object 感謝收看,我們明天見囉~~~

鐵人賽 自我挑戰組 DAY 23

技術 Day23- 使用DayJS來操作時間(下)

今天繼續跟著官方文檔來研究DayJS套件。 Display 講到顯示,應該還記得昨天很常用到的format(),顧名思義,它就是拿來做格式化的函式,既然是函式,...

鐵人賽 Modern Web DAY 20

達標好文 技術 Day 20: 在發 API 之前 - 先學 axios 基礎與封裝管理 API

前言 接下來幾篇文章以「在 Vue 3 Composition API 處理非同步( 發 API )」為主軸,會從新手的角度出發,告訴大家可以在哪些地方、時機發...

鐵人賽 Modern Web DAY 20

技術 想轉職的鯊魚從零基礎開始學習JavaScript Day-20 Indexed Collections-Array Objects(陣列)

前言 陣列,是資料處理中很常見的東西,但是你真的懂陣列嗎?除了基本陣列的樣子,陣列其實還有很多東西可以運用,但是鯊魚不懂陣列,所以鯊魚要努力學習,為了結實的基礎...

鐵人賽 自我挑戰組 DAY 21

技術 Day 21:小作品展示

組件實作 : Demo、Demo2 一、前言 昨天學習 Sass 的最主要目的,就是為了要看懂自己以前寫的東西,我把它統稱為小作品,當時的這些小作品我是照...

鐵人賽 Modern Web DAY 21

技術 web component 的實做- 單項下拉選單組件

select元素是一個很常出現、很常使用也很難客製化的元素。所以我第一篇的實做會選擇select來客製化。為了能更好的複用組件,我會分成以下數個部分:顯示資料用...

鐵人賽 Modern Web DAY 22

技術 Have fun! 新手也能打造的Javascript微型專案! Day22: 總是用別人寫的套件? 這次我們自己來寫一個npm package吧!

tags: ItIron2022 Javascript 前言 在開發的過程中我們經常用到大大小小的套件,讓我們不用每次都自己從造起,而是能直接站在巨人的肩膀上看...

鐵人賽 Modern Web DAY 21

技術 Day 21:List 功能實作

組件實作 : Demo 一、前言 List 也是一種很常見的功能,其實 List 可以跟之前做的 Day 18:Collapsibles 組件實作 搭配使...

鐵人賽 Modern Web DAY 20

技術 JS之路 Day20 - What is this?

前言 今天要來講的主題是this,在JavaScript中的this可以在呼叫函式時,透過不同方式決定它要指向哪一個物件,而關於什麼時候會指向什麼地方,這就是t...

鐵人賽 Modern Web DAY 20

技術 Day20 DOM(Document Object Model) 文件物件模型

甚麼是 DOM DOM (Document Object Model),中文翻譯為「文件物件模型」,是一個經過 W3C 定義,將 HTML 文件內的各個元素、...

技術 基本JavaScript Methods of Number object - Training JS #14: toString() and toLocaleString()

這次介紹的是toString()和toLocaleString(),這兩個有什麼差別呢?不難發現後者多了Locale這個單字,也就是說,後者會依照所在地區去轉化...

鐵人賽 Modern Web DAY 20

技術 Day 20 咩色用得好 - Array.prototype.findIndex

Abstract 整篇會分成以下幾個部分: 使用時機 語法 說明 範例 注意事項 ECMAScript 結論 findIndex() 這個 method 的...