วันนี้ในบทความนี้ เราได้นำบทช่วยสอนพื้นฐานของ Javascript มาให้คุณ เพื่อให้คุณสามารถเรียนรู้พื้นฐานพื้นฐานของ Javascript ได้
JavaScript เป็นหนึ่งในภาษาการเขียนโปรแกรมที่ได้รับความนิยมมากที่สุดในโลก
ในสถานการณ์เช่นนี้ เห็นได้ชัดว่าความต้องการนักพัฒนา Javascript นั้นสูงมาก ดังนั้นการเรียนรู้จะช่วยให้คุณมีอาชีพที่ดีขึ้นได้ สิ่งที่สำคัญที่สุดคือมันเรียนรู้ได้ง่ายมาก ถ้าคุณให้เวลาเพียง 20 นาทีในบทช่วยสอนนี้ คุณจะได้เรียนรู้การเขียนโปรแกรมพื้นฐานของ Javascript อย่างแน่นอน
หากคุณพร้อมที่จะเรียนรู้ Javascript แล้ว คุณสามารถเริ่มเขียนโค้ดใน Javascript ได้เลยโดยการอ่านบทช่วยสอนพื้นฐานนี้ ต่อไป เรายังจัดเตรียมบทช่วยสอนขั้นสูงให้กับคุณ ดังนั้นหากคุณต้องการ คุณสามารถสมัครรับจดหมายข่าวของเราได้ฟรี เพื่อที่คุณจะได้รับข้อมูลอัปเดตเพิ่มเติมทางอีเมลของคุณ
ต้องตรวจสอบส่วนขยาย Chrome ล่าสุดของฉัน: ติดตั้งทันที
การสอน JavaScript ในภาษาฮินดี — พื้นฐานพื้นฐาน
แท็กสคริปต์ HTML
คุณสามารถแทรกโปรแกรม JavaScript ไว้ที่ใดก็ได้ในส่วนหัวหรือส่วนเนื้อหาของเอกสาร HTML ของคุณ ซึ่งคุณจะต้องมีแท็ก ‹script›
ตัวอย่าง:
<script> // JavaScript code </script>
เบราว์เซอร์จะตีความโค้ดที่เขียนอยู่ภายในแท็ก ‹script› เป็นสคริปต์โดยอัตโนมัติ นอกจากนี้ยังมีคุณลักษณะบางอย่างของแท็ก Script ซึ่งระบุไว้ด้านล่างนี้ แม้ว่าในปัจจุบันจะไม่ค่อยมีการใช้กันมาก แต่คุณก็ยังควรรู้เกี่ยวกับคุณลักษณะเหล่านี้:
ประเภทแอตทริบิวต์:
ตามมาตรฐาน HTML4 แบบเก่า แอตทริบิวต์ type ถูกเขียนไว้ภายในแท็กสคริปต์ดังนี้:
<script type="text/javascript"> //JavaScript code </script>
ไม่จำเป็นต้องเขียนแอตทริบิวต์นี้ใน Modern HTML
คุณสมบัติภาษา:
โดยบอกจากคุณลักษณะของภาษาว่าเราใช้ภาษาอะไร เคยเขียนไว้ดังนี้
<script language="javascript"> //JavaScript code </script>
ไม่จำเป็นต้องเขียนใน HTML เวอร์ชันใหม่ เนื่องจากโค้ดที่เขียนภายในแท็ก ‹script› ถือเป็น JavaScript ตามค่าเริ่มต้นตามมาตรฐานใหม่
ไวยากรณ์จาวาสคริปต์
ตอนนี้คุณคงเข้าใจแล้วว่าโค้ดของ JavaScript นั้นเขียนอยู่ภายในแท็ก ‹script› ตอนนี้พยายามทำความเข้าใจวิธีการเขียนโค้ดในรูปแบบ JavaScript เช่น JavaScript ผ่านโค้ดตัวอย่างที่ระบุด้านล่าง
ตัวอย่าง
<!DOCTYPE HTML> <html> <body> <script> alert( 'Hello, world!' ); </script> </body> </html>
ในโค้ดนี้ เราได้เขียนโค้ด JavaScript ไว้ในแท็กสคริปต์ภายในเนื้อหา เพื่อให้กล่องโต้ตอบปรากฏขึ้นบนหน้าจอของผู้ใช้ ซึ่งใน Hello, world! คงได้เขียนแล้ว
สิ่งที่ควรทราบคือเราได้ใส่เครื่องหมายอัฒภาค (;) หลังโค้ด แต่ถ้าคุณเขียนโค้ดเพียงโค้ดเดียวในบรรทัดก็ไม่จำเป็น
alert('Hello');
alert('World');
หากมีการเขียนรหัสหลายรหัสในบรรทัดเดียว จะต้องใส่เครื่องหมายอัฒภาคที่ท้ายแต่ละคำสั่งเพื่อแยกรหัสออกจากกัน
alert('Hello'); alert('World');
สคริปต์ภายนอก
คุณสามารถสร้างไฟล์ JavaScript แยกต่างหากและเขียนโค้ดในนั้นและนำเข้าไฟล์นั้นไปยังเอกสาร HTML
หากต้องการแนบไฟล์สคริปต์ในรูปแบบ HTML จะต้องระบุตำแหน่งของไฟล์นั้นผ่านแอตทริบิวต์ src ในแท็ก ‹script›
ตัวอย่าง:
<script src="/scriptfolder/myscript.js"></script>
เรากำลังนำเข้าไฟล์ JavaScript ชื่อ myscript.js ในโค้ดด้านบน ในโค้ด /scriptfoljs-/myscript.js บอกตำแหน่งของไฟล์ js นั้น
หากไฟล์ myscript.js อยู่ในตำแหน่งเดียวกับไฟล์ HTML เราก็สามารถเขียน src=”myscript.js” ได้
ข้อดีอย่างหนึ่งของการใช้ไฟล์แยกต่างหากคือหลังจากดาวน์โหลดไฟล์นี้ เบราว์เซอร์จะจัดเก็บไฟล์นั้นไว้ในแคช และเมื่อใดก็ตามที่เพจต้องการไฟล์นั้น แทนที่จะดาวน์โหลดอีกครั้ง ไฟล์นั้นจะถูกนำมาจากแคชโดยตรง เป็น.
หมายความว่าจะบอกว่าสคริปต์ภายนอกนี้จะไม่ถูกดาวน์โหลดซ้ำแล้วซ้ำอีกซึ่งจะเพิ่มความเร็วในการเปิดหน้า
ความคิดเห็นจาวาสคริปต์
หลายครั้งที่โปรแกรมของเรามีเหตุผลมากหรือเราเขียนโค้ดที่ซับซ้อน และหลังจากผ่านไปไม่กี่เดือนเมื่อเราเห็นมัน เราก็สับสนมากที่จะเข้าใจมัน
ในสถานการณ์เช่นนี้ ความคิดเห็นจะเป็นประโยชน์อย่างมาก หากเราอธิบายสิ่งที่เกิดขึ้นในโค้ดนั้นด้วยการเขียนความคิดเห็นถัดจากโค้ด คุณหรือใครก็ตามสามารถเข้าใจมันได้อย่างง่ายดายโดยการอ่านในภายหลัง
เราสามารถเขียนความคิดเห็นได้ทุกที่ในสคริปต์ ซึ่งจะไม่ส่งผลต่อการทำงานของโปรแกรมเนื่องจากล่ามจะเพิกเฉยต่อความคิดเห็นนั้น
เช่นเดียวกับภาษาการเขียนโปรแกรมอื่นๆ ความคิดเห็นสองประเภทสามารถใช้ใน Javascript:
1. ความคิดเห็นบรรทัดเดียว:
หากคุณต้องการเขียนความคิดเห็นในบรรทัด คุณสามารถเขียนความคิดเห็นไว้ข้างหน้าได้โดยใส่เครื่องหมายทับ 2 อัน //
// This is a single line comment
alert('Hello');
2. ความคิดเห็นหลายบรรทัด:
หากคุณต้องการเขียนความคิดเห็นมากกว่าหนึ่งบรรทัด คุณจะต้องใช้ /* และ */ สำหรับสิ่งนี้
/* This code will not work
alert('Hello');
*/
alert('World');
ในตัวอย่างนี้ ข้อความและโค้ดที่เขียนระหว่าง /* และ */ จะไม่ปรากฏบนหน้าจอ
หากคุณต้องการปิดใช้งานโค้ดใดๆ ชั่วคราว คุณสามารถทำได้โดยเพียงแค่แสดงความคิดเห็น
ตัวแปร
ตัวแปรใช้ในการเก็บข้อมูล ตัวแปรเปรียบเสมือนภาชนะที่เราสามารถเก็บมูลค่าและนำไปใช้เมื่อจำเป็น
ในการสร้างตัวแปรในภาษาโปรแกรมอื่นๆ จำเป็นต้องบอกประเภทข้อมูลของตัวแปรนั้น เช่น ข้อมูลประเภทใด (เช่น ตัวเลข ตัวอักษร สตริง ฯลฯ) ที่เราจะเก็บไว้ในตัวแปรนั้น
แต่ในการสร้างตัวแปรใน Javascript ไม่จำเป็นต้องระบุประเภทข้อมูลของตัวแปร เราสามารถจัดเก็บข้อมูลประเภทใดก็ได้ในตัวแปร JavaScript จะเข้าใจประเภทข้อมูลของข้อมูลนั้นโดยอัตโนมัติ
จะสร้างตัวแปรได้อย่างไร
คุณสามารถใช้คีย์เวิร์ด “var” เพื่อสร้างตัวแปรใน Javascript ซึ่งเป็นวิธีที่เก่าแก่ที่สุด อย่างไรก็ตาม นอกเหนือจาก “var” แล้ว คุณยังสามารถใช้คีย์เวิร์ด “let” หรือ “const” ซึ่งคุณจะได้อ่านเพิ่มเติม
สำหรับตอนนี้ เราจะมาเรียนรู้การสร้างตัวแปรโดยใช้ “var” ตัวอย่างบางส่วนได้รับด้านล่างสำหรับสิ่งนี้
ตัวอย่าง:
var username; var age; var address;
หากต้องการ คุณสามารถประกาศตัวแปรหลายตัวในบรรทัดเดียวได้หากต้องการ เช่น:
var username, age, salary;
จะเก็บค่าเป็นตัวแปรได้อย่างไร
ตอนนี้เราจะเรียนรู้การเริ่มต้นตัวแปรที่สร้างขึ้นด้านบนเพื่อเก็บค่า โปรดดูตัวอย่างด้านล่าง
ตัวอย่าง:
var username='Amit'; var age= 25; var address='Raipur';
หรือเราสามารถกำหนดค่าให้กับตัวแปรทั้งหมดในบรรทัดเดียวได้
var username='Amit', age=25, address='Raipur';
กฎสำหรับการสร้างตัวแปร:
ในการสร้างตัวแปรใน Javascript จำเป็นต้องปฏิบัติตามกฎบางข้อที่ระบุด้านล่าง
ฉัน อักขระตัวแรกในชื่อตัวแปรไม่ควรเป็นตัวเลขหรือตัวเลข
II. ชื่อควรมีเฉพาะตัวอักษร (a ถึง z หรือ A ถึง Z) หลัก (0–9) สัญลักษณ์ ($ หรือ _)
III. JavaScript มีคำหลักที่กำหนดไว้ล่วงหน้าแล้ว (คำสงวน) เช่น คลาส, return, ฟังก์ชัน ฯลฯ ซึ่งไม่สามารถใช้เป็นชื่อตัวแปรได้ คุณสามารถดูรายการคำหลักที่สงวนไว้ได้จากที่นี่
ผู้ประกอบการ
หลังจากเก็บค่าไว้ในตัวแปรแล้ว เรายังสามารถดำเนินการบางอย่าง เช่น การบวก การคูณ ฯลฯ ระหว่างตัวแปรเหล่านั้นได้ ในการดำเนินการดังกล่าว เราต้องใช้สัญลักษณ์บางตัว (เช่น +, -, *, /, % ฯลฯ) ซึ่งเรียกว่าตัวดำเนินการ
มีคำศัพท์สำคัญบางคำที่เกี่ยวข้องกับตัวดำเนินการใน JavaScript ซึ่งคุณต้องทราบด้านล่างนี้
ตัวถูกดำเนินการ:
องค์ประกอบที่ใช้ดำเนินการเรียกว่าตัวถูกดำเนินการ ตัวอย่างเช่น: 5 * 7 ซึ่งเรากำลังคูณ 5 และ 7 โดยที่เราจะเรียก 5 เป็นตัวถูกดำเนินการทางซ้ายและ 7 เป็นตัวถูกดำเนินการทางขวา
Unary:
ตัวดำเนินการดังกล่าวซึ่งมีตัวถูกดำเนินการเพียงตัวเดียวเรียกว่าตัวดำเนินการ unary ตัวอย่างเช่น -5 โดยที่ 5 เป็นตัวถูกดำเนินการ และลบ (-) เป็นตัวดำเนินการเอกเนื่องจากมีตัวถูกดำเนินการเพียงตัวเดียว
ไบนารี:
ตัวดำเนินการดังกล่าวซึ่งต้องใช้ตัวถูกดำเนินการสองตัวในการดำเนินการเรียกว่าตัวดำเนินการไบนารี Like + เป็นตัวดำเนินการไบนารีเนื่องจากต้องใช้ค่าหรือตัวแปรสองตัว
ประเภทของผู้ประกอบการ
มีโอเปอเรเตอร์หลายประเภทใน Javascript ซึ่งมีรายละเอียดด้านล่าง
ตัวดำเนินการทางคณิตศาสตร์
ตัวดำเนินการทางคณิตศาสตร์ใช้ในการดำเนินการทางคณิตศาสตร์ระหว่างตัวแปรหรือค่าสองตัว เกี่ยวกับสิ่งเหล่านี้ได้รับด้านล่าง
ตัวดำเนินการเปรียบเทียบ JavaScript
+ Addition 10+20=30 – Subtraction 15-10=5 * Multiplication 5*2=10 / Division 8/2=4 % Modulus (Remainder) 5%2=1
ตัวดำเนินการเปรียบเทียบ JavaScript
ตัวถูกดำเนินการสองตัวถูกเปรียบเทียบกับตัวดำเนินการเปรียบเทียบ ตัวดำเนินการเปรียบเทียบมีบางประเภท:
== Is equal to 20==30 = false != Not equal to 20!=30 = true === Identical (both values are equal and of same type) 5===2=false because both have same type but values are not equal 5===”5″=false because the types of both are not same. Here 5 is a digit while "5" is a character (single alphabet). !== Not Identical 5 === 2 = true 5===”5″=true < Less than 10<20 td=”” true=””> > Greater than 10 > 20 = false <= Less than equal to 10<=20=true 10>=10=true => Greater than equal to 10>=20=false 10>=10=true
ตัวดำเนินการเชิงตรรกะ
ตัวดำเนินการเชิงตรรกะบางตัวที่ระบุด้านล่างนี้ใช้เพื่อดำเนินการเชิงตรรกะ
&& Logical AND (If the values of the expressions on both sides of the operator are true then the output will be true otherwise it will be false) (20<30 && 30>20)=true , Logical OR (If the value of either of the two expressions is true, the output will be true and if both are false, the output will be false) (10>30 || 30<40)=true , Logical Not (It applies to single operand and reverses the value i.e. false to true and true to false)
ผู้ดำเนินการที่ได้รับมอบหมาย
ตัวดำเนินการกำหนด (=) ใช้เพื่อกำหนดค่าให้กับตัวแปร ตัวดำเนินการมอบหมายที่ใช้ใน JS ได้รับด้านล่าง
= assign var a = 10; var b = 20; var c; a+b=c c = 30 += Add and Assign - (Adds the values of both sides and stores them in the left side variable) var a=10; a+=20; a = 30 -= Subtract and Assign (subtracts the value of the right side variable from the value of the left side variable and stores it in the left side variable) var a=20; a = 5; a = 15 *= Multiply and Assign (multiplies the values of both sides and stores them in the left side variable) var a=10; a*=5; a = 50 /= Divide and Assign var a = 10; a/=5; a = 2 %= Modulus and Assign (after dividing the left value by the right value, assigns the remainder to the left variable) var a=10; a%=3; a = 1
ตัวดำเนินการ Bitwise
ตัวดำเนินการ Bitwise ทำงานบนพื้นฐานของบิต เช่น เลขฐานสอง (0, 1) มันคำนวณโดยการแปลงอินพุตที่ระบุเป็นไบนารี่และส่งกลับเอาต์พุตโดยแปลงเป็นเลขทศนิยมอีกครั้ง
& Bitwise AND (If the value of both bits is 1 then the output will be 1 otherwise it will be 0) , Bitwise OR (if either of the two bits is 1 then the output will be 1) ^ Bitwise XOR (If the value of only one of the two bits is 1 then the output will be 1) ~ Bitwise NOT (inverts each bit ie turns 0 into 1 and 1 into 0) << Bitwise Left Shift (all bits are shifted to the left, how much will be shifted is determined by the value of the right side) >> Bitwise Right Shift (All bits are shifted to the right, how much will be shifted is determined by the value of the right side)
ตัวดำเนินการแบบมีเงื่อนไข (Ternary)
บางครั้งเราต้องกำหนดค่าให้กับตัวแปรตามเงื่อนไข ตัวดำเนินการแบบมีเงื่อนไขซึ่งเรียกอีกอย่างว่าตัวดำเนินการแบบ Ternary ซึ่งเราสามารถทำงานนี้ได้อย่างง่ายดาย
ไวยากรณ์ของมันคือสิ่งนี้:
variablename = (condition) ? value1:value2;
เครื่องหมายคำถามอยู่ไหน ? และใช้โคลอน :. เราใส่เงื่อนไขไว้ในวงเล็บ () เมื่อเงื่อนไขนี้เป็นจริง ค่าก่อนโคลอนจะถูกส่งกลับ และเมื่อเงื่อนไขเป็นเท็จ ค่าหลังโคลอนจะถูกส่งกลับ
ตัวอย่าง
largestvalue = (20>10) ? 20:10; alert(largestvalue);
คำสั่ง If-else
ใน Javascript เงื่อนไขจะถูกประเมินผ่านคำสั่ง If-else และจะมีการตัดสินใจว่าโค้ดใดจะถูกดำเนินการหากเงื่อนไขเป็นจริงหรือเท็จ ต่อไปนี้เป็นคำสั่ง If-else สามประเภทที่แตกต่างกัน ซึ่งเราสามารถใช้ในโปรแกรมของเราได้ตามความต้องการ
- ถ้าคำสั่ง
- ถ้าคำสั่งอื่น
- ถ้าเป็นอย่างอื่นถ้าคำสั่ง
ถ้าคำสั่ง
ในคำสั่งนี้ หากเงื่อนไขที่กำหนดกลายเป็นจริง โค้ดที่เขียนอยู่ในวงเล็บจะถูกดำเนินการ และหากเงื่อนไขเป็นเท็จ โค้ดที่อยู่ในวงเล็บจะถูกข้ามไป
ไวยากรณ์:
if (condition){
// code to be executed
}
ตัวอย่าง:
if(a>b){
alert("a is greater than b!");
}
ถ้าคำสั่งอื่น
ในคำสั่งนี้ หากเงื่อนไขเป็นจริง โค้ดของวงเล็บจะถูกดำเนินการ แต่ถ้าเป็นเท็จ ส่วนอื่นจะถูกดำเนินการ นั่นคือในคำสั่งนี้เราสามารถเขียนโค้ดสำหรับเงื่อนไขทั้งจริงและเท็จ
ไวยากรณ์:
if (condition){
// code to be executed
}
ตัวอย่าง:
if(a>b){
alert("a is greater than b!");
}
else{
alert("a is less than b!");
}
ถ้าเป็นอย่างอื่นถ้าคำสั่ง
หากเราต้องการตรวจสอบมากกว่าหนึ่งเงื่อนไข เราสามารถใช้คำสั่ง if else if ได้
ไวยากรณ์:
if (condition){
// code to be executed
}
else if (condition){
// code to be executed
}
else if (condition){
// code to be executed
}
else{
// code to be executed
}
ตัวอย่าง:
if(marks>89){
alert("Great");
}
else if(marks>80){
alert("Uff You are average");
}
else{
alert("You failed Unh!!");
}
คำสั่งสวิตช์
เราสามารถใช้คำสั่ง Switch แทนคำสั่ง if หลายคำสั่งได้ ในที่นี้ นิพจน์จะได้รับการประเมินและเปรียบเทียบค่ากับกรณีต่างๆ และดำเนินการบล็อกโค้ดที่เกี่ยวข้องกับการจับคู่กรณีและปัญหา
หากไม่มีตัวพิมพ์ที่ตรงกัน ในสถานการณ์เช่นนี้ โค้ดที่มีตัวพิมพ์เริ่มต้นจะถูกดำเนินการ
คุณสามารถเข้าใจได้ดีขึ้นในตัวอย่างด้านล่าง
ไวยากรณ์:
switch(expression){
case value1:
// code to be executed
break;
case value2:
// code to be executed
break;
default:
// code to be executed
}
ตัวอย่าง:
var grade='B';
switch(grade){
case 'A':
alert("Good Job");
break;
case 'B':
alert("Pretty Good");
break;
case 'C':
alert("Passed");
break;
case 'F':
alert("Failed");
break;
default:
alert("No Grade");
}
ตอนนี้ให้เราเข้าใจตัวอย่างนี้:
- ก่อนอื่น เราสร้างตัวแปรชื่อเกรดซึ่งเราเก็บค่า B ไว้
- ตอนนี้เราจะเปรียบเทียบกับกรณีต่างๆ
- ในกรณีแรกตรวจสอบว่าค่าของเกรดเป็น 'A' หรือไม่... เงื่อนไขเป็นเท็จเนื่องจากค่าของเกรดเป็น 'B'
- ในกรณีที่สอง เราตรวจสอบค่า 'B'...เงื่อนไขจริง...โค้ดหลังจากโคลอนจะทำงาน และข้อความ "ค่อนข้างดี" จะถูกพิมพ์ในป๊อปอัปผ่านฟังก์ชันแจ้งเตือน
- หลังจากนี้คำสั่งแบ่งจะถูกดำเนินการ และกรณีคำสั่ง switch ที่เหลือจะถูกข้ามไป
การจัดกลุ่มกรณี
บางครั้งมีบางกรณีที่มีการบล็อคโค้ดเป็นเรื่องปกติ ในสถานการณ์เช่นนี้เราสามารถสร้างกลุ่มของกรณีเหล่านั้นได้ คุณสามารถดูตัวอย่างด้านล่าง
var value=5;
switch(value){
case 1:
case 2:
alert("The number is less than 3");
break;
case 3:
case 4:
alert("The number is less than 5");
break;
default:
alert("Error!!");
}
จาวาสคริปต์ลูป
หลายครั้งในการเขียนโปรแกรมเราต้องดำเนินการเดิมซ้ำแล้วซ้ำอีก ในสถานการณ์เช่นนี้เราใช้การวนซ้ำ
ด้วย Loop เราสามารถรันโค้ดเดิมซ้ำแล้วซ้ำอีก มันทำให้งานซ้ำๆ เป็นเรื่องง่าย
ตัวอย่างเช่น หากเราต้องการพิมพ์เลขคู่ทั้งหมดระหว่าง 1 ถึง 100 ทีละตัว งานนี้สามารถทำได้ง่ายมากโดยใช้โค้ดเพียงไม่กี่บรรทัดในการวนซ้ำ
Javascript ส่วนใหญ่ประกอบด้วยลูปประเภทวัยรุ่น:
- ในขณะที่วนซ้ำ
- ทำ...ในขณะที่วนซ้ำ
- สำหรับวง
ในขณะที่วนซ้ำ:
ในลูปนี้ เราจะรันโค้ดใดๆ ซ้ำๆ จนกว่าเงื่อนไขที่กำหนดจะเป็นเท็จ
ไวยากรณ์:
while(condition){
//code
}
ตัวอย่าง:
var i = 0;
while (i < 10){
alert(i);
i++;
}
ในตัวอย่างนี้ เราใช้ตัวแปร i ซึ่งกำหนดค่าเริ่มต้นเป็น 0 แล้วใส่เงื่อนไขในขณะที่ i‹10 กล่าวคือ ลูปนี้จะทำงานจนกว่าค่าของ i น้อยกว่า 10
เราเพิ่มค่าอย่างต่อเนื่องผ่าน i++ และพิมพ์ค่าจาก 0 ถึง 9 ผ่านการแจ้งเตือน
ทำ...ในขณะที่วนซ้ำ:
สิ่งนี้ก็คล้ายกับ while loop ข้อแตกต่างเพียงอย่างเดียวคือไม่ว่าเงื่อนไขจะเป็นจริงหรือเท็จก็ตาม โค้ดที่ให้มาจะต้องถูกดำเนินการอย่างน้อยหนึ่งครั้ง
ไวยากรณ์:
do{
//code
}while(condition);
ตัวอย่าง:
var i = 0;
do{
alert(i);
i++;
}while (i < 10);
สำหรับวง:
for loop เป็นลูปที่ใช้บ่อยที่สุด มีสามส่วนที่สำคัญ:
- การเริ่มต้น: ให้ค่าเริ่มต้นของตัวแปร
- เงื่อนไข: การกำหนดเงื่อนไขสำหรับการวนซ้ำ
- การวนซ้ำ: เพื่อเพิ่มหรือลดค่าของตัวแปร
ไวยากรณ์:
for (initialization; condition; increment/decrement){
//code
}
ตัวอย่าง:
for(var i=0; i<10; i++){
alert(i);
}
การทำงาน
หลายครั้งที่เราต้องทำงานเดิมซ้ำๆ กันในสถานที่ต่างๆ ในโปรแกรมของเรา
ในสถานการณ์เช่นนี้ หากเราใช้ฟังก์ชันนี้ เราก็จะรอดจากการเขียนโค้ดเดิมซ้ำแล้วซ้ำเล่า ซึ่งจะช่วยประหยัดทั้งเวลาและพื้นที่ อีกทั้งโครงสร้างของโปรแกรมของคุณจะสะอาด อ่านง่าย และจัดการได้
ถ้าเราสร้างฟังก์ชันของงานเฉพาะ (โค้ด) ดังนั้นเมื่อใดก็ตามที่เราต้องทำงานนั้นในโปรแกรม เราก็สามารถเรียกใช้ฟังก์ชันนั้นได้
ก่อนหน้านี้เราใช้ฟังก์ชัน alert() ซึ่งเป็นฟังก์ชันในตัว แต่ที่นี่เราจะเรียนรู้การสร้างฟังก์ชันด้วยตัวเอง
คำจำกัดความของฟังก์ชัน:
ก่อนที่จะใช้ฟังก์ชันใดๆ จำเป็นต้องกำหนดก่อนจึงจำเป็นต้องบอกว่าฟังก์ชันนั้นทำงานอย่างไร
ไวยากรณ์:
function functionname(){
//code to be executed
}
ตัวอย่าง:
function msg(){
alert("hello everyone!");
}
การเรียกใช้ฟังก์ชัน:
หลังจากกำหนดฟังก์ชันแล้ว เมื่อใดก็ตามที่จำเป็นต้องรัน ฟังก์ชันจะถูกเรียก และเรียกอีกอย่างว่าการเรียกใช้ฟังก์ชัน
หากต้องการเรียกใช้ฟังก์ชันเพียงแค่เขียนชื่อฟังก์ชันเท่านั้น คุณสามารถดูตัวอย่างนี้ได้ด้านล่าง
ตัวอย่าง:
<script>
//function definition
function msg(){
alert("hello everyone!");
}
//function call
msg();
</script>
ในตัวอย่างข้างต้น เราได้เรียกใช้ฟังก์ชันนี้ทันทีหลังจากกำหนด เมื่อโหลดเพจแล้ว ฟังก์ชันนี้จะถูกเรียกใช้โดยอัตโนมัติ โดยผู้ใช้ไม่จำเป็นต้องดำเนินการใดๆ
แต่บางครั้งมีข้อกำหนดที่เราจำเป็นต้องเรียกใช้ฟังก์ชันเฉพาะในเหตุการณ์เฉพาะหรือเมื่อผู้ใช้ดำเนินการ (เช่นการคลิก การเลื่อนเมาส์) ในสถานการณ์เช่นนี้ เราสามารถเรียกใช้ฟังก์ชันนอกแท็ก ‹script› ได้ คุณสามารถโทร.
คุณสามารถดูตัวอย่างนี้ได้ด้านล่าง
<script>
function msg(){
alert("hello everyone!");
}
</script>
<input type="button" onclick="msg()" value="click here!">
ในตัวอย่างข้างต้น เราได้สร้างปุ่มขึ้นมา เมื่อผู้ใช้คลิกที่ปุ่มนั้น ฟังก์ชัน msg() จะถูกเรียก
ฟังก์ชั่นพร้อมพารามิเตอร์:
นอกจากนี้เรายังสามารถส่งข้อมูลบางอย่างไปยังฟังก์ชันผ่านพารามิเตอร์ (หรือที่เรียกว่าอาร์กิวเมนต์ของฟังก์ชัน) ซึ่งสามารถดำเนินการบางอย่างและให้ผลลัพธ์แก่เรา
จนถึงตอนนี้เราเห็นตัวอย่างฟังก์ชันที่ไม่มีพารามิเตอร์ แต่ตอนนี้เราจะเห็นตัวอย่างของฟังก์ชันที่มีพารามิเตอร์เช่นอาร์กิวเมนต์ด้วย
<script>
function msg(from, text){
alert( from + ':' + text);
}
msg("Vivek","Hello everyone!");
</script>
เพื่อนๆ ด้วยบทช่วยสอนนี้ คุณสามารถเริ่มเขียนโค้ดใน JavaScript และยังสามารถฝึกฝนด้วยการสร้างโปรแกรมขนาดเล็กได้อีกด้วย
