Java script เบื้องต้น

Java Script
เ อกชัย วอสูงเนิน

ตัวแปรของจาวาสคริปต์
ในขั้นตอนของการพัฒนาโปรแกรมจะต้องมีการดาเนินการกับข้อมูล ซึ่งนักพัฒนา จาเป็นที่จะต้องทราบถึงหลักการและวิธีการของภาษานั้นๆ จาวาสคริปต์เป้ฯภาษที่ใช้ตัว แปรแบบ ไดนามิกกล่าวคือ เป็นภาษาที่สามารถเปลี่ยนชนิดของตัวแปรได้แบบด้วย ตัวเองเพื่อเพิ่มความยืดหยุ่นในการทางาน โดยปกติแล้วในการเขียนเกม เราจะใช้ตัวแปรที่ สาคัญ ได้แก่ ตัวแปรชนิดจานวนเต็ม (Integer) ตัวแปรชนิดทศนิยม (Float),ตัว แปรชนิดข้อความ (String), ตัวแปรชนิด Boolean, ตัวแปรแบบอาร์เรย์ (Array) และตัวแปรชนิดออปเจ็กต์(Object)

ตัวแปรของจาวาสคริปต์
เราสามารถประกาตัวแปรด้วยคาสั่ง
varชื่อของตัวแปร=ค่าของตัวแปร;
ข้อกำหนดในกำรตั้งชื่อตัวแปรของจำวำสคริปต์
1. อักษรแรกของชื่อตัวแปรจะต้องขึ้น_หรือตัวอักษรภาษาอังกฤษ หรือเครื่องหมาย $
2. ในกรณีที่ถ้าหากขึ้นต้นด้วยตัวเลขจะต้องมีตัวอักษรภาอังกฤษแทรกอยู่ในชื่อตัวแปร
3. ไม่ซ้ากับคาสงวน (Reversed word) ในภาษาจาวาสคริปต์ เช่น คาว่า function, var
หรือ return
4.ไม่มีการเว้นวรรคช่องว่างในชื่อตัวแปร
5.จาวาสคริปต์เป็นภาแบบ Case Sensitive ตัวอักษรพิมพ์เล็ก-ใหญ่ มีความหมายแตกต่าง กัน

ดังตัวอย่างการประกาตัวแปร
(game5-13.html)
<html>
<head><meta charset="utf-8">
<title> game5-13 </title>
</head>
<body>
<canvas id="myCanvas" width="200" height="400"></canvas>
<script type="text/javascript">
varx = 1.1;
alert(x);
document.write(x);
</script>
</body>
</html>
เมื่อเราต้องการดูค่าตัวแปร เราสามารถใช้คาสั่ง alert()

ตัวอย่างตัวแปรชนิดจานวนเต็ม (Integer)
(game5-14.html)
<html>
</head>
<body>
vara=100;
varb=100;
varc=a+b;
alert(c);
</script>
</body>
</html>
ในกรณีที่ไม่ชอบการแสดงผลแบบแจ้งเตือน เราสามารถช้าสั่ง white ในการแสดงผลตัวแปรได้ เช่น document.write(x); หรือ document.writ(“Value x is”+x);

ตัวแปรชนิดทศนิยม (Float)
(game5-15.html)
<html>
<title> Game4-8 </title>
</head>
<body>
vara = 1.01;
varb = 1.5;
varc=a+b;
alert(c);
</script>
</body>
</html>

ตัวแปรชนิดข้อความ(String)
(game5-16.html)
<html>
<title> Game4-8 </title>
</head>
<body>
vara = "HTML5";
varb = " JavaScript";
varc=a+b;
alert(c);
</script>
</body>
</html>

ตัวแปรชนิด Boolean
ชนิดของตัวแปรที่สามารถเก็บค่าตรรกะจริง (True) หรือเท็จ (False)
(game5-17.html)
<html>
</head>
<body>
vara = true;
varb = false;
alert("a : "+a+" , b : "+b);
</script>
</body>
</html>

