Java Script ตอนที่ #1/4 พื้นฐาน

javascript html5 css3

หลังจากที่เรารู้จักกับ HTML5 และ CSS3 แล้ว อีกหนึ่งภาษาที่นักพัฒนาเว็บ จะต้องเขียนให้คล่องคือ Java Script เนื่องจากเป็นส่วนสำคัญที่จะเชื่อมต่อสิ่งต่างๆ เข้าด้วยกัน โดยถ้าเปรียบเทียบกับการทำงานแบบ MVC  (Model-View-Controller) แล้ว ตัว Java Script จัดเป็นการทำงานส่วนของ Controller(ควบคุมการทำงาน) ส่วน HTML5 เป็น Model (โครงสร้างและข้อมูล) และ CSS3 เป็นส่วนของ View (การแสดงผล) ทีนี้เรามาเรียนรู้พื้นฐานการใช้งาน Java Script ร่วมกันกับ HTML5 และ CSS3 กันเลย

การใช้งานและติดตั้ง Java Script

เนื่องจาก Java Script เป็นภาษาที่ทำงานในลักษณะ Interpreter (อ่านและทำงานทีละบรรทัด) การติดตั้ง Java Script เพื่อใช้งานร่วมกับ HTML นั้นสามารถทำได้ 3 แบบคือ

  1. การแทรกแท็ก <script type=”text/javascript”> Java Script Code </script> ใน <body> … </body>
    ข้อดี:     โค้ดสามารถทำงานได้ทันที ส่วนใหญ่จะติดตั้งก่อนแท็กปิดของ body  … </body>
    ข้อเสีย:  ไม่สามารถนำโค้ดกลับไปใช้ใหม่ที่อื่นได้
  2. การแทรกแท็ก <script type=”text/javascript”> Java Script Code </script> ใน <head> … </head>
    ข้อดี:     โค้ดสามารถแก้ไขได้ง่าย ไล่ง่าย เนื่องจากอยู่ในหน้าเดียวกันกับ HTML
    ข้อเสีย:  ไม่สามารถนำโค้ดกลับไปใช้ในไฟล์อื่นได้
  3. การแยกเป็นไฟล์ .js และดึงมาใช้งานใน HTML ผ่านแท็ก <script src=”…..” > </script> ในส่วนของ <head> … </head>
    ข้อดี:      โค้ดมีการจัดการเป็นสัดส่วน และสามารถนำกลับไปใช้ใน HTML ไฟล์อื่นๆได้
    ข้อเสีย:   การไล่โค้ดค่อนข้างยาก ต้องใช้ประสบการในการเขียน และรู้โครงสร้างของ HTML เป็นอย่างดี
<html>
   <head>
       <!--  แบบที่ 3 -->
       <script src="myscript.js" type="text/javascript"></script>

       <script type="text/javascript">
           //...แบบที่ 2
       </script>
 </head>
 <body>

 <script type="text/javascript">
    //...แบบที่ 1
 </script>
 </body>
</html>

การเรียกใช้ Script

โดยปกติต้องเรียกผ่านเหตุการณ์ต่างๆ ที่เกิดขึ้นกับ Element ของ HTML เช่นอีเวนต์ onclick ของปุ่มในฟอร์ม เป็นต้น  นอกจากนั้นหากต้องการให้มีการเรียกใช้โดยตรงสามารถเรียกชื่อฟังก์ชันตรงๆ ผ่านการแทรกแท็ก <script> …. </script> ในตัว body ได้

<head>
 <script>
 //การประกาศฟังก์ชัน
 function func1(){ …. }
 function func2(){ …. }
 </script>
</head>

<body>
  // การเรียกใช้ func1() ผ่านอีเวนต์ onclick
 <input type=“button” value=“Click Me” onclick=“func1()”/>
  // การเรียกใช้ func2() โดยตรง
 <script type=“text/javascript”> func2(); </script>
</body>

ตัวแปรและ Syntax

