iT邦幫忙

網頁前端相關文章
共有 112 則文章

技術 關注點分離(Separation of Concerns) 簡介與實作技巧

以下是我整理完文章後理解的內容,若有任何錯誤,都歡迎留言給我,謝謝 軟體開發中關注點分離的重要性 實現關注點分離可以提高程式碼的可讀性、可維護性和可擴展性。...

技術 JS筆記-VScode自己設定速打

目錄 JS筆記-幫元素加上style的寫法 JS筆記-getPosition 讓你找到元素x,y位置 js筆記--寫腳本需要用到的waitForKeyEleme...

技術 JS筆記-暫時讓網頁可以編輯

目錄 JS筆記-幫元素加上style的寫法 JS筆記-getPosition 讓你找到元素x,y位置 js筆記--寫腳本需要用到的waitForKeyEleme...

技術 JS筆記-製作copy效果

目錄 JS筆記-幫元素加上style的寫法 JS筆記-getPosition 讓你找到元素x,y位置 js筆記--寫腳本需要用到的waitForKeyEleme...

技術 如何判斷何時需要將軟體組件模組化

在開發軟體時,模組化是一種常用的設計模式。但是,如何判斷是否需要將組件模組化呢?不妨考慮以下四個因素: 複雜性:如果一個組件有很多邏輯或視覺元素,將其模組化...

技術 前端小試身手(5)-備份it幫的發問!

目錄 前端小試身手(1)--幫「發問/發文頁」新增"編輯"鈕~ 前端小試身手(2)--it幫跳轉到最佳解答 前端小試身手(3)--增添系列文...

技術 前端小試身手(3)--增添系列文目錄

目錄 前端小試身手(1)--幫「發問/發文頁」新增"編輯"鈕~ 前端小試身手(2)--it幫跳轉到最佳解答 前端小試身手(3)--增添系列文...

技術 前端小試身手(2)--it幫跳轉到最佳解答

目錄 前端小試身手(1)--幫「發問/發文頁」新增"編輯"鈕~ 前端小試身手(2)--it幫跳轉到最佳解答 前端小試身手(3)--增添系列文...

技術 前端小試身手(1)--幫「發問/發文頁」新增"編輯"鈕~

目錄 前端小試身手(1)--幫「發問/發文頁」新增"編輯"鈕~ 前端小試身手(2)--it幫跳轉到最佳解答 前端小試身手(3)--增添系列文...

鐵人賽 Modern Web DAY 6

技術 第 6 幅 - 圖形應用:旋轉!變形!我閉著眼~

標題不知道會不會透露了我的年紀哈哈哈,在下標時不知道為什麼腦袋浮現旋轉、跳躍,我閉著眼!雖然閉著眼是寫不出 code 的~ 聽歌配文章 旋轉!旋轉!旋轉!Rot...

鐵人賽 Modern Web DAY 2

技術 [DAY02]設定以及安裝基本環境(上半部)

VScode 想必對會寫網頁的大家來說,VScode肯定不陌生吧!首先,我們要先安裝VScode。怕有些人可能不知道VScode是什麼,這邊介紹一下,VScod...

鐵人賽 Modern Web DAY 1

技術 [DAY01] 進入React的世界-認識什麼是React?

學習背景 個人之前有HTML,CSS,javascript的背景,因為想要更深入研究網頁前端的技術,所以選擇了這個題目,雖然還不清楚自己是否可以順利完成30天的...

達標好文 技術 [前端/JavaScript] 實作匯出excel下載按鈕的超好用套件:ExcelJS(下)- 用React匯出excel (export excel)

有關於ExcelJS這個套件的教學與說明,請先看我的上一篇文章:[前端/ES6] 實作匯出excel下載按鈕的超好用套件:ExcelJS(上)- 基礎介紹 這一...

鐵人賽 自我挑戰組 DAY 26

技術 Day 26 CSS3 < 3D轉換 transform>

3D轉換跟2D轉換不同的是使用三維坐標系(多了Z軸座標) 1.三維坐標系是由三個軸共同組成的 X軸 : 水平向右 注意: X軸右邊是正值 左邊是負值 Y軸 :...

鐵人賽 Modern Web DAY 17

技術 Day 17 JavaScript bind vs call vs apply

共同點:原本的 this 是指向全域物件 window ,使用 bind、call、apply 可以將 this 指向帶入的第一個引數,而第二個引數開始則為一...