ตัวแปรแบบอาร์เรย์ (Array)
ในการเขียนเกม เราอาจจะต้องเก็บชุดลาดับของคีย์เฟรม (Key Frame) เอาไว้ใน รูปแบบของตัวแปรชนิดอาร์เรย์ ซึ่งเป็นโครงสร้างพื้นฐานของการเก็บข้อมูล การเข้าถึง ข้อมูลที่เก็บไว้ เราจะใช้ ดัชนี หรือ Index เป็นตัวอ้างอิงข้อมูล จาวาสคริปต์จะเริ่มจาก Index ที่ 0ดังตัวอย่างต่อไปนี้

ตัวแปรแบบอาร์เรย์ (Array)
(game5-18.html)
<html>
<title> game5-18</title>
</head>
<body>
vararray_a=new Array();
array_a[0] = 10;
array_a[1] = 20;
alert(array_a);
</script>
</body>
</html>

ตัวแปรชนิดออปเจ็กต์(Object)
ในบางครั้งเราจาเป็นจะต้องรวมประเภทของตัวแปรที่แตกต่างหลายชนิด ประกอบ เป็นตัวแปรชนิดเดียวกัน ซึ่งเรียกว่า ออปเจ็กต์เช่น ออบเจ็กต์ของตาแหน่งบนแกนสองมิติ จะประกอบไปด้วย x และ y เราสามารถใช้จาวาสคริปต์สร้างออบเจ็กต์ดังนี้
varposition={x:10, y:50};
การอ้างอิงค่าที่อยู่ในออบเจ็กต์ เราจะใช้ชื่อของออบเจ็กต์ตามด้วยเครื่องหมาย . (จุด) และตัวแปรย่อยที่อยู่ในออบเจ็กต์ เช่น position.xและ position.y

ตัวแปรชนิดออปเจ็กต์(Object)
(game5-19.html)
<html>
<title> game5-19</title>
</head>
<body>
varposition={x:10, y:50};
alert(position.x+", "+position.y);
</script>
</body>
</html>

คาสั่ง prompt()
เป็นคาสั่งที่ช่วยรับอินพุตและใส่ค่าให้ตัวแปร เพื่อความสะดวกในการทดสอบ โปรแกรมดังตัวอย่างนี้
(game5-20.html)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>prompt command</title>
</head>
<body>
varinputString= prompt("What's your name?","putyour name here");
alert("Your name is :"+inputString);
</script>
</body>
</html>

เมธอดที่เกี่ยวข้องกับวันเวลา
จาวาสคริปต์ มีเมธอดที่เกี่ยวข้องกับการวันและเวลาดังนี้
เมธอด
ความหมาย
getDate()
คืนค่าวันของเดือน (เริ่มจาก 1-31)
getDay()
คืนค่าเป็นวันในอาทิตย์ (เริ่มจาก 0-6)
getHours()
คืนค่าเป็นชั่วโมง(เริ่มจาก 0-23)
getMinutes()
คืนค่าเป็นนาที(เริ่มจาก 0-59)
getSeconds()
คืนค่าเป็นวินาที(เริ่มจาก 0-59)
getTime()
คืนค่าเป็นวันเดือนปี เช่น Jan 1,1970
getFullYear()
คืนค่าเป็นปี ค.ศ.

ตัวอย่างการใช้งาน
(game5-21.html)
<body>
<p></p>
varnow = new Date();
document.write("Today is "+now.getDate()+"<br>");
document.write("Today is "+now.getDay()+"<br>");
document.write("Today is "+now.getTime()+"<br>");
document.write("Today is "+now.getFullYear()+"<br>");
</script>
</body>
</html>

