# 前端入門教學

## 前情提要

軟體工程師大致可以分成三種：前端工程師(frontend engineer/developer)、後端工程師(backend engineer/developer)、手機App工程師(mobile developer)

| 職位 | 工作內容 | 開發語言 |
| ----| -------- | -------- |
| 前端 | 負責網頁的介面部分 | Javascript(JS) |
| 後端 | 負責網頁的資料庫(database)、系統、根據前端要求回傳資料 | PHP、Java、NodeJS(JS語法)、Python、Go |
| 手機 | 就不用特別介紹了 | Java(Android)、Swift(ios)、Kotlin(Android&ios) |

其他強大語言：C/C++、C# 幾乎都可以做，不過非常難學，因為靠近電腦底層，除了語法外，對電腦知識需要有很深的了解，比如如何處理記憶體

題外話：17 app後端就是Go XDD 一個效能很強大的語言，不過也是非常難學，觀念類似C++

## 第一節 Chapter1

網頁前端介面由 HTML, CSS, Javascript(JS)組成

## HTML(架構)

### 簡介
網頁是由HTML的tags(標籤)組成的
tags就是像`<p></p>`, `<div></div>`等等的，每種tag有不同意義，不過一開始先知道什麼是tag就好

### 練習
現在打開這個網頁 [CodePen](https://codepen.io/your-work)

左上角點 **Start Coding**，在HTML的區塊複製貼上下面這段程式碼

<div>Hello</div>

就可以看到這個畫面


也可以試著改變內容的`Hello`玩玩看

網頁就是由一堆上面的code堆出來的

### 網頁開發者工具

* 右鍵點擊畫面 選檢查
* 或按F12

會看到這個畫面👇
上面的部分，有很多`<>`這種東西的，就是目前所在網頁的html
下面寫著Styles的部分，就是這個網頁的CSS


如果點上面的 **Console** 就會變這樣，這裡是你可以直接測試Javascript的地方，但網頁的JS是一個檔案，寫在其他地方。


### 接下來

對HTML有基本了解後，就可以到W3Schools網頁開發官方網站學習更多詳細的HTML語法 [w3schools-html](https://www.w3schools.com/html/html_basic.asp)

## CSS(外觀、設計 ex. 顏色、字體大小)

CSS是根據該網頁有的HTML tags來做設計，可以想成HTML每個tag都是身體的頭、手、上半身、下半身、腳，CSS是衣服配件，頭上可以戴黃色帽子、衣服可以穿紅色T-shirt等等，就是由你寫的CSS決定。

### 組成

CSS的語法就是 `tag { property: value; property: value; }`這樣的寫法，property就是顏色、字體大小、位置等等的，根據文件可以知道哪個設計要用哪個property去寫，就是CSS特有的語法，畢竟大家寫法要統一嘛！

### 練習
以我們剛剛的例子來說，在CodePen網頁的CSS部分，複製貼上以下程式碼

//HTML
<div>Hello</div>

//CSS
div {
  color: red;
}

對`div`這個tag加上文字顏色紅色的CSS後，就可以發現Hello變成紅色了

當然，今天如果HTML裡寫的是`<p></p>` tag，那CSS的`div`就要改成`p`，像這樣

//HTML
<p>Hello</p>

//CSS
p {
  color: red;
}

### 接下來

對HTML有基本了解後，就可以到W3Schools網頁開發官方網站學習更多詳細的HTML語法 [w3schools-css](https://www.w3schools.com/css/css_syntax.asp)

## Javascript(使用者互動 ex.點擊按鈕會有反應)

### 簡介
Javascript簡稱JS，跟Java是不一樣的東西，我一開始學程設也以為是一樣的，但JS是專門寫網頁的，Java是專門寫手機。

這個說法不完全正確，因為JS也可以做手機，比如當你用手機逛網頁時，那些網頁都還是JS做的，只是根據手機螢幕大小跟桌電螢幕大小做了一些排版調整而已。JS也有特別寫手機的工具，只不過Java畢竟是專門設計來寫安卓的，在效能上JS會差一點。但JS厲害的地方在於，寫手機App有很多語言，還分安卓跟蘋果，安卓用Java，蘋果用Swift，現在還有很多Kotlin等等的手機語言，但只要是網頁，就都是用JS，幾乎沒有別的可以跟JS比網頁開發，所以JS還蠻萬用的。

而且現在Google宣布Kotlin成為Android官方開發語言，手機app的語言也是不斷推陳出新的，不過不管是哪個語言，工程師的技術都是每年更新的，語言都會有新版本新語法。

JS是網頁中負責處理使用者互動等事件的部分，像前面的例子，雖然有畫面，但是是靜態的，但加入JS就可以使畫面動起來，比如輸入使用者名稱後網頁就會執行登入事件，這就是靠JS完成，只有HTML、CSS的話，即使輸入使用者名稱點登入按鈕，也不會發生任何事。

### 基礎程式語言通用概念

以下這些概念，每個語言幾乎都是一樣的，只是語法不一樣，這裡我都用Javascript舉例(因為Java不熟...)

💡 程式碼部分都可以打開網頁開發者工具的Console，跟著打一次看結果

---

#### data type(資料型態)

資料型態是指 整數(integer)、小數(float, double)、字串(string)、布林值(boolean)、陣列(array)、物件(Object)等等，根據不同語言去增加或減少，在學習一個語言時需要明白該語言使用哪些資料型態。

* 字串string：也就是文字，英文中文都是字串，會使用`' '`或者`" "`包起來，ex. `'123', 'banana', "hello"`。
* 字符char：有的語言還會特別分出char，就是一個英文字母('a')、一個符號('&')、一個中文字('嗨')。所以，字串是由字符組成的。
* 布林值boolean：`true` 或是 `false`，表達是與非的型態，每個語言的true/false大小寫不一定一樣，有的可能是`True/False`
* 陣列array：類似數學中矩陣的一種，用來儲存多個值，通常用`[]`包起來，ex. `[1, 2, 3]`
* 物件Object：可以儲存多種資料，在JS中以`{}`包起來，ex. `{ Name: 'John', Age: 18 }`

---

#### variable(變數)

變數就是可以拿來暫存資料的東西，就像數學中我們用`x, y, z`代替某些數字等等，方便計算

例子：

//數學
x = 3
y = 4
z = x+y //z的值就是7

對應到程式語言就是

//JS
var x = 3
var y = 4
var z = x+y //z的值就是7
console.log(z)

`console.log`是JS把東西打印出來的一個語法，console裡我們可以看到回傳7，像這樣：

> 在程式語言中，我們稱`var x=3`這種動作叫做 *宣告一個變數(Declare variable)*

在JS裡，宣告變數基本的方法就是`var`，取的是variable的簡稱。JS很簡單，所有變數不管你要賦予的值是整數(integer)、字串(string)、陣列(array)，都可以用`var`

想更改變數值的話，不需要再宣告一次，直接改就好，像這樣：

x = 10
console.log(z) //return 7
//現在z的值就立刻變成14了，因為x+y變成10+4

Java就比較麻煩了，在Java裡的話，如果要宣告整數，就得特別強調是`int`，像這樣

//Java
int x = 3 //int 就是integer簡寫
float y = 0.5 //float是非整數，小數的意思

(注意：Java的程式碼就不能放到Console測試了，因為Console只能跑網頁語言)

而這種需要在宣告變數時，特別強調變數形態的，就不可以隨意變換數值，比如原本用來儲存整數的變數，不能再把值改成小數或字串等

---

#### for loop(for迴圈)

可以用來重複做某件事的一個方法，不同語言與法有不同寫法，但概念是一樣的

例子：想打印'hello'五次，用for loop就可以像這樣寫

for (var i = 0; i < 5; i++) {
    console.log('hello')
}

(可以用Console跑跑看)

拆解第一行的 `for (var i = 0; i < 5; i++)`
`var i = 0`：就是宣告一個變數叫i，賦予它0的值
`i < 5`：i不可以超過5
`i++`： `i++`就是`i+1`的意思，也可已看成`i+=1`，意思是每次i都會加1

所以第一行整個意思就是，i從0開始，加1，加到小於5，也就是到4就會停

第二行：就是簡單的打印出hello

for loop的話，從`{`開始，到`}`結束，在大括號裡的事情都會被重複做

---

#### if else statement判斷式

在程式中，很常會需要判斷各種情況，依情況做不同處理，這時候就需要用到if else

例如：