iT邦幫忙

菜鳥前端相關文章
共有 191 則文章

技術 JavaScript 基礎知識-function 搭配 return 用法

前面有講到 function 是把重複使用到的程式碼給獨立出來,當我們要使用時呼叫即可。 前面範例大多運用在計算居多,但要如何去回傳最終的計算結果呢? 假設我們...

技術 JavaScript 基礎知識-querySelector

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

達標好文 技術 JavaScript 基礎知識-選取ID與textContent

前言 基於對 JavaScript 基礎知識不足,希望藉由像鐵人賽這樣每天一篇文的方式,寫技術文章讓自己能更進步。 在 JavaScript 裡,當想要選取一個...

技術 JavaScript 基礎知識-全域變數和區域變數

前面有介紹到變數的部分,細分的話,主要有分全域變數和區域變數,以下來舉例說明: function count(Num){ var total = Num...

達標好文 技術 JavaScript 基礎知識-function(1)

function 亦即函式,是 JavaScript 內很常用到的一個計算的方式。 接下來我們來探討為什麼需要函式: 先來模擬一個情境,當我們每次進去便利商店採...

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

技術 Day18 CSS基本樣式-Background(上)

background屬性是用來聲明元素的背景,它可以大到網頁整個背景,也可以設定一個一個區塊的背景,或是小到像<button>、<a>都...

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

技術 Day16 CSS基本樣式-單位與數值

單位 單位可以用在width(寬)、height(高)屬性上,也可以用在font-size(字體大小)上,我們在切版的時候,用什麼樣的單位來指定畫面上區塊、字體...

技術 JavaScript 基礎知識-function & 變數的先後順序

這次來探討順序的先後問題,比較 function 跟變數,有何差異性 假設以下情況: console.log(a); var a; console.log...

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

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

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

技術 JavaScript 基礎知識-變數(1)

當我們要命名一個變數時,起手式為: var 變數名字 = 內容; var 為關鍵字 變數的命名上,避免採用特殊符號、指定字(例如:function,this)或...

技術 JavaScript 基礎知識-function(2)

接著我們來說說代入參數的函式,前面大家都知道 function 的起手式,函式命名之後要先用小括弧,而這個小括弧裡面放著的就是參數。 下面舉個情境例子: 當我們...

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

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

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

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

技術 JavaScript 基礎知識-變數(2)

前一篇文講到了變數的命名以及四種資料型別:數字,字串,布林,undefinded 這篇介紹,常見的輸出方法以及變數上的算數應用 常見的輸出方法,有彈跳視窗的輸出...

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

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

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

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

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

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

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

技術 Day27 CSS:Display

在認識了normal flow中BFC與IFC的概念後,我們要來認識以這兩個佈局規則為基準的display屬性。display屬性也有特殊的佈局如flex及gr...

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

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

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

技術 JavaScript 基礎知識-陣列 push & splice 方法

前一篇講到了陣列,這篇介紹陣列常用的兩個方法,分別為新增和刪除陣列內的值。 var candy = [8,5,10]; 前面有講到讀取陣列某個值:陣列名稱[索...

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

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

鐵人賽 Modern Web DAY 7

技術 【D7 - 直接開啟專案】VueJs要怎麼樣開始學?

Vue: 終於輪到我出場了啦!! ...代表各位終於可以開始做出一個專屬自己的個人網站了!!! 概念先打好 VueJs 是一個前端框架,一個開源(open...

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

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

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

技術 Day25 CSS:BFC(Block formatting context)

在認識BFC之前,首先我們要知道Positioning schemes(定位規則)與Formatting context(格式化上下文)。 Positionin...

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

技術 Day2 什麼是web前端

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

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

技術 Vue component 上該如何使用 v-model ?

tags: Vuejs v-model ✐ v-model 作用於表單元件上時,是 雙向數據綁定 的語法糖: <input v-model="n...

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

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

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

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

技術 前端入門-VS code安裝與前端套件介紹

小弟在前端打滾多年 最近發現有越來越多人想學習前端 首先我們需要先安裝一個寫code的環境 1. 安裝vs code 市面上的IDE(整合開發環境)百百種...