การเรียกใช้งาน function ในจาวาสคริปต์

การเรียกใช้ Function ในจาวาสคริปต์สามารถทำได้หลายวิธี ตัวอย่างนี้จะเป็นการเรียกใช้งาน function ที่อยู่ภายใน body ซึ่งก็สามารถใช้งานได้เหมือนกันแต่ถ้าใช้ใน code ขนาดใหญ่ อาจเกิดปัญหาได้

<pre><script type="text/javascript">
function nate() {
document.write('nate'+' ' + '^^!');
}
</script>
<script type="text/javascript">
nate();
nate();
nate();
nate();
nate();
</script></pre>

จากตัวอย่างจะเห็นว่าประโยชน์ของการใช้ function ก็คือทำงานซ้ำๆได้เร็วกว่า^^
ตัวอย่างการเรียกใช้ function ด้านล่างน่ะ

code ดึงค่าตัวแปรที่คั้นด้วย ","

ตัวอย่างนี้แสดงการใช้งานคำลั่ง myVariable.split(',') เป็นการดึงค่าตัวแปร ที่คั้นด้วย","ซึ่งผลที่ได้จากตัวแปรนี้จะเป็นตัวแปรชนิด Array ดูตัวอย่าง code ด้านล่าง

<script type="text/javascript">
<!--
var myVariable = 'a,b,c,d';
var stringArray = myVariable.split(',');
document.write(stringArray[3]);
document.write(stringArray[1]);
document.write(stringArray[4]);
document.write(stringArray[0]);
// -->
</script>

 code ไม่ยากอีกแล้วแต่ code เริ่มเยอะขึ้นแล้วว่างๆก็ทบทวนกันหน่อย ^^
ผลของ code myVariable.split(',')ดูด้านล่าง

ที่ไม่เรียง Array เป็น 0 1 2 3 เพื่อบอกให้รู้ว่าค่าตัวแปรมันเรียงจากซ้ายไปขวา

กำหนดค่าให้กับตัวแปร Array

ตัวอย่างนี้เป็นการกำหนดตัวแปรชนิด Array ซึ่งสามารถกำหนดได้ตาม script ด้านล่าง

<pre><script type="text/javascript">
<!--
var myblogs = new Array(5);
myblogs[0] = 'http://createuownblog.blogspot.com/';
myblogs[1] = 'http://thaijavascript.blogspot.com/';
myblogs[2] = 'http://www.บล็อกเกมส์.blogspot.com/';
myblogs[3] = 'http://บันทึกของฉัน.blogspot.com/';
myblogs[4] = 'https://sites.google.com/site/fangwithyuonline/home/fm99';
document.writeln(myblogs[0]);
document.writeln(myblogs[1]);
document.writeln(myblogs[2]);
document.writeln(myblogs[3]);
document.write(myblogs[4]);
// -->
</script></pre>

ผลลัพธ์ของคำสั่ง new Array นี้เราจะได้ค่าตัวแปร myblogs ทั้งหมด 5 ค่าด้วยกัน
คั่นด้วยเครื่องหมาย,ดูผลของ Script ด้านล่าง

คงจะพอเข้าใจเรื่อง Array นะครับ ^^

การกำหนดค่าตัวอักษรหลายๆแบบในคำสั่งเดียว

การรวมหลายๆ value ของตัวแปรชนิด String ทำได้ดังตัวอย่างด้านล่าง

<script type="text/javascript">

<!--
var myVariable = 'http://thaijavascript.blogspot.com/';
var newVariable = myVariable.bold().italics().fontcolor('blue').fontsize('4pt').blink();
document.write(newVariable);
// -->
</script>

ผลที่ได้ก็คือ

เป็นการเพิ่ม value ของตัวแปร String หลาย value ในคำสั่งเดียว^^

สคริปต์แสดงตัวอักษรในลักษณะต่างๆ

บทความนี้เป็นการยกตัวอย่าง value ของตัวแปรชนิด ตัวอักษร Strings มาดูกันว่าเราสามารถกำหนดค่าของตัวอักษรด้วยคำสัง document.write
ได้กี่แบบ ดูตัวอย่างจาก code ข้างล่าง

<script type="text/javascript">
<!--
var myVariable = 'http://thaijavascript.blogspot.com/';
document.writeln(myVariable.big());
document.writeln(myVariable.blink());
document.writeln(myVariable.bold());
document.writeln(myVariable.fixed());
document.writeln(myVariable.fontcolor('red'));
document.writeln(myVariable.fontsize('5pt'));
document.writeln(myVariable.italics());
document.writeln(myVariable.small());
document.writeln(myVariable.strike());
document.writeln(myVariable.sub());
document.writeln(myVariable.sup());
document.writeln(myVariable.toLowerCase());
document.write(myVariable.toUpperCase());
// -->
</script>

ดูผลลัพธ์ด้านล่าง

จากcodeตัวอย่างเราจะเห็นว่าสามารถ
กำหนดค่าตัวอักษรได้จากคำสั่งนี้ไม่ว่าจะเป็นตัวใหญ่ตัวเล็ก
ตัวอักษรกระพริบตัวอักษรสีแดงหรืออื่นๆซึ่งคุณสามารถกำหนดได้เอง^^

การแทนที่ข้อความด้วยคำสั่ง .replace

บทความนี้อธิบายคำสั่ง .replace ซึ่งคำสั่งนี้สามารถแทนที่ข้อความหนึ่ง เป็นอีกข้อความได้ ตัวอย่างตาม code ด้านล่าง

<script type="text/javascript">
<!--
var myVariable = 'Hello there';
var newVariable = myVariable.replace('there','nate');
document.write(newVariable);
// -->
</script>

การทำงานของสคริปต์นี้ก็คือเริ่มต้นเรากำหนดตัวแปร myVariable
เป็น hello there ต่อมาเรากำหนดตัวแปรใหม่ newVariable
โดยใช้คำสั่ง .replace แทน there ด้วย nate
บรรทัดต่อมาก็ให้แสดงค่าตัวแปร newVariable
ผลที่ได้คือ

^^ ขอให้สนุกนะ ^^

ค้นหาต่ำแหน่งของข้อความในตัวแปรชนิด Strings

สคริปต์นี้จะเป็นการนับจำนวนตัวอักษรก่อนจะพบคำหรืออักษรที่เราค้นหาภายใน ตัวแปรที่เป็นตัวแปรชนิดตัวอักษรโดยนับช่องว่างด้วย ใช้คำสั่งต่อไปนี้

<script type="text/javascript">
<!--
var myVariable = 'abcdefg here';
var HPlace = myVariable.search('here');
document.write(HPlace);
// -->
</script>

ผลลัพธ์ที่ได้

จะเท่ากับ 8 นั้นคือ a b c d e f g ช่องว่าง เท่ากับ 8 ^^

การเขียนสคริปต์เพื่อคำนวณ

การเขียนสคริปต์เพื่อนำค่าตัวเลขมาบวกลบคูณหารกันสามารถเขียนได้โดย การกำหนดค่าตัวแปรให้เป็นตัวเลขก่อนแล้วค่อยนำมาคำนวณ ดังตัวอย่างcodeด้านล่าง

<pre><script type="text/javascript">
<!--
var myVariable = 100;
var anotherVariable = 200;
var PResults = myVariable + anotherVariable;
var MResults = myVariable - anotherVariable;
var QResults = myVariable * anotherVariable;
var RResults = myVariable / anotherVariable;
document.write('100 + 200 =');
document.writeln(PResults);
document.write('100 - 200 =');
document.writeln(MResults);
document.write('100 * 200 =');
document.writeln(QResults);
document.write('100 / 200 =');
document.write(RResults);
// -->
</script></pre>

ดูตัวอย่างแล้วไม่ยากใช่มั้ย^^
ผลที่ได้ด้านล่าง

การกำหนดตัวแปรชนิดตัวเลข

การกำหนดค่าตัวแปรให้เป็นชนิดตัวเลขหรือ Numeric Variable เพื่อใช้คุณสมบัติ เชิงตัวเลขไปใช้งาน สามารถกำหนดได้ดังตัวอยางข้างล่าง

<body>
<script type="text/javascript">
<!--
var myVariable = 100;
// -->
</script>
</body>

แตกต่างจากข้อมูลตัวอักษรตรงมีกับไม่มีเครื่องหมายคำพูด ^^

การกำหนดตัวแปร

Javascript สามารถกำหนดตัวแปรได้โดยใช้ code ด้านล่าง

<body>
<script type="text/javascript">
<!--
var myVariable = 'Hello';
document.write(myVariable);
// -->
</script>
</body>

ผลที่ได้จะเหมือนกับ

<body>
<script type="text/javascript">
<!--
document.write('Hello');
// -->
</script>
</body>

แตกต่างกันที่ใช้กับไม่ไช้ตัวแปลการใช้ตัวแปลจะใช้ในกรณีที่ค่าตัวแปลยาวมากหรือใช้เพื่อคำสั่งอื่นๆ ^^

รู้จักคำสั่ง document.write และ document.writeln

มารู้จักกับคำสั่ง

document.write
document.writeln

ลองใช้คำสั่งจาก code ด้านล่าง

<pre>
<script type="text/javascript">
<!--
document.write('He');
document.writeln('llo');
document.write('ทุกคน');
// -->
</script>
</pre>

ผลที่ได้จะเป็น

ลองทำดูจะได้เข้าใจคำสั่งนี้ ^^

การเขียนหลายคำสั่งในสคริปต์เดียว

เราสามารถเขียนคำสั่ง Javascript หลายคำสั่งดูตัวอย่างต่อไปนี้

<script type="text/javascript">
// การเขียนคำสั่งหลายคำสั่ง
document.write('Hello');
document.write('hello');
document.write('hi');
</script>

เมื่อจบแต่ล่ะคำสั่งให้เปิดท้ายด้วย(;) ^^

จำ code ด้วยคอมเม้น

เราสามารถเขียนคอมเม้นใว้ในสคริปต์ของเราได้โดยใช้ code ต่อไปนี้

<script type="text/javascript">
// คอมเม้นแบบบรรทัดเดียว
document.write('Hello');
</script>

Code ด้านบนเป็นการคอมเม้นแบบบรรทัดเดียว
ถ้าต้องการคอมเม้นหลายบรรทัดต้องใช้ code นี้

<script type="text/javascript">
/*
คอมเม้น

หลายบรรทัด 

 */
document.write('Hello');
</script>

ประโยชน์ของคอมเม้นนี้เวลาเราเขียนสคริปต์มากๆจะทำให้เราเข้าใจในจุดที่เราคอมเม้นใว้ ^^

แสดงข้อความในเว็บเบราว์เชอร์ที่ไม่สนับสนุนสคริปต์

มีบางเบราว์เซอร์ที่ไม่สนับสนุน JavaScript เราสามารถจะแสดงข้อความของหน้าเว็บจากเว็บเบราว์เซอร์ไม่สนับสนุน JavaScript โดยใช้ code ต่อไปนี้

<script type="text/javascript">
document.write('Hello World!')
</script>
<noscript><a href='http://thaijavascript.blogspot.com/'>basic javascript</a></noscript>

ในเว็บเบราว์เชอร์ที่ไม่สนับสนุนจะแสดงข้อความ basic javascript แทน
เป็นการแนะนำเว็บเราไปในตัว ^^
ผลที่ได้

เริ่มต้นกับจาวาสคริปต์

จาวาสคริปต์เป็นสคริปต์แบบไดนามิกที่ช่วยให้คุณสามารถสร้างการโต้ตอบ ใน code HTML ได้ การใช้งาน Javascript นี้จะอยู่ในรูปแบบแท็กเปิด และแท็กปิดดังนี้

   1:  <script ...>

   2:  ใส่ JavaScript code ตรงนี้

   3:  </script>

โดยทั่วไปแล้วเราต้องระบุรายละเอียดของ จาวาสคริปต์ให้ browser
รู้จักและสามารถแสดงสคริปต์ใน browser ที่สนับสนุน script
จะอยู่ในลักษณะดังต่อไปนี้

   1:  <script type="text/javascript">

   2:  JavaScript code goes here

   3:  </script>

ต่อไปเป็นวิธีการสร้างเอกสาร HTML ที่มี javascript รวมอยู่
และจะแสดงคำว่า hello world ที่หน้าเว็บ

เปิดโปรแกรม notepad ขึ้นมาแล้วพิมพ์ข้อความต่อไปนี้ลงไป

<html>

<head>

</head>

<body>

<script type="text/javascript">

document.write('Hello world');

</script>

</body>

</html>

หลังจากนั้นให้ save โดยเลือกไปที่ All file แล้วตั้งชื่อเป็น hello.html ตามรูป

เปิด file hello.html ด้วยโปรแกรม web browser ถ้าสคริปต์ถูกต้องจะมีคำว่า hello world ที่หน้าเว็ป

ถ้าเขียนสคริปต์นี้แล้วได้ผลเหมือนรูปด้านบนก็เป็นการเริ่มต้นที่ถูกทางแล้ว ^^