JavaScript คืออะไร ใช้งานอย่างไร

สวัสดีครับ วันนี้เราจะมาพูดถึงเรื่อง JavaScript กันนะครับ ว่า JavaScript คืออะไร ใช้งานอย่างไร โดยบทความนี้เป็นเพียงบทความเริ่มต้นของการทำความรู้จักกับ JavaScript เท่านั้นนะครับ ไม่ได้ลงลึกถึงรายละเอียดที่ซับซ้อน เนื่องจากเนื้อหาของ JavaScript นั้นมีค่อนข้างเยอะ ในอนาคต หากมีโอกาสก็จะทำการเขียนเพิ่มขึ้นเรื่อยๆ นะครับ สำหรับบทความนี้เรามาเริ่มกันเลยครับ

JavaScript คืออะไร

JavaScript คือ ภาษาคอมพิวเตอร์ภาษาหนึ่งที่มีไว้เพื่อจัดการเอฟเฟต์หรือพฤติกรรมของหน้าเว็บไซต์ นอกเหนือจาก HTML ที่ใช้จัดการเรื่องของเนื้อหาของเว็บและ CSS ที่ใช้จัดการเรื่องของโครงสร้างและดีไซน์ของเว็บ

JavaScript ยังสามารถใช้งานในส่วนของโปรแกรมบนคอมพิวเตอร์และเซิฟเวอร์ ยกตัวอย่างเช่น Node.js หรือในฐานข้อมูลก็สามารถใช้งานได้เช่นกัน เช่น MongoDB และ CouchDB

หมายเหตุ JavaScript ไม่ใช่เดียวกันกับภาษา Java มีความแตกต่างอย่างสิ้นเชิงทั้งในส่วนของคอนเซปท์และการออกแบบ

JavaScript ทำอะไรได้บ้าง

JavaScript สามารถช่วยเราจัดการงานต่างๆ โดยไม่จำเป็นที่จะต้องทำการโหลดหน้าเว็บใหม่ซ้ำๆ หากเราเคยเห็นการกดปุ่ม Button แล้ว ข้อความบางข้อความแสดงผลหรือซ่อนข้อความนั้นโดยไม่จำเป็นต้องโหลดหน้านั้นใหม่อีกครั้ง หรือมีการเปลี่ยนสีของตัวอักษร เปลี่ยนแปลงเนื้อหา นั่นละครับ คือ หน้าเว็บไซต์นั้นๆ ถูกเรียกใช้งานด้วย JavaScript แล้ว หากเราสรุปหน้าที่การทำงานของ JavaScript อย่างคร่าวๆ จะได้ดังนี้

JavaScript สามารถเปลี่ยนเนื้อหา HTML ได้
JavaScript สามารถเปลี่ยนค่าภายใน HTML Attributes ได้
JavaScript สามารถเปลี่ยนสไตล์ CSS ของ HTML ได้
JavaScript สามารถซ่อนส่วน HTML ที่ไม่ต้องการได้
JavaScript สามารถแสดงส่วน HTML ที่ต้องการได้

วิธีการเรียกใช้ JavaScript

เราสามารถเขียนสคริปท์ JavaScript ได้หลายวิธี ได้แก่

วิธีที่ 1. เขียนโค้ด JavaScript ใน HTML โดยอยู่ภายในแท็กเปิด <script> และปิด </script> โดยแท็กดังกล่าวอยู่ภายในช่วงบนของเนื้อหา คือระหว่างแท็กเปิด <head> และปิด </head> หรือจะให้แท็ก <script> อยู่ช่วงท้ายของเนื้อหาก่อนปิดแท็ก </body> ของหน้า HTML ก็ได้

การเรียกใช้งาน JavaScript ระหว่างแท็กเปิด-ปิด <head>

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>

<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

</body>
</html

การเรียกใช้งาน JavaScript ก่อนปิดแท็ก </body>

<!DOCTYPE html>
<html>
<body>

<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
 document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>

