[Day7] 不懂JavaScript 只好等著被整😔 基本概念篇

2023 iThome 鐵人賽

DAY 7

Software Development

再騙小心沒朋友🥵 用LIFF實作LINE整人工具系列第 7 篇

15th鐵人賽 javascript

lulu_meat

2023-09-21 22:43:18

807 瀏覽

分享至

前兩天講的 HTML、CSS 如果重要程度是10的話，那 JavaScript 的重要程度就是100，沒有 JavaScript 就沒得整人！所以 JavaScript 的篇幅絕對不能像前兩天的 HTML、CSS 一樣精簡，現在就要開始精實的介紹 JavaScript。

JavaScript是什麼?

JavaScript 是一個動態程式語言，可以讓 HTML 網頁具有互動性，像購物網頁的圖片輪播效果、跑馬燈動畫等...。下圖網頁點擊觸發的動畫就是用 JavaScript 做的：

除了讓網頁有互動效果之外，JavaScript 還可以用來串接各大服務的 API(Application Programming Interface)。API 稱為應用程式介面，當需要第三方網頁提供的資料或服務時 (例如: 想在自己網頁上加入Google Map的介面)，就必須去看第三方網頁提供的 API 文件使用 JavaScript 串接 API 。這個整人工具也是利用 LINE 提供的 LIFF API 實現的，而 LIFF API 的串接語言就是JavaScript。
下圖是 LIFF SDK 文件，內容就是用 JavaScript 撰寫：

看到這密密麻麻的程式碼眼睛都麻了ＱＱ　為了要輕鬆看懂　LIFF SDK 文件的內容和成功做出整人工具，只好仔細的講解　JavaScript　這個萬能語言。

JavaScript要寫在哪裡?

JavaScript 可以直接和 HTML 語法寫在一起，也可以用獨立文件的方式將檔案位置嵌在 HTML 文件<script>標籤內。兩種方式都可以，但這邊比較推薦把文件嵌在 HTML 文件中，因為整人工具會用到 LIFF SDK 文件，而且會用到LIFF SDK 的 CDN edge path，也就是這個路徑的檔案會跟著官方改版一起更新，不用手動更換檔案就能享受到官方最新版本的服務。所以不適合用hard code讓 JavaScript 和 HTML 語法直接寫在一起。

直接和 HTML 語法寫在一起

<html>
  <head>
    <title>這是頁籤名稱</title>
  </head>
  <body>
	<script> alert('Hello World!'); </script>
  </body>
</html>

把檔案位置嵌在 HTML 文件中

<html>
  <head>
    <title>這是頁籤名稱</title>
  </head>
  <body>
	<script src="main.js"></script>
  </body>
</html>

用JavaScript產生alert box

如果程式不是純用 JavaScript 來撰寫，而是 HTML + JavaScript，那存檔的副檔名就要用 .html 而非 .js，不然用瀏覽器執行時會出現語法錯誤的錯誤訊息。使用 HTML + JavaScript 產生alert box視窗程式碼如下：

<html>
  <head>
    <title>這是頁籤名稱</title>
  </head>
  <body>
    <h1>這是一個標題</h1>
    <p>這是一段文字</p>
	<script> alert('Hello World!'); </script>
  </body>
</html>

使用Chrome瀏覽器打開index.html執行結果如上圖。

JavaScript的註解

想在 JavaScript 文件加上註解只需要在不想執行的句子前面，加上「//」就可以了。但如果要註解多行句子就必須用「/* JavaScript程式碼 */」來實現，下列程式為 JavaScript 的多行註解：

<html>
  <head>
    <title>這是頁籤名稱</title>
  </head>
  <body>
	<script> 
		/*alert('Hello World!'); 
		alert('Hello World1!'); 
		alert('Hello World2!'); */
	</script>
  </body>
</html>

加上註解後打開　index.html　就不會出現任何alert box視窗。