iT邦幫忙

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

技術 【前端動手玩創意】等待的轉圈圈效果 (1)

目錄 【前端動手玩創意】等待的轉圈圈效果 (1) 【前端動手玩創意】google五星評分的星星(2) 【前端動手玩創意】CSS-3D卡片翻轉效果(3) (今天難...

技術 【前端動手玩創意】自學之旅從這系列開始 (0)

寫文緣由 現在想要自學前端的人非常多,有些人汲汲營營迷失在網路的資訊大海嘯裡面,有些人想要犧牲金錢買來貴桑桑的課程,卻發現自己沒什麼成長。這些都是很可惜的彎路,...

技術 關注點分離(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軸 :...

鐵人賽 自我挑戰組 DAY 22

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

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

鐵人賽 Modern Web DAY 17

技術 Day 17 JavaScript bind vs call vs apply

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

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

鐵人賽 自我挑戰組 DAY 16

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

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

鐵人賽 自我挑戰組 DAY 14

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

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

鐵人賽 自我挑戰組 DAY 13

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

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

鐵人賽 Modern Web DAY 11

技術 Day 11 JavaScript var vs let (1)

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

鐵人賽 Modern Web DAY 12

技術 Day 12 JavaScript var vs let (2)

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

鐵人賽 Modern Web DAY 10

技術 Day 10 JavaScript CSS in JS

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

鐵人賽 Modern Web DAY 8

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

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

鐵人賽 Modern Web DAY 7

技術 Day 07 JavaScript/Rails API

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