Programming on WWW

Transcript Programming on WWW

517312 Programming on the world wide web
JavaScript III
อ.รัชดาพร คณาวงษ์
ภาควิชาคอมพิวเตอร์ คณะวิทยาศาสตร์ มหาวิทยาลัยศิลปากร
Array
• คือกลุ่มหน่วยความจาที่สามารถอ้างถึงได้ดว้ ยชื่อเดียวกัน
• โดยปรกติจะมีชนิดเดียวกัน (แต่ในภาษาจาวาสคริ ปต์ไม่จาเป็ น)
• การอ้างถึงสมาชิกตัวใดๆ จะต้องอ้างถึงตาแหน่งหน่วยความจาซึ่งได้มี
ส่ วนที่ใช้ในการอ้างถึงเรี ยกส่ วนนี้วา่ position number
• position number จะเขียนไว้ภายในเครื่ องหมาย [ ] หลังชื่อ
ตัวแปร
• ถ้าอาร์เรย์มีสมาชิกทั้งหมด N ตัว จะมีตาแหน่งจาก 0..(N-1)
2
การกาหนดตัวแปรอาร์เรย์
• อาร์เรย์ในภาษาจาวาสคริ ปถือว่าเป็ น Array Object ดังนั้น เรา
จะต้องใช้ operator new ในการจองพื้นที่หน่วยความจา
• ซึ่งการจองพื้นที่หน่วยความจาอาร์เรย์จะเป็ นแบบไดนามิก
รู ปแบบ
var ตัวแปร = new Array(จำนวน);
ตัวอย่าง
var c = new Array(12);
3
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>");
}
//-->
4
</script>
EX1ตัวอย่างการใช้งานอาร์ เรย์(ต่อ)
</head>
<body onload="initializeArrays()"></body>
</html>
5
EX2
ตัวอย่างการใช้งานอาร์เรย์
<script language="JavaScript">

