Javascript 學習日記｜Iris 程式小白 ＃1

Javascript在紅什麼？快跟著網頁設計小白🙆‍♀一起速速了解JS吧！

這篇文章專給…

• 彷彿聽過，對JS似曾相似，但從來沒有真正了解
• 愛用Google analytics & inbound marketing (Hubspot) 的行銷人
• 覺得跟前端工程師錯頻，想了解一下他們星球的語言
• 想學互動式網頁設計，創建屬於自己的第一個網頁天堂

📌 首先，先來介紹什麼是Javascript？

簡言之，Javascript是個可以讓網頁變得更活潑的程式語言。

所謂的活潑是指JS能讓靜態的網頁活起來，常見的設計有圖片動態滾輪、動畫效果、互動式對畫框、多媒體應用等等 （想想我們平常逛網站有的那些功能～其實JS就在你我身邊🙈）

講到這…有一點輪廓了嗎？（不管有沒有繼續下去就更懂了唷😝！）

📣快速插播📣  Javascript 的豐功偉業 & 2020後前景

Js是目前最多人使用、最火紅的程式語言之一，它截至2019為止已經連續8年獲得「最普遍被使用的程式語言 The Most Commonly Used Programming Language」頭銜，2020年最新統計有69.7%的專業工程師都選擇使用它。除此之外，你所熟知國內外的各大網站（95%以上）的網頁都是使用Js設計的唷！例如：Google, Youtube, Facebook, Wikipedia, Yahoo!, Amazon, Twitter…  意不意外呀🤩～  由此可見，想要加入互動、流動元素進到你的網頁，JS絕對是主流中的主流！

由上圖可知，JS討論度、話題性逐年上升（爬升趨勢不可擋💪）

📌 接著，我們再來看看Javascript這個語言有什麼特性～

（類比我們學英文要學文法🙌）

• 直譯式 interpreted language

所謂「直譯式」用白話文表示即：你講一句（輸入程式碼） 機器同時理解一句

由此可見，這樣的對答方式是一來一往、動態式的。

相較於一次把話說完的編譯語言 (compiled language)，雖然效率沒這麼高，但是對於除bug能力，直譯就明顯佔上風。

🦖恐龍君小補充：像是JS這樣的直譯式語言是無法單獨作業的，其背後需要像是HTML的執行環境 (execution context)支撐，之後會逐一介紹唷！

• 物件導向

不同於傳統的程式編寫思維：由單一指令與函數所結合，物件導向是用抽象概念（類別class）來描述具體的物件（object），將程式視為一群物件交互作用所形成，具有封裝、 繼承、多型等的特性。

有興趣可以點擊這裡繼續看唷！

• 用戶端語言 client-side scripting🖊

aka. 瀏覽器（用戶）能執行的語言  

相對於伺服器端，用戶端語言主要是將程式碼直接傳送到用戶端，交由用戶端(通常是瀏覽器) 執行的語言。

• 輕巧型腳本script語言💬

通常由一連串的文字命令所組成。語法、結構簡單，容易操作，可以想成以文字為主的表示方式，正因為以文字表示，學習起來也較為容易、輕鬆。

除此之外，如果你對於JS有多一點認識，你應該知道現在Js能用的框架已有百百種🧠

舉凡Vue、React、Angular（目前三強鼎立），其他至少還有20多種😳

但～先別想太多！ 小白我🙆‍♀會在接下來的篇章會好好帶你全面了解一番！

📌 說了這麼多，Javascript能做些什麼呢？

如上所提，JS可用於動態網頁設計（Carousel幻燈片、List Boxes下拉式選單等等）但其實它的能力遠高於寫網頁，它更可用於設計遊戲、手機版和網頁版Apps、撰寫小裝置、繪圖、機器學習、AI、物聯網 (IoT) 應用等等

最後最後～幫大家科普一下JS的歷史

讓你似懂非懂有能跟身邊工程師賣弄玄虛😎

愛聽歷史快靠攏！😍

Javascript始於1995年，由一個叫做Brendan Eich的的科學腦所創建。Eich當時受紅極一時的網景通訊（Netscape Communications）所僱，希望他在短時間內可以生出以Java為根本、融合Scheme的新語言。說來有趣，在他創建JS時其實和在趕死線的我們一樣，接到案子後埋頭苦幹、拼死拼活，終於在10天內完成（大家給他拍拍手👏 

那話說，為什麼網景要沒事雇Eich來寫一個介於中間的語言呢？

原因說來單純，就是當時網景和主要競爭對手微軟（Microsoft) 在打瀏覽器大戰，當時有鑒於微軟IE（Internet Explorer) 來勢洶洶，又靜態網頁難有突破，網景高層才決意另開發新語言，欲結合當時合作夥伴––昇陽（Sun Microsyetems）的Java技術和擁有擁有活潑、輕巧為特性的Scheme語言創造一個強大、彈性的新語言。

這樣講大家有更了解嗎～ 如果覺得獲益良多歡迎繼續關注我們！

有任何問題都不吝指教，大家一起學習、一起進步喲🗣

那～我們下禮拜見嘍！👋👋👋

references 參考資料: 

1. https://www.rakacreative.com/blog/web-design-development/javascript/
2. https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript
3. https://www.lighthouselabs.ca/blog/10-popular-websites-built-using-javascript
4. https://skillcrush.com/blog/what-is-a-javascript-framework/#whatis
5. https://auth0.com/blog/a-brief-history-of-javascript/
6. https://www.bitdegree.org/tutorials/what-is-javascript-used-for/#What_Is_JavaScript_Used_For