ประโยคคาสั่งแบบมีเงื่อนไข (If Condition- Statement)
เมื่อเราทาการเขียนโปรแกรมที่ต้องการแสดงผลตามเงื่อนไขที่แตกต่างกัน เราสามารถใช้การเขียน คาสั่งแบบมีเงื่อนไขเพื่อใช้ในการตัดสินใจได้ ซึ่งสามารถแบ่งออกเป็น 4ประเภท ได้แก่
1. If statement เป็นคาสั่งที่จะทางานต่อเมื่อประโยคเงื่อนไขเป็นจริง (true) แล้วโปรแกรมจะทา ตามคาสั่ง
2. If-else statement เป็นคาสั่งที่จะทางานก็ต่อเมื่อประโยคเงื่อนไขเป็นจริง (true) แล้วโปรแกรมจะ ทาตามคาสั่งแรก ถ้าประโยคเงื่อนไขเป็นเท็จโปรแกรมจะทาตามคาสั่งที่สอง
3. Nested-if เป็นคาสั่งที่ใช้สาหรับเงื่อนไขที่มีหลายกรณี เช่น การตัดลาดับเกรดตามคะแนนที่ได้
4. Switch statement ในกรณีที่เงื่อนไขมีหลายกรณี เราอาจใช้ Switch statement เข้าช่วย ซึ่งทา ให้โปรแกรมเราอ่านง่ายยิ่งขึ้น

If statement
(game5-22.html)
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p>X=10 , Y=5, If X > Y then X-Y </p>
<button onclick="myFunction()">Run</button>
<p id="myParagraph"></p>
<script>
function myFunction()
{
varx=10;
vary=5;
varz;
if (x>y){
z=x-y;
}
document.getElementById("myParagraph").innerHTML=z;
}
</script>
</body>
</html>

If-else statement
(game5-23.html)
<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8"></head>
<body>
<p id="input">65 </p>
<script>
{
varage=65;
varz;
if (age>=60){
z="You are older";
}else{
z="You are younger";
}
document.getElementById("myParagraph").innerHTML=z;
}
</script>
</body>
</html>

Nested-if
(game5-24.html)
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<p id="input">55 </p>
<script>
{
varscore=55;
vargrade;
if (score>=80){
grade="A";
}else if(score>=75){
grade="B+";
grade="B+";
grade="C+";
grade="C";
grade="D+";
grade="D";
}else{
grade="F";
}
document.getElementById("myParagraph").innerHTML=grade;
}
</script>
</body>
</html>

Switch statement
(game5-25.html)
<html>
<body>
varx;
vard=new Date().getDay();
switch (d)
{
case 0:
x="Today it's Sunday";
break;
case 1:
x="Today it's Monday";
break;
case 2:
x="Today it's Tuesday";
break;
case 3:
x="Today it's Wednesday";
break;
case 4:
x="Today it's Thursday";
break;
case 5:
x="Today it's Friday";
break;
case 6:
x="Today it's Saturday";
break;
default:
x="Looking forward to the Weekend";
}
alert(x);
</script>
</body>
</html>

การวนซ้าการทางาน (Loop)
การวนซ้าการทางานหรือลูป (Loop) เป็นเครื่องมือที่สามารถวนการทางานของโปรแกรมด้วยโค้ด ชุดเดิมตามรอบ หรือเงื่อนไขที่เรากาหนด ซึ่งในการทาเกมในหนังสือเล่มนี้นั้น เราจะใช้เพียงคาสั่ง for และ while เท่านั้น
1.การวนซ้าการทางานด้วยคาสั่ง For คาสั่ง For เป็นการวนลูปการทางานตามเงื่อนไขที่ยังเป็น จริง โดยเริ่มต้นจาค่าแรก (Initial-Value) โดยจะตรวจสอบว่าเงื่อนไขยังเป็นจริงอยู่หรือไม่ โดย เปรียบเทียบกับเงื่อนไข (Condition) ถ้าเป็นจริงจะทางานภายในลูป หลังจากนั้นจะทาการเปลี่ยนแปลงา ตัวแปรตาขั้น (Step)
For (varIntitial-value;Condition;Step){ statement1; … }

