【隨堂筆記】網路概論與Web網頁應用基礎

網路背後原理：
(1) 發出網路請求到輸入網址：瀏覽器輸入網址（ex. www.google.com ）
(2) DNS 網域解析：將 www.google.com 找出背後對應的 IP 位置 xxx.xxx.xxx.xxx
(3) 加入 HTTP（網路請求協定）、TCP（確保封包正確傳遞的通訊協定）等協定標頭：確保封包正確傳送，透過路由器發送網路請求到該 IP 位置
(4) 網頁伺服器接收（我們電腦發過去的）請求
(5) 網頁伺服器回傳網頁內容到請求的 IP 位置（我們的電腦）
(6) 我們的電腦拆解封包、標頭等
(7) 解析內容後渲染於瀏覽器上
網際網路（Internet）是由多個網路所組成
網路架構模型：OSI（國際標準組織 & 國際電信聯盟建立）、TCP/IP（學校研究機構）
(1) OSI：涵蓋 7 層模型
(2) TCP/IP：涵蓋 4 層模型

(來源：第 12 期電腦科學概論 & 程式設計思維入門共學營）
TCP/IP 因為實務上概念較為簡單，因此較為普及。目前許多網路裝置多半參考 TCP/IP 模型架構進行設計。
網路流動方向：

(來源：第 12 期電腦科學概論 & 程式設計思維入門共學營）
(1) 應用層（Application）：和網路相關的網路應用程式和協議
ex. SMTP 信箱、FTP 上傳檔案、HTTP 網路通訊和網頁請求
(2) 傳輸層（Transport）：主要有 TCP、UDP 的協議
TCP 較為可靠 -> 確保發出的封包不會漏掉
UDP 傳輸速度較快 -> 用於不要延遲的應用 ex. 網路影片、串流
(3) 網際網路層（Internet）：IP 協定不用實際透過實體的線路連接只要知道 IP 位置連結不同的裝置，就可以透過路由器傳送封包到指定位址。
(4) 網路介面層（Network Interface）：透過實體線路連結的網路，網路裝置會有實體 MAC 位址。
可以透過終端機 CMD / Terminal...
確認網站是否正常運作：ping （網址名稱）
以 google 為例
```
ping www.google.com
```
查詢網址對應的 IP 位置： nslookup (指定網址)
```
nslookup www.google.com
```
觀看自己電腦目前網路狀況和網路位址：ipconfig /all
HTTP 通訊協定：發出網路請求，而網站伺服器回傳結果的協定
(1) 可以透過發送網路請求來控制網路上的資源操作：
GET：單純請求網站內容（例如瀏覽器輸入網址）
POST：新增資料（提交表單）
PUT：更新所有資料
PATCH：更新特定資料
DELETE：刪除資料
(2) 網路請求的結果會有 status code 方便進行判斷，常見的有：
2xx 代表成功回傳
3xx 代表轉址
4xx 代表瀏覽器端的問題
5xx 代表伺服器端問題
User-Agent：請求標頭（request header）含有能令網路協議同級層（peer）識別發出該用戶代理 (en-US)請求的軟體類型或版本號、該軟體使用的作業系統、還有軟體開發者的字詞串。
參考資料：https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Headers/User-Agent
Web = WWW Web：網際網路（Internet）中目前影響力最大的應用
<補充：其他網際網路應用>
FTP 檔案管理工具、SMTP 電子郵件協定
Web 組成：
(1) HTML（負責內容結構）-> 由標籤、元素組成
```
<標籤 屬性="屬性值">內容</標籤>
```
p.s. 通常 HTML 標籤有其意義，為成對出現，也有非成對出現的 ex. 圖片
更多：https://developer.mozilla.org/zh-TW/docs/Web/HTML
(2) CSS（負責外觀樣式）：層疊樣式表（Cascading Style Sheets, CSS）
```
選取元素 {
  屬性: 屬性值;
}
```
若寫於 HTML 頁面中可以放置於 <head></head> 間，使用 <style></style> 包裹。
更多：https://developer.mozilla.org/zh-TW/docs/Web/CSS
(3) JavaScript（負責邏輯互動）-> 通常需要有宿主環境讓其可以運行，其中瀏覽器就是最大的宿主，也可以透過元素的接口可以操作網頁瀏覽器和 HTML/CSS 網頁元素，產生互動效果
```
// 詢問使用者年齡給定給常數 age
const age = parseInt(prompt('請問你今年幾歲？'));
// 假設 18 歲可以投票
if (age >= 18) {
  alert('恭喜可以投票');
} else {
  alert('sorry, 你還不能投票喔！');
}
```
若寫於 HTML 頁面中通常可以放置於 <body></body> 內部結束前，使用 <script></script> 包裹。（<head></head>之間）

fiona90178

你可能感興趣的文章

留言討論