Web I - HackMD

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; } ``` :::