Array in Javascript

       

รูปภาพจากhttp://www.impressivewebs.com/

       สำหรับบทความนี้ยังอยู่ที่ Javascript อยู่ครับจะกล่าวถึงการใช้ Array ใน Javascript
Array คือ ตัวแปรที่เป็นพื้นที่สำหรับจัดเก็บข้อมูลเป็นชุด การเก็บจะเป็นลักษณะข้อมูลชนิดเดียวกันแล้วอ้างถึงผ่านตัวแปล Array

ตัวอย่างการใช้งาน Array

การประกาศ Array
var cars = ["Honda", "Toyota", "BMW"];

var cars = new Array("Honda", "Toyota", "BMW");

var person = {firstName:"Chinja", lastName:"Test", age:25};

var person = [];
person[0] = "Chinja";
person[1] = "Test";
person[2] = 25;

การประกาศ Array ทำได้หลายวิธีดังตัวอย่างด้านบนครับ เวลาเข้าถึงข้อมูล เช่น เราต้องการเข้าถึงตัวแปล cars เราต้องการได้ค่า "Honda" ก็ใช้ว่า cars[0] เป็นการอ้างอิง Array ตัวแรก ตัวแรกจะเริ่มตั้งแต่ 0 หรือจะอ้างจากชื่อ เช่น person["firstName"] เป็นต้น

วิธีการหาความยาว Array ว่ามีการเก็บข้อมูลเท่าไรหาได้โดย cars.length;
วิธีการเรียงลำดับ Array เราก็ทำได้ง่ายๆ คือ cars.sort();

วิธีการเพิ่มข้อมูลลงใน Array
cars.push("Benz"); หรือ cars[cars.length] = "Benz"; ก็ได้

ตัวอย่างการ Loop getข้อมูลจาก Array

var index;
var cars = new Array("Honda", "Toyota", "BMW");
for (index = 0; index < cars.length; index++) {
    alert(cars[index]);
}

ถ้าเราต้องการ getข้อมูลทั้งหมดใน Array ออกมาโชว์ในรูปแบบstringเลยทำได้โดย cars.toString();

ถ้าเราต้องการหาตำแหน่งของข้อมูลที่เรารู้ใน Array ทำได้โดย 
var a = cars.indexOf("Honda");

ถ้าต้องการเอา Array 2 ตัวมาต่อกันทำได้โดย
var names = ["Chinja", "Jone"];
var cars = ["Honda", "Toyota", "BMW"];
var test = names.concat(cars);

   สำหรับเรื่องArrayในJavascriptก็ขอจบเพียงเท่านี้ก่อนนะครับ จะมีบทความมาให้อ่านเรื่อยๆครับผม

jQuery คืออะไร

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

jQuery คือไลบรารีของ JavaScript ซึ่งเป็นส่วนหนึ่งของการสร้างเว็บไซต์ jQuery ช่วยให้เราเขียนหรือ ใช้งาน JavaScript และ Ajax ให้ง่ายขึ้น jQuery เปิดตัวครั้งแรกในงานบาร์แคมป์นิวยอร์ก โดย จอห์น เรซิก (John Resig) เมื่อ 14 มกราคม พ.ศ. 2549 ตัวโค้ดของ jQuery มีลิขสิทธิ์และสัญญาอนุญาตแบบ open source โดยใช้สัญญาอนุญาตของ GFDL และ MIT License เรียกง่ายๆว่าใช้ได้ฟรีนั่นเอง

ความสามารถของ Jquery

•  ใช้งาน DOM element โดยการเขียนไม่จำเป็นต้องยึดติดกับ browser
•  จัดการกับ Event เพิ่ม Event ลงในหน้าเว็บของเราได้
•  การจัดการ CSS สามารถเพิ่ม ลบ class ,id ของ CSS ได้
•  สามารถทำ Effects and animations ลูกเล่นบนหน้าเว็บ
•  ช่วยให้เขียน Ajax ได้ง่ายขึ้นประหยัดเวลาในการเขียน Ajax และทำให้โค้ดสั้นลง
•  สามารถสืบทอดคุณสมบัติของ jQuery ไปใช้งานต่อได้
•  สามารถทำ UI ใหม่ บน Browser ได้

