必須知道的 JavaScript 入門基礎

在目前 JavaScript 的發展趨勢來看,確實是一門讓人容易頭痛的語言,但是要想學會又要熟練運用這個語言真的要下一大功夫。

學 Javascript 跟學 CSS 完全是兩碼子事,Javascript 比較偏邏輯概念,人腦知道怎麼思考,我們要自己寫程式,寫的程式要讓電腦可以看得懂,需自己創意出開發流程。

學 Javascript 要用什麼編輯器工具開發呢?怎麼執行呢?以下為你介紹。

呼叫 JavaScript 程式碼

有兩種嵌入 JavaScript 程式碼的方式。

嵌入式,直接在頁面中包含 JavaScript 程式碼。

<script>
  alert("必須知道的 JavaScript 入門基礎");  
</script>

外聯式,即包含外部檔案,透過 src 屬性的 url 引入檔案。

在 <head></head>,裡面寫入<script src="檔案位置"></script> 就可以引入
假設檔案叫 main.js,則寫法如下:

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

按照慣例,所有 <script> 程式碼都應該放在 <head> 中,但這樣會有一個問題,就是當頁面載入完畢時,才能呈現頁面內容,但從使用者體驗角度來看,如果頁面有很多需要載入,就會出現讓使用者以為頁面沒內容或等待一會才會出現的問題,如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="js/main1.js"></script>
  <script src="js/main2.js"></script>
  <title>Document</title>
</head>
<body>
  <!-- 待繪製的內容 -->
</body>
</html>

為了解決這問題,在現代瀏覽器中,一般會改為放在 <body> 元素的最後面,如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 待繪製的內容 -->
  
  <script src="js/main1.js"></script>
  <script src="js/main2.js"></script>
</body>
</html>

<noscript> 如何用

<noscript> 在瀏覽器不支援或禁用使用者端指令時很有用,如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 待繪製的內容 -->
  
  <script src="js/main1.js"></script>
  <script src="js/main2.js"></script>
  <noscript>
    <p>此頁面不支援(禁用) JavaScript。</p>
  </noscript>
</body>
</html>

寫出第一個「Hello world」範例程式

要讓 JavaScript 跟 HTML 和 CSS 合作無間的話,可能還要費一些功夫。但慢慢來,一步一步學,我們來寫一個最簡單的範例就是「Hello world」!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    alert("Hello world");
  </script>
</body>
</html>

畫面就會跳出一個視窗如下:

必須知道的 JavaScript 入門基礎

如果有看到這個視窗就代表成功囉 🙂


Javascript 主要目的

  1. 可以控制瀏覽器網頁內容
  2. 可以透過 js,來去跟外部伺服器要資料,或者是更新資料

參考資料

更多 JavaScript 基礎可以看這裡:
https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/JavaScript_basics

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *