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基本操作

本教學以 Linux 及 Windows 為主

MAC
Linux
- 節點代號
  - \c
  - \d
Windows
- 指令、路徑名稱不分大小寫
- 磁碟機代號
  - C:\
  - D:\

指令\作業系統	Windows	Linux
根	\	/
切換工作目錄	c:	cd /c
建立資料夾	mkdir	mkdir

Windows 下如果在 c:\ 中下 cd d:\ 會移動不過去，因為系統判斷 c:\ 底下沒有 d:\

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

XAMPP

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
因為未來老師會教其他網頁伺服器(IIS)預設Port也是80，本課程請改為6080 XAMPP panel 的 config 及 Apache 的 config 也要改
- IIS->Microsoft->ASP.NET
- XAMPP->偏Ninux->PHP

VS Code

Picgo

快速圖片上傳
支援多方雲端

install

安裝穩定版本：2.3.0
設定選擇 Github
Github 圖層 > Github 設置
- 設定repo, branch, token
setting.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


echo "# reponame" >> README.md

XAMPP Virual host

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

httpd.conf：改port
httpd-vhost：設定檔案路徑及網域名稱
host：將網域連結到IP

DNS

內網(Intranet)
- LAN: Local Area Network
外網(Internet)
- 協定 TCP/IP

虛擬機

安裝Virtual Box

下載 Portable-VirtualBox
- Win10
啟用虛擬化(BIOS)
手動更改設定檔(.ini)
1. data/language
  1. 語系簡轉繁
2. data/settings/vboxinstall.ini
  1. vbox 版本請選 6.0.24
  2. extension pack 版本請選 6.0.24
初次安裝會出現錯誤，先點選確定，請手動安裝驅動(.inf)右鍵點選安裝
1. 網路卡驅動：app64/drivers/network
2. USB 驅動：app64/drivers/USB
3. 核心驅動：app64/drivers/vboxdrv
執行後看到小企鵝就成功囉

安裝 OS

新增機器
掛載iso
1. 預設開機 SATA 埠為 0
win10 登入方式：本機
建立使用者帳戶
記得把開機順序調回來

初始設定

建立D槽

開機前：存放裝置>建立虛擬硬碟
開機後：電腦管理>存放裝置>磁碟管理>初始化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.

裝置>掛載 Guest Additions
重新開機後就可以調整畫面解析度
之後就可以卸載 Guest Additions 囉

建立虛擬機與本機共享

裝置>共用資料夾>:ballot_box_with_check:自動掛載、:ballot_box_with_check:永久
裝置>共用剪貼簿>雙向
裝置>拖放>雙向

網路卡

bridge 橋接介面卡
- 在本機端幫虛擬機接上網卡：
  1. 網際網路設定
  2. 變更介面卡選項
  3. 乙太網路2
  4. 內容
  5. 安裝
  6. 服務
  7. 新增
  8. 從磁片安裝
  9. 虛擬主機目錄下
    1. drivers
    2. network
    3. netlwf
    4. (.inf)
- 之後可以看到 VitrtualBox NDIS6 Bridged Networking Driver 被安裝好囉
- 虛擬機>裝置>網路>介面卡
查詢虛擬機 IP

本機端用 SSH 登入虛擬機

需將 Windows 更新

設定>應用程式>選用功能
- OpenSSH 用戶端(預設安裝)
- OpenSSH 伺服器(需手動安裝)
服務>設為自動並啟用
- OpenSSH Authentication Agent
- OpenSSH Server

連線


ssh <username>@<host ip>
# 例如本例 ssh web111a@127.0.0.1

查詢通訊埠(預設開啟)，有在監聽(TCP/IP)才能用SSH連線
```
netstat -an | findstr :22
```
防火牆(預設開啟)

設定免密碼連線

設定檔位置：C:/ProgramData/ssh/sshd.config

可以用免密碼連線(預設開啟)，如有註解需拿掉


AuthorizeKeyFile .ssh/authorized_keys

讓管理員可以連線，將最下面兩行註解


# Match Group administrators
#         AuthorizedKeysFile __PROGRAMDATA__/ssh/administrators_authorized_keys

因為教室電腦將user改成web111a的，ssh登入時會找不到，他會找預設的user

控制台>系統管理工具>電腦管理>web111a改回user
- 使用者名稱
- 全名
- 密碼
新增web111a使用者
- 群組加入administrator

add key

將本機公鑰(.pub)加到虛擬機(authorized_keys)

主機別名

在.ssh底下建立config





Host allen
Hostname 127.0.0.1
Port 22
User allen
identityfile ~/.ssh/id_rsa_allen

