01204435/javascript

หน้านี้เป็นการทดลอง javascript และ node.js ซึ่งเป็นส่วนหนึ่งของวิชา 01204435

เอกสารอ้างอิงประกอบการทำแลบสามารถเอกสารจาก หน้า JavaScript ของ Mozilla Developer Network ได้ โดยอาจจะดูในส่วนของ JavaScript Guide

javascript: การทดลองเกี่ยวกับ scope

scope ใน block และใน function

พิจารณาโปรแกรม 3 โปรแกรมต่อไปนี้

a = 10;
{ 
  var a = 20;    // ***
  console.log(a);
}
console.log(a);

a = 10;
function f() { 
  var a = 20;    // ***
  console.log(a);
};
f();
console.log(a);

a = 10;
function f() { 
  a = 20;          // ***
  console.log(a);
};
f();
console.log(a);

อธิบายความแตกต่าง อธิบายว่าตัวแปร a ในบรรทัด *** ของแต่ละโปรแกรมหมายถึงตัวแปรตัวใด และเพราะเหตุใด

ทดลองขอบเขตเพิ่มเติม 1

พิจารณาโปรแกรมต่อไปนี้ ผลลัพธ์ของโปรแกรมจะเป็นเช่นใด? ทำไม?

var x = 20;
for(var x = 0; x < 5; x++) {
  console.log(x);
}
console.log(x);

ทดลองแก้โปรแกรม (พยายามแก้ให้น้อยที่สุด) เพื่อทำให้ตัวแปร x ในลูป for กับ x ภายนอกเป็นคนละตัวแปรกัน (นั่นคือบรรทัดสุดท้ายของผลลัพธ์ควรจะมีค่า 20)

ตำแหน่งในการประกาศ

ในการทดลองต่อไป ให้สร้างไฟล์นามสกุล js และเรียกให้ทำงานจาก command line (ไม่ใช่ทยอยป้อนใน javascript console)

พิจารณาโปรแกรมสามโปรแกรมต่อไปนี้

var a = x;
console.log(a);
var x = 10;
console.log(x);

var a = x;
console.log(a);
var x = 10;
console.log(x);
var a = x;
console.log(a);
var x = 20;
var a = x;
console.log(a);

var a = x;
console.log(a);

จากผลการทดลอง ให้อธิบายขอบเขตของตัวแปร x ในสองตัวอย่างแรก

javascript: functions

การประกาศ (และปัญหาที่ค้างคาใจ)

ใน javascript มีวิธีการประกาศ function ได้หลายแบบ สองรูปแบบหลัก ๆ ที่เห็นมีดังตัวอย่างด้านล่าง แบบแรกคือประกาศฟังก์ชัน a เลย

function a() {
  return 10;
}

และอีกแบบคือการประกาศฟังก์ชัน โดยไม่ระบุชื่อ จากนั้นค่อยนำไปกำหนดค่าให้กับตัวแปรที่แทนฟังก์ชันนั้น

var b = function() { 
  return 20; 
};

ในการใช้งานทั่วไป เราจะไม่ค่อยพบความแตกต่างมาก แต่ให้พิจารณาตัวอย่างอันน่าแปลกด้านล่างนี้

var f = function() {
  var a = g();
  function g() { return 10; }
  function g() { return 20; }
  return a;
};
console.log(f());

var f = function() {
  function g() { return 10; }
  var a = g();
  function g() { return 20; }
  return a;
};
console.log(f());

var f = function() {
  var g = function(){ return 10; };
  var a = g();
  function g() { return 20; }
  return a;
};
console.log(f());

ในส่วนนี้ให้อ่านเอกสาร Functions and function scope ประกอบ

จากเอกสารข้างต้น ลองพยายามหาเหตุผลว่าทำไมผลที่ได้จึงเป็นตามที่เราทดลอง

javascript: objects

ในส่วนนี้ให้อ่าน Working with objects และ Details of the object model ประกอบได้

Objects และ properties

ใน JavaScript นั้น object ก็คือ associative array นี่เอง

o1 = {a:10, b:20};
o2 = new Object();
o2['a'] = 20;
o2.b = 20;
console.log(o1);
console.log(o2);