การวนซ้าการทางานด้วยคาสั่ง For
(game5-26.html)
<!DOCTYPE html>
<html><meta charset="utf-8">
<body>
<p>Click the button to loop through a block of code five times.</p>
<button onclick="myFunction()">Click</button>
function myFunction(){
varx="";
for (vari=0;i<5;i++){
x=x + "<p>The number is " + i+ "</p>";
}
document.getElementById("myParagraph").innerHTML=x;
}
</script>
</body>
</html>

การวนซ้าการทางานด้วยคาสั่ง while
2. การวนซ้าการทางานด้วยคาสั่ง while เป็นคาสั่งวนการทางาน ซึ่งจะทางาน ต่อเนื่องกันไปจนกว่าเงื่อนไขจะเป็นเท็จ โยเราจะต้องทาการปรับเปลี่ยนค่าของตัวแปรที่ใช้ ตรวจสอบเงื่อนไข (Condition) มิฉะนั้นโปรแกรมจะทางานแบบอนันต์ (อินฟินิตี้)
While(Condition){
statement1;
}

การวนซ้าการทางานด้วยคาสั่ง while
(game5-27.html)
<!DOCTYPE html>
<body>
<button onclick="myFunction()">Click</button>
{varx="",i=0;
while (i<5){
x=x + "<p>The number is " + i+ "</p>";
i++;
}
document.getElementById("myParagraph").innerHTML=x;
}
</script>
</body>
</html>

ตัวดาเนินการของจาวาสคริปต์ (Arithmetic Operators)
ตัวดาเนินการ
คาอธิบาย
ตัวอย่าง
ผลลัพธ์ x
ค่าของ y
+
บวก
x=y+2
7
5
-
ลบ
x=y-2
3
5
*
คูณ
x=y*2
10
5
/
หาร
x=y/2
2.5
5
%
โมดูเลชั่น(หารเอาเศษ)
x=y%2
1
5
++
เพิ่มค่าที่ละ 1
x=++y
6
6
x=y++
5
6
--
ลดค่าที่ละ 1
x=--y
4
4
x=y--
5
4

ตัวอย่างการใช้ตัวดาเนินการของจาวาสคริปต์
(game5-28.html)
<body>
i= 4
<p id="myParagraph1">++i</p>
<p id="myParagraph2">--i</p>
<p id="myParagraph3">i+=1</p>
<p id="myParagraph4">i*=2 </p>
<p id="myParagraph5">6/3</p>
<p id="myParagraph6">9%2</p>
<button onclick="myFunction()"> Run</button>
<script>
{
vari=4;
document.getElementById("myParagraph1").innerHTML="++i= "+(++i);
document.getElementById("myParagraph2").innerHTML="--i= "+(--i);
document.getElementById("myParagraph3").innerHTML="i+=1 ="+(i+=1) ;
document.getElementById("myParagraph4").innerHTML="i*=2 = "+(i*=2) ;
document.getElementById("myParagraph5").innerHTML="6/3 = "+(6/3);
document.getElementById("myParagraph6").innerHTML="9%2 = "+(9%2);
}
</script>
</body>

การเปรียบเทียบค่า
กาหนดให้ x มีค่าเท่ากับ 5
ตัวแปร
การเปรียบเทียบ
ผลลัพธ์
==
เท่ากับ
x==8
FALSE
x==5
TRUE
===
เท่ากับ (ค่าและชนิดของตัวแปร)
x===”5”
FALSE
x===5
TRUE
!=
ไม่เท่ากับ
x!=8
TRUE
!==
ไม่เท่ากับ (ค่าและชนิดของตัวแปร)
x!==”5”
TRUE
x!==5
FALSE
>
มากกว่า
x>8
FALSE
<
น้อยกว่า
x<8
TRUE
>==
มากกว่าเท่ากับ
x>=8
FALSE
<==
น้อยกว่าเท่ากับ
x<=8
TRUE

