---
# System prepended metadata

title: Web I
tags: [2023 NISRA Enlightened]

---

Web I by 101
===

:::danger
請愛惜共筆，勿進行惡意刪減
:::

:::info
課程講義：https://slides.com/x10101/deck-3d136b/fullscreen
:::

## Web?

- **W**orld **W**ide **W**eb
- 全球資訊網
- 一個系統，以網際網路為連結核心，將所有的「網頁」與「網站」連結在一起

### 如何看到網頁
- 長甚麼樣子
    - HTML
- 在哪裡
    - URL
- 如何拿
    - HTTP

### URL
**U**niform **R**esource **L**ocator
- 統一資料定位符
- 通稱網址
- 標示網頁所在位址
- 格式
    - 協定類型~protocol~：//伺服器位址~IP\ addr~:埠號~port~/檔案路徑~path~/檔名?查詢~query~#片段ID~fragment~
- 範例：
    `https://nisra.net:433/tmp/test.php?q=1#1`

### HTTP

- **H**yper**T**ext **T**ransfer **P**rotocol
- 超文本傳輸協定
- 一種用來傳輸超媒體文件（像是HTML文件）的應用層協定
- 規範了客戶端請求與伺服器回應的標準
- 明文傳遞訊息
### HTTPS
- https = http + SSL / TLS
- 通訊過程使用 SSL/TLS 進行加密
- 在 HTTP 之上定義相對安全的資料傳輸方法

### 資料請求方式


| 方式   | 說明               |
| ------ | ------------------ |
| GET    | 取得目標資源       |
| POST   | 提交指定資源的實體 |
| HEAD   | 取得標頭           |
| PUT    | 替換目標資源       |
| DELETE |       刪除目標資源             |
|    CONNECT    |    和指定資源標明的伺服器之間,建立隧道      |
|   OPPTIONS     |      取得資源通訊方式              |
|    TRACE    |        用於測試或診斷            |

#### GET
- 向伺服器請求資料
- 請求資料附在 URL 上
- 格式：
    網址？參數名稱1=參數內容1&參數名稱2=參數內容2
#### POST
- 詳細資料傳輸存放在網頁的**封包**當中
- 封包**攔截**仍然能查詢到相關資訊
- 相較GET已經無法直接用URL取得資料

#### HTTP狀態碼

| 狀態碼 | 說明       |
| ------ | ---------- |
| 1xx    | 訊息提示   |
| 2xx    | 請求成功   |
| 3xx    | 重新導向   |
| 4xx    | 用戶端錯誤 |
| 5xx    | 伺服器錯誤 |

