iT邦幫忙

菜鳥前端相關文章
共有 77 則文章
鐵人賽 自我挑戰組 DAY 7
從門外漢到前端新手 系列 第 7

技術 Day7 動手寫HTML(2)

標籤語意的重要性 在瀏覽器的世界,雖然很多元素的視覺效果可能很像,可是針對網站的每個不同內容下好的元素很重要。它會幫助瀏覽器讀取文檔,讓網路體驗更優化。 進...

鐵人賽 自我挑戰組 DAY 6
從門外漢到前端新手 系列 第 6

技術 Day6 動手寫HTML(1)

打開文字編輯器 *還不會用VS code的話請看第3天文章有提到的教學。 這裡示範的文字編輯器是VS code,新增一個檔案,先將它存成Html檔,這樣編輯器才...

鐵人賽 自我挑戰組 DAY 5
從門外漢到前端新手 系列 第 5

技術 Day5 動手寫HTML之前(下)

上一篇我們說到元素的特性,介紹了inline元素跟block元素。今天就來介紹: 替換元素與非替換元素 文檔的層級概念 替換元素&非替換元素 替換元...

鐵人賽 自我挑戰組 DAY 4
從門外漢到前端新手 系列 第 4

技術 Day4 動手寫HTML之前(上)

首先就來了解網路的運作吧!點圖看影片 How The Internet Works: HTML是什麼 超文本標記語言(英語:HyperText Markup...

鐵人賽 自我挑戰組 DAY 3
從門外漢到前端新手 系列 第 3

技術 Day3 推薦的前端學習資源

完全門外漢的初階學習資源 在對於網頁前端領域完全陌生的情況下,要自己看懂教學文章是很吃力的(但也不是不可能,有人做得到,但對我來說真的很難。 以下是我在完全零基...

鐵人賽 自我挑戰組 DAY 2
從門外漢到前端新手 系列 第 2

技術 Day2 什麼是web前端

網站工程 架設一個網站的工程(這邊講的是網站架設工程,不包含網頁視覺設計)主要分成兩大區塊:前端與後端。 前端工程負責網頁的門面,看得到的文字、顏色、連結、分頁...

鐵人賽 自我挑戰組 DAY 1
從門外漢到前端新手 系列 第 1

技術 Day1 前端自學心得-萬事起頭難

自學之前的掙扎 想學網頁前端,卻像在大海中迷航,不知道從何下手嗎?這30篇文章為我的學習做筆記,也分享給自詡為門外漢的你。從準備自學,到開始自學,最後可以執行基...

鐵人賽 自我挑戰組 DAY 1
重新開始的Vue.js 30day 系列 第 2

技術 從頭開始的Javascript 入門 -變數與資料型別 Day1

從頭開始的Javascript 入門 -變數與資料型別 Day1 前言 就像是學習國外語言,要會語法認識新單字,並且理解規則才會運用。 所以學習複雜觀念之前,我...

技術 最初的最初!

一開始根本沒想要寫文章的哈哈哈XD,但在禮拜四看完洧杰老師的分享後,仔細想想或許能把自己學習過程做一個整合,(沒理由偷懶XDD) 正好剛過23歲生日,就想不如2...

技術 JavaScript 基礎知識- 取消預設行為,了解元素所在位置

在某些情況下,我們會想取消元素的預設行為,例如 <a> 標籤的 href 屬性的這個行為,此時 .preventDefault() 就是一個非常好用...

技術 JavaScript 基礎知識-事件氣泡,事件捕捉

這裡要來補充一個小知識,在 .addEventListener() 這個事件監聽的方法,還有第三個參數,只是沒有設定時,預設會是 false 即一個元素的點擊事...

技術 JavaScript基礎知識-事件(2)

前面講到三種事件綁定的方法,撇除掉第一種較危險的方式之外,來談談第二種跟第三種的差異性 以點擊事件為例: <input type="button...

技術 JavaScript基礎知識-事件(1)

終於研究到了事件的部分了,所謂的事件,是當使用者對頁面做出什麼動作的意思,例如:滑鼠點擊,按下鍵盤...之類的,而當使用者有這些動作時,我們又該給予什麼樣式的回...

技術 JavaScript 基礎知識-操控 HTML 的方法 .createElement

前面講到了使用 .innerHTML 來操控 HTML,這裡說明第二種方式 .createElement ,後面再說明兩者的差異性 一樣先建立一個名字清單的陣列...

技術 JavaScript 基礎知識- .innerHTML 與 for 迴圈的運用

前一篇講到了 .innerHTML 來新增元素以及內容,還有組字串的技巧 這邊我們就來建立一個陣列,依序把資料輸入進去吧 首先先建立 HTML 結構: <...

技術 JavaScript 基礎知識-操控 HTML 的方法 .innerHTML

前面我們講到選取了元素,也講到了設定屬性和讀取屬性,但倘若我們想要在某個元素下再新增元素且有內容時,可以怎麼做? 這裡就介紹其中一種方法 .innerHTML...

技術 JavaScript 基礎知識-setAttribute & getAttribute

前面講到了選取元素的方法 .querySelector() 和 .querySelectorAll() 選取到了元素,我們就可以對他們設定一些屬性,例如設定 i...

技術 JavaScript 基礎知識-querySelector

第一篇文章有提到可以用 document.getElementById() 的方式選取 id 元素渲染到網頁,但如果今天我想選取的不只是 id 元素,還有 cl...

技術 JavaScript 基礎知識-for 迴圈搭配 break 的運用

當我們在執行 for 迴圈時,如果我們是希望滿足條件後就跳脫迴圈而不要讓迴圈跑完時,這時候就可以搭配 break 來作運用 建立一個陣列資料如下: var fa...

技術 JavaScript 基礎知識-for 迴圈加總

照著前面建立的小鎮和房子的假設走,下面是前篇創建的陣列: var area=[ { house: 'Jerry', ro...

技術 JavaScript 基礎知識-for 迴圈搭配 if 判斷式

for 迴圈的應用,除了撈取相同性質的資料外,我們也可以在執行的時候搭配判斷式,來過濾出來我們想要取得的資料,以下就開始來寫個範例: 我們先來假設,有一個小鎮上...

技術 JavaScript 基礎知識-for 迴圈

在撈取資料的時候,可能會遇到我們需要一直撈取同樣性質的資料,這時候 for 迴圈就是使用的時機了 舉個例子,前面有說到陣列內可以放多個物件,來寫點東西吧 var...

技術 JavaScript 基礎知識-switch & if else 的判別差異

switch 跟 if else 的使用上,常常會有一個迷思在,以下就來舉個例子: var n = '5'; switch(n){ case 5:...

技術 JavaScript 基礎知識-switch 判斷式

在 JavaScript 內的第二種判斷式是 switch,它跟 else if 有異曲同工之妙,以下就來介紹吧! switch 架構如下: switch(代入...

技術 JavaScript 基礎知識-else if

if 判斷式,不僅只能做一個判斷,我們還可以再利用 else if 來增加更多的判斷式 大致上程式碼架構如下: if(判斷式){ 要執行的程式碼 }el...

技術 JavaScript 基礎知識-if else 判斷

前面講到比較運算子還有邏輯運算子,並非只是要單純的要回傳 true 或 false 而是要搭配 if 判斷,來做程式上面的判斷, if else 判斷內有判斷式...

技術 JavaScript 基礎知識-邏輯運算子 &&,||

前面的比較運算子是用來做值的比較,接下來介紹的邏輯運算子,是用來做邏輯上面的判斷 &&(and),||(or) 生活上也會有類似的邏輯判斷,例如...

技術 JavaScript 基礎知識-比較運算子 >,<,>=,<=

比較運算子 part2 今天如果我們要比較兩個值的時候,除了用==(等於),!==(不等於),還有>(大於),<(小於),>=(大於等於),...

技術 JavaScript 基礎知識-比較運算子 == , !==

在生活中我們常常都需要做判斷,例如肚子飢餓的程度,假設滿分是10分,若飢餓的程度大約7分,可能只想吃個小東西,若飢餓的程度為5分以下,可能就要吃個便當之類的,大...