6
การกาหนดค่าเริ่ มต้นในกับอาร์เรย์
• เราสามารถกาหนดค่าเริ่ มต้นให้กบั อาร์เรย์เมื่อตอนประกาศตัวแปรได้ 2
วิธีคือ
วิธีแรก
var ตัวแปร = [ค่ำ, ค่ำ, …, ค่ำ];
วิธีที่สอง
var ตัวแปร = new Array(ค่ำ, ค่ำ, …, ค่ำ);
7
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>
8
ผลลัพธ์ที่ได้
• ข้อมูลที่ใส่ ในอาร์ เรย์จะเป็ นชนิดใดก็ได้ตามที่ได้
เรี ยนไปแล้ว
• และในอาร์ เรย์เดียวกันอาจจะมีชนิ ดข้อมูลที่ไม่
เหมือนกันก็ได้
• ทั้งนี้เป็ นเพราะอาร์ เรย์เป็ นการจองเนื้อที่ติดกัน
เท่านั้น และเป็ นไดนามิกส์อาร์ เรย์ดงั นั้นจึงไม่
จาเป็ นที่ทุกสมาชิกจะต้องเป็ นชนิดเดียวกัน
9
ตัวแปรอาร์เรย์กบั ฟังก์ชนั
• วิธีการส่ งค่าตัวแปรอาร์เรย์ให้กบั ฟังก์ชนั ใช้ชื่ออาร์เรย์โดยไม่ตอ้ งมี
เครื่ องหมาย [ ] เลย
ตัวอย่างเช่นมีการประกาศตัวแปรอาร์เรย์เป็ น
var Temp = new Array(10);
และมีฟังก์ชนั
function modifyArray(b)
ถ้าต้องการเรี ยกใช้ฟังก์ชนั modifyArray และส่ งผ่านค่าก็ใช้ดงั นี้
modifyArray(Temp)
10
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>");
outputArray("Original array contains",a);
modifyElement(a[3]);
outputArray("Modified array contains",a);
}
function outputArray(header, theArray){
document.writeln(header+theArray.join(" ")+"<br>");
}
function modifyArray(theArray){
for(var j in theArray) theArray[j]*=2;
}
11
EX4ตัวอย่างอาร์ เรย์กบ
ั ฟังก์ชนั (ต่อ)
function modifyElement(e){
e*=2;
document.writeln("<br> Value in modifyElement:"+e);
}
//-->
</script>
</head>
<body onload="start()">
</body>
</html>
12
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>
13
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>
14
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>
15
Form Hierarchy
การอ้ างถึงสิ่ งต่ างๆ ในฟอร์ มสามารถอ้ างโดยใช้ รูปแบบดังต่ อไปนี ้
document.formName.subName.value
หรื อ
formName.subName.value
ก็ได้
16
อาร์เรย์ 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]];
17
<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>
18
</html>
Objects
• เราได้ทราบกันไปแล้วว่าในภาษาจาวาสคริ ปต์มีส่วนของ ชุดคาสัง่ ที่เรา
กาหนดมาให้เราใช้และส่ วนของออปเจ็กต์ซ่ ึงจะมีท้ งั ส่ วนทีใ่ ช้ในการเก็บ
ข้อมูลและส่ วนพฤติกรรมมาสนับสนุนการเขียนโปรแกรมได้อีก
• จากตัวอย่างก่อนหน้านี้เราจะได้เคยสัมผัสกับการใช้งานออปเจ็กต์บางตัว
ไปแล้วได้แก่
– Built-in JavaScript Objects คือ Math และ Array
– Objects provided by Web browser คือ
document และ window
19
Math Object
• เป็ นที่รวบรวม method ทางการคานวณคณิ ตศาสตร์ไว้
วิธีการใช้งานคือ
Math.method(arguments)
20
Method
Description
Example
abs(x)
absolute value of x
ceil(x)
log(x)
max(x,y)
min(x,y)
pow(x,y)
round(x)
rounds x to the smallest integer
not less than x
trigonometric cosine of x
(x in radians)
exponential method ex
rounds x to the largest integer
not greater than x
natural logarithm of x(base e)
larger value of x and y
smaller value of x and y
x raised to power y(xy)
rounds x to the closest integer
abs(7.2) is 7.2
abs(-5.6) is 5.6
ceil(9.2) is 10.0
ceil(-9.8) is -9.0
cos(0.0) is 1.0
sin(x)
sqrt(x)
trigonometric sine of x
square root of x
cos(x)
exp(x)
floor(x)
exp(1.0) is 2.7182
floor(9.2) is 9.0
floor(-9.8) is -10.0
log(2.7182) is 1.0
max(2.3,1.7) is 2.3
min(2.3,1.7) is 1.7
pow(2.0,4.0) is 16.0
round(9.7) is 10
round(9.2) is 9
sin(0.0) is 0.0 21
sqrt(900.0) is 30
ค่าคงที่ต่างๆ
Constant
Description
Value
Math.E
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E
Math.PI
Base of a natural logarithm(e)
Natural logarithm of 2
Natural logarithm of 10
Base 2 logarithm of e
Base 10 logarithm of e
the ratio of a circle’circumference
to its diameter
Square root of 0.5
Square root of 2.0
2.718
0.693
2.302
1.442
0.434
3.1415926
Math.SQRT1_2
Math.SQRT2
0.707
1.414
22
String Object
• เป็ นออปเจ็กต์ที่รวบรวมการดาเนินการกับข้อความและตัวอักษรไว้
ทั้งหมด
• ซึ่งตัวอักษรที่อยูใ่ นข้อความจะมีรหัสที่เข้าใจในภาษาจาวาสคริ ปต์เป็ น
unicode
23
Method
charAt(index)
Description
Return a string containing the character at
the index. no character index return empty.
charCodeAt(index)
Return a string containing the character at
the index. no character index return empty.
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
24
substring(start,end)
Return a substring from start to end
Method
Description
toLowerCase()
toUpperCase()
toString()
valueOf()
Return a string in which all uppercase letters
Return a string in which all lowercase letters
Return the same string as the source string
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>
25
Date Object
• ประกอบด้วย method ที่เกี่ยวข้องกับวันและเวลา
• วันและเวลาที่ทาการประมวลผลนี้จะขึ้นกับเวลาที่เครื่ องคอมพิวเตอร์
client หรื อให้กาหนดตาม UTC (Coordinated
Universal Time) หรื อที่คนส่ วนมากรู ้จกั ในนาม
Greenwich Mean Time(GMT) ก็ได้
26
Method
Description
getDate()
getUTCDate()
getDay()
getUTCDay()
getFullYear()
getUTCFullYear()
getHours()
getUTCHours()
getMilliseconds()
getUTCMilliseconds()
getMinutes()
getUTCMinutes()
getMonth()
getUTCMonth()
getSeconds()
getUTCSeconds()
getTime()
Returns 1 to 31 (UTC)
Return 0(Sunday) to 6(Saturday) UTC
Return the year as four-digit number UTC
Return 0 to 23 UTC
Return 0 to 999 number of milliseconds UTC
Return 0 to 59 the minutes UTC
Return 0(January) to 11(December)UTC
Return 0 to 59 the seconds UTC
27
Return the msec from January 1,1970 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
28
Method
Description
toLocalString()
toUTCString()
toString()
valueOf()
Return a string representing date and time
the time in number of milliseconds since
midnight, January 1,1970
29
<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>
30
Document Object
•
•
ได้ทราบมาบ้างแล้วว่ามี method write, writeln
มีอีก 2 properties คือ
– document.cookie แสดงคุกกี้ที่เก็บในคอมพิวเตอร์ สาหรับ
เอกสารนี้
– document.lastModified แสดงวันเดือนปี ที่แก้ไขครั้งสุ ดท้าย
31
Window Object
• เป็ นออปเจ็กต์ที่อิงถึง Web browser ให้ทางานได้ตามที่ตอ้ งการ
เปิ ดหน้าต่าง ปิ ดหน้าต่าง และควบคุมคุณลักษณะของหน้าต่างด้วย
32
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',‘c
spage','width=400,height=200')">
</FORM>
33
Close window
<FORM>
<INPUT type="button" value="Close
Window" onClick="window.close()">
</FORM>
34
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
35

Programming on WWW

Transcript Programming on WWW

Directory