從另一個方向介紹網頁、HTML、CSS與JavaScript。

這次要介紹的是網頁與HTML

會選擇這個主題是因為發現一部分的初階網站工程師或甚至是進階

已經有辦法架設網站了，但對於一些概念始終都只說得出函式庫的名稱或是函數名稱。

程式可能是對的，但是邏輯上總是有很多黑盒子的感覺。

因此這裡小編將嘗試使用最單純的方式來解釋一些容易被當成常識的部分

並且讓所謂的前端網頁、後端程式、作業系統與電腦硬體這幾個看起來不相關的部分連起來。

當然這樣的範圍無法一篇文章就講完。所以就先從瀏覽器與網頁開始

 

 

基本上，網頁就是檔案，或者更精確的說一個網頁是由很多個檔案組成。

開啟網頁需要使用程式去開啟，這個程式就是所謂的瀏覽器(Browser)，

而現在流行的瀏覽器有Chrome, Safari, Firefox, Edge(IE)等等。

 

 

 

 

所以就像是使用Office Word去開啟.doc 或 .docx檔一樣，我們必須使用瀏覽器才能正確的開啟 .html檔。

而且還有一個特性跟Word一樣，就是不同的瀏覽器支援度不一樣。

像是現在很多公司為了省錢使用LibreOffice一樣，用過的都覺得痛苦，

開啟word檔一樣的檔案，LibreOffice跟Word顯示出來的排版有時就是不一樣。

 

 

 

 

瀏覽器就是一個顯示特定格式檔案的顯示程式，而且它除了可以顯示自己電腦裡面的檔案外，

它還可以跟別的電腦要檔案去顯示。

執行方式就是透過網路硬體裝置連上對方的電腦，將檔案下載到自己的電腦裡，再顯示出來。

這聽起來好像很理所當然，不值得分享。

不過正所謂魔鬼藏在細節裡，有一個問題小編常被人問到：

某某網站會直接偷取其他網站內容當成自己的內容，有可能不讓他偷嗎？

 

 

這個答案很可惜的是：

無法，但是有可能可以讓他覺得「很麻煩」，

或是讓技術上他無法克服(假設他沒有特別針對或是技術力比較弱)

 

 

因為網際網路的根本就是把整個網頁檔案連同圖片送給觀看的人或程式下載，

觀看的人或程式再把所有的網頁與資源使用瀏覽器解析後顯示。

所以是兩個步驟，

 

 

如果無法接受這個概念可能是因為這兩件事都是由同一個程式(瀏覽器)依照順序執行。

瀏覽器在你提供網址之後，透過硬體裝置(以前可能叫做網卡)，會到該網址背後所對應的電腦下載目標檔案。

當然提供檔案的電腦是有權利決定提供怎樣的檔案給對方下載，或是決定不給下載。

一般口語上我們會叫擁有瀏覽器且發出下載要求(Request)的電腦叫做用戶端(Client)，

提供檔案電腦的叫做伺服器端(Server)

如果用戶端成功獲得了伺服器端所提供的檔案，它就會把資料暫存起來，可能存在硬碟空間，也可能存在Ram，

每個瀏覽器都有可能不一樣。然後瀏覽器把那些檔案(.html檔與其他資源)依照檔案設定的內容顯示出來，

就成了我們看到的網頁。

 

 

 

網頁的目的大多是提供資訊，例如新聞，youtube影片。

但是資訊的排版方式是一件很重要的事情，就像實體的報紙一樣，標題要比較大，

上面要顯示什麼左邊要顯示什麼，廣告底色之類的，這些一般來說資訊提供者都會想要設定。

所以就像是.doc 可以排版一樣，.html檔也可以排版。

但是他比較麻煩一點，Word檔用滑鼠拉一拉就可以排版了。

.html則必須要用HTML這個格式語法來表示。

所以所謂的HTML語法，就是設定網頁排版的一種被"規定"語法。

 

 

雖然HTML是一種給瀏覽器看的語法規定，但製造瀏覽器並不需要許可。

所以真正決定行為的還是瀏覽器這隻程式與其作者。

無論你的語法寫得多標準，全部都遵照語法規範，

只要瀏覽器說你錯、看不懂，效果還是不會顯現正常。

就算是現在這個網路時代，瀏覽器的行為還是沒有完全統一。

更別說瀏覽器的程式如果不怕麻煩的話，是可以自己寫出來(需要花幾年則就看個人功力)。

 

 

瀏覽器的行為其中一部分是遵照W3C協會所制訂的，但並沒有強制性，

並不是不照規範走就不能發行瀏覽器程式。

以HTML來說，目前最新的規範建議為HTML5，

新的瀏覽器大多都支援，不過舊的瀏覽器因為已停止更新所以很多不支援。

這也是為何Windows 的預設瀏覽器 IE 惡名昭彰的原因，

現在如果使用IE6 ~ 8去很多新的網站會發現都不支援，會跑版很亂。