登入


ssh allen

補充說明：nano

Linux 文字編輯器
放在 D:/tools/nano
記得加環境變數

補充說明：遠端複製


scp <filename> -r[recursive] <username>@<host>:<filepath>
# 本例 scp id_rsa.pub web111a@127.0.0.1:~/.ssh/authorized_keys

驗收：SSH 連線及 XAMPP

4/18 驗收

SSH 連線
1. 設定免密碼
2. config
XAMPP
1. PORT
2. 路徑設定
3. IP 設定

上課日期：2022/4/18

VS Code extension

settings.json 參考老師提供

prettier
Vrtur
PHP
1. PHP debug
2. PHP Intelelphense
3. PHP IntelliSence
4. Format HTML in PHP
eslint
1. ESLint 用於檢查 JavaScript 程式碼是否符合規則
Auto rename tag
Auto complete tag
Live Server
HTML CSS SUPPORT
Preview on Web Server
[deprecated]bracket pair colorizer 2

確認路徑

PHP
Cmder
Composer
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 語法大公開！

起手式

試試看打!之後按下Tab吧












<!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>

註解

假文產生器

英文：Lorem
簡體中文：clorem（需自行安裝套件）
繁體中文：Chinese lorem（需自行安裝套件）

假圖產生器

unsplash：https://source.unsplash.com/random/
fakeimg
placeholder套件

項目

無序ul、內文li
有序ol、內文li

Box model

瀏覽器有預設的屬性

padding 對內
border 邊線
margin 對外

table

<tr>、<td>

因為 HTML5 之後會讓標籤有「語意」，因此多了以下標籤：

<thead>、<tbody>、<tfoot>






































<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²


x<sup>2</sup>

下標字 <sub></sub>
- 輸出 H₂O


H<sub>2</sub>O

<b></b>
<big></big>
<i></i>
<strong></strong>
<del></del>
<mark></mark>
…

上傳到伺服器

透過VSCode套件，可以參考VS Code 關於SFTP上傳檔案到多伺服器的配置

SFTP(Natuzyskunk)
Remote FS(liximomo)

Settings.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









{
  "name": "vm",
  "remote": "vm",
  "remotePath": "/path/to/remoteserver",
  "openSsh": true,
  "protocol": "sftp",
  "uploadOnSave": true,
  "ignore": [".vscode", ".git", ".DS_Store"]
}

補充

For ATOM: atom-sftp-sync
SFTP是什麼？與FTP之間有什麼區別

Connect to back-end

非同步請求

以前網頁 request/response 透過 form，只更動部分內容卻整個網頁都要重新渲染 (render)，後來有 AJAX 非同步請求出來。能做到非阻斷 resquest

AJAX 的 A 是 Asynchronous（非同步）指的是 Javascript 對伺服器提供請求，使用者仍然可透過輸入網頁表單、點擊按鈕與頁面互動，這互動所有一切都發在Web 伺服器仍在執行。當伺服器完成工作時，程式碼可以只更新頁面上有發生改變的部分。

HTTP 請求


<form action="http://web111a.com.tw/form.php" method="">
<!-- 同一路徑的話 http://web111a.com.tw 可以省略 -->

method

From 只能用 GET、POST
- GET：只應用於取得資料
- POST：提交指定資源的實體，通常會改變伺服器的狀態
其他請求還有 PUT、DELETE、PATCH 等

HTML FROM

<fieldset> 元素能方便地建立用途相近、樣式及語意化都很方便的小部件組。透過添加 <legend> 來給 <fieldset> 的內部開頭添加標籤。

















<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
  echo "hello world!"
?>

測試呼叫，在 command line 輸入


php hello.php

$_POSE["<input 的 name>"] 抓取前端傳來的資料



<?php
  $username = $_POST["username"]
?>

時間：2022/5/4

如果前端沒有丟資料怎麼辦？兩種寫法：

PHP isset()







<?php
if(isset($_POST["username"])){
  $username = $_POST["username"]
    
  echo username;
}
?>

或是給預設值

特別注意這邊的預設值是當直接從路徑進入後端表單才會帶，如果從前端按送出，傳的資料會是空值，空值會覆蓋掉預設值。

另外實務上前端應該做表單初步驗證（例如：加上 required），後端雖然還是會二次驗證，但有更好的寫法



<?php
  $username = $_POST["username"] ?? "Allen"
?>

常用寫法

字串相加



<?php
  echo "你好，".$username;
?>

多選 checkbox 資料的取法

HTML