การประกาศตัวแปรใน Java Script มี 3 รูปแบบแบ่งตามขอบเขต (Scope) การใช้งานคือ

  1. ตัวแปรที่ใช้ร่วมกัน (Global Variable) จะประกาศด้วยประโยค var และวางอยู่นอกฟังก์ชัน ตัวแปรที่ประกาศแบบนี้จะใช้ได้ตลอดทั้งเอกสาร
  2. ตัวแปรที่ใช้เฉพาะในฟังก์ชัน (Local Variable) จะใช้ var หรือไม่ก็ได้ โดยตัวแปรนี้จะใช้งานได้ตั้งแต่บรรทัดที่ตัวแปรถูกประกาศ จนถึงปิด } โดยจะใช้ได้เฉพาะในฟังก์ชันนั้นๆ เท่านั้น
  3. ตัวแปรที่เป็นพารามิเตอร์ของฟังก์ชัน (Parameter Variable) ขอบเขตสามารถอ้างถึงได้ตั้งแต่เปิดปีกกา {  ของฟังชัน จนถึงปิด }
//global_var เป็นตัวแปรชนิด global สามารถใช้ได้ทั้งเอกสาร
 var global_var=20;
 // a และ b เป็น function parameter สามารถใช้ในฟังก์ชันเท่านั้น
 function funcX(a , b){
   // resultX เป็น local variable ใช้ได้เฉพาะในฟังก์ชัน funcX เท่านั้น
   var resultX = (a + b) * global_var;
   return resultY;
 }

 function funcY(c , d){
   var resultY= (c * d) * global_var;
   return resultY;
 }

ส่วนรูปแบบการเขียนมีกฏกติกาเล็กน้อยดังนี้

  • ชื่อตัวแปรที่ใช้ห้ามมีสัญลักษณ์พิเศษหรือช่องว่าง
  • การใช้ตัวอักษรในชื่อตัวแปร ตัวพิมพ์เล็กกับตัวพิมพ์ใหญ่ถืเป็นตัวแปรคนละตัวกัน (Case Sensitive) เช่น firstname กับ firstName ถือเป็นคนละตัวกัน
  • เนื่องจาก Java Script เป็นภาษาที่ไม่มีตัวระบุชนิดของข้อมูล (Un-Type) ดังนั้นชนิดของข้อมูลจะขึ้นอยู่กับค่าที่เรากำหนดให้ในฝั่งขวามือของเครื่องหมาย = เช่นvar x=20;        //ตอนนี้ x เป็นข้อมูลชนิดตัวเลข (integer)
    var x=3.414;   //ตอนนี้ x เป็นข้อมูลชนิดทศนิยม (float)
    var x=’A’, y=”b”;   //ตอนนี้ x และ y เป็นข้อมูลชนิดตัวอักษร (String)
  • ตัวแปรที่ประกาศไว้โดยไม่มีการกำหนดค่า จะมีค่าปริยายเป็น undefined
  • เมื่อจบคำสั่งการทำงานต้องปิดด้วยเครื่องหมาย ; (Semi Colon) เสมอ
  • การคอมเมนต์ใช้เหมือน c กับ Java คือ // สำหรับบรรทัดเดียว  /* …  */ สำหรับหลายบรรทัด

สัญลักษณ์การกระทำทางคณิตศาสตร์ และอื่นๆ
+ , -, *, /,%         บวก, ลบ, คูณ, หาร, หารเอาเศษ
>, < , >=, <=     มากกว่า, น้อยกว่า, มากกว่าเท่ากับ, น้อยกว่าเท่ากับ
==, ===             เท่ากันแบบไม่สนชนิด, เท่ากันแบบดูชนิด เช่น 1 == “1” จะได้ true แต่ถ้า 1===”1″ จะได้ false
!=, !===            ไม่เท่ากันแบบไม่สนชนิด, ไม่เท่ากันแบบดูชนิด
&&, ||                 การเชื่อมสมการเข้าด้วยกัน แบบ AND และ OR
++, —                  เพิ่มทีละ 1 ลดทีละ 1

