前端的主力-HTML, JavaScript與CSS-1

第 11 屆 iThome 鐵人賽

DAY 10

Modern Web

網站前端後端與API系列第 10 篇

11th鐵人賽

BigQ

2019-09-26 23:58:02

915 瀏覽

JavasSript到底是前端語言還是後端語言？

JavaScrips(JS)怎麼一直提到，不是說NodeJS是用JavaScript寫的，前後端框架套件ExpressJS不也都是JS寫的嗎？怎麼現在又變成前端語言了呢？

時間回到NodeJS出現之前

在NodeJS出現之前，JS是一套前端語言，主要的功用是撰寫HTML或網頁所需要的功能或介面，介面通常是互動部分，當然也可以寫出排版、視覺等效果。編譯JS的主流平台是瀏覽器，所以當時學習JS的緣由就是希望能讓網頁前端有更好的功能體驗。

NodeJS出現之後

NodeJS出現之後，JS可以由NodeJS進行編譯，而NodeJS以JS為主要語言撰寫(但NodeJS本身以C++為底建構的)，可以建構後端部分，也就是說，前後端都能夠由JS撰寫而成，NodeJS剛出現的時候，在網路界是個很突破的概念，學習JS的人數也開始迅速暴漲。而前後端是個概念，基本上後端部分的伺服器、資料庫都能夠由JS建構。

程式語言發展一向如此，越來越多人投入的語言，就有越多學習資源公開(程式界為世界一片淨土，人人不藏私)，也就是為什麼現今的NPM這麼多的資源可以使用，讓我們都可以站在巨人的肩膀上往前走。

認識JS後，我們討論前端的主要架構-HTML

HTML

對任何網頁按下右鍵->檢視原始碼，會看到的語言八九不離十就是HTML。HTML為前端網頁主要建構的語言，一個網頁的架構仰賴HTML的元件組合而成，HTML主要由文件物件模型（Document Object Model, DOM）用<DOM元素>表示DOM元素開始，</DOM元素>表示DOM元素表示結束。
舉例來說，仔細看所有網頁幾乎都是像index.ejs內的起始與結束：

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>

第一行的用意是宣告以下使用HTML語言執行。
第二行與最後一行，能夠看到<html></html>包覆全部的內容，這就是一個DOM物件。
第三行與第六行，能夠看到<head></head>也是一個DOM物件，這個DOM物件在之內，我們發現，縮排(最前面空格或tab)代表了DOM物件的階層，這是一個重要的概念，了解了也比較能讀懂HTML語言的規則。
<html></html>內主要就是由<head></head>與</body組成，習慣上放屬性、環境相關的內容，例如，網頁標題、網頁屬性資料、備註資料、引用資料.....等等都會放在head裡面。
以上面index.ejs為例

<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />

兩行分別就是設定網頁標題與引用style.css文件，引用的文件在這份HTML內都可以操作使用。
而主要放置網站主要內容，例如架構、文字、按鈕.....等，內容部分不包含排版與大多互動功能，做出漂亮的版面與樣式，習慣上使用CSS撰寫，而功能方面實踐方面使用JS撰寫。今天我們認識了JS與HTML接下來，我們會介紹應用實例。