ตัวอย่างการใช้การเปรียบเทียบค่า
(game5-29.html)
<!DOCTYPE html>
<body>
<p>a = 10, b=5, c=15</p>
<p id="myID1"></p>
<p id="myID2"></p>
vara = 10;
varb = 5;
varc= 15;
vard;
vare;
if (a>=b){
d="a is more than b";
}
if (a<=c){
e="a is less than c";
}
document.getElementById("myID1").innerHTML= d;
document.getElementById("myID2").innerHTML=e;
</script>
</body>
</html>

ตัวดาเนินการทางตรรกะ
กาหนดให้ x=6 ,y=3
ตัวดาเนินการ
ตัวอย่าง
&&
และ
(x<10 && y>1) is true
||
หรือ
(x==5 || y==5) is false
!
ไม่
!(x==y) is true

ตัวดาเนินการทางตรรกะ
(game5-30.html)
vara = 15;
varb = 5;
varc= 10;
if (a>=b && a>=c){
alert("a is highest");
}
</script>

เมธอดทางคณิตศาสตร์ที่สาคัญ
เมธอด Math.floor()
เป็นคาสั่งที่ใช้สาหรับการปัดเศษลง เช่น Math.floor(1.2)=1,Math.floor(1.6)=1 เป็นต้น
(game5-31.html)
<!DOCTYPE html>
<html>
<body>
<p id="myParagraph1">Floor(1.2)</p>
<p id="myParagraph2">Floor(1.5)</p>
<p id="myParagraph3">Floor(-1.1)</p>
<p id="myParagraph4">Floor(-1.5)</p>
<script>
{
vara=Math.floor(1.2);
varb=Math.floor(1.5);
varc=Math.floor(-1.1);
vard=Math.floor(-1.5);
document.getElementById("myParagraph1").innerHTML="Floor(1.2) = "+a ;
document.getElementById("myParagraph2").innerHTML="Floor(1.5) = "+b;
document.getElementById("myParagraph3").innerHTML="Floor(-1.1) = "+c ;
document.getElementById("myParagraph4").innerHTML="Floor(-1.5) = "+d ;
}
</script>
</body>
</html>

เมธอด Math.round()
เป็นคาสั่งที่ใช้สาหรับการปัดเศษตามทศนิยม ถ้าทศนิยมน้อยกว่า 5 จะปัดเศษลง แต่ถ้ามากกว่า หรือเท่ากับ 5 จะปัดเศษขึ้น เช่น Math.round(1.4)=1, Math.round(1.5)=2 เป็นต้น
(game5-32.html)
<!DOCTYPE html>
<html>
<body>
<p id="myParagraph1">Round(1.2)</p>
<p id="myParagraph2">Round(1.5)</p>
<p id="myParagraph3">Round(-1.1)</p>
<p id="myParagraph4">Round(-1.5)</p>
<script>
{
vara=Math.round(1.2);
varb=Math.round(1.5);
varc=Math.round(-1.1);
vard=Math.round(-1.5);
document.getElementById("myParagraph1").innerHTML="Round(1.2) = "+a ;
document.getElementById("myParagraph2").innerHTML="Round(1.5) = "+b;
document.getElementById("myParagraph3").innerHTML="Round(-1.1) = "+c ;
document.getElementById("myParagraph4").innerHTML="Round(-1.5) = "+d ;
}
</script>
</body>
</html>

