เข้าใจพื้นฐาน Javascript แบบสบายๆ (อัพเดตล่าสุด)

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

• Node.js
• React
• Angular
• Vue
• JQuery

Statement;

Statement เหมือนลำดับขั้นตอนที่เราอยากให้คอมพิวเตอร์ทำตาม โดยคอมพิวเตอร์จะอ่านทีละ Statement และทำงานทีละ Statement ตามลำดับ

ส่วนใหญ่แล้วเมื่อเราจบ Statement เราจะใส่เครื่องหมาย ; (เซมิโคล่อน)

See the Pen Javascript 101: Statement by Teerasej (@teerasej) on CodePen.

ตัวแปร (Variable)

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

โดยเราสามารถบอกให้ระบบจำค่า หรือข้อมูลที่เราต้องการได้ โดยการประกาศตัวแปรตามรูปแบบ

var <ชื่อตัวแปร> = <ค่าที่ต้องการให้จำ>

ตัวอย่างการประกาศตัวแปรแบบต่างๆ ลองแก้ไขค่าตัวแปรในส่วนของ JS และกดดูผลลัพธ์ใน Result

See the Pen Javascript 101: Variable by Teerasej (@teerasej) on CodePen.

ชนิดของข้อมูล (Data Type)

ถึงแม้ว่าจะไม่เห็นชัดเจน แต่ค่าที่เก็บอยู่ในตัวแปรนั้นมีหลายประเภท เช่น

• ข้อความ (String)
• จำนวนนับ (Number)
• ค่าจริงเท็จ (True/False)
• อาร์เรย์ (Array)

โดยตัวแปรตัวหนึ่งสามารถสลับเก็บค่าได้หลายประเภท แต่จำได้เพียงทีละ 1 ค่าเท่านั้น

(รายละเอียดส่วนนี้จะเปลี่ยนไปเมื่อเราใช้ Javascript รุ่น ES 6)

something = "Teerasej"; // ประกาศตัวแปรชื่อ something something = 499; something = [1,2,3]; // ตรงจุดนี้ ค่าของตัวแปร something คืออาร์เรย์ มีค่า 1,2,3

เรายังสามารถใช้ตัวแปรเก็บ Function ได้ด้วย โดยเราสามารถเรียกใช้ Function ได้โดยการเรียกชื่อตัวแปร

var sayHi = function(){
   console.log('Hello!');
}

var sayHello = function(name){
   console.log('Hello!, ' + name);
}

sayHi();
// ระบบจะแสดงคำว่า 'Hello!' ออกทาง console

sayHello('Teerasej');
// ระบบจะแสดงคำว่า 'Hello! Teerasej' ออกทาง console

และเรายังสามารถเก็บค่าของ Object (ข้อมูลประเภทโครงสร้างที่เราสามารถกำหนดได้เอง) ไว้ในตัวแปรก็ได้

var product = { name: 'iPhone6', price: 29900, brand: 'Apple' } product.name // ได้ค่าเป็น iPhone6 product.price // ได้ค่าเป็น 29900 var total = product.price * 107 / 100; // ได้ค่าเป็นราคา 29900 ที่รวม vat 7% แล้ว

Array: ตัวแปรที่เก็บข้อมูลได้หลายตัว

ในหลายๆ ครั้ง เราจะได้ข้อมูลที่ไม่ใช่แค่ 1 หน่วยในตัวแปรเดียว แต่มาเป็นชุด ข้อมูลพวกนี้เราเรียกว่า Array

การประกาศ Array สามารถทำได้หลายแบบ

var emptyArray = []; // Array เปล่าๆ ไม่มีข้อมูลอยู่ด้านใน

และเราสามารถเพิ่มข้อมูลลงไปใน Array ได้ ผ่านฟังก์ชั่น push()

emptyArray.push('Steak');
// ตรงจุดนี้ ค่าใน emptyArray คือ ['Steak']

เราสามารถประกาศค่า Array ตรงๆ ให้กับตัวแปรเลยก็ได้ เช่น

var foods = ["Tom Yum","Steak","Sushi"];

ซึ่งจากตัวอย่างด้านบน เราสามารถเข้าถึงค่าที่อยู่ในอาร์เรย์ได้ โดยใช้ลำดับตำแหน่งของ Array เรียกว่าเลข Index

foods[0]
// ได้ค่าเป็น 'Tom Yam'

foods[1]
// ได้ค่าเป็น 'Steak'

foods[2]
// ได้ค่าเป็น 'Sushi'

foods[3]
// ไม่มี เพราะจำนวนข้อมูลใน Array นี้มีแค่ 3 ตัวเท่านั้น

Loop: สั่งให้คอมพิวเตอร์ทำงานซ้ำตามที่เราต้องการ

ในการจัดการ Array บางครั้งจำนวนข้อมูลใน Array มีจำนวนมหาศาล การมานั่งจิ้มเลข index คงไม่ดีต่อสุขภาพแน่ เราจึงมี Loop statement เอาไว้วนจัดการข้อมูลใน Array

for ( ตัวแปรเริ่มต้น ; กรณีเทียบ (Condition) ; เพ่ิมค่าตัวแปร ) { Statement ที่ต้องการให้ทำงาน ถ้ากรณีเทียบยังเป็นจริงอยู่ }

เช่น