(網站要支援到多低的IE版本可以參照微軟作業系統的預設，以Windows XP後期的SP2 64bit來說預設是IE 7

最後可以升級到IE 8。Windows 7 預設是IE 8，可以升級到 IE 11，資料來源微軟)。

 

 

 

除了HTML外，通常會一起提到的還有CSS與JavaScript，他們也都是有個別的規範。

CSS在原本只是HTML的狀態描述，例如描寫文字顏色、樣式，是寫在HTML裡面，稱作style。

但後來隨著功能越來越複雜而獨立出來有了自己的規範，最新的版本稱作CSS 3。

JavaScript則與Java沒有關係，據稱是因為要沾Java這隻程式語言的光所以才這樣取名混淆視聽。

JavaScript主要是用來動態改變網站格式編排，或是執行瀏覽器提供的功能(瀏覽器如果沒提供，語法正確也沒用)。

正確的規範其實叫做ECMAScript，而JavaScript大致上是依照ECMAScript的規範去製作，

早年在微軟還有另外一個名稱叫做jScript，也是依照ECMAScript，JavaScript則是微軟對手網景公司製作的。

後來JavaScript贏了，所以jScript這名稱就消失與JavaScript融合再一起。

現行瀏覽器支援的ECMAScript版本為第5版，縮寫為ES5。

雖然比較新的一些前端工具提倡使用第6版ES6，但因為大多瀏覽器還不支援，

所以需要前置編譯器轉換語法到ES6來相容。

 

 

 

 

幾年前，很多人極度的痛恨IE系列，因為前面提到的JScript的語法特殊，做同樣一件事情，寫法與別人就是不同。

在還沒進入網路時代的時候，瀏覽器只是「作業系統」裡的一個基本程式，他還沒那麼多功能。

所以最大的作業系統商微軟擁有定義什麼叫做「對的瀏覽器行為」，不甩其他競爭對手。

所以Windows 的預設瀏覽器 IE 在古早的版本總是有很多獨特的行為。

後來網路時代，很多網路公司越來越大，例如Google, Amazon, Yahoo之類的。

開始有發言權，W3C所協商的HTML標準與其他標準才比較落實。

(當然如果真的翻歷史的話，很早就有定義HTML標準，

但就是環保協定一樣，大公司不參加你也沒轍。大公司總是喜歡當規格制定者，

像是10年前的Sony，狂出不相容的硬體規格，想利用規格控制市場。

詳情可見Wiki HTML、瀏覽器大戰、W3C)

 

 

這時候就要提到jQuery，jQuery就是那時候的產物，

它的其中一個概念就是建立了一個程式端的中間層，

讓所有的瀏覽器在同一種jQuery語法下做出同樣的動作。

這樣就不需要特別去判斷不同的瀏覽器

但是近年來因為微軟停止舊系統的支援，所以IE9以前的瀏覽器越來越少。

Windows 7成主流，可以支援到IE 11。 所以這一兩年很多開發者為了效能都開始拋棄jQuery。

 

 

接著回到我們的實務面，如何讓讓別人無法惡意偷取我們的網站。

我們用最基礎的概念做簡單的分析。

1. 如果我們知道他是誰。

   要知道對方是誰，可以用用戶端的IP地址查或是瀏覽器所發出來的要求去查。

   如果他的IP都是固定的，當然可以直接擋IP，不過如果IP不是固定的就擋不到。

   如果看瀏覽器發出的要求(Request)去擋則更不切實際，因為儘管Request多半會帶些用戶端的系統資訊

   但那是用戶端可以自己設定的。 這些偷盜的人士可能會使用自己的程式而非一般的瀏覽器。

   (可以把它想成自製的瀏覽器，或是最近常見的爬蟲程式)

 

2. 我們不知道他是誰

   a. 可以先將文章資源加密，然後再解開。因為解開是用戶端瀏覽器幫忙解

      (通常是使用JavaScript)，

      但意義上就是把鑰匙與鎖一起丟給用戶端，讓我們的丟給用戶端的程式去解，

      所以只要找到鑰匙，要解開也是很容易。

      但如果它的程式無法執行JavaScript，他就無法得到解密過的資源。

 

   b. 所有的網頁資源用JavaScipt 取得

      一樣是可以過濾掉無法跑JavaScipt的爬蟲。曾聽說個案例，某台灣中小型數據公司，

      不曉得自己為何抓不到Instagram的資源，而為無法分析數據。

      在Instagram使用的技術中，所有的資源都是開啟網頁後再執行JavaScript去抓真正的資料，

      因此爬蟲沒辦法執行JavaScript是無法抓到資料的。

 

 

  這都是最單純的技術敘述，所以可想而知還是有很多種不同的方法可以用來防守，

  本文只是藉此提供個契機，讓大家暸解有時一些很單純的基本程式常識正是所缺少的那一段。

   

 

 

 

 

最後，如果你喜歡我們的文章，別忘了到我們的FB粉絲團按讚喔!!