鐵人賽 自我挑戰組 DAY 22

技術 Day 22 HTML5 <HTML5 input類型、表單標籤>

HTML5新增的input類型: &lt;!-- 需添加form表單域 --&gt; &lt;form action=&quot;&quot;&gt;...

鐵人賽 Modern Web DAY 16

技術 Day 16 JavaScript boxing vs unboxing

boxing: 封裝可以讓原始型態的資料暫時轉成物件,這樣他才可以使用屬性或方法。遇到使用字面值(literal)[註1]的原始型態資料後面接了一個方法時,JS...

鐵人賽 Modern Web DAY 15

技術 Day 15 JavaScript NodeList vs HTMLCollection

NodeList 與 HTMLCollection 的主要差異點是節點的類型不一樣: NodeList:包含多種節點,如:元素節點、文字節點、屬性節點、註解...

鐵人賽 Modern Web DAY 14

技術 Day 14 JavaScript innerText vs textContent

兩個都可以替換標籤內的文字內容。 Node.innerText: 只會顯示我們能在瀏覽器上看到的標籤,像是 p 或是 a 標籤之類的。 會拿的到 CSS,如果...

鐵人賽 Modern Web DAY 13

技術 Day 13 JavaScript 的資料型態

JS 的資料型態主要分成物件型態及原始型態。 Object 物件型態 物件型態的資料可以使用屬性及方法。ex: 陣列[ ]、物件{ }、函式 Primitive...

鐵人賽 Modern Web DAY 12

技術 Day 12 JavaScript var vs let (2)

今天介紹 JS 內 var 與 let 的後兩點差異。 執行環境 Execution Context 宣告 declaration 執行環境 Executi...

鐵人賽 自我挑戰組 DAY 16

技術 Day 16 CSS <網頁布局-定位布局-2.定位使用>

1. 邊偏移 邊偏移就是定位的盒子移動到最終位置,有top bottom left right 四種 2. 相對定位 絕對定位 使用場景 相對定位 posi...

鐵人賽 Modern Web DAY 11

技術 Day 11 JavaScript var vs let (1)

這兩天會介紹到 JS 內 var 與 let 的差異,今天跟明天分別介紹兩點。 JS 的 var 以及 let 主要在以下四點有差異: 作用範圍 Scope...

鐵人賽 Modern Web DAY 10

技術 Day 10 JavaScript CSS in JS

Why CSS in JS? 以前在網頁開發的時候有一個原則叫做關注點分離(Separation of Concerns)。意思是各種技術只負責他們自己的領域,...

鐵人賽 自我挑戰組 DAY 14

技術 Day 14 CSS <網頁布局-浮動布局>

浮動屬性float用於創建浮動 使其移動到另一邊 直到左或右邊緣觸及包含塊或另一個浮動框的邊緣 語法 : 選擇器{float:屬性值;} /*...

鐵人賽 Modern Web DAY 8

技術 Day 08 JavaScript/Rails XHR、fetch、axios、Rails.ajax 比較

四種非同步請求資料的方法 還記得 Day 06 有提到非同步請求資料的方法有 XHR、fetch、axios、Rails.ajax 嗎?這四種都可以拿來打 AP...

鐵人賽 自我挑戰組 DAY 13

技術 Day 13 CSS <屬性書寫順序 & 網頁布局-標準布局>

CSS屬性書寫順序建議 建議遵循以下順序 1. 布局定位屬性 : display / position / float / clear / visibility...

鐵人賽 Modern Web DAY 7

技術 Day 07 JavaScript/Rails API

阿修的說文解字 API 的全名是 Application Programming Interface。中文叫做應用程式介面,重點在介面這兩個字。API 是應用程...

鐵人賽 Modern Web DAY 6

技術 Day 06 JavaScript/Rails AJAX

阿修的說文解字 AJAX 的全名是 Asynchronous JavaScript and XMLAsynchronous JavaScript 昨天介紹過了,...

鐵人賽 Modern Web DAY 5

技術 Day 05 JavaScript 同步(Sync) vs 非同步(Async)處理

筆者一開始看到這兩個詞的時候充滿著黑人問號???同步不是應該表示可以同時處理多件事,而非同步不是應該表示一次只能處理一件事嗎?怎麼實際上跟我原本的理解完全相反!...