เมธอด
เมธอด Math.rondom() เป็นคาสั่งหาสุ่มค่า เช่น ระหว่าง 0 ถึง 1
เมธอด Math.sqrt() เป็นคาสั่งหาค่า square root เช่น Math.sqrt(4)=2, Math.sqrt(3)=1.732 เป็นต้น
(game5-33.html)
<!DOCTYPE html>
<body>
<p id="myParagraph1">Math.random()</p>
<p id="myParagraph2">Random จานวน ระหว่าง 1ถึง 10</p>
<p id="myParagraph3">Random จานวน ระหว่าง 6ถึง 10</p>
<p id="myParagraph4">Square root of 4 </p>
<p id="myParagraph5">Square root of 3 </p>
<script>
{
vara=Math.random();
varb=Math.floor((Math.random()*10))+1;
varc=Math.floor((Math.random()*5))+6;
vard=Math.sqrt(4);
vare=Math.sqrt(3);
document.getElementById("myParagraph1").innerHTML="Math.random() = "+a ;
document.getElementById("myParagraph2").innerHTML="Random จานวน ระหว่าง 1ถึง 10 = "+b;
document.getElementById("myParagraph3").innerHTML="Random จานวน ระหว่าง 6ถึง 10 = "+c ;
document.getElementById("myParagraph4").innerHTML="Square root of 4 = "+d ;
document.getElementById("myParagraph5").innerHTML="Square root of 3 = "+e ;
}
</script>
</body>
</html>

การเขียนฟังก์ชั่น (Function)
ในการคานวณหรือวาดรูปซ้าๆ เราสามารถลดการเขียนโค้ดให้สั้นลงด้วยการเขียน ฟังก์ชั่นการทางาน เช่น ฟังก์ชั่นการวาดฉากหลัง ฟังก์ชั่นการวาดตัวละครหลัก แล้วทากร เรียกใช้เมื่อเราต้องการ
จาวาสคริปต์จะแตกต่างกับการเขียนฟังก์ชั่นในภาษาอื่น ตรงที่นักพัฒนาไม่ต้องระบุ ว่า จะ Return ค่าเป็นตัวแปรชนิดอะไร ทั้งนี้ก็เพื่อความคล่องตัวในการเขียนโค้ด แต่ ในทางกลับกันผู้เขียนควรระวังในการใช้งาน เพราะเราต้องทราบชนิดของตัวแปรด้วย ตนเอง

Function ไม่มีการ Return
Function ไม่มีการ Return ค่า เช่น ฟังก์ชั่นการแสดงข้อความเตือน
(game5-34.html)
<!DOCTYPE html>
<body>
printHello();
function printHello(){
alert("Hello");
}
</script>
</body>
</html>

Function มีการ Return
Function มีการ Return เช่น ฟังก์ชั่นการหาผลคูณ
(game5-35.html)
<!DOCTYPE html>
<body>
document.getElementById("myParagraph").innerHTML=myFunction(4,3);
function myFunction(a,b)
{
return a*b;
}
</script>
</body>
</html>

การเขียนฟังก์ชั่นสาหรับเปลี่ยนรูป (Swapping Images)
สามารถใช้ภาษาจาวาสคริปต์เปลี่ยน หรือสลับรูปบนเว็บเพจของเรา ในตัวอย่างนี้จะ เป็นรูปหลอดไปสองสถานะ คือ เปิดและปิด เมื่อผู้ใช้งานเอาเมาส์วางไว้ที่รูปฟังก์ชั่น swappingImageจะเริ่มการทางานโดยจะทาการสลับรูปจากปิดเปิดไฟ และเมื่อเราลาก เมาส์ออกจากบริเวณรูปฟังก์ชั่น initialImageจะทางานโดยการเปลี่ยนรูปกลับไปยัง สถานะเริ่มต้น

(Swapping Images)
(game5-36.html)
<!DOCTYPE HTML>
<html>
<head>
</head>
<p></p>
<body>
<imgid="myPic" src="light1.png" onMouseOver="swappingImage()" onMouseOut="initialImage()" width="50" height="100">
<script>
varpic=document.getElementById("myPic");
function swappingImage(){
pic.src="light2.png";
}
function initialImage(){
}
</script>
</body>
</html>

