Javascript在紅什麼？快跟著網頁設計小白🙆♀一起速速了解JS吧！
這篇文章專給…
- 彷彿聽過，對JS似曾相似，但從來沒有真正了解
- 愛用Google analytics & inbound marketing (Hubspot) 的行銷人
- 覺得跟前端工程師錯頻，想了解一下他們星球的語言
- 想學互動式網頁設計，創建屬於自己的第一個網頁天堂
📌 首先，在多了解JS之前，我們先來認識html🖥吧！
大家一定聽過HTML，但到底什麼是HTML？它又跟JS有什麼關係呢？
說文解字：HTML代表 Hyper Text Markup Language
中文叫「超文字標記語言」
簡言之， HTML是將文字貼上標籤，使之變成超文字的語言 （超文字不僅限於超連結歐！）
咳）有聽沒有懂🙈
別擔心～ 小白🙆♀當時也是啥都沒聽懂，但給我個機會讓我細細解釋吧🙏
Step 1: 把HTML想成一個包山包海的大框架
Step 2: 在框架之中可以加入各種你喜歡的小元素
（譬如：段落、圖片、表格、大小寫等等）
就這麼簡單！HTML是網頁的基礎、架構，它的存在使各個元素能夠有系統地呈現👌
🧐這裡給你個小任務，點擊滑鼠右鍵，選擇「檢視網頁原始碼」🧐
有沒有發現到在新的分頁又讓人頭暈腦脹的一行行英文碼～
這些就是建構這個網站需要使用的程式碼唷！仔細觀察一下HTML出現在哪裡吧😆～（等下為你解答🙌）
聽到這裡，聰明如你 應該已經想到HTML跟JS的關聯了吧？
對！沒錯👍 HTML這個大框架除了圖文，也能夠乘載JS的網頁動態設計語法（和CSS網頁編排）。換言之，JS能寫在HTML中，使網頁更活潑、有互動性
另外，HTML這種語法能廣泛的被現行瀏覽器解讀（以目前的瀏覽器都有支援 HTML, HTML5 則部分支援），也就是說，寫好的HTML，假如沒有bug，都能完美地顯示在網頁瀏覽器上（⚠注意：顯示方式會因為瀏覽器的不同而有差異，就像大家對一句話的理解會有差異一樣），所以不難想像HTML這麼夯的原因了吧！
🦖恐龍君小補充：
剛剛提的CSS是Cascading Style Sheets的縮寫，顧名思義，它是網頁中的fashion king，超有型的它能夠為網頁中的文字上色、加上全新字體等等，沒有它就沒有style，網頁也就沒有人想看嘍🙈
小白🙆♀💬：目前HTML出到第五版了唷！就是名號響當當的HTML5🏆
📌 瞭解了HTML，要怎麼最簡單的操作Javascript呢？（看完就可以跟朋友臭屁嘍😎
快來跟我一起Go go!!!💪💪💪
Step 1: 建立一個屬於你的程式編寫環境，小白🙆♀我用的是線上編輯器Codepen，好處是不需要額外下載些什麼，只要登入你的帳號，隨時在哪裡都能輕易寫程式！當然你想要選擇什麼樣的環境都是可以的～（看自己喜好嘍😉
Step 2: 跟著下面的demo一起打起來（不操作也是行的～看懂重要👌，不過之後如果真的有心學還是建議動手操作歐！）
<html>
<head>
<script>
alert(“come and learn js”);
</script>
</head>
<body>
I love the world
</body>
</html>
大家有看懂嗎？我來解釋一下😆
- <html>是剛剛提及的架構，順著這個架構底下追加標題<head>和身體<body> ，其中斜槓/ 代表結束，有頭一定要有尾，所以說有<head>就有</head>
- <script>的部分就是我們的JS，現在我示範的是JS嵌入head的例子（當然也可嵌入body）
- script之中我們選擇插入alert，也就是彈出視窗，而彈出的內容我設定為come and learn js，括號””代表我設定要彈出的是「字串」
- 最後在body裡頭，我寫了一行I love the world，這行相對單純，僅僅是讓顯示器顯示該行文字
Step 3: 操作完，應該會看到螢幕跳出「come and learn js」，並且在顯示板中看到「I love the world」，如果都看到了👀，表示你超棒！恭喜你第一次JS就上手🤙🤙🤙
如此就是最基礎的JS操作，利用JS做彈跳字幕，如果再加入更多設定，就能在特定情況下（點擊特定按鈕）讓字幕跳出，達到互動的效果，這樣有沒有更有概念了呢～😀
📌 最後～🎉大家最期待的Javascript的術語集🎉
到底需要知道些什麼才能跟工程師大大們溝通呢～直接五個交給你！
- 變數 variable
變數主要用於儲存資料。打個比方，我們可以把變數想成短期識別證（會隨著程式的執行改變），識別證上的身份資料會被儲存於記憶體中，若之後需要找人（找特定資料內容），就可以直接取用（以方便程式做計算和處理）。
- 函數 function
函數是為了各種需要而撰寫，用途與懶人包相似，需要時能快速取用。透過函數訂定可以執行重複性與演算性工作，以提升做事效率，進行更繁複的操作。
- 宣告 Declare
宣告函數是為了「方便」而生，在理解完前提項目後，可進行定義式的「事先宣告」。透過這樣的宣告程式運作流程能夠使事情妥善分配至記憶體與儲存空間，以便日後計算。
- 📚 函式庫 Library📚
函式庫是由一個或多段程式指令包裝而成，使未來重複呼叫特殊物件更為方便。設定的常用代碼片段有利於開發項目中取用，以節省重複撰寫的時間與精力。
- 框架 Framework
若有良好撰寫架構以提供開發，開發流程能更為敏捷（無需重新造輪子就可以組一輛超跑）。因此在擁有先備架構下去撰寫程式，能幫助維護代碼，也能增進架構的延展。
- 應用程式介面 API
簡單來說，API 就是各種軟體之間的溝通橋樑，而那個橋樑我們稱之為介面。像是，我們如果想加熱牛奶，這時候我們就會走到微波爐前，按三下控制面板（介面）後按下「開始加熱」，經過這樣的操作，完成後就會達到我們想要的熱度（結果）。由這樣的比喻理解 API 的概念，應該就會容易許多～
🦜小結：API 用以傳遞、溝通、銜接用戶端（開發者）和龐大資料庫，以讓資料取得更為便捷。
🦖恐龍君小補充：
你也許會聽過W3C (World Wide Web Consortium)，中譯「全球資訊網協會」，它是一個旨在維護網路規則與架構的國際機構，W3C制定了一系列網路開發標
準和準則，以規範網路開發者與內容提供者的網路行為，同時維護網路的長久經營和發展。
這樣說明大家有更了解JS的運作嗎～ 如果覺得獲益良多歡迎繼續關注我們！
有任何問題都不吝指教，大家一起學習、一起進步喲🗣
那～我們下禮拜見嘍！👋👋👋
references 參考資料：
- https://www.fooish.com/javascript/basics.html
- https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Grammar_and_types
- https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/CSS_basics
- https://www.youtube.com/watch?v=gT0Lh1eYk78
- https://www.edx.org/school/w3cx
