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 เบื้องต้น

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (12)

Destaque

Destaque (20)

Semelhante a Java script เบื้องต้น

Semelhante a Java script เบื้องต้น (20)

Java script เบื้องต้น