การใช้ Pre-loading ของ Image
การใช้ Image Pre-loadingซึ่งประกอบด้วย 2 ขั้นตอน ดังนี้
ขั้นตอนที่ 1 การประกาศวัตถุให้เบราเซอร์ทราบ (create image object) ด้วยคาสั่ง
varชื่อตัวแปรรูป=new Image();
var= ชื่อตัวแปรรูป = new Image(ความกว้างของรูป, ความสูงของรูป);
เบราเซอร์จะทาการเตรียมหน่วยความจาสาหรับแสดงผลด้วยขนาดของความกว้างและความสูงของรูปที่ระบุ
ขั้นตอนที่ 2 อ้างอิงที่อยู่ของรูปภาพที่เราต้องการใช้
ชื่อตัวแปรรูป.src=”ไฟล์รูป”;

Pre-loading ของ Image
(game5-37.html)
<!DOCTYPE HTML>
<html>
<head>
</head>
<p></p>
<body>
<imgid="myPic" src="light1.png" onMouseOver="swappingImage()" onMouseOut="initialImage()" width="50" height="100">
<script>
varpic=document.getElementById("myPic");
varimg= new Image();
img.src="light2.png";
function swappingImage(){
pic.src=img.src;
}
function initialImage(){
}
</script>
</body>
</html>

การเก็บข้อมูล (Storage Data)
HTML5 สามารถเก็บข้อมูลไว้ที่เครื่องของผู้ใช้งานได้ที่เบราเซอร์ของผู้ใช้งานผ่าน localstorageและ sessionStorageซึ่งมีข้อแตกต่างดังนี้ localstorageสามารถเก็บ ข้อมูลไว้ตลอดไม่มีวันหมดอายุแม้จะปิดเบราเซอร์ไปแล้ว ซึ่งเราสามารถอ้างอิงตัวแปร ชนิดนี้ได้ด้วยการพิมพ์ localStroageตัวแปร

(game5-38.html)
<html>
<script>
function clickSetCounter()
{
localStorage.clickcount=0;
}
function clickCounter()
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount+ " time(s).";
}
</script>
</head>
<body>
<p><button onclick="clickSetCounter()" type="button">Set localStrorageto 0</button></p>
<p><button onclick="clickCounter()" type="button">Increasing value</button></p>
<p id="result"></p>
</body>
</html>

ในส่วนของตัวแปรรูปแบบ sessionStorageจะสามารถเก็บข้อมูลได้จนกว่าผู้ใช้งานจะปิดเบราเซอร์เท่านั้น เราสามารถ เรียกใช้ตัวแปรชนิดนี้ได้โดยการพิมพ์ sessionStorage.ตัวแปร
(game5-39.html)
<!DOCTYPE html>
<html>
<script>
function clickSetCounter()
{
sessionStorage.clickcount=0;
}
function clickCounter()
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount+ " time(s).";
}
</script>
</head>
<body>
<p><button onclick="clickSetCounter()" type="button">Set localStrorageto 0</button></p>
<p><button onclick="clickCounter()" type="button">Increasing value</button></p>
<p id="result"></p>
</body>
</html>

การเปลี่ยนหน้าเว็บเพจ(Redirecting visitors to other pages)
ถ้าการพัฒนาเกมประกอบด้วยหลายเว็บเพจ(หลายไฟล์) โดยแต่ละหน้าแสดงส่วน ต่างๆ ของเกม เช่น หน้าเมนู หน้าวิธีการเล่น หน้าตัวเกม ฯลฯ โดยปกติแล้ว เราสามารถ เปลี่ยนเพจได้ด้วยปุ่มกด แต่บางครั้งเราก็จาเป็นต้องเปลี่ยนหน้าเพจโดยอัตโนมัติด้วยการ ทา redirecting ด้วยคาสั่ง window.localtion=”หน้าเพลที่ต้องการ.html”

