---
###### tags: `web111a` `程式筆記`
---
# HTML, CSS, JavaScript, jQuery, WoT
* **老師：戴德仁**
* 時間：2022/4/12、13
* WoT
* 信任網絡（英語：Web of Trust，縮寫：WoT）是密碼學中的一個概念，可以用來驗證一個公鑰的持有者身份。
* 信任網絡用去中心化的概念，不同於依賴數字證書認證機構的公鑰基礎設施。
* 在計算機網絡中，可以同時存在許多獨立的信任網絡，而任何用戶均可成為這些網絡中的一份子，或者不同網絡之間的連結。
## Course Intro
* 預計花費 1~2 週
* 前端 KnowHow
* 環境建置（build on cloud）
## 基本觀念
* Client side
* Server side
* 網站建置於 D:\htdosc\www
* 相對路徑 htdosc\123\test.png
* 絕對路徑 D:\htdosc\123\test.png
### dos基本操作
:::info
本教學以 Linux 及 Windows 為主
:::
* MAC
* Linux
* 節點代號
* \c
* \d
* Windows
* 指令、路徑名稱不分大小寫
* 磁碟機代號
* C:\
* D:\
| 指令\作業系統 | Windows | Linux |
| ----------- | ------- | ----- |
| 根 | \ | / |
| 切換工作目錄 | c: | cd /c |
| 建立資料夾 | mkdir | mkdir |
:::warning
Windows 下如果在 c:\ 中下 `cd d:\` 會移動不過去，因為系統判斷 c:\ 底下沒有 d:\
:::
## XAMPP
:::danger
XAMPP 版本請介於 7.2 到 7.4 之間，學校雲端才能用
:::
* 執行 setup_xampp.bat 設定組態
* 確認安裝
* `php -v`
* 如找不到請設定環境變數
* d:\xampp
* d:\xampp\bin\MySQL
* Port
* Web http(此例Apache): 80
* https(此例Apache): 443
* MySQL: 3306
* FTP(此例FileZilla): 21
:::info
因為未來老師會教其他網頁伺服器(IIS)預設Port也是80，本課程請改為6080
XAMPP panel 的 config 及 Apache 的 config 也要改
* IIS->Microsoft->ASP.NET
* XAMPP->偏Ninux->PHP
:::
## VS Code
### 推薦套件
#### Settings Sync
* [教學](https://medium.com/%E4%B8%80%E5%80%8B%E5%B0%8F%E5%B0%8F%E5%B7%A5%E7%A8%8B%E5%B8%AB%E7%9A%84%E9%9A%A8%E6%89%8B%E7%AD%86%E8%A8%98/vscode-%E4%BD%BF%E7%94%A8-settings-sync-%E5%90%8C%E6%AD%A5-vscode-%E7%9A%84%E6%93%B4%E5%85%85%E5%8A%9F%E8%83%BD%E8%88%87%E5%90%84%E9%A0%85%E8%A8%AD%E5%AE%9A-bb24a8d141eb)
1. 權限設定
1. github access token
2. gist id
2. 依據套件設定 settings.json
```json=
{
// setting sync
"sync.gist": "[your gist id]",
"sync.autoDownload": false,
"sync.autoUpload": false,
"sync.forceDownload": false,
"sync.forceUpload": false,
"sync.quiteSync": false,
"sync.removeExtensions": true,
"sync.syncEctension": true
}
```
* [ATOM on Mac](https://garfieldduck.me/atom-sync-settings/)
#### Markdown 系列
* Markdown All in One：支援 markdown
* Markdown Preview Enhanced：外觀
* Markdown PDF：轉檔
* markdownlint：偵錯
* Markdown Preview Github Styling：外觀
* Markdown Theme Kit：主題
* Markdown Emoji：特殊字元
* Markdown Shortcut：簡稱
* Markdown Table Formatter：表格
* Markdown TOC：分類
#### Picgo
* 圖片上傳
* 需先安裝[Picgo](#Picgo1)
## [Picgo](https://github.com/Molunerfinn/PicGo)
* 快速圖片上傳
* 支援多方雲端
### install
* 安裝穩定版本：2.3.0
* 設定選擇 Github
* Github 圖層 > Github 設置
* 設定repo, branch, token
* setting.json
```json=
//PicGo
"picgo.picBed.current" : "github",
"picgo.picBed.github.branch": "main",
"picgo.picBed.github.token" : "[your token]",
"picgo.picBed.github.repo": "[yourname/picgo]",
"picgo.picBed.github.path": "img/",
```
## Git
### command
* `>`：複寫
* `>>`：appand
```shell=
echo "# reponame" >> README.md
```
## XAMPP Virual host
1. httpd.conf：改port
2. httpd-vhost：設定檔案路徑及網域名稱
3. host：將網域連結到IP
### DNS
* 內網(Intranet)
* LAN: Local Area Network
* 外網(Internet)
* 協定 TCP/IP
## 虛擬機
### 安裝Virtual Box
1. 下載 [Portable-VirtualBox](https://www.vbox.me/)
* Win10
2. 啟用虛擬化(BIOS)
3. 手動更改設定檔(.ini)
1. data/language
1. 語系簡轉繁
2. data/settings/vboxinstall.ini
1. vbox 版本請選 6.0.24
2. extension pack 版本請選 6.0.24
4. 初次安裝會出現錯誤，先點選確定，請手動安裝驅動(.inf)右鍵點選安裝
1. 網路卡驅動：app64/drivers/network
2. USB 驅動：app64/drivers/USB
3. 核心驅動：app64/drivers/vboxdrv
5. 執行後看到小企鵝就成功囉
### 安裝 OS
1. 新增機器
2. 掛載iso
1. 預設開機 SATA 埠為 0
3. win10 登入方式：本機
4. 建立使用者帳戶
5. 記得把開機順序調回來
### 初始設定
#### 建立D槽
1. 開機前：存放裝置>建立虛擬硬碟
2. 開機後：電腦管理>存放裝置>磁碟管理>初始化D槽
#### Guest Additions
> VirtualBox Guest Additions are a collection of device drivers and system applications designed to achieve closer integration between the host and guest operating systems. They help to enhance the overall interactive performance and usability of guest systems.
1. 裝置>掛載 Guest Additions
2. 重新開機後就可以調整畫面解析度
3. 之後就可以卸載 Guest Additions 囉
#### 建立虛擬機與本機共享
* 裝置>共用資料夾>:ballot_box_with_check:自動掛載、:ballot_box_with_check:永久
* 裝置>共用剪貼簿>雙向
* 裝置>拖放>雙向
#### 網路卡
* bridge 橋接介面卡
* 在本機端幫虛擬機接上網卡：
1. 網際網路設定
1. 變更介面卡選項
1. 乙太網路2
1. 內容
1. 安裝
1. 服務
1. 新增
1. 從磁片安裝
1. 虛擬主機目錄下
1. drivers
1. network
1. netlwf
1. (.inf)
* 之後可以看到 VitrtualBox NDIS6 Bridged Networking Driver 被安裝好囉
* 虛擬機>裝置>網路>介面卡
* 查詢虛擬機 IP
### 本機端用 SSH 登入虛擬機
:::info
需將 Windows 更新
:::
* 設定>應用程式>選用功能
* OpenSSH 用戶端(預設安裝)
* OpenSSH 伺服器(需手動安裝)
* 服務>設為自動並啟用
* OpenSSH Authentication Agent
* OpenSSH Server
* 連線
```shell=
ssh <username>@<host ip>
# 例如本例 ssh web111a@127.0.0.1
```
* 查詢通訊埠(預設開啟)，有在監聽(TCP/IP)才能用SSH連線
```shell=
netstat -an | findstr :22
```
* 防火牆(預設開啟)
#### 設定免密碼連線
設定檔位置：C:/ProgramData/ssh/sshd.config
可以用免密碼連線(預設開啟)，如有註解需拿掉
```shell=
AuthorizeKeyFile .ssh/authorized_keys
```
讓管理員可以連線，將最下面兩行註解
```shell=
# Match Group administrators
# AuthorizedKeysFile __PROGRAMDATA__/ssh/administrators_authorized_keys
```
:::warning
因為教室電腦將`user`改成`web111a`的，ssh登入時會找不到，他會找預設的`user`
* 控制台>系統管理工具>電腦管理>`web111a`改回`user`
* 使用者名稱
* 全名
* 密碼
* 新增`web111a`使用者
* 群組加入`administrator`
:::
#### add key
將本機公鑰(.pub)加到虛擬機(authorized_keys)
#### 主機別名
在`.ssh`底下建立`config`
```shell=
Host allen
Hostname 127.0.0.1
Port 22
User allen
identityfile ~/.ssh/id_rsa_allen
```
登入
```shell=
ssh allen
```
#### 補充說明：nano
* Linux 文字編輯器
* 放在 D:/tools/nano
* 記得加環境變數
#### 補充說明：遠端複製
```shell=
scp <filename> -r[recursive] <username>@<host>:<filepath>
# 本例 scp id_rsa.pub web111a@127.0.0.1:~/.ssh/authorized_keys
```
## 驗收：SSH 連線及 XAMPP
:::info
4/18 驗收
:::
1. SSH 連線
1. 設定免密碼
2. config
2. XAMPP
1. PORT
2. 路徑設定
3. IP 設定
---
* 上課日期：2022/4/18
## VS Code extension
:::info
`settings.json` 參考老師提供
:::
1. prettier
2. Vrtur
3. PHP
1. PHP debug
2. PHP Intelelphense
3. PHP IntelliSence
4. Format HTML in PHP
4. eslint
1. ESLint 用於檢查 JavaScript 程式碼是否符合規則
5. Auto rename tag
6. Auto complete tag
7. Live Server
8. HTML CSS SUPPORT
9. Preview on Web Server
10. [deprecated]bracket pair colorizer 2
### 確認路徑
1. PHP
2. Cmder
3. Composer
4. Git
---
* 上課時間：2022/4/26、2022/4/28
## HTML
### 編輯器
* VSCode（本課使用）
* Sublime
* phpStorm
### DOM 樹
> DOM 全名為 Document Object Model 中文翻譯為 文件物件模型，看起來很抽象但其實就是把一份 HTML 文件內的各個標籤，包括文字、圖片等等都定義成物件，而這些物件最終會形成一個樹狀結構，下面有一張示意圖可以參考。
### 簡介
* 單標籤
* `<meta>`
* 雙標籤
* `<html></html>`
* `<body></body>`
* 行內元素：寬高依元素內容所訂
* 區塊元素：寬度將會佔用整行
### Emmet
* 幫助快速寫扣:+1:
* VSCode有內建，其他編輯器可能需要自己裝套件。
* [快速生成 HTML！Emmet 語法大公開！](https://5xruby.tw/posts/emmet-skills-html)
#### 起手式
試試看打`!`之後按下`Tab`吧
```htmlembedded=
<!DOCTYPE html> <!-- 宣告html5 -->
<html lang="en" dir="ltr"> <!-- 語系、由左至右讀 -->
<head>
<meta charset="utf-8"> <!-- 編碼 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- IE相容 -->
<meta name="viewport" content="width=device-width, initial-scale=1" > <!-- 不同裝置螢幕解析度 -->
<title></title>
</head>
<body>
</body>
</html>
```
### 註解
`<!-- meow -->`
### 假文產生器
* 英文：Lorem
* 簡體中文：clorem（需自行安裝套件）
* 繁體中文：Chinese lorem（需自行安裝套件）
### 假圖產生器
* [unsplash](https://source.unsplash.com/random)：`https://source.unsplash.com/random/`
* [fakeimg](https://fakeimg.pl/600x400/)
* placeholder套件
### 項目
* 無序`ul`、內文`li`
* 有序`ol`、內文`li`
### Box model
:::info
瀏覽器有預設的屬性
:::
* padding 對內
* border 邊線
* margin 對外
### table
`<tr>`、`<td>`
因為 HTML5 之後會讓標籤有「語意」，因此多了以下標籤：
`<thead>`、`<tbody>`、`<tfoot>`
```htmlembedded=
<table>
<thead>
<tr>
<th>日期(月)</th>
<th>數量</th>
<th>單價</th>
<th>金額</th>
</tr>
</thead>
<tbody>
<tr>
<td>2013/1</td>
<td>1</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2013/2</td>
<td>2</td>
<td>2</td>
<td>4</td>
</tr>
<tr>
<td>2013/3</td>
<td>3</td>
<td>2</td>
<td>6</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>小計</td>
<td>6</td>
<td>2</td>
<td>12</td>
</tr>
</tfoot>
</table>
```
輸出
### 文字
* 上標字 superscript `<sup></sup>`
* 輸出 x^2^
```htmlembedded=
x<sup>2</sup>
```
* 下標字 `<sub></sub>`
* 輸出 H~2~O
```htmlembedded=
H<sub>2</sub>O
```
* `<b></b>`
* `<big></big>`
* `<i></i>`
* `<strong></strong>`
* `<del></del>`
* `<mark></mark>`
* ...
## 上傳到伺服器
透過VSCode套件，可以參考[VS Code 關於SFTP上傳檔案到多伺服器的配置](https://www.itread01.com/iqeeq.html)
* SFTP(Natuzyskunk)
* Remote FS(liximomo)
Settings.json
```json=
"remotefs.remote": {
"vm": {
"scheme": "sftp",
"host": "<vm ip>",
"username": "web111a",
/*
Windows:
"privateKeyPath": "c:/Users/web111a/.ssh/id_rsa",
*/
"privateKeyPath": "~/.ssh/id_rsa_vm",
/* 本機檔案根目錄路徑 */
"rootPath": "d:/htdocs/www/web111a"
}
}
```
sftp.json
```json=
{
"name": "vm",
"remote": "vm",
"remotePath": "/path/to/remoteserver",
"openSsh": true,
"protocol": "sftp",
"uploadOnSave": true,
"ignore": [".vscode", ".git", ".DS_Store"]
}
```
### 補充
* For ATOM: [atom-sftp-sync](https://atom.io/packages/atom-sftp-sync)
* [SFTP是什麼？與FTP之間有什麼區別](https://kknews.cc/zh-tw/code/rojyjqx.html)
## Connect to back-end
### 非同步請求
> 以前網頁 request/response 透過 form，只更動部分內容卻整個網頁都要重新渲染 (render)，後來有 AJAX 非同步請求出來。能做到非阻斷 resquest
>
> AJAX 的 A 是 Asynchronous（非同步）指的是 Javascript 對伺服器提供請求，使用者仍然可透過輸入網頁表單、點擊按鈕與頁面互動，這互動所有一切都發在Web 伺服器仍在執行。 當伺服器完成工作時，程式碼可以**只更新頁面上有發生改變的部分**。
### HTTP 請求
```htmlembedded=
<form action="http://web111a.com.tw/form.php" method="">
<!-- 同一路徑的話 http://web111a.com.tw 可以省略 -->
```
#### method
* From 只能用 GET、POST
* GET：只應用於取得資料
* POST：提交指定資源的實體，通常會改變伺服器的狀態
* [其他請求還有 PUT、DELETE、PATCH 等](https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Methods)
### HTML FROM
> `<fieldset>` 元素能方便地建立用途相近、樣式及語意化都很方便的小部件組。透過添加 `<legend>` 來給 `<fieldset>` 的內部開頭添加標籤。
```htmlembedded=
<form>
<fieldset>
<legend>Fruit juice size</legend>
<p>
<input type="radio" name="size" id="size_1" value="small">
<label for="size_1">Small</label>
</p>
<p>
<input type="radio" name="size" id="size_2" value="medium">
<label for="size_2">Medium</label>
</p>
<p>
<input type="radio" name="size" id="size_3" value="large">
<label for="size_3">Large</label>
</p>
</fieldset>
</form>
```
* 文字 `type="text"`
* 單選 `type="radio"`
* 電話 `type="tel"`
* 多選 `select/option`
* ...
## 撰寫 PHP
起手式
```php=
<?php
echo "hello world!"
?>
```
測試呼叫，在 command line 輸入
```shell=
php hello.php
```
`$_POSE["<input 的 name>"]` 抓取前端傳來的資料
```php=
<?php
$username = $_POST["username"]
?>
```
---
* 時間：2022/5/4
如果前端沒有丟資料怎麼辦？兩種寫法：
PHP `isset()`
```php=
<?php
if(isset($_POST["username"])){
$username = $_POST["username"]
echo username;
}
?>
```
或是給預設值
:::warning
特別注意這邊的預設值是當直接從路徑進入後端表單才會帶，如果從前端按送出，傳的資料會是空值，空值會覆蓋掉預設值。
另外實務上前端應該做表單初步驗證（例如：加上 required），後端雖然還是會二次驗證，但有更好的寫法
:::
```php=
<?php
$username = $_POST["username"] ?? "Allen"
?>
```
### 常用寫法
字串相加
```php=
<?php
echo "你好，".$username;
?>
```
多選 `checkbox` 資料的取法
HTML
```htmlembedded=
<input type="checkbox" name="userinterest[]" value="soccer">Soccer
<input type="checkbox" name="userinterest[]" value="climbing">Climbing
<input type="checkbox" name="userinterest[]" value="video games">video games
```
PHP
這邊的 `$userinterest` 就是 `input` 裡的 `name`，撈出來的資料是 `input` 裡的 `value`
```php=
<?php
$userinterest = $_POST["userinterest"];
echo "<ul>";
foreach ($userinterest as $value){
echo "<li>".$value."</li>";
}
echo "</ul>";
?>
```
### debug
```php=
<?php
phpinfo();
?>
```
VS Code 套件，根據文件做法到 [xdebug](https://xdebug.org/wizard) 產生 .dll，放在對應位置
按照步驟並更改 php.ini，下圖是 macOS 的
windows
確認安裝：在 `phpinfo()` 搜尋 `xdebug`
#### 開始使用
建立並修改 launch.json，注意 port 要與 php.ini 一致
## javascript
移至 [javascript](#javascript1)
---
* 時間：2022/5/6
## Dos 基操
### 建立批次檔
常用指令要一直打很麻煩？可以產生批次檔紀錄一連串指令，其實很簡單：
1. 在記事本裡打一些文字
1. 另存成 `.bat` 檔
* BAT 是 Batch 的簡寫，因此 Batch Language 就是批次檔所使用的語法
例如：我想快速用 VS Code 開啟專案目錄，我可以在 C 槽底下新增 web111a.bat，內容是：
```shell=
d:
cd d:\htdocs\www\web111a
code .
```
使用時不想印出指令請在 `.bat` 加上這行：
```shell=
@echo off
```
測試一下（因為命令提示字元預設一進入工作目錄會在 `C:\Users\使用者`，所以其實只要輸入 `w` + `tab`，就會自動完成）
```shell=
web111a.bat
```
:::info
特別注意：
~~記得加上環境變數~~
~~每次更動 `.bat` 需重新開啟命令提示字元~~
剛經測試更動 .bat 好像不用重開，甚至不需要加環境變數
:::
## CSS
### color
:::info
emmet 縮寫是 `c`
:::
* hex
* 0~F
```css=
color: #001122; 相同時也可以縮寫成 #012
```
* rgb
* 0~255
* 0~100%
```css=
color: rgb(255, 255, 255);
```
* rgba
* rgb 的基準上加上 alpha 值（透明度）
```css=
color: rgba(0, 0, 0, .5);
```
* hsl
* Hue(色相) 0~360
* Saturation(飽合度) 0~100%
* Lightness(亮度) 0~100%
* 
* 圖源：[W3schools Colors HSL](https://www.w3schools.com/colors/colors_hsl.asp)
* hsla
* hsl 的基準上加上 alpha 值（透明度）
* 背單字吧
* 依據瀏覽器預設有[上百種](https://www.w3schools.com/colors/colors_names.asp)
```css=
color: Salmon;
```
### text-decoration
:::info
emmet 縮寫是 `td`
:::
```css=
text-decoration: none;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
```
### text-align
:::info
emmet 縮寫是 `ta`
:::
```css=
text-align: center;
text-align: right;
```
### font-family
:::info
emmet 縮寫是 `ff`
:::
```css=
font-family: serif;
```
#### 雲端字體
* [Google Font](https://fonts.google.com/)
* 免費
* 中文：noto sans tc
* [Abode typekit](https://fonts.adobe.com/home)
* [Font Squirrel](https://www.fontsquirrel.com/)
* [justfont](https://justfont.com/)
* [文鼎雲](https://www.arphic.com.tw/ifontcloud/)
* [華康威](https://www.dynacw.com.tw/product/product_dynalibrary_detail.aspx?sid=45&utm_source=GSM&utm_medium=cpc&utm_campaign=dfo)
#### 使用方法(google font為例)
找到你要的字體：[Noto Sans TC](https://fonts.google.com/noto/specimen/Noto+Sans+TC?query=noto+sans&preview.text=noto%20sans%20&preview.text_type=custom)
選擇樣式：
選擇匯入方式 `link` 或是 `@import` ：
放到你的專案中：
```htmlembedded=
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet">
```
你也可以直接下載放在你的專案資料夾中，一樣使用 `link` 或是 `@import` 方式匯入
#### `@font-face`
The `@font-face` CSS at-rule allows authors to specify online fonts to display text on their web pages.
:::warning
某些瀏覽器需要前綴才能正常使用，非必要勿試。
:::
```css=
@font-face {
font-family: "name";
src: <路徑>;
}
```
### font-size
:::info
emmet 縮寫是 `fz`
:::
* px 絕對單位
* % 相對單位
* em 相對單位，以父層文字大小為基準
* rem 相對單位，相對於 root
* 例如：網站的文字大小是 14px，rem 的尺寸就是以 14px 為基準，
圖源：[on my Codepen](https://codepen.io/mitour/pen/BaYowdz)
補充：[實際展示 EM 與 REM 的差異](https://www.hexschool.com/2016/01/02/2016-08-08-em-vs-rem/)
### font-style
:::info
emmet 縮寫是 `fs`
:::
```css=
font-style: italic;
font-style: normal;
```
### letter-spacing
:::info
emmet 縮寫是 `ls`
:::
```css=
/* 字距 */
letter-spacing: 20px;
letter-spacing: normal;
```
### word-spacing
:::info
emmet 縮寫是 `ws`
:::
```css=
/* 處理文字間空白字元的尺寸，英文單字間的距離，
* 因為中文文章中其實沒甚麼發生空白字機會，所以不會用在中文字上，
* 不過中文字之間如果有空白還是可以用 word-spacing */
word-spacing: 20px;
```
### line-height
:::info
emmet 縮寫是 `lh`
:::
```css=
/* 行距 */
line-height: 1.8;
```
### 驗收：表單
* 首頁
* 聯絡我
* 自我介紹
* ssh.com.tw:6080
---
* 上課時間：2022/5/10
### background
```css=
background-image: url(); /* 背景以圖片呈現 */
background-repeat: no-repeat; /* 當背景圖小於螢幕，不重複圖片 */
background-color: #fff; /* 背景顏色 */
background-position: top right; /* 背景圖位置 */
background-attachment: fixed; /* 跟著 scroll bar 移動 */
```
特別留意 `background-position` 在使用 `top`、`bottom`、`right`、`left` 定位時抓取的是當層的寬高，如果當層只有 200px 高，`background-position: bottom`會貼齊 200px。
你也可以 `background-image` 跟 `background-color` 混用，讓背景圖上一層遮罩效果。
```css=
background-image: repeating-linear-gradient(45deg, #FFDD3F, transparent 1px), url();
/* 記得設定高度 */
```
[Codepen](https://codepen.io/mitour/pen/wvyGxbP)
#### calc()
```css=
height: calc(100% - 80px) /* 注意加減號前後要有空格 */
```
#### linear-gradient
```css=
linear-gradient(red, blue) /* 預設0~100%，由上到下 */
```
### 確認 css style 瀏覽器支援度
[caniuse](https://caniuse.com/)
### 盒子模型
[懶得寫請參考另一篇筆記](/VRt_NpmWReKGQmtg_jeJFw#Box-Model-盒模型)
* 內距 padding
* 外距 margin
* 邊 border
常理來說盒子大小為 width + border + padding，如果你懶得算，請下 `box-sizing: border-box`，盒子大小會變成 width + border + padding + margin
### pseudo class
### 垂直置中
1. line-height 調整成元素高度，但只能一行文字的情況
1. inline-block + vertical-align: middle
* 原理請參考：[CSS深入理解vertical-align和line-height的基友关系](https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/)
* 限制：要有兩個以上高度
* 所有元素都要 inline-block
* 父元素 font-size: 0、子元素 font-size: 14px
* 所有子元素 overflow: hidden
1. table
* 父元素：table
* 子元素：table-cell + vertical-align: middle
1. position
* 父元素：relative
* 子元素：absolute + 上下左右 0 + margin: auto
1. :heavy_check_mark:flex
1. float
* float
* clean
float 排版遇到的問題：父元素不會被撐出高度
* 給父元素加高度
* 父元素加上 overflow: auto
* 
* :heavy_check_mark:clearfix
```css=
.container::after {
content: '';
display: block;
clear: both;
}
```
* @KC1090901：可以改在父元素加上 display: flow-root，It provides a better solution to the most use cases of the "clearfix" hack.
:::info
結論：請用 `flex`
:::
#### refer
* [[CSS] 垂直置中的方法](https://pjchender.dev/css/css-center-center/)
* [Align inline-blocks with vertical-align](https://codepen.io/edge0703/pen/DzaEex?editors=0100)
---
* 時間：2022/5/17
## 驗收：動態連結頁面
### 題目要求
### 我懶得打
### 老師的參考寫法
```htmlembedded=
<a href="./index.php?page=index">index</a>
<a href="./index.php?page=introduce">introduce</a>
<a href="./index.php?page=contact">contact</a>
```
```php=
if (isset($ GET["page"])) {
switch ($ GET["page"]) {
case 'index' :
include_once "index.php";
break;
case 'introduce' :
include_once "introduce.php" ;
break ;
case 'contact':
include_once "contact.php" ;
break;
}
}
```
## font awesome
官網：[fontawesome](https://fontawesome.com/) 有使用步驟，建議用 VSCode 的 [jscdn](https://marketplace.visualstudio.com/items?itemName=JakeWilson.vscode-cdnjs) 套件抓，省時
## 切版練習
[ASUS 官網](https://www.asus.com/tw/)
### 注意事項
* html5 語意化標籤
* 擴大連結點擊區域
* 加上 hover 效果提升使用者體驗
## CSS selector
### id
:::warning
靜態樣式請不要用 id 選擇器
:::
```css=
#id {
}
```
### class
```css=
.class {
}
```
### 屬性選擇器
有點多有點複雜有點難懂，請看 [金魚都懂 CSS 選擇器](https://ithelp.ithome.com.tw/articles/10220168)
```css=
/* 有屬性(本例：alt)就好 */
img[alt] { border:none; }
/* 屬性完全等於...才選 */
img[alt="子瑜我婆"] { display:none; }
/* 屬性以...開頭才選 */
img[alt^="子瑜"] { display: none; }
/* 屬性以...結尾才選 */
a[href$=".png"] { background-image: url("icon-png.png"); }
/* 屬性以...結尾且不論大小寫都選 */
a[href$=".png" i] { background-image: url("icon-png.png"); }
```
### CSS 權重
[強烈建議收藏好物——CSS權重一覽](https://muki.tw/tech/html-css/css-specificity-document/)
* html tag：1分
* class：10分
* id：100分
* inline style：1000分
* !important：10000分
:::warning
除非你清楚知道你在幹嘛，不然不要用 id、inlin style、!important 來寫樣式，實務上 html tag 也應盡量避免
:::
## 驗收：hover
---
* 時間： 2022/5/18
* [遠距教學建制](/BaNJsiZFSySjuegWLqCxbg)
## CSS reset
* [meyerweb CSS reset](https://meyerweb.com/eric/tools/css/reset/)
## image RWD in grid system
* [codepen](https://codepen.io/mitour/pen/oNEZaVL)
`object-fit: cover` 的出現是為了解決用 img tag 也做到照片縮放，以前要用 `background-image`，img 才可以寫 alt 對 SEO 比較友好。
當 `object-fit` 設為 `cover` 就是讓圖片等比例自適應父元素高寬，所以父元素寬高都要設定。
不能使用 `max-width` 取代 `width` 因為圖片如果不夠寬（或太長） `max-width` 會限制 `object-fit: cover` 要放大的寬度。
```css=
img {
display: block; /* reset 用 */
width: 100%;
height: 240px;
object-fit: cover;
}
```
* ref：[新手前端也不該犯的錯：圖片變形](https://www.casper.tw/development/2020/10/11/img-cover/)
## :root
自定義變數
:::warning
除非你清楚知道你在幹嘛，不然不要用
:::
Bootstrap 4 之後開始導入 :root，可參照以下 source code
* [bootstrap@4.6.1](https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.css)
* [bootstrap@5.2.0](https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.css)
### 建立變數
```css=
/*建立全域變數*/
:root {
--csscoke-red: #f00;
}
/*套用變數*/
.section-item {
color: var( --csscoke-red );
}
```
CSScoke 講解：[:root 根目錄選取器 - 叫你阿爸出來講
](https://ithelp.ithome.com.tw/articles/10228111)
### 全域變數跟區域變數我該怎麼選擇
其實這問題要看一下你的變數要用在哪個範疇，通常我們是整個系統或是網頁都會統一共用的，像是色彩或是某些物件的尺寸或是框線，這一類的都很適合使用全域變數，相對的，如果你只是一部分會用到的話，像是某些模組組件，這樣你就很適合使用區域變數來設定
## 軟體工程師學習地圖
我懶得打，可參考 [@KC1090901 筆記](/@KC1090901/HJMMXoXwq)
* 前端
* 後端
* 資料庫
* 版控
* 全端
* full stack
* MEAN stack
> MEAN stack development refers to the development process that falls within these particular set of technologies **MongoDB, Expressjs, AngularJs, NodeJS**.
>
> In simple words, MEAN stack developers are like JS-based application developers
>
> [Full Stack Developer VS Mean Stack Developer](https://ncube.com/blog/full-stack-developer-vs-mean-stack-developer)
## 漢堡選單
[codepen](https://codepen.io/mitour/pen/GRQyWMW)
### 按鈕樣式
使用 font awesome 再搭配 ::before、::after
acitve 時漢堡變成叉叉
### media query
什麼時候漢堡出現、選單消失
### display 的轉變
從 none 到 block，無法使用轉場(transition)效果，建議用
* [max-height](https://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css)
* visibility + height
* scaleY
任何跟 height 有關都必須寫死，auto 或 100% 不能用
:::info
我個人都沒有試成功
:::
### media query in JS
希望換成大螢幕要自動關閉選單
[Checking Media Queries With jQuery](https://dzone.com/articles/checking-media-queries-jquery)
```javascript=
if (window.matchMedia('(max-width: 768px)').matches)
{
// do functionality on screens smaller than 768px
}
```
---
* 時間：2022/5/31
## javascript
還有一些未整理的[自學筆記](/7B1b0TbyRv6ZgBJpnqDLdw)
起手式
```javascript=
document.wirte("hello world");
```
### 引用方式
* `<script></script>`
* `<script src="script.js"></script>`
* `<a href="javascript:alert(Message)">click</a>`
### onclick
行內
```htmlembedded=
<button onclick="alert('meow')">click</button>
```
### DOM
```javascript=
document.getElementById("id");
document.getElementByClass("class");
document.getElementByTagName("tagname");
```
一般會將 javascript 寫在最下面，但也可以要求等待視窗載入完畢在執行 JS
```javascript=
window.onload = function() {
// js code
a = document.getElementById("id");
console.log(a);
}
```
### JQuery
差別，參考 [jquery中的$("#id")与document.getElementById("id")的区别](https://www.cnblogs.com/thewaytoace/p/5591221.html)：
* javascript 取得 HTML DOM
* jQuery 取得 jQuery Object
> jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法
#### 引入資源
[JQuery CDN](https://releases.jquery.com/)
:::info
補充：CDN 是指一種透過網際網路互相連接的電腦網路系統，利用最靠近每位使用者的伺服器，更快、更可靠地將音樂、圖片、影片、應用程式及其他檔案傳送給使用者，來提供高效能、可擴展性及低成本的網路內容傳遞給使用者。
:::
```htmlembedded=
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
```
或使用 VS Code 套件，cdnjs（註：之後如果要用 Bootstrap 也可以用套件抓抓看）
起手式
* `$` = `jQuery`
* 提供方法串接
```javascript=
$("對象").方法1.方法2
// 當對象是 selector 時需要雙引號 ""
$("selector").方法1
$(document).方法1
```
綁定事件.ready()
```javascript=
// 3 種寫法都是一樣的意思
jQuery(document).ready(function(){
});
$(document).ready(function(){
});
$(function(){
});
```
特別注意，此時 a 會是 jQuery 的一個物件
```javascript=
$(function(){
a = $("#id");
console.log(a);
});
```
如果想要取到值
* .text() 物件底下所有純文字值
* .html() 物件底下所有值，包含 html tag
* .val() 物件 tag 內 value 值
HTML code
```htmlembedded=
<select id="edu" name="education" id="education">
<option value="elementary">國小</option>
<option value="junior">國中</option>
<option value="senior">高中</option>
<option value="bachelor's">學士</option>
<option value="Master's">碩士</option>
<option value="Doctoral">博士</option>
</select>
```
JS code：.html()的示範
```javascript=
$(function(){
a = $("#edu");
console.log(a.html());
})
```
輸出
JS code：.text()的示範
```javascript=
$(function(){
a = $("#edu");
console.log(a.text());
})
```
輸出
### NVM(Node Version Manager)
[安裝 nvm 環境，Node.js 開發者必學（Windows、Mac 均適用）](https://www.casper.tw/development/2022/01/10/install-nvm/)
* 可以輕鬆切換不同版本的 Node.js
* 使用特定 Node.js 作為預設啟用環境
* 安裝不同的套件至特定的版本上
起手式：[node.js 官網](https://nodejs.org/zh-tw/about/)
> :arrow_down_small: nodeDemo.js
```javascript=
const http = require('http');
const hostname = '127.0.0.1';
const port = 3000;
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello World');
});
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});
```
執行看看
```bash=
node nodeDemo.js
```
輸出
### 瀏覽器支援
* [ECMAScript6 compatibility table](https://kangax.github.io/compat-table/es6/)
* [Can I use](https://caniuse.com/)
### 瀏覽器快取
* 清除瀏覽器快取：瀏覽器 :arrow_right: 更多工具 :arrow_right: 清除瀏覽資料
* 暴力重整：ctrl + F5
* html 中引入 css、js 時，路徑後多加上一個 `?` 讓瀏覽器判斷為不同網址而重載
```htmlembedded=
<script src="./all.js?"></script>
```
### Debug
* condole.log();
* alert();
* chrome 中的 source 可以下中斷點
### 前端資料儲存
* cookie
* session
* [html5 webStorage](/HyP7MKtgRde0fLT5_ULQfQ)
* localStorage
* sessionStorage
### 斷言 `Console.assert()`
如果斷言（assertion）為非（false），主控台會顯示錯誤訊息；如果斷言為是（true），則不發生任何事。
```javascript=
console.assert(asserment, msg);
```
輸出
### `console.clear()`
### 驗收：成績級距
```javascript=
function score() {
let userInput = Number(input.value);
if (userInput < 60) {
console.log("不及格");
} else if (60 <= userInput && userInput < 70) {
console.log("丙等");
} else if (70 <= userInput && userInput < 80) {
console.log("乙等");
} else if (80 <= userInput && userInput < 90) {
console.log("甲等");
} else {
console.log("優等");
}
}
```
```javascript=
function scoreSwitch() {
let userInput = Number(input.value);
switch (true) {
case userInput < 60:
console.log("不及格");
break;
case userInput < 70:
console.log("丙等");
break;
case userInput < 80:
console.log("乙等");
break;
case userInput < 90:
console.log("甲等");
break;
default:
console.log("優等");
}
}
```
### 比較運算子
字串>數字>布林
布林會轉成1或0
### 物件
```javascript=
const obj = {
Ming: {
name: "大明",
},
Jay: {
name: "杰倫",
},
Mitour: {
name: "我",
}
}
```
#### 要如何取值？
for...in
```javascript=
for (const key in obj) {
console.log(obj[key]);
}
```
輸出
#### 改成陣列的取法
for...of
```javascript=
for (let item of Object.values(obj)) {
console.log(item);
}
for (let str of "ES6可以正確的取出中文") {
console.log(str);
}
```
輸出
#### 陣列也可以搭配 forEach
Object.values()
```javascript=
Object.values(obj).forEach(item => {
console.log(item)
})
```
Object.keys()
```javascript=
Object.keys(obj).forEach(key => {
console.log(key, obj[key])
})
```
輸出
### 驗收
* 1~10 奇數和
* 9x9
#### tips
```javascript=
// create an array from 0 to n
let numArr = Array.from(Array(100).keys());
// create an array from 1 to n
let numArr = Array.from({ length: 9 }, (_, i) => i + 1);
```
```javascript=
// convert an array into an object
let numObj = Object.assign({}, numArr);
```
```javascript=
// get object values
Object.values(numObj)
```
### Array & List
Array 通常會放同一型別資料，List 則是各種型別都可以放
## 上課影片
### 4/12 環境建置與虛擬主機架設（直播）
{%youtube kntn6ZsPy4c %}
### 4/13 環境建置與虛擬主機架設（直播）
{%youtube eGET6v_Cu1M %}
### 4/15 後影片參照[老師 YT](https://www.youtube.com/channel/UC6c3un6c2FyZrLr0cAuG9LQ)
Sign in with Wallet
Connect another wallet