前端連載

[前端連載] 了解網頁發展的脈絡(下)——什麼是AJAX,以及jQuery、CSS3、HTML5簡單介紹

簡介

好不容易寫到了網頁脈絡的最後一篇了,可喜可賀!還記得上次我們提到了javascript的發展史,看他怎麼和jscript競爭,爾後發展成為網頁前端通用的唯一語言。隨著網頁越來越發達,又發展出了framework,來幫助我們快速以及有效率的開發網頁。

而framework的出現,代表網頁開始複雜化,也標誌著一個前端和後端的分野,因為我們的網頁已經漸漸複雜到不是一個人能專精所有事的階段了(當然還是有神人級的人物,南京通北京,前端通後端,但畢竟這種人在少數)。

今天要來介紹一下,在這個分野之後,到底出現了什麼樣新潮的前端技術,有感到一絲興奮嗎?

開始囉!

1990年代, 除了沒一村的爸爸和媽媽在一個不小心的夜晚把我生產出來外,也是網路剛開始發展的年代。而在這個草創的時候,伺服器處理任何一個使用者的請求時,都需要「請client端在重新載入一次」。

我對你什麼時候出生沒有興趣,不過我想知道你提這段歷史是為什麼?

很好,開始提出為什麼,就是進步的開始!在這裡,我想先請你把捲軸停在這裡,然後筆電闔上,想想看,這樣到底會出什麼問題?

讓我思考一下……

好的,既然你筆電都闔上了,那請你順便幫我去巷口的麵店和飲料店買個午餐。記住,牛肉麵不要牛肉,木瓜牛奶不要木瓜。謝囉^^

可憐的公務員

在地表上的某一處,有一個國家,他們的公務員都非常的勤奮。雖然非常的勤奮,但國家給他們提供的系統不太好,造成辛苦的公務員很多的麻煩。

有一天,住在這個國家的小明,要去地政事務所,循問一些有關土地的資料。

不好意思,我想請問一下「克強路1段」50坪的公告地價是多少?

好的,等我印一下資料給你!

辛苦的公務人員開始工作了,最後小明得到一張資料表如下:


日期:西元3000年
申請時間:2/30
申請人:小明
.
.
.
地段:克強路1段
公告地價:1坪1億
.
.
.
注意1:以下的公告地價是非常浮動的,很可能今天的地價和明天的地價完全不一樣,所以如果你家被以一坪1塊2毛5徵收,請不要怪罪於國家。就好像投資基金有賺有賠,公告地價也是有賺有賠的!
注意2:……
注意3:……
.
.
注意50:……


辛勤的公務人員工作完了,把這份資料表拿給你,整張資料表共有100行那麼多,而小明需要的資料只有其中的13行。小明看到這份資料,感到非常的傻眼,不過看著公務員滿額頭的汗水,他還是好聲好氣的繼續問:

不好意思,我想請問一下「大學路1001號」50坪的公告地價是多少?

好的,等我印一下資料給你!

辛苦的公務員又開始工作了,過沒多久,小明又拿到了一份和之前那份有87%像(真的是87%,不能再多了,不信你自己算)的資料表。小明感到非常的絕望,因為他是一個炒地皮大戶,他還要再繼續問50個地段。或許這是該國抑制炒地皮的一個手段,我想中華民國的政府或許該試試看這個方法,記得每一張都要87%像,還可以順便嘲諷一下炒地皮的人。

根據以上的故事,我想各位應該能想到,如果每次都重載的話,會造成client和server多大的麻煩。不管問的資料多或少,都要把整份的html檔傳給client端一次,即便我們只是想要詢問一個小小的欄位而已。所以聰明的科學家們,想出了一個新的解決辦法,叫做AJAX(Asynchronous JavaScript and XML),字面上翻就是「非同步的JavaScript和XML」。

AJAX——公務人員的福音

自從AJAX這個技術出現後,每次小明一問,公務人員回給他的資料就是那不一樣的13%。他感到非常的高興,不是因為他不用再被嘲諷,而是因為他可以炒更多的地皮了。

回到網路來說,自從AJAX這個技術在2000年前後開始大量使用後,client再也不用因為要更新一塊小小的資訊,就重新整理整個頁面。他所要做的事就是利用AJAX技術去問server它想要的資料,然後利用javascript動態更新即可。多麼神奇的一個技術啊!

AJAX縮寫中A的由來,代表著非同步載入,也就是說資料不是和html檔在最一開始一起載入的,而是想要資料的話,才去跟server拿取回來填在client端。至於XML,則是資料交換的格式。雖然AJAX中的X代表著XML,不過目前最通用的資料交換格式則是JSON,因為它非常的簡單!

AJAX受到大家的歡迎,主要是由Gmail開端的。想像一下,你在使用Gmail的時候,有因為點一個郵件,就重新整理整個畫面嗎?沒有,這是AJAX的功勞!

jQuery——目前最受歡迎的JavaScript函式庫

有了這個東西,終於能讓元件像火影忍者一樣飛來飛去了!

