MFS1102 Object Oriented Programming

http://wikiwebpedia.com/wp-content/uploads/javascript.gif?w=590

ใน JavaScript จะมการประกาศตวแปรอย 4 วธ ไดแก

var คอ การประกาศตวแปรส าหรบใชใน code ในสวนทถกรนในสวนนนๆ อาจจะหมายถงทง function หรอทงไฟลเลยกเปนได

let คอ การประกาศตวแปรส าหรบใชเฉพาะใน scope นนหรอเฉพาะใน block นนๆconst คอ การประกาศตวแปรแบบคาคงท หรอพดงายๆคอตวแปรแบบ Read Onlyไมระบ คอ การประกาศแบบ global ** การประกาศตวแปรแบบ global คอการประกาศแบบใดกไดแตเอาไวใน scope นอกสด

ถาประกาศไวภายใน function จะไมมผลกบคา var ทอยภายใน global เพราะมนเปน function scope เชน

var x = 0;if(x == 0) {var x = 2; }console.log(x); // result จะเทากบ 2

เปนการประกาศตวแปรแบบ block scope คอ ถาตงตวแปรไวใน scope แตเรยกจากดานนอกจะไมสามารถเรยกมาได เชน

let x = 0;if(x == 0) {let x = 2; }

console.log(x); // result จะเทากบ 0

เปนการประกาศตวแปรแบบ block scope แตแตกตางจาก let ทไมสามารถเปลยนคาได แตสามารถเปลยนคาใน object ได

const PI = 3.14;PI = 2 // PI จะไมสามารถเปลยนคาได obj = { a : 1 };obj.a = 2; console.log(obj); // result จะเทากบ { a : 2 }

Functions คอ ชดค าสงทใชในการท างานอยางใดอยางหนง ซงจะท างานเมอถกเรยกใชงานลกษณะของฟงกชนเปนดงน