วิธีที่ 2. เขียนโค้ด JavaScript ผ่านไฟล์ภายนอก (External Files) ได้ด้วย โดยนามสกุลที่ไฟล์ที่จะต้องทำการบันทึก คือนามสกุล .js วิธีการเรียกไฟล์ดังกล่าวก็ใช้แท็ก <script> เช่นเดียวกัน แต่จะต้องใส่แอตทริบิวต์ src เพื่อทำการระบุว่าจะต้องไปดึงไฟล์ใดมาใช้งาน พร้อมทั้งแจ้งว่าไฟล์ที่เราจะเรียกมาเป็นประเภทใด ทั้งนี้เราสามารถที่จะอ้างอิงผ่านไฟล์ JavaScript ได้ทั้งภายในและภายนอกเว็บไซต์ของเราได้ด้วยนะครับ เช่น เรียกจากโฟลเดอร์ js ในเว็บของเราหรือเเรียกการใช้งาน Google Analytics จากเว็บของ Google Analytics เอง ดังนี้

<script type="text/javascript" async="" src="https://www.google-analytics.com/analytics.js"></script>

ตำแหน่งที่วางเพื่อเรียกใช้ไฟล์ดังกล่าวก็อยู่ในตำแหน่งเดียวกันกับวิธีการก่อนหน้าครับ การเขียนในลักษณะนี้จะช่วยทำให้โค้ดประเภทเดียวกันอยู่กลุ่มเดียวกัน ทำให้ง่ายต่อการแก้ไขทั้งในส่วนของไฟล์ HTML, CSS หรือไฟล์ JavaScript และการเขียนแยกลักษณะนี้จะช่วยเพิ่มความเร็วในการเปิดเว็บไซต์ด้วย

การแสดงผลใน JavaScript

คำสั่งการแสดงผลใน JavaScript นั้นมีหลายแบบด้วยกัน ได้แก่

การแสดงผลโดยการใส่เนื้อหาเข้าไปในส่วนของ HTML วิธีการแสดงผลแบบนี้จะต้องมีการระบุไอดีหรือคลาสที่เป็นเป้าหมายที่เราต้องการให้แสดงผลว่าอยู่ที่ใด ซึ่งจะทำให้ข้อความที่เราต้องการถูกใส่เข้าไป ณ จุดนั้นๆ จากตัวอย่างด้านล่าง จะเป็นการใส่ข้อความ 11 (เกิดจาก 5 บวก 6) ใส่ลงไปที่ไอดีที่ชื่อ demo เป็นต้น

<p id="demo"></p>
<script>
  document.getElementById("demo").innerHTML = 5 + 6;
</script>

การแสดงผลเพื่อเป้าหมายในการทดสอบ โดยใส่ข้อความลงไปใน HTML โดยไม่ต้องทำการระบุไอดี ซึ่งข้อความที่แสดงผลอาจจะทำการลบข้อความ HTML ก่อนหน้าได้

<script>
  document.write(5 + 6);
</script>

การแสดงผลในลักษณะป๊อบอัพ จะเป็นการแสดงผลหรือค่าผ่านหน้าต่างป๊อบอัพ

<script>
   window.alert(5 + 6);
</script>

การแสดงผลผ่านคอนโซลของเบราเซอร์ ก็เป็นอีกการแสดงผลที่ใช้บ่อย เพื่อทำการทดสอบค่าที่ได้จากโค้ดที่เราเขียน ทั้งนี้เราจะสามารถตรวจสอบค่าได้ เราจะต้องทำการเปิดคอนโซลของเบราเซอร์ด้วยคำสั่ง Ctrl + Shift + I และเปิดไปที่แท็บ Console ครับ

<script>
   console.log(5 + 6);
</script>

การเขียนประโยคใน JavaScript