การเปลี่ยนหน้าเว็บเพจ(Redirecting visitors to other pages)
(game5-40.html)
<!DOCTYPE HTML>
<html>
<head>
<title>Redirecting</title>
</head>
<body>
alert("Redirect to game5-1.html");
window.location= "game5-1.html";
</script>
</body>
</html>

window.close()
สามารถสั่งการปิดหน้าต่างบนเบราเซอร์แสดงผลด้วยเมธอด window.close()
(game5-41.html)
<body>
<input type="button" value=" Close a window" onclick="closemywindow()" />
<script>
function closemywindow(){
window.close();
}
</script>
</body>

Timing Events
ภาษาจาวาสคริปต์สามารถสั่งการทางานด้วยการกาหนดเวลาให้ Execute ฟังก์ชั่นผ่านเมธอดที่ สาคัญสองตัว ได้แก่
Setlnterval()-executes ฟังก์ชั่นแบบวนซ้ำตำมเวลำที่กำหนด
setInterval(“ฟังก์ชั่นที่ต้องการเรียกใช้”,เวลาหน่วยมิลลิวินาที);
setTimeout()-executes ฟังก์ชั่นทำนหลังจำกเวลำที่กำหนด
setTimeout(“ฟังก์ชั่นที่ต้องการเรียกใช้”,เวลาหน่วยมิลลิวินาที);

Timing Events
สามารถยกเลิกการทางานของฟังก์ชั่นด้วยคาสั่ง clearInterval() และ clearTimeout()
(game5-42.html)
<!DOCTYPE html>
<body>
vartiming =setInterval(printHello,1000);//ทางานทุก 1วินาทีโดยการเรียกใช้ฟังก์ชันprintHello
varamount=0;
function printHello(){
alert("Hello : round : "+amount);
amount+=1; //ทุกรอบของการแสดงผล ค่า amount จะเพิ่มที่ละ 1
if (amount==4){// ถ้า amount มีค่าเท่ากับ 4
clearInterval(timing);//ยกเลิกการวนซ้า
}
}
</script>
</body>
</html>

Timing Events
(game5-43.html)
<body>
<p>เมื่อคลิกปุ่ม เริ่ม ผ่านไป 3วินาที บราวเซอร์จะ Alert "Hello"</p>
<p>เมื่อคลิกปุ่ม หยุด บราวเซอร์จะยกเลิกการคาสั่ง Alert </p>
<button onclick="setTimeoutFunction()">เริ่ม</button>
<button onclick="clearTimeoutFunction()">หยุด</button>
function setTimeoutFunction()
{
timing = setTimeout(function(){alert("Hello")},3000);
}
function clearTimeoutFunction()
{
clearTimeout(timing);
}
</script>
</body>
</html>

การจัดเก็บไฟล์ไว้ตามหมวดหมู่
ไฟล์ที่ใช้สร้างเกมประกอบด้วยหลายประเภท เช่น ภาพ เสียง HTML จาวสคริปต์ ดั้ง นั้น เราจึงจาเป็นต้องมีการเก็บไฟล์ที่เป็นระบบเพื่อง่ายต่อการแก้อ้างอิง โดยเราจะเก็บ ไฟล์นามสกุล html ไว้ภายนอกสุดของโฟลเดอร์ และจัดเก็บไฟล์รูปภาพไว้ในโฟลเดอร์ชื่อ images ส่วนไฟล์เสียงจัดเก็บไว้ในโฟลเดอร์ sounds ส่วนที่เป็นภาษาจาวาสคริปต์ให้ จัดเก็บไว้ในโฟลเดอร์ชื่อ jsเพื่อง่ายต่อการเรียกใช้ ดังรูป

Java script เบื้องต้น

More Related Content

What's hot

Viewers also liked

Similar to Java script เบื้องต้น

Java script เบื้องต้น