常見誤解

A: 你擅長什麼程式語言？

B: 我擅長 HTML、CSS

這樣就會被發現不專業了...

HTML

超文件標籤語言 (Hypertext Markup Language)

它只是個標籤語言...

CSS

層疊樣式表 (Cascading Style Sheets)

它只是個樣式語言...

程式語言的定義

可以用這個語言模擬圖靈機 (Turing machine)，那這個語言就是圖靈完全 (Turing completeness)

可以應付一切複雜計算

如何選擇程式語言？

有些時候是看領域的

這一系列的主軸會是

JavaScript

JavaScript 橫跨各平台

• Website Frontend & Backend
• Mobile App
• Desktop App
• Hardware Control
• 幾乎大部份你想得到的事...

而且瀏覽器就可以執行！

現場示範一些沒有邏輯的 code

Network

做網站的第一件事是
先簡單了解網路

LAN – Local Area Network

• 乙太網路 (Ethernet)
• Wi-Fi

封包?!

由於無法一次傳完，拆成 10b ~ 幾 kb 的大小..

現實世界的網路模型

必須好好了解的是..
TCP/IP 跟建在其上面的 HTTP!

IP 就像是電腦的地址

是由 4 個 0~255 的數字組成的，稱為 IPv4

例如：140.112.0.159

有些特定的 IP：

127.0.0.1 指向自己電腦

10.x.x.x、192.168.x.x 是區域網路 IP

訊息是怎麼正確傳到正確地址？

就像轉公文一樣

海外->台灣->教育部->台大->學務處

崩潰...地址背不起來

所以有了 DNS (Domain Name System) 也就是 網域名稱系統

• www.facebook.com
• www.google.com
• www.twitter.com

台大就可以直接轉到羅斯福路四段，以後換地址也不怕寄錯

除了 IP 還有什麼？！

每部電腦都有 65536 個洞...

不對...是 port

一台電腦要連接令一台電腦一定要有 IP 跟 port

例如：254.166.2.177:80

254.166.2.177 就是 IP

80 就是 port

終於..可以講講瀏覽器的運作方式

1. 打開瀏覽器輸入網址

如果只有 IP 或網址而沒有給 port

HTTP 的預設 port 是 80

HTTPS 的預設 port 是 443

2.查詢 DNS

首先會先看過 hosts 檔

再來看看有沒有之前暫存的查詢記錄

都沒有才發出請求去問 DNS Server

3.往目標 IP 發封包

經過一個個的 Router

最後到達目的

TCP 的協定下要是有掉封包會重傳

4.到達目標 IP 所在那台電腦

找到他對應的 port 跟他接通

並把那台腦要傳回來的資料反向發送

如果是一般的網頁這時就發 HTML 回去

5.藉由一樣的機制再回到原來發送的電腦

把東西顯示在畫面上

例如顯示 HTML

所以前端跟後端的差別是？

前端

在使用者瀏覽器跑的程式就是前端

後端

在伺服器電腦跑的程式就是後端