1. เริ่มต้นเขียน JavaScript

1/16/2558 0 Comments

การเขียน JavaScript จะต้องมีความรู้การเขียน HTML พอควร เพราะ JavaScript จะทำงานควบคู่กับ HTML ดังนั้นก่อนจะเริ่มต้นเรียน JavaScript ควรจะทำความเข้าใจกับ HTML ก่อน

การเขียน JavaScript จะเขียนภายใน script tag โดยจะเขียนฝังไว้ใน HTML เลยหรือนำเข้าจากไฟล์ .js ภายนอกก็ได้ ตัวอย่างการเขียนฝังใน HTML

<html>
 <head>
  <title></title>
 </head>
 <body>
  <script type="text/javascript">
   document.write("The date is " + (new Date()).toDateString());
  </script>
 </body>
</html>

สังเกตที่ บรรทัด 6-8

ผลลัพของตัวอย่างด้านบน

ตัวอย่างการเขียนโดยนำเข้าจากไฟล์ภายนอก

<html>
 <head>
  <title>Script Example</title>
  <-- Example of inefficient script positioning -->
  <script type="text/javascript" src="file1.js"></script>
  <script type="text/javascript" src="file2.js"></script>
  <link rel="stylesheet" type="text/css" href="styles.css">
 </head>
 <body>
  <p>Hello world!</p>
 </body>
</html>

สังเกตที่ บรรทัด 5-6

สังเกต script tag จะมี type="text/javascript" ซึ่งใส่ก็ได้ไม่ใส่ก็ได้ เพราะสำหรับ HTML5 script tag จะถูก Default เป็น JavaScript อยู่แล้ว

คำแนะนำ

จาก Script ตัวอย่างที่ผ่านมา จะเขียน JavaScript ไว้ใน head tag ของ HTML ซึ่งการทำงานของเว็บไซต์เมื่อเจอ script tag หากมี src attribute โปรแกมจะหยุดรอ แล้วโหลดไฟล์จากภายนอกและประมวลผลทันทีแล้วจึงจะทำงานต่อไป ถึงแม้ว่าโปรแกรมจะทำงานได้อย่างปกติ แต่การเขียนวิธีนี้จะทำให้เกิดปัญหาทางด้านความเร็วของ website เพราะต้องเสียเวลาหยุดรอโหลดและประมวลผลไฟล์ JavaScript เสร็จก่อนทำให้หน้าเว็ปเป็นหน้าขาวๆ

ดังนั้น หากไม่จำเป็นต้องให้ JavaScript ประมวลผลก่อน ควรแทรก script tag ไว้ข้างล่างสุดของ body tag ดังตัวอย่างด้านล่างบรรทัด 9-11 เพื่อให้เนื้อหาของเว็ปไซต์โหลดเสร็จก่อนแล้วโหลดและประมวลผลไฟล์ JavaScript ทำให้อย่างน้อยผู้ใช้ได้เห็นหน้าเว็ปเกิดการโหลดไม่ใช่หน้าขาวๆ เปล่าๆ

<html>
 <head>
  <title>Script Example</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
 </head>
 <body>
  <p>Hello world!</p>
  <-- Example of recommended script positioning -->
  <script type="text/javascript" src="file1.js"></script>
  <script type="text/javascript" src="file2.js"></script>
  <script type="text/javascript" src="file3.js"></script>
 </body>
</html>

เท่านี้เองก็ได้รู้ตำแหน่งของการเขียน JavaScript แล้วพบกันใหม่ในบทความถัดไปเน้ออ ..

1. เริ่มต้นเขียน JavaScript