โค้ดใน JavaScript นั้น จะประกอบไปด้วย Values, Operators, Expressions, Keywords และ Comments ขึ้นอยู่กับการเขียนของเราครับ เช่น หากเราต้องการเขียนประโยคที่บอกให้เบราเซอร์เขียนคำว่า Hello Dolly ไปใส่ภายในส่วนของ HTML ที่มีไอดี id=”demo” เราจะเขียนได้ดังนี้

document.getElementById("demo").innerHTML = "Hello Dolly.";

โดยหากเรามาดูข้อกำหนดหลักๆ ของการเขียนประโยคใน JavaScript จะสรุปคร่าวๆ ได้แก่

ประโยคของ JavaScript นั้นจะลงท้ายด้วย Semicolons ( ; ) เพื่อทำการแบ่งแยกประโยคแต่ละประโยคออกจากกัน
JavaScript จะไม่สนใจพื่นที่ว่างที่เป็น white space
เราสามารถแบ่งบรรทัดในการเขียนโค้ดได้ ในกรณีที่มีประโยคเกินกว่า 80 คำขึ้นไป
เราสามารถทำการจัดกลุ่มรวมในฟังก์ชั่นของ JavaScript ได้ โดยอยู่ภายในเครื่องหมายปิดปีกกา { }
ในกรณีที่เราต้องการสร้างตัวแปร เราก็สามารถประกาศตัวแปรได้ ยกตัวอย่างเช่น

var x, y, z;       // ประกาศตัวแปร
x = 5; y = 6;      // กำหนดค่าให้ตัวแปร
z = x + y;         // คำนวณค่าตัวแปร

ในกรณีที่เป็นข้อความ (String) เราสามารถที่จะเขียนอยู่ภายในเครื่องหมายฟันหนู แบบคู่และเดี่ยวก็ได้
ในกรณีที่เราไม่ต้องการให้ประโยคใดใน JavaScript ถูกใช้งาน เราจะใช้เครื่องหมายดับเบิ้ลสแลส // หรือ /* และ */ เพื่อบอกให้รู้ว่าเป็นส่วนอธิบายหรือขยายความ
ในการกำหนดตัวแปรของ JavaScript นั้น เราจะต้องระบุให้ชัดเจน เพราะหากเรากำหนดแตกต่างกันเพียงแค่ ตัวอักษรตัวใหญ่และตัวเล็กก็หมายถึงตัวแปรคนละตัวแล้ว เช่น

var lastname, lastName;

ในการกำหนดตัวแปรของ JavaScript สามารถกำหนดได้หลายแบบ เช่น มีเครื่องหมาย Underscore เชื่อมประโยค first_name หรือตัวพิมพ์ใหญ่ FirstName หรือ ตัวพิมพ์เล็กอยู่ด้านด้าน firstName ทั้ง 3 แบบนี้เป็นที่นิยมในการกำหนดตัวแปรครับ

เป็นอย่างไรกันบ้างครับ สำหรับการเริ่มต้นเขียนโค้ด JavaScript นี้ หวังว่าคงพอจะเข้าใจกันนะครับ JavaScript นี้ ยังสามารถเขียนได้อีกหลายรูปแบบและซับซ้อนได้อีกนะครับ ซึ่งหากมีเวลาก็จะมาเขียนบทความใหม่เพิ่มขึ้นเรื่อยๆ และต้องขอขอบคุณสำหรับเว็บ w3schools.com หากใครสงสัยในเนื้อหาที่ผมเขียนก็สามารถตามไปอ่านต่อได้ที่นั่นครับ มีตัวอย่างให้ดูด้วย สำหรับบทความนี้ก็ขอจบไว้เพียงเท่านี้ สวัสดีครับ..

JavaScript คืออะไร ใช้งานอย่างไร

JavaScript คืออะไร

JavaScript ทำอะไรได้บ้าง

วิธีการเรียกใช้ JavaScript

การแสดงผลใน JavaScript

การเขียนประโยคใน JavaScript

1 thought on “JavaScript คืออะไร ใช้งานอย่างไร”

Leave a Comment Cancel Reply

WEBDODEE

ข้อมูลเพิ่มเติม