for (var i = 1; i < 5 ; i++ ){ console.log(i); } /* ผลลัพธ์เราจะได้ 1 2 3 4 เพราะรอบสุดท้าย i มีค่าเป็น 5 ซึ่งจะทำให้ส่วนเทียบเป็นเท็จ เป็นการหยุด loop */

ฟังก์ชั่น (Function)

ฟังก์ชั่น หรือชุดคำสั่ง ที่รวม Statement การทำงานเอาไว้ สามารถเรียกชื่อใช้งานตามที่เราต้องการได้

function ชื่อฟังก์ชั่น( ตัวแปรพารามิเตอร์ถ้ามี ){ Statement ที่ต้องการให้ทำงาน เมื่อมีการเรียก function return <- ถ้าต้องการส่งค่าบางอย่างกลับไปนอกฟังก์ชั่น เมื่อการทำงานมาถึงจุดนี้ }

เมื่อเราประกาศฟังก์ชั่นแล้ว เราสามารถเรียกใช้งานก็ได้

function hello() { } hello(); // เรียกใช้งาน

เราสามารถส่งค่า หรือตัวแปรลงไปใน Function โดยได้ โดยค่าต่างๆ จะถูกส่งมาเก็บในชื่อของตัวแปรพารามิเตอร์ (Parameter) ที่เราประกาศไว้ใน Function

และถ้าต้องการ เราสามารถส่งค่าตัวแปรกลับออกมานอกฟังกชั่นได้ด้วย

function plus( a , b ){ // ค่าที่ถูกส่งผ่านเข้ามาใน function จะเก็บไว้ในตัวแปรชื่อ a และ b ตามลำดับ var result = a + b; // ทำการรวมค่าของ a และ b เก็บไว้ในตัวแปรชื่อ result return result; // ส่งค่าในตัวแปร result ออกไปนอก function } var r = plus( 10, 20 ); // function plus จะรับค่า 10 และ 20 เข้าไป และคืนค่าออกมาเก็บในตัวแปรชื่อ r

ซึ่งในบางครั้งเราสามารถส่ง function ลงไปเป็นพารามิเตอร์ได้ด้วย! ทำให้เราสามารถเรียกใช้งาน function ได้โดยตรงจากภายใน Function อื่น (เพราะตัวแปรของเราเก็บตัวอ้างอิงถึง Function ได้)

function finish(){ console.log( 'เสร็จแล้ว' ); } function plus( a, b, f ){ f(); // เรียนใช้ function ที่ส่งเข้ามาเป็นตัวแปรพารามิเตอร์​ชื่อ f } plus( 1, 2, finish); // ส่งชื่อ function finish เข้าไปในฟังก์ชั่น

และหลายๆ ครั้งเราจะเห็นการประกาศตัว function ลงไปตรงๆ ตอนที่เราเรียกใช้ function อื่นได้

$('#button').click( function(e){ ... });

Condition: สอนให้ระบบตัดสินใจตามที่เรากำหนด

ในหลายๆ ครั้งเราต้องการให้ระบบเลือกการทำงานตามค่าที่มีอยู่ เช่น

• บัตรเครดิตเกินวงเงินหรือไม่ ถ้าเกินก็ไม่หักเงิน
• สินค้านี้หมดอายุหรือยัง  ถ้าหมดแล้วให้คัดออกจากฐานข้อมูล
• มีคำว่า “Apple” อยู่ในตัวแปรนี้หรือไม่

โดยเรามี Statement เฉพาะสำหรับการใช้งาน เช่น

if ( กรณีเทียบค่าจริงเท็จ ) { Statement ที่ต้องการให้ทำงานเมื่อค่าเทียบออกมาเป็นจริง (true) }

เช่น ถ้าเราเทียบกับตัวแปรที่เก็บค่าจริงเท็จเอาไว้

var creditOK = true; if( creditOK ) { // Statement นี้ทำแน่นอน }

แต่หลายๆ ครั้งเราก็ใช้พวก Conditional Operator ให้ระบบเปรียบเทียบเอาเอง เช่น

• >
• <
• ==
• >=
• <=

var creditLimit = 50000; // วงเงินบัตรมี 50,000 
var bill = 60000; // แต่บิลค่าอาหาร 60,000

if( bill > creditLimit ){
   kickOff(); // เตะออกจากร้านแน่นอน เพราะยังไง 60,000 ก็มากกว่า 50,000 
}

เรายังสามารถใช้ค่าจริงเท็จที่ได้จาก Function มาใช้ใน condition ได้ด้วย

function isCreditOK( credit, bill ){
     if( credit > bill ){
         return true;
     } 

     return false;
}


var creditLimit = 50000; // วงเงินบัตรมี 50,000 
var bill = 60000; // แต่บิลค่าอาหาร 60,000

if( isCreditOk( credit, bill ) ){
    // อันนี้ขึ้นอยู่กับว่าค่าใน credit มากกว่า bill หรือไม่
}

ติดตามเรียนรู้พื้นฐานใหม่ๆ รวมถึงสร้างแอพ หรือระบบแอพพลิเคชั่นได้ผ่านช่องทางด้านล่างครับ

• ติดตามจากแฟนเพจ Nextflow
• กดติดตามคลิปใหม่ๆ  Subscribe YouTube Channel ของพลได้เลย
• โทรติดต่อบริการจัดอบรม 083-071-3373 คลิกโทรผ่านมือถือได้เลย
• สอบถามผ่านทาง LINE คลิก
• สอบถามผ่านทาง Facebook คลิก