เทคนิคพิเศษสำหรับ Internet Explorerและรูปภาพ
การเขียนโปรแกมด้วยภาษา
HTML
แม้ว่าจะเป็นภาษาสากลที่สามารถใช้กับ Browser
ทุกชนิดและทุกคำสั่งก็สามารถแสดงผลได้กับโปรแกรมบราวเซอร์ทุกตัว
แต่ในบางกรณีที่โปรแกรมต้องกรลักษณะเฉพาะของโปรแกรมหรือมีเทคนิคพิเศษที่แตกต่างจากโปรแกรมอื่น
ๆ ก็สามารถที่จะกำหนดในการรับค่าพิเศษเหล่านั้นได้
ในการเขียนโปรแกรมจาวาสคริปต์บางลักษณะก็ไม่สามารถใช้ได้กับโปรแกรมบราวเซอร์ทุกชนิด
แต่จะใช้ได้กับบราวเซอร์บางตัวที่รองรับคำสั่งเฉพาะเหล่านั้นให้เกิดปัญหาว่า
ถ้าเขียนเว็บเพจด้วยคำสั่งเฉพาะนี้
บราวเซอร์บางตัวก็ไม่สามารถแสดงผลของคำสั่งนั้นได้
คำสั่งที่เขียนในแบบ
HTML
<meta http-rquiv=page-enter content=revealtrans
(duration=3,transition=23)>
<meta http-equiv=pate-exit content=revealtrans
duration=2,transition=23)>
จากเขียนคำสั่งในลักษณะนี้จะใส่ไว้ที่ <Head>
ของโปรแกรม เพื่อให้โปรแกรมได้ทำงานทันที ขณะที่เข้าสู่หน้าจอเว็บเพจ
โดยคำสั่งจะทำให้การเปลี่ยนแปลงหน้าจอเหมือนมีการตั้ง
Effect ในรูปแบบต่าง ๆ เอาไว้ให้โดยอัตโนมัติ
** คำสั่งนี้ใช้ได้เฉพาะกับ Internet
Explorer และบางครั้งการตั้งค่าขณะติดตั้งโปรแกรมบราวเซอร์เอง
ก็ไม่แสดงคำสั่งนี้เช่นกัน **
ตัวอย่าง
การเขียนโปรแกรมสำหรับการเปลี่ยนแปลงหน้าจอ ขณะออกจากเว็บเพจหรือเข้าสู่เว็บเพจ
โดยสามารถใช้ได้เฉพาะ Internet Explorer 4
<html>
<head>
<title>
การเขียนโปรแกรมจาวาสคริปต์ แสดงการเปลี่ยนแปลงหน้าจอ </title>
<meta http-equiv=page-enter content=revealtrans (duration=3,transition=23)>
<meta http-equiv=page-exit content=revealtrans (duration=2,transition=23)>
<script language=javascript>
document.write
(การเขียนโปรแกรมแสดงการเปลี่ยนแปลงหน้าจอ <br>);
document write
(เมื่อคลิกไปยังเว็บไซต์อื่น ๆ ใช้เฉพาะกับ Internet Explorer 4 (Transition
<br>);
document.write (goto
yahoo .link(
http://www.yahoo.com));
</script>
</head>
<body>
</body>
<html>
ตัวแปรแบบอะแรย์
(Array Variable) ในจาวาสคริปต์
การกำหนดตัวแปรชิดหรือตัวแปรแบบอะเรย์
เป็นการกำหนดตัวแปรสำหรับ การทำงานที่ต้องกำหนดตัวแปรลักษณะเดียวกันซ้ำ
ๆ โดยตัวแปรมีการเปลี่ยนแปลงไปบ้าง
ก็สามารถกำหนดตัวแปรในลักษณะตัวแปรชุดได้
โดยไม่ต้องตั้งชื่อตัวแปรใหม่ทั้งหมด
ลักษณะของจาวาสคริปต์แตกต่างจากโปรแกรมอื่น ๆ
ในแง่ที่ว่าสามารถตั้งตัวแปรได้ทันที
โดยกำหนดค่าตัวแปรชุดให้กับตัวแปรนั้นได้ ขณะที่โปรแกรมอื่น ๆ
ต้องมีการกำหนดช่วงของตัวแปรชุด
และไม่สามารถกำหนดการทำงานในตัวแปรชุดนี้
รูปแบบ
Var ชื่อตัวแปร (index) =
ค่าของตัวแปร;
เช่น
var Colortext (0)=
black
var Colortext (1)
=yellow
var Colortext (2)=blue
var Colortext (3) =
pink
var
Colortext (4) =
red
จากตัวอย่างจะดูเหมือนเป็นการกำหนดค่าตัวแปรปกติ
เพียงแต่เปลี่ยนตัวเลขภายใน ( ) เพื่อแสดงค่าที่เปลี่ยนไปของตัวแปรเท่านั้น
การเขียนคำสั่งให้กระทำกับวินโดร์
Windows Object
ลักษณะของการเขียนคำสั่งให้จาวาสคริปต์ทำงาน
จะกระทำให้สองลักษณะคือ กระทำกับส่วนที่เป็น document กับส่วนที่เป็น
windows การสั่งให้กระทำกับชิ้นงานของวินโดว์ ได้แก่
scroll( X,Y) :Method
เป็นคำสั่งที่ใช้สั่งการทำงานของ
scollbar หน้าจอวินโดว์ ให้มีการเลื่อนขึ้นหรือเลื่อนลง
โดยกำหนดค่าเป็น x และ
y หน่วย ลักษณะคำสั่งคือ
<script language=javascript>
for ( I=1,I=50;I++)
{
document.write (hello +I+<br>);
}
var y=0;
function scrollrun()
{
window.scroll(0,y);
if(y<=2000)
{
y++;
}
setTimeout
(scrollrun(),1);
}
<script>
ลักษณะของโปรแกรมเป็นการให้เขียนคำว่า Hello ไปตลอดหน้าจอ 50 ครั้ง
ก็ทำให้เกิดบรรทัดขึ้น 50 บรรทัด ส่วนหน้าจอจะค่อย ๆ เลื่อนลงมาเรื่อย
ๆ จนถึงบรรทัดที่ 50
เราจะเปลี่ยนความเร็วในการเลื่อนของหน้าจอก็สามารถทำได้โดยเปลี่ยนค่า
y++ เป็น y = y +
5 เป็นต้น
ตัวอย่าง
การเขียนโปรแกรมจาวาสคริปต์ โดยกำหนดการเลื่อน Scroll bar
จากด้านบนลงล่างลนสุดบรรทัด
<html>
<head>
<title>
การเขียนโปรแกรมจาวาสคริปต์ แบบเลื่อน scroll bar </title>
<script language=javascript>
for (I=1;I<=50;I++)
{
document.write (hello+I+<br>);
}
var y=0;
function scroll
(0,y);
if(
y<=2000)
{
y+=5;
setTimeout (scrollrun(),1);
}
}
</script>
</head>
<body onloas=scrollrun()>
</body>
</html>
ตัวอย่าง การเขียนโปรแกรมจาวาสคริปต์ โดยกำหนดการเลื่อน
Scroll bar จากด้านบนลงล่างสุดของบรรทัด แล้วให้เลื่อนขึ้นไปด้านบนใหม่
<html>
<head>
<title>
การเขียนโปรแกรมจาวาสคริปต์ แบบเลื่อน Scroll bar <title>
<script language=javascrip>
for (I=1;I<=50;I++)
{
document.write
(hello + I + <br>);
}
var down=0;
var up=up;
function scrollrun ()
{
window.scroll (0
,down);
if (up==up)
{
if (down<=1000)
{
down=down+5;
}
else
{
up=down;
}
}
{
if (down>=0)
{
down=down-5;
}
else
{
up=up;
}
}
setTimeout (scrollrun(),1);
}
</script>
</head>
<body onload=scrollrun()>
</body>
</html>
Open
เป็นคำสั่งที่กระทำกับวินโดว์ในการให้เปิดหน้าต่างใหม่
โดยอาจจะคลิกหรือให้ทำงานทันทีเมื่อเรียกหาเว็บไซต์ตัวใหม่
โดยไม่ต้องการให้เว็บไซต์ดังกล่าวอยู่ใน Browser
ของหน้าต่างเดิมเป็นคำสั่งที่ให้ผู้ใช้แยกพื้นที่สำหรับการเปิดหน้าต่างใหม่
รูปแบบ variablename=window.open
(website, windowname, option);
variablename หมายถึง
ชื่อของตัวแปรที่เราอาจจะตั้งไว้เพื่อการรับค่านำไป ใช้งาน
window.open หมายถึง
คำสั่งให้เปิดหน้าต่างใหม่
website หมายถึง
ไฟล์ของเว็บเพจที่เราต้องการให้เปิดนามสกุลเป็น HTML
windowname หมายถึง
ชื่อของหน้าต่างใหม่ที่เราสั่งให้เปิด
option หมายถึง
เงื่อนไขที่กำหนดขึ้นเพื่อให้หน้าต่างที่เปิดขึ้นใหม่เป็นไปตามต้องการเช่น
กำหนดขนาด กรอบของวินโดว์
การกำหนดเงื่อนไข
ค่าที่ใช้กำหนด ผลการกระทำ
menubar
0 ไม่แสดง Menuber
1 แสดง Menubar
Toolbar
0 ไม่แสดง Toolbar
1 แสดงแถบ Location (address)
Directories
0 ไม่แสดงแถบ Directory
1 แสดงแถบ Directory
Status
0 ไม่แสดง Statusbar
1 แสดง Statusbar
Scrollbars
0 ไม่แสดง Scrollbar
1 แสดง Scrollbar
Width pixel กำหนดความกว้างกรอบหน้าต่าง
Height
pixel กำหนดความสูงของกรอบหน้าต่าง
Resizable
0 ไม่สามารถปรับขนาดได้
1 สามารถปรับขนาดได้
Top pixel กำหนดตำแหน่งด้านบนที่จะปรากฎ
Left pixel กำหนดตำแหน่งด้านซ้ายที่จะปรากฎ
setTimeout()
ตัวอย่าง การเขียนโปรแกรมจาวาสคริปต์
เพื่อให้สร้างเรียกหน้าต่างใหม่
จากหน้าต่างเดิมโดยกระทำเมื่อเริ่มต้นเข้าสู่เว็บไซต์
<html>
<head>
<title>
การเขียนโปรแกรมจาวาสคริปต์ การสร้าง windows ใหม่ </title>
<script language=javascript>
function openw2()
{
win2=window.open (http://www.yahoo.com,
W2, width=300.height=200)
}
</script>
</head>
<body onload=openw20()>
<a href=http://www.yahoo.comtarget=w2>
Go to Yahoo! </a>
</body>
<html>
** การทำให้หน้าจอเว็บเต็มจอ
Full
Screen
การสร้างเว็บเพจในลักษณะที่หน้าจอไม่มีเมนูบาร์
ไม่มีสกรอบาร์ ไม่มีสตาร์ตัสบาร์
หน้าจอเว็บไซต์ก็จะเต็มจอภาพในทันทีที่เข้าสู่เว็บไซต์นั้น
สามารถกระทำได้โดยใช้คำสั่ง window.open
แล้วกำหนดเงื่อนไขที่ต้องการได้
ตัวอย่าง การเขียนโปรแกรมจาวาสคริปต์
เพื่อให้สร้างเรียกไปยังหน้าต่างใหม่
โดยให้หน้าต่างที่จะไปใหม่สร้างขึ้นเต็มจอ ไม่มีเมนูบาร์
ไม่มีแถบเลื่อน และไม่มีแถบสถานะ ในขณะเริ่มต้นเข้าสู่เว็บไซต์
การเขียนโปรแกรมนี้จะต้องกำหนดชื่อไฟล์ที่ต้องการให้แสดงผล
จากตัวอย่างที่ใช้ไฟล์ index.html
<html>
<head>
<title>
การเขียนโปรแกรมจาวาสคริปต์ การทำให้จอภาพเต็มจอ Full Screen
</title>
<script language=javascript>
function
fullscreen()
{
win2=window.open(index.html,index,status=0,
menubar=0, scrollbars=0);
}
</script>
</head>
<body onload=fullscreen()>
<a href=index.htmltarget=index> Go
to Prachyanum Home Page</a>
</body>
<html>
ตัวอย่าง
การเขียนโปรแกรมจาวาสคริปต์แบบเลื่อนจอภาพด้วยคำสั่ง
moveBy ให้หน้าต่างที่สร้างขึ้นเคลื่อนที่จากบนลงล่าง
<html>
<head>
<title>
การเขียนโปรแกรมจาวาสคริปต์ ในการกำหนดตำแหน่งหน้าต่าง </title>
<script language-javascript>
win2=window.open(,width=200,height=200,top=0,left=0);
var y=0
function movew2()
{
win2.moveBy(0,y);
if(y<=15)
{
y++;
setTimeout (movew2(),300);
}
}
</script>
</head>
<body>
<a href=javascript:movew2()> start
</a>
</body>
</html>
ตัวอย่าง การเขียนโปรแกรมจาวาสคริปต์
แบบเลื่อนจอภาพด้วยคำสั่ง moveBy
ให้หน้าต่างที่สร้างขึ้นเคลื่อนที่จากซ้ายไปขวาของจอภาพ
<html>
<head>
<title>
การเขียนโปรแกรมจาวาสคริปต์ ในการกำหนดตำแหน่งหน้าต่าง </title>
<script language=javascript>
win2=window.open
(,w2,width=200,height=200,top=0,left=0);
var x=0;
function movew2()
{
win2.moveBy(x,0);
if
(x<=15)
{
x++;
setTimeout(movew2(),300);
}
}
</script>
</head>
<body>
<a href=javascript:movew2()>start</a>
</body>
</html>
moveTo(x,y)
เป็นคำสั่งที่ใช้ในการกำหนดตำแหน่งที่จะเลื่อนของหน้าต่างที่
Browser
บนจอภาพเช่นกัน แเต่เป็นการกำหนดตำแหน่งการเลื่อนตามค่า
pixesl (640x480)
clearTimeout
(ชื่อตัวแปร) เป็นคำสั่งที่ใช้ในการยกเลิกการตั้งเวลาจากการ
setTimeout()
ตัวอย่างเช่น timer=setTimeout(moveright(),1);
function stoptime()
{
clearTimeout(timer);
}
timer=ตัวแปรที่กำหนดขึ้น
close()
เป็นคำสั่งที่ใช้สำหรับปิดหน้าจอ window
เช่น win2.close();
ตัวอย่าง การเขียนโปรแกรมจาวาสคริปต์
แบบเลื่อนจอภาพด้วยคำสั่ง move To
ให้หน้าต่างที่สร้างขึ้นเคลื่อนที่วนรอบจอภาพ สามารถให้หยุดได้
เคลื่อนที่ต่อไปได้ และปิดหน้าจอที่สร้างขึ้นได้
<html>
<head>
<title>
การเขียนโปรแกรมจาวาสคริปต์ ในการเลื่อนตำแหน่งหน้าต่างและหยุด
<title>
<script language=javascript>
win2=window.open(,w2,width=200,height=200,top=0,left=0);
var y=0;
var x=0;
function moveright()
{
if(x<420)
{
x++;
win2.moveTo(x,y);
timer=setTimeout
( moveright(),1);
}
else
{
movedown();
}
}
function movedown()
{
if(y<260)
{
y++;
win2.moveTo( x, y);
timer=setTimeout
~( movedown(),1);
}
else
{
movelsft();
}
}
function moveleft()
{
if (x>0)
{
moveup();
}
}
function moveup()
{
if (y>0)
{
y++;
win2.moveTo (x, y)
;
timer=setTimeout
(moveup(),1);
}
else
{
moveright();
}
}
function stop()
{
clearTimeout (timer);
}
function closewindow()
{
win2.close();
}
function createwindow()
{
win2=window.open(,w2,width=200,height=200,top=0,left=0);
}
</script>
</head>
<body>
<a href=javascript:createwindow()> create
<br></a>
<a href=javascript:moveright()>start <br></a>
<a href=javascript:stop()> stop <br></a>
<a href=javascript:closewindow()> close
</a>
</body>
</html>
การทำงานกับรูปภาพ
การทำงานกับรูปภาพของจาวาสคริปต์เป็นการดึงไฟล์ที่เป็นรูปภาพมาแสดงที่หน้าจอโฮมเพจ
โดยนำเอารูปภาพมาจัดเก็บในไดร์เดียวกันกับไฟล์ HTML
จากนั้นกำหนดตัวแปรเป็นไฟล์ที่เป็นรูปภาพ
โดยไฟล์ที่เป็นรูปภาพควรมีนามสกุลเป็น .jpg
หรือ .gif
ลักษณะคำสั่งคือ
<img scr=egg.gifname=eggwidth=100 height=50>
แปลความหมายว่า
<img scr=ชื่อและนามสกุลของภาพname=ชื่อตัวแปรแทนภาพwidth=กว้าง
height=สูง>
การตั้งตัวแปรให้เป็นรูปภาพมีลักษณะการใช้งานคือ
var myimg=new Image( );
myimg=pic2.jpg;
myimage.scr=myimg.scr;
ตัวอย่าง
การเขียนโปรแกรมจาวาสคริปต์เพื่อแสดงภาพที่หน้าจอเว็บให้ดึงภาพมาแสดงเมื่อนำเมาส์เข้าไปชี้ที่ภาพก็ให้เปลี่ยนเป็นอีกภาพหนึ่ง
เมื่อเมาส์ออกจากภาพก็ให้กลับเป็นภาพเดิม
<html>
<head>
<title>
การเขียนโปรแกรมจาวาสคริปต์ การจัดการภาพที่หน้าจอ </title>
<script language=javascript>
var img1=new Image( );
var img2=new Image( );
img1.scr=bullet3.gif;
img2.scr=bullet2.gif;
</script>
</head>
<body>
<a href=#onMouseOver=myimage.src=img1.scronMouseOut=myimage.src=img2.scr>
<img.scr= bullet2.gif name=myimage
width=100 height=100>
</a>
</body>
</html>
# = เมื่อมีรูปมือเข้าคลิก
ไม่ให้เปลี่ยนตำแหน่งของเว็บ ซึ่งอาจเปลี่ยนใส่ URL
เข้าแทนได้ถ้าต้องการให้เป็น Hyper Links
onMouseOver = เมื่อนำเมาส์เข้าสู่
onMouseOut = เมื่อนำเมาส์ออกมา
new Image( ) =
คำสั่งการทำงานของรูปภาพ (ตัว I ต้องเป็นตัวใหญ่)
-
การทำเปลี่ยนภาพแทนที่
การนำภาพหลายๆ
ภาพมาใช้ตำแหน่งเดียวกัน
เป็นการสับเปลี่ยนหมุนเวียนภาพให้ปรากฏที่ตำแหน่งเดียวกัน
โดยให้แต่ละภาพมีการกำหนดเวลาที่จะแสดงภาพเอาไว้
เมื่อครบกำหนดเวลาก็เปลี่ยนภาพขึ้นมาแทน
การทำงานลักษณะนี้ใช้สำหรับทำป้ายโฆษณาบนเว็บไซต์โดยให้สัญลักษณ์หรือป้ายยี่ห้อของสินค้าปรากฏแล้วก็หายไป
เงื่อนไขการทำงานจะต้องมีไฟล์ของภาพต่างๆ
อยู่ภายในพื้นที่จัดเก็บของเว็บไซต์ด้วยจึงจะสามารถเรียกภาพขึ้นมาสลับเปลี่ยนกันได้
ตัวอย่าง
การเขียนโปรแกรมจาวาสคริปต์โดยให้โปรแกรมเปลี่ยนภาพที่หน้าจอเว็บไซต์โดยให้มีการเปลี่ยนแปลงภาพตามลำดับไปโดยตลอด
<html>
<head>
<title>
การเขียนโปรแกรมจาวาสคริปต์ โดยการนำภาพมาแสดงสลับกัน </title>
<script language=javascript>
var img1=new Array( );
var i;
for(I=0;I<=4;I+1)
{
img[i]=new
Image( );
}
img[0].scr==bullet1.gif;
img[1].scr==bullet2.gif;
img[2].scr==bullet3.gif;
img[3].scr==bullet7.gif;
img[4].scr==cns.gif;
i = 0;
function picturetime( )
{
my.scr=img[i].scr;
i++;
if(i>4)
{
i=0;
}
setTimeout(picturetime(
),250)
}
</script>
</head>
<body onload=picturetime( )>
<img.scr= cns.gif name=my width=100
height=100>
</body>
</html>
Test
All Right Reserved 2003 Support IE5.0 or Higher Best Preview
800x600 Pixels
แนะนำติชม:
ดร.ปรัชญนันท์ นิลสุข
:
prachyanun@hotmail.com
.
คำสั่งที่เขียนในแบบ
HTML
