iT邦幫忙

菜鳥前端相關文章
共有 203 則文章
鐵人賽 自我挑戰組 DAY 30

技術 Day 30 JavaScript < 簡易數據類型介紹 & End>

1. 數據類型簡介 1-1 為什麼需要數據類型 在電腦中,不同的數據所需佔用的空間是不同的,為了方便把數據分成所需內存大小不同的數據,充分利用儲存空間,於是定...

鐵人賽 自我挑戰組 DAY 29

技術 Day 29 JavaScript < 書寫方式>

JavaScript書寫方式與CSS相似,分為行內書寫,內嵌書寫以及外部書寫 1.行內書寫 <input type="button"...

鐵人賽 自我挑戰組 DAY 28

技術 Day 28 JavaScript < 簡單介紹>

1.JS是什麼? Java Script 是一種運行在客戶端的腳本語言 (script就是腳本的意思) 腳本語言 : 不需要進行編譯,運行過程中由JS引擎逐行來...

鐵人賽 自我挑戰組 DAY 27

技術 Day 27 CSS3 < 動畫 animation>

動畫 (animation) 可通過設置多個節點來精確控制一個或一組動畫,常用來實現複雜的動畫效果。 相比較過渡,動畫可以實現更多變化、更多控制,連續自動播放等...

鐵人賽 自我挑戰組 DAY 25

技術 Day 25 CSS3 < 2D轉換 transform>

轉換 (transform)實現元素的位移、旋轉、縮放等效果,可以簡單理解為變形。 移動 translate 旋轉 rotate 縮放 scale 1.2D...

鐵人賽 自我挑戰組 DAY 24

技術 Day 24 CSS3 < 過渡 transition>

過渡 (transition) 是可以在不使用Flash動畫或JavaScript的情況下,當元素從一種樣式變換成另一種樣式時為元素添加效果,經常和 :hove...

鐵人賽 自我挑戰組 DAY 23

技術 Day 23 CSS3 < 目標選擇器>

CSS3新增的目標選擇器類型: 1.屬性選擇器 屬性選擇器可以根據元素特定屬性來選擇元素,這樣就可以不用藉助於類或者ID選擇器 MDN Web Docs 屬性選...

鐵人賽 Modern Web DAY 17

技術 [Day 17]獨自一人的全端攻略(前端篇)

挑戰目標: MockNative Camp 最近這兩年在工作上一直想要有同事可以交流進步,或者是遇到可以學習的同事,但終究在這兩份工作中都屬於自己一個人單打獨...

鐵人賽 自我挑戰組 DAY 21

技術 Day 21 HTML5 <HTML5 多媒體標籤>

多媒體標籤可以很方便的在頁面中嵌入音頻和視頻,而不用去使用flash和其他瀏覽器的插件,多媒體標籤主要分為視頻標籤、音頻標籤 1.視頻標籤 <video&...

鐵人賽 Modern Web DAY 15

技術 [Day 15]吶吶,還有一半別想跑(前端篇)

挑戰目標: MockNative Camp 今天繼續來製作我們的Footer, 目標 前兩天我們已經將這些顯示文字都寫入到config中 next.conf...

鐵人賽 Modern Web DAY 14

技術 [Day 14]現在真的履歷導向比較好嗎(前端篇)

挑戰目標: MockNative Camp 最近不止工作還有很多事情要處理,今天只能先暫停一次。 之前看到一篇文章寫了一個很像是反諷但又有點道理的一句話。...

鐵人賽 Modern Web DAY 13

技術 [Day 13]每天前進一點應該也是進步吧?(前端篇)

挑戰目標: MockNative Camp 今天我們來整理昨天沒有弄好的footer右邊的部分, 這是我們的目標 昨天完成的 今天完成的 今天決定另闢蹊...

鐵人賽 自我挑戰組 DAY 15

技術 Day 15 CSS <網頁布局-定位布局-1.定位模式>

為什麼需要定位元素? 定位元素可以實現 : 某個元素可以自由地在一個盒子內移動位置,並且壓住其他盒子 當滾動窗口的時候,盒子是固定屏幕某個位置的 所以 :...

鐵人賽 Modern Web DAY 10

技術 [Day 10]怎麼每天都像在趕末班電車R(前端篇)

挑戰目標: MockNative Camp前端 週末也是很多事要做,每天大概都晚上9點到12點是鐵人賽的工作時間,寫code, test, debug和截圖之...

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

技術 33歲轉職者的前端筆記-DAY 25 JavaScript 迴圈語法筆記

