รูปแบบการเขียนจาวาสคริปต์
การเขียนโปรแกรมทุกประเภทจะมีเงื่อนไขและข้อกำหนดต่างๆ
เป็นของตนเอง ภาษาโปรแกรมทุกภาษา
ก็จะมีรูปแบบโปรแกรมสำหรับการเขียนเป็นของตนเองที่เรียกว่า อีดิเตอร์ (Editor)
ซึ่งหมายถึงหน้าจอที่เตรียมไว้สำหรับการเขียนโปรแกรมนั้นๆ
และจะมีเมนูสนับสนุนต่างๆ เพื่อให้การเขียนโปรแกรมสามารถกระทำได้สะดวก
เมนูต่างๆ
ของโปรแกรมก็จะมีเงื่อนไขและรายละเอียดที่สามารถทำงานร่วมกับโปรแกรมต่างๆ
ได้ทันที แต่โปรแกรมสคริปต์ไม่ใช่
-
ความแตกต่างๆระหว่างการเขียนโปรแกรมคอมไพเลอร์และโปรแกรมสคริปต์
-
การทำงานร่วมกับ HTML
-
รูปแบบของจาวาสคริปต์
-
ชนิดของตัวตัวแปรในจาวาสคริปต์
-
การสร้างกล่องรับข้อความ
- การเรียกใชั้งก์ชั่นจากไฟล์ภายนอก
ความแตกต่างระหว่างการเขียนโปรแกรมคอมไพเลอร์กับโปรแกรมสคริปต์
ถ้าเราเคยโปรแกรมด้วยภาษาปาสคาล,ซี
หรือโปรแกรมใดๆที่มีการคอมไพเลอร์ใน ตัวเอง
ก็จะพบว่าโปรแกรมทุกโปรแกรมจะมีหน้าตาของอีดิเตอร์เป็นของตนเองแทบทุกโปรแกรมจะมีอีดิเตอร์คล้ายคลึงกัน
มีเมนูสนับสนุนและช่วยเหลือที่เป็นมาตรฐานครบถ้วน
เมื่อเขียนโปรแกรมได้ส่วนหนึ่งก็สามารถทดสอบได้ทันทีโดยการรันโปรแกรม
หรืออาจคอมไพลเปลี่ยนโครงสร้างที่ทำงานได้ทันทีบนระบบปฏิบัติการ
เมื่อต้องการจัดเก็บแฟ้มจะต้องจัดเก็บเป็นแฟ้มที่มีนามสกุลเฉพาะของแต่ละโปรแกรม
เช่น
ภาษาเบสิก
จัดเก็บแฟ้มเป็น .bas
ภาษาปาสคาล
จัดเก็บแฟ้มเป็น .pas
ภาษาซี
จัดเก็บแฟ้มเป็น
.c หรือ .cpp สำหรับ c++
การเขียนโปรแกรมแบบคอมไพเลอร์เมื่อทำการทดสอบแล้วพบว่า
การเขียนโปรแกรมมีข้อผิดพลาดก็จะไม่ทำงาน โดยแสดงข้อผิดพลาดต่างๆ
ที่เกิดขึ้นและต้องเข้าไปแก้ไข
ทำให้โปรแกรมจะต้องแก้ไขข้อผิดพลาดไปจนกว่าโปรแกรมจะทำงานได้
เป็นเรื่องที่ยุ่งยากและซับซ้อนจนทำให้หลายคนเบื่อที่จะเขียนโปรแกรมเมื่อปัญหายุ่งยากและแก้ไขข้อผิดพลาดของตนไม่ได้
ขณะที่จาวาสคริปต์เป็นการเขียนโปรแกรมเป็นท่อนๆ หรือเป็นส่วนๆ
เฉพาะที่ต้องการเท่านั้น โดยเขียนอีดิเตอร์ของโปรแกรมใดๆ
ก็ได้เป็นเท็กซ์โหมด (Text Mode) เช่น
Q Edit , Note pad หรือแม้แต่
CU Writer, RW Writer
โปรแกรมการพิมพ์ยอดนิยมในอดีตก็สามารถนำมาเขียนจาวาสคริปต์ได้ทั้งสิ้น
แต่จาวาสคริปต์ไม่สามารถทำงานได้ทันทีเหมือนกับโปรแกรมภาษาอื่นๆ
และจะต้องนำไปทำงานร่วมกับ HTML โดยแสดงผลที่ Browser เท่านั้น
การทำงานร่วมกับ HTML
เนื่องจากจาวาสคริปต์เป็นการเขียนโปรแกรมที่ต้องทำงานร่วมกับ
HTML จึงทำให้รูปแบบการเขียนเป็นการเขียนเพื่อนำไปแทรกใน
HTML
ไม่ใช่โปรแกรมที่แสดงผลหรือทำงานได้ทันทีด้วยตนเอง
หรือถึงแม้จะแสดงผลหรือทำงานได้ก็เกิดจากคำสั่งของ HTML ไม่ใช่คำสั่งของ
จาวาสคริปต์ จึงต้องทำความเข้าใจการทำงานร่วมกันระหว่าง
HTML กับจาวาสคริปต์ เริ่มจากรูปแบบปกติของ
HTML ดังต่อไปนี้
ตัวอย่าง รูปแบบปกติของ HTML
<html>
<head>
<title> ตัวอย่างรูปแบบ HTML ปกติ </title>
</head>
<body>
สวัสดีครับ ผมชื่อศรายุทธ พิทูรสกุล
</body>
</html>
โครงสร้างของ HTML จะประกอบไปด้วย 2 ส่วนใหญ่ๆ คือ
1.ส่วนที่เป็นส่วนหัว หรือเฮด (Head)
2.ส่วนที่เป็นส่วน แสดงผล หรือบอดี้ (Body)
จากตัวอย่างสามารถอธิบายโครงสร้างของ HTML ได้ดังนี้
<html>
<head>
<title> ตัวอย่างรูปแบบ HTML ปกติ </title> ส่วนหัว
(Head)
</head>
<body>
สวัสดีครับ ผมชื่อศรายุทธ พิทูรสกุล
ส่วนแสดงผล (Body)
</body>
</html>
การเขียนโปรแกรมจาวาสคริปต์จึงเป็นการนำเอาสคริปต์ที่เขียนขึ้นเข้าไปแทรกใน
โครงสร้างของ HTML ซึ่งสามารถกำหนดเอาไว้ในส่วนหัวหรือส่วนแสดงผลก็ได้
โดยที่โปรแกรมของจาวาสคริปต์จะไม่แสดงผลที่หน้าจอภาพแต่จะถูกซ่อนอยู่ภายใต้เว็บเพจ
การแทรกโปรแกรม จาวาสคริปต์กระทำได้ดังนี้
<html>
<head>
<title> การเขียนจาวาสคริปต์แสดงกรอบรับข้อความ </title>
<script language = javascript>
function chcolor( )
{
var a;
a = prompt (Enter background color, );
document.bgColor=a;
}
</script>
</head>
</body>
<script language = javascript>
document..write(โปรดคลิกที่ Change Color
เพื่อเปลี่ยนสีพื้น<br>);
document..write(โปรดกรอกสีพื้นที่ต้องการเป็นภาษาอังกฤษ
เช่น สีแดง พิมพ์ RED
เป็นต้น<br>);
</script>
<a href=javascript:chcolor( )>Change Color </a>
</body>
</html>
รูปแบบของจาวาสคริปต์
การเขียนโปรแกรมของ
Java Script
เป็นการเขียนโปรแกรมเสริมเข้าไปในโปรแกรมที่เป็นโครงสร้างหลักของเว็บเพจที่เขียนด้วย
HTML เพื่อช่วยให้การทำงานมีความสามารถมากขึ้นจากที่เคยทำได้ด้วย
HTML
การใช้ JAVA จะช่วยให้การทำเว็บเพจ หรือโปรแกรมประเภท
OOP (Object
Oriented Programming) มีความสามารถมากขึ้น
โครงสร้างของการเขียนโปรแกรมด้วย
Java Script
จะมีโครงสร้างพื้นฐานเหมือนกับ HTML คือ จะประกอบด้วย
Window.status
Document Object
Method document.write
Properties~
Document Object
Method
Write( )
เช่น document.write(hello); ควรจะมี ;
ปิดท้ายด้วยเสมอการพิมพ์ข้อความในโปรแกรมต้องใช้ตัวเล็กเสมอ
แต่ข้อความภายใน ( ) จะใช้ตัวใหญ่หรือตัวเล็กก็ได้
ถ้าต้องการขึ้นบรรทัดใหม่ในการพิมพ์ข้อความก็เพิ่มคำสั่ง <br>
เข้าไปในวงเล็บของคำที่พิมพ์ในบรรทัดบน เช่น
document.write(HELLO<br>);
document.write(My name is Sarayuth <br>);
document.write(ผมชื่อ ศรายุทธ ครับ);
ผลที่ได้คือ
HELLO
My name is Sarayuth
ผมชื่อ ศรายุทธ ครับ
กรณีต้องการให้ปรากฏเครื่องหมายคำพูดขึ้นในข้อความที่ปรากฏหน้าจอ
ก็จะต้องมีการใช้ \ (backslash) เข้ามาช่วย คือ
document.write( \ ผมชื่อ ศรายุทธ ครับ \ );
ผลลัพธ์คือ
ผมชื่อ ศรายุทธ ครับ
จากนั้นทดสอบเรียกดูคำสั่งที่เขียนในโปรแกรม
Browser เช่น
Netscape หรือ Internet
Explorer โดยเปิดไฟล์
ถ้ามีการผิดพลาดเกิดขึ้น โปรแกรมจะฟ้อง ERROR
และบอกบรรทัดที่ผิดให้
Properties
การกำหนดสีแบบต่างๆ
-
bgColor (Background Color) เป็นการกำหนดสีพื้นให้กับ Web Page (C ที่
Color ต้องเป็นตัวใหญ่)
เช่น
document.bgColor=yellow;
สีแดง red
สีเหลือง yellow
สีชมพู pink
สีส้ม orange
สีม่วงแดง megenta
สีเขียว green
สีน้ำเงิน blue
ฯลฯ
Web site ที่บอกถึงรหัสสีพื้นสำหรับ JAVA คือ
www.phoenix.net/~jacobson/pages/rgbhex.html
-
fgColor (Foreground Color) กำหนดให้กับข้อความบน
Web
page
ตัวอย่าง แสดงโปรแกรมใน HTML ที่ประกอบ
JAVA Script สำหรับ document object
document.write( );
document.bgColor= ;
<html>
<head>
<title>first javascript</title>
</head>
<body>
<script language=javascript>
document.write(hello);
document.bgColor=red;
</script>
</body>
</html>
- การสร้างจุดเชื่อมโยงโดยใช้
HTML
การสร้างจุดเชื่อมโยงในจาวาสคริปต์ก็ใช้วิธีเดียวกับใน
HTML โดยการใช้ Document.write ตามตัวอย่างนี้ คือ
document.write(<a href=http://www.yahoo.com>goto yahoo</a>);
การใช้เครื่องหมาย
ในคำสั่งให้เชื่อมโยงไปยังเว็บไซต์จะต้องใช้แบบ ตัวเดียว
- การกำหนดสีให้ข้อความ (Linked Color)
สีของจุดเชื่อมโยงจะมี 3 ลักษณะ สามารถกำหนดได้เป็น 3 สี คือ
1. สีของจุดเชื่อมโยงก่อนเชื่อมโยง
2. สีขณะที่คลิก
3. สีเมื่อคลิกไปแล้ว
- linkColor
การใช้คำสั่งให้กำหนดจุดเชื่อมโยงที่ยังไม่เคยเชื่อมโยงไป
เช่น document.linkColor=pink
- alinkColor การกำหนดสีให้กับข้อความที่เป็นจุดเชื่อมโยงขณะ
Click
เช่น document.alinkColor=white
- vlinkColor
การกำหนดสีให้กับข้อความที่เป็นจุดเชื่อมโยงที่เคยเชื่อมโยงมาแล้ว
document.vlinkColor=red
- title
จะแสดงค่าที่เป็นข้อความที่อยู่ในส่วนของ title bar ของ
windows
เช่นdocument.write(document.title);
- lastModified จะแสดงค่าของวันที่และเวลาที่มีการแก้ไขเอกสาร
HTML นั้นครั้งล่าสุด document.write(document.lastModified);
***ข้อควรระวังในการใช้คำสั่ง***
inkColor Color C จะใช้ตัวใหญ่เสมอ
alinkColor Color C จะใช้ตัวใหญ่เสมอ
vlinkColor Color C จะใช้ตัวใหญ่เสมอ
lastModified Color M จะใช้ตัวใหญ่เสมอ
มิฉะนั้นเครื่องจะไม่ทำงาน โดยจะแสดงในบรรทัดที่ขึ้นนั้นว่า Undentified
ตัวอย่าง แสดงการใช้คำสั่งทั้งหมดของ
Document
<html>
<head>
<title>first javascript</title>
<head>
<body>
<script language= javascript>
document.write(hello<br>);
document.fgColor=green;
document.write(My name is
Sarayuth <br>);
document.write(ผมชื่อศรายุทธครับ
<br><br>);
document.bgColor=orange;
document.write(<a href=http://www.yahoo.com>goto
yahoo </a> <br>);
document.write(<a href=http://www.bma.go.th>goto
bma </a> <br>);
document.linkColor=blue
document.alinkColor=yellow
document.vlinkColor=magenta
document.write(document.title);
document.write(<br>+document.lastModified);
</script>
</body>
</html>
ผลลัพธ์ที่ได้คือ
hello
My name is Sarayuth
ผมชื่อศรายุทธครับ
goto yahoo
goto bma
first javascript
11/14/02 19:20:21
กรณีต้องการให้ปรากฏเครื่องหมายคำพูดขึ้นในข้อความที่ปรากฏหน้าจอก็จะต้องมีการเขียนฟังก์ชั่น
JAVA Script
การเขียนฟังก์ชั่นในจาวาสคริปต์จะมีลักษณะเหมือนในโปรแกรมภาษาซีคือ
ฟังก์ชั่นจะเป็นกลุ่มของคำสั่งที่เราต้องการใช้บ่อยๆซึ่งถ้าต้องเขียนอยู่ตลอดเวลาจะเสียเวลาและเปลืองเนื้อที่ในการจัดเก็บ
ดังนั้น จึงต้องเขียนเป็นฟังก์ชั่นโดยสามารถเรียกใช้ได้ตลอดเวลา
โดยปกติฟังก์ชั่นจะไม่มีการทำงานในทันทีเหมือนกับโปรแกรมส่วนอื่นๆแต่จะรอจนกว่าภายในโปรแกรมจะเรียกใช้
ลักษณะของฟังก์ชั่นมีโครงสร้างคล้ายคลึงกับภาษาซีมีลักษณะดังนี้ คือ
function ชื่อฟังก์ชั่น ( )
{
คำสั่ง
.
..
}
ชนิดของตัวแปรในจาวาสคริปต์
การประกาศตัวแปรภายในโปรแกรมจาวาก็จะมีลักษณะเหมือนๆ
กันกับโปรแกรมภาษาทั่วไป คือ จะมีชนิดของตัวแปรอยู่ 2 ลักษณะ คือ
ตัวแปรแบบโลคัล
(Local Variable)
เป็นตัวแปรที่ถูกกำหนดขึ้นให้ใช้เฉพาะภายในฟังก์ชั่นใดฟังก์ชั่นหนึ่ง
และสามารถกำหนดชื่อซ้ำกันได้ในฟังก์ชั่นอื่นๆ อีก
โดยให้ค่าของตัวแปรแตกต่างกันไปภายในแต่ละฟังก์ชั่น ตัวอย่างเช่น
function chcolor( )
{
var cl=red;
.
..
}
function chtext( )
{
var cl=blue
.
..
}
ตัวแปรแบบโลคัล คือ cl ทั้งสองฟังก์ชั่น แต่ในฟังก์ชั่น chcolor( ) กำหนดให้ cl เป็นสีแดง ขณะที่ฟังก์ชั่น chtext( )กำหนดให้ cl
เป็นสีน้ำเงิน ซึ่งจะแยกการทำงานแต่ละภายในกำหนดให้ cl
เป็นสีไม่เกี่ยวข้องกัน
ตัวแปรแบบโกลบอล
(Global Variable)
เป็นตัวแปรที่ถูกกำหนดขึ้นเพื่อให้ใช้ค่าเดียวกันนี้ทั้งโปรแกรม
ไม่ว่าจะอยู่ในฟังก์ชั่นใดๆ ก็ตามก็จะมีค่าเดียวกัน ตัวอย่างเช่น
var cl=red
function chcolor( )
{
document.bgColor=cl;
..
}
function chtext( )
{
document.fgColor=cl;
}
ตัวแปรแบบโกลบอลคือ cl ในฟังก์ชั่นทั้งสองจะมีสถานะเดียวกัน
คือ จะเป็นสีแดงเหมือนกันไม่ว่าจะอยู่ในฟังก์ชั่นใด
ตัวอย่าง
การเขียนฟังก์ชั่นโดยกำหนดให้เมื่อสร้างไฮเปอร์เท็กซ์ให้จาวาสคริปต์ทำงาน จะต้องทำงานตามคำสั่งที่กำหนดให้ในสคริปต์
โดยจากตัวอย่างนี้เป็นการต่อจากภายในสคริปต์เดิม เมื่อคลิกไปที่คำว่า
เปลี่ยนพื้นสีเป็นสีดำหน้าจอจะเปลี่ยนเป็นพื้นสีดำ
แต่เมื่อเริ่มต้นใหม่ก็จะเป็นสีตามที่กำหนดเอาไว้เดิม
<script>
..
function chcolor( )
{
document.bgColor= black;
}
document.write(<a href= javascript:chcolor( )>
เปลี่ยนสีพื้นเป็นสีดำ </a>);
</script>
ลักษณะโปรแกรมต่อจากตัวอย่างที่ 1
<html>
<head>
<title> first javascript </title>
</head>
<body>
<script language=javascript>
document.write(hello <br>);
document.fgColor=blue;
document.write(My name is Sarayuth
<br>);
document.write(ผมชื่อศรายุทธครับ <br><br>);
document.bgColor=yellow;
document.write(<a href=http://www.hunsa.com>goto
hunsa </a> <br>);
document.write(<a href=http://www.sabye.com>goto
sabye </a> <br>);
document.linkColor=green
document.alinkColor=white
document.vlinkColor=red
document.write(document.title);
document.write(<br>+document.lastModified);
function chbcolor( )
{
document.linkColor=white
document.bgColor=black
}
function chfgcolor( )
{
document.fgColor=yellow
}
document.write(<a href=javascript;chbgcolor(
)>เปลี่ยนสีพื้นเป็นสีดำ</a>);
document.write(<a href=javascript;chfgcolor(
)>เปลี่ยนสีตัวอักษร</a>);
</script>
</body>
</html>
***
การกำหนดสัญลักษณ์เพื่อไม่ให้คำสั่งแสดงผลจะใช้เครื่องหมาย //***
กรณีที่เราต้องการเขียนจาวาสคริปต์ในส่วนหัว (Head)
ของโปรแกรม เพื่อไม่ให้โปรแกรมปะปนกัน โดยเขียนฟังก์ชั่นให้อยู่ส่วนหัว
ส่วนคำสั่งทำงานให้อยู่ในพื้นที่แสดงผล (Body) ก็ทำได้ตามตัวอย่าง
ตัวอย่าง
การเขียนสคริปต์ฟังก์ชั่นในส่วนหัวและข้อความในส่วนแสดงผล
<html>
<head>
<title> การเขียนจาวาสคริปต์ในส่วนหัว
</title>
<script language=javascript>
function chcolor()
{
document.bgColor=black;
</script>
</head>
<body>
<script language=javascript>
documentwrite(โปรดคลิกที่ Change
Color เพื่อเปลี่ยนสีพื้น<br>);
</script>
<a href=javascript:chcolor()>Change
Color</a>
</body>
</html>
การสร้างกล่องรับข้อความ
(Dialog Box)
การสร้างไดอะล็อกบ็อกซ์เป็นการแสดงกรอบโต้ตอบขึ้นที่หน้าจอภาพ
โดยอาจเป็นกรอบที่ทำหน้าที่รับข้อมูล หรือแสดงผลแต่เพียงอย่างเดียวก็ได้
การสร้างกรอบรับข้อความโดยใช้คำสั่ง Prompt
จะมีลักษณะดังนี้ คือ
prompt(ข้อความ,Default Text );
Prompt เป็นชื่อคำสั่ง
วงเล็บที่ 1
ให้ใส่ข้อความที่ต้องการให้ปรากฏบนกล่องรับข้อความ
วงเล็บที่ 2 เป็นข้อความที่ปรากฏในกรอบที่ให้กรอก
สำหรับ Default Text หมายถึง ให้ว่างไว้เพื่อรอการกรอกจากผู้ใช้
ตัวอย่าง แสดงกล่องรับข้อความด้วยจาวาสคริปต์
<html>
<head>
<title>
การเขียนจาวาสคริปต์แสดงกรอบรับข้อความ </title>
<script language=javascript>
function chcolor( )
{
var a;
a = prompt (Enter background
color, );
document.bgColor=a;
}
</script>
</head>
<body>
<script language=javascript>
document.write(โปรดคลิกที่ Change
Color เพื่อเปลี่ยนสีพื้น<br>);
document.write(โปรดกรอกสีพื้นที่ต้องการเป็นภาษาอังกฤษ
เช่น สีเขียวพิมพ์ GREEN เป็นต้น <br>);
</script>
<a href=javascript:chcolor( )>Change
Color </a>
</body>
</html>
การสร้างกรอบแสดงข้อความอย่างเดียว
เป็นการเขียนโปรแกรมจาวาสคริปต์ให้แสดงเฉพาะกรอบข้อความที่ต้องการอธิบาย
หรือสอบถามบางอย่างกับผู้ใช้ จะใช้คำสั่ง alert
โดยคำสั่งนี้สามารถเขียนลงในฟังก์ชั่นก็ได้
ตัวอย่างเช่น
alert = (You Change background
to + a);
เป็นการแสดงกรอบข้อความให้ผู้ใช้ทราบว่ากำลังเปลี่ยนพื้นสีเป็นสี
alert เป็นคำสั่งแสดงกรอบข้อความ
ในวงเล็บ
เป็นข้อความที่ต้องการให้แสดงที่กรอบข้อความ
+ เป็นการนำตัวแปรมาต่อท้ายข้อความ
a เป็นตัวแปรที่เรากำหนดขึ้น
เมื่อเรากรอกข้อความในกรอบรับข้อความจะมาปรากฏที่กรอบแสดงข้อความ
ตัวอย่าง การเขียนโปรแกรมจาวาสคริปต์แสดงกรอบรับข้อความ
จากนั้นแสดงกรอบข้อความให้ผู้ใช้ทราบว่าได้เปลี่ยนแปลงตามต้องการแล้ว
<html>
<head>
<title>
การเขียนจาวาสคริปต์แสดงกรอบรับข้อความ และกรอบแสดงข้อความ <title>
<script language=javascript>
function chcolor( )
{
var a;
a = prompt (Enter
background color, );
alert = (You
Change background to + a);
document.bgColor=a;
}
</script>
</head>
<body>
<script language=javascript>
document.write(โปรดคลิกที่
Change Color เพื่อเปลี่ยนสีพื้น<br>);
document.write(โปรดกรอกสีพื้นที่ต้องการเป็นภาษาอังกฤษ
เช่น สีเขียว
พิมพ์ GREEN เป็นต้น <br>);
</script>
<a href=javascript:chcolor( )>Change
Color </a>
</body>
</html>
การเรียกใช้ฟังก์ชั่นจากไฟล์ภายนอกของไฟล์
html
การเขียนโปรแกรมด้วย HTML
เมื่อขึ้นไปทำงานบนเครือข่าย ผู้ใช้สามารถอ่านโค้ดของโปรแกรมที่เขียนได้
เทคนิคการเรียกใช้ฟังก์ชั่นจากไฟล์ภายนอกเป็นการเก็บโค้ดไม่ให้ผู้อื่นรู้ว่าผู้เขียนได้เขียนอะไรไว้
เช่น จัดเก็บไฟล์ชื่อ Java4.html แล้วไปเรียกฟังก์ชั่นในไฟล์ชื่อ
test.jsเพื่อไม่ให้ผู้อื่นรู้ว่าฟังก์ชั่นสั่งงานของตัวโปรแกรมคืออะไร
<html>
<head>
<title>
การเขียนจาวาสคริปต์โดยเรียงฟังก์ชั่นในอีกแฟ้มหนึ่ง
<script src=test.js>
</script>
</head>
<body>
<script language=javascript>
document.write(โปรดคลิกที่
Change Color เพื่อเปลี่ยนสีพื้น<br>);
document.write(โปรดกรอกสีพื้นที่ต้องการเป็นภาษาอังกฤษ
เช่น สีเขียวพิมพ์ GREEN เป็นต้น <br>);
</script>
<a href=javascript:chcolor( )>Change
Color </a>
</body>
</html>
ไฟล์ชื่อ
test.js จะต้องเรียกใช้ มีลักษณะโปรแกรมดังนี้
function chcolor( )
{
var a;
a = prompt (Enter background color, );
document.bgColor=a;
alert(You Change background to + a);
}
String Object
กรณีที่ข้อความที่เรากรอกเป็นตัวอักษรในลักษณะของ
Document Object ก็จะแสดงผลเป็นตัวอักษรที่เราต้องการ
แต่เมื่อเราต้องการทราบกระทำกับตัวอักษรหรือข้อความในลักษณะต่างๆก็ต้องอาศัยการใช้คำสั่งที่ทำงานในแบบ
String ซึ่งจะมีการทำงาน 2 แบบเหมือนใน
Document Object คือ
Method
เป็นการทำงานโดยกำหนดคำสั่งให้หาสตริงค์
ต้องการนับตัวอักษรที่ปรากฏอยู่ในพื้นที่ใดพื้นที่หนึ่ง ก็เป็นการนับสตริงค์โดยใช้คำสั่ง
length นับจำนวนตามความยาว เช่น
document.write(Hello.length);
เป็นการหาความยาวของคำว่า Hello ซึ่งก็จะนับได้ 5 คำ ตามความยาวของคำว่า Hello
document.write(x.length);
เป็นการหาความยาวของคำในตัวแปร x
ซึ่งจะได้ความยาวเท่าไหร่ก็ขึ้นอยู่กับจำนวนคำในตัวแปร
x
ตัวอย่าง การเขียนโปรแกรมจาวาสคริปต์แบบนับตัวอักษร
<html>
<head>
<title> การเขียนจาวาสคริปต์แบบ String Object </title>
</head>
<body>
<script language=javascript>
document.write(Hello.length);
</script>
</body>
</html>
ผลลัพธ์ก็จะได้เป็น เลข 5 ตัวเดียวหน้าจอ เพราะคำว่า Hello
มีสถานะเป็น string 5 ตัวนั่นเอง
ตัวอย่าง
การเขียนโปรแกรมจาวาสคริปต์แบบนับตัวอักษรท่อยู่ในกรอบรับข้อความ
และแสดง กรอบข้อความโต้ตอบในทันที
<html>
<head>
<title> การเขียนจาวาสคริปต์ String
Object แบบนับตัวอักษรในกรอบรับข้อความ
<title>
<script language=javascript>
function count()
{
a = prompt(Please Tell me your
name,);
alert(Hi+a);
alert(You have words in your
name only +a.length);
}
</script>
</head>
<body>
<a href=javascript:count()>
โปรดคลิกเพื่อพิมพ์ชื่อของท่าน</a>
<body>
</html>
เมื่อเรียกใช้ใน
Browser จะปรากฎข้อความให้คลิกเพื่อพิมพ์ชื่อ
จากนั้นก็จะเกิดกรอบรับข้อความให้ผู้ใช้กรอกชื่อ เมื่อกรอกแล้วกด
OK
ก็จะทักทายตามชื่อที่กรอก เมื่อคลิก OK
อีกครั้งก็จะนับจำนวนคำของชื่อผู้ใช้ที่กรอกข้อความเข้าไป
Properties
เป็นการกำหนดคำสั่งที่กระทำกับตัวอักษรที่มีฐานะเป็น
string
ในรูปแบบต่างๆ เช่น กำหนดขนาด ทำตัวยกขึ้น ทำตัวห้อย ฯลฯ
โดยมีลักษณะคำสั่งที่สำคัญได้แก่
-
big( ) เป็นคำสั่งจัดข้อความให้มีขนาดใหญ่
เช่น
document.write(Big.big( ));
-
font Size(n)
เป็นการกำหนดขนาดของข้อความให้ใหญ่ขึ้นเหมือนกับ<font size=
> ใน HTML
กำหนดได้ตั้งแต่ 1 7 ขนาด
document.write(size = 7 <br>.fontsize(7));
-
blink( )
กำหนดให้ข้อความเป็นตัวกระพริบเหมือน <blink> ใน HTML สามารถใช้ได้ใน
Netscape ไม่สามารถใช้ได้ใน Internet Explorer
document.write(blink <br>.blink ( ));
-fontcolor( )
กำหนดสีให้ตัวอักษรหรือข้อความเหมือน <font color=
> ใน HTML
ตัวอย่างเช่น
document.write(red <br>.fontcolor(red));
-
sup( ) กำหนดข้อความให้เป็นตัวยกเหมือน <sup>
ใน HTML ตัวอย่างเช่น
document.write(10+ 2.sup( ));
- sub( ) กำหนดข้อความให้เป็นตัวห้อยเหมือน <sub>
ใน HTML ตัวอย่างเช่น
document.write(H+ 2.sub( )+0);
-
italics( )
กำหนดข้อความให้เป็นตัวเอียงเหมือน <I> ใน HTML ตัวอย่างเช่น
document.write(Italic <br>.italics( ));
-
small( ) กำหนดให้ข้อความเป็นตัวเล็ก
ตัวอย่างเช่น
document.write(SMALL.small( ));
-
strike( )
กำหนดให้มีเส้นขีดพาดกลางข้อความเหมือน <strike> ใน HTML ตัวอย่างเช่น
document.write(STRIKE.strike( ));
- toUpperCase( )
กำหนดให้ข้อความที่เราจะแสดงเป็นตัวพิมพ์ใหญ่ทั้งหมด ตัวอย่างเช่น
document.write(toUpperCase.toUpperCase( ));
-
toLowerCase( )
กำหนดให้ข้อความที่เราจะแสดงเป็นตัวพิมพ์เล็กทั้งหมด ตัวอย่างเช่น
document.write(toLowerCase.toLowerCase( ));
-
fixed( ) กำหนดให้ข้อความใช้ Font ประเภท
Fix Width เป็นการกำหนดให้ข้อความที่ปรากฏเป็นไปตามฟอนท์ที่กำหนดไว้ในเครื่อง
โดยสามารถตรวจสอบดูจากการกำหนดฟอนท์ภายใน Browser ได้ ตัวอย่างเช่น
document.write(FIXED.fixed( ));
ตัวอย่าง
การเขียนโปรแกรมจาวาสคริปต์แบบที่ใช้ Properties
<html>
<head>
<title> การเขียนจาวาสคริปต์ String Object แบบ Properties </title>
</head>
<body>
<script language=javascript>
document.write(Big.big(
));
document.write(Big);
document.write(Big.big(
));
document.write(Big);
document.write(Big <br>
big( ));
document.write(size =
7 <br>.fontsize(7));
document.write(blink <br>.blink
( ));
document.write(กระพริบ
<br>.blink ( ));
document.write(red <br>.fontcolor(red));
document.write(yellow
<br>.fontcolor(yellow));
document.write(10+
2.sup( ));
document.write(H+
2.sub( )+0 <br>);
document.write(Italic
<br>.italics( ));
document.write(Small);
document.write(Small<br>.small(
));
document.write(STRIKE<br>.strike(
));
document.write(toUpperCase<br>.toUpperCase(
));
document.write(toLowerCase<br>.toLowerCase(
));
document.write(FIXED.fixed(
));
</script>
</body>
</html>
JAVA Script
Web Site
ที่แสดงโค้ดรหัสสีเมื่อใช้โปรแกรม JAVA ได้แก่
http://www.phoenix.net/~jacobson/pages/rgbhex.html
Properties String
-
ink( )
เป็นการใช้กำหนดให้ข้อความเป็นจุดเชื่อมโยงไปยังเว็บไซต์ต่างๆ
ตัวอย่างเช่น document.write(Click here to go to Sanook!.link(http://www.sanook.com));
ตัวอย่าง การเขียนโปรแกรมจาวา แบบสร้างจุดเชื่อมโยง
<html>
<head>
<title> การเขียนโปรแกรมจาวา
แบบ Properties String </title>
<script language=javascript>
document.write(Click here to
go to Sanook!.link(http://www.sanook.com));
</script>
</head>
<body>
</body>
</html>
-
chartAt(index)
คืนค่าตัวอักษรที่อยู่ตำแหน่งเดียวกับ Index เช่น
Var name = sarayuth;
Document.write(Character no.3 is +
name.charAt(2));
หมายถึง การเขียนข้อความว่า ตัวหนังสือตัวที่ 3
คือ
r
เพราะการดึงตัวอักษรจะนับจาก ตัวที่ 0 1 2 3 4 5
6 7
S a r a y u t h
ตัวอย่าง
การเขียนโปรแกรมจาวาเพื่อแสดงตัวอักษรในตำแหน่งที่ต้องการ
<html>
<head>
<title> การเขียนโปรแกรมจาวา แบบ Properties String </title>
<script language=javascript>
var name = sarayuth;
document.write(Character no.3 is + name.charAt(2))
</script>
</head>
<body>
</body>
</html>
ผลลัพธ์ที่ได้คือ
Character no.3 is r
ตัวอย่าง
เป็นการใช้คำสั่ง prompt , alert , charAt
โดยเขียนเป็นฟังก์ชั่นเพื่อตรวจสอบตัวอักษรในลำดับ
<html>
<head>
<title> การเขียนโปรแกรมจาวาแบบ
Properties String</title>
<script language=javascript>
function checkchar()
{
var x = prompt
(โปรดพิมพ์ชื่อของท่านลงในช่องว่างนี้,);
var y = prompt
(โปรดบอกตำแหน่งตัวอักษรที่ท่านต้องการรู้:1..,);
alert (ตำแหน่งตัวอักษรที่
\n+y+ ในชื่อคือตัว +x.charAt(y);
}
</script>
</head>
<body>
<a href=javascript:checkchar()>โปรดคลิกเมื่อต้องการค้นหาตัวอักษร
</a>
</body>
</html>
จากตัวอย่าง จะปรากฎคำว่า
โปรดคลิกเมื่อต้องการหาตัวอักษร อันเกิดจากการกำหนดของ a href=javascript
ที่อยู่ใน body จากนั้นเมื่อคลิกก็จะปรากฎกรอบรับข้อความขึ้นให้กรอกชื่อลงไป
เกิดจากการกำหนดคำสั่ง
var x = prompt ชื่อที่พิมพ์จะไปแทนที่ในตัวแปร x
จากนั้นก็จะเกิดกรอบรับข้อความให้ใส่ลำดับตัวอักษรที่เราต้องการทราบ
เกิดจากคำสั่ง
var y=prompt เลขตัวอักษรที่พิมพ์ก็จะไปแทนที่ตัวแปรy
จากนั้นก็จะเกิดกรอบข้อความ ตำแหน่งตัวอักษร แล้วนำ y
ต่อท้าย แล้วตามด้วยในชื่อตัวคือ
- substring (startindex,lastindex)
เป็นการแสดงข้อความตั้งแต่ตัวที่ต้องการให้เริ่มแสดง
จนถึงตัวสุดท้ายที่ต้องการให้แสดง
เช่น var name = sarayuth;
document.write(Substring of index 1 to 3 is \ +
name.substring (1,3)+ \ );
ตัวอย่าง
การเขียนโปรแกรมจาวาสคริปต์
แสดงตัวอักษรในข้อความในจุดที่ต้องการให้แสดงถึงจุดที่สิ้นสุด
<html>
<head>
<title> การเขียนโปรแกรมจาวา แบบ
Properties String </title>
<script language=javascript>
var name = sarayuth;
document.write(Substring of
index 0 to 3 is \ + name.substring (0,3)+ \ );
alert(Substring of index 0 to
3 is \ + name.substring (0,3)+ \ );
</script>
</head>
<body>
</body>
</html>
สัญลักษณ์ที่ใช้ในการเปรียบเทียบในการควบคุม
= = เท่ากับ
> มากกว่า
>= มากกว่าเท่ากับ
< น้อยกว่า
<= น้อยกว่าเท่ากับ
!= ไม่เท่ากับ
ตัวอย่างเช่น
I + = 1 ; ผล I = I + 1; I+ +
I - = 1 ; ผล I = I - 1; I -
-
I * = 2 ; ผล I = I * 2;
I / = 2 ; ผล I = I / 2;
I% = 2 ; ผล I = I % 2;
5 % 2 = 1 คือ 5 mod 2 = 1 (หารเอาเศษ)
5 / 2 = 2.5
Test
All Right Reserved 2003 Support IE5.0 or Higher Best Preview
800x600 Pixels
แนะนำติชม:
ดร.ปรัชญนันท์ นิลสุข
:
prachyanun@hotmail.com
.
ความแตกต่างระหว่างการเขียนโปรแกรมคอมไพเลอร์กับโปรแกรมสคริปต์
