iT邦幫忙

網頁前端相關文章
共有 116 則文章
鐵人賽 Modern Web DAY 17

技術 # 前端實作案例分享: 攔截瀏覽器回上一頁

提問: 我希望使用者按下瀏覽器的回上一頁或是重新整理時,能夠先跳出一個確認訊息,提醒使用者之後再讓他選擇是否離開該怎麼做? 我們可以利用Window Hist...

鐵人賽 Modern Web DAY 2

技術 # 開發功能前,先搞懂既有專案!

為什麼需要認識既有專案呢? 舉例來說,小明加入了一個電商的前端團隊,負責的第一個項目是要在既有的購物流程中加入一個同意條款的popup。在不了解既有專案的情況下...

鐵人賽 Modern Web DAY 1

技術 # 何謂離開新手村,何謂前端的開發生命週期

前言: 名詞定義 新手村如何定義我相信每個人,每個組織都不同。以下討論會以我個人給自己的目標當成出發點。歡迎留言分享你的看法。 以下討論只代表個人觀點不代表本台...

技術 #00 文章目錄 / 參賽前言 | Super Easy CSS 前端切版百寶箱

參賽前言 本來預計在我的鐵人賽「Super Easy CSS,極度簡單(2023 去年 / 2024 今年)」的系列文章最後,想要總結一下文章裡面有提到的、我...

技術 前端小試身手(10)--lurl圖床之自動帶入密碼

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

技術 前端小試身手(9)--文章縮圖預覽(以codeLove論壇為例)

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

技術 前端小試身手(8)--教你寫出「思想審查警衛」,過濾垃圾雜訊的利器!

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

技術 前端小試身手(7)--迷片靜音神隊友,讓你尷尬不再有!

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

技術 前端小試身手(6)--IMG複製大師,懶人專用小腳本

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

鐵人賽 Modern Web DAY 25

技術 【Day25】淺談 React.js(4)公共元件 & 頁面跳轉 Router

在碰到純前端的大專案時,專案內有許多頁面是必然的。都是在同個專案,當頁面跳轉時,想必也都會使用到相同的元件。但是,在創建新頁面時,我們不僅要複製多個元件,甚至是...

鐵人賽 Modern Web DAY 24

技術 【Day24】淺談 React.js(3)React useState & useEffect

介紹完React的動態生成後,本篇將帶您進入到React Hook的領域。 甚麼是React hook?簡單來說,它是一種React的函數,可以讓您在無需使用c...

鐵人賽 Modern Web DAY 23

技術 【Day23】淺談 React.js(2)React動態生成

在上一天中,我們了解到React中的元件構成和基礎語法,今天,我們要一同探索的是 ── 更便捷的生成語法! 動態生成 在介紹jQuery的篇章中我們曾提過,我...

鐵人賽 影片教學 DAY 20

技術 一起來實作響應式網頁設計:初探Array Day20

影片教學 重點回顧 Array 陣列 當有性質相近的資料要存放一起時,可以使用array array 可以包含多種資料類型 array 不是 primiti...

鐵人賽 Modern Web DAY 18

技術 【Day18】常見切版應用(2)彈跳視窗

您在瀏覽其他網站時,是否常常被突如其來的彈跳視窗惹到心煩呢?不論是廣告、強迫訂閱、最新資訊…等,網頁常常使用彈跳視窗來宣傳。雖然惱人,但無法否認使用者確實被吸引...

鐵人賽 SideProject30 DAY 23

技術 營養師不開菜單的第二十三天 - Next.js 前端實戰 - 狀態管理及 RWD

前言 經過從設計到後端的細緻實作後,我們現在進入了至關重要的前端實作階段。在這個階段,我們不僅要將畫面與資料結合,更要為我們的應用程式注入靈魂。前端不僅僅是視覺...

鐵人賽 自我挑戰組 DAY 25

技術 Bootstrap 表單驗證(Validation)

預設瀏覽器就會有表單驗證的功能,在input中加入required屬性。例如: <label for="validationDefault01&...

鐵人賽 自我挑戰組 DAY 19

技術 網頁親和性與Bootstrap 表單overview

甚麼是網頁親和性? 網頁親和性(Web accessibility),又稱網路無障礙、網路可達性、網路可用性,旨在確保任何人,不論是身體、心理、技術上遭受障礙,...

鐵人賽 Modern Web DAY 8

技術 【Day08】前端撰寫(5)CSS Position

在上一篇中,我們提到了CSS中,快速排版向的屬性:display: flex 。但有時,flex並不適用於較小且單一的元件,也無法協助我們更精細地刻出我們所想要...

技術 [DAY0]30天挑戰從零開始設計並實作網頁

雖然不小心錯過了鐵人賽的報名,還是希望可以利用此機會複習過去所學內容並養成學習的習慣,因此這邊將利用30天的時間,從製作設計稿開始,一步一步做出自己設計的網頁,...

技術 Redux 和 Redux Persist基本介紹與範例

Redux 基本步驟 安裝套件 npm i @reduxjs/toolkit react-redux redux toolkit是封裝過,更好的redu...

技術 ReactJS基礎實作問題(lifecycle, state, props, router, hooks)

簡述React生命週期 mount是component首次被渲染到DOM的階段,在functional component中,我們通常會在componen...

技術 非本科真的能轉職當工程師嗎?

最近爬文的時候發現不少人想轉職到科技業但又無從入手很多時候都會很迷茫不知道該學哪些程式語言不知道會的程度要多深入不知道除了工程師還有沒有別的選擇如果只會前端能年...

技術 【前端動手玩創意】側邊超質感選單|幫你的網頁多一點質感好嗎?(14)

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

技術 【前端動手玩創意】動態生成的藝術|小心,亂改DOM你可能會被打臉。(13)

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

技術 【前端動手玩創意】置頂按鈕,老梗經典|帶你的網頁搭電梯(12)

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

技術 JS筆記-使用drawImage以及toBlob兩個API下載圖片!

前情提要 當網頁上有img的時候要怎麼下載呢?其實大家應該都有感覺,會使用到a元素的download屬性。 這邊我們要使用兩個好用的API,來完成今天的任務喔。...

技術 準備開始一些前端相關的技術文章

如標前端小白我打算開發分享一些目前為止所學的前端知識,順便透過分享知識來提高自己對於程式的記憶點, 對大家也是win win double win啦!這幾天會乘...

技術 【前端動手玩創意】太屌了吧!?用Class(類)製作Jquery的效果!(11)

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

技術 【前端動手玩創意】卡片製作,才不是!是卡片製作器!(10)

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

技術 【前端動手玩創意】哇操!你敢信?花式寫todo-list,body裡面一行都沒有也能搞?(9)

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