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">

var x = 1.1;

alert(x);

document.write(x);

</script>

</body>

</html>

เมอเราตองการดคาตวแปร เราสามารถใชค าสง alert()

ตวอยางตวแปรชนดจ านวนเตม (Integer)




</head>

<body>



var a=100;

var b=100;

var c=a+b;

alert(c);

</script>

</body>

</html>

ในกรณทไมชอบการแสดงผลแบบแจงเตอน เราสามารถช าสง white ในการแสดงผลตวแปรได เชน document.write(x); หรอ document.writ(“Value x is”+x);

ตวแปรชนดทศนยม (Float)



<title> Game4-8 </title>

</head>

<body>



var a = 1.01;

var b = 1.5;

var c=a+b;

alert(c);

</script>

</body>

</html>

ตวแปรชนดขอความ(String)



<title> Game4-8 </title>

</head>

<body>



var a = "HTML5";

var b = " JavaScript";

var c=a+b;

alert(c);

</script>

</body>

</html>

ตวแปรชนด Boolean

ชนดของตวแปรทสามารถเกบคาตรรกะจรง (True) หรอเทจ (False)(game5-17.html)<html>



</head>

<body>



var a = true;

var b = false;

alert("a : "+a+" , b : "+b);

</script>

</body>

</html>

ตวแปรแบบอารเรย (Array)

ในการเขยนเกม เราอาจจะตองเกบชดล าดบของคยเฟรม (Key Frame) เอาไวในรปแบบของตวแปรชนดอารเรย ซงเปนโครงสรางพนฐานของการเกบขอมล การเขาถงขอมลทเกบไว เราจะใช ดชน หรอ Index เปนตวอางองขอมล จาวาสครปตจะเรมจาก Index ท 0 ดงตวอยางตอไปน

ตวแปรแบบอารเรย (Array)



<title> game5-18</title>

</head>

<body>



var array_a = new Array();

array_a[0] = 10;

array_a[1] = 20;

alert(array_a);

</script>

</body>

</html>

ตวแปรชนดออปเจกต (Object)

ในบางครงเราจ าเปนจะตองรวมประเภทของตวแปรทแตกตางหลายชนด ประกอบเปนตวแปรชนดเดยวกน ซงเรยกวา ออปเจกต เชน ออบเจกตของต าแหนงบนแกนสองมต จะประกอบไปดวย x และ y เราสามารถใชจาวาสครปตสรางออบเจกตดงน

var position={x:10, y:50};

การอางองคาทอยในออบเจกต เราจะใชชอของออบเจกตตามดวยเครองหมาย . (จด) และตวแปรยอยทอยในออบเจกต เชน position.x และ position.y

ตวแปรชนดออปเจกต (Object)



<title> game5-19</title>

</head>

<body>



var position = {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>


var inputString = prompt("What's your name?","put your

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,1970getFullYear() คนคาเปนป ค.ศ.

ตวอยางการใชงาน

(game5-21.html)<body>

<p></p>


var now = 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


<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()

{

var x=10;

var y=5;

var z;

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>


{

var age=65;

var z;

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>


{

var score=55;

var grade;

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>


var x;

var d=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 (var Intitial-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(){

var x="";

for (var i=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



<body>

<button onclick="myFunction()">Click</button>




{ var x="",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>


{

var i=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 FALSEx==5 TRUE

=== เทากบ (คาและชนดของตวแปร) x===”5” FALSEx===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>


var a = 10;

var b = 5;

var c= 15;

var d;

var e;

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)<script type="text/javascript">

var a = 15;

var b = 5;

var c= 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>


{

var a=Math.floor(1.2);

var b=Math.floor(1.5);

var c=Math.floor(-1.1);

var d=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 เปนตน


<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>


{

var a=Math.round(1.2);

var b=Math.round(1.5);

var c=Math.round(-1.1);

var d=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>


{

var a=Math.random();

var b=Math.floor((Math.random()*10))+1;

var c=Math.floor((Math.random()*5))+6;

var d=Math.sqrt(4);

var e=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 คา เชน ฟงกชนการแสดงขอความเตอน



<body>


printHello();

function printHello(){

alert("Hello");

}

</script>

</body>

</html>

Function มการ Return

Function มการ Return เชน ฟงกชนการหาผลคณ(game5-35.html)<!DOCTYPE html>


<body>



document.getElementById("myParagraph").innerHTML=myF

unction(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>

<img id="myPic" src="light1.png" onMouseOver="swappingImage()"

onMouseOut="initialImage()" width="50" height="100">

<script>

var pic=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>

<img id="myPic" src="light1.png" onMouseOver="swappingImage()" onMouseOut="initialImage()"

width="50" height="100">

<script>

var pic=document.getElementById("myPic");

var img = new Image();

img.src ="light2.png";

function swappingImage(){

pic.src =img.src;

}

function initialImage(){


}

</script>

</body>

</html>

การเกบขอมล (Storage Data)

HTML5 สามารถเกบขอมลไวทเครองของผใชงานไดทเบราเซอรของผใชงานผาน localstorage และ sessionStorage ซงมขอแตกตางดงน localstorage สามารถเกบขอมลไวตลอดไมมวนหมดอายแมจะปดเบราเซอรไปแลว ซงเราสามารถอางองตวแปรชนดนไดดวยการพมพ localStroage ตวแปร




<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 localStrorage to 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 localStrorage to 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)


<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()



<body>


var timing =setInterval(printHello,1000);//ท างานทก 1 วนาทโดยการเรยกใชฟงกชนprintHello

var amount=0;

function printHello(){

alert("Hello : round : "+amount);

amount+=1; //ทกรอบของการแสดงผล คา amount จะเพมทละ 1if (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 เพองายตอการเรยกใช ดงรป

Documents

Java script เบื้องต้น