ตัวอย่าง jQuery
ถ้าเป็น Javascript ธรรมดาเวลาจะอ้างถึง id ต้องพิมพ์

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

ถ้าเป็น jQuery พิมพ์แค่ $('#demo').html("Hello changed.");

ตัวอย่างด้านบนนี้ผลลัพธ์เหมือนกันจะเห็นได้ว่า jQuery ใช้งานได้ง่ายกว่า สะดวกกว่าพิมพ์น้อยกว่า

ถ้าต้องการให้ script ที่เราเขียนทำงานแค่ครั้งแรกที่โหลดหน้าก็สามารถใช้คำสั่งนี้ได้

$(document).ready(function(){ ....coding....  });

ใน tag html แต่ละ tag ล้วนจะมี attribute อยู่ jQuery สามารถเปลี่ยน attribute ได้ง่ายๆแค่อ้างถึง id,class,name เท่านั้น เช่น
         $('#demo').attr('style','background-color:red');
ด้านบนนี้เป็นตัวอย่าง jQuery อ้างถึง id=demo เปลี่ยน attribute style ให้มีค่าเป็น background-color:red เป็นต้น

   สำหรับบทความนี้ก็ทำความรู้จักและได้เห็นตัวอย่างการใช้งาน jQuery บ้างแล้วนะครับ โปรดติดตามต่อบทความหน้าครับผม

การใช้เงื่อนไขและการทำซ้ำใน javaScript

        อย่างที่เรารู้กันอยู่แล้วว่าการเขียนโปรแกรมนั้นต้องมีการใช้เงื่อนไขหรือการทำซ้ำต่างๆ วันนี้เลยจะมาสอนวิธีการใช้ if else, switch case, for loop ,while loop

Syntax การใช้ if else
ถ้ามีเงื่อนไขเดียวหรือ 2 เงื่อนไขจะใช้
if(condition) {
      .......coding.......
}else{
      .......coding.......
}
ตัวอย่าง เช่น การเช็คค่า null
var name = 'Chinja';
if(name != null) {
     alert(name);
}else{
     alert('name is null');
}
ถ้ามีหลายเงื่อนไข
if(condition) {
      .......coding.......
}else if(condition){
      .......coding.......
}else{
     .......coding.......
}
ตัวอย่าง เช่น การคำนวนเกรดจากคะแนน
var score = 78;
if(score >= 80) {
      alert('A');
}else if(score>= 70 && score < 80){
      alert('B');
}else if(score>=60 && score <70){
     alert('C');
}else if(score>50 && score < 60){
     alert('D');
}else{
     alert('F');
}

Syntax การใช้ switch case
switch(expression) {
    case n:
        code block
        break;
    case n:
        code block
        break;
    default:
        default code block
}
ตัวอย่าง เช่น การรับค่าเกรด
var grade= 'A';
switch(grade) {
    case 'A':
        alert('สุดยอด');
        break;
    case 'B':
        alert('ดี');
        break;
    case 'C':
        alert('ค่อนข้างดี');
        break;
    case 'D':
        alert('พอใช้');
        break;
    case 'F':
        alert('ต้องปรับปรุง');
        break;
    default:
        alert('ไม่มี');
}

Syntax การใช้ for loop
for (statement 1; statement 2; statement 3) {
    code block to be executed
}
ตัวอย่าง เช่น การให้ alert() ข้อความทั้งหมด 3 ครั้ง
for (var i=0; i<3; i++) {
    alert(i);
}

Syntax การใช้ while loop
while (condition) {
    code block to be executed
}
ตัวอย่าง เช่น การทำซ้ำจนกว่า i จะมากกว่า 5
var i =0;
while (i < 5) {
     alert('The number is ' + i);
     i++;
}
      จะเห็นได้ว่าถ้ามีหลายเงื่อนไขมากๆใช้ switch case จะดีกว่า ส่วนการทำ while loop เป็นการทำซ้ำแบบใช้เงื่อนไขเป็นหลักจะทำจนกว่าไม่เข้าเงื่อนไขนั้น ส่วน for loop จะทำซ้ำจนกว่าจะสิ้นสุดตาม statement ที่กำหนด
      สำหรับบทความหน้าจะเป็นการใช้ Array และ Object ใน JavaScript ครับ