定義 重複性的執行某個操作,一直做一樣的事情,有終止條件。 較常用的迴圈 for while do…while for迴圈 只要有達到條件就會一直執行,直到...

鐵人賽 自我挑戰組 DAY 14

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

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

鐵人賽 Modern Web DAY 8

技術 [Day 8]開賽八天即遭遇難題(前端篇)

挑戰目標: MockNative Camp前端 今天原本是要來refactor和解決hover的問題的,但是在將navtab給component化時遭遇難題,...

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

技術 33歲轉職者的前端筆記-DAY 23 JavaScript 變數與型別

Nan => Not a Number,要判斷是不是NaN要用:isNaN(); 注意自動轉型,可以先利用 typeof 判斷型別 如果是數值運...

鐵人賽 Modern Web DAY 7

技術 [Day 7]想不到有梗的標題LA(前端篇)

沒有想到連假結束後的第一天就要冨樫了...,我工作的公司在新加坡,而我在台灣full remote,我們中秋放連假而新加坡那邊沒放假,導致一開工就滿多事情要處理...

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

技術 33歲轉職者的前端筆記-DAY 22 成績計算機練習筆記

流程 1.先觀察畫面,哪些值需要抓 2.抓HTML的值: a.先宣告變數,變數就是抓HTML的值,也可以說變數取代HTML的值之後用變數做程式的處理。 例:co...

鐵人賽 Modern Web DAY 6

技術 [Day 6]中秋時在做什麼,有沒有空,可以幫想標題嗎(前端篇)

今天來實作Navite Camp的Nav,看官們可以點網址去看他的效果,因為沒有時間,滑鼠移動到各tab時下面橘色border會滑順的移動,這個暫時沒時間去實作...

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

技術 33歲轉職者的前端筆記-DAY 21 英吋轉公分單位轉換器練習筆記

基本語法筆記 四捨五入: Math.round(); 無條件進位: Math.ceil(); 無條件捨去: Math.floor(); 英吋轉公分單位轉換器 範...

鐵人賽 Modern Web DAY 5

技術 [Day 5]新手村外的首戰是史萊姆應該是定番吧

今天我們來完成Header,不過位置方面我是使用Tailwinds CSS,要花時間客製化位置,但我沒那麼多時間所以沒辦法對的很準,請看官們見諒。 這是Nati...

鐵人賽 Modern Web DAY 5

技術 Day 05 - 行前說明 — UI 元件分類你知多少?

今天是行前說明的最後一篇了,前面幾篇都是很架構面的知識,而今天要講的就是真的很貼近 UI 元件的分類系統了。 首先想先回答一個問題:「UI 元件為什麼要分類呢...

鐵人賽 Modern Web DAY 4

技術 [Day4]專案始動-續(前端篇)

今天我們繼續來設定我們的架構,首先先把index.js的預設內容給刪除掉。 透過檢視原始碼,可以取得title以及icon,整理一下之後 index.js i...

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

技術 33歲轉職者的前端筆記-DAY 18 練習寫一個自我介紹產生器

變數基本概念 常數:const 不可重新賦予新值 變數:let 可重新賦予新值 建立常數a並儲存(或設定)“david” cost a = “david”; 自...

鐵人賽 Modern Web DAY 2

技術 [Day 2]我也好想要有鑑定技能(前端篇)

如果被老闆發現我們可以一眼鑑定出需求的細節和問題的原因,那我們的工作量會不會變更多 Mock的第一步就是先觀察 今天我們來觀察此次挑戰的目標 NativeCa...

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

技術 33歲轉職者的前端筆記-DAY 17 Bootstrap 介紹及使用方法

什麼是 Bootstrap ? 是一個框架系統 是一個UI的框架 (framework) 已提供現成可供使用的語法 可快速方便完成網站增加開發效率 使用方法...

鐵人賽 Modern Web DAY 1

技術 [Day 1] 主角總是最後登場的 (前端篇)

其實只是拖延症點到滿等的我,說是主角其實只是拖延症發作 有看過某些YT頻道的應該有聽過這段話 什麼樣的人適合閱讀此挑戰 - 不在意內容的人(此為自己的挑戰,能...

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

技術 33歲轉職者的前端筆記-DAY 16 使用 jQuery 寫出動畫效果

新增畫面及移除畫面 點擊show時會呈現以下結果: 點擊hide時會呈現以下結果(消失了): jQuery 程式碼可以這樣寫: <script>...