<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
  $userinterest = $_POST["userinterest"];

  echo "<ul>";
    foreach ($userinterest as $value){
      echo "<li>".$value."</li>";
    }
  echo "</ul>";
?>

debug



<?php
  phpinfo();
?>

VS Code 套件，根據文件做法到 xdebug 產生 .dll，放在對應位置

按照步驟並更改 php.ini，下圖是 macOS 的

windows

確認安裝：在 phpinfo() 搜尋 xdebug

開始使用

建立並修改 launch.json，注意 port 要與 php.ini 一致

javascript

移至 javascript

時間：2022/5/6

Dos 基操

建立批次檔

常用指令要一直打很麻煩？可以產生批次檔紀錄一連串指令，其實很簡單：

在記事本裡打一些文字
另存成 .bat 檔
- BAT 是 Batch 的簡寫，因此 Batch Language 就是批次檔所使用的語法

例如：我想快速用 VS Code 開啟專案目錄，我可以在 C 槽底下新增 web111a.bat，內容是：



d:
cd d:\htdocs\www\web111a
code .

使用時不想印出指令請在 .bat 加上這行：


@echo off

測試一下（因為命令提示字元預設一進入工作目錄會在 C:\Users\使用者，所以其實只要輸入 w + tab，就會自動完成）


web111a.bat

特別注意：

~~記得加上環境變數~~

~~每次更動 .bat 需重新開啟命令提示字元~~

剛經測試更動 .bat 好像不用重開，甚至不需要加環境變數

CSS

color

emmet 縮寫是 c

hex


color: #001122; 相同時也可以縮寫成 #012

rgb
- 0~255
- 0~100%
```
color: rgb(255, 255, 255);
```
rgba
- rgb 的基準上加上 alpha 值（透明度）
```
color: rgba(0, 0, 0, .5);
```
hsl
- Hue(色相) 0~360
- Saturation(飽合度) 0~100%
- Lightness(亮度) 0~100%
- 圖源：W3schools Colors HSL
hsla
- hsl 的基準上加上 alpha 值（透明度）
背單字吧
- 依據瀏覽器預設有上百種
```
color: Salmon;
```

text-decoration

emmet 縮寫是 td




text-decoration: none;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;

text-align

emmet 縮寫是 ta


text-align: center;
text-align: right;

font-family

emmet 縮寫是 ff


font-family: serif;

雲端字體

使用方法(google font為例)

找到你要的字體：Noto Sans TC

選擇樣式：

選擇匯入方式 link 或是 @import ：

放到你的專案中：



<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.

某些瀏覽器需要前綴才能正常使用，非必要勿試。




@font-face {
  font-family: "name";
  src: <路徑>;
}

font-size

emmet 縮寫是 fz

px 絕對單位
% 相對單位
em 相對單位，以父層文字大小為基準
rem 相對單位，相對於 root
- 例如：網站的文字大小是 14px，rem 的尺寸就是以 14px 為基準，

圖源：on my Codepen

補充：實際展示 EM 與 REM 的差異

font-style

emmet 縮寫是 fs


font-style: italic;
font-style: normal;

letter-spacing

emmet 縮寫是 ls



/* 字距 */
letter-spacing: 20px;
letter-spacing: normal;

word-spacing

emmet 縮寫是 ws




/* 處理文字間空白字元的尺寸，英文單字間的距離，
 * 因為中文文章中其實沒甚麼發生空白字機會，所以不會用在中文字上，
 * 不過中文字之間如果有空白還是可以用 word-spacing */
word-spacing: 20px;

line-height

emmet 縮寫是 lh


/* 行距 */
line-height: 1.8;

驗收：表單

首頁
聯絡我
自我介紹
ssh.com.tw:6080

上課時間：2022/5/10

background





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 混用，讓背景圖上一層遮罩效果。


