<style>
section {
text-align: left;
margin-left: 20px;
}
</style>
## 請先下載今日教材
<div style="display: flex;">
<div style="width: 50%;">
<a href="https://drive.google.com/file/d/16GRZOwMmweOTzfKWaQ-_ROOskr-i9_QX/view?usp=sharing"><img width="100%" src="https://hackmd.io/_uploads/Hk5CvR8s1e.png"></img></a>
↑ <a href="https://drive.google.com/file/d/16GRZOwMmweOTzfKWaQ-_ROOskr-i9_QX/view?usp=sharing">程式碼</a>
</div>
<div style="width: 50%;">
<a href="https://hackmd.io/@NCHUIT/SyovJ8-sJx"><img width="100%" src="https://hackmd.io/_uploads/Bk1GBRIiJe.png"></img></a>
↑ <a href="https://hackmd.io/@NCHUIT/SyovJ8-sJx">上課講義</a>
</div>
</div>
---
## Python 全端智能電商實戰 ①
#### - Vue 前端建置
---
### 講師資訊
主講：王智弘學長
今日代班：侯竣奇（副社長）
---
### 今日目標
- 了解網頁前端 HTML/CSS/JavaScript 三劍客
- 了解什麼是前端框架及 Vue
- 安裝並配置好 Vue 開發環境/編輯器
<center class="half">
<image height="200" src="https://hackmd.io/_uploads/rJnma_Wj1l.png"/><image height="200" src="https://hackmd.io/_uploads/B1x86uWjJg.png"/><image height="200" src="https://hackmd.io/_uploads/BJDdTOWi1e.png"/><image height="200" src="https://hackmd.io/_uploads/rkYT6_-j1e.png"/>
</center>
---
什麼？！這堂課竟然有業配？
讓我們歡迎 Sponser…
----
我們自己！（點點點）
- [社團官網社課資訊](https://nchuit.com/#/courses)
- Flutter 初學開發實戰
- Python 全端智能電商實戰（這門課）
- 跨域興學習！
---
# Ch0. 網頁開發環境
- [Visual Studio Code](https://code.visualstudio.com/) (不是 Visual Studio!)
----
Extension 插件:
1. [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
2. [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)
3. [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)
4. [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
5. [Svg Preview](https://marketplace.visualstudio.com/items?itemName=SimonSiefke.svg-preview)
6. [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
7. [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)
8. [Chinese (Traditional) Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hant) (可選)
9. [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
----
安裝及設定示範
----
操作時間 [(10 Minutes)](https://www.tickcounter.com/10minutes)
---
# Ch1. 網頁的架構
----
- 網頁分為前端和後端
- 前端負責界面的渲染
- 後端負責處理/運算資料等
- 我們今天只會介紹到**前端**的部分
----
- 網頁三劍客
- HTML：骨架
- CSS：皮肉
- JavaScript：腦
---
## 三劍客之首：HTML
- HTML：負責網頁的主要結構
- 範例檔：
```html=
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<!-- 基本設定 -->
</head>
<body>
<!-- 網頁內容 -->
</body>
</html>
```
----
- 以表格舉例
----
<center class="half">
<image height=300 src="https://hackmd.io/_uploads/HkL8GtWikx.png"></image> <image height=300 src="https://hackmd.io/_uploads/H1yoMFbi1e.png"></image>
</center>
----
- 表格的內容
```html=
<tbody>
<tr>
<td>賴庭岳</td>
<td>社長</td>
<td>電機資訊學院學士班</td>
<td>超電…</td>
</tr>
<!-- 以下省略 -->
</tbody>
```
[實作時間 (10 Minutes)](https://www.tickcounter.com/10minutes)
----
- 效果普通
- 就是個「表格資料」
---
## 三劍客之 CSS
----
- CSS：描述細節外觀，用來美化網頁
- 三種使用方法
1. 直接寫在容器
2. 用 classname 指定，寫在 `html` 檔裡
3. 用 classname 指定，另外寫在 `css` 檔裡
- 以 h1 標題為例
```html=
<h1>幹部資料</h1>
```
----
### 1. 寫在容器上
```html=
<h1 style="color: blue;">幹部資料</h1>
```
----
### 2. 用 classname 指定，寫在 `html` 檔裡
```html=
<head>
<style> <!-- 加一個 style 區塊 -->
.blue-title { <!-- .class名 -->
color: blue;
}
</style>
</head>
<body>
<!-- 指定 class 名為 blue-title -->
<h1 class="blue-title">幹部資料</h1>
<!-- 只要 class 名是 blue-title 都能套用 -->
<h2 class="blue-title">標題測試</h1>
</body>
```
----
### 3. 用 classname 指定，寫在 `css` 檔裡
- 剛剛的程式碼：
```html=
<head>
<style>
.blue-title {
color: blue;
}
</style>
</head>
<body>
<!-- 指定 class 名為 blue-title -->
<h1 class="blue-title">幹部資料</h1>
<!-- 只要 class 名是 blue-title 都能套用 -->
<h2 class="blue-title">標題測試</h1>
</body>
```
----
### 3. 用 classname 指定，寫在 `css` 檔裡
- 把 `<style>` 區塊拿掉：
```html=
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<!-- 指定 class 名為 blue-title -->
<h1 class="blue-title">幹部資料</h1>
<!-- 只要 class 名是 blue-title 都能套用 -->
<h2 class="blue-title">標題測試</h1>
</body>
```
- 寫一個 `index.css` 檔
```css=
.blue-title {
color: blue;
}
```
----
可以達成的效果？（示範）
----
----
到底可以多好看？（`beautiful.css` 示範）
----
- 電腦版
----
- 行動版
---
## 三劍客．終：JavaScript
什麼是 JavaScript？它跟 Java 有關係嗎？
----
"**Java**" 跟 "**JavaScript**" 的關係，
就如同「**狗**」跟「**熱狗**」。
<div style="text-align: right">
周樹人並沒有說過這句話
</div>
----
- JavaScript：在網頁產生動態效果、控制按扭執行動作等
- 以按扭（Button）舉例
----
- 有兩種用法：
1. `<script>`
2. 在 `<head>` 引入 `.js` 檔案
- 以按扭為例：
```html=
<div>
<button id="demoButton" onclick="changeText()">點擊我</button>
<p id="demoText">這是原始文字</p>
</div>
```
----
- JavaScript：
```html=
<script>
function changeText() {
const text = document.getElementById('demoText');
if (text.innerHTML === '這是原始文字') {
text.innerHTML = '文字已經被改變了！';
} else {
text.innerHTML = '這是原始文字';
}
}
</script>
```
----
示範及效果展示
---
# 課間休息！
Any question?
[(10 Minutes)](https://www.tickcounter.com/10minutes)
---
# Ch2. 什麼是 ~~yue~~Vue？
PS. 本社社長是賴庭岳 (tingyue-lai)
----
# 前端框架是什麼？
----
想像你在玩樂高積木，想要蓋一座漂亮的房子。如果每一塊積木都要你自己做…
----
但如果你有一套專門做房子的積木全套 Pro Max！
----
- 網頁前端框架就是剛剛提到的積木套組！
- 目前熱門的前端框架
- React：高度自由，但通常會結合其他工具
- Vue：最簡單易學，好上手
- Angular：使用 TypeScript
---
# 安裝 Vue.js
- [vue.js 官網](https://vuejs.org/)
----
- `Set-ExecutionPolicy Unrestricted`
- `npm create vue@latest`
- `npm install` → 有些人需要重開機後才能跑
----
# 跑起來！
- `npm run dev`
---
### 點名回饋單
[https://forms.gle/VVzTpQJdgDoH2nme7](https://qrco.de/bfo3Lw)
<center>
<a href="https://qrco.de/bfo3Lw"><img src="https://hackmd.io/_uploads/ByGJl0Iske.png" width="50%"></img></a>
</center>
---
Reference
- [HTML (Wiki)](https://en.wikipedia.org/wiki/HTML)
- [CSS (Wiki)](https://en.wikipedia.org/wiki/CSS)
- [JavaScript (Wiki)](https://zh.wikipedia.org/wiki/w:JavaScript)
- [Vue.js](https://vuejs.org/)
- [NCHUIT 官網](https://nchuit.com/)
- [今日程式碼 (Google Drive)](https://drive.google.com/file/d/16GRZOwMmweOTzfKWaQ-_ROOskr-i9_QX/view?usp=sharing)
{"title":"Python 全端智能電商實戰 ①","description":"清單","contributors":"[{\"id\":\"c5626a5a-843c-4c05-b9c0-d88068b13f5f\",\"add\":8689,\"del\":1620}]","showTags":"false","lang":"zh-TW"}