iT邦幫忙

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

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

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

鐵人賽 Modern Web DAY 7

技術 Day 07 JavaScript/Rails API

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

鐵人賽 Modern Web DAY 10

技術 Day 10 JavaScript CSS in JS

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

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

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

鐵人賽 自我挑戰組 DAY 25

技術 第二十五步 - 過去與未來的未來關鍵(CSS 動畫部分)

大家早安,我是喵橘,今天要報告的 CSS 動畫部分,今天也請各位多多指教喔~ 動畫關鍵影格設定 動畫的呈現就是由一個一個的關鍵影格所組合而成,所以,在設定動畫之...

鐵人賽 Modern Web DAY 14
33歲轉職者的前端筆記 系列 第 14

技術 33歲轉職者的前端筆記-DAY 14 排版技巧小筆記-標籤屬性元素及定位方法

區塊元素(block) 預設為區塊元素的標籤有:h1~h6,p,div,section,header,nav等等… 會造成「換行的標籤(元素)」 可以設定「w...

鐵人賽 自我挑戰組 DAY 11

技術 第十一步 - 找到關鍵的破解迷宮方法(整體結構內常用的標籤)

大家好,中秋連假準備開始,喵橘我已經開始放假,我多請了一天特休,可以好好認真撰寫鐵人賽的文章,微笑。 整體結構內常用的標籤 <meta> 標籤 <meta>元素...

鐵人賽 Modern Web DAY 14

技術 Day 14 JavaScript innerText vs textContent

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

技術 第三十二步 - 創造自己的風格(Javascript 函式部分)

大家好,我是喵橘,一轉眼又到了星期四,今天我要報告的是 Javascript 函式部分。 何謂函式? 發現 Javascript 練習到現在,程式碼的內容越來越...

鐵人賽 自我挑戰組 DAY 14

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

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

鐵人賽 Modern Web DAY 16

技術 Day 16 JavaScript boxing vs unboxing

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

鐵人賽 Modern Web DAY 6

技術 Day 06 JavaScript/Rails AJAX

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

技術 第三十一步 - 遇到返回鏡子突襲! (Javascript控制語法)

大家好,我是喵橘,今天我要報告Javascript控制語法部分,今天是新的開始。 流程控制 看到流程控制,讓我想起一個笑話,我就說給大家聽: 有一天,一位是擔任...

鐵人賽 Modern Web DAY 24
鉄人28号FX 系列 第 24

技術 鉄人28号FX 鉄人24号「影隨者」text-shadow

★ 地圖雷奧鎮市中心 ↓↓↓ 顯示雷奧鎮街上位置圖 街上好不熱鬧,隨處閒晃著。(竹輪也太美味! 呵 ) 真想再吃?! 怪? 從剛就??? (揉眼睛。) :到底怎...

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

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

鐵人賽 自我挑戰組 DAY 29

技術 第二十九步 - 第三層各陷阱挑戰( JavaScript 資料類型)

各位大家好,我是喵橘,今天是颱風天,雖然南部並沒有明顯風雨,但貼心叮嚀北部朋友,越晚風雨越大,盡量不要隨便出外,避免有生命危險。 資料類型 在寫程式裡,不同的...

鐵人賽 Modern Web DAY 11

技術 Day 11 JavaScript var vs let (1)

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

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

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

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

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

鐵人賽 自我挑戰組 DAY 15

技術 第十五步 - 攻略關卡之時,也要記得寄信回報(表單相關語法)

中秋連假終於結束,迎接的是憂鬱的星期一,打起精神,準備開始努力撰寫接下來的文章,加油!! 表單相關語法 <form> 標籤 它是一個讓使用者能輸入相關訊息到欄位...

技術 第三十三步 -神秘的箱子 (Javascript 物件部分)

大家早安,又到了周末,我是喵橘,今天我要報告的是 Javascript 物件部分。 何謂物件? Javascript 是一個物件導向的程式語言設計,但跟其他物件...

鐵人賽 自我挑戰組 DAY 28

技術 第二十八步 - 宣告第三關破解方法(JavaScript 變數)

大家好,我是喵橘,今天是一個悶熱的星期日,我要報告 JavaScript 變數的部分。 JavaScript 變數 何謂變數? 變數就可以比喻可以一個放入東西的...

鐵人賽 Modern Web DAY 17

技術 Day 17 JavaScript bind vs call vs apply

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

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

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

鐵人賽 自我挑戰組 DAY 14

技術 第十四步 - 新的挑戰,多采多姿的樓層(多媒體相關語法)

大家好,今天是中秋連假的最後一天,體力已經到零了,但還是要努力撰寫,加油!!握拳 多媒體相關語法 <img> 標籤 它的功能就是顯示出圖片,搭配 src 屬性...

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

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

鐵人賽 Modern Web DAY 6

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

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

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

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

鐵人賽 自我挑戰組 DAY 16

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

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

鐵人賽 自我挑戰組 DAY 16

技術 第十六步 - 研究回覆信件格式如何撰寫(進階表單相關語法)

大家早安,大家好!我是喵橘,今天依舊是炎熱的天氣,我打起精神,繼續努力撰寫。 <input> 標籤 補充部分 上一個章節有說明 <input> 元素以及 typ...