background-image: repeating-linear-gradient(45deg, #FFDD3F, transparent 1px), url();
/* 記得設定高度 */

Codepen

calc()


height: calc(100% - 80px) /* 注意加減號前後要有空格 */

linear-gradient


linear-gradient(red, blue) /* 預設0~100%，由上到下 */

確認 css style 瀏覽器支援度

caniuse

盒子模型

懶得寫請參考另一篇筆記

內距 padding
外距 margin
邊 border

常理來說盒子大小為 width + border + padding，如果你懶得算，請下 box-sizing: border-box，盒子大小會變成 width + border + padding + margin

pseudo class

垂直置中

line-height 調整成元素高度，但只能一行文字的情況
inline-block + vertical-align: middle
- 原理請參考：CSS深入理解vertical-align和line-height的基友关系
- 限制：要有兩個以上高度
- 所有元素都要 inline-block
- 父元素 font-size: 0、子元素 font-size: 14px
- 所有子元素 overflow: hidden
table
- 父元素：table
- 子元素：table-cell + vertical-align: middle
position
- 父元素：relative
- 子元素：absolute + 上下左右 0 + margin: auto
:heavy_check_mark:flex
float
- float
- clean

float 排版遇到的問題：父元素不會被撐出高度

給父元素加高度
父元素加上 overflow: auto

:heavy_check_mark:clearfix





.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.

結論：請用 flex

refer

時間：2022/5/17

驗收：動態連結頁面

題目要求

我懶得打

老師的參考寫法



<a href="./index.php?page=index">index</a>
<a href="./index.php?page=introduce">introduce</a>
<a href="./index.php?page=contact">contact</a>













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 有使用步驟，建議用 VSCode 的 jscdn 套件抓，省時

切版練習

ASUS 官網

注意事項

html5 語意化標籤
擴大連結點擊區域
加上 hover 效果提升使用者體驗

CSS selector

id

靜態樣式請不要用 id 選擇器



#id {
  
}

class



.class {
  
}

屬性選擇器

有點多有點複雜有點難懂，請看金魚都懂 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權重一覽

html tag：1分
class：10分
id：100分
inline style：1000分
!important：10000分

除非你清楚知道你在幹嘛，不然不要用 id、inlin style、!important 來寫樣式，實務上 html tag 也應盡量避免

驗收：hover

時間： 2022/5/18
遠距教學建制

CSS reset

meyerweb CSS reset

image RWD in grid system

codepen

object-fit: cover 的出現是為了解決用 img tag 也做到照片縮放，以前要用 background-image，img 才可以寫 alt 對 SEO 比較友好。

當 object-fit 設為 cover 就是讓圖片等比例自適應父元素高寬，所以父元素寬高都要設定。

不能使用 max-width 取代 width 因為圖片如果不夠寬（或太長） max-width 會限制 object-fit: cover 要放大的寬度。






img {
  display: block; /* reset 用 */
  width: 100%;
  height: 240px;
  object-fit: cover;
}

ref：新手前端也不該犯的錯：圖片變形

:root

自定義變數

除非你清楚知道你在幹嘛，不然不要用

Bootstrap 4 之後開始導入 :root，可參照以下 source code

建立變數









/*建立全域變數*/
:root {
  --csscoke-red: #f00;
}

/*套用變數*/
.section-item {
  color: var( --csscoke-red );
}

CSScoke 講解：:root 根目錄選取器 - 叫你阿爸出來講

全域變數跟區域變數我該怎麼選擇

其實這問題要看一下你的變數要用在哪個範疇，通常我們是整個系統或是網頁都會統一共用的，像是色彩或是某些物件的尺寸或是框線，這一類的都很適合使用全域變數，相對的，如果你只是一部分會用到的話，像是某些模組組件，這樣你就很適合使用區域變數來設定

軟體工程師學習地圖

我懶得打，可參考 @KC1090901 筆記

前端
後端
資料庫
版控
全端
- 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

漢堡選單

codepen

按鈕樣式

使用 font awesome 再搭配 ::before、::after

acitve 時漢堡變成叉叉

media query

什麼時候漢堡出現、選單消失

display 的轉變

從 none 到 block，無法使用轉場(transition)效果，建議用

max-height
visibility + height
scaleY

任何跟 height 有關都必須寫死，auto 或 100% 不能用

我個人都沒有試成功

media query in JS

希望換成大螢幕要自動關閉選單

Checking Media Queries With jQuery




if (window.matchMedia('(max-width: 768px)').matches)
{
    // do functionality on screens smaller than 768px
}

時間：2022/5/31

javascript

還有一些未整理的自學筆記

起手式


document.wirte("hello world");

引用方式

<script></script>
<script src="script.js"></script>
<a href="javascript:alert(Message)">click</a>

onclick

行內


<button onclick="alert('meow')">click</button>

DOM



document.getElementById("id");
document.getElementByClass("class");
document.getElementByTagName("tagname");

一般會將 javascript 寫在最下面，但也可以要求等待視窗載入完畢在執行 JS





window.onload = function() {
  // js code 
  a = document.getElementById("id");
  console.log(a);
}

JQuery

差別，參考 jquery中的$("#id")与document.getElementById("id")的区别：

javascript 取得 HTML DOM
jQuery 取得 jQuery Object

jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法

引入資源

JQuery CDN

