iT邦幫忙

菜鳥前端相關文章
共有 310 則文章
鐵人賽 自我挑戰組 DAY 1
每天來點 Vue.js 吧 系列 第 1

技術 前言

tags: Vuejs 前言 在開始之前,先簡單的自我介紹 ~ 筆者是名新手前端工程師,過往是平面設計師,目前學習前端約 1 年半的時間,本篇鐵人會集中在 Vu...

鐵人賽 Modern Web DAY 25
實作經典 JavaScript 30 系列 第 25

技術 Day25: Adding Up Times With Reduce

WES BOS系列影片Alex快速導讀系列影片 今天的練習會用到reduce()還有用一些數學的運算,將秒數換算成時分秒然後又複習了一下dataset的用法事不...

鐵人賽 自我挑戰組 DAY 1
溫故知新 JavaScript 系列 第 1

技術 Day1 - 前奏

HI 大家好,我是 AWEI首次參加IT邦鐵人賽,這次想透過 30 天的時間帶大家一起來認識 JavaScript ,至於為什麼會叫溫故知新JavaScript...

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

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

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

鐵人賽 Modern Web DAY 9

技術 33歲轉職者的前端筆記 DAY 9 陣列資料的處理方法

陣列在處理資料的時候幾乎是必備工具了 學習到現在陣列是我最不熟的地方 所以今天就來寫個筆記幫助學習 push() 在陣列資料的最後一筆新增一個至多個元素,並回傳...

鐵人賽 Modern Web DAY 21
實作經典 JavaScript 30 系列 第 21

技術 Day21: LocalStorage(ㄧ)

WES BOS系列影片Alex快速導讀系列影片 今天要來認識LocalStorage看不太懂的話,這裡也有一篇我覺得寫得很好理解的筆記可以參考localStor...

鐵人賽 自我挑戰組 DAY 24

技術 Day 24 CSS3 < 過渡 transition>

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

技術 Vue 之溫習 - 使用 is 動態切換元件

在某些時候,我們會希望內容在特定的情況下才顯示,例如頁籤的效果,雖然可以透過 v-if 來判斷,並顯示元件但元件一多的時候,反而不是一個理想的方法,所以才有 i...

技術 前端相關知識

前端語言 HTML(骨架)(看官方文件) CSS(美編)(看官方文件) Tailwind CSS - Rapidly build modern websi...

鐵人賽 Modern Web DAY 23
實作經典 JavaScript 30 系列 第 23

技術 Day23: Mouse Move Shadow

WES BOS系列影片Alex快速導讀系列影片 今天的練習重點是抓取DOM容器的座標與mousemove事件我們要做一個文字陰影與滑鼠互動的效果要做出這個效果,...

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

技術 鉄人28号FX 鉄人22号「速記豹」font properties

★ 地圖雷奧鎮近郊處 ↓↓↓ 顯示雷奧鎮位置圖 就在那了!! ( 抬頭一看 ) 只要再往東走,就能順利到達城鎮~~ :站住!! 近郊衛士 [速記豹]: 此為進入...

鐵人賽 自我挑戰組 DAY 30

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

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

鐵人賽 自我挑戰組 DAY 29

技術 Day 29 JavaScript < 書寫方式>

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

鐵人賽 自我挑戰組 DAY 28

技術 Day 28 JavaScript < 簡單介紹>

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

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

技術 33歲轉職者的前端筆記-DAY 13 圖片格式及影音格式

圖片 網頁上一定會有多許多圖片元素我們在開發網站時需多了解圖片的特性及格式,在開發的過程會更加順利。 圖片標籤 img 為在 HTML 中 插入圖片的標籤語法...

鐵人賽 自我挑戰組 DAY 13
每天來點 Vue.js 吧 系列 第 13

技術 v-for 列表渲染

tags: Vuejs v-for ✐ v-for 指令可以使我們方便的渲染 Array 成為列表,在渲染列表相關的 data 時十分方便,並且 v-for 除...

鐵人賽 Vue.js DAY 26
試試用Vue建立網站吧 系列 第 26

技術 Day26-試試Vue3-餐廳實評頁面(1)

因開發過程細節較多會分成兩篇來說明。 (1)新增餐廳實評頁面檔案路徑 src / views / front 底下新增 CommentView.vue 檔案。...

鐵人賽 Modern Web DAY 26
實作經典 JavaScript 30 系列 第 26

技術 Day26: Follow Along Links

WES BOS系列影片Alex快速導讀系列影片​今天的練習是用js控制滑鼠游標,當滑鼠游標到達當前的連結時,我們使用一個新的方法getBoundingClien...

技術 學習日記-1

最近幾天在網站上看了有管git的資料, 發現了 &quot;連猴子都能懂的Git指南&quot; 就抱著當一隻小猴子的心態去求學 發現非常的淺顯易懂(我這隻猴子...

鐵人賽 Modern Web DAY 24
實作經典 JavaScript 30 系列 第 24

技術 Day24: Sort Without Articles

WES BOS系列影片Alex快速導讀系列影片​今天要結合正規表達式跟sort()來做排序的功能作者這邊假設了一個情境就是我們拿到了一串樂團的清單,希望可以用樂...

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

技術 33歲轉職者的前端筆記-DAY 15 jQuery 基礎語法

什麼是jQuery 由js發開出來的函式庫 可以解決瀏覽器相容的問題 雖然由js開發出來,但不完全等於js,只是用jQuery的語法寫出來而已 引入方式:下載...

鐵人賽 Modern Web DAY 13

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

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

鐵人賽 Modern Web DAY 19
實作經典 JavaScript 30 系列 第 19

技術 Day19: JS中引用與複製的差異(一)

WES BOS系列影片Alex快速導讀系列影片 最一開始可以先試試看這兩段程式碼 let age = 100; let age2 = age; console....

技術 Vue 之溫習 component 的世界 - 3

props 是從 Vue 實體傳送資料進去元件內,若是元件想要改變 Vue 實體本身的資料,這時候就會需要 emit 了props 是一個方法,但 emit 是...

鐵人賽 Modern Web DAY 10
實作經典 JavaScript 30 系列 第 10

技術 Day10: 針對陣列的操作練習(三)

WES BOS系列影片Alex快速導讀系列影片 開始前一樣可以先讀這篇卡斯伯的大補帖https://wcc723.github.io/javascript/20...

鐵人賽 Modern Web DAY 30
實作經典 JavaScript 30 系列 第 30

技術 Day30: 完賽心得

第30天,不免俗要來寫個完賽心得雖然javascript-30還差個幾天,才能把全部的實例都做完但還是要給自己拍拍手,利用這30天養成了一個好習慣而且真的沒想到...

技術 CSS 特殊形狀怎麼切?

我是圖片:https://drive.google.com/file/d/1j8EyVDr5OfNZdq4niRz_nZQnTJzMITQB/view?usp=...

鐵人賽 Modern Web DAY 22
實作經典 JavaScript 30 系列 第 22

技術 Day22: LocalStorage(二)

我們就必須使用LocalStorage來讓瀏覽器記住剛才輸入的資料紀錄完成後,同時將表單的回復成未輸入的狀態 localStorage.setItem('ite...

鐵人賽 Modern Web DAY 20
實作經典 JavaScript 30 系列 第 20

技術 Day20: JS中引用與複製的差異(二)

今天針對物件來看引用與複製的差異先創造一個簡單的物件 const person = { name: 'Wes Bos', age: 80 }; 再製作...

鐵人賽 Modern Web DAY 6

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

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