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

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 หากใครสงสัยในเนื้อหาที่ผมเขียนก็สามารถตามไปอ่านต่อได้ที่นั่นครับ มีตัวอย่างให้ดูด้วย สำหรับบทความนี้ก็ขอจบไว้เพียงเท่านี้ สวัสดีครับ..

สอบถามเพิ่มเติม
สอบถามเพิ่มเติม

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

  1. Pingback: jQuery คืออะไร ใช้งานอย่างไร - WebDoDee

Leave a Comment

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *