แสดงบทความที่มีป้ายกำกับ javascript แสดงบทความทั้งหมด

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

การเขียน 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
Read More

2. JavaScript การแจ้งเตือนและการแสดงผล Hello World

1. alert การแจ้งเตือน : 

<script>
 alert('hello world!!');
</script>

2. confirm การยืนยัน : 

<script>
 if(confirm('hello world?')) 
  alert('yes');
 else 
  alert('no');
</script>

3. prompt การโต้ตอบ : 

<script>
 var you_say = prompt('hello world?', 'hi');
 alert('you say '+ you_say);
</script>

3. prompt การโต้ตอบ : 

<script>
 var you_say = prompt('hello world?', 'hi');
 alert('you say '+ you_say);
</script>

4. console การแสดงผลสำหรับนักพัฒนา กด [Ctrl + Shift + J] สำหรับ Google Chrome : 

<script>
 console.log('hello world....');
</script>
2. JavaScript การแจ้งเตือนและการแสดงผล Hello World
Read More
สมัครสมาชิก: บทความ (Atom)