- [HTTP Status Code](https://http.cat/)

#### cookies
- 記錄使用者狀態資料
    - e.g., 用戶是否已登入
- 儲存在用戶端
- 用於解決 HTTP 協定的網路互動問題
    > HTTP為無狀態協定
> 明文 -> 攔截+偽造

### 前端 & 後端

![](https://hackmd.io/_uploads/S1D68C962.png)

#### 前端
- 介面
- HTML
    - 骨架
- CSS
    - 皮膚、衣服
- JS
    - 肌肉
#### 後端
- 後臺管理、資料庫
- PHP、Python

## HTML
- HyperTextMarkup Language
- 超文本標記語言
    > **不是程式語言**
- 描述並定義網頁內容

### 元素
- 標籤 + 內容

### 結構
```xml=
<!DOCTYPE html>
<html>
  <head>
    <title>標籤</title>
  </head>
  <body>
 	<p>阿巴巴巴</p>
  </body>
</html>
```

### \<head> 常用標籤

| 標籤       |            功能            |
| ---------- |:--------------------------:|
| `<title>`  |            標題            |
| `<meta>`   | 描述屬性，e.g., 搜索關鍵字 |
| `<script>` |         JavaScript         |
| `<style>`  |            CSS             |

### \<body> 常用標籤  

```xml=
<h1>h1標題</h1>
<h6>h6標題</h6>
<img src = "圖片路徑" alt = "替代文字" width = "圖片寬度" height = "圖片高度">
<a href = "連結位址" target = "開啟方式" title = "提示文字">有超連結功能的文字或圖片</a>
<!-- 我是註釋 -->
<p>
  一般文字
  <br>
  <b>文字加粗</b>
  <br>
  <em>定義重點文字</em>
  <br>
  <i>斜體</i>
  <br>
  <strong>定義加重語氣</strong>
  <br>
  <small>定義小號文字</small>
  <br>
  定義<sub>下標字</sub>
  <br>
  定義<sup>上標字</sup>
  <br>
  <ins>定義插入字</ins>
  <br>
  <del>定義刪除字</del>
</p>
```
- 清單
```xml=
<ol>
  <li>有序清單1</li>
  <li>有序清單2</li>
  <li>有序清單3</li>
</ol>
<ul>
  <li>無序清單1</li>
  <li>無序清單2</li>
  <li>無序清單3</li>
</ul>
```
- 表格
```xml=
<table>
  <th>MON</th>
  <th>TUE</th>
  <th>WED</th>
  <th>THU</th>
  <th>FRI</th>
  <th>SAT</th>
  <th>SUN</th>
  <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
  </tr>
  <tr>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
      <td>13</td>
      <td>14</td>
  </tr>
</table>
```
- 表單
    - 通常用來和後端互動
```xml=
<form action="送出目的地" method="資料傳送方式">
    <!--表單內容-->
    <input type="表單功能" name="資料名稱" value="預設值" placeholder="提示訊息">
</form>
```
- 區塊 `<div></div>`
- 行內元素：`<span></span>`

### Lab 0x0 製作名片網站
- 姓名
- 頭像
- 自我介紹
- 問你是誰的輸入框
- 寫Hi的按鈕

:::spoiler 範例
```xml=
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>101</title>
</head>
<body>
    <h1>101</h1>
    <img src="https://i.pinimg.com/originals/99/bb/33/99bb33d0439bc0cf3808fb41b61fdc8a.png" height="150px">
    <p>輔大資工大二</p>
    <h2>Interest</h2>
    <ul>
        <li>畫畫</li>
        <li>看漫畫</li>
        <li>看小說</li>
        <li>手作</li>
    </ul>
    <h2>Who are u?</h2>
    <input id = "Name" type = "text" placeholder = "Name">
    <input type = "submit" value = "Hi!">
</body>
</html>
```
:::

## CSS
- Cascading StyleSheets
- 階層樣式表
- 風格頁面語言，讓你妳的 HTML 元素套上不同樣式

### 引入方式

- inline style 內聯樣式
``` xml=
<h1 style="color: blue"></h1>
```
- internal style 內部樣式表
``` xml =
<head>
  <style>
    /* CSS內容 */
  </style>
</head>
```
- external style 外部樣式表
```xml!
<link rel="stylesheet" type="text/css" href="檔案位置">
```
- 優先順序：inline > internal > external
    - e.g., 同樣都是設定 `<h1>` 的顏色，最後網頁顯示的會是 inline 設定的顏色

### Selector 選擇器

#### id 選擇器

- 將標有特定 id 的 HTML 元素指定特定的樣式
- 寫法為 `#選擇器名稱`，在html中以"id"表示
    - 可以隨便取，但避免數字開頭
```css=
#size{
  font-size: 25px;
}
```

#### class 選擇器
- 定義一組的元素樣式，可以在多個元素中使用
- 在 HTML 中以 "class" 表示，CSS 文檔中以 "." 小數點表示
```css=
.title{
    color: red;
}
```

### 常用屬性
#### 背景
- 背景顏色
    - `background-color: black;`
- 背景圖片
    - `background-image: url("圖片位址");`
#### 文本
- 顏色 
    - `color: white;`
- 字體 
    - `font-family : sans-serif;`
- 字體大小 
    - `font-size: 20px;`
- 對齊方式 
    - `text-align: right;`
[更多CSS屬性可以看這邊](https://hackmd.io/@x10/Skv_K4Xks)
#### 好玩的特效
```css=
#pic{
    width: 150px;
    height: 150px;
    border-radius: 100px;
    position: absolute; /*絕對定位*/
    left: 25%;
    animation-name: MovePic; /*動畫名稱*/
    animation-duration: 3s; /*動畫時間*/
    animation-delay: 0s; /*動畫延遲時間*/
    animation-iteration-count: infinite; /*動畫重複次數，infinite 無限重複*/
}

@keyframes MovePic{ /*@keyframe 自訂動畫名稱、屬性變化*/
    from{
        transform:rotate(0deg);
        /*transfom讓元素可以被平移、旋轉、縮放和傾斜*/
        /*rotate() 旋轉*/
        /*deg 旋轉角度*/
    }
    to{
        transform:rotate(360deg);
    }
}
```

### Lab 0x1 幫網頁穿衣服
- 可以更改背景、文字顏色等

:::spoiler 範例
html
```xml=
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href = "main_0x1.css">
    <title>101</title>
</head>
<body>
    <div class = "card">
        <h1>101</h1>
        <div style = "height: 150px;">
            <img id = "pic" src="https://i.pinimg.com/originals/99/bb/33/99bb33d0439bc0cf3808fb41b61fdc8a.png">
        </div>
        <p>輔大資工大二</p>
        <h2>Interest</h2>
        <ul>
            <li>畫畫</li>
            <li>看漫畫</li>
            <li>看小說</li>
            <li>手作</li>
        </ul>
        <h2>Who are u?</h2>
        <input id = "Name" type = "text" placeholder = "Name">
        <input type = "submit" value = "Hi!">
    </div>
</body>
</html>
```

css
```css=
.card {
    background-color: rgb(235, 225, 211);
    height: 500px;
    width: 300px;
    margin: auto;
    position: relative;
    text-align: center;
}

.card ul {
    margin: 0 25%;
}

.card li {
    text-align: left;
}

#pic{
    width: 150px;
    height: 150px;
    border-radius: 100px;
    position: absolute; /*絕對定位*/
    left: 25%;
    animation-name: MovePic; /*動畫名稱*/
    animation-duration: 3s; /*動畫時間*/
    animation-delay: 0s; /*動畫延遲時間*/
    animation-iteration-count: infinite; /*動畫重複次數，infinite 無限重複*/
}

@keyframes MovePic{ /*@keyframe 自訂動畫名稱、屬性變化*/
    from{
        transform:rotate(0deg);
        /*transfom讓元素可以被平移、旋轉、縮放和傾斜*/
        /*rotate() 旋轉*/
        /*deg 旋轉角度*/
    }
    to{
        transform:rotate(360deg);
    }
}
```
:::

## JavaScript
- 直譯程式語言
- 可以直接嵌入HTML中
- 讓網頁與使用者互動
- 動態型別

### 寫在哪
- 寫在HTML裡
``` xml=
<html>
  <head>
    <script>
      // 你的JScode
	</script>
  </head>
  <body>
  </body>
</html>
```

- 外部檔案引入
```javascript=
<head>
    <script src="檔案位置"></script>
</head>
```

### 文法
- 輸出
```javascript=
alert("Hello JS!")
console.log("hello js!")
```

- 宣告變數
``` javascript=
var num = 123 // 數字
var str ="888"// or '666', 字串
var arr = [123,"apple"] // 陣列
var bool = true // or false, 布林
```
- 運算子
    - 四則運算：＋,－,＊,／
    - 取餘數：％
    - 次方：**
    - 比較：> , < , >= , <= , !=
    - 嚴格比較： === , !===
    - 邏輯：&& , ||

- 註解
```javascript=
// 單行註解
/* 
 多行註解
 */
```

- 函式
```javascript=
function add(x,y){
    return x+y;
}
```
#### on 事件
- onclick
    - 當滑鼠點擊時
- onerorr
    - 當出現error時(載入失敗)
- onload
    - 當載入成功時
### DOM
- Document Object Model 文檔物件模型
- 一種讓文件以樹狀結構表示的模型
- 瀏覽器會將 HTML 解析為 DOM 樣式
```javascript=
document.getElementById("id-name");
document.getElementByClassName("class-name");
document.getElementByTagName("tag-name");

var test = document.getElementById("id-name");
// 用 test 去接物件

test.innerText = "I've been changed"
// 最常使用，獲取或設置元素內的文字
test.innerHTML
// 獲取或設置元素包含的 HTML 標籤
```

### Lab 0x2 讓名片打招呼
- 輸入名字
- 按下Hi的按鈕
- 跳出Hi！XXX

:::spoiler 範例
html
```xml=
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href = "main_0x2.css">
    <script src = "hello_0x2.js"></script>
    <title>101</title>
</head>
<body>
    <div class = "card">
        <h1>101</h1>
        <div style = "height: 150px;">
            <img id = "pic" src="https://i.pinimg.com/originals/99/bb/33/99bb33d0439bc0cf3808fb41b61fdc8a.png">
        </div>
        <p>輔大資工大二</p>
        <h2>Interest</h2>
        <ul>
            <li>畫畫</li>
            <li>看漫畫</li>
            <li>看小說</li>
            <li>手作</li>
        </ul>
        <h2>Who are u?</h2>
        <input id = "Name" type = "text" placeholder = "Name">
        <input type = "submit" value = "Hi!" onclick = "showHello()">
    </div>
    <div id = "hello" style = "visibility: hidden;">
        <p>Hello, <span id = "unknow"></span>.</p>
    </div>
</body>
</html>
```

css
```css=
.card {
    background-color: rgb(235, 225, 211);
    height: 500px;
    width: 300px;
    margin: auto;
    position: relative;
    text-align: center;
}

.card ul {
    margin: 0 25%;
}

.card li {
    text-align: left;
}

#hello {
    width: 300px;
    height: 50px;
    position: relative;
    border-radius: 10px;
    margin: 10px auto 30px auto;
    background-color: rgb(70, 70, 70);
    color: white;
    font-family: "comic sans ms";
}

#hello p {
    text-align: center;
    line-height: 50px;
}

#pic{
    width: 150px;
    height: 150px;
    border-radius: 100px;
    position: absolute; /*絕對定位*/
    left: 25%;
    animation-name: MovePic; /*動畫名稱*/
    animation-duration: 3s; /*動畫時間*/
    animation-delay: 0s; /*動畫延遲時間*/
    animation-iteration-count: infinite; /*動畫重複次數，infinite 無限重複*/
}

@keyframes MovePic{ /*@keyframe 自訂動畫名稱、屬性變化*/
    from{
        transform:rotate(0deg);
        /*transfom讓元素可以被平移、旋轉、縮放和傾斜*/
        /*rotate() 旋轉*/
        /*deg 旋轉角度*/
    }
    to{
        transform:rotate(360deg);
    }
}
```

js
```javascript=
function showHello () {
    var name = document.getElementById ("Name");
    document.getElementById("hello").style.visibility = "visible";
    document.getElementById("unknow").innerText = name.value;
}
```
:::