jQuery是一個javascript的library(關於library的定義,請回到第4講),在2006年的時候釋出1.0版,而現在(2016/4/23)已經出到了v2.2.3。在網頁前端中,如果不是要製做很麻煩的應用程式,多半還是使用jQuery這個library。根據統計,在全球10000個存取最高的網站中,有65%都使用這個library,原因無他,因為他特好用。如果要開發小小的網頁,不用懷疑,他也絕對是首選!關於這個library有多麼的好用,從下面的程式碼來看,就能明白!

我們要在一個tag為div,id為hello的標籤上,給他加上一個偵聽器(這些名詞不懂關係,之後的連載就會介紹了,如果有之後的話啦呵呵)。如果我們點擊該div,他就會把原本的數字加1。那麼使用原生的 javascript 和 jQuery 的程式碼如下(有$符號的是jquery的):

點擊runpen就可以看到一切,也可以按右上角點到我的codepen去,給我一個愛心XD

比較一下,就會發現jquery的語法簡單和好學程度是完勝原生的javascript啊。當然這不是說原生javascript不好,只是用起來比較不方便。雖然在最近,jQuery的聲勢有下滑的趨勢,很多人反而會選擇原生的javascript來用。不過對於初學者而言,我認為還是直接進jQuery,會比較好上手一點。

此外,因為jQuery實在是太風行、太方便了,因此專門給jQuery做的plugin也是一籮筐,有興趣的同學在學到這裡的時候,可以查一下。

CSS3——新世代的CSS標準

CSS有分版本號,而最新的是CSS3,代表的是第3版,在2011年6月7日由W3C(World Wide Web Consortium)發布為新的標準。第3版支援了很多前一版沒有的功能,而我在這邊示範一下CSS3新加入的動畫效果。有了這個,苦命的工程師大大,可以使用簡單的CSS,就把一個簡單的動畫給刻出來。下面實作一個簡單的功能,把滑鼠放到格子上,格子的就會變得不透明,而且伸長。以下是程式碼:

當然還有很多的功能,這邊不一一講,只是有了CSS3,前端工程師的彈性又更大了。

嘿,你是要玩多久,我要開始講HTML5了啦!

HTML5——新世代的HTML標準

HTML5,也就是HTML標準第5版,於2014年10月,由距離上一版的HTML4.01標準,已經有15年之久。在HTML5出現之前,我們苦命的瀏覽器常常要掛很多的外掛程式,例如flash之類的。如果有同學的瀏覽器沒有安裝這些程式,那就無法觀看這個效果。而HTML5的主要目的就是為了解決這個問題。

直接來動手操作吧!

  1. 打開youtube,隨便點一個喜歡的影片。
  2. chrome的話,按下Ctrl+Shift+c。
  3. 滑鼠滑影片上左鍵點一下,接著就會看到chrome的developer tool,已經refer到該影片的DOM元素
  4. 觀察一下,便可以發現他的程式碼如<video>……</video>
  5. 或者不要這麼麻煩,直接對影片點右鍵,就會看到HTML5的相關資訊。

試完youtube後,你可以去試一下很多網站的影片播放器(咳咳咳……清個痰),應該會發現不少都不是html5標準的,那很有可能他還是使用舊時代的技術——flash。

html5-youtube

前端framework

其實想了很久,還是決定簡單提一下這個。雖然 jQuery 好用易學,但對於開發大型專案而言,這種鬆散的結構,是一大致命傷。對於專案的管理,也不是非常有效率。因此,出現了一些前端的framework,來解決這個問題,例如:AngularJs、Backbone.js、Ember.js、Knockout.js。

不過因為這些framework對於小專而言,用起來不見得那麼必要,所以我只簡單的提一下,讓各位知道有這些東西的存在就好。這是屬於進階的技術,才在剛起步,不會也沒關係。

此外,Facebook推出的ReactJs(沒錯,就是那個火紅到爆,前端的大大都在談的ReactJs),嚴格來說,應該算是一個library。不過他的功能,大體來說,也是為了開發和前端架構上的方便而產生的。只不過他的核心概念和上述的framework有很大的不同。

結語

所以關於網頁發展的歷史,大致上就到這裡結束了。網路草創年代的靜態網頁因為無法更新資料,而出現了動態網頁。為了方便client和server溝通,出現了REST API的設計。MVC三兄弟也在這時,從各種網路架構中,脫穎而出。接著,我們又談到javascript的歷史,還有framework到底是什麼。最後這一講,談到了AJAX、CSS3、HTML5的應用。而library的部分,也介紹了jQuery,並簡單提到了前端的framework,以及紅到爆的ReactJs。如此一來,也算是功德圓滿啦!

所以我可以開始做出飛來飛去的東西了嗎?

我想還沒到時候,不過我認為你可以先來罐Red Bull。

為什麼?

因為Red Bull給你一對翅膀:)

附錄

Native JavaScript vs jQuery

[前端連載] 了解網頁發展的脈絡(上)——從靜態網頁到動態網頁到REST API

[前端連載] 了解網頁發展的脈絡(中)——JavaScript 歷史 和 Framework 是什麼?

粉絲專頁

https://www.facebook.com/noootownnotes/

2 thoughts on “[前端連載] 了解網頁發展的脈絡(下)——什麼是AJAX,以及jQuery、CSS3、HTML5簡單介紹

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s