อ.รัชดาพร คณาวงษ์ ภาควิชาคอมพิวเตอร์ คณะวิทยาศาสตร์ มหาวิทยาลัยศิลปากร 517312 Programming on the world wide web JavaScript III อ.รัชดาพร คณาวงษ์ ภาควิชาคอมพิวเตอร์ คณะวิทยาศาสตร์ มหาวิทยาลัยศิลปากร
Array คือกลุ่มหน่วยความจำที่สามารถอ้างถึงได้ด้วยชื่อเดียวกัน โดยปรกติจะมีชนิดเดียวกัน (แต่ในภาษาจาวาสคริปต์ไม่จำเป็น) การอ้างถึงสมาชิกตัวใดๆ จะต้องอ้างถึงตำแหน่งหน่วยความจำซึ่งได้มีส่วนที่ใช้ในการอ้างถึงเรียกส่วนนี้ว่า position number position number จะเขียนไว้ภายในเครื่องหมาย [ ] หลังชื่อตัวแปร ถ้าอาร์เรย์มีสมาชิกทั้งหมด N ตัว จะมีตำแหน่งจาก 0..(N-1)
การกำหนดตัวแปรอาร์เรย์ อาร์เรย์ในภาษาจาวาสคริปถือว่าเป็น Array Object ดังนั้น เราจะต้องใช้ operator new ในการจองพื้นที่หน่วยความจำ ซึ่งการจองพื้นที่หน่วยความจำอาร์เรย์จะเป็นแบบไดนามิก รูปแบบ ตัวอย่าง var ตัวแปร = new Array(จำนวน); var c = new Array(12);
ตัวอย่างการใช้งานอาร์เรย์ EX1 <html><head><title>Initializing an Array</title> <script type="text/javascript"> <!-- function initializeArrays() { var n1=new Array(5); var n2=new Array(); for(var i=0;i<n1.length;++i) n1[i]=i; for(i=0;i<5;++i) n2[i]=i; outputArray("Array n1 contains",n1); outputArray("Array n2 contains",n2); } function outputArray(header, theArray){ document.writeln("<h2>"+header+"</h2>"); document.writeln("<table border=1 width=100%>"); document.writeln("<thead><th width=100 align=\"left\">Subscript </th><th align=\"left\">Value</th></thead><tbody>"); for (var i=0;i<theArray.length;i++) document.writeln("<tr><td>"+i+"</td><td>"+theArray[i]+"</td></tr>"); document.writeln("</tbody></table>"); //--> </script>
ตัวอย่างการใช้งานอาร์เรย์(ต่อ) EX1 </head> <body onload="initializeArrays()"></body> </html>
ตัวอย่างการใช้งานอาร์เรย์ EX2 <script language="JavaScript"> <!-- hide var myArray= new Array(); myArray[0]= "first"; myArray[1]= "second"; myArray[2]= "third"; for (var i= 0; i< 3; i++) { document.write(myArray[i] + "<br>"); } // -->
การกำหนดค่าเริ่มต้นในกับอาร์เรย์ เราสามารถกำหนดค่าเริ่มต้นให้กับอาร์เรย์เมื่อตอนประกาศตัวแปรได้ 2 วิธีคือ วิธีแรก วิธีที่สอง var ตัวแปร = [ค่า, ค่า, …, ค่า]; var ตัวแปร = new Array(ค่า, ค่า, …, ค่า);
ตัวอย่างการใช้งานอาร์เรย์ EX3 <html> <head><title>Initializing an Array with a Declaration</title></head> <script type="text/javascript"> <!-- function start() { var colors=new Array("cyan","magenta","yellow","black"); var integer1=[2,4,6,8]; var integer2=[2,,,8]; outputArray("Array colors contains",colors); outputArray("Array integer1 contains",integer1); outputArray("Array integer2 contains",integer2); } function outputArray(header, theArray){ //<same as the previous example> //--> </script> </head> <body onload="start()"></body> </html>
ผลลัพธ์ที่ได้ ข้อมูลที่ใส่ในอาร์เรย์จะเป็นชนิดใดก็ได้ตามที่ได้เรียนไปแล้ว และในอาร์เรย์เดียวกันอาจจะมีชนิดข้อมูลที่ไม่เหมือนกันก็ได้ ทั้งนี้เป็นเพราะอาร์เรย์เป็นการจองเนื้อที่ติดกันเท่านั้น และเป็นไดนามิกส์อาร์เรย์ดังนั้นจึงไม่จำเป็นที่ทุกสมาชิกจะต้องเป็นชนิดเดียวกัน
ตัวแปรอาร์เรย์กับฟังก์ชัน วิธีการส่งค่าตัวแปรอาร์เรย์ให้กับฟังก์ชันใช้ชื่ออาร์เรย์โดยไม่ต้องมีเครื่องหมาย [ ] เลย ตัวอย่างเช่นมีการประกาศตัวแปรอาร์เรย์เป็น และมีฟังก์ชัน ถ้าต้องการเรียกใช้ฟังก์ชัน modifyArray และส่งผ่านค่าก็ใช้ดังนี้ var Temp = new Array(10); function modifyArray(b) modifyArray(Temp)
ตัวอย่างอาร์เรย์กับฟังก์ชัน EX4 <html> <head><title>Passing Array to Function</title></head> <script type="text/javascript"> <!-- function start() { var a=[1,2,3,4,5]; document.writeln("<h2>Passing entire array</h2>"); outputArray("Original array contains",a); modifyArray(a); outputArray("Modified array contains",a); document.writeln("<h2>Passing element of array</h2>"); modifyElement(a[3]); } function outputArray(header, theArray){ document.writeln(header+theArray.join(" ")+"<br>"); function modifyArray(theArray){ for(var j in theArray) theArray[j]*=2;
ตัวอย่างอาร์เรย์กับฟังก์ชัน(ต่อ) EX4 function modifyElement(e){ e*=2; document.writeln("<br> Value in modifyElement:"+e); } //--> </script> </head> <body onload="start()"> </body> </html>
ตัวอย่างการเรียงข้อมูล EX5 <html> <head><title>Sorting Array</title></head> <script type="text/javascript"> <!-- function start() { var a=[10,1,9,8,2,7,3,6,4,5]; document.writeln("<h2>Sorting entire array</h2>"); outputArray("Original array contains",a); a.sort(compareIntegers); outputArray("Data in array order as:",a); } function outputArray(header, theArray){ document.writeln(header+theArray.join(" ")+"<br>"); function compareIntegers(value1,value2){ return parseInt(value1)-parseInt(value2); //--> </script> </head><body onload="start()"></body> </html>
ตัวอย่างการค้นหาข้อมูล EX6 <html> <head><title>Linear Search of Array</title></head> <script type="text/javascript"> <!-- var a=new Array(100); for(var i=0;i<a.length;++i) a[i]=2*i; function buttonPressed() { var searchKey = searchForm.inputVal.value; var element = linearSearch(a,parseInt(searchKey)); if (element != -1) searchForm.result.value = "Found value in element" + element; else searchForm.result.value = "Value not Found"; } function linearSearch( theArray, key) { for(var n=0;n<theArray.length;n++) if(theArray[n]==key) return n; return -1; //--> </script>
ตัวอย่างการค้นหาข้อมูล EX6 </head> <body> <form name="searchForm" action=""><p>Enter integer search key<br> <input name="inputVal" type="text"> <input name="search" type="button" value="Search" onclick="buttonPressed()"></br></p><p>Result<br> <input name="result" type="text" size=30></p></form></body> </html>
Form Hierarchy การอ้างถึงสิ่งต่างๆ ในฟอร์มสามารถอ้างโดยใช้รูปแบบดังต่อไปนี้ document.formName.subName.value หรือ formName.subName.value ก็ได้
อาร์เรย์ 2 มิติ การสร้างอาร์เรย์ 2 มิติ จะเป็นการสร้างอาร์เรย์ซ้อนอาร์เรย์กล่าวคือ ตัวอย่าง var b; b = new Array(2); b[0] = new Array(5); b[1] = new Array(3); b[0][1] = 5; var c = [[1,2,3],[0,1]];
<html> <head><title>Initializing Multidimensional Array</title> <script type="text/javascript"> <!-- function start() { var array1 = [ [1,2,3], //first row [4,5,6]]; //second row var array2 = [ [1,2], //first row [3], //second row [4,5,6]]; //third row outputArray("Array1 contains",array1); outputArray("Array2 contains",array2); } function outputArray(header, theArray){ document.writeln("<h2>"+header+"</h2><tt>"); for(var i in theArray){ for(var j in theArray[i]) document.write(theArray[i][j]+" "); document.writeln("<br>"); document.writeln("</tt>"); //--> </script></head> <body onload="start()"></body> </html>
Objects เราได้ทราบกันไปแล้วว่าในภาษาจาวาสคริปต์มีส่วนของ ชุดคำสั่งที่เรากำหนดมาให้เราใช้และส่วนของออปเจ็กต์ซึ่งจะมีทั้งส่วนที่ใช้ในการเก็บข้อมูลและส่วนพฤติกรรมมาสนับสนุนการเขียนโปรแกรมได้อีก จากตัวอย่างก่อนหน้านี้เราจะได้เคยสัมผัสกับการใช้งานออปเจ็กต์บางตัวไปแล้วได้แก่ Built-in JavaScript Objects คือ Math และ Array Objects provided by Web browser คือ document และ window
Math Object เป็นที่รวบรวม method ทางการคำนวณคณิตศาสตร์ไว้ วิธีการใช้งานคือ Math.method(arguments)
Method Description Example abs(x) absolute value of x abs(7.2) is 7.2 abs(-5.6) is 5.6 ceil(x) rounds x to the smallest integer ceil(9.2) is 10.0 not less than x ceil(-9.8) is -9.0 cos(x) trigonometric cosine of x cos(0.0) is 1.0 (x in radians) exp(x) exponential method ex exp(1.0) is 2.7182 floor(x) rounds x to the largest integer floor(9.2) is 9.0 not greater than x floor(-9.8) is -10.0 log(x) natural logarithm of x(base e) log(2.7182) is 1.0 max(x,y) larger value of x and y max(2.3,1.7) is 2.3 min(x,y) smaller value of x and y min(2.3,1.7) is 1.7 pow(x,y) x raised to power y(xy) pow(2.0,4.0) is 16.0 round(x) rounds x to the closest integer round(9.7) is 10 round(9.2) is 9 sin(x) trigonometric sine of x sin(0.0) is 0.0 sqrt(x) square root of x sqrt(900.0) is 30
ค่าคงที่ต่างๆ Constant Description Value Math.E Base of a natural logarithm(e) 2.718 Math.LN2 Natural logarithm of 2 0.693 Math.LN10 Natural logarithm of 10 2.302 Math.LOG2E Base 2 logarithm of e 1.442 Math.LOG10E Base 10 logarithm of e 0.434 Math.PI the ratio of a circle’circumference 3.1415926 to its diameter Math.SQRT1_2 Square root of 0.5 0.707 Math.SQRT2 Square root of 2.0 1.414
String Object เป็นออปเจ็กต์ที่รวบรวมการดำเนินการกับข้อความและตัวอักษรไว้ทั้งหมด ซึ่งตัวอักษรที่อยู่ในข้อความจะมีรหัสที่เข้าใจในภาษาจาวาสคริปต์เป็น unicode
Method Description charAt(index) Return a string containing the character at the index. no character index return empty. charCodeAt(index) Return a string containing the character at concat(string) same as + fromCharCode( Converts a list of Unicode values into a string v1,v2,..) Containing the corresponding characters indexOf(sub,index) Search for the first occurrence of substring starting from position index in the string lastIndexOf(sub,index) Search for the last occurrence of substring starting from position index slice(start,end) Returns a string containing the portion of the string from index start through index end. split(string) Splits the source string into an array of strings (token) substr(start,length) Return a string containing length characters substring(start,end) Return a substring from start to end
Method Description toLowerCase() Return a string in which all uppercase letters toUpperCase() Return a string in which all lowercase letters toString() Return the same string as the source string valueOf() Return the same string as the source string Method that generate XHTML tags anchor(name) Wraps the source string in an anchor element(<a></a>)with name as anchor name blink() Wraps the source string in a <blink> fixed() Wraps the source string in a <tt> link(url) Wraps the source string in (<a></a>) strike() Wraps the source string in <strike> sub() Wraps the source string in <sub> sup() Wraps the source string in <sup>
Date Object ประกอบด้วย method ที่เกี่ยวข้องกับวันและเวลา วันและเวลาที่ทำการประมวลผลนี้จะขึ้นกับเวลาที่เครื่องคอมพิวเตอร์ client หรือให้กำหนดตาม UTC (Coordinated Universal Time) หรือที่คนส่วนมากรู้จักในนาม Greenwich Mean Time(GMT) ก็ได้
Method Description getDate() Returns 1 to 31 (UTC) getUTCDate() getDay() Return 0(Sunday) to 6(Saturday) UTC getUTCDay() getFullYear() Return the year as four-digit number UTC getUTCFullYear() getHours() Return 0 to 23 UTC getUTCHours() getMilliseconds() Return 0 to 999 number of milliseconds UTC getUTCMilliseconds() getMinutes() Return 0 to 59 the minutes UTC getUTCMinutes() getMonth() Return 0(January) to 11(December)UTC getUTCMonth() getSeconds() Return 0 to 59 the seconds UTC getUTCSeconds() getTime() Return the msec from January 1,1970 UTC getTimezoneOffset() Return difference in minutes GMT-UTC
Method Description setDate(val) set date 1 to 31 (UTC) setUTCDate(val) setFullYear(y,m,d) set the year as four-digit number UTC setUTCFullYear(y,m,d) setHours(h,m,s,ms) set 0 to 23 UTC setUTCHours(h,m,s,ms) setMilliseconds(ms) set 0 to 999 number of milliseconds UTC setUTCMilliseconds(ms) setMinutes(m,s,ms) set 0 to 59 the minutes UTC setUTCMinutes(m,s,ms) setMonth(m,d) set 0(January) to 11(December)UTC setUTCMonth(m,d) setSeconds(s,ms) set 0 to 59 the seconds UTC setUTCSeconds(s,ms) setTime(ms) set the msec from January 1,1970 UTC
Method Description toLocalString() Return a string representing date and time toUTCString() toString() valueOf() the time in number of milliseconds since midnight, January 1,1970
<head><title>Date and Time Methods</title> <script type="text/javascript"> var current = new Date(); document.writeln("<h1>String representations </h1>"); document.writeln("toString:"+current.toString()+ "<br>toLocalString:"+current.toLocaleString()+ "<br>toUTCString:"+current.toUTCString()+ "<br>valueOf:"+current.valueOf()); document.writeln("<h1>Get methods for local time</h1>"); document.writeln("getDate: "+current.getDate()+ "<br>getDay: "+current.getDay()+ "<br>getMonth: "+current.getMonth()+ "<br>getFullYear: "+current.getFullYear()+ "<br>getTime: "+current.getTime()+ "<br>getHours: "+current.getHours()+ "<br>getMinutes: "+current.getMinutes()+ "<br>getSeconds:"+current.getSeconds()+ "<br>getMilliseconds:"+current.getMilliseconds()); </script></head></html>
Document Object ได้ทราบมาบ้างแล้วว่ามี method write, writeln มีอีก 2 properties คือ document.cookie แสดงคุกกี้ที่เก็บในคอมพิวเตอร์สำหรับเอกสารนี้ document.lastModified แสดงวันเดือนปีที่แก้ไขครั้งสุดท้าย
Window Object เป็นออปเจ็กต์ที่อิงถึง Web browser ให้ทำงานได้ตามที่ต้องการเปิดหน้าต่าง ปิดหน้าต่าง และควบคุมคุณลักษณะของหน้าต่างด้วย
Opening a New Window window.open('url to open','window name', 'attribute1,attribute2') <FORM> <INPUT type="button" value="New Window!" onClick="window.open('http://www.cs.su.ac.th',‘cspage','width=400,height=200')"> </FORM>
Close window <FORM> <INPUT type="button" value="Close Window" onClick="window.close()"> </FORM>
Attributes width=300 height=200 resizable=yes or no scrollbars=yes or no toolbar=yes or no location=yes or no directories=yes or no status=yes or no menubar=yes or no copyhistory=yes or no