# 北科大專題課程-2 前端概述與連接後端範例
##### 2019/10/23
###### 黃豊凱KevinHuang
---
### 課程目的
- [學會HTML](https://www.w3school.com.cn/html/index.asp)
- [學會CSS](https://www.w3school.com.cn/css/index.asp)
- [學會JQuery](https://www.w3school.com.cn/jquery/index.asp)
---
### 課後延伸
- [什麼是DOM](https://www.w3school.com.cn/htmldom/index.asp)
- [怎麼使用JQ AJAX發請求](https://www.w3school.com.cn/jquery/jquery_ajax_intro.asp)
---
### 前端推薦工具
- VSCode
- JSBin
- WebStorm(付費，學生可免費一年)
---
## 瞭解HTML
---
### 第一步 - 常用的HTML標籤
---
#### 常見 BLOCK 區塊標籤
```htmlmixed=
<div>
</div>
```
這東西很常出現!
這東西很常出現!
這東西很常出現!
(因為很重要所以說3次)
---
#### 常見 BLOCK 區塊標籤
特點：獨占一行，對高度、寬度、行高以及頂和底邊距都可設置的屬性值生效；如果不給寬度，塊級元素就默認為瀏覽器的寬度，即就是100%寬；
| | | |
| -------- | -------- | -------- |
| form | h1 | h2 |
| h3 | h4 | h5 |
| h6 | p | table |
| ul | | |
| | | |
---
#### 常見 INLINE行內標籤
特點：可以多個標籤存在一行，不能直接設置行內標籤的高度、寬度、行高以及頂和底邊距，完全靠內容撐開寬高！
| | | |
| -------- | -------- | -------- |
| a | br | label |
|select | span | textarea |
| | | |
---
#### 常見INLINE BLOCK行內區塊標籤
特點：結合的行內和區塊的優點，不僅可以對寬高屬性值生效，還可以多個標籤存在一行顯示；
| | |
| -------- | -------- |
| input | img |
| | |
---
#### 注意事項
切忌使用 行內標籤 去包 區塊標籤
會造成 HTML 解析錯誤
---
### 第二步 - HTML屬性值
使用HTML 標籤 就會用到 專屬標籤的 “屬性值”
---
### HTML屬性值
```htmlmixed=
<img src="路徑" alt="圖片描述"/>
<input type="">
```
---
### 其他常用到屬性值的標籤
| | | |
| -------- | -------- | -------- |
| button | checkbox | date |
| file | hidden | number |
| password | radio | search |
| submit | text | time |
| url | | |
---
### 第三步 - 瞭解ID CLASS NAME 屬性值
---
### ID屬性值
```htmlmixed=
<input id="list_box">
```
ID 是唯一值，在一份HTML 只能有一個唯一的ID 不然HTML 會解析錯誤
---
### Class屬性值
```htmlmixed=
<input class="list_box">
<div class="list_box">
```
CLASS 可多重宣告
---
### name屬性值
```htmlmixed=
<form>
<input name="list_box">
</form>
```
NAME 值 包在 form 裡面， 許多的程式語言都會用來當成取值的屬性
EX: PHP ASP
---
這些屬性值都是未來在CSS 、JS 或 其他各式各樣的語言所不可或缺的。
接下來的CSS JS 課程，將會教如何搭配使用這些屬性值。
---
### 第四步 - 常用的基礎HTML架構
```htmlmixed=
<html>
<head>
<title> </title>
<link rel="stylesheet" type="text/css" href="style.css">
<style></style>
<script></script>
</head>
<body>
網頁內容
</body>
</html>
```
---
### 語意式HTML5架構
HTML5使用語意標籤取代掉了不具意義的`<div>`所構成的HTML文件
以下介紹六個最主要架構出HTML5的語意標籤：
---
### 六個最主要的語意標籤
```htmlmixed=
<header>
```
位於HTML5頁面頂部，通常放置網站的Logo、大標題或是主要資訊
```htmlmixed=
<nav>
```
通常放置代表網站的連結或選單
---
### 六個最主要的語意標籤
```htmlmixed=
<article>
```
HTML5頁面內可以有多個，可以作為區分內容之用
```htmlmixed=
<section>
```
article中可以有很多個`<section>`，通常用於章節或標題的段落區分
---
### 六個最主要的語意標籤
```htmlmixed=
<aside>
```
定義文章區塊以外的內容，通常使用於內容相關的邊欄
```htmlmixed=
<footer>
```
位於頁面底部，大多顯示著作權、作者等
---
### 用語意標籤製作HTML5文件的好處：
(1)看標籤就可以知道哪個部份是標題、哪裡是選單
(2)搜尋引擎在搜尋網頁內容時，可以搜尋到準確的資料與資訊
(3)因為標籤都具有意義了，這樣在維護文件時，就會變得更簡單與容易，在團隊的工作中尤其重要
---
### 語意標籤範例
```htmlmixed=
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
```
---
## 瞭解CSS
---
### 第一步 - 如何把CSS套用到網頁上
---
## 如何把CSS套用在網頁上
### 1.行內套用
直接將CSS寫在HTML上
```htmlmixed=
<p style="color:#000">123</p>
```
---
## 如何把CSS套用在網頁上
### 2.嵌入套用
樣式可以嵌入於HTML中(通常在`<head>`內)
```htmlmixed=
<head>
<style>
li{color:#000}
</style>
</head>
```
---
## 如何把CSS套用在網頁上
### 3.外部連接套用
```htmlmixed=
<link rel="stylesheet" type="text/css" href="路徑">
```
將CSS載入
假如有多個外部連結，越後面套入的CSS 優先權越高
---
### 第二步 - 使用選擇器（Selector）
越嚴謹的選擇器 權限越高
ID、CLASS、標籤、後代選擇器
---
### ID選擇器
ID選擇器 => #
```htmlmixed=
<p id="good">123</p>
```
要將ID為 good 的內容字顏色改成白色
```css=
#good{color:#FFF}
```
---
### Class選擇器
CLASS選擇器 => .
```htmlmixed=
<p class="good">123</p>
```
要將CLASS為 good 的內容字顏色改成白色
```css=
.good{color:#FFF}
```
---
### 標籤選擇器
直接選擇標籤
```htmlmixed=
<p>123</p>
```
要將p標籤的內容字顏色改成白色
```css=
p{color:#FFF}
```
---
### 後代選擇器
```htmlmixed=
<li>000</li>
<ul>
<li>123</li>
</ul>
```
要將 ul li 的內容字123顏色改成白色 ,內容字000不改變
```css=
ul li{color:#FFF}
```
---
### Grouping
數個選擇器共同有同樣樣式
```htmlmixed=
<p>123</p>
<div>456</div>
<li>789</li>
```
將p, div, li 內容字顏色都改為白色
```css=
p, div, li{color:#FFF}
```
---
### 第三步 - 了解margin、padding、border
調整版面可能會有許多種需求
Ex:圖片外要有留白空間，最外面還要有外框，圖片與圖片之間要有間隔
就需要使用到margin padding border
---
### 了解margin、padding、border
- padding :為留白，區塊與區塊裡內容的距離，增加空間
- border :為邊框，整體大小最外面的邊框
- margin :為邊界，區塊與其他區塊的距離
---
### 了解margin、padding、border
```htmlmixed=
<img src="123.jpg"/>
<img src="456.jpg"/>
```
將兩張圖片的內容
- 向外增加2px的灰色
- 邊框為1px黑色 實線
- 邊界設定上1px右2px下3px左4px (順時針)
```css=
img{
background:#666;
padding:2px;
border:1px solid #000;
margin:1px 2px 3px 4px;
}
```
---
- padding是區塊內增大
- border是區塊的邊框
- margin是區塊外的邊界
---
### 第四步 - 寬度width與float
想要調整區塊的排列就需要用到float
使用float又必定需要用到width
(不然內部元素大小突然很大的時候版面會崩壞)
float屬性有分為left, right, none
float 是依照區塊寬度來進行排列
---
```htmlmixed=
<div class="a">
<div class="nav b">b</div>
<div class="nav c">c</div>
<div class="nav d">d</div>
</div>
```
```css=
.a{width:300px;}
.nav{width:150px;background-color:red;float:left;}
```
畫面會為
---
如果區塊寬度超過該外框的寬度，就會往下一行排列
```css=
.a{width:300px;}
.nav{width:160px;background:red;float:left;}
```
畫面會為 (因為寬度不夠放下兩個區塊)
---
如果為
```css=
.a{width:300px;}
.nav{width:150px;background:#666; float:left;}
.b{float:right;}
```
畫面會為
---
### 第五步 - position
相對位置、絕對位置、固定位置
---
### position
接下來要了解的是 區塊的位置定義
- 相對位置 relative : 依照區塊與區塊之間來設定的位置
- 絕對位置 absolute : 依照瀏覽器來設定的位置
- 鎖定位置 fixed : 依照瀏覽器框框來設定的位置，不管使用者如何拉動瀏覽器的scrollbar，位置永遠固定在瀏覽器框框
---
### position
```css=
top: 以上方為基礎算位置，top:10px 上方間隔 10px
left: 以左邊為基礎算位置，left:10px 左邊間隔 10px
right: 以左邊為基礎算位置，right:10px 右邊間隔 10px
bottom: 以左邊為基礎算位置，bottom:10px下方間隔 10px
```
Facebook 最上方的 #blueBar 就是用了
```css=
#blueBar{position:fixed;top:0;} /*鎖在瀏覽器上方*/
```
---
### position
子元素會繼承父元素的位置設定(很重要)
在正常的思考
絕對位置 absolute: 依照瀏覽器來設定的位置
但是當你的父元素設定了 absolute 之後，子元素也設定 absolute
子元素會依照父元素的位置當作起始位置去作定位
---
### 瞭解JQuery
---
### 第一步 - 如何把JQuery套用在網頁上
---
### 1
瀏覽器搜尋 google jquery ajax 找 google API ，找到
```htmlmixed=
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
```
(要掛載在第一個JS檔案)，將JQuery 載入到頁面上，就可開始使用JQuery
---
### 2
嵌入套用
```htmlmixed=
<script>
$(function(){
})
</script>
```
---
### 3
外部連接套用
```htmlmixed=
<script src=""></script>
```
寫的時候 架構
```javascript=
$(function(){
/*程式碼*/
})
```
(將程式碼寫在裡面，讓JS在頁面中執行)
---
### 第二步 - 使用選擇器
---
### ID選擇器
ID選擇器 => #
```htmlmixed=
<p id="good">123</p>
```
要將ID為 good 的內容字顏色改成白色
```javascript=
$("#good").css("color":"#FFF");
```
---
### CLASS選擇器
CLASS選擇器 => .
```htmlmixed=
<p class="good">123</p>
```
要將CLASS為 good 的內容字顏色改成白色
```javascript=
$(".good").css("color":"#FFF");
```
---
### 直接選擇標籤
```htmlmixed=
<p>123</p>
```
要將p標籤的內容字顏色改成白色
```javascript=
$("p").css("color":"#FFF");
```
---
### 後代選擇器
```htmlmixed=
<li>000</li>
<ul>
<li>123</li>
</ul>
```
要將 ul li 的內容字123顏色改成白色 ,內容字000不改變
```javascript=
$("ul li").css("color":"#FFF");
```
---
### Grouping
數個選擇器共同有同樣樣式 Ex:
```htmlmixed=
<p>123</p>
<div>456</div>
<li>789</li>
```
將p, div, li 內容字顏色都改為白色
```javascript=
$("p,div,li").css("color":"#FFF");
```
---
### 第三步 - JQuery常用功能與串接性
---
### 常用JQuery功能類方法
- .show();選擇器所在的出現
- .hide();選擇器所在的消失
- .css();選擇器的CSS改變
```javascript=
$("#A").css({"color":"#FFF"});//ID為A的 CSS改變
```
---
### 常用JQuery功能類方法
- .animate();選擇器的CSS動畫 Ex:
```javascript=
$("#A").animate({"top":"+10"});//ID為A的CSS製作top:增加10的補間動畫
```
- .html();選擇器的HTML改變 Ex:
```javascript=
$("#A").html("<p>123</p>");//改變為<p>123</p>
```
- .append();選擇器內增加HTML架構 Ex:
```javascript=
$("#A").append("<p>123</p>");//增加<p>123</p>
```
---
### 常用JQuery功能類方法
- .attr();選擇器取標籤資訊 OR 給值 Ex:
```javascript=
$("#A").attr("href"); 取得 ID為A內href的值
$("#A").attr("href","123"); 將 ID為A內href的值改變為123
```
- .addclass();選擇器增加類別名稱 Ex:
```javascript=
$("$A").addcass("nice");
```
---
### 常用JQuery事件類方法
- .blur() 物件失去焦點時
- .change() 物件內容改變時
- .click() 點擊物件時
- .mousedown() 按下按鍵時
- .mouseenter() 滑鼠進入時
- .mouseout() 滑鼠離開時
- .focus() 當物件被點擊或取得焦點時
---
### 第四步 - 嘗試著做tab load
---
HTML
```htmlmixed=
<ul>
<li alt="A1">one</li>
<li alt="A2">two</li>
<li alt="A3">three</li>
</ul>
<div class="A A1">第一頁</div>
<div class ="A A2">第二頁</div>
<div class ="A A3">第三頁</div>
<script>
$(function(){
$(".A").hide();
$(".A1").show();
$("ul li").click(function(){
var $this=$(this);/*將現在滑鼠點的這個li位置，給變數$this儲存位置*/
var alt=$this.attr("alt");
/*取得$this這個位置alt的值*/
$(".A").hide();
$("."+alt).show();
})
})
</script>
```
JQ變數的命名規則，盡量以$ 開頭的當作位置儲存變數，方便跟字串數字變數作區分
---
### TodoList實作練習
---
### .net core專案靜態檔案設定
---
### 建立一個HTML File
---
### 做完頁面排版
---
### 建立並引入CSS檔案
---
### 完成基礎樣式
---
### 建立並引入JS檔案
---
### 引入JQuery CDN
---
### JQuery Function
- 頁面載入時取得所有Todo資料
- Render 畫面
- 新增Todo
- 更新Todo狀態
- 刪除Todo