JavaScript เบื้องต้น, เขียน Logic ให้กับเว็บไซต์

บทความนี้จะเป็นการแนะนำวิธีการเขียน JavaScript สำหรับสร้างกลไกต่างๆ ภายในเว็บไซต์

ข้อแตกต่างระหว่าง Client-Side และ Server-Side

JavaScript เป็นภาษาที่ทำงานบน "Client-Side" หมายถึง คำสั่งทุกคำสั่งจะถูกประมวลผลโดย เว็บเบราว์เซอร์ (Web Browser) ของลูกข่าย หรือผู้ใช้ที่เปิดเว็บไซต์ขึ้นมา Javascript ก็จะถูกรันบนเครื่องของผู้ใช้ ซึ่งลูกข่ายจะ สามารถ ดูโค้ดต้นฉบับได้ โดยการ view-source จึงไม่นิยมนำ Javascripts ธรรมดามาเขียนระบบที่ต้องการความปลอดภัย

Node.js เป็น JavaScript ที่ทำงานบน JavaScript runtime environment ซึ่งทำงานบน  JavaScript Engine ถูกออกแบบขึ้นมาเพื่อนำ JavaScript ออกมาทำงานนอก เว็บเบราว์เซอร์ เพื่อใช้สำหรับการประมวลผลแบบ "Server-Side" หมายถึงคำสั่งทุกคำสั่ง จะถูกประมวลผลอยู่บน เซิร์ฟเวอร์ (Server) และส่งผลลัพท์ให้กับลูกข่าย ซึ่งลูกข่าย ไม่สามารถ ดูโค้ดต้นฉบับได้

การประกาศตัวแปรบน JavaScript

การประกาศตัวแปรใน JavaScript มีหลายรูปแบบได้แก่

var และ let เป็นตัวแปรที่สามารถ กำหนด (Assign) ค่าใหม่ให้กับตัวแปรได้ ซึ่ง var เป็น function scope หมายถึงจะเข้าถึงตัวแปรได้แค่ภายใน function เท่านั้น ส่วน let จะไม่สามารถประกาศซ้ำกันภายใน scope ได้ และไม่สามารถเข้าถึง ก่อนมันจะถูกกำหนดค่า

const เป็นตัวแปรประเภทที่ไม่สามารถกำหนดค่าใหม่ได้ และเข้าถึงได้แค่ใน scope และไม่สามารถประกาศตัวแปรซ้ำกันภายใน scope เดียวกันได้

ตัวอย่างการประกาศตัวแปร ทั้งแบบ int (ตัวอย่าง: n, year, pi), strings (ตัวอย่าง: c) และ array (ตัวอย่าง: numbers) รวมถึงตัวแปรค่าคงที่ pi ที่ไม่สามารถกำหนดค่าใหม่ได้

var n = 123;
var c = "Hello";
let year = 2022;
const pi = 3.14;
let numbers = [2,7,8,16];

Array การเก็บชุดข้อมูล

Array นั้นเป็นคุณสมบัติของตัวแปรที่สามารถเก็บเซทตัวเลข, ตัวอักษร และตัวแปร เข้าไปได้ โดยจะเริ่มนับจาก 0 เป็นต้นไป เนื่องจากการอ้างอิง ลำดับ (Indexs) ใน Array เป็นการอ้างอิงตำแหน่งของข้อมูลจากความห่างของข้อมูลต้องการ กับข้อมูลตัวแรกของ array

ข้อมูลที่ 1 จึงมีลำดับเท่ากับกับ 0 เนื่องจาก ตัวมันห่างจากตัวข้อมูลที่ 1 ซึ่งคือตัวมันเอง เท่ากับ 0

การสร้างเงื่อนไข

 การสร้างเงื่อนไขของ JavaScript นั้น รูปแบบคล้ายกับ ภาษาทั่วไป เช่น C, PHP

ตัวอย่างดังนี้:

if(year == 2022) {
  console.log("This is 2022");
} else {
  console.log("This is not 2022");
}
if(year < 2022) {
  console.log("This is less than 2022");
} else {
  console.log("This is more than 2022");
}
if(year > 2022) {
  console.log("This is more than 2022");
} else {
  console.log("This is less than 2022");
}

เงื่อนไขแบบ Switch/Case

คล้ายกับเงือนไข if ข้างบน Switch/Case เป็นการเช็คว่าค่าของตัวแปรนั้น อยู่ในกรณี (case) แบบใด ตัวอย่าง ข้างล่างนี้คือการนำตัวแปร answer มาเช็คเงื่อนไขด้วย switch โดยหาก answer == "A" จะแจ้งว่า คำตอบเกือบถูกต้อง ให้ลองใหม่ หาก answer == "B" จะแจ้งว่า คำตอบถูกต้อง หรือนอกจากนั้นจะแจ้งว่า คำตอบผิด เป็นต้น