function ชอฟงกชน (อารกวเมนต){ // ค าสงตางๆ }-ชอฟงกชน การตงชอฟงกชนมหลกการคลายกบการตงชอตวแปร โดยนยมเขยนดวย

ตวพมพเลก หรอหากมหลายค าอาจขนตนดวยตวพมพเลก ค าตอๆไปใหขนตนดวยตวพมพใหญกได เชน submitForm() , blockInvalidChar() เปนตน-อารกวเมนต (argument) หรอพารามเตอรคอขอมลบางอยางทฟงกชนตองใชในการ

ประมวลผล ซงอารกวเมนตจะมหรอไมมกไดขนอยกบความจ าเปน

function showMessage() {alert(‘Hello World’);

}

The name of the function

The body of the function(the code)

Parameter

รปแบบการประกาศฟงกชน (function) ใน JavaScript จะเรมตนดวย “function” เสมอแลว ตามดวยชอของฟงกชน และพารามเตอรในวงเลบ แลวทายสดคอเครองหมายปกกา

// ตวอยางการประกาศ functionfunction funcName(param1,param2) {

// ค าสงการท างาน}

function myFunction(p1, p2) {return p1 * p2; // The function

returns the product of p1 and p2}

EXAMPLE

จะเอาคาดานซายสดใน array ออก

var list = [“pen", “pencil", “ruler", “eraser"];list.shift();list;// result [“pencil", “ruler", “eraser"];

จะเอาคาดานขวาสดใน array ออก

var list = [“pen", “pencil", “ruler", “eraser"];list.pop();list;// result [“pen", “pencil", “ruler"];

จะเอาคาใหมทใสไป ไวคาทายสดใน array

var list = [“pen", “pencil", “ruler", “eraser"];list.push(“book"); list;// result [“pen", “pencil", “ruler”, “eraser“, “book"];

จะเรยงคาใน array ตามตวอกษร a-z

var list = [“pen", “pencil", “ruler", “eraser”, “book”];list.sort; list;// result [“book", “eraser", “pen”, “pencil”, “ruler”];

function sum(first, second, third) {return first + second +

third; }

EXAMPLE

รปแบบของการสราง function แบบม parameter จ ากดใชสราง function แบบม parameter จ ากด

syntax : function func_name ( param1, param2, ..., paramN ) { ชดค าสงตางๆ; return คาทสงกลบ; }

content : ใชสราง function แบบม parameter จ ากด ( ไมมเลยกได) และในกรณทสรางฟงกชนแบบ void กไมตองมค าสง return

EXAMPLE

รปแบบของการสราง function แบบม parameter จ ากดใชสราง function แบบม parameter จ ากด

syntax : var func_name = function ( param1, param2, ...,paramN) { ชดค าสงตางๆ; return คาทสงกลบ; }

content : ใชสราง function แบบม parameter จ ากด (ไมมเลยกได) และในกรณทสรางฟงกชนแบบ void กไมตองมค าสง return โดย function ทถกสรางเสรจนจะถกเกบเขาตวแปร

var funcSum = function( first, second, third) {

return first + second + third; }

EXAMPLE

รปแบบของการสราง function แบบม parameter ไมจ ากดใชสราง function แบบม parameter ไมจ ากด คอจะสงคา argument มากตวกได

syntax : function func_name ( ) { var keepLength = func_name.arguments.length; var keepValueAtIndex =

func_name.arguments[index]; ชดค าสงตางๆ; return คาทสงกลบ; }

content : ใชสราง function แบบม parameter ไมจ ากด คอจะสงคา argument มากตวกได โดยจะมค าสงนบจ านวน argument และค าสงทเรยกดคาของ argument ณ ต าแหนงทก าหนดได

function sum ( ) { var length =

sum.arguments.length; var sum = 0; for (var i=0; i<length; i++) { sum = sum + sum.arguments[i]; } return sum;

} alert (sum (1, 2, 3, 4, 5));

EXAMPLE

รปแบบของการสราง function แบบสนใชในการสราง function แบบ สน

syntax : var func_name = new Function ( "parameter", "return value" );

content : ใชในการสราง function แบบ สน

var square = new Function ("x", "return x * x"); alert ( square ( 3 ) );

Java Script Callback คอ การเรยกฟงกชนแบบ Asynchronous

Asynchronous กบ Synchronous มกจะเกยวของกบดานวศวกรรมหรอเทคโนโลย ซงมกใชเกยวกบการรบสง ขอมล สญญาณ ในรปแบบตางๆ ซงการสงขอมลหรอสญญาณตางๆนนกตองม ผรองขอ - ผตอบกลบ

Java Script Callback คอ การเรยกฟงกชนแบบ Asynchronous

• การสงแบบ Synchronousเปนการรอจงหวะใหการรองขอและการตอบกลบเสรจเปนเรองๆไปจงจะท างาน

ตามขนตอนการรองขอครงใหม

console.log('Step 1');funcSync();console.log('Step 3');

function funcSync () {console.log('Step 2');

} //step 1 2 3

!! รปแบบการท างานของโปรแกรมทวๆไปจะท างานตามล าดบจากบนลงลาง และถามการเรยก Function กจะเขาไปท าค าสงตางๆขางใน Function แลวเมอท าเสรจกจะออกมาท main โปรแกรมแลวคอยท าค าสงตอๆไปใน main โปรแกรมอกท

Java Script Callback คอ การเรยกฟงกชนแบบ Asynchronous• การสงแบบ Asynchronous

การสงแบบ Asynchronous กจะตรงกนขามกบ Synchronous คอ สามารถสงค ารองขอไปไดเรอยๆ ไมตองรอใหค าขอกอนหนาเสรจกอน

!! การท างานแบบ async นนคอนขางจะพเศษกวาตรงทวาในการเรยก Function แตละครงเราไมตองรอให Function ท างานเสรจกอน Code บรรทดถดไปสามารถท างานไดเลย

setTimeout(function(){console.log('Step 1‘)

}, 3000);console.log('Step 2')

// Step 2// Step 1

รปแบบการประกาศฟงกชนแบบ Callback

function name(option, callback){

callback(result);

}

•callback - ค าสงวนทใชคนคาผลลพธจากการ callback•callback() - สงคาผลลพธกลบไปยงฟงกชนทเรยก•result - ผลลพธทสงกลบไป สามารถสงเปนรปแบบ JSON ฟงกชน variable ตางๆท JavaScript รองรบ

การเรยกใชฟงกชนแบบ Callback • name(function(result){ });• result - ผลลพธทไดรบจากการ callback จะตงชออะไรกไดทตรงหลกการของ JavaScriptไมตรงกบค าสงวน ไมตรงกบชอตวแปรทเปน global variable

ขอเสยของ callback ส าหรบ callback สงทนกพฒนาอาจจะเจอปญหา ดงน

• หากลมเขยน callback() เพอสงผลลพธกลบ กจะไมทราบวาโปรแกรมท างานถงขนตอนไหน ซงสวนใหญเปนขอผดพลาดของนกพฒนาเอง• หากตองการผลลพธตามล าดบขน การเขยนฟงกชนทซบซอน callback จะท าใหยงเพมความซบซอนในการท างานของระบบ