เงื่อนไข และการวนรอบ
if / else, else if       การตรวจสอบด้วยสมการที่ให้ผล true, false เช่น

var inp=prompt("โปรดระบุอายุของคุณ");
 if(age > 18){
     // เข้าสู่หน้าหลัก
 }else{
    // แจ้งไม่สามารถให้เข้าได้
 }

switch             การตรวจสอบแบบหลายเงื่อนไขพร้อมๆกัน

switch(inp){
    case 'a':  alert("A"); break;
    case 'b':  alert("B"); break;
    case 'c':  alert("C"); break;
    default :  alert("Invalid"); break;
}

for loop        การวนรอบแบบรู้จุดสิ้นสุด มักใช้กับ array

var ar[]=[1,2,3,4,5];
 for(var i=0;i<ar.length;i++){
    console.log(ar[i]);
 }
หรือ
 for(i  in ar){
    console.log(ar[i]);
 }

while, do/while loop   ใช้วนรอบแบบไม่จำเป็นต้องรู้จุดสิ้นสุด เช่นการวนโดยให้ผู้ใช้ตัดสินใจออกเอง

var inp = "a";
// หยุดเมื่อผู้ใช้ใส่ค่าเป็น e
while(inp != "e"){
   inp =  prompt("ใส่คำสั่ง");
}
var inp="";
do{
   inp =  prompt("ใส่คำสั่ง");
}while(inp!='e');

ฟังก์ชันและตัวแปรของภาษา

Java Script มีฟังก์ชันและตัวแปรของตัวภาษามาให้ใช้เยอะมาก (Predefined Object and Function) เพื่อเพิ่มความสะดวกให้กับนักพัฒนา ซึ่งตอนหลังยังคงมีเพิ่มเติมมาอย่างต่อเนื่องเพื่อรองรับการทำงานร่วมกับ HTML5 และ CSS3 ผมขอสรุปเฉพาะเอาที่ใช้งานบ่อยๆ ละกันนะครับ ใครอยากรู้เพิ่มเติมตามไปเก็บได้ใน Link นี้

การใช้งานออปเจ็ก (Object) และอาเรย์ (Array)

Math

ฟังก์ชัน:      abs, acos, asin, atan, atan2, ceil, cos, exp, floor, log, max, min, pow, random, round, sin, sqrt, tan
ค่าคงที่:      E, LN10, LN2, LOG10E, PI, SQRT1_2, SQRT2

String
ฟังก์ชัน:       charAt, indexOf, lastIndexOf, substring, toLoverCase, toUpperCase

RegExp
ฟังก์ชัน:       match, replace, search, split

** เดี่ยวผมค่อยแนะนำเพิ่มในตอนต่อๆไปนะครับ เพราะมีเยอะมาก **

 

การประกาศฟังก์ชัน และการติดตั้ง

การประกาศฟังก์ชันและนำไปใช้งานสามารถทำได้หลายวิธีดังนี้

//การประกาศแบบปกติ
function  func1(){
   // การทำงาน
}

//การประกาศแบบโยนให้ตัวแปร ผ่าน Anonymous function (ฟังก์ชันไม่มีชื่อ)
var func2 = function(){
   // การทำงาน
};

//การประกาศโดยโยนฟังก์ชันให้กับตัวแปร
function square(x) { 
  return x*x;
}
var f=square;  //** ห้ามใส่ () หลังชื่อฟังก์ชันที่โยน
f(5); // ได้ค่าเป็น 25

 

บทสรุป

และแล้วก็จบในตอนเดียวไม่ได้อีกแล้ว เพราะยังเหลือสวนของการเข้าถึง DOM Tree ของ HTML และการประกาศ Java Script Object และการใช้งาน AJAX กับ Java Script ขอยกไปไว้ตอนหน้าละกันนะครับ โปรดติดตามตอนต่อไป

AjBee.Me :  หากเห็นว่ามีประโยชน์ สามารถแชร์ให้คนที่กำลังเริ่มศึกษาได้ครับ ^_^