switch(answer) {
  case "A":
    console.log('Almost correct try again!');
    break;
  case "B":
    console.log('The Answer is correct');
    break;
  default:
    console.log('The Answer is wrong!')
}

การรับค่าผ่าน HTML Input (Value Attribute)

ในกรณีที่รับค่าจากผู้ใช้ มักนิยมใช้ HTML Input ซึ่งมี "value"attribute ตัวอย่าง

<input type="text" id="input1" value="">

โดยเมื่อเรากรอกค่าลงไปใน Input Tag ค่าที่เรากรอกไป จะอยู่ใน value ซึ่งสามารถเข้าถึงผ่าน Javascript และเปลี่ยนแปลงข้อมูลที่อยู่ใน value ได้

อ้างอิงไปหา Elements

โดยวิธีการอ้างอิงไปหา Elements เราจะสามารถอ้างอิงได้จาก id (attribute) name (attribute) หรือ class (attribute) ก็ได้ ตัวอย่าง Javascript ดังนี้

อ้างอิงจาก id โดยใช้ getElementById

<input type="text" id="input1" value="">

function f1() {
  var input1 = document.getElementById("input1").value
  console.log("Function f1 has been called, you input value is: "+input1);
}

อ้างอิงจาก class โดยใช้ getElementsByClassName

<input type="text" class="myinput" value="">

เนื่องจาก getElementsByClassName จะ return elements มาเป็น Array จึงต้องกำกับ Indexes ของ array ไว้ด้วย

function f1() {
  var input1 = getElementsByClassName("myinput")[0].value
  console.log("Function f1 has been called, you input value is: "+input1);
}

อ้างอิงจาก name โดยใช้ getElementsByName

<input type="text" name="myinput" value="">

เช่นเดียวกับ getElementsByName จะ return elements มาเป็น Array จึงต้องกำกับ Indexes ของ array ไว้ด้วย

function f1() {
  var input1 = getElementsByName("myinput")[0].value
  console.log("Function f1 has been called, you input value is: "+input1);
}

เรียกฟังก์ชั่นจากปุ่ม (OnClick)

เราจำเป็นต้องมี ปุ่ม (button) โดยอาศัย onclick attribute เพื่อเรียก f1 ให้ทำงาน ซึ่งสามารถเรียก functions จาก Javascript ได้

<input type="text" id="input1" value="">
<button onclick="f1()">Click</button>

ตัวอย่างการกำหนดค่าใหม่ให้กับ Input value

function f1() {
  const text1 = "Success"
  document.getElementById("input1").value = text1;
}

ผลลัพท์ (HTML) หลังจากเรียกใช้ f1

<input type="text" id="input1" value="Success">

การแสดงผลลัพธ์ลงใน HTML

ในการแสดงผลลัพธ์ต่างๆ จาก functions ของ Javascript จำเป็นต้องสร้าง HTML elements เปล่าๆ มาเตรียมไว้ เพื่อที่จะใช้อ้างอิงจาก id หรือ class ในการเพิ่ม html contents เข้าไปใน element ดังกล่าว โดยใช้ "innerHTML" ตัวอย่างดังนี้

<div id="result"></div>

var text1 = "hello";
var result = getElementById("result");
result.innerHTML += text1;

ผลลัพธ์ (HTML)

<div id="result">hello</div>

For Loop การทำงานแบบทำซ้ำ

โครงสร้างของ for loop ใน Javascript นั้น คล้ายกับโครงสร้างของภาษา C ซึ่งมีโครงสร้างดังนี้

for(int i = 0; i < 10; i++) {
  console.log(i);
}

ในตัวอย่างประกอบไปด้วย 3 parameters ซึ่งคั่นด้วยเครื่องหมาย ";" โดยใน parameter ที่ 1 เป็นการกำหนดตัวแปรที่ใช้นับรอบ และใน parameter ที่ 2 เป็นการกำหนดเงื่อนไขที่จะให้การทำซ้ำทำงานอยู่ หากอยู่นอกเงื่อนไขดังกล่าว ก็จะออกจากการทำซ้ำ ส่วน parameter ที่ 3 เป็นการเพิ่มหรือลดค่าในแต่ละรอบ

เครื่องหมาย ที่ใช้ใน parameter ที่ 3 ก็จะประกอบไปด้วยเครื่องหมายในตารางด้านซ้ายที่แสดงถึงคุณสมบัติในการเพิ่มขึ้นของการนับรอบแต่ละครั้ง เช่น หากต้องการนับเพิ่มขึ้นทีละ 2 ก็จะใช้เครื่องหมาย x+=2 หรือ หากต้องการให้เพิ่มขึ้นทีละ 1 ก็จะใช้เครื่องหมาย x++

อ้างอิง: w3schools.com, medium.com/@pakawatmange