補充：CDN 是指一種透過網際網路互相連接的電腦網路系統，利用最靠近每位使用者的伺服器，更快、更可靠地將音樂、圖片、影片、應用程式及其他檔案傳送給使用者，來提供高效能、可擴展性及低成本的網路內容傳遞給使用者。


<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
提供方法串接




$("對象").方法1.方法2
// 當對象是 selector 時需要雙引號 ""
$("selector").方法1
$(document).方法1

綁定事件.ready()











// 3 種寫法都是一樣的意思
jQuery(document).ready(function(){
  
});

$(document).ready(function(){
});

$(function(){
  
});

特別注意，此時 a 會是 jQuery 的一個物件





$(function(){
  a = $("#id");
  
  console.log(a);
});

如果想要取到值

.text() 物件底下所有純文字值
.html() 物件底下所有值，包含 html tag
.val() 物件 tag 內 value 值

HTML code








<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()的示範





$(function(){
  a = $("#edu");

  console.log(a.html());
})

輸出

JS code：.text()的示範





$(function(){
  a = $("#edu");

  console.log(a.text());
})

輸出

NVM(Node Version Manager)

安裝 nvm 環境，Node.js 開發者必學（Windows、Mac 均適用）

可以輕鬆切換不同版本的 Node.js
使用特定 Node.js 作為預設啟用環境
安裝不同的套件至特定的版本上

起手式：node.js 官網

:arrow_down_small: nodeDemo.js














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}/`);
});

執行看看


node nodeDemo.js

輸出

瀏覽器支援

瀏覽器快取

清除瀏覽器快取：瀏覽器 :arrow_right: 更多工具 :arrow_right: 清除瀏覽資料
暴力重整：ctrl + F5
html 中引入 css、js 時，路徑後多加上一個 ? 讓瀏覽器判斷為不同網址而重載


<script src="./all.js?"></script>

Debug

condole.log();
alert();
chrome 中的 source 可以下中斷點

前端資料儲存

cookie
session
html5 webStorage
- localStorage
- sessionStorage

斷言 `Console.assert()`

如果斷言（assertion）為非（false），主控台會顯示錯誤訊息；如果斷言為是（true），則不發生任何事。


console.assert(asserment, msg);

輸出

`console.clear()`

驗收：成績級距














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("優等");
  }
}




















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

物件











const obj = {
  Ming: {
    name: "大明",
  },
  Jay: {
    name: "杰倫",
  },
  Mitour: {
    name: "我",
  }
}

要如何取值？

for…in



for (const key in obj) {
  console.log(obj[key]);
}

輸出

改成陣列的取法

for…of







for (let item of Object.values(obj)) {
  console.log(item);
}

for (let str of "ES6可以正確的取出中文") {
  console.log(str);
}

輸出

陣列也可以搭配 forEach

Object.values()




Object.values(obj).forEach(item => {
  console.log(item)
})

Object.keys()



Object.keys(obj).forEach(key => {
  console.log(key, obj[key])
})

輸出

驗收

1~10 奇數和
9x9

tips




// 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);


// convert an array into an object
let numObj = Object.assign({}, numArr);


// get object values
Object.values(numObj)

Array & List

Array 通常會放同一型別資料，List 則是各種型別都可以放

上課影片

4/12 環境建置與虛擬主機架設（直播）

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

4/13 環境建置與虛擬主機架設（直播）

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

HTML, CSS, JavaScript, jQuery, WoT

Course Intro

基本觀念

dos基本操作

XAMPP

VS Code

推薦套件

Settings Sync

Markdown 系列

Picgo

Picgo

install

Git

command

XAMPP Virual host

DNS

虛擬機

安裝Virtual Box

安裝 OS

初始設定

建立D槽

Guest Additions

建立虛擬機與本機共享

網路卡

本機端用 SSH 登入虛擬機

設定免密碼連線

add key

主機別名

補充說明：nano

補充說明：遠端複製

驗收：SSH 連線及 XAMPP

VS Code extension

確認路徑

HTML

編輯器

DOM 樹

簡介

Emmet

起手式

註解

假文產生器

假圖產生器

項目

Box model

table

文字

上傳到伺服器

補充

Connect to back-end

非同步請求

HTTP 請求

method

HTML FROM

撰寫 PHP

常用寫法

debug

開始使用

javascript

Dos 基操

建立批次檔

CSS

color

text-decoration

text-align

font-family

雲端字體

使用方法(google font為例)

@font-face

font-size

font-style

letter-spacing

word-spacing

line-height

驗收：表單

background

calc()

linear-gradient

確認 css style 瀏覽器支援度

盒子模型

pseudo class

`@font-face`

斷言 `Console.assert()`

`console.clear()`