【隨堂筆記】網路概論與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):主要有 TCPUDP 的協議
    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>之間)






你可能感興趣的文章

MTR04_0916

MTR04_0916

Day3 讓我見識一下吧,終端機的性能

Day3 讓我見識一下吧,終端機的性能

ASP.NET Core Web API 入門教學 - 使用AutoMapper更新資料

ASP.NET Core Web API 入門教學 - 使用AutoMapper更新資料






留言討論