iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 5
0
自我挑戰組

一步一腳印,探索網頁前端設計之美系列 第 5

第五步 - 靜靜思考,預想可能遭遇事件(Javascript 入門介紹)

  • 分享至 

  • xImage
  •  

各位大家早安,我是喵橘,今天要帶給各位 JavaScript 的基本概念

JavaScript 的歷史

Javascript 是由 NetScape 公司在 1995年所創造的,最初命名為 Mocha,1995年9月在 Netscape Navigator 2.0的 Beta 版中改名為 LiveScript,因為當時與昇陽公司有密切合作關係,最後,同年12月,Netscape Navigator 2.0 Beta 3中部署時被重新命名為 JavaScript 。因為當時 Java 是一個相當熱門的詞語,才會添加上去,但實際上 JavaScript 與 Java 之間並沒有任何關連性,就連程式語法的撰寫風格更是不太一樣。

最近幾年,JavaScript 成為在網頁開發之中相當重要的程式語言,它具有強大的網頁互動功能,所以,除了網頁相關職業要學習外,連數位行銷相關職業都要了解這一塊領域,因為,Google Analytics、SEO、Google Tag Manager 等工具,都會使用到 JavaScript 語法,可能在未來的時代中這技術都是每一個人都要好好掌握。

https://ithelp.ithome.com.tw/upload/images/20190906/20117282DYyGMjf7kT.png

JavaScript 的發展

在 1990年代的後半時期,可以說是 JavaScript 的全盛時期,當時有許多華麗又五彩繽紛的效果,可以由 JavaScript來達成。我就舉例我在小時候學習網頁設計的經驗,我小時候參加電腦相關的夏令營,有學習到網頁相關的設計功能,我特別喜歡跑馬燈的功能,自己就會去上網找尋相關程式碼,讓跑馬燈的文字去四處去亂跑 ; 還有一個印象深刻的功能就是不停點擊的惡作劇彈跳視窗,讓你永遠進不去網頁裡面。只可惜當時這一項技術反而讓網頁過於花俏,不易讓網頁可以順利執行,也讓原始碼內的程式碼雜亂不堪,所以,JavaScript 有一段時期是不太被重視。

到了 2005 年 ,隨著 Ajax (英語:Asynchronous JavaScript and XML)技術的出現,終於有不同的發展方式。 Ajax 是指的是一套綜合多項技術的瀏覽器端網頁開發技術。因為 Ajax的普及,讓 JavaScript 重新振作起來。接下來,到了2014年 HTML5 強勢登場,讓 JavaScript登上另一個高峰。

JavaScript 的面貌

  1. JavaScript 屬於一種腳本語言。
  2. 直譯式語言。
  3. 可應用在不同環境與設備之中。
  4. 由許多功能所建構成。

JavaScript 語法介紹

JavaScript 是使用 script 標籤將程式碼加入進 HTML 文件之中,瀏覽器只要看到 script 標籤就會利用直譯器來執行此程式,格式如下所顯示:

<script>
    docoument.write("我是喵橘");
</script>

通常擺放位置會放置在 HTML 的 body 區域中 ; 但若是執行函式或事件時,就會放置在 HTML 的 head 區域之中,並將呼叫函式或觸發事件的動作加入在 body 的區域之中。

假如要用外部連結的方法,格式如下所顯示:

<script src="script.js"></script>

JavaScript 框架介紹

在最近幾年出現相當多 JavaScript 框架,我就介紹熱門的幾款框架,讓大家可以參考,如下所顯示:

  1. AngularJS

https://ithelp.ithome.com.tw/upload/images/20190906/20117282L1QCr0YZIr.png

  1. React.js

https://ithelp.ithome.com.tw/upload/images/20190906/20117282HyQqwiNmh2.png

  1. Angular2

https://ithelp.ithome.com.tw/upload/images/20190906/201172824FEXpnDT0E.png

  1. Vue.js

https://ithelp.ithome.com.tw/upload/images/20190906/20117282afpNZkMpbO.png

各框架詳細內容在這裡我先不詳談,之後會整理這四種框架之間的優缺點和比較表。

明天預告

今天講解 Javascript 入門介紹,明天會講解 顏色配置相關基礎,非常感謝大家的觀賞。


上一篇
第四步 - 繪製具有色彩的路徑 (CSS入門介紹)
下一篇
第六步 - 第一站,顏色萬花筒,七彩村(顏色配置相關基礎)
系列文
一步一腳印,探索網頁前端設計之美33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言