JavaScript - คู่มือฉบับย่อ
JavaScript คืออะไร?
JavaScript เป็นภาษาโปรแกรมคอมพิวเตอร์แบบไดนามิก มีน้ำหนักเบาและมักใช้เป็นส่วนหนึ่งของหน้าเว็บซึ่งการใช้งานทำให้สคริปต์ฝั่งไคลเอ็นต์โต้ตอบกับผู้ใช้และสร้างเพจแบบไดนามิกได้ มันเป็นภาษาโปรแกรมที่ตีความด้วยความสามารถเชิงวัตถุ
JavaScript เป็นครั้งแรกที่รู้จักกันในชื่อ LiveScript,แต่ Netscape เปลี่ยนชื่อเป็น JavaScript อาจเป็นเพราะความตื่นเต้นที่สร้างขึ้นโดย Java JavaScript ปรากฏตัวครั้งแรกใน Netscape 2.0 ในปี 1995 ด้วยชื่อLiveScript. แกนกลางที่ใช้งานทั่วไปของภาษาถูกฝังอยู่ใน Netscape, Internet Explorer และเว็บเบราว์เซอร์อื่น ๆ
ECMA-262 ข้อมูลจำเพาะกำหนดรุ่นมาตรฐานของภาษาหลักจาวาสคริปต์
- JavaScript เป็นภาษาโปรแกรมที่มีการตีความและมีน้ำหนักเบา
- ออกแบบมาเพื่อสร้างแอปพลิเคชันที่เน้นเครือข่ายเป็นศูนย์กลาง
- เสริมและรวมเข้ากับ Java
- เสริมและรวมเข้ากับ HTML
- เปิดและข้ามแพลตฟอร์ม
JavaScript ฝั่งไคลเอ็นต์
JavaScript ฝั่งไคลเอ็นต์เป็นรูปแบบภาษาที่ใช้บ่อยที่สุด ควรรวมสคริปต์ไว้ในหรืออ้างอิงโดยเอกสาร HTML เพื่อให้เบราว์เซอร์ตีความโค้ด
หมายความว่าหน้าเว็บไม่จำเป็นต้องเป็น HTML แบบคงที่ แต่สามารถรวมโปรแกรมที่โต้ตอบกับผู้ใช้ควบคุมเบราว์เซอร์และสร้างเนื้อหา HTML แบบไดนามิก
กลไกฝั่งไคลเอ็นต์ JavaScript มีข้อดีหลายประการเหนือสคริปต์ฝั่งเซิร์ฟเวอร์ CGI แบบดั้งเดิม ตัวอย่างเช่นคุณอาจใช้ JavaScript เพื่อตรวจสอบว่าผู้ใช้ป้อนที่อยู่อีเมลที่ถูกต้องในฟิลด์แบบฟอร์มหรือไม่
โค้ด JavaScript ถูกเรียกใช้งานเมื่อผู้ใช้ส่งแบบฟอร์มและเฉพาะในกรณีที่รายการทั้งหมดถูกต้องเท่านั้นจะถูกส่งไปยังเว็บเซิร์ฟเวอร์
JavaScript สามารถใช้เพื่อดักจับเหตุการณ์ที่ผู้ใช้เริ่มต้นเช่นการคลิกปุ่มการนำทางลิงก์และการดำเนินการอื่น ๆ ที่ผู้ใช้เริ่มต้นอย่างชัดเจนหรือโดยปริยาย
ข้อดีของ JavaScript
ข้อดีของการใช้ JavaScript คือ -
Less server interaction- คุณสามารถตรวจสอบความถูกต้องของข้อมูลผู้ใช้ก่อนที่จะส่งเพจไปยังเซิร์ฟเวอร์ ซึ่งจะช่วยประหยัดปริมาณการใช้งานเซิร์ฟเวอร์ซึ่งหมายความว่าเซิร์ฟเวอร์ของคุณจะโหลดน้อยลง
Immediate feedback to the visitors - พวกเขาไม่ต้องรอให้โหลดหน้าซ้ำเพื่อดูว่าพวกเขาลืมป้อนบางสิ่งหรือไม่
Increased interactivity - คุณสามารถสร้างอินเทอร์เฟซที่ตอบสนองเมื่อผู้ใช้วางเมาส์เหนือพวกเขาหรือเปิดใช้งานผ่านแป้นพิมพ์
Richer interfaces - คุณสามารถใช้ JavaScript เพื่อรวมรายการต่างๆเช่นส่วนประกอบแบบลากแล้วปล่อยและแถบเลื่อนเพื่อให้ Rich Interface แก่ผู้เยี่ยมชมไซต์ของคุณ
ข้อ จำกัด ของ JavaScript
เราไม่สามารถถือว่า JavaScript เป็นภาษาโปรแกรมที่สมบูรณ์ ไม่มีคุณสมบัติที่สำคัญดังต่อไปนี้ -
JavaScript ฝั่งไคลเอ็นต์ไม่อนุญาตให้อ่านหรือเขียนไฟล์ สิ่งนี้ถูกเก็บไว้เพื่อเหตุผลด้านความปลอดภัย
ไม่สามารถใช้ JavaScript สำหรับแอปพลิเคชันเครือข่ายเนื่องจากไม่มีการสนับสนุนดังกล่าว
JavaScript ไม่มีความสามารถแบบมัลติเธรดหรือมัลติโปรเซสเซอร์
เป็นอีกครั้งที่ JavaScript เป็นภาษาการเขียนโปรแกรมที่มีน้ำหนักเบาซึ่งช่วยให้คุณสามารถสร้างการโต้ตอบในหน้า HTML แบบคงที่ได้
เครื่องมือพัฒนา JavaScript
จุดแข็งที่สำคัญอย่างหนึ่งของ JavaScript คือไม่ต้องใช้เครื่องมือพัฒนาราคาแพง คุณสามารถเริ่มต้นด้วยโปรแกรมแก้ไขข้อความง่ายๆเช่น Notepad เนื่องจากเป็นภาษาที่ตีความได้ภายในบริบทของเว็บเบราว์เซอร์คุณจึงไม่จำเป็นต้องซื้อคอมไพเลอร์
เพื่อให้ชีวิตของเราง่ายขึ้นผู้ขายหลายรายได้คิดค้นเครื่องมือแก้ไข JavaScript ที่ดีมาก บางส่วนมีรายชื่ออยู่ที่นี่ -
Microsoft FrontPage- Microsoft ได้พัฒนาโปรแกรมแก้ไข HTML ยอดนิยมชื่อ FrontPage FrontPage ยังมีเครื่องมือ JavaScript จำนวนหนึ่งสำหรับนักพัฒนาเว็บเพื่อช่วยในการสร้างเว็บไซต์แบบโต้ตอบ
Macromedia Dreamweaver MX- Macromedia Dreamweaver MX เป็นโปรแกรมแก้ไข HTML และ JavaScript ที่ได้รับความนิยมอย่างมากในกลุ่มผู้พัฒนาเว็บระดับมืออาชีพ มีส่วนประกอบ JavaScript ที่สร้างไว้ล่วงหน้าที่มีประโยชน์หลายอย่างรวมเข้ากับฐานข้อมูลและสอดคล้องกับมาตรฐานใหม่เช่น XHTML และ XML
Macromedia HomeSite 5 - HomeSite 5 เป็นโปรแกรมแก้ไข HTML และ JavaScript ที่ได้รับความนิยมจาก Macromedia ซึ่งสามารถใช้จัดการเว็บไซต์ส่วนตัวได้อย่างมีประสิทธิภาพ
JavaScript วันนี้อยู่ที่ไหน
มาตรฐาน ECMAScript Edition 5 จะเป็นการอัปเดตครั้งแรกในรอบสี่ปี JavaScript 2.0 เป็นไปตาม Edition 5 ของมาตรฐาน ECMAScript และความแตกต่างระหว่างทั้งสองนั้นมีน้อยมาก
ข้อกำหนดสำหรับ JavaScript 2.0 มีอยู่ในไซต์ต่อไปนี้: http://www.ecmascript.org/
วันนี้ JavaScript ของ Netscape และ JScript ของ Microsoft เป็นไปตามมาตรฐาน ECMAScript แม้ว่าทั้งสองภาษาจะยังคงรองรับคุณสมบัติที่ไม่ได้เป็นส่วนหนึ่งของมาตรฐานก็ตาม
JavaScript สามารถใช้งานได้โดยใช้คำสั่ง JavaScript ที่อยู่ภายในไฟล์ <script>... </script> แท็ก HTML ในหน้าเว็บ
คุณสามารถวางไฟล์ <script> แท็กที่มี JavaScript ของคุณที่ใดก็ได้ในหน้าเว็บของคุณ แต่โดยปกติแนะนำว่าคุณควรเก็บไว้ในไฟล์ <head> แท็ก
แท็ก <script> แจ้งเตือนโปรแกรมเบราว์เซอร์ให้เริ่มตีความข้อความทั้งหมดระหว่างแท็กเหล่านี้เป็นสคริปต์ ไวยากรณ์อย่างง่ายของ JavaScript ของคุณจะปรากฏดังนี้
<script ...>
JavaScript code
</script>แท็กสคริปต์รับแอตทริบิวต์ที่สำคัญสองรายการ
Language- แอตทริบิวต์นี้ระบุภาษาสคริปต์ที่คุณใช้ โดยทั่วไปค่าของมันจะเป็นจาวาสคริปต์ แม้ว่า HTML เวอร์ชันล่าสุด (และ XHTML ซึ่งเป็นตัวต่อ) ได้ยุติการใช้คุณลักษณะนี้แล้ว
Type - แอตทริบิวต์นี้เป็นสิ่งที่แนะนำในตอนนี้เพื่อระบุภาษาสคริปต์ที่ใช้งานและควรตั้งค่าเป็น "text / javascript"
ดังนั้นส่วน JavaScript ของคุณจะมีลักษณะดังนี้ -
<script language = "javascript" type = "text/javascript">
JavaScript code
</script>รหัส JavaScript แรกของคุณ
ให้เรานำตัวอย่างเพื่อพิมพ์ "Hello World" เราได้เพิ่มความคิดเห็น HTML ทางเลือกที่ล้อมรอบโค้ด JavaScript ของเรา นี่คือการบันทึกโค้ดของเราจากเบราว์เซอร์ที่ไม่รองรับ JavaScript ความคิดเห็นจะลงท้ายด้วย "// ->" ที่นี่ "//" แสดงถึงความคิดเห็นใน JavaScript ดังนั้นเราจึงเพิ่มสิ่งนั้นเพื่อป้องกันไม่ให้เบราว์เซอร์อ่านตอนท้ายของความคิดเห็น HTML เป็นโค้ด JavaScript ต่อไปเราเรียกฟังก์ชันdocument.write ซึ่งเขียนสตริงลงในเอกสาร HTML ของเรา
ฟังก์ชันนี้สามารถใช้เพื่อเขียนข้อความ HTML หรือทั้งสองอย่าง ดูรหัสต่อไปนี้
<html>
<body>
<script language = "javascript" type = "text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
</body>
</html>รหัสนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
Hello World!ช่องว่างและเส้นแบ่ง
JavaScript จะละเว้นช่องว่างแท็บและบรรทัดใหม่ที่ปรากฏในโปรแกรม JavaScript คุณสามารถใช้ช่องว่างแท็บและบรรทัดใหม่ได้อย่างอิสระในโปรแกรมของคุณและคุณมีอิสระในการจัดรูปแบบและเยื้องโปรแกรมของคุณอย่างเป็นระเบียบและสม่ำเสมอซึ่งทำให้โค้ดอ่านและเข้าใจได้ง่าย
อัฒภาคเป็นทางเลือก
โดยทั่วไปคำสั่งอย่างง่ายใน JavaScript จะตามด้วยอักขระอัฒภาคเช่นเดียวกับใน C, C ++ และ Java อย่างไรก็ตาม JavaScript ช่วยให้คุณสามารถละเว้นอัฒภาคนี้ได้หากแต่ละคำสั่งของคุณอยู่ในบรรทัดแยกกัน ตัวอย่างเช่นโค้ดต่อไปนี้สามารถเขียนได้โดยไม่มีเครื่องหมายอัฒภาค
<script language = "javascript" type = "text/javascript">
<!--
var1 = 10
var2 = 20
//-->
</script>แต่เมื่อจัดรูปแบบเป็นบรรทัดเดียวดังนี้คุณต้องใช้อัฒภาค -
<script language = "javascript" type = "text/javascript">
<!--
var1 = 10; var2 = 20;
//-->
</script>Note - เป็นการฝึกการเขียนโปรแกรมที่ดีในการใช้อัฒภาค
ความไวกรณี
JavaScript เป็นภาษาที่คำนึงถึงขนาดตัวพิมพ์ ซึ่งหมายความว่าคำหลักภาษาตัวแปรชื่อฟังก์ชันและตัวระบุอื่น ๆ จะต้องพิมพ์ด้วยตัวอักษรตัวพิมพ์ใหญ่ที่สอดคล้องกันเสมอ
ดังนั้นตัวระบุ Time และ TIME จะสื่อความหมายที่แตกต่างกันใน JavaScript
NOTE - ควรใช้ความระมัดระวังขณะเขียนชื่อตัวแปรและฟังก์ชันใน JavaScript
ความคิดเห็นใน JavaScript
JavaScript รองรับทั้งความคิดเห็นสไตล์ C และ C ++ ดังนั้น -
ข้อความใด ๆ ระหว่าง a // และท้ายบรรทัดจะถือว่าเป็นความคิดเห็นและ JavaScript จะละเว้น
ข้อความใด ๆ ระหว่างอักขระ / * และ * / จะถือว่าเป็นความคิดเห็น ซึ่งอาจครอบคลุมหลายบรรทัด
JavaScript ยังรับรู้ลำดับการเปิดความคิดเห็น HTML <! - JavaScript ถือว่าสิ่งนี้เป็นความคิดเห็นบรรทัดเดียวเช่นเดียวกับ // comment
ลำดับการปิดความคิดเห็น HTML -> ไม่รู้จักโดย JavaScript ดังนั้นจึงควรเขียนเป็น // ->
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงวิธีใช้ความคิดเห็นใน JavaScript
<script language = "javascript" type = "text/javascript">
<!--
// This is a comment. It is similar to comments in C++
/*
* This is a multi-line comment in JavaScript
* It is very similar to comments in C Programming
*/
//-->
</script>เบราว์เซอร์สมัยใหม่ทั้งหมดมาพร้อมกับการรองรับ JavaScript ในตัว บ่อยครั้งคุณอาจต้องเปิดหรือปิดการสนับสนุนนี้ด้วยตนเอง บทนี้อธิบายขั้นตอนการเปิดใช้งานและปิดใช้งานการสนับสนุน JavaScript ในเบราว์เซอร์ของคุณ: Internet Explorer, Firefox, chrome และ Opera
JavaScript ใน Internet Explorer
ต่อไปนี้เป็นขั้นตอนง่ายๆในการเปิดหรือปิด JavaScript ใน Internet Explorer ของคุณ -
ติดตาม Tools → Internet Options จากเมนู
เลือก Security จากกล่องโต้ตอบ
คลิก Custom Level ปุ่ม.
เลื่อนลงไปจนพบ Scripting ตัวเลือก
เลือกเปิดใช้งานปุ่มตัวเลือกภายใต้Active scripting.
สุดท้ายคลิกตกลงและออกมา
หากต้องการปิดใช้งานการสนับสนุน JavaScript ใน Internet Explorer ของคุณคุณต้องเลือก Disable ปุ่มตัวเลือกด้านล่าง Active scripting.
JavaScript ใน Firefox
ขั้นตอนในการเปิดหรือปิด JavaScript ใน Firefox มีดังนี้ -
เปิดแท็บใหม่→พิมพ์ about: config ในแถบที่อยู่
จากนั้นคุณจะพบกล่องโต้ตอบคำเตือน เลือกI’ll be careful, I promise!
จากนั้นคุณจะพบรายการ configure options ในเบราว์เซอร์
ในแถบค้นหาพิมพ์ javascript.enabled.
คุณจะพบตัวเลือกในการเปิดหรือปิดใช้งานจาวาสคริปต์โดยคลิกขวาที่ค่าของตัวเลือกนั้น→ select toggle.
ถ้า javascript.enabled เป็นจริง มันจะแปลงเป็นเท็จเมื่อคลิกtoogle. หากจาวาสคริปต์ถูกปิดใช้งาน จะเปิดใช้งานเมื่อคลิกสลับ
JavaScript ใน Chrome
ขั้นตอนในการเปิดหรือปิด JavaScript ใน Chrome มีดังนี้ -
คลิกเมนู Chrome ที่มุมขวาบนของเบราว์เซอร์
เลือก Settings.
คลิก Show advanced settings ที่ส่วนท้ายของหน้า
ภายใต้ Privacy คลิกปุ่มการตั้งค่าเนื้อหา
ในส่วน "Javascript" ให้เลือก "ไม่อนุญาตให้ไซต์ใด ๆ เรียกใช้ JavaScript" หรือ "อนุญาตให้ไซต์ทั้งหมดเรียกใช้ JavaScript (แนะนำ)"
JavaScript ใน Opera
ขั้นตอนในการเปิดหรือปิด JavaScript ใน Opera มีดังนี้ -
ติดตาม Tools → Preferences จากเมนู
เลือก Advanced จากกล่องโต้ตอบ
เลือก Content จากรายการที่ระบุไว้
เลือก Enable JavaScript ช่องทำเครื่องหมาย
สุดท้ายคลิกตกลงและออกมา
หากต้องการปิดใช้งานการสนับสนุน JavaScript ใน Opera ของคุณคุณไม่ควรเลือกไฟล์ Enable JavaScript checkbox.
คำเตือนสำหรับเบราว์เซอร์ที่ไม่ใช่ JavaScript
หากคุณต้องทำสิ่งสำคัญโดยใช้ JavaScript คุณสามารถแสดงข้อความเตือนให้ผู้ใช้โดยใช้ <noscript> แท็ก
คุณสามารถเพิ่มไฟล์ noscript บล็อกทันทีหลังจากบล็อกสคริปต์ดังนี้ -
<html>
<body>
<script language = "javascript" type = "text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
<noscript>
Sorry...JavaScript is needed to go ahead.
</noscript>
</body>
</html>ตอนนี้หากเบราว์เซอร์ของผู้ใช้ไม่รองรับ JavaScript หรือไม่ได้เปิดใช้งาน JavaScript ข้อความจาก </noscript> จะแสดงบนหน้าจอ
มีความยืดหยุ่นในการรวมโค้ด JavaScript ที่ใดก็ได้ในเอกสาร HTML อย่างไรก็ตามวิธีที่ดีที่สุดในการรวม JavaScript ไว้ในไฟล์ HTML มีดังนี้ -
สคริปต์ในส่วน <head> ... </head>
สคริปต์ในส่วน <body> ... </body>
สคริปต์ในส่วน <body> ... </body> และ <head> ... </head>
สคริปต์ในไฟล์ภายนอกแล้วรวมไว้ในส่วน <head> ... </head>
ในส่วนต่อไปนี้เราจะดูว่าเราสามารถวาง JavaScript ในไฟล์ HTML ได้อย่างไร
JavaScript ในส่วน <head> ... </head>
หากคุณต้องการให้สคริปต์ทำงานในบางเหตุการณ์เช่นเมื่อผู้ใช้คลิกที่ใดที่หนึ่งคุณจะวางสคริปต์นั้นไว้ในส่วนหัวดังนี้ -
<html>
<head>
<script type = "text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</body>
</html>รหัสนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
JavaScript ในส่วน <body> ... </body>
หากคุณต้องการสคริปต์เพื่อรันขณะที่เพจโหลดเพื่อให้สคริปต์สร้างเนื้อหาในเพจสคริปต์จะไปอยู่ในส่วน <body> ของเอกสาร ในกรณีนี้คุณจะไม่มีฟังก์ชันที่กำหนดโดยใช้ JavaScript ดูรหัสต่อไปนี้
<html>
<head>
</head>
<body>
<script type = "text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<p>This is web page body </p>
</body>
</html>รหัสนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
JavaScript ในส่วน <body> และ <head>
คุณสามารถใส่โค้ด JavaScript ของคุณในส่วน <head> และ <body> ได้ดังนี้ -
<html>
<head>
<script type = "text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<script type = "text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</body>
</html>รหัสนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
JavaScript ในไฟล์ภายนอก
เมื่อคุณเริ่มทำงานกับ JavaScript อย่างครอบคลุมมากขึ้นคุณจะพบว่ามีหลายกรณีที่คุณนำโค้ด JavaScript ที่เหมือนกันมาใช้ซ้ำในหลาย ๆ หน้าของไซต์
คุณไม่ได้ถูก จำกัด ให้ดูแลรหัสที่เหมือนกันในไฟล์ HTML หลายไฟล์ script แท็กมีกลไกเพื่อให้คุณสามารถจัดเก็บ JavaScript ในไฟล์ภายนอกจากนั้นรวมไว้ในไฟล์ HTML ของคุณ
นี่คือตัวอย่างเพื่อแสดงวิธีรวมไฟล์ JavaScript ภายนอกในโค้ด HTML ของคุณโดยใช้ script แท็กและ src แอตทริบิวต์
<html>
<head>
<script type = "text/javascript" src = "filename.js" ></script>
</head>
<body>
.......
</body>
</html>ในการใช้ JavaScript จากแหล่งไฟล์ภายนอกคุณต้องเขียนซอร์สโค้ด JavaScript ทั้งหมดของคุณในไฟล์ข้อความธรรมดาที่มีนามสกุล ".js" จากนั้นรวมไฟล์ดังที่แสดงไว้ด้านบน
ตัวอย่างเช่นคุณสามารถเก็บเนื้อหาต่อไปนี้ไว้ได้ filename.js จากนั้นคุณสามารถใช้ไฟล์ sayHello ฟังก์ชันในไฟล์ HTML ของคุณหลังจากรวมไฟล์ filename.js
function sayHello() {
alert("Hello World")
}ประเภทข้อมูล JavaScript
ลักษณะพื้นฐานที่สุดอย่างหนึ่งของภาษาโปรแกรมคือชุดประเภทข้อมูลที่รองรับ ค่าเหล่านี้คือประเภทของค่าที่สามารถแสดงและจัดการได้ในภาษาโปรแกรม
JavaScript ช่วยให้คุณสามารถทำงานกับข้อมูลดั้งเดิมสามประเภท -
Numbers,เช่น. 123, 120.50 เป็นต้น
Strings ของข้อความเช่น "สตริงข้อความนี้" เป็นต้น
Boolean เช่นจริงหรือเท็จ
JavaScript ยังกำหนดประเภทข้อมูลเล็กน้อยสองประเภท null และ undefined,แต่ละค่ากำหนดเพียงค่าเดียว นอกเหนือจากประเภทข้อมูลดั้งเดิมเหล่านี้แล้ว JavaScript ยังรองรับประเภทข้อมูลผสมที่เรียกว่าobject. เราจะกล่าวถึงวัตถุโดยละเอียดในบทที่แยกต่างหาก
Note- JavaScript ไม่ได้สร้างความแตกต่างระหว่างค่าจำนวนเต็มและค่าทศนิยม ตัวเลขทั้งหมดใน JavaScript จะแสดงเป็นค่าทศนิยม JavaScript แทนตัวเลขโดยใช้รูปแบบทศนิยม 64 บิตที่กำหนดโดยมาตรฐาน IEEE 754
ตัวแปร JavaScript
เช่นเดียวกับภาษาโปรแกรมอื่น ๆ JavaScript มีตัวแปร ตัวแปรสามารถคิดได้จากชื่อคอนเทนเนอร์ คุณสามารถวางข้อมูลลงในคอนเทนเนอร์เหล่านี้จากนั้นอ้างถึงข้อมูลได้ง่ายๆโดยการตั้งชื่อคอนเทนเนอร์
ก่อนที่คุณจะใช้ตัวแปรในโปรแกรม JavaScript คุณต้องประกาศตัวแปรนั้น ตัวแปรจะถูกประกาศด้วยvar คีย์เวิร์ดดังนี้.
<script type = "text/javascript">
<!--
var money;
var name;
//-->
</script>คุณยังสามารถประกาศตัวแปรหลายตัวได้ด้วย var คีย์เวิร์ดดังนี้ -
<script type = "text/javascript">
<!--
var money, name;
//-->
</script>การจัดเก็บค่าในตัวแปรเรียกว่า variable initialization. คุณสามารถเริ่มต้นตัวแปรได้ในเวลาที่สร้างตัวแปรหรือในเวลาต่อมาเมื่อคุณต้องการตัวแปรนั้น
ตัวอย่างเช่นคุณอาจสร้างตัวแปรชื่อ moneyและกำหนดค่า 2000.50 ให้ในภายหลัง สำหรับตัวแปรอื่นคุณสามารถกำหนดค่าในขณะเริ่มต้นได้ดังนี้
<script type = "text/javascript">
<!--
var name = "Ali";
var money;
money = 2000.50;
//-->
</script>Note - ใช้ไฟล์ varคำหลักสำหรับการประกาศหรือการเริ่มต้นครั้งเดียวตลอดอายุของชื่อตัวแปรใด ๆ ในเอกสาร คุณไม่ควรประกาศตัวแปรเดียวกันซ้ำสองครั้ง
JavaScript คือ untypedภาษา. ซึ่งหมายความว่าตัวแปร JavaScript สามารถเก็บค่าของข้อมูลประเภทใดก็ได้ แตกต่างจากภาษาอื่น ๆ คุณไม่จำเป็นต้องบอก JavaScript ในระหว่างการประกาศตัวแปรว่าตัวแปรจะเก็บค่าประเภทใด ประเภทค่าของตัวแปรสามารถเปลี่ยนแปลงได้ในระหว่างการทำงานของโปรแกรมและ JavaScript จะดูแลโดยอัตโนมัติ
ขอบเขตตัวแปร JavaScript
ขอบเขตของตัวแปรคือขอบเขตของโปรแกรมของคุณที่กำหนดไว้ ตัวแปร JavaScript มีเพียงสองขอบเขต
Global Variables - ตัวแปรส่วนกลางมีขอบเขตทั่วโลกซึ่งหมายความว่าสามารถกำหนดได้ทุกที่ในโค้ด JavaScript ของคุณ
Local Variables- ตัวแปรโลคัลจะมองเห็นได้เฉพาะในฟังก์ชันที่กำหนดไว้ พารามิเตอร์ของฟังก์ชันอยู่ในพื้นที่ของฟังก์ชันนั้นเสมอ
ภายในเนื้อความของฟังก์ชันตัวแปรโลคัลจะมีความสำคัญเหนือตัวแปรส่วนกลางที่มีชื่อเดียวกัน หากคุณประกาศตัวแปรโลคัลหรือพารามิเตอร์ฟังก์ชันด้วยชื่อเดียวกับตัวแปรส่วนกลางคุณจะซ่อนตัวแปรส่วนกลางได้อย่างมีประสิทธิภาพ ดูตัวอย่างต่อไปนี้
<html>
<body onload = checkscope();>
<script type = "text/javascript">
<!--
var myVar = "global"; // Declare a global variable
function checkscope( ) {
var myVar = "local"; // Declare a local variable
document.write(myVar);
}
//-->
</script>
</body>
</html>สิ่งนี้ก่อให้เกิดผลลัพธ์ดังต่อไปนี้ -
localชื่อตัวแปร JavaScript
ขณะตั้งชื่อตัวแปรของคุณใน JavaScript โปรดคำนึงถึงกฎต่อไปนี้
คุณไม่ควรใช้คีย์เวิร์ดที่สงวนไว้ของ JavaScript เป็นชื่อตัวแปร คำหลักเหล่านี้จะกล่าวถึงในส่วนถัดไป ตัวอย่างเช่น,break หรือ boolean ชื่อตัวแปรไม่ถูกต้อง
ชื่อตัวแปร JavaScript ไม่ควรขึ้นต้นด้วยตัวเลข (0-9) ต้องขึ้นต้นด้วยตัวอักษรหรืออักขระขีดล่าง ตัวอย่างเช่น,123test เป็นชื่อตัวแปรที่ไม่ถูกต้อง แต่ _123test เป็นสิ่งที่ถูกต้อง
ชื่อตัวแปร JavaScript คำนึงถึงขนาดตัวพิมพ์ ตัวอย่างเช่น,Name และ name เป็นตัวแปรสองตัวที่แตกต่างกัน
คำสงวน JavaScript
รายการคำสงวนทั้งหมดใน JavaScript มีอยู่ในตารางต่อไปนี้ ไม่สามารถใช้เป็นตัวแปร JavaScript ฟังก์ชันเมธอดเลเบลเลเบลหรือชื่ออ็อบเจ็กต์ใด ๆ
| บทคัดย่อ | อื่น | อินสแตนซ์ของ | สวิตซ์ |
| บูลีน | enum | int | ซิงโครไนซ์ |
| หยุดพัก | ส่งออก | อินเตอร์เฟซ | นี้ |
| ไบต์ | ขยาย | ยาว | โยน |
| กรณี | เท็จ | พื้นเมือง | พ่น |
| จับ | สุดท้าย | ใหม่ | ชั่วคราว |
| ถ่าน | ในที่สุด | โมฆะ | จริง |
| ชั้นเรียน | ลอย | แพ็คเกจ | ลอง |
| const | สำหรับ | เอกชน | ประเภทของ |
| ดำเนินการต่อ | ฟังก์ชัน | มีการป้องกัน | หลากหลาย |
| ดีบักเกอร์ | ไปที่ | สาธารณะ | เป็นโมฆะ |
| ค่าเริ่มต้น | ถ้า | กลับ | ระเหย |
| ลบ | ดำเนินการ | สั้น | ในขณะที่ |
| ทำ | นำเข้า | คงที่ | ด้วย |
| สองเท่า | ใน | สุดยอด |
Operator คืออะไร?
ให้เราใช้สำนวนง่ายๆ 4 + 5 is equal to 9. ที่นี่เรียกว่า 4 และ 5operands และ '+' เรียกว่า operator. JavaScript รองรับตัวดำเนินการประเภทต่อไปนี้
- ตัวดำเนินการเลขคณิต
- ตัวดำเนินการเปรียบเทียบ
- ตัวดำเนินการเชิงตรรกะ (หรือเชิงสัมพันธ์)
- ผู้ดำเนินการมอบหมาย
- ตัวดำเนินการตามเงื่อนไข (หรือตามเงื่อนไข)
มาดูตัวดำเนินการทั้งหมดทีละคน
ตัวดำเนินการเลขคณิต
JavaScript รองรับตัวดำเนินการทางคณิตศาสตร์ต่อไปนี้ -
สมมติว่าตัวแปร A ถือ 10 และตัวแปร B ถือ 20 จากนั้น -
| ซีเนียร์ | ตัวดำเนินการและคำอธิบาย |
|---|---|
| 1 | + (Addition) เพิ่มสองตัวถูกดำเนินการ Ex: A + B จะให้ 30 |
| 2 | - (Subtraction) ลบตัวถูกดำเนินการที่สองจากตัวแรก Ex: A - B จะให้ -10 |
| 3 | * (Multiplication) คูณตัวถูกดำเนินการทั้งสอง Ex: A * B จะให้ 200 |
| 4 | / (Division) หารตัวเศษด้วยตัวส่วน Ex: B / A จะให้ 2 |
| 5 | % (Modulus) แสดงผลส่วนที่เหลือของการหารจำนวนเต็ม Ex: B% A จะให้ 0 |
| 6 | ++ (Increment) เพิ่มค่าจำนวนเต็มขึ้นหนึ่ง Ex: A ++ จะให้ 11 |
| 7 | -- (Decrement) ลดค่าจำนวนเต็มลงหนึ่ง Ex: A-- จะให้ 9 |
Note- ตัวดำเนินการเพิ่มเติม (+) ใช้งานได้กับตัวเลขและสตริง เช่น "a" + 10 จะให้ "a10"
ตัวอย่าง
โค้ดต่อไปนี้แสดงวิธีใช้ตัวดำเนินการทางคณิตศาสตร์ใน JavaScript
<html>
<body>
<script type = "text/javascript">
<!--
var a = 33;
var b = 10;
var c = "Test";
var linebreak = "<br />";
document.write("a + b = ");
result = a + b;
document.write(result);
document.write(linebreak);
document.write("a - b = ");
result = a - b;
document.write(result);
document.write(linebreak);
document.write("a / b = ");
result = a / b;
document.write(result);
document.write(linebreak);
document.write("a % b = ");
result = a % b;
document.write(result);
document.write(linebreak);
document.write("a + b + c = ");
result = a + b + c;
document.write(result);
document.write(linebreak);
a = ++a;
document.write("++a = ");
result = ++a;
document.write(result);
document.write(linebreak);
b = --b;
document.write("--b = ");
result = --b;
document.write(result);
document.write(linebreak);
//-->
</script>
Set the variables to different values and then try...
</body>
</html>เอาต์พุต
a + b = 43
a - b = 23
a / b = 3.3
a % b = 3
a + b + c = 43Test
++a = 35
--b = 8
Set the variables to different values and then try...ตัวดำเนินการเปรียบเทียบ
JavaScript รองรับตัวดำเนินการเปรียบเทียบต่อไปนี้ -
สมมติว่าตัวแปร A ถือ 10 และตัวแปร B ถือ 20 จากนั้น -
| ซีเนียร์ | ตัวดำเนินการและคำอธิบาย |
|---|---|
| 1 | = = (Equal) ตรวจสอบว่าค่าของตัวถูกดำเนินการสองตัวเท่ากันหรือไม่ถ้าใช่เงื่อนไขจะกลายเป็นจริง Ex: (A == B) ไม่เป็นความจริง |
| 2 | != (Not Equal) ตรวจสอบว่าค่าของตัวถูกดำเนินการสองตัวเท่ากันหรือไม่หากค่าไม่เท่ากันเงื่อนไขจะกลายเป็นจริง Ex: (A! = B) เป็นจริง |
| 3 | > (Greater than) ตรวจสอบว่าค่าของตัวถูกดำเนินการด้านซ้ายมากกว่าค่าของตัวถูกดำเนินการด้านขวาหรือไม่ถ้าใช่เงื่อนไขจะกลายเป็นจริง Ex: (A> B) ไม่เป็นความจริง |
| 4 | < (Less than) ตรวจสอบว่าค่าของตัวถูกดำเนินการด้านซ้ายน้อยกว่าค่าของตัวถูกดำเนินการด้านขวาหรือไม่ถ้าใช่เงื่อนไขจะกลายเป็นจริง Ex: (A <B) เป็นจริง |
| 5 | >= (Greater than or Equal to) ตรวจสอบว่าค่าของตัวถูกดำเนินการด้านซ้ายมากกว่าหรือเท่ากับค่าของตัวถูกดำเนินการด้านขวาหรือไม่ถ้าใช่เงื่อนไขจะกลายเป็นจริง Ex: (A> = B) ไม่เป็นความจริง |
| 6 | <= (Less than or Equal to) ตรวจสอบว่าค่าของตัวถูกดำเนินการด้านซ้ายน้อยกว่าหรือเท่ากับค่าของตัวถูกดำเนินการด้านขวาหรือไม่ถ้าใช่เงื่อนไขจะกลายเป็นจริง Ex: (A <= B) เป็นจริง |
ตัวอย่าง
โค้ดต่อไปนี้แสดงวิธีใช้ตัวดำเนินการเปรียบเทียบใน JavaScript
<html>
<body>
<script type = "text/javascript">
<!--
var a = 10;
var b = 20;
var linebreak = "<br />";
document.write("(a == b) => ");
result = (a == b);
document.write(result);
document.write(linebreak);
document.write("(a < b) => ");
result = (a < b);
document.write(result);
document.write(linebreak);
document.write("(a > b) => ");
result = (a > b);
document.write(result);
document.write(linebreak);
document.write("(a != b) => ");
result = (a != b);
document.write(result);
document.write(linebreak);
document.write("(a >= b) => ");
result = (a >= b);
document.write(result);
document.write(linebreak);
document.write("(a <= b) => ");
result = (a <= b);
document.write(result);
document.write(linebreak);
//-->
</script>
Set the variables to different values and different operators and then try...
</body>
</html>เอาต์พุต
(a == b) => false
(a < b) => true
(a > b) => false
(a != b) => true
(a >= b) => false
a <= b) => true
Set the variables to different values and different operators and then try...ตัวดำเนินการทางตรรกะ
JavaScript รองรับตัวดำเนินการเชิงตรรกะต่อไปนี้ -
สมมติว่าตัวแปร A ถือ 10 และตัวแปร B ถือ 20 จากนั้น -
| ซีเนียร์ | ตัวดำเนินการและคำอธิบาย |
|---|---|
| 1 | && (Logical AND) ถ้าตัวถูกดำเนินการทั้งสองไม่ใช่ศูนย์เงื่อนไขจะกลายเป็นจริง Ex: (A && B) เป็นเรื่องจริง |
| 2 | || (Logical OR) หากตัวถูกดำเนินการสองตัวใดตัวหนึ่งไม่ใช่ศูนย์เงื่อนไขจะกลายเป็นจริง Ex: (A || B) เป็นจริง |
| 3 | ! (Logical NOT) กลับสถานะตรรกะของตัวถูกดำเนินการ หากเงื่อนไขเป็นจริงตัวดำเนินการ Logical NOT จะทำให้เป็นเท็จ Ex:! (A && B) เป็นเท็จ |
ตัวอย่าง
ลองใช้โค้ดต่อไปนี้เพื่อเรียนรู้วิธีใช้ Logical Operators ใน JavaScript
<html>
<body>
<script type = "text/javascript">
<!--
var a = true;
var b = false;
var linebreak = "<br />";
document.write("(a && b) => ");
result = (a && b);
document.write(result);
document.write(linebreak);
document.write("(a || b) => ");
result = (a || b);
document.write(result);
document.write(linebreak);
document.write("!(a && b) => ");
result = (!(a && b));
document.write(result);
document.write(linebreak);
//-->
</script>
<p>Set the variables to different values and different operators and then try...</p>
</body>
</html>เอาต์พุต
(a && b) => false
(a || b) => true
!(a && b) => true
Set the variables to different values and different operators and then try...ตัวดำเนินการ Bitwise
JavaScript รองรับตัวดำเนินการระดับบิตต่อไปนี้ -
สมมติว่าตัวแปร A ถือ 2 และตัวแปร B ถือ 3 จากนั้น -
| ซีเนียร์ | ตัวดำเนินการและคำอธิบาย |
|---|---|
| 1 | & (Bitwise AND) ดำเนินการบูลีน AND กับอาร์กิวเมนต์จำนวนเต็มแต่ละบิต Ex: (A & B) คือ 2 |
| 2 | | (BitWise OR) ดำเนินการบูลีนหรือการดำเนินการกับอาร์กิวเมนต์จำนวนเต็มแต่ละบิต Ex: (A | B) คือ 3 |
| 3 | ^ (Bitwise XOR) ดำเนินการหรือดำเนินการบูลีนเอกสิทธิ์เฉพาะบุคคลในอาร์กิวเมนต์จำนวนเต็มแต่ละบิต Exclusive OR หมายความว่าตัวถูกดำเนินการตัวใดตัวหนึ่งเป็นจริงหรือตัวถูกดำเนินการสองเป็นจริง แต่ไม่ใช่ทั้งสองอย่าง Ex: (A ^ B) คือ 1. |
| 4 | ~ (Bitwise Not) เป็นตัวดำเนินการยูนารีและดำเนินการโดยการย้อนกลับบิตทั้งหมดในตัวถูกดำเนินการ Ex: (~ B) คือ -4 |
| 5 | << (Left Shift) มันย้ายบิตทั้งหมดในตัวถูกดำเนินการตัวแรกไปทางซ้ายตามจำนวนตำแหน่งที่ระบุในตัวถูกดำเนินการที่สอง บิตใหม่เต็มไปด้วยศูนย์ การเลื่อนค่าไปทางซ้ายหนึ่งตำแหน่งจะเทียบเท่ากับการคูณด้วย 2 การเลื่อนตำแหน่งสองตำแหน่งจะเท่ากับการคูณด้วย 4 และอื่น ๆ Ex: (A << 1) คือ 4 |
| 6 | >> (Right Shift) ตัวดำเนินการกะไบนารีขวา ค่าของตัวถูกดำเนินการด้านซ้ายจะถูกย้ายไปทางขวาตามจำนวนบิตที่ระบุโดยตัวถูกดำเนินการด้านขวา Ex: (A >> 1) คือ 1 |
| 7 | >>> (Right shift with Zero) ตัวดำเนินการนี้เหมือนกับตัวดำเนินการ >> ยกเว้นว่าบิตที่เลื่อนไปทางซ้ายจะเป็นศูนย์เสมอ Ex: (A >>> 1) คือ 1 |
ตัวอย่าง
ลองใช้โค้ดต่อไปนี้เพื่อใช้ตัวดำเนินการ Bitwise ใน JavaScript
<html>
<body>
<script type = "text/javascript">
<!--
var a = 2; // Bit presentation 10
var b = 3; // Bit presentation 11
var linebreak = "<br />";
document.write("(a & b) => ");
result = (a & b);
document.write(result);
document.write(linebreak);
document.write("(a | b) => ");
result = (a | b);
document.write(result);
document.write(linebreak);
document.write("(a ^ b) => ");
result = (a ^ b);
document.write(result);
document.write(linebreak);
document.write("(~b) => ");
result = (~b);
document.write(result);
document.write(linebreak);
document.write("(a << b) => ");
result = (a << b);
document.write(result);
document.write(linebreak);
document.write("(a >> b) => ");
result = (a >> b);
document.write(result);
document.write(linebreak);
//-->
</script>
<p>Set the variables to different values and different operators and then try...</p>
</body>
</html>(a & b) => 2
(a | b) => 3
(a ^ b) => 1
(~b) => -4
(a << b) => 16
(a >> b) => 0
Set the variables to different values and different operators and then try...ผู้ดำเนินการมอบหมาย
JavaScript รองรับตัวดำเนินการกำหนดดังต่อไปนี้ -
| ซีเนียร์ | ตัวดำเนินการและคำอธิบาย |
|---|---|
| 1 | = (Simple Assignment ) กำหนดค่าจากตัวถูกดำเนินการด้านขวาไปยังตัวถูกดำเนินการด้านซ้าย Ex: C = A + B จะกำหนดค่าของ A + B ให้เป็น C |
| 2 | += (Add and Assignment) เพิ่มตัวถูกดำเนินการด้านขวาให้กับตัวถูกดำเนินการด้านซ้ายและกำหนดผลลัพธ์ให้กับตัวถูกดำเนินการด้านซ้าย Ex: C + = A เทียบเท่ากับ C = C + A |
| 3 | −= (Subtract and Assignment) มันจะลบตัวถูกดำเนินการด้านขวาออกจากตัวถูกดำเนินการด้านซ้ายและกำหนดผลลัพธ์ให้กับตัวถูกดำเนินการด้านซ้าย Ex: C - = A เทียบเท่ากับ C = C - A |
| 4 | *= (Multiply and Assignment) มันจะคูณตัวถูกดำเนินการด้านขวากับตัวถูกดำเนินการด้านซ้ายและกำหนดผลลัพธ์ให้กับตัวถูกดำเนินการด้านซ้าย Ex: C * = A เทียบเท่ากับ C = C * A |
| 5 | /= (Divide and Assignment) มันแบ่งตัวถูกดำเนินการด้านซ้ายด้วยตัวถูกดำเนินการด้านขวาและกำหนดผลลัพธ์ให้กับตัวถูกดำเนินการด้านซ้าย Ex: C / = A เทียบเท่ากับ C = C / A |
| 6 | %= (Modules and Assignment) ใช้โมดูลัสโดยใช้ตัวถูกดำเนินการสองตัวและกำหนดผลลัพธ์ให้กับตัวถูกดำเนินการด้านซ้าย Ex: C% = A เทียบเท่ากับ C = C% A |
Note - ตรรกะเดียวกันนี้ใช้กับตัวดำเนินการ Bitwise ดังนั้นจึงกลายเป็น << =, >> =, >> =, & =, | = และ ^ =
ตัวอย่าง
ลองใช้รหัสต่อไปนี้เพื่อติดตั้งตัวดำเนินการกำหนดใน JavaScript
<html>
<body>
<script type = "text/javascript">
<!--
var a = 33;
var b = 10;
var linebreak = "<br />";
document.write("Value of a => (a = b) => ");
result = (a = b);
document.write(result);
document.write(linebreak);
document.write("Value of a => (a += b) => ");
result = (a += b);
document.write(result);
document.write(linebreak);
document.write("Value of a => (a -= b) => ");
result = (a -= b);
document.write(result);
document.write(linebreak);
document.write("Value of a => (a *= b) => ");
result = (a *= b);
document.write(result);
document.write(linebreak);
document.write("Value of a => (a /= b) => ");
result = (a /= b);
document.write(result);
document.write(linebreak);
document.write("Value of a => (a %= b) => ");
result = (a %= b);
document.write(result);
document.write(linebreak);
//-->
</script>
<p>Set the variables to different values and different operators and then try...</p>
</body>
</html>เอาต์พุต
Value of a => (a = b) => 10
Value of a => (a += b) => 20
Value of a => (a -= b) => 10
Value of a => (a *= b) => 100
Value of a => (a /= b) => 10
Value of a => (a %= b) => 0
Set the variables to different values and different operators and then try...ผู้ดำเนินการเบ็ดเตล็ด
เราจะพูดถึงตัวดำเนินการสองตัวที่นี่มีประโยชน์มากใน JavaScript: conditional operator (? :) และ typeof operator.
ตัวดำเนินการตามเงื่อนไข (? :)
ตัวดำเนินการตามเงื่อนไขจะประเมินนิพจน์สำหรับค่าจริงหรือเท็จก่อนจากนั้นเรียกใช้หนึ่งในสองคำสั่งที่กำหนดขึ้นอยู่กับผลลัพธ์ของการประเมิน
| ซีเนียร์ | ตัวดำเนินการและคำอธิบาย |
|---|---|
| 1 | ? : (Conditional ) ถ้า Condition เป็นจริง? จากนั้นค่า X: หรือค่า Y |
ตัวอย่าง
ลองใช้รหัสต่อไปนี้เพื่อทำความเข้าใจว่า Conditional Operator ทำงานอย่างไรใน JavaScript
<html>
<body>
<script type = "text/javascript">
<!--
var a = 10;
var b = 20;
var linebreak = "<br />";
document.write ("((a > b) ? 100 : 200) => ");
result = (a > b) ? 100 : 200;
document.write(result);
document.write(linebreak);
document.write ("((a < b) ? 100 : 200) => ");
result = (a < b) ? 100 : 200;
document.write(result);
document.write(linebreak);
//-->
</script>
<p>Set the variables to different values and different operators and then try...</p>
</body>
</html>เอาต์พุต
((a > b) ? 100 : 200) => 200
((a < b) ? 100 : 200) => 100
Set the variables to different values and different operators and then try...typeof Operator
typeofตัวดำเนินการคือตัวดำเนินการยูนารีที่วางไว้ก่อนตัวถูกดำเนินการเดียวซึ่งอาจเป็นประเภทใดก็ได้ ค่าของมันคือสตริงที่ระบุชนิดข้อมูลของตัวถูกดำเนินการ
ตัวดำเนินการtypeofจะประเมินเป็น "number" "string" หรือ "boolean" ถ้าตัวถูกดำเนินการเป็นตัวเลขสตริงหรือค่าบูลีนและส่งกลับค่าจริงหรือเท็จตามการประเมิน
นี่คือรายการของค่าที่ส่งคืนสำหรับไฟล์ typeof ตัวดำเนินการ.
| ประเภท | สตริงที่ส่งคืนโดย typeof |
|---|---|
| จำนวน | "จำนวน" |
| สตริง | "สตริง" |
| บูลีน | "บูลีน" |
| วัตถุ | "วัตถุ" |
| ฟังก์ชัน | "ฟังก์ชัน" |
| ไม่ได้กำหนด | "ไม่ได้กำหนด" |
| Null | "วัตถุ" |
ตัวอย่าง
โค้ดต่อไปนี้แสดงวิธีการใช้งาน typeof ตัวดำเนินการ
<html>
<body>
<script type = "text/javascript">
<!--
var a = 10;
var b = "String";
var linebreak = "<br />";
result = (typeof b == "string" ? "B is String" : "B is Numeric");
document.write("Result => ");
document.write(result);
document.write(linebreak);
result = (typeof a == "string" ? "A is String" : "A is Numeric");
document.write("Result => ");
document.write(result);
document.write(linebreak);
//-->
</script>
<p>Set the variables to different values and different operators and then try...</p>
</body>
</html>เอาต์พุต
Result => B is String
Result => A is Numeric
Set the variables to different values and different operators and then try...ในขณะที่เขียนโปรแกรมอาจมีสถานการณ์ที่คุณจำเป็นต้องใช้หนึ่งจากชุดของเส้นทางที่กำหนด ในกรณีเช่นนี้คุณต้องใช้ข้อความที่มีเงื่อนไขเพื่อให้โปรแกรมของคุณตัดสินใจได้อย่างถูกต้องและดำเนินการอย่างถูกต้อง
JavaScript สนับสนุนคำสั่งเงื่อนไขซึ่งใช้เพื่อดำเนินการต่างๆตามเงื่อนไขที่แตกต่างกัน ที่นี่เราจะอธิบายไฟล์if..else คำให้การ.
ผังงานของ if-else
ผังงานต่อไปนี้แสดงวิธีการทำงานของคำสั่ง if-else
JavaScript รองรับรูปแบบ if..else คำสั่ง -
ถ้าคำสั่ง
if ... else คำสั่ง
if ... else if ... คำสั่ง
ถ้าคำสั่ง
if คำสั่งเป็นคำสั่งควบคุมพื้นฐานที่อนุญาตให้ JavaScript ตัดสินใจและดำเนินการคำสั่งตามเงื่อนไข
ไวยากรณ์
ไวยากรณ์สำหรับคำสั่ง if พื้นฐานมีดังนี้ -
if (expression) {
Statement(s) to be executed if expression is true
}นี่คือการประเมินนิพจน์ JavaScript หากค่าผลลัพธ์เป็นจริงคำสั่งที่กำหนดจะถูกดำเนินการ หากนิพจน์เป็นเท็จจะไม่มีการดำเนินการคำสั่งใด ๆ โดยส่วนใหญ่คุณจะใช้ตัวดำเนินการเปรียบเทียบในขณะที่ตัดสินใจ
ตัวอย่าง
ลองใช้ตัวอย่างต่อไปนี้เพื่อทำความเข้าใจว่าไฟล์ if คำสั่งใช้งานได้
<html>
<body>
<script type = "text/javascript">
<!--
var age = 20;
if( age > 18 ) {
document.write("<b>Qualifies for driving</b>");
}
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>เอาต์พุต
Qualifies for driving
Set the variable to different value and then try...if ... else คำสั่ง
'if...else' คำสั่งเป็นรูปแบบคำสั่งควบคุมรูปแบบถัดไปที่อนุญาตให้ JavaScript ดำเนินการคำสั่งด้วยวิธีที่ควบคุมได้มากขึ้น
ไวยากรณ์
if (expression) {
Statement(s) to be executed if expression is true
} else {
Statement(s) to be executed if expression is false
}ที่นี่นิพจน์ JavaScript ได้รับการประเมิน หากค่าผลลัพธ์เป็นจริงคำสั่งที่กำหนดในบล็อก 'if' จะถูกเรียกใช้ หากนิพจน์เป็นเท็จระบบจะดำเนินการคำสั่งที่กำหนดในบล็อกอื่น
ตัวอย่าง
ลองใช้โค้ดต่อไปนี้เพื่อเรียนรู้วิธีใช้คำสั่ง if-else ใน JavaScript
<html>
<body>
<script type = "text/javascript">
<!--
var age = 15;
if( age > 18 ) {
document.write("<b>Qualifies for driving</b>");
} else {
document.write("<b>Does not qualify for driving</b>");
}
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>เอาต์พุต
Does not qualify for driving
Set the variable to different value and then try...if ... else if ... คำสั่ง
if...else if... คำสั่งเป็นรูปแบบขั้นสูงของ if…else ที่ช่วยให้ JavaScript สามารถตัดสินใจได้อย่างถูกต้องจากเงื่อนไขต่างๆ
ไวยากรณ์
ไวยากรณ์ของคำสั่ง if-else-if มีดังนี้ -
if (expression 1) {
Statement(s) to be executed if expression 1 is true
} else if (expression 2) {
Statement(s) to be executed if expression 2 is true
} else if (expression 3) {
Statement(s) to be executed if expression 3 is true
} else {
Statement(s) to be executed if no expression is true
}ไม่มีอะไรพิเศษเกี่ยวกับรหัสนี้ มันเป็นเพียงชุดของif งบโดยที่แต่ละ if เป็นส่วนหนึ่งของไฟล์ elseประโยคของคำสั่งก่อนหน้า คำสั่งจะดำเนินการตามเงื่อนไขที่แท้จริงหากไม่มีเงื่อนไขใดเป็นจริงดังนั้นelse บล็อกถูกดำเนินการ
ตัวอย่าง
ลองใช้โค้ดต่อไปนี้เพื่อเรียนรู้วิธีใช้คำสั่ง if-else-if ใน JavaScript
<html>
<body>
<script type = "text/javascript">
<!--
var book = "maths";
if( book == "history" ) {
document.write("<b>History Book</b>");
} else if( book == "maths" ) {
document.write("<b>Maths Book</b>");
} else if( book == "economics" ) {
document.write("<b>Economics Book</b>");
} else {
document.write("<b>Unknown Book</b>");
}
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
<html>เอาต์พุต
Maths Book
Set the variable to different value and then try...คุณสามารถใช้หลาย if...else…ifเช่นเดียวกับในบทก่อนหน้าเพื่อดำเนินการสาขาแบบหลายทาง อย่างไรก็ตามนี่ไม่ใช่ทางออกที่ดีที่สุดเสมอไปโดยเฉพาะอย่างยิ่งเมื่อสาขาทั้งหมดขึ้นอยู่กับค่าของตัวแปรเดียว
เริ่มต้นด้วย JavaScript 1.2 คุณสามารถใช้ไฟล์ switch คำสั่งที่จัดการกับสถานการณ์นี้อย่างแท้จริงและทำได้อย่างมีประสิทธิภาพมากกว่าการทำซ้ำ if...else if งบ
แผนภูมิการไหล
แผนผังลำดับงานต่อไปนี้อธิบายว่าคำสั่ง switch-case ทำงานได้
ไวยากรณ์
วัตถุประสงค์ของก switchคำสั่งคือการให้นิพจน์เพื่อประเมินและคำสั่งที่แตกต่างกันเพื่อดำเนินการตามค่าของนิพจน์ ล่ามจะตรวจสอบแต่ละcaseเทียบกับค่าของนิพจน์จนกว่าจะพบรายการที่ตรงกัน หากไม่มีสิ่งใดตรงกัน adefault เงื่อนไขจะถูกนำมาใช้
switch (expression) {
case condition 1: statement(s)
break;
case condition 2: statement(s)
break;
...
case condition n: statement(s)
break;
default: statement(s)
}breakข้อความระบุจุดสิ้นสุดของกรณีเฉพาะ หากถูกละเว้นล่ามจะดำเนินการต่อแต่ละคำสั่งในแต่ละกรณีต่อไปนี้
เราจะอธิบาย break คำสั่งใน Loop Control บท.
ตัวอย่าง
ลองใช้ตัวอย่างต่อไปนี้เพื่อใช้คำสั่ง switch-case
<html>
<body>
<script type = "text/javascript">
<!--
var grade = 'A';
document.write("Entering switch block<br />");
switch (grade) {
case 'A': document.write("Good job<br />");
break;
case 'B': document.write("Pretty good<br />");
break;
case 'C': document.write("Passed<br />");
break;
case 'D': document.write("Not so good<br />");
break;
case 'F': document.write("Failed<br />");
break;
default: document.write("Unknown grade<br />")
}
document.write("Exiting switch block");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>เอาต์พุต
Entering switch block
Good job
Exiting switch block
Set the variable to different value and then try...คำสั่งแบ่งมีบทบาทสำคัญในคำสั่งสลับกรณี ลองใช้รหัสต่อไปนี้ที่ใช้คำสั่ง switch-case โดยไม่มีคำสั่ง break
<html>
<body>
<script type = "text/javascript">
<!--
var grade = 'A';
document.write("Entering switch block<br />");
switch (grade) {
case 'A': document.write("Good job<br />");
case 'B': document.write("Pretty good<br />");
case 'C': document.write("Passed<br />");
case 'D': document.write("Not so good<br />");
case 'F': document.write("Failed<br />");
default: document.write("Unknown grade<br />")
}
document.write("Exiting switch block");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>เอาต์พุต
Entering switch block
Good job
Pretty good
Passed
Not so good
Failed
Unknown grade
Exiting switch block
Set the variable to different value and then try...ขณะเขียนโปรแกรมคุณอาจพบกับสถานการณ์ที่ต้องดำเนินการซ้ำแล้วซ้ำเล่า ในสถานการณ์เช่นนี้คุณจะต้องเขียนคำสั่งแบบวนซ้ำเพื่อลดจำนวนบรรทัด
JavaScript รองรับลูปที่จำเป็นทั้งหมดเพื่อลดความกดดันในการเขียนโปรแกรม
ในขณะที่วนซ้ำ
ลูปพื้นฐานที่สุดใน JavaScript คือไฟล์ whileวนซ้ำซึ่งจะกล่าวถึงในบทนี้ วัตถุประสงค์ของกwhile loop คือการดำเนินการคำสั่งหรือบล็อกรหัสซ้ำ ๆ ตราบเท่าที่ไฟล์ expressionเป็นความจริง. เมื่อนิพจน์กลายเป็นfalse, ลูปสิ้นสุดลง
แผนภูมิการไหล
แผนภูมิการไหลของ while loop มีลักษณะดังนี้ -
ไวยากรณ์
ไวยากรณ์ของ while loop ใน JavaScript มีดังนี้ -
while (expression) {
Statement(s) to be executed if expression is true
}ตัวอย่าง
ลองใช้ตัวอย่างต่อไปนี้เพื่อใช้งาน while loop
<html>
<body>
<script type = "text/javascript">
<!--
var count = 0;
document.write("Starting Loop ");
while (count < 10) {
document.write("Current Count : " + count + "<br />");
count++;
}
document.write("Loop stopped!");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>เอาต์พุต
Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!
Set the variable to different value and then try...ทำ ... ในขณะที่ห่วง
do...while ลูปคล้ายกับ whileวนซ้ำยกเว้นว่าการตรวจสอบเงื่อนไขจะเกิดขึ้นที่ส่วนท้ายของลูป ซึ่งหมายความว่าลูปจะถูกดำเนินการอย่างน้อยหนึ่งครั้งเสมอแม้ว่าเงื่อนไขจะเป็นเช่นนั้นก็ตามfalse.
แผนภูมิการไหล
แผนภูมิการไหลของไฟล์ do-while วนจะเป็นดังนี้ -
ไวยากรณ์
ไวยากรณ์สำหรับ do-while วนซ้ำใน JavaScript มีดังนี้ -
do {
Statement(s) to be executed;
} while (expression);Note - อย่าพลาดอัฒภาคที่ใช้ในตอนท้ายของไฟล์ do...while วน.
ตัวอย่าง
ลองใช้ตัวอย่างต่อไปนี้เพื่อเรียนรู้วิธีการนำไฟล์ do-while วนซ้ำใน JavaScript
<html>
<body>
<script type = "text/javascript">
<!--
var count = 0;
document.write("Starting Loop" + "<br />");
do {
document.write("Current Count : " + count + "<br />");
count++;
}
while (count < 5);
document.write ("Loop stopped!");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>เอาต์พุต
Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Loop Stopped!
Set the variable to different value and then try...การ 'for'loop เป็นรูปแบบการวนซ้ำที่กะทัดรัดที่สุด ประกอบด้วยสามส่วนที่สำคัญดังต่อไปนี้ -
loop initializationที่เราเริ่มต้นตัวนับของเราเป็นค่าเริ่มต้น คำสั่ง initialization ถูกดำเนินการก่อนที่ลูปจะเริ่มขึ้น
test statementซึ่งจะทดสอบว่าเงื่อนไขที่กำหนดเป็นจริงหรือไม่ หากเงื่อนไขเป็นจริงรหัสที่กำหนดภายในลูปจะถูกเรียกใช้งานมิฉะนั้นตัวควบคุมจะหลุดออกจากลูป
iteration statement ที่คุณสามารถเพิ่มหรือลดเคาน์เตอร์ของคุณ
คุณสามารถใส่ทั้งสามส่วนในบรรทัดเดียวโดยคั่นด้วยอัฒภาค
แผนภูมิการไหล
แผนภูมิการไหลของไฟล์ for วนซ้ำใน JavaScript จะเป็นดังนี้ -
ไวยากรณ์
ไวยากรณ์ของ for loop คือ JavaScript มีดังนี้ -
for (initialization; test condition; iteration statement) {
Statement(s) to be executed if test condition is true
}ตัวอย่าง
ลองใช้ตัวอย่างต่อไปนี้เพื่อเรียนรู้ว่าไฟล์ for loop ทำงานใน JavaScript
<html>
<body>
<script type = "text/javascript">
<!--
var count;
document.write("Starting Loop" + "<br />");
for(count = 0; count < 10; count++) {
document.write("Current Count : " + count );
document.write("<br />");
}
document.write("Loop stopped!");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>เอาต์พุต
Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!
Set the variable to different value and then try...for...inloop ใช้ในการวนซ้ำคุณสมบัติของวัตถุ เนื่องจากเรายังไม่ได้พูดถึง Objects คุณอาจไม่สบายใจกับการวนซ้ำนี้ แต่เมื่อคุณเข้าใจว่าวัตถุทำงานอย่างไรใน JavaScript คุณจะพบว่าการวนซ้ำนี้มีประโยชน์มาก
ไวยากรณ์
for (variablename in object) {
statement or block to execute
}ในการวนซ้ำแต่ละครั้งคุณสมบัติหนึ่งรายการจาก object ได้รับมอบหมายให้ variablename และวนซ้ำนี้จะดำเนินต่อไปจนกว่าคุณสมบัติทั้งหมดของวัตถุจะหมดลง
ตัวอย่าง
ลองใช้ตัวอย่างต่อไปนี้เพื่อใช้งานลูป 'for-in' มันพิมพ์เว็บเบราว์เซอร์Navigator วัตถุ.
<html>
<body>
<script type = "text/javascript">
<!--
var aProperty;
document.write("Navigator Object Properties<br /> ");
for (aProperty in navigator) {
document.write(aProperty);
document.write("<br />");
}
document.write ("Exiting from the loop!");
//-->
</script>
<p>Set the variable to different object and then try...</p>
</body>
</html>เอาต์พุต
Navigator Object Properties
serviceWorker
webkitPersistentStorage
webkitTemporaryStorage
geolocation
doNotTrack
onLine
languages
language
userAgent
product
platform
appVersion
appName
appCodeName
hardwareConcurrency
maxTouchPoints
vendorSub
vendor
productSub
cookieEnabled
mimeTypes
plugins
javaEnabled
getStorageUpdates
getGamepads
webkitGetUserMedia
vibrate
getBattery
sendBeacon
registerProtocolHandler
unregisterProtocolHandler
Exiting from the loop!
Set the variable to different object and then try...JavaScript ให้การควบคุมเต็มรูปแบบเพื่อจัดการกับลูปและเปลี่ยนคำสั่ง อาจมีสถานการณ์เมื่อคุณต้องออกจากวงโดยไม่ต้องไปถึงจุดต่ำสุด นอกจากนี้ยังอาจมีสถานการณ์เมื่อคุณต้องการข้ามส่วนหนึ่งของบล็อกโค้ดของคุณและเริ่มการวนซ้ำครั้งถัดไป
เพื่อจัดการกับสถานการณ์ดังกล่าวทั้งหมด JavaScript มีให้ break และ continueงบ คำสั่งเหล่านี้ใช้เพื่อออกมาจากลูปใด ๆ ทันทีหรือเพื่อเริ่มการวนซ้ำครั้งถัดไปของลูปใดก็ได้ตามลำดับ
คำชี้แจงการแบ่ง
breakคำสั่งซึ่งแนะนำสั้น ๆ พร้อมกับคำสั่งswitchใช้เพื่อออกจากลูปก่อนกำหนดโดยแยกออกจากวงเล็บปีกกาที่แนบมา
แผนภูมิการไหล
ผังงานของคำสั่งแบ่งจะมีลักษณะดังนี้ -
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ไฟล์ breakคำสั่งกับ while loop สังเกตว่าลูปแตกออกเร็วแค่ไหนx ถึง 5 และถึง document.write (..) คำสั่งด้านล่างถึงวงเล็บปีกกาปิด -
<html>
<body>
<script type = "text/javascript">
<!--
var x = 1;
document.write("Entering the loop<br /> ");
while (x < 20) {
if (x == 5) {
break; // breaks out of loop completely
}
x = x + 1;
document.write( x + "<br />");
}
document.write("Exiting the loop!<br /> ");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>เอาต์พุต
Entering the loop
2
3
4
5
Exiting the loop!
Set the variable to different value and then try...เราได้เห็นการใช้งานของ break คำสั่งภายใน a switch คำให้การ.
คำชี้แจงต่อ
continueคำสั่งบอกให้ล่ามเริ่มการวนซ้ำรอบถัดไปทันทีและข้ามบล็อกโค้ดที่เหลือ เมื่อcontinue พบคำสั่งโฟลว์ของโปรแกรมจะย้ายไปยังนิพจน์การตรวจสอบลูปทันทีและหากเงื่อนไขยังคงเป็นจริงก็จะเริ่มการทำซ้ำครั้งถัดไปมิฉะนั้นการควบคุมจะออกมาจากลูป
ตัวอย่าง
ตัวอย่างนี้แสดงให้เห็นถึงการใช้ไฟล์ continueคำสั่งกับ while loop สังเกตว่าไฟล์continue คำสั่งใช้เพื่อข้ามการพิมพ์เมื่อดัชนีอยู่ในตัวแปร x ถึง 5 -
<html>
<body>
<script type = "text/javascript">
<!--
var x = 1;
document.write("Entering the loop<br /> ");
while (x < 10) {
x = x + 1;
if (x == 5) {
continue; // skip rest of the loop body
}
document.write( x + "<br />");
}
document.write("Exiting the loop!<br /> ");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>เอาต์พุต
Entering the loop
2
3
4
6
7
8
9
10
Exiting the loop!
Set the variable to different value and then try...การใช้ป้ายกำกับเพื่อควบคุมการไหล
เริ่มจาก JavaScript 1.2 สามารถใช้ป้ายกำกับกับไฟล์ break และ continueเพื่อควบคุมการไหลอย่างแม่นยำยิ่งขึ้น กlabelเป็นเพียงตัวระบุตามด้วยเครื่องหมายจุดคู่ (:) ที่ใช้กับคำสั่งหรือบล็อกรหัส เราจะเห็นสองตัวอย่างที่แตกต่างกันเพื่อทำความเข้าใจเกี่ยวกับการใช้ป้ายกำกับแบบแบ่งและดำเนินการต่อ
Note - ไม่อนุญาตให้มีการแบ่งบรรทัดระหว่างไฟล์ ‘continue’ หรือ ‘break’คำสั่งและชื่อป้ายกำกับ นอกจากนี้ไม่ควรมีคำสั่งอื่นใดระหว่างชื่อป้ายกำกับและลูปที่เกี่ยวข้อง
ลองใช้สองตัวอย่างต่อไปนี้เพื่อความเข้าใจที่ดีขึ้นเกี่ยวกับป้ายกำกับ
ตัวอย่าง 1
ตัวอย่างต่อไปนี้แสดงวิธีใช้งาน Label ด้วยคำสั่ง break
<html>
<body>
<script type = "text/javascript">
<!--
document.write("Entering the loop!<br /> ");
outerloop: // This is the label name
for (var i = 0; i < 5; i++) {
document.write("Outerloop: " + i + "<br />");
innerloop:
for (var j = 0; j < 5; j++) {
if (j > 3 ) break ; // Quit the innermost loop
if (i == 2) break innerloop; // Do the same thing
if (i == 4) break outerloop; // Quit the outer loop
document.write("Innerloop: " + j + " <br />");
}
}
document.write("Exiting the loop!<br /> ");
//-->
</script>
</body>
</html>เอาต์พุต
Entering the loop!
Outerloop: 0
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 1
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 2
Outerloop: 3
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 4
Exiting the loop!ตัวอย่าง 2
<html>
<body>
<script type = "text/javascript">
<!--
document.write("Entering the loop!<br /> ");
outerloop: // This is the label name
for (var i = 0; i < 3; i++) {
document.write("Outerloop: " + i + "<br />");
for (var j = 0; j < 5; j++) {
if (j == 3) {
continue outerloop;
}
document.write("Innerloop: " + j + "<br />");
}
}
document.write("Exiting the loop!<br /> ");
//-->
</script>
</body>
</html>เอาต์พุต
Entering the loop!
Outerloop: 0
Innerloop: 0
Innerloop: 1
Innerloop: 2
Outerloop: 1
Innerloop: 0
Innerloop: 1
Innerloop: 2
Outerloop: 2
Innerloop: 0
Innerloop: 1
Innerloop: 2
Exiting the loop!ฟังก์ชันคือกลุ่มของโค้ดที่ใช้ซ้ำได้ซึ่งสามารถเรียกใช้ได้ทุกที่ในโปรแกรมของคุณ ทำให้ไม่ต้องเขียนโค้ดเดิมซ้ำแล้วซ้ำเล่า ช่วยโปรแกรมเมอร์ในการเขียนโค้ดโมดูลาร์ ฟังก์ชันช่วยให้โปรแกรมเมอร์สามารถแบ่งโปรแกรมขนาดใหญ่ออกเป็นฟังก์ชันขนาดเล็กและสามารถจัดการได้
เช่นเดียวกับภาษาการเขียนโปรแกรมขั้นสูงอื่น ๆ JavaScript ยังสนับสนุนคุณสมบัติทั้งหมดที่จำเป็นในการเขียนโค้ดโมดูลาร์โดยใช้ฟังก์ชัน คุณต้องเคยเห็นฟังก์ชั่นเช่นalert() และ write()ในบทก่อนหน้านี้ เราใช้ฟังก์ชั่นเหล่านี้ซ้ำแล้วซ้ำเล่า แต่มันถูกเขียนด้วย JavaScript หลักเพียงครั้งเดียว
JavaScript ช่วยให้เราสามารถเขียนฟังก์ชันของเราเองได้เช่นกัน ส่วนนี้อธิบายวิธีการเขียนฟังก์ชันของคุณเองใน JavaScript
นิยามฟังก์ชัน
ก่อนที่เราจะใช้ฟังก์ชันเราจำเป็นต้องกำหนดมัน วิธีทั่วไปในการกำหนดฟังก์ชันใน JavaScript คือการใช้ไฟล์function คีย์เวิร์ดตามด้วยชื่อฟังก์ชันที่ไม่ซ้ำกันรายการพารามิเตอร์ (ซึ่งอาจว่างเปล่า) และบล็อกคำสั่งที่ล้อมรอบด้วยวงเล็บปีกกา
ไวยากรณ์
ไวยากรณ์พื้นฐานแสดงที่นี่
<script type = "text/javascript">
<!--
function functionname(parameter-list) {
statements
}
//-->
</script>ตัวอย่าง
ลองดูตัวอย่างต่อไปนี้ มันกำหนดฟังก์ชันที่เรียกว่า sayHello ที่ไม่มีพารามิเตอร์ -
<script type = "text/javascript">
<!--
function sayHello() {
alert("Hello there");
}
//-->
</script>เรียกใช้ฟังก์ชัน
หากต้องการเรียกใช้ฟังก์ชันใดที่หนึ่งในสคริปต์ในภายหลังคุณจะต้องเขียนชื่อของฟังก์ชันนั้นตามที่แสดงในโค้ดต่อไปนี้
<html>
<head>
<script type = "text/javascript">
function sayHello() {
document.write ("Hello there!");
}
</script>
</head>
<body>
<p>Click the following button to call the function</p>
<form>
<input type = "button" onclick = "sayHello()" value = "Say Hello">
</form>
<p>Use different text in write method and then try...</p>
</body>
</html>เอาต์พุต
พารามิเตอร์ฟังก์ชัน
จนถึงตอนนี้เราได้เห็นฟังก์ชันที่ไม่มีพารามิเตอร์ แต่มีสิ่งอำนวยความสะดวกในการส่งผ่านพารามิเตอร์ที่แตกต่างกันในขณะที่เรียกใช้ฟังก์ชัน พารามิเตอร์ที่ส่งผ่านเหล่านี้สามารถจับได้ภายในฟังก์ชันและการปรับแต่งใด ๆ ก็สามารถทำได้ผ่านพารามิเตอร์เหล่านั้น ฟังก์ชันสามารถใช้พารามิเตอร์หลายตัวคั่นด้วยลูกน้ำ
ตัวอย่าง
ลองดูตัวอย่างต่อไปนี้ เราได้แก้ไขไฟล์sayHelloฟังก์ชั่นที่นี่ ตอนนี้ใช้สองพารามิเตอร์
<html>
<head>
<script type = "text/javascript">
function sayHello(name, age) {
document.write (name + " is " + age + " years old.");
}
</script>
</head>
<body>
<p>Click the following button to call the function</p>
<form>
<input type = "button" onclick = "sayHello('Zara', 7)" value = "Say Hello">
</form>
<p>Use different parameters inside the function and then try...</p>
</body>
</html>เอาต์พุต
คำชี้แจงการคืนสินค้า
ฟังก์ชัน JavaScript สามารถมีทางเลือกได้ returnคำให้การ. สิ่งนี้จำเป็นหากคุณต้องการส่งคืนค่าจากฟังก์ชัน คำสั่งนี้ควรเป็นคำสั่งสุดท้ายในฟังก์ชัน
ตัวอย่างเช่นคุณสามารถส่งผ่านตัวเลขสองตัวในฟังก์ชันจากนั้นคุณสามารถคาดหวังว่าฟังก์ชันจะส่งคืนการคูณในโปรแกรมการโทรของคุณ
ตัวอย่าง
ลองดูตัวอย่างต่อไปนี้ กำหนดฟังก์ชันที่ใช้สองพารามิเตอร์และเชื่อมต่อกันก่อนที่จะส่งคืนผลลัพธ์ในโปรแกรมการโทร
<html>
<head>
<script type = "text/javascript">
function concatenate(first, last) {
var full;
full = first + last;
return full;
}
function secondFunction() {
var result;
result = concatenate('Zara', 'Ali');
document.write (result );
}
</script>
</head>
<body>
<p>Click the following button to call the function</p>
<form>
<input type = "button" onclick = "secondFunction()" value = "Call Function">
</form>
<p>Use different parameters inside the function and then try...</p>
</body>
</html>เอาต์พุต
มีหลายสิ่งให้เรียนรู้เกี่ยวกับฟังก์ชัน JavaScript อย่างไรก็ตามเราได้กล่าวถึงแนวคิดที่สำคัญที่สุดในบทช่วยสอนนี้
ฟังก์ชันที่ซ้อนกันของ JavaScript
ฟังก์ชัน JavaScript () ตัวสร้าง
ตัวอักษรฟังก์ชัน JavaScript
เหตุการณ์คืออะไร?
การโต้ตอบของ JavaScript กับ HTML ได้รับการจัดการผ่านเหตุการณ์ที่เกิดขึ้นเมื่อผู้ใช้หรือเบราว์เซอร์จัดการเพจ
เมื่อหน้าเว็บโหลดเรียกว่าเหตุการณ์ เมื่อผู้ใช้คลิกปุ่มการคลิกนั้นก็เป็นเหตุการณ์เช่นกัน ตัวอย่างอื่น ๆ ได้แก่ เหตุการณ์เช่นการกดแป้นใด ๆ การปิดหน้าต่างการปรับขนาดหน้าต่างเป็นต้น
นักพัฒนาสามารถใช้เหตุการณ์เหล่านี้เพื่อดำเนินการตอบสนองด้วยรหัส JavaScript ซึ่งทำให้ปุ่มปิดหน้าต่างแสดงข้อความต่อผู้ใช้ข้อมูลที่ต้องตรวจสอบความถูกต้องและการตอบสนองประเภทอื่น ๆ เท่าที่จะทำได้
เหตุการณ์เป็นส่วนหนึ่งของ Document Object Model (DOM) ระดับ 3 และทุกองค์ประกอบ HTML มีชุดของเหตุการณ์ที่สามารถทริกเกอร์โค้ด JavaScript
กรุณาไปผ่านการกวดวิชาเล็ก ๆ นี้เพื่อความเข้าใจที่ดีขึ้นHTML อ้างอิงเหตุการณ์ ที่นี่เราจะเห็นตัวอย่างบางส่วนเพื่อทำความเข้าใจความสัมพันธ์ระหว่างเหตุการณ์และ JavaScript -
onclick ประเภทเหตุการณ์
นี่คือประเภทเหตุการณ์ที่ใช้บ่อยที่สุดซึ่งเกิดขึ้นเมื่อผู้ใช้คลิกปุ่มซ้ายของเมาส์ คุณสามารถใส่การตรวจสอบคำเตือน ฯลฯ กับเหตุการณ์ประเภทนี้ได้
ตัวอย่าง
ลองดูตัวอย่างต่อไปนี้
<html>
<head>
<script type = "text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<p>Click the following button and see result</p>
<form>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</form>
</body>
</html>เอาต์พุต
onsubmit ประเภทเหตุการณ์
onsubmitเป็นเหตุการณ์ที่เกิดขึ้นเมื่อคุณพยายามส่งแบบฟอร์ม คุณสามารถตรวจสอบความถูกต้องของฟอร์มกับประเภทเหตุการณ์นี้ได้
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงวิธีใช้ onsubmit เรากำลังเรียกไฟล์validate()ก่อนที่จะส่งข้อมูลแบบฟอร์มไปยังเว็บเซิร์ฟเวอร์ ถ้าvalidate() ฟังก์ชั่นส่งคืนจริงแบบฟอร์มจะถูกส่งมิฉะนั้นจะไม่ส่งข้อมูล
ลองดูตัวอย่างต่อไปนี้
<html>
<head>
<script type = "text/javascript">
<!--
function validation() {
all validation goes here
.........
return either true or false
}
//-->
</script>
</head>
<body>
<form method = "POST" action = "t.cgi" onsubmit = "return validate()">
.......
<input type = "submit" value = "Submit" />
</form>
</body>
</html>onmouseover และ onmouseout
กิจกรรมทั้งสองประเภทนี้จะช่วยให้คุณสร้างเอฟเฟกต์ที่สวยงามด้วยรูปภาพหรือแม้กระทั่งกับข้อความ onmouseover เหตุการณ์จะทริกเกอร์เมื่อคุณนำเมาส์ไปวางเหนือองค์ประกอบใด ๆ และไฟล์ onmouseoutทริกเกอร์เมื่อคุณเลื่อนเมาส์ออกจากองค์ประกอบนั้น ลองดูตัวอย่างต่อไปนี้
<html>
<head>
<script type = "text/javascript">
<!--
function over() {
document.write ("Mouse Over");
}
function out() {
document.write ("Mouse Out");
}
//-->
</script>
</head>
<body>
<p>Bring your mouse inside the division to see the result:</p>
<div onmouseover = "over()" onmouseout = "out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>เอาต์พุต
เหตุการณ์มาตรฐาน HTML 5
เหตุการณ์ HTML 5 มาตรฐานแสดงไว้ที่นี่สำหรับการอ้างอิงของคุณ สคริปต์ที่นี่ระบุฟังก์ชัน Javascript ที่จะดำเนินการกับเหตุการณ์นั้น
| แอตทริบิวต์ | มูลค่า | คำอธิบาย |
|---|---|---|
| ออฟไลน์ | สคริปต์ | ทริกเกอร์เมื่อเอกสารออฟไลน์ |
| Onabort | สคริปต์ | ทริกเกอร์เหตุการณ์ยกเลิก |
| หลังจากพิมพ์ | สคริปต์ | ทริกเกอร์หลังจากพิมพ์เอกสาร |
| onbeforeonload | สคริปต์ | ทริกเกอร์ก่อนโหลดเอกสาร |
| onbeforeprint | สคริปต์ | ทริกเกอร์ก่อนพิมพ์เอกสาร |
| onblur | สคริปต์ | ทริกเกอร์เมื่อหน้าต่างสูญเสียโฟกัส |
| oncanplay | สคริปต์ | ทริกเกอร์เมื่อสื่อเริ่มเล่นได้ แต่อาจต้องหยุดเพื่อทำบัฟเฟอร์ |
| oncanplaythrough | สคริปต์ | ทริกเกอร์เมื่อสามารถเล่นสื่อจนจบโดยไม่ต้องหยุดบัฟเฟอร์ |
| onchange | สคริปต์ | ทริกเกอร์เมื่อองค์ประกอบเปลี่ยนแปลง |
| เมื่อคลิก | สคริปต์ | ทริกเกอร์เมื่อคลิกเมาส์ |
| oncontextmenu | สคริปต์ | ทริกเกอร์เมื่อเมนูบริบทถูกทริกเกอร์ |
| ondblclick | สคริปต์ | ทริกเกอร์เมื่อดับเบิลคลิกเมาส์ |
| ondrag | สคริปต์ | ทริกเกอร์เมื่อองค์ประกอบถูกลาก |
| ondragend | สคริปต์ | ทริกเกอร์เมื่อสิ้นสุดการดำเนินการลาก |
| ondragenter | สคริปต์ | ทริกเกอร์เมื่อองค์ประกอบถูกลากไปยังเป้าหมายการดร็อปที่ถูกต้อง |
| ondragleave | สคริปต์ | ทริกเกอร์เมื่อองค์ประกอบถูกลากผ่านเป้าหมายการดร็อปที่ถูกต้อง |
| ondragover | สคริปต์ | ทริกเกอร์เมื่อเริ่มดำเนินการลาก |
| ondragstart | สคริปต์ | ทริกเกอร์เมื่อเริ่มดำเนินการลาก |
| ondrop | สคริปต์ | ทริกเกอร์เมื่อองค์ประกอบที่ลากจะถูกทิ้ง |
| ondurationchange | สคริปต์ | ทริกเกอร์เมื่อความยาวของสื่อเปลี่ยนไป |
| ยกเว้น | สคริปต์ | ทริกเกอร์เมื่อองค์ประกอบทรัพยากรสื่อว่างเปล่าอย่างกะทันหัน |
| onended | สคริปต์ | ทริกเกอร์เมื่อสื่อถึงจุดสิ้นสุด |
| ความผิดพลาด | สคริปต์ | ทริกเกอร์เมื่อเกิดข้อผิดพลาด |
| ออนโฟกัส | สคริปต์ | ทริกเกอร์เมื่อหน้าต่างได้รับโฟกัส |
| onformchange | สคริปต์ | ทริกเกอร์เมื่อฟอร์มเปลี่ยนไป |
| onforminput | สคริปต์ | ทริกเกอร์เมื่อฟอร์มได้รับการป้อนข้อมูลจากผู้ใช้ |
| onhaschange | สคริปต์ | ทริกเกอร์เมื่อเอกสารมีการเปลี่ยนแปลง |
| oninput | สคริปต์ | ทริกเกอร์เมื่อองค์ประกอบได้รับการป้อนข้อมูลของผู้ใช้ |
| oninvalid | สคริปต์ | ทริกเกอร์เมื่อองค์ประกอบไม่ถูกต้อง |
| onkeydown | สคริปต์ | ทริกเกอร์เมื่อกดปุ่ม |
| onkeypress | สคริปต์ | ทริกเกอร์เมื่อกดและปล่อยคีย์ |
| onkeyup | สคริปต์ | ทริกเกอร์เมื่อปล่อยคีย์ |
| onload | สคริปต์ | ทริกเกอร์เมื่อเอกสารโหลด |
| onloadeddata | สคริปต์ | ทริกเกอร์เมื่อโหลดข้อมูลสื่อ |
| onloadedmetadata | สคริปต์ | ทริกเกอร์เมื่อโหลดระยะเวลาและข้อมูลสื่ออื่น ๆ ขององค์ประกอบสื่อ |
| onloadstart | สคริปต์ | ทริกเกอร์เมื่อเบราว์เซอร์เริ่มโหลดข้อมูลสื่อ |
| onmessage | สคริปต์ | ทริกเกอร์เมื่อข้อความถูกทริกเกอร์ |
| onmousedown | สคริปต์ | ทริกเกอร์เมื่อกดปุ่มเมาส์ |
| onmousemove | สคริปต์ | ทริกเกอร์เมื่อตัวชี้เมาส์เคลื่อนที่ |
| onmouseout | สคริปต์ | ทริกเกอร์เมื่อตัวชี้เมาส์เคลื่อนออกจากองค์ประกอบ |
| onmouseover | สคริปต์ | ทริกเกอร์เมื่อตัวชี้เมาส์เลื่อนไปที่องค์ประกอบ |
| onmouseup | สคริปต์ | ทริกเกอร์เมื่อปล่อยปุ่มเมาส์ |
| onmousewheel | สคริปต์ | ทริกเกอร์เมื่อล้อเมาส์กำลังหมุน |
| ออนไลน์ | สคริปต์ | ทริกเกอร์เมื่อเอกสารออฟไลน์ |
| Onoine | สคริปต์ | ทริกเกอร์เมื่อเอกสารออนไลน์ |
| ออนไลน์ | สคริปต์ | ทริกเกอร์เมื่อเอกสารออนไลน์ |
| onpagehide | สคริปต์ | ทริกเกอร์เมื่อหน้าต่างซ่อนอยู่ |
| onpageshow | สคริปต์ | ทริกเกอร์เมื่อมองเห็นหน้าต่าง |
| หยุดชั่วคราว | สคริปต์ | ทริกเกอร์เมื่อข้อมูลสื่อหยุดชั่วคราว |
| onplay | สคริปต์ | ทริกเกอร์เมื่อข้อมูลสื่อกำลังจะเริ่มเล่น |
| กำลังเล่น | สคริปต์ | ทริกเกอร์เมื่อข้อมูลสื่อเริ่มเล่น |
| onpopstate | สคริปต์ | ทริกเกอร์เมื่อประวัติของหน้าต่างเปลี่ยนไป |
| onprogress | สคริปต์ | ทริกเกอร์เมื่อเบราว์เซอร์กำลังดึงข้อมูลสื่อ |
| onratechange | สคริปต์ | ทริกเกอร์เมื่ออัตราการเล่นข้อมูลสื่อเปลี่ยนไป |
| onreadystatechange | สคริปต์ | ทริกเกอร์เมื่อสถานะพร้อมเปลี่ยน |
| onredo | สคริปต์ | ทริกเกอร์เมื่อเอกสารดำเนินการทำซ้ำ |
| ปรับขนาด | สคริปต์ | ทริกเกอร์เมื่อปรับขนาดหน้าต่าง |
| onscroll | สคริปต์ | ทริกเกอร์เมื่อแถบเลื่อนขององค์ประกอบกำลังถูกเลื่อน |
| onseeked | สคริปต์ | ทริกเกอร์เมื่อแอตทริบิวต์การค้นหาขององค์ประกอบสื่อไม่เป็นจริงอีกต่อไปและการค้นหาสิ้นสุดลง |
| onseeking | สคริปต์ | ทริกเกอร์เมื่อแอตทริบิวต์การค้นหาขององค์ประกอบสื่อเป็นจริงและการค้นหาได้เริ่มขึ้นแล้ว |
| เลือก | สคริปต์ | ทริกเกอร์เมื่อองค์ประกอบถูกเลือก |
| ติดตั้ง | สคริปต์ | ทริกเกอร์เมื่อมีข้อผิดพลาดในการดึงข้อมูลสื่อ |
| ที่จัดเก็บ | สคริปต์ | ทริกเกอร์เมื่อเอกสารโหลด |
| onsubmit | สคริปต์ | ทริกเกอร์เมื่อส่งแบบฟอร์ม |
| onsuspend | สคริปต์ | ทริกเกอร์เมื่อเบราว์เซอร์ดึงข้อมูลสื่อ แต่หยุดก่อนที่จะดึงไฟล์สื่อทั้งหมด |
| ontimeupdate | สคริปต์ | ทริกเกอร์เมื่อสื่อเปลี่ยนตำแหน่งการเล่น |
| onundo | สคริปต์ | ทริกเกอร์เมื่อเอกสารดำเนินการเลิกทำ |
| onunload | สคริปต์ | ทริกเกอร์เมื่อผู้ใช้ออกจากเอกสาร |
| onvolumechange | สคริปต์ | ทริกเกอร์เมื่อสื่อเปลี่ยนระดับเสียงและเมื่อตั้งค่าระดับเสียงเป็น "ปิดเสียง" |
| กำลังรอ | สคริปต์ | ทริกเกอร์เมื่อสื่อหยุดเล่น แต่คาดว่าจะกลับมาทำงานต่อ |
คุกกี้คืออะไร?
เว็บเบราว์เซอร์และเซิร์ฟเวอร์ใช้โปรโตคอล HTTP ในการสื่อสารและ HTTP เป็นโปรโตคอลไร้รัฐ แต่สำหรับเว็บไซต์เชิงพาณิชย์จำเป็นต้องรักษาข้อมูลเซสชันระหว่างหน้าต่างๆ ตัวอย่างเช่นการลงทะเบียนผู้ใช้หนึ่งคนจะสิ้นสุดลงหลังจากเสร็จสิ้นหลายหน้า แต่จะรักษาข้อมูลเซสชันของผู้ใช้ในหน้าเว็บทั้งหมดได้อย่างไร
ในหลาย ๆ สถานการณ์การใช้คุกกี้เป็นวิธีที่มีประสิทธิภาพที่สุดในการจดจำและติดตามการตั้งค่าการซื้อค่าคอมมิชชั่นและข้อมูลอื่น ๆ ที่จำเป็นสำหรับประสบการณ์ของผู้เยี่ยมชมหรือสถิติไซต์ที่ดีขึ้น
มันทำงานอย่างไร ?
เซิร์ฟเวอร์ของคุณส่งข้อมูลบางส่วนไปยังเบราว์เซอร์ของผู้เยี่ยมชมในรูปแบบของคุกกี้ เบราว์เซอร์อาจยอมรับคุกกี้ หากเป็นเช่นนั้นระบบจะจัดเก็บเป็นบันทึกข้อความธรรมดาในฮาร์ดไดรฟ์ของผู้เยี่ยมชม ตอนนี้เมื่อผู้เยี่ยมชมมาถึงหน้าอื่นในไซต์ของคุณเบราว์เซอร์จะส่งคุกกี้เดียวกันไปยังเซิร์ฟเวอร์เพื่อเรียกค้น เมื่อดึงข้อมูลเซิร์ฟเวอร์ของคุณจะรู้ / จำสิ่งที่เก็บไว้ก่อนหน้านี้
คุกกี้คือบันทึกข้อมูลข้อความธรรมดาของฟิลด์ความยาวตัวแปร 5 ช่อง -
Expires- วันที่คุกกี้จะหมดอายุ หากว่างเปล่าคุกกี้จะหมดอายุเมื่อผู้เยี่ยมชมออกจากเบราว์เซอร์
Domain - ชื่อโดเมนของไซต์ของคุณ
Path- เส้นทางไปยังไดเรกทอรีหรือหน้าเว็บที่ตั้งค่าคุกกี้ ซึ่งอาจว่างเปล่าหากคุณต้องการดึงคุกกี้จากไดเร็กทอรีหรือเพจใด ๆ
Secure- หากช่องนี้มีคำว่า "ปลอดภัย" คุกกี้จะสามารถเรียกค้นได้ด้วยเซิร์ฟเวอร์ที่ปลอดภัยเท่านั้น หากฟิลด์นี้ว่างแสดงว่าไม่มีข้อ จำกัด ดังกล่าว
Name=Value - คุกกี้ถูกตั้งค่าและเรียกดูในรูปแบบของคู่คีย์ - ค่า
เดิมคุกกี้ถูกออกแบบมาสำหรับการเขียนโปรแกรม CGI ข้อมูลที่อยู่ในคุกกี้จะถูกส่งโดยอัตโนมัติระหว่างเว็บเบราว์เซอร์และเว็บเซิร์ฟเวอร์ดังนั้นสคริปต์ CGI บนเซิร์ฟเวอร์จึงสามารถอ่านและเขียนค่าคุกกี้ที่เก็บไว้บนไคลเอนต์ได้
JavaScript ยังสามารถจัดการคุกกี้โดยใช้ไฟล์ cookie คุณสมบัติของ Documentวัตถุ. JavaScript สามารถอ่านสร้างแก้ไขและลบคุกกี้ที่ใช้กับหน้าเว็บปัจจุบัน
การจัดเก็บคุกกี้
วิธีที่ง่ายที่สุดในการสร้างคุกกี้คือกำหนดค่าสตริงให้กับอ็อบเจกต์ document.cookie ซึ่งมีลักษณะดังนี้
document.cookie = "key1 = value1;key2 = value2;expires = date";ที่นี่ expiresแอตทริบิวต์เป็นทางเลือก หากคุณระบุแอตทริบิวต์นี้พร้อมวันที่หรือเวลาที่ถูกต้องคุกกี้จะหมดอายุในวันที่หรือเวลาที่กำหนดและหลังจากนั้นจะไม่สามารถเข้าถึงค่าของคุกกี้ได้
Note- ค่าคุกกี้ต้องไม่รวมอัฒภาคจุลภาคหรือช่องว่าง ด้วยเหตุนี้คุณอาจต้องการใช้ JavaScriptescape()ฟังก์ชันเข้ารหัสค่าก่อนจัดเก็บในคุกกี้ หากคุณทำเช่นนี้คุณจะต้องใช้ไฟล์unescape() ฟังก์ชันเมื่อคุณอ่านค่าคุกกี้
ตัวอย่าง
ลองทำดังต่อไปนี้ ตั้งชื่อลูกค้าในคุกกี้ป้อนข้อมูล
<html>
<head>
<script type = "text/javascript">
<!--
function WriteCookie() {
if( document.myform.customer.value == "" ) {
alert("Enter some value!");
return;
}
cookievalue = escape(document.myform.customer.value) + ";";
document.cookie = "name=" + cookievalue;
document.write ("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name = "myform" action = "">
Enter name: <input type = "text" name = "customer"/>
<input type = "button" value = "Set Cookie" onclick = "WriteCookie();"/>
</form>
</body>
</html>เอาต์พุต
ตอนนี้เครื่องของคุณมีคุกกี้ชื่อว่า name. คุณสามารถตั้งค่าคุกกี้หลายรายการโดยใช้คู่คีย์ = ค่าหลายคู่โดยคั่นด้วยลูกน้ำ
คุกกี้การอ่าน
การอ่านคุกกี้นั้นง่ายพอ ๆ กับการเขียนคุกกี้เพราะค่าของอ็อบเจกต์ document.cookie คือคุกกี้ ดังนั้นคุณสามารถใช้สตริงนี้ได้ทุกเมื่อที่คุณต้องการเข้าถึงคุกกี้ สตริง document.cookie จะเก็บรายการของคู่ชื่อ = ค่าโดยคั่นด้วยอัฒภาคโดยที่name คือชื่อของคุกกี้และค่าคือค่าสตริง
คุณสามารถใช้สตริง ' split() ฟังก์ชันแบ่งสตริงออกเป็นคีย์และค่าดังนี้ -
ตัวอย่าง
ลองใช้ตัวอย่างต่อไปนี้เพื่อรับคุกกี้ทั้งหมด
<html>
<head>
<script type = "text/javascript">
<!--
function ReadCookie() {
var allcookies = document.cookie;
document.write ("All Cookies : " + allcookies );
// Get all the cookies pairs in an array
cookiearray = allcookies.split(';');
// Now take key value pair out of this array
for(var i=0; i<cookiearray.length; i++) {
name = cookiearray[i].split('=')[0];
value = cookiearray[i].split('=')[1];
document.write ("Key is : " + name + " and Value is : " + value);
}
}
//-->
</script>
</head>
<body>
<form name = "myform" action = "">
<p> click the following button and see the result:</p>
<input type = "button" value = "Get Cookie" onclick = "ReadCookie()"/>
</form>
</body>
</html>Note - ที่นี่ length เป็นวิธีการของ Arrayคลาสที่ส่งกลับความยาวของอาร์เรย์ เราจะพูดถึงอาร์เรย์ในบทที่แยกต่างหาก เมื่อถึงเวลานั้นโปรดพยายามย่อยมัน
Note- อาจมีคุกกี้อื่น ๆ ตั้งอยู่ในเครื่องของคุณแล้ว รหัสด้านบนจะแสดงคุกกี้ทั้งหมดที่ตั้งไว้ในเครื่องของคุณ
การตั้งค่าวันหมดอายุของคุกกี้
คุณสามารถยืดอายุของคุกกี้ได้นอกเหนือจากเซสชันของเบราว์เซอร์ปัจจุบันโดยตั้งค่าวันที่หมดอายุและบันทึกวันหมดอายุไว้ในคุกกี้ ซึ่งสามารถทำได้โดยการตั้งค่า‘expires’ แอตทริบิวต์วันที่และเวลา
ตัวอย่าง
ลองดูตัวอย่างต่อไปนี้ แสดงวิธีการขยายวันหมดอายุของคุกกี้เป็น 1 เดือน
<html>
<head>
<script type = "text/javascript">
<!--
function WriteCookie() {
var now = new Date();
now.setMonth( now.getMonth() + 1 );
cookievalue = escape(document.myform.customer.value) + ";"
document.cookie = "name=" + cookievalue;
document.cookie = "expires=" + now.toUTCString() + ";"
document.write ("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name = "myform" action = "">
Enter name: <input type = "text" name = "customer"/>
<input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
</form>
</body>
</html>เอาต์พุต
การลบคุกกี้
บางครั้งคุณอาจต้องการลบคุกกี้เพื่อให้ความพยายามในการอ่านคุกกี้ในภายหลังไม่ได้รับผลตอบแทนใด ๆ ในการดำเนินการนี้คุณต้องตั้งวันหมดอายุเป็นเวลาในอดีต
ตัวอย่าง
ลองดูตัวอย่างต่อไปนี้ มันแสดงให้เห็นถึงวิธีการลบคุกกี้โดยตั้งค่าวันหมดอายุเป็นหนึ่งเดือนหลังวันที่ปัจจุบัน
<html>
<head>
<script type = "text/javascript">
<!--
function WriteCookie() {
var now = new Date();
now.setMonth( now.getMonth() - 1 );
cookievalue = escape(document.myform.customer.value) + ";"
document.cookie = "name=" + cookievalue;
document.cookie = "expires=" + now.toUTCString() + ";"
document.write("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name = "myform" action = "">
Enter name: <input type = "text" name = "customer"/>
<input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
</form>
</body>
</html>เอาต์พุต
Page Redirection คืออะไร?
คุณอาจพบสถานการณ์ที่คุณคลิก URL เพื่อไปยังหน้า X แต่ภายในคุณถูกนำไปที่หน้าอื่น Y มันเกิดขึ้นเนื่องจาก page redirection. แนวคิดนี้จะแตกต่างจากJavaScript หน้ารีเฟรช
อาจมีสาเหตุหลายประการที่ทำให้คุณต้องการเปลี่ยนเส้นทางผู้ใช้จากหน้าเดิม เรากำลังแสดงเหตุผลบางประการ -
คุณไม่ชอบชื่อโดเมนของคุณและคุณกำลังจะย้ายไปยังโดเมนใหม่ ในสถานการณ์ดังกล่าวคุณอาจต้องการนำผู้เยี่ยมชมทั้งหมดของคุณไปยังไซต์ใหม่ ที่นี่คุณสามารถรักษาโดเมนเก่าของคุณ แต่ใส่หน้าเดียวที่มีการเปลี่ยนเส้นทางเพจเพื่อให้ผู้เยี่ยมชมโดเมนเก่าของคุณเข้ามาที่โดเมนใหม่
คุณได้สร้างเพจต่างๆตามเวอร์ชันของเบราว์เซอร์หรือชื่อหรืออาจขึ้นอยู่กับประเทศต่างๆจากนั้นแทนที่จะใช้การเปลี่ยนเส้นทางเพจฝั่งเซิร์ฟเวอร์ของคุณคุณสามารถใช้การเปลี่ยนเส้นทางเพจฝั่งไคลเอ็นต์เพื่อนำผู้ใช้ของคุณไปยังเพจที่เหมาะสม
เครื่องมือค้นหาอาจจัดทำดัชนีหน้าเว็บของคุณแล้ว แต่ในขณะที่ย้ายไปยังโดเมนอื่นคุณไม่ต้องการที่จะสูญเสียผู้เยี่ยมชมที่มาจากเครื่องมือค้นหา คุณจึงสามารถใช้การเปลี่ยนเส้นทางเพจฝั่งไคลเอ็นต์ได้ แต่อย่าลืมว่าไม่ควรทำเพื่อหลอกเครื่องมือค้นหาเพราะอาจทำให้ไซต์ของคุณถูกแบนได้
Page Re-direction ทำงานอย่างไร
การปรับใช้ Page-Redirection มีดังต่อไปนี้
ตัวอย่าง 1
การเปลี่ยนเส้นทางเพจโดยใช้ JavaScript ที่ฝั่งไคลเอ็นต์นั้นค่อนข้างง่าย ในการเปลี่ยนเส้นทางผู้เยี่ยมชมไซต์ของคุณไปยังหน้าใหม่คุณเพียงแค่ต้องเพิ่มบรรทัดในส่วนหัวของคุณดังนี้
<html>
<head>
<script type = "text/javascript">
<!--
function Redirect() {
window.location = "https://www.tutorialspoint.com";
}
//-->
</script>
</head>
<body>
<p>Click the following button, you will be redirected to home page.</p>
<form>
<input type = "button" value = "Redirect Me" onclick = "Redirect();" />
</form>
</body>
</html>เอาต์พุต
ตัวอย่าง 2
คุณสามารถแสดงข้อความที่เหมาะสมแก่ผู้เยี่ยมชมไซต์ของคุณก่อนที่จะเปลี่ยนเส้นทางไปยังหน้าใหม่ การดำเนินการนี้จะต้องมีการหน่วงเวลาเล็กน้อยเพื่อโหลดหน้าใหม่ ตัวอย่างต่อไปนี้แสดงวิธีการใช้งานแบบเดียวกัน ที่นี่setTimeout() เป็นฟังก์ชัน JavaScript ในตัวซึ่งสามารถใช้เพื่อเรียกใช้ฟังก์ชันอื่นหลังจากช่วงเวลาที่กำหนด
<html>
<head>
<script type = "text/javascript">
<!--
function Redirect() {
window.location = "https://www.tutorialspoint.com";
}
document.write("You will be redirected to main page in 10 sec.");
setTimeout('Redirect()', 10000);
//-->
</script>
</head>
<body>
</body>
</html>เอาต์พุต
You will be redirected to tutorialspoint.com main page in 10 seconds!ตัวอย่างที่ 3
ตัวอย่างต่อไปนี้แสดงวิธีเปลี่ยนเส้นทางผู้เยี่ยมชมไซต์ของคุณไปยังหน้าอื่นตามเบราว์เซอร์ของพวกเขา
<html>
<head>
<script type = "text/javascript">
<!--
var browsername = navigator.appName;
if( browsername == "Netscape" ) {
window.location = "http://www.location.com/ns.htm";
} else if ( browsername =="Microsoft Internet Explorer") {
window.location = "http://www.location.com/ie.htm";
} else {
window.location = "http://www.location.com/other.htm";
}
//-->
</script>
</head>
<body>
</body>
</html>JavaScript รองรับกล่องโต้ตอบที่สำคัญสามประเภท กล่องโต้ตอบเหล่านี้สามารถใช้เพื่อเพิ่มและแจ้งเตือนหรือเพื่อรับการยืนยันเกี่ยวกับอินพุตใด ๆ หรือเพื่อรับข้อมูลเข้าจากผู้ใช้ ในที่นี้เราจะพูดถึงแต่ละกล่องโต้ตอบทีละกล่อง
กล่องโต้ตอบการแจ้งเตือน
กล่องโต้ตอบการแจ้งเตือนส่วนใหญ่จะใช้เพื่อส่งข้อความเตือนไปยังผู้ใช้ ตัวอย่างเช่นหากช่องป้อนข้อมูลหนึ่งต้องการป้อนข้อความ แต่ผู้ใช้ไม่ได้ป้อนข้อมูลใด ๆ จากนั้นในฐานะส่วนหนึ่งของการตรวจสอบความถูกต้องคุณสามารถใช้กล่องแจ้งเตือนเพื่อส่งข้อความเตือนได้
อย่างไรก็ตามยังสามารถใช้กล่องแจ้งเตือนสำหรับข้อความที่เป็นมิตรได้ ช่องแจ้งเตือนมีเพียงปุ่มเดียว "ตกลง" เพื่อเลือกและดำเนินการต่อ
ตัวอย่าง
<html>
<head>
<script type = "text/javascript">
<!--
function Warn() {
alert ("This is a warning message!");
document.write ("This is a warning message!");
}
//-->
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "Warn();" />
</form>
</body>
</html>เอาต์พุต
กล่องโต้ตอบการยืนยัน
กล่องโต้ตอบการยืนยันส่วนใหญ่จะใช้เพื่อรับคำยินยอมของผู้ใช้ในตัวเลือกใด ๆ จะแสดงกล่องโต้ตอบที่มีสองปุ่ม:OK และ Cancel.
หากผู้ใช้คลิกที่ปุ่ม OK วิธีหน้าต่าง confirm()จะกลับมาจริง หากผู้ใช้คลิกที่ปุ่มยกเลิกแล้วconfirm()ส่งคืนเท็จ คุณสามารถใช้กล่องโต้ตอบการยืนยันได้ดังนี้
ตัวอย่าง
<html>
<head>
<script type = "text/javascript">
<!--
function getConfirmation() {
var retVal = confirm("Do you want to continue ?");
if( retVal == true ) {
document.write ("User wants to continue!");
return true;
} else {
document.write ("User does not want to continue!");
return false;
}
}
//-->
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "getConfirmation();" />
</form>
</body>
</html>เอาต์พุต
กล่องโต้ตอบพร้อมต์
กล่องโต้ตอบพร้อมต์มีประโยชน์มากเมื่อคุณต้องการป๊อปอัพกล่องข้อความเพื่อรับข้อมูลเข้าของผู้ใช้ ดังนั้นจึงช่วยให้คุณสามารถโต้ตอบกับผู้ใช้ได้ ผู้ใช้ต้องกรอกข้อมูลในฟิลด์จากนั้นคลิกตกลง
กล่องโต้ตอบนี้จะแสดงขึ้นโดยใช้วิธีการที่เรียกว่า prompt() ซึ่งใช้สองพารามิเตอร์: (i) ป้ายกำกับที่คุณต้องการแสดงในกล่องข้อความและ (ii) สตริงเริ่มต้นเพื่อแสดงในกล่องข้อความ
กล่องโต้ตอบนี้มีสองปุ่ม: OK และ Cancel. หากผู้ใช้คลิกปุ่ม OK วิธีหน้าต่างprompt()จะส่งคืนค่าที่ป้อนจากกล่องข้อความ หากผู้ใช้คลิกปุ่มยกเลิกวิธีหน้าต่างprompt() ผลตอบแทน null.
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงวิธีใช้กล่องโต้ตอบพร้อมต์ -
<html>
<head>
<script type = "text/javascript">
<!--
function getValue() {
var retVal = prompt("Enter your name : ", "your name here");
document.write("You have entered : " + retVal);
}
//-->
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "getValue();" />
</form>
</body>
</html>เอาต์พุต
voidเป็นคำหลักที่สำคัญใน JavaScript ซึ่งสามารถใช้เป็นตัวดำเนินการยูนารีที่ปรากฏก่อนตัวถูกดำเนินการเดียวซึ่งอาจเป็นประเภทใดก็ได้ ตัวดำเนินการนี้ระบุนิพจน์ที่จะประเมินโดยไม่ส่งคืนค่า
ไวยากรณ์
ไวยากรณ์ของ void อาจเป็นสองอย่างต่อไปนี้ -
<head>
<script type = "text/javascript">
<!--
void func()
javascript:void func()
or:
void(func())
javascript:void(func())
//-->
</script>
</head>ตัวอย่าง 1
การใช้ตัวดำเนินการนี้โดยทั่วไปอยู่ในjavascriptฝั่งไคลเอ็นต์: URL ซึ่งช่วยให้คุณประเมินนิพจน์สำหรับผลข้างเคียงโดยที่เบราว์เซอร์ไม่แสดงค่าของนิพจน์ที่ประเมิน
นี่คือการแสดงออก alert ('Warning!!!') ได้รับการประเมิน แต่ไม่ได้โหลดกลับเข้าไปในเอกสารปัจจุบัน -
<html>
<head>
<script type = "text/javascript">
<!--
//-->
</script>
</head>
<body>
<p>Click the following, This won't react at all...</p>
<a href = "javascript:void(alert('Warning!!!'))">Click me!</a>
</body>
</html>เอาต์พุต
ตัวอย่าง 2
ลองดูตัวอย่างต่อไปนี้ ลิงก์ต่อไปนี้ไม่ทำอะไรเลยเนื่องจากนิพจน์ "0" ไม่มีผลใน JavaScript ที่นี่นิพจน์ "0" ได้รับการประเมิน แต่จะไม่ถูกโหลดกลับเข้าไปในเอกสารปัจจุบัน
<html>
<head>
<script type = "text/javascript">
<!--
//-->
</script>
</head>
<body>
<p>Click the following, This won't react at all...</p>
<a href = "javascript:void(0)">Click me!</a>
</body>
</html>เอาต์พุต
ตัวอย่างที่ 3
การใช้งาน void คือการสร้างไฟล์ undefined มูลค่าดังนี้.
<html>
<head>
<script type = "text/javascript">
<!--
function getValue() {
var a,b,c;
a = void ( b = 5, c = 7 );
document.write('a = ' + a + ' b = ' + b +' c = ' + c );
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type = "button" value = "Click Me" onclick = "getValue();" />
</form>
</body>
</html>เอาต์พุต
หลายครั้งคุณต้องการวางปุ่มบนหน้าเว็บของคุณเพื่อพิมพ์เนื้อหาของหน้าเว็บนั้นผ่านเครื่องพิมพ์จริง JavaScript ช่วยให้คุณใช้ฟังก์ชันนี้โดยใช้ไฟล์print ฟังก์ชันของ window วัตถุ.
ฟังก์ชันการพิมพ์ JavaScript window.print()พิมพ์หน้าเว็บปัจจุบันเมื่อดำเนินการ คุณสามารถเรียกใช้ฟังก์ชันนี้ได้โดยตรงโดยใช้ไฟล์onclick เหตุการณ์ดังที่แสดงในตัวอย่างต่อไปนี้
ตัวอย่าง
ลองดูตัวอย่างต่อไปนี้
<html>
<head>
<script type = "text/javascript">
<!--
//-->
</script>
</head>
<body>
<form>
<input type = "button" value = "Print" onclick = "window.print()" />
</form>
</body>
<html>เอาต์พุต
แม้ว่าจะมีจุดประสงค์เพื่อรับงานพิมพ์ แต่ก็ไม่ใช่วิธีที่แนะนำ เพจที่เหมาะกับเครื่องพิมพ์เป็นเพียงหน้าที่มีข้อความไม่มีรูปภาพกราฟิกหรือโฆษณา
คุณสามารถทำให้เครื่องพิมพ์หน้าเป็นมิตรได้ด้วยวิธีต่อไปนี้ -
ทำสำเนาหน้าและเว้นข้อความและกราฟิกที่ไม่ต้องการจากนั้นเชื่อมโยงไปยังหน้าที่เป็นมิตรกับเครื่องพิมพ์นั้นจากต้นฉบับ ตรวจสอบตัวอย่าง
หากคุณไม่ต้องการเก็บสำเนาเพิ่มเติมของหน้าคุณสามารถทำเครื่องหมายข้อความที่พิมพ์ได้โดยใช้ความคิดเห็นที่เหมาะสมเช่น <! - PRINT STARTS HERE -> ..... <! - พิมพ์จบที่นี่ -> จากนั้นคุณสามารถใช้ PERL หรือสคริปต์อื่น ๆ ในพื้นหลังเพื่อล้างข้อความที่พิมพ์ได้และแสดงสำหรับการพิมพ์ขั้นสุดท้าย พวกเราที่ Tutorialspoint ใช้วิธีนี้เพื่อจัดหาสิ่งอำนวยความสะดวกในการพิมพ์แก่ผู้เยี่ยมชมเว็บไซต์ของเรา
จะพิมพ์หน้าได้อย่างไร?
หากคุณไม่พบสิ่งอำนวยความสะดวกข้างต้นบนหน้าเว็บคุณสามารถใช้แถบเครื่องมือมาตรฐานของเบราว์เซอร์เพื่อพิมพ์หน้าเว็บ ตามลิงค์ดังนี้
File → Print → Click OK button.JavaScript เป็นภาษา Object Oriented Programming (OOP) ภาษาโปรแกรมสามารถเรียกว่าเชิงวัตถุได้หากมีความสามารถพื้นฐานสี่ประการให้กับนักพัฒนา -
Encapsulation - ความสามารถในการจัดเก็บข้อมูลที่เกี่ยวข้องไม่ว่าจะเป็นข้อมูลหรือวิธีการรวมกันในวัตถุ
Aggregation - ความสามารถในการจัดเก็บวัตถุหนึ่งภายในวัตถุอื่น
Inheritance - ความสามารถของคลาสในการพึ่งพาคลาสอื่น (หรือจำนวนคลาส) สำหรับคุณสมบัติและวิธีการบางอย่าง
Polymorphism - ความสามารถในการเขียนฟังก์ชันหรือวิธีการเดียวที่ทำงานได้หลายวิธี
วัตถุประกอบด้วยแอตทริบิวต์ หากแอตทริบิวต์มีฟังก์ชันจะถือว่าเป็นวิธีการของวัตถุมิฉะนั้นแอตทริบิวต์จะถือเป็นคุณสมบัติ
คุณสมบัติของวัตถุ
คุณสมบัติของออบเจ็กต์สามารถเป็นข้อมูลพื้นฐานสามชนิดหรือประเภทข้อมูลนามธรรมใดก็ได้เช่นอ็อบเจ็กต์อื่น คุณสมบัติของออบเจ็กต์มักเป็นตัวแปรที่ใช้ภายในในเมธอดของอ็อบเจ็กต์ แต่ยังสามารถเป็นตัวแปรที่มองเห็นได้ทั่วทั้งเพจ
ไวยากรณ์สำหรับการเพิ่มคุณสมบัติให้กับวัตถุคือ -
objectName.objectProperty = propertyValue;For example - รหัสต่อไปนี้รับชื่อเอกสารโดยใช้ไฟล์ "title" คุณสมบัติของ document วัตถุ.
var str = document.title;วิธีการวัตถุ
วิธีการคือฟังก์ชันที่ปล่อยให้วัตถุทำบางสิ่งบางอย่างหรือปล่อยให้บางสิ่งทำกับมัน มีความแตกต่างเล็กน้อยระหว่างฟังก์ชันและวิธีการ - ที่ฟังก์ชันเป็นหน่วยของคำสั่งแบบสแตนด์อโลนและวิธีการแนบกับวัตถุและสามารถอ้างอิงได้โดยthis คำสำคัญ.
วิธีการมีประโยชน์สำหรับทุกอย่างตั้งแต่การแสดงเนื้อหาของวัตถุไปยังหน้าจอไปจนถึงการดำเนินการทางคณิตศาสตร์ที่ซับซ้อนในกลุ่มของคุณสมบัติและพารามิเตอร์ท้องถิ่น
For example - ต่อไปนี้เป็นตัวอย่างง่ายๆเพื่อแสดงวิธีใช้ไฟล์ write() วิธีการของวัตถุเอกสารเพื่อเขียนเนื้อหาใด ๆ บนเอกสาร
document.write("This is test");วัตถุที่ผู้ใช้กำหนด
อ็อบเจ็กต์ที่ผู้ใช้กำหนดเองและอ็อบเจ็กต์ในตัวทั้งหมดเป็นอ็อบเจ็กต์ที่เรียกว่า Object.
ตัวดำเนินการใหม่
newตัวดำเนินการใช้เพื่อสร้างอินสแตนซ์ของวัตถุ ในการสร้างวัตถุไฟล์new ตัวดำเนินการตามด้วยวิธีการสร้าง
ในตัวอย่างต่อไปนี้วิธีการสร้างคือ Object (), Array () และ Date () ตัวสร้างเหล่านี้เป็นฟังก์ชัน JavaScript ในตัว
var employee = new Object();
var books = new Array("C++", "Perl", "Java");
var day = new Date("August 15, 1947");ตัวสร้าง Object ()
ตัวสร้างคือฟังก์ชันที่สร้างและเตรียมข้อมูลเบื้องต้นให้กับวัตถุ JavaScript มีฟังก์ชันตัวสร้างพิเศษที่เรียกว่าObject()เพื่อสร้างวัตถุ ค่าส่งคืนของObject() ตัวสร้างถูกกำหนดให้กับตัวแปร
ตัวแปรมีการอ้างอิงไปยังวัตถุใหม่ คุณสมบัติที่กำหนดให้กับวัตถุไม่ใช่ตัวแปรและไม่ได้กำหนดด้วยvar คำสำคัญ.
ตัวอย่าง 1
ลองใช้ตัวอย่างต่อไปนี้ มันแสดงให้เห็นถึงวิธีการสร้างวัตถุ
<html>
<head>
<title>User-defined objects</title>
<script type = "text/javascript">
var book = new Object(); // Create the object
book.subject = "Perl"; // Assign properties to the object
book.author = "Mohtashim";
</script>
</head>
<body>
<script type = "text/javascript">
document.write("Book name is : " + book.subject + "<br>");
document.write("Book author is : " + book.author + "<br>");
</script>
</body>
</html>เอาต์พุต
Book name is : Perl
Book author is : Mohtashimตัวอย่าง 2
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการสร้างวัตถุด้วยฟังก์ชันที่ผู้ใช้กำหนดเอง ที่นี่this คีย์เวิร์ดใช้เพื่ออ้างถึงออบเจ็กต์ที่ถูกส่งผ่านไปยังฟังก์ชัน
<html>
<head>
<title>User-defined objects</title>
<script type = "text/javascript">
function book(title, author) {
this.title = title;
this.author = author;
}
</script>
</head>
<body>
<script type = "text/javascript">
var myBook = new book("Perl", "Mohtashim");
document.write("Book title is : " + myBook.title + "<br>");
document.write("Book author is : " + myBook.author + "<br>");
</script>
</body>
</html>เอาต์พุต
Book title is : Perl
Book author is : Mohtashimการกำหนดวิธีการสำหรับวัตถุ
ตัวอย่างก่อนหน้านี้แสดงให้เห็นว่าตัวสร้างสร้างวัตถุและกำหนดคุณสมบัติอย่างไร แต่เราจำเป็นต้องกำหนดนิยามของวัตถุให้สมบูรณ์โดยกำหนดวิธีการให้กับวัตถุนั้น
ตัวอย่าง
ลองใช้ตัวอย่างต่อไปนี้ จะแสดงวิธีการเพิ่มฟังก์ชันพร้อมกับวัตถุ
<html>
<head>
<title>User-defined objects</title>
<script type = "text/javascript">
// Define a function which will work as a method
function addPrice(amount) {
this.price = amount;
}
function book(title, author) {
this.title = title;
this.author = author;
this.addPrice = addPrice; // Assign that method as property.
}
</script>
</head>
<body>
<script type = "text/javascript">
var myBook = new book("Perl", "Mohtashim");
myBook.addPrice(100);
document.write("Book title is : " + myBook.title + "<br>");
document.write("Book author is : " + myBook.author + "<br>");
document.write("Book price is : " + myBook.price + "<br>");
</script>
</body>
</html>เอาต์พุต
Book title is : Perl
Book author is : Mohtashim
Book price is : 100คีย์เวิร์ด "with"
‘with’ คีย์เวิร์ดใช้เป็นชวเลขชนิดหนึ่งสำหรับอ้างอิงคุณสมบัติหรือวิธีการของอ็อบเจ็กต์
วัตถุที่ระบุเป็นอาร์กิวเมนต์ของ withกลายเป็นวัตถุเริ่มต้นสำหรับช่วงเวลาของบล็อกที่ตามมา คุณสมบัติและวิธีการสำหรับวัตถุสามารถใช้ได้โดยไม่ต้องตั้งชื่อวัตถุ
ไวยากรณ์
ไวยากรณ์สำหรับกับวัตถุมีดังนี้ -
with (object) {
properties used without the object name and dot
}ตัวอย่าง
ลองดูตัวอย่างต่อไปนี้
<html>
<head>
<title>User-defined objects</title>
<script type = "text/javascript">
// Define a function which will work as a method
function addPrice(amount) {
with(this) {
price = amount;
}
}
function book(title, author) {
this.title = title;
this.author = author;
this.price = 0;
this.addPrice = addPrice; // Assign that method as property.
}
</script>
</head>
<body>
<script type = "text/javascript">
var myBook = new book("Perl", "Mohtashim");
myBook.addPrice(100);
document.write("Book title is : " + myBook.title + "<br>");
document.write("Book author is : " + myBook.author + "<br>");
document.write("Book price is : " + myBook.price + "<br>");
</script>
</body>
</html>เอาต์พุต
Book title is : Perl
Book author is : Mohtashim
Book price is : 100JavaScript เนทีฟออบเจ็กต์
JavaScript มีออบเจ็กต์ในตัวหรือเนทีฟหลายตัว วัตถุเหล่านี้สามารถเข้าถึงได้ทุกที่ในโปรแกรมของคุณและจะทำงานในลักษณะเดียวกันในเบราว์เซอร์ใด ๆ ที่ทำงานในระบบปฏิบัติการใด ๆ
นี่คือรายการของ JavaScript Native Objects ที่สำคัญทั้งหมด -
JavaScript Number Object
วัตถุบูลีน JavaScript
วัตถุสตริง JavaScript
JavaScript Array Object
JavaScript Date Object
วัตถุคณิตศาสตร์ JavaScript
JavaScript RegExp Object
Numberออบเจ็กต์แสดงถึงวันที่ที่เป็นตัวเลขทั้งจำนวนเต็มหรือตัวเลขทศนิยม โดยทั่วไปคุณไม่จำเป็นต้องกังวลเกี่ยวกับNumber วัตถุเนื่องจากเบราว์เซอร์แปลงตัวอักษรตัวเลขเป็นอินสแตนซ์ของคลาสตัวเลขโดยอัตโนมัติ
ไวยากรณ์
ไวยากรณ์สำหรับการสร้างไฟล์ number วัตถุมีดังนี้ -
var val = new Number(number);ในตำแหน่งของตัวเลขหากคุณระบุอาร์กิวเมนต์ที่ไม่ใช่ตัวเลขอาร์กิวเมนต์จะไม่สามารถแปลงเป็นตัวเลขได้จะส่งกลับ NaN (Not-a-Number).
คุณสมบัติจำนวน
นี่คือรายการทรัพย์สินแต่ละรายการและคำอธิบาย
| ซีเนียร์ | คุณสมบัติและคำอธิบาย |
|---|---|
| 1 | MAX_VALUE ค่าที่มากที่สุดที่เป็นไปได้ที่ตัวเลขใน JavaScript สามารถมีได้ 1.7976931348623157E + 308 |
| 2 | MIN_VALUE ค่าที่น้อยที่สุดที่เป็นไปได้ที่ตัวเลขใน JavaScript สามารถมีได้ 5E-324 |
| 3 | NaN เท่ากับค่าที่ไม่ใช่ตัวเลข |
| 4 | NEGATIVE_INFINITY ค่าที่น้อยกว่า MIN_VALUE |
| 5 | POSITIVE_INFINITY ค่าที่มากกว่า MAX_VALUE |
| 6 | ต้นแบบ คุณสมบัติคงที่ของอ็อบเจ็กต์ Number ใช้คุณสมบัติต้นแบบเพื่อกำหนดคุณสมบัติและวิธีการใหม่ให้กับอ็อบเจ็กต์ Number ในเอกสารปัจจุบัน |
| 7 | constructor Returns the function that created this object's instance. By default this is the Number object. |
In the following sections, we will take a few examples to demonstrate the properties of Number.
Number Methods
The Number object contains only the default methods that are a part of every object's definition.
| Sr.No. | Method & Description |
|---|---|
| 1 | toExponential() Forces a number to display in exponential notation, even if the number is in the range in which JavaScript normally uses standard notation. |
| 2 | toFixed() Formats a number with a specific number of digits to the right of the decimal. |
| 3 | toLocaleString() Returns a string value version of the current number in a format that may vary according to a browser's local settings. |
| 4 | toPrecision() Defines how many total digits (including digits to the left and right of the decimal) to display of a number. |
| 5 | toString() Returns the string representation of the number's value. |
| 6 | valueOf() Returns the number's value. |
In the following sections, we will have a few examples to explain the methods of Number.
The Boolean object represents two values, either "true" or "false". If value parameter is omitted or is 0, -0, null, false, NaN, undefined, or the empty string (""), the object has an initial value of false.
Syntax
Use the following syntax to create a boolean object.
var val = new Boolean(value);Boolean Properties
Here is a list of the properties of Boolean object −
| Sr.No. | Property & Description |
|---|---|
| 1 | constructor Returns a reference to the Boolean function that created the object. |
| 2 | prototype The prototype property allows you to add properties and methods to an object. |
In the following sections, we will have a few examples to illustrate the properties of Boolean object.
Boolean Methods
Here is a list of the methods of Boolean object and their description.
| Sr.No. | Method & Description |
|---|---|
| 1 | toSource() Returns a string containing the source of the Boolean object; you can use this string to create an equivalent object. |
| 2 | toString() Returns a string of either "true" or "false" depending upon the value of the object. |
| 3 | valueOf() Returns the primitive value of the Boolean object. |
In the following sections, we will have a few examples to demonstrate the usage of the Boolean methods.
The String object lets you work with a series of characters; it wraps Javascript's string primitive data type with a number of helper methods.
As JavaScript automatically converts between string primitives and String objects, you can call any of the helper methods of the String object on a string primitive.
Syntax
Use the following syntax to create a String object −
var val = new String(string);The String parameter is a series of characters that has been properly encoded.
String Properties
Here is a list of the properties of String object and their description.
| Sr.No. | Property & Description |
|---|---|
| 1 | constructor Returns a reference to the String function that created the object. |
| 2 | length Returns the length of the string. |
| 3 | prototype The prototype property allows you to add properties and methods to an object. |
In the following sections, we will have a few examples to demonstrate the usage of String properties.
String Methods
Here is a list of the methods available in String object along with their description.
| Sr.No. | Method & Description |
|---|---|
| 1 | charAt() Returns the character at the specified index. |
| 2 | charCodeAt() Returns a number indicating the Unicode value of the character at the given index. |
| 3 | concat() Combines the text of two strings and returns a new string. |
| 4 | indexOf() Returns the index within the calling String object of the first occurrence of the specified value, or -1 if not found. |
| 5 | lastIndexOf() Returns the index within the calling String object of the last occurrence of the specified value, or -1 if not found. |
| 6 | localeCompare() Returns a number indicating whether a reference string comes before or after or is the same as the given string in sort order. |
| 7 | match() Used to match a regular expression against a string. |
| 8 | replace() Used to find a match between a regular expression and a string, and to replace the matched substring with a new substring. |
| 9 | search() Executes the search for a match between a regular expression and a specified string. |
| 10 | slice() Extracts a section of a string and returns a new string. |
| 11 | split() Splits a String object into an array of strings by separating the string into substrings. |
| 12 | substr() Returns the characters in a string beginning at the specified location through the specified number of characters. |
| 13 | substring() Returns the characters in a string between two indexes into the string. |
| 14 | toLocaleLowerCase() The characters within a string are converted to lower case while respecting the current locale. |
| 15 | toLocaleUpperCase() The characters within a string are converted to upper case while respecting the current locale. |
| 16 | toLowerCase() Returns the calling string value converted to lower case. |
| 17 | toString() Returns a string representing the specified object. |
| 18 | toUpperCase() Returns the calling string value converted to uppercase. |
| 19 | valueOf() Returns the primitive value of the specified object. |
String HTML Wrappers
Here is a list of the methods that return a copy of the string wrapped inside an appropriate HTML tag.
| Sr.No. | Method & Description |
|---|---|
| 1 | anchor() Creates an HTML anchor that is used as a hypertext target. |
| 2 | big() Creates a string to be displayed in a big font as if it were in a <big> tag. |
| 3 | blink() Creates a string to blink as if it were in a <blink> tag. |
| 4 | bold() Creates a string to be displayed as bold as if it were in a <b> tag. |
| 5 | fixed() Causes a string to be displayed in fixed-pitch font as if it were in a <tt> tag |
| 6 | fontcolor() Causes a string to be displayed in the specified color as if it were in a <font color="color"> tag. |
| 7 | fontsize() Causes a string to be displayed in the specified font size as if it were in a <font size="size"> tag. |
| 8 | italics() Causes a string to be italic, as if it were in an <i> tag. |
| 9 | link() Creates an HTML hypertext link that requests another URL. |
| 10 | small() Causes a string to be displayed in a small font, as if it were in a <small> tag. |
| 11 | strike() Causes a string to be displayed as struck-out text, as if it were in a <strike> tag. |
| 12 | sub() Causes a string to be displayed as a subscript, as if it were in a <sub> tag |
| 13 | sup() Causes a string to be displayed as a superscript, as if it were in a <sup> tag |
In the following sections, we will have a few examples to demonstrate the usage of String methods.
The Array object lets you store multiple values in a single variable. It stores a fixed-size sequential collection of elements of the same type. An array is used to store a collection of data, but it is often more useful to think of an array as a collection of variables of the same type.
Syntax
Use the following syntax to create an Array object −
var fruits = new Array( "apple", "orange", "mango" );The Array parameter is a list of strings or integers. When you specify a single numeric parameter with the Array constructor, you specify the initial length of the array. The maximum length allowed for an array is 4,294,967,295.
You can create array by simply assigning values as follows −
var fruits = [ "apple", "orange", "mango" ];You will use ordinal numbers to access and to set values inside an array as follows.
fruits[0] is the first element
fruits[1] is the second element
fruits[2] is the third elementArray Properties
Here is a list of the properties of the Array object along with their description.
| Sr.No. | Property & Description |
|---|---|
| 1 | constructor Returns a reference to the array function that created the object. |
| 2 | index The property represents the zero-based index of the match in the string |
| 3 | input This property is only present in arrays created by regular expression matches. |
| 4 | length Reflects the number of elements in an array. |
| 5 | prototype The prototype property allows you to add properties and methods to an object. |
In the following sections, we will have a few examples to illustrate the usage of Array properties.
Array Methods
Here is a list of the methods of the Array object along with their description.
| Sr.No. | Method & Description |
|---|---|
| 1 | concat() Returns a new array comprised of this array joined with other array(s) and/or value(s). |
| 2 | every() Returns true if every element in this array satisfies the provided testing function. |
| 3 | filter() Creates a new array with all of the elements of this array for which the provided filtering function returns true. |
| 4 | forEach() Calls a function for each element in the array. |
| 5 | indexOf() Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found. |
| 6 | join() Joins all elements of an array into a string. |
| 7 | lastIndexOf() Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found. |
| 8 | map() Creates a new array with the results of calling a provided function on every element in this array. |
| 9 | pop() Removes the last element from an array and returns that element. |
| 10 | push() Adds one or more elements to the end of an array and returns the new length of the array. |
| 11 | reduce() Apply a function simultaneously against two values of the array (from left-to-right) as to reduce it to a single value. |
| 12 | reduceRight() Apply a function simultaneously against two values of the array (from right-to-left) as to reduce it to a single value. |
| 13 | reverse() Reverses the order of the elements of an array -- the first becomes the last, and the last becomes the first. |
| 14 | shift() Removes the first element from an array and returns that element. |
| 15 | slice() Extracts a section of an array and returns a new array. |
| 16 | some() Returns true if at least one element in this array satisfies the provided testing function. |
| 17 | toSource() Represents the source code of an object |
| 18 | sort() Sorts the elements of an array |
| 19 | splice() Adds and/or removes elements from an array. |
| 20 | toString() Returns a string representing the array and its elements. |
| 21 | unshift() Adds one or more elements to the front of an array and returns the new length of the array. |
In the following sections, we will have a few examples to demonstrate the usage of Array methods.
The Date object is a datatype built into the JavaScript language. Date objects are created with the new Date( ) as shown below.
Once a Date object is created, a number of methods allow you to operate on it. Most methods simply allow you to get and set the year, month, day, hour, minute, second, and millisecond fields of the object, using either local time or UTC (universal, or GMT) time.
The ECMAScript standard requires the Date object to be able to represent any date and time, to millisecond precision, within 100 million days before or after 1/1/1970. This is a range of plus or minus 273,785 years, so JavaScript can represent date and time till the year 275755.
Syntax
You can use any of the following syntaxes to create a Date object using Date() constructor.
new Date( )
new Date(milliseconds)
new Date(datestring)
new Date(year,month,date[,hour,minute,second,millisecond ])Note − Parameters in the brackets are always optional.
Here is a description of the parameters −
No Argument − With no arguments, the Date() constructor creates a Date object set to the current date and time.
milliseconds − When one numeric argument is passed, it is taken as the internal numeric representation of the date in milliseconds, as returned by the getTime() method. For example, passing the argument 5000 creates a date that represents five seconds past midnight on 1/1/70.
datestring − When one string argument is passed, it is a string representation of a date, in the format accepted by the Date.parse() method.
7 agruments − To use the last form of the constructor shown above. Here is a description of each argument −
year − Integer value representing the year. For compatibility (in order to avoid the Y2K problem), you should always specify the year in full; use 1998, rather than 98.
month − Integer value representing the month, beginning with 0 for January to 11 for December.
date − Integer value representing the day of the month.
hour − Integer value representing the hour of the day (24-hour scale).
minute − Integer value representing the minute segment of a time reading.
second − Integer value representing the second segment of a time reading.
millisecond − Integer value representing the millisecond segment of a time reading.
Date Properties
Here is a list of the properties of the Date object along with their description.
| Sr.No. | Property & Description |
|---|---|
| 1 | constructor Specifies the function that creates an object's prototype. |
| 2 | prototype The prototype property allows you to add properties and methods to an object |
In the following sections, we will have a few examples to demonstrate the usage of different Date properties.
Date Methods
Here is a list of the methods used with Date and their description.
| Sr.No. | Method & Description |
|---|---|
| 1 | Date() Returns today's date and time |
| 2 | getDate() Returns the day of the month for the specified date according to local time. |
| 3 | getDay() Returns the day of the week for the specified date according to local time. |
| 4 | getFullYear() Returns the year of the specified date according to local time. |
| 5 | getHours() Returns the hour in the specified date according to local time. |
| 6 | getMilliseconds() Returns the milliseconds in the specified date according to local time. |
| 7 | getMinutes() Returns the minutes in the specified date according to local time. |
| 8 | getMonth() Returns the month in the specified date according to local time. |
| 9 | getSeconds() Returns the seconds in the specified date according to local time. |
| 10 | getTime() Returns the numeric value of the specified date as the number of milliseconds since January 1, 1970, 00:00:00 UTC. |
| 11 | getTimezoneOffset() Returns the time-zone offset in minutes for the current locale. |
| 12 | getUTCDate() Returns the day (date) of the month in the specified date according to universal time. |
| 13 | getUTCDay() Returns the day of the week in the specified date according to universal time. |
| 14 | getUTCFullYear() Returns the year in the specified date according to universal time. |
| 15 | getUTCHours() Returns the hours in the specified date according to universal time. |
| 16 | getUTCMilliseconds() Returns the milliseconds in the specified date according to universal time. |
| 17 | getUTCMinutes() Returns the minutes in the specified date according to universal time. |
| 18 | getUTCMonth() Returns the month in the specified date according to universal time. |
| 19 | getUTCSeconds() Returns the seconds in the specified date according to universal time. |
| 20 | getYear() Deprecated - Returns the year in the specified date according to local time. Use getFullYear instead. |
| 21 | setDate() Sets the day of the month for a specified date according to local time. |
| 22 | setFullYear() Sets the full year for a specified date according to local time. |
| 23 | setHours() Sets the hours for a specified date according to local time. |
| 24 | setMilliseconds() Sets the milliseconds for a specified date according to local time. |
| 25 | setMinutes() Sets the minutes for a specified date according to local time. |
| 26 | setMonth() Sets the month for a specified date according to local time. |
| 27 | setSeconds() Sets the seconds for a specified date according to local time. |
| 28 | setTime() Sets the Date object to the time represented by a number of milliseconds since January 1, 1970, 00:00:00 UTC. |
| 29 | setUTCDate() Sets the day of the month for a specified date according to universal time. |
| 30 | setUTCFullYear() Sets the full year for a specified date according to universal time. |
| 31 | setUTCHours() Sets the hour for a specified date according to universal time. |
| 32 | setUTCMilliseconds() Sets the milliseconds for a specified date according to universal time. |
| 33 | setUTCMinutes() Sets the minutes for a specified date according to universal time. |
| 34 | setUTCMonth() Sets the month for a specified date according to universal time. |
| 35 | setUTCSeconds() Sets the seconds for a specified date according to universal time. |
| 36 | setYear() Deprecated - Sets the year for a specified date according to local time. Use setFullYear instead. |
| 37 | toDateString() Returns the "date" portion of the Date as a human-readable string. |
| 38 | toGMTString() Deprecated - Converts a date to a string, using the Internet GMT conventions. Use toUTCString instead. |
| 39 | toLocaleDateString() Returns the "date" portion of the Date as a string, using the current locale's conventions. |
| 40 | toLocaleFormat() Converts a date to a string, using a format string. |
| 41 | toLocaleString() Converts a date to a string, using the current locale's conventions. |
| 42 | toLocaleTimeString() Returns the "time" portion of the Date as a string, using the current locale's conventions. |
| 43 | toSource() Returns a string representing the source for an equivalent Date object; you can use this value to create a new object. |
| 44 | toString() Returns a string representing the specified Date object. |
| 45 | toTimeString() Returns the "time" portion of the Date as a human-readable string. |
| 46 | toUTCString() Converts a date to a string, using the universal time convention. |
| 47 | valueOf() Returns the primitive value of a Date object. |
Converts a date to a string, using the universal time convention.
Date Static Methods
In addition to the many instance methods listed previously, the Date object also defines two static methods. These methods are invoked through the Date() constructor itself.
| Sr.No. | Method & Description |
|---|---|
| 1 | Date.parse( ) Parses a string representation of a date and time and returns the internal millisecond representation of that date. |
| 2 | Date.UTC( ) Returns the millisecond representation of the specified UTC date and time. |
In the following sections, we will have a few examples to demonstrate the usages of Date Static methods.
The math object provides you properties and methods for mathematical constants and functions. Unlike other global objects, Math is not a constructor. All the properties and methods of Math are static and can be called by using Math as an object without creating it.
Thus, you refer to the constant pi as Math.PI and you call the sine function as Math.sin(x), where x is the method's argument.
Syntax
The syntax to call the properties and methods of Math are as follows
var pi_val = Math.PI;
var sine_val = Math.sin(30);Math Properties
Here is a list of all the properties of Math and their description.
| Sr.No. | Property & Description |
|---|---|
| 1 | E \ Euler's constant and the base of natural logarithms, approximately 2.718. |
| 2 | LN2 Natural logarithm of 2, approximately 0.693. |
| 3 | LN10 Natural logarithm of 10, approximately 2.302. |
| 4 | LOG2E Base 2 logarithm of E, approximately 1.442. |
| 5 | LOG10E Base 10 logarithm of E, approximately 0.434. |
| 6 | PI Ratio of the circumference of a circle to its diameter, approximately 3.14159. |
| 7 | SQRT1_2 Square root of 1/2; equivalently, 1 over the square root of 2, approximately 0.707. |
| 8 | SQRT2 Square root of 2, approximately 1.414. |
In the following sections, we will have a few examples to demonstrate the usage of Math properties.
Math Methods
Here is a list of the methods associated with Math object and their description
| Sr.No. | Method & Description |
|---|---|
| 1 | abs() Returns the absolute value of a number. |
| 2 | acos() Returns the arccosine (in radians) of a number. |
| 3 | asin() Returns the arcsine (in radians) of a number. |
| 4 | atan() Returns the arctangent (in radians) of a number. |
| 5 | atan2() Returns the arctangent of the quotient of its arguments. |
| 6 | ceil() Returns the smallest integer greater than or equal to a number. |
| 7 | cos() Returns the cosine of a number. |
| 8 | exp() Returns EN, where N is the argument, and E is Euler's constant, the base of the natural logarithm. |
| 9 | floor() Returns the largest integer less than or equal to a number. |
| 10 | log() Returns the natural logarithm (base E) of a number. |
| 11 | max() Returns the largest of zero or more numbers. |
| 12 | min() Returns the smallest of zero or more numbers. |
| 13 | pow() Returns base to the exponent power, that is, base exponent. |
| 14 | random() Returns a pseudo-random number between 0 and 1. |
| 15 | round() Returns the value of a number rounded to the nearest integer. |
| 16 | sin() Returns the sine of a number. |
| 17 | sqrt() Returns the square root of a number. |
| 18 | tan() Returns the tangent of a number. |
| 19 | toSource() Returns the string "Math". |
ในส่วนต่อไปนี้เราจะมีตัวอย่างบางส่วนเพื่อสาธิตการใช้วิธีการที่เกี่ยวข้องกับคณิตศาสตร์
นิพจน์ทั่วไปคือวัตถุที่อธิบายถึงรูปแบบของอักขระ
JavaScript RegExp คลาสแสดงถึงนิพจน์ทั่วไปและทั้ง String และ RegExp กำหนดวิธีการที่ใช้นิพจน์ทั่วไปเพื่อดำเนินการฟังก์ชันการจับคู่รูปแบบและการค้นหาและแทนที่ที่มีประสิทธิภาพบนข้อความ
ไวยากรณ์
นิพจน์ทั่วไปสามารถกำหนดได้ด้วย RegExp () ผู้สร้างดังต่อไปนี้ -
var pattern = new RegExp(pattern, attributes);
or simply
var pattern = /pattern/attributes;นี่คือคำอธิบายของพารามิเตอร์ -
pattern - สตริงที่ระบุรูปแบบของนิพจน์ทั่วไปหรือนิพจน์ทั่วไปอื่น
attributes - สตริงที่เป็นทางเลือกที่มีแอตทริบิวต์ "g", "i" และ "m" ซึ่งระบุการจับคู่แบบโกลบอลไม่คำนึงถึงตัวพิมพ์เล็กและใหญ่และหลายบรรทัดตามลำดับ
วงเล็บ
วงเล็บ ([]) มีความหมายพิเศษเมื่อใช้ในบริบทของนิพจน์ทั่วไป ใช้เพื่อค้นหาช่วงของอักขระ
| ซีเนียร์ | นิพจน์และคำอธิบาย |
|---|---|
| 1 | [...] อักขระใดตัวหนึ่งระหว่างวงเล็บ |
| 2 | [^...] อักขระใดตัวหนึ่งที่ไม่อยู่ระหว่างวงเล็บ |
| 3 | [0-9] ตรงกับตัวเลขทศนิยมใด ๆ ตั้งแต่ 0 ถึง 9 |
| 4 | [a-z] จับคู่อักขระใดก็ได้จากตัวพิมพ์เล็ก a ผ่านตัวพิมพ์เล็ก z. |
| 5 | [A-Z] ตรงกับอักขระใด ๆ จากตัวพิมพ์ใหญ่ A ผ่านตัวพิมพ์ใหญ่ Z. |
| 6 | [a-Z] จับคู่อักขระใดก็ได้จากตัวพิมพ์เล็ก a ผ่านตัวพิมพ์ใหญ่ Z. |
ช่วงที่แสดงด้านบนเป็นช่วงทั่วไป คุณยังสามารถใช้ช่วง [0-3] เพื่อจับคู่เลขฐานสิบตั้งแต่ 0 ถึง 3 หรือช่วง [bv] เพื่อจับคู่อักขระตัวพิมพ์เล็กที่มีตั้งแต่b ผ่าน v.
Quantifiers
ความถี่หรือตำแหน่งของลำดับอักขระในวงเล็บและอักขระเดี่ยวสามารถแสดงได้ด้วยอักขระพิเศษ อักขระพิเศษแต่ละตัวมีความหมายแฝงเฉพาะ แฟล็ก +, *,? และ $ ทั้งหมดเป็นไปตามลำดับอักขระ
| ซีเนียร์ | นิพจน์และคำอธิบาย |
|---|---|
| 1 | p+ ตรงกับสตริงใด ๆ ที่มี p อย่างน้อยหนึ่งตัว |
| 2 | p* ตรงกับสตริงใด ๆ ที่มีค่า p หรือมากกว่า |
| 3 | p? ตรงกับสตริงที่มีมากที่สุดหนึ่ง p |
| 4 | p{N} ตรงกับสตริงที่มีลำดับของ N พี |
| 5 | p{2,3} ตรงกับสตริงใด ๆ ที่มีลำดับของสองหรือสาม p |
| 6 | p{2, } ตรงกับสตริงใด ๆ ที่มีลำดับอย่างน้อยสอง p |
| 7 | p$ มันจับคู่สตริงใด ๆ ที่มี p ต่อท้าย |
| 8 | ^p มันจับคู่สตริงใด ๆ กับ p ที่จุดเริ่มต้นของมัน |
ตัวอย่าง
ตัวอย่างต่อไปนี้อธิบายเพิ่มเติมเกี่ยวกับอักขระที่ตรงกัน
| ซีเนียร์ | นิพจน์และคำอธิบาย |
|---|---|
| 1 | [^a-zA-Z] ตรงกับสตริงที่ไม่มีอักขระใด ๆ ตั้งแต่ a ผ่าน z และ A ผ่าน Z. |
| 2 | p.p ตรงกับสตริงที่มี p, ตามด้วยอักขระใด ๆ แล้วตามด้วยตัวอื่น p. |
| 3 | ^.{2}$ ตรงกับสตริงที่มีอักขระสองตัว |
| 4 | <b>(.*)</b> ตรงกับสตริงใด ๆ ที่อยู่ภายใน <b> และ </b> |
| 5 | p(hp)* ตรงกับสตริงใด ๆ ที่มี p ตามด้วยศูนย์หรือมากกว่าของลำดับ hp. |
อักขระตามตัวอักษร
| ซีเนียร์ | ตัวละครและคำอธิบาย |
|---|---|
| 1 | Alphanumeric ตัวเอง |
| 2 | \0 อักขระ NUL (\ u0000) |
| 3 | \t แท็บ (\ u0009 |
| 4 | \n ขึ้นบรรทัดใหม่ (\ u000A) |
| 5 | \v แท็บแนวตั้ง (\ u000B) |
| 6 | \f ฟีดฟอร์ม (\ u000C) |
| 7 | \r การคืนรถ (\ u000D) |
| 8 | \xnn อักขระละตินที่ระบุโดยเลขฐานสิบหก nn; ตัวอย่างเช่น \ x0A เหมือนกับ \ n |
| 9 | \uxxxx อักขระ Unicode ที่ระบุโดยเลขฐานสิบหก xxxx; ตัวอย่างเช่น \ u0009 เหมือนกับ \ t |
| 10 | \cX อักขระควบคุม ^ X; ตัวอย่างเช่น \ cJ เทียบเท่ากับอักขระขึ้นบรรทัดใหม่ \ n |
Metacharacters
อักขระเมตาเป็นเพียงอักขระตามตัวอักษรที่นำหน้าด้วยแบ็กสแลชซึ่งทำหน้าที่ให้ความหมายพิเศษรวมกัน
ตัวอย่างเช่นคุณสามารถค้นหาเงินจำนวนมากโดยใช้อักขระ '\ d': /([\d]+)000/, ที่นี่ \d จะค้นหาสตริงของอักขระตัวเลข
ตารางต่อไปนี้แสดงชุดของอักขระเมตาซึ่งสามารถใช้ได้ใน PERL Style Regular Expressions
| ซีเนียร์ | ตัวละครและคำอธิบาย |
|---|---|
| 1 | . อักขระเดี่ยว |
| 2 | \s อักขระเว้นวรรค (ช่องว่างแท็บขึ้นบรรทัดใหม่) |
| 3 | \S อักขระที่ไม่ใช่ช่องว่าง |
| 4 | \d ตัวเลข (0-9) |
| 5 | \D ไม่ใช่ตัวเลข |
| 6 | \w อักขระคำ (az, AZ, 0-9, _) |
| 7 | \W อักขระที่ไม่ใช่คำ |
| 8 | [\b] backspace ตามตัวอักษร (กรณีพิเศษ) |
| 9 | [aeiou] จับคู่อักขระเดี่ยวในชุดที่กำหนด |
| 10 | [^aeiou] จับคู่อักขระเดี่ยวนอกชุดที่กำหนด |
| 11 | (foo|bar|baz) ตรงกับทางเลือกใด ๆ ที่ระบุ |
ตัวปรับเปลี่ยน
มีตัวปรับแต่งหลายตัวที่สามารถทำให้วิธีการทำงานของคุณง่ายขึ้น regexps, เช่นความไวของตัวพิมพ์เล็กค้นหาในหลายบรรทัด ฯลฯ
| ซีเนียร์ | ตัวปรับแต่งและคำอธิบาย |
|---|---|
| 1 | i ทำการจับคู่แบบไม่คำนึงถึงขนาดตัวพิมพ์ |
| 2 | m ระบุว่าหากสตริงมีอักขระขึ้นบรรทัดใหม่หรืออักขระส่งคืนค่าขนส่งตอนนี้ตัวดำเนินการ ^ และ $ จะจับคู่กับขอบเขตขึ้นบรรทัดใหม่แทนที่จะเป็นขอบเขตสตริง |
| 3 | g ทำการแข่งขันทั่วโลกนั่นคือค้นหาการแข่งขันทั้งหมดแทนที่จะหยุดหลังจากการแข่งขันครั้งแรก |
คุณสมบัติ RegExp
นี่คือรายการคุณสมบัติที่เกี่ยวข้องกับ RegExp และคำอธิบาย
| ซีเนียร์ | คุณสมบัติและคำอธิบาย |
|---|---|
| 1 | constructor Specifies the function that creates an object's prototype. |
| 2 | global Specifies if the "g" modifier is set. |
| 3 | ignoreCase Specifies if the "i" modifier is set. |
| 4 | lastIndex The index at which to start the next match. |
| 5 | multiline Specifies if the "m" modifier is set. |
| 6 | source The text of the pattern. |
In the following sections, we will have a few examples to demonstrate the usage of RegExp properties.
RegExp Methods
Here is a list of the methods associated with RegExp along with their description.
| Sr.No. | Method & Description |
|---|---|
| 1 | exec() Executes a search for a match in its string parameter. |
| 2 | test() Tests for a match in its string parameter. |
| 3 | toSource() Returns an object literal representing the specified object; you can use this value to create a new object. |
| 4 | toString() Returns a string representing the specified object. |
In the following sections, we will have a few examples to demonstrate the usage of RegExp methods.
Every web page resides inside a browser window which can be considered as an object.
A Document object represents the HTML document that is displayed in that window. The Document object has various properties that refer to other objects which allow access to and modification of document content.
The way a document content is accessed and modified is called the Document Object Model, or DOM. The Objects are organized in a hierarchy. This hierarchical structure applies to the organization of objects in a Web document.
Window object − Top of the hierarchy. It is the outmost element of the object hierarchy.
Document object − Each HTML document that gets loaded into a window becomes a document object. The document contains the contents of the page.
Form object − Everything enclosed in the <form>...</form> tags sets the form object.
Form control elements − The form object contains all the elements defined for that object such as text fields, buttons, radio buttons, and checkboxes.
Here is a simple hierarchy of a few important objects −
There are several DOMs in existence. The following sections explain each of these DOMs in detail and describe how you can use them to access and modify document content.
The Legacy DOM − This is the model which was introduced in early versions of JavaScript language. It is well supported by all browsers, but allows access only to certain key portions of documents, such as forms, form elements, and images.
The W3C DOM − This document object model allows access and modification of all document content and is standardized by the World Wide Web Consortium (W3C). This model is supported by almost all the modern browsers.
The IE4 DOM − This document object model was introduced in Version 4 of Microsoft's Internet Explorer browser. IE 5 and later versions include support for most basic W3C DOM features.
DOM compatibility
If you want to write a script with the flexibility to use either W3C DOM or IE 4 DOM depending on their availability, then you can use a capability-testing approach that first checks for the existence of a method or property to determine whether the browser has the capability you desire. For example −
if (document.getElementById) {
// If the W3C method exists, use it
} else if (document.all) {
// If the all[] array exists, use it
} else {
// Otherwise use the legacy DOM
}There are three types of errors in programming: (a) Syntax Errors, (b) Runtime Errors, and (c) Logical Errors.
Syntax Errors
Syntax errors, also called parsing errors, occur at compile time in traditional programming languages and at interpret time in JavaScript.
For example, the following line causes a syntax error because it is missing a closing parenthesis.
<script type = "text/javascript">
<!--
window.print(;
//-->
</script>When a syntax error occurs in JavaScript, only the code contained within the same thread as the syntax error is affected and the rest of the code in other threads gets executed assuming nothing in them depends on the code containing the error.
Runtime Errors
Runtime errors, also called exceptions, occur during execution (after compilation/interpretation).
For example, the following line causes a runtime error because here the syntax is correct, but at runtime, it is trying to call a method that does not exist.
<script type = "text/javascript">
<!--
window.printme();
//-->
</script>Exceptions also affect the thread in which they occur, allowing other JavaScript threads to continue normal execution.
Logical Errors
Logic errors can be the most difficult type of errors to track down. These errors are not the result of a syntax or runtime error. Instead, they occur when you make a mistake in the logic that drives your script and you do not get the result you expected.
You cannot catch those errors, because it depends on your business requirement what type of logic you want to put in your program.
The try...catch...finally Statement
The latest versions of JavaScript added exception handling capabilities. JavaScript implements the try...catch...finally construct as well as the throw operator to handle exceptions.
You can catch programmer-generated and runtime exceptions, but you cannot catch JavaScript syntax errors.
Here is the try...catch...finally block syntax −
<script type = "text/javascript">
<!--
try {
// Code to run
[break;]
}
catch ( e ) {
// Code to run if an exception occurs
[break;]
}
[ finally {
// Code that is always executed regardless of
// an exception occurring
}]
//-->
</script>The try block must be followed by either exactly one catch block or one finally block (or one of both). When an exception occurs in the try block, the exception is placed in e and the catch block is executed. The optional finally block executes unconditionally after try/catch.
Examples
Here is an example where we are trying to call a non-existing function which in turn is raising an exception. Let us see how it behaves without try...catch−
<html>
<head>
<script type = "text/javascript">
<!--
function myFunc() {
var a = 100;
alert("Value of variable a is : " + a );
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type = "button" value = "Click Me" onclick = "myFunc();" />
</form>
</body>
</html>Output
Now let us try to catch this exception using try...catch and display a user-friendly message. You can also suppress this message, if you want to hide this error from a user.
<html>
<head>
<script type = "text/javascript">
<!--
function myFunc() {
var a = 100;
try {
alert("Value of variable a is : " + a );
}
catch ( e ) {
alert("Error: " + e.description );
}
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type = "button" value = "Click Me" onclick = "myFunc();" />
</form>
</body>
</html>Output
You can use finally block which will always execute unconditionally after the try/catch. Here is an example.
<html>
<head>
<script type = "text/javascript">
<!--
function myFunc() {
var a = 100;
try {
alert("Value of variable a is : " + a );
}
catch ( e ) {
alert("Error: " + e.description );
}
finally {
alert("Finally block will always execute!" );
}
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type = "button" value = "Click Me" onclick = "myFunc();" />
</form>
</body>
</html>Output
The throw Statement
You can use throw statement to raise your built-in exceptions or your customized exceptions. Later these exceptions can be captured and you can take an appropriate action.
Example
The following example demonstrates how to use a throw statement.
<html>
<head>
<script type = "text/javascript">
<!--
function myFunc() {
var a = 100;
var b = 0;
try {
if ( b == 0 ) {
throw( "Divide by zero error." );
} else {
var c = a / b;
}
}
catch ( e ) {
alert("Error: " + e );
}
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type = "button" value = "Click Me" onclick = "myFunc();" />
</form>
</body>
</html>Output
You can raise an exception in one function using a string, integer, Boolean, or an object and then you can capture that exception either in the same function as we did above, or in another function using a try...catch block.
The onerror() Method
The onerror event handler was the first feature to facilitate error handling in JavaScript. The error event is fired on the window object whenever an exception occurs on the page.
<html>
<head>
<script type = "text/javascript">
<!--
window.onerror = function () {
alert("An error occurred.");
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type = "button" value = "Click Me" onclick = "myFunc();" />
</form>
</body>
</html>Output
The onerror event handler provides three pieces of information to identify the exact nature of the error −
Error message − The same message that the browser would display for the given error
URL − The file in which the error occurred
Line number− The line number in the given URL that caused the error
Here is the example to show how to extract this information.
Example
<html>
<head>
<script type = "text/javascript">
<!--
window.onerror = function (msg, url, line) {
alert("Message : " + msg );
alert("url : " + url );
alert("Line number : " + line );
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type = "button" value = "Click Me" onclick = "myFunc();" />
</form>
</body>
</html>Output
You can display extracted information in whatever way you think it is better.
You can use an onerror method, as shown below, to display an error message in case there is any problem in loading an image.
<img src="myimage.gif" onerror="alert('An error occurred loading the image.')" />You can use onerror with many HTML tags to display appropriate messages in case of errors.
Form validation normally used to occur at the server, after the client had entered all the necessary data and then pressed the Submit button. If the data entered by a client was incorrect or was simply missing, the server would have to send all the data back to the client and request that the form be resubmitted with correct information. This was really a lengthy process which used to put a lot of burden on the server.
JavaScript provides a way to validate form's data on the client's computer before sending it to the web server. Form validation generally performs two functions.
Basic Validation − First of all, the form must be checked to make sure all the mandatory fields are filled in. It would require just a loop through each field in the form and check for data.
Data Format Validation − Secondly, the data that is entered must be checked for correct form and value. Your code must include appropriate logic to test correctness of data.
Example
We will take an example to understand the process of validation. Here is a simple form in html format.
<html>
<head>
<title>Form Validation</title>
<script type = "text/javascript">
<!--
// Form validation code will come here.
//-->
</script>
</head>
<body>
<form action = "/cgi-bin/test.cgi" name = "myForm" onsubmit = "return(validate());">
<table cellspacing = "2" cellpadding = "2" border = "1">
<tr>
<td align = "right">Name</td>
<td><input type = "text" name = "Name" /></td>
</tr>
<tr>
<td align = "right">EMail</td>
<td><input type = "text" name = "EMail" /></td>
</tr>
<tr>
<td align = "right">Zip Code</td>
<td><input type = "text" name = "Zip" /></td>
</tr>
<tr>
<td align = "right">Country</td>
<td>
<select name = "Country">
<option value = "-1" selected>[choose yours]</option>
<option value = "1">USA</option>
<option value = "2">UK</option>
<option value = "3">INDIA</option>
</select>
</td>
</tr>
<tr>
<td align = "right"></td>
<td><input type = "submit" value = "Submit" /></td>
</tr>
</table>
</form>
</body>
</html>Output
Basic Form Validation
First let us see how to do a basic form validation. In the above form, we are calling validate() to validate data when onsubmit event is occurring. The following code shows the implementation of this validate() function.
<script type = "text/javascript">
<!--
// Form validation code will come here.
function validate() {
if( document.myForm.Name.value == "" ) {
alert( "Please provide your name!" );
document.myForm.Name.focus() ;
return false;
}
if( document.myForm.EMail.value == "" ) {
alert( "Please provide your Email!" );
document.myForm.EMail.focus() ;
return false;
}
if( document.myForm.Zip.value == "" || isNaN( document.myForm.Zip.value ) ||
document.myForm.Zip.value.length != 5 ) {
alert( "Please provide a zip in the format #####." );
document.myForm.Zip.focus() ;
return false;
}
if( document.myForm.Country.value == "-1" ) {
alert( "Please provide your country!" );
return false;
}
return( true );
}
//-->
</script>Data Format Validation
Now we will see how we can validate our entered form data before submitting it to the web server.
The following example shows how to validate an entered email address. An email address must contain at least a ‘@’ sign and a dot (.). Also, the ‘@’ must not be the first character of the email address, and the last dot must at least be one character after the ‘@’ sign.
Example
Try the following code for email validation.
<script type = "text/javascript">
<!--
function validateEmail() {
var emailID = document.myForm.EMail.value;
atpos = emailID.indexOf("@");
dotpos = emailID.lastIndexOf(".");
if (atpos < 1 || ( dotpos - atpos < 2 )) {
alert("Please enter correct email ID")
document.myForm.EMail.focus() ;
return false;
}
return( true );
}
//-->
</script>You can use JavaScript to create a complex animation having, but not limited to, the following elements −
- Fireworks
- Fade Effect
- Roll-in or Roll-out
- Page-in or Page-out
- Object movements
You might be interested in existing JavaScript based animation library: Script.Aculo.us.
This tutorial provides a basic understanding of how to use JavaScript to create an animation.
JavaScript can be used to move a number of DOM elements (<img />, <div> or any other HTML element) around the page according to some sort of pattern determined by a logical equation or function.
JavaScript provides the following two functions to be frequently used in animation programs.
setTimeout( function, duration) − This function calls function after duration milliseconds from now.
setInterval(function, duration) − This function calls function after every duration milliseconds.
clearTimeout(setTimeout_variable) − This function calls clears any timer set by the setTimeout() functions.
JavaScript can also set a number of attributes of a DOM object including its position on the screen. You can set top and left attribute of an object to position it anywhere on the screen. Here is its syntax.
// Set distance from left edge of the screen.
object.style.left = distance in pixels or points;
or
// Set distance from top edge of the screen.
object.style.top = distance in pixels or points;Manual Animation
So let's implement one simple animation using DOM object properties and JavaScript functions as follows. The following list contains different DOM methods.
We are using the JavaScript function getElementById() to get a DOM object and then assigning it to a global variable imgObj.
We have defined an initialization function init() to initialize imgObj where we have set its position and left attributes.
We are calling initialization function at the time of window load.
Finally, we are calling moveRight() function to increase the left distance by 10 pixels. You could also set it to a negative value to move it to the left side.
Example
Try the following example.
<html>
<head>
<title>JavaScript Animation</title>
<script type = "text/javascript">
<!--
var imgObj = null;
function init() {
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight() {
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
}
window.onload = init;
//-->
</script>
</head>
<body>
<form>
<img id = "myImage" src = "/images/html.gif" />
<p>Click button below to move the image to right</p>
<input type = "button" value = "Click Me" onclick = "moveRight();" />
</form>
</body>
</html>Output
Automated Animation
In the above example, we saw how an image moves to right with every click. We can automate this process by using the JavaScript function setTimeout() as follows −
Here we have added more methods. So let's see what is new here −
The moveRight() function is calling setTimeout() function to set the position of imgObj.
We have added a new function stop() to clear the timer set by setTimeout() function and to set the object at its initial position.
Example
Try the following example code.
<html>
<head>
<title>JavaScript Animation</title>
<script type = "text/javascript">
<!--
var imgObj = null;
var animate ;
function init() {
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight() {
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
animate = setTimeout(moveRight,20); // call moveRight in 20msec
}
function stop() {
clearTimeout(animate);
imgObj.style.left = '0px';
}
window.onload = init;
//-->
</script>
</head>
<body>
<form>
<img id = "myImage" src = "/images/html.gif" />
<p>Click the buttons below to handle animation</p>
<input type = "button" value = "Start" onclick = "moveRight();" />
<input type = "button" value = "Stop" onclick = "stop();" />
</form>
</body>
</html>Rollover with a Mouse Event
Here is a simple example showing image rollover with a mouse event.
Let's see what we are using in the following example −
At the time of loading this page, the ‘if’ statement checks for the existence of the image object. If the image object is unavailable, this block will not be executed.
The Image() constructor creates and preloads a new image object called image1.
The src property is assigned the name of the external image file called /images/html.gif.
Similarly, we have created image2 object and assigned /images/http.gif in this object.
The # (hash mark) disables the link so that the browser does not try to go to a URL when clicked. This link is an image.
The onMouseOver event handler is triggered when the user's mouse moves onto the link, and the onMouseOut event handler is triggered when the user's mouse moves away from the link (image).
When the mouse moves over the image, the HTTP image changes from the first image to the second one. When the mouse is moved away from the image, the original image is displayed.
When the mouse is moved away from the link, the initial image html.gif will reappear on the screen.
<html>
<head>
<title>Rollover with a Mouse Events</title>
<script type = "text/javascript">
<!--
if(document.images) {
var image1 = new Image(); // Preload an image
image1.src = "/images/html.gif";
var image2 = new Image(); // Preload second image
image2.src = "/images/http.gif";
}
//-->
</script>
</head>
<body>
<p>Move your mouse over the image to see the result</p>
<a href = "#" onMouseOver = "document.myImage.src = image2.src;"
onMouseOut = "document.myImage.src = image1.src;">
<img name = "myImage" src = "/images/html.gif" />
</a>
</body>
</html>The JavaScript navigator object includes a child object called plugins. This object is an array, with one entry for each plug-in installed on the browser. The navigator.plugins object is supported only by Netscape, Firefox, and Mozilla only.
Example
Here is an example that shows how to list down all the plug-on installed in your browser −
<html>
<head>
<title>List of Plug-Ins</title>
</head>
<body>
<table border = "1">
<tr>
<th>Plug-in Name</th>
<th>Filename</th>
<th>Description</th>
</tr>
<script language = "JavaScript" type = "text/javascript">
for (i = 0; i<navigator.plugins.length; i++) {
document.write("<tr><td>");
document.write(navigator.plugins[i].name);
document.write("</td><td>");
document.write(navigator.plugins[i].filename);
document.write("</td><td>");
document.write(navigator.plugins[i].description);
document.write("</td></tr>");
}
</script>
</table>
</body>
</html>Output
Checking for Plug-Ins
Each plug-in has an entry in the array. Each entry has the following properties −
name − is the name of the plug-in.
filename − is the executable file that was loaded to install the plug-in.
description − is a description of the plug-in, supplied by the developer.
mimeTypes − is an array with one entry for each MIME type supported by the plug-in.
You can use these properties in a script to find out the installed plug-ins, and then using JavaScript, you can play appropriate multimedia file. Take a look at the following example.
<html>
<head>
<title>Using Plug-Ins</title>
</head>
<body>
<script language = "JavaScript" type = "text/javascript">
media = navigator.mimeTypes["video/quicktime"];
if (media) {
document.write("<embed src = 'quick.mov' height = 100 width = 100>");
} else {
document.write("<img src = 'quick.gif' height = 100 width = 100>");
}
</script>
</body>
</html>Output
NOTE − Here we are using HTML <embed> tag to embed a multimedia file.
Controlling Multimedia
Let us take one real example which works in almost all the browsers −
<html>
<head>
<title>Using Embeded Object</title>
<script type = "text/javascript">
<!--
function play() {
if (!document.demo.IsPlaying()) {
document.demo.Play();
}
}
function stop() {
if (document.demo.IsPlaying()) {
document.demo.StopPlay();
}
}
function rewind() {
if (document.demo.IsPlaying()) {
document.demo.StopPlay();
}
document.demo.Rewind();
}
//-->
</script>
</head>
<body>
<embed id = "demo" name = "demo"
src = "http://www.amrood.com/games/kumite.swf"
width = "318" height = "300" play = "false" loop = "false"
pluginspage = "http://www.macromedia.com/go/getflashplayer"
swliveconnect = "true">
<form name = "form" id = "form" action = "#" method = "get">
<input type = "button" value = "Start" onclick = "play();" />
<input type = "button" value = "Stop" onclick = "stop();" />
<input type = "button" value = "Rewind" onclick = "rewind();" />
</form>
</body>
</html>Output
If you are using Mozilla, Firefox or Netscape, then
Every now and then, developers commit mistakes while coding. A mistake in a program or a script is referred to as a bug.
The process of finding and fixing bugs is called debugging and is a normal part of the development process. This section covers tools and techniques that can help you with debugging tasks..
Error Messages in IE
The most basic way to track down errors is by turning on error information in your browser. By default, Internet Explorer shows an error icon in the status bar when an error occurs on the page.
Double-clicking this icon takes you to a dialog box showing information about the specific error that occurred.
Since this icon is easy to overlook, Internet Explorer gives you the option to automatically show the Error dialog box whenever an error occurs.
To enable this option, select Tools → Internet Options → Advanced tab. and then finally check the "Display a Notification About Every Script Error" box option as shown below −
Error Messages in Firefox or Mozilla
Other browsers like Firefox, Netscape, and Mozilla send error messages to a special window called the JavaScript Console or Error Consol. To view the console, select Tools → Error Consol or Web Development.
Unfortunately, since these browsers give no visual indication when an error occurs, you must keep the Console open and watch for errors as your script executes.
Error Notifications
Error notifications that show up on Console or through Internet Explorer dialog boxes are the result of both syntax and runtime errors. These error notification include the line number at which the error occurred.
If you are using Firefox, then you can click on the error available in the error console to go to the exact line in the script having error.
How to debug a Script
There are various ways to debug your JavaScript −
Use a JavaScript Validator
One way to check your JavaScript code for strange bugs is to run it through a program that checks it to make sure it is valid and that it follows the official syntax rules of the language. These programs are called validating parsers or just validators for short, and often come with commercial HTML and JavaScript editors.
The most convenient validator for JavaScript is Douglas Crockford's JavaScript Lint, which is available for free at Douglas Crockford's JavaScript Lint.
Simply visit that web page, paste your JavaScript (Only JavaScript) code into the text area provided, and click the jslint button. This program will parse through your JavaScript code, ensuring that all the variable and function definitions follow the correct syntax. It will also check JavaScript statements, such as if and while, to ensure they too follow the correct format
Add Debugging Code to Your Programs
You can use the alert() or document.write() methods in your program to debug your code. For example, you might write something as follows −
var debugging = true;
var whichImage = "widget";
if( debugging )
alert( "Calls swapImage() with argument: " + whichImage );
var swapStatus = swapImage( whichImage );
if( debugging )
alert( "Exits swapImage() with swapStatus=" + swapStatus );By examining the content and order of the alert() as they appear, you can examine the health of your program very easily.
Use a JavaScript Debugger
A debugger is an application that places all aspects of script execution under the control of the programmer. Debuggers provide fine-grained control over the state of the script through an interface that allows you to examine and set values as well as control the flow of execution.
Once a script has been loaded into a debugger, it can be run one line at a time or instructed to halt at certain breakpoints. Once execution is halted, the programmer can examine the state of the script and its variables in order to determine if something is amiss. You can also watch variables for changes in their values.
The latest version of the Mozilla JavaScript Debugger (code-named Venkman) for both Mozilla and Netscape browsers can be downloaded at http://www.hacksrus.com/~ginda/venkman
Useful Tips for Developers
You can keep the following tips in mind to reduce the number of errors in your scripts and simplify the debugging process −
Use plenty of comments. Comments enable you to explain why you wrote the script the way you did and to explain particularly difficult sections of code.
Always use indentation to make your code easy to read. Indenting statements also makes it easier for you to match up beginning and ending tags, curly braces, and other HTML and script elements.
Write modular code. Whenever possible, group your statements into functions. Functions let you group related statements, and test and reuse portions of code with minimal effort.
Be consistent in the way you name your variables and functions. Try using names that are long enough to be meaningful and that describe the contents of the variable or the purpose of the function.
Use consistent syntax when naming variables and functions. In other words, keep them all lowercase or all uppercase; if you prefer Camel-Back notation, use it consistently.
Test long scripts in a modular fashion. In other words, do not try to write the entire script before testing any portion of it. Write a piece and get it to work before adding the next portion of code.
Use descriptive variable and function names and avoid using single-character names.
Watch your quotation marks. Remember that quotation marks are used in pairs around strings and that both quotation marks must be of the same style (either single or double).
Watch your equal signs. You should not used a single = for comparison purpose.
Declare variables explicitly using the var keyword.
You can use JavaScript to create client-side image map. Client-side image maps are enabled by the usemap attribute for the <img /> tag and defined by special <map> and <area> extension tags.
The image that is going to form the map is inserted into the page using the <img /> element as normal, except that it carries an extra attribute called usemap. The value of the usemap attribute is the value of the name attribute on the <map> element, which you are about to meet, preceded by a pound or hash sign.
The <map> element actually creates the map for the image and usually follows directly after the <img /> element. It acts as a container for the <area /> elements that actually define the clickable hotspots. The <map> element carries only one attribute, the name attribute, which is the name that identifies the map. This is how the <img /> element knows which <map> element to use.
The <area> element specifies the shape and the coordinates that define the boundaries of each clickable hotspot.
The following code combines imagemaps and JavaScript to produce a message in a text box when the mouse is moved over different parts of an image.
<html>
<head>
<title>Using JavaScript Image Map</title>
<script type = "text/javascript">
<!--
function showTutorial(name) {
document.myform.stage.value = name
}
//-->
</script>
</head>
<body>
<form name = "myform">
<input type = "text" name = "stage" size = "20" />
</form>
<!-- Create Mappings -->
<img src = "/images/usemap.gif" alt = "HTML Map" border = "0" usemap = "#tutorials"/>
<map name = "tutorials">
<area shape="poly"
coords = "74,0,113,29,98,72,52,72,38,27"
href = "/perl/index.htm" alt = "Perl Tutorial"
target = "_self"
onMouseOver = "showTutorial('perl')"
onMouseOut = "showTutorial('')"/>
<area shape = "rect"
coords = "22,83,126,125"
href = "/html/index.htm" alt = "HTML Tutorial"
target = "_self"
onMouseOver = "showTutorial('html')"
onMouseOut = "showTutorial('')"/>
<area shape = "circle"
coords = "73,168,32"
href = "/php/index.htm" alt = "PHP Tutorial"
target = "_self"
onMouseOver = "showTutorial('php')"
onMouseOut = "showTutorial('')"/>
</map>
</body>
</html>เอาต์พุต
คุณสามารถสัมผัสได้ถึงแนวคิดของแผนที่โดยวางเคอร์เซอร์ของเมาส์บนวัตถุรูปภาพ
สิ่งสำคัญคือต้องเข้าใจความแตกต่างระหว่างเบราว์เซอร์ต่างๆเพื่อจัดการกับเบราว์เซอร์แต่ละตัวในแบบที่คาดไว้ ดังนั้นจึงเป็นสิ่งสำคัญที่จะต้องทราบว่าหน้าเว็บของคุณกำลังทำงานในเบราว์เซอร์ใด
ในการรับข้อมูลเกี่ยวกับเบราว์เซอร์ที่หน้าเว็บของคุณกำลังทำงานอยู่ให้ใช้บิวท์อิน navigator วัตถุ.
คุณสมบัติเนวิเกเตอร์
มีคุณสมบัติที่เกี่ยวข้องกับ Navigator หลายอย่างที่คุณสามารถใช้ในเว็บเพจของคุณ ต่อไปนี้เป็นรายชื่อและคำอธิบายของแต่ละรายการ
| ซีเนียร์ | คุณสมบัติและคำอธิบาย |
|---|---|
| 1 | appCodeName คุณสมบัตินี้เป็นสตริงที่ประกอบด้วยชื่อรหัสของเบราว์เซอร์ Netscape สำหรับ Netscape และ Microsoft Internet Explorer สำหรับ Internet Explorer |
| 2 | appVersion คุณสมบัตินี้เป็นสตริงที่มีเวอร์ชันของเบราว์เซอร์ตลอดจนข้อมูลที่เป็นประโยชน์อื่น ๆ เช่นภาษาและความเข้ากันได้ |
| 3 | language คุณสมบัตินี้ประกอบด้วยตัวย่อสองตัวอักษรสำหรับภาษาที่เบราว์เซอร์ใช้ Netscape เท่านั้น |
| 4 | mimTypes[] คุณสมบัตินี้คืออาร์เรย์ที่มีชนิด MIME ทั้งหมดที่ไคลเอ็นต์สนับสนุน Netscape เท่านั้น |
| 5 | platform[] คุณสมบัตินี้เป็นสตริงที่มีแพลตฟอร์มที่เบราว์เซอร์ถูกคอมไพล์ "Win32" สำหรับระบบปฏิบัติการ Windows 32 บิต |
| 6 | plugins[] คุณสมบัตินี้คืออาร์เรย์ที่มีปลั๊กอินทั้งหมดที่ติดตั้งบนไคลเอนต์ Netscape เท่านั้น |
| 7 | userAgent[] คุณสมบัตินี้เป็นสตริงที่มีชื่อรหัสและเวอร์ชันของเบราว์เซอร์ ค่านี้ถูกส่งไปยังเซิร์ฟเวอร์ต้นทางเพื่อระบุไคลเอ็นต์ |
วิธีการนำทาง
มีวิธีการเฉพาะเนวิเกเตอร์หลายวิธี นี่คือรายชื่อและคำอธิบายของพวกเขา
| ซีเนียร์ | คำอธิบาย |
|---|---|
| 1 | javaEnabled() วิธีนี้พิจารณาว่าเปิดใช้งาน JavaScript ในไคลเอนต์หรือไม่ หากเปิดใช้งาน JavaScript วิธีนี้จะคืนค่าจริง มิฉะนั้นจะส่งกลับเท็จ |
| 2 | plugings.refresh วิธีนี้ทำให้ปลั๊กอินที่ติดตั้งใหม่พร้อมใช้งานและเติมข้อมูลอาร์เรย์ปลั๊กอินด้วยชื่อปลั๊กอินใหม่ทั้งหมด Netscape เท่านั้น |
| 3 | preference(name,value) วิธีนี้ช่วยให้สคริปต์ที่เซ็นชื่อรับและตั้งค่าการกำหนดลักษณะบางอย่างของ Netscape หากไม่ใส่พารามิเตอร์ที่สองเมธอดนี้จะส่งคืนค่าของการกำหนดค่าตามความชอบที่ระบุ มิฉะนั้นจะตั้งค่า Netscape เท่านั้น |
| 4 | taintEnabled() วิธีนี้จะคืนค่าจริงหากเปิดใช้งานการเทนต์ข้อมูล เท็จเป็นอย่างอื่น |
การตรวจจับเบราว์เซอร์
มี JavaScript อย่างง่ายซึ่งสามารถใช้เพื่อค้นหาชื่อของเบราว์เซอร์จากนั้นจึงสามารถให้บริการหน้า HTML แก่ผู้ใช้ได้
<html>
<head>
<title>Browser Detection Example</title>
</head>
<body>
<script type = "text/javascript">
<!--
var userAgent = navigator.userAgent;
var opera = (userAgent.indexOf('Opera') != -1);
var ie = (userAgent.indexOf('MSIE') != -1);
var gecko = (userAgent.indexOf('Gecko') != -1);
var netscape = (userAgent.indexOf('Mozilla') != -1);
var version = navigator.appVersion;
if (opera) {
document.write("Opera based browser");
// Keep your opera specific URL here.
} else if (gecko) {
document.write("Mozilla based browser");
// Keep your gecko specific URL here.
} else if (ie) {
document.write("IE based browser");
// Keep your IE specific URL here.
} else if (netscape) {
document.write("Netscape based browser");
// Keep your Netscape specific URL here.
} else {
document.write("Unknown browser");
}
// You can include version to along with any above condition.
document.write("<br /> Browser version info : " + version );
//-->
</script>
</body>
</html>