บันทึกการศึกษาพื้นฐาน JavaScript (ต้องอ่านสำหรับมือใหม่)

ตัวแปรคืออะไร?

ตัวแปรเป็นคอนเทนเนอร์ที่ใช้ในการจัดเก็บข้อมูล

การประกาศตัวแปร

ไวยากรณ์:

 ชื่อตัวแปร var

ชื่อตัวแปร = ค่า;

ต้องประกาศตัวแปรก่อนแล้วจึงมอบหมาย

สามารถกำหนดตัวแปรได้ซ้ำ ๆ

กฎการตั้งชื่อสำหรับตัวแปร

ตัวแปรต้องเริ่มต้นด้วยตัวอักษร

ตัวแปรสามารถเริ่มต้นด้วยสัญลักษณ์ $ และ _ (แต่เราไม่แนะนำสิ่งนี้);

ชื่อตัวแปรเป็นตัวพิมพ์เล็ก (A และ A เป็นตัวแปรที่แตกต่างกัน)

คำแถลง

คำแถลงจบลงด้วยเครื่องหมายอัฒภาค; หากมีการละเว้นเครื่องหมายอัฒภาคจุดสิ้นสุดของคำสั่งจะถูกกำหนดโดยตัวแยกวิเคราะห์

มีนิสัยการเข้ารหัสที่ดีคุณต้องจบลงด้วย

ชนิดข้อมูล

ใน JavaScript ข้อมูลชิ้นหนึ่งเป็น ค่า มีค่าประเภทต่าง ๆ และประเภทที่ทุกคนคุ้นเคยมากที่สุดคือตัวเลข ค่าสตริงถูกล้อมรอบด้วย

หนึ่งคำขึ้นไปในคำพูด

ตัวเลขค่าตัวเลขใด ๆ ตัวเลขอาจเป็นทศนิยมหรือไม่มี 68.57

อักขระในเครื่องหมายอัญประกาศสตริง คุณสามารถใช้คำพูดเดี่ยวหรือคู่ "สวัสดีโลก"

บูลีน จริง หรือ เท็จจริง

ค่า ที่ไม่ได้กำหนดและค่าโมฆะ ระบุว่าตัวแปรไม่มีค่า คุณสามารถล้างตัวแปรได้โดยการตั้งค่าของตัวแปรเป็นโมฆะ

ค่าใด ๆ ที่เกี่ยวข้องกับวัตถุ

ค่าที่ส่งคืนโดยฟังก์ชันฟังก์ชัน

 1 var a; // a undefined2 var a = 6; // a คือหมายเลข 3 var a = "Jason"; // a คือสตริง

ฟังก์ชั่นคืออะไร?

ฟังก์ชั่นเป็นชุดของคำสั่ง JavaScript ที่ทำงานบางอย่าง

ไวยากรณ์พื้นฐาน:

 ฟังก์ชันฟังก์ชันชื่อ () {รหัสฟังก์ชัน;}

ชื่อฟังก์ชัน ();

ภาพประกอบ:

ฟังก์ชั่นกำหนดคำหลักของฟังก์ชั่น

"ชื่อฟังก์ชั่น" ชื่อที่คุณให้กับฟังก์ชั่น

"รหัสฟังก์ชัน" จะถูกแทนที่ด้วยรหัสที่ทำฟังก์ชั่นเฉพาะให้เสร็จสมบูรณ์

การเรียกใช้ฟังก์ชันของ "ชื่อฟังก์ชันที่สอง"

 1 ฟังก์ชั่น add2 () {2 var sun = 3 + 2; 3 การแจ้งเตือน (ดวงอาทิตย์); 4} 5 add2 (); // การเรียกฟังก์ชันโดยตรงเขียนชื่อฟังก์ชั่นและปรากฏขึ้นโดยตรงรหัสฟังก์ชัน

 1 <อินพุต type = "button" value = "คลิกฉัน" onclick = "add2 ()" /> 2 <!-หลังจากคลิกปุ่มแล้วให้โทรหาฟังก์ชั่น onclick คือเหตุการณ์คลิก->

เนื้อหาเอาต์พุต (document.write)

document.write () เอาต์พุตเนื้อหาโดยตรงบนหน้าเว็บ

ประเภทแรก: เนื้อหาเอาต์พุตถูกล้อมรอบด้วย "" และส่งออกเนื้อหาภายในเครื่องหมาย "" โดยตรง

 document.write ("ฉันรัก JavaScript!");

ประเภทที่สอง: เนื้อหาเอาต์พุตผ่านตัวแปร

 var mystr = "hello world"; document.write (mysrt); // เขียนชื่อตัวแปรโดยตรงและส่งออกเนื้อหาที่เก็บโดยตัวแปร

ประเภทที่สาม: เอาต์พุตหลายเนื้อหาและเชื่อมต่อด้วยเครื่องหมาย +

 var mystr = "hello"; document.write (mystr + "ฉันรักสคริปต์ Java"); // เชื่อมต่อหลายรายการด้วยเครื่องหมาย +

ประเภทที่สี่: เอาท์พุทแท็ก HTML และการทำงานและแท็กจะถูกปิดด้วย ""

 var mystr = "hello"; document.write (mystr+"<br>"); // หลังจากเอาต์พุตสวัสดีเอาต์พุตเอกสารใหม่เขียน ("javascript");

คำเตือน (กล่องโต้ตอบข้อความแจ้งเตือน)

เมื่อเราเยี่ยมชมเว็บไซต์บางครั้งหน้าต่างเล็ก ๆ จะปรากฏขึ้นพร้อมข้อความข้อความ หากคุณไม่คลิก "ตกลง" คุณไม่สามารถทำอะไรเกี่ยวกับหน้าเว็บ

วิธีการใช้งานหน้าต่างเล็ก ๆ นี้ถูกนำมาใช้โดยใช้การแจ้งเตือน

ไวยากรณ์: การแจ้งเตือน (สตริงหรือตัวแปร);

 var mynum = 30; แจ้งเตือน ("สวัสดี!"); แจ้งเตือน (mynum);

ผลลัพธ์: กล่องข้อความจะปรากฏขึ้นตามลำดับ (การแจ้งเตือนปรากฏขึ้นกล่องโต้ตอบข้อความมีปุ่มตกลง)

สังเกต:

1. ไม่สามารถดำเนินการอื่นได้ก่อนคลิกปุ่ม "ตกลง" ในกล่องโต้ตอบ

2. กล่องโต้ตอบข้อความสามารถใช้ในการดีบักโปรแกรม

3. แจ้งเตือนเนื้อหาเอาต์พุตซึ่งอาจเป็นสตริงหรือตัวแปรคล้ายกับ document.write

ยืนยันการเลือก (ยืนยันกล่องโต้ตอบข้อความ)

นอกเหนือจากการให้ข้อมูลแก่ผู้ใช้แล้วเรายังต้องการรับข้อมูลจากผู้ใช้ กล่องโต้ตอบข้อความยืนยันใช้ที่นี่

กล่องโต้ตอบข้อความยืนยันมักจะใช้เพื่อให้ผู้ใช้สามารถเลือกได้เช่น: "คุณพูดถูกหรือไม่" และอื่น ๆ กล่องโต้ตอบปรากฏขึ้น (รวมถึงปุ่ม OK และปุ่มยกเลิก)

ไวยากรณ์: ยืนยัน (STR);

พารามิเตอร์คำอธิบาย: STR: ข้อความที่จะแสดงในกล่องโต้ตอบข้อความส่งคืน: ค่าบูลีน

ค่าส่งคืน:

ส่งคืนจริงเมื่อผู้ใช้คลิกปุ่ม "ตกลง"

กลับไปที่ FALSE เมื่อผู้ใช้คลิกปุ่ม "ยกเลิก"

หมายเหตุ: ค่าส่งคืนสามารถใช้เพื่อกำหนดปุ่มที่ผู้ใช้คลิก

 <script type = "text/javascript"> var myMessage = ยืนยัน ("คุณชอบ JavaScript หรือไม่"); if (myMessage == true) {document.write ("ดีมาเลย!"); } else {document.write ("JS มีประสิทธิภาพคุณต้องเรียนรู้!"); } </script>

ถามคำถาม (กล่องโต้ตอบข้อความแจ้ง))

บางครั้งไม่เพียง แต่คุณต้องการให้ผู้ใช้ตอบใช่/ไม่ใช่ แต่หวังว่าจะได้รับคำตอบที่เฉพาะเจาะจงมากขึ้น ในกรณีนี้เราสามารถใช้ propt

กล่องโต้ตอบข้อความป๊อปอัพพรอมต์มักใช้เพื่อขอข้อมูลที่จำเป็นต้องโต้ตอบกับผู้ใช้ กล่องโต้ตอบข้อความจะปรากฏขึ้น (รวมถึงปุ่ม OK, ปุ่มยกเลิกและกล่องป้อนข้อความ)

ไวยากรณ์:

 พรอมต์ (str1, str2);

คำอธิบายพารามิเตอร์:

STR1: ข้อความที่จะแสดงในกล่องโต้ตอบข้อความไม่สามารถแก้ไขได้

STR2: เนื้อหาในกล่องข้อความสามารถแก้ไขได้

ค่าส่งคืน:

1. คลิกปุ่มตกลงและเนื้อหาในกล่องข้อความจะส่งคืนค่าเป็นฟังก์ชัน

2. คลิกปุ่มยกเลิกเพื่อกลับไปที่ null

 ฟังก์ชัน rec () {คะแนน var; // ตัวแปรคะแนนใช้เพื่อจัดเก็บค่าคะแนนที่ป้อนโดยผู้ใช้ คะแนน = พรอมต์ ("โปรดป้อนคะแนนของคุณ", "90"); ถ้า (คะแนน> = 90) {document.write ("คุณยอดเยี่ยมมาก!"); } อื่นถ้า (คะแนน> = 75) {document.write ("ดี!"); } อื่นถ้า (คะแนน> = 60) {document.write ("มาเลย!"); } else {document.write ("ทำงานหนัก!"); -

 <script> var myname = prompt ("ป้อนชื่อของคุณ"); if (myName! = null && myName! = "") {document.write ("welcom to" + myname); } else {document.write ("welcom to" + myname); } </script>

เปิดหน้าต่างใหม่ (window.open)

ไวยากรณ์:

 window.open ([url], [ชื่อหน้าต่าง], [พารามิเตอร์สตริง])

คำอธิบายพารามิเตอร์:

URL: พารามิเตอร์เสริม, URL หรือเส้นทางของหน้าเว็บที่จะแสดงในหน้าต่าง หากมีการละเว้นพารามิเตอร์นี้หรือค่าของมันเป็นสตริงว่างหน้าต่างจะไม่แสดงเอกสารใด ๆ

ชื่อหน้าต่าง: พารามิเตอร์เสริมชื่อของหน้าต่างที่เปิดอยู่

1. ชื่อประกอบด้วยตัวอักษรตัวเลขและอักขระขีดเส้นใต้

2. ชื่อหน้าต่าง: ตัวเลือกสตริงนี้เป็นรายการคุณสมบัติที่คั่นด้วยเครื่องหมายจุลภาคซึ่งประกาศชื่อของหน้าต่างที่เปิดอยู่ สามารถ

มันคือ "_top", "_blank", "_self", "_parent" ฯลฯ

_blank แสดงหน้า Landing Page ในหน้าต่างใหม่

_Self แสดงหน้าเว็บปลายทางในหน้าต่างปัจจุบัน

_Parent Frame Webage แสดงหน้าเว็บปลายทางที่ตำแหน่งหน้าต่างทั้งหมดปัจจุบัน

_top frame webage แสดงหน้าเว็บปลายทางในหน้าต่างด้านบน

3. สามารถสร้างหน้าต่างเดียวที่มี ชื่อ เดียวกันได้และหากคุณต้องการสร้างหน้าต่างหลายบาน ชื่อ ไม่เหมือนกัน

4. ชื่อ ไม่สามารถมีช่องว่าง

พารามิเตอร์สตริง: พารามิเตอร์เสริมตั้งค่าพารามิเตอร์หน้าต่างและแยกแต่ละพารามิเตอร์ด้วยเครื่องหมายจุลภาค

ตารางพารามิเตอร์:

หมายเลขหมายเลข op หมายเลข จำนวนพิกเซลที่ด้านบนของหน้าต่างออกจากด้านบนของหน้าจอ

หมายเลข ซ้าย จำนวนพิกเซลที่ปลายด้านซ้ายของหน้าต่างออกจากปลายด้านซ้ายของหน้าจอ

หมายเลข ความกว้าง ความกว้างของหน้าต่าง

จำนวน ความสูง หน้าต่างความสูง

Menubar ใช่ไม่มีเมนูอยู่ในหน้าต่าง

แถบเครื่องมือ ใช่ไม่มีแถบเครื่องมืออยู่ในหน้าต่าง

แถบเลื่อน ใช่ไม่มีแถบเลื่อนใด ๆ ในหน้าต่าง

สถานะ ใช่ไม่มีแถบสถานะในหน้าต่าง

 <script type = "text/javascript"> window.open ('http: //', '_ blank', 'width = 300, ความสูง = 200, menubar = ไม่, toolbar = ไม่, สถานะ = ไม่, scrollbars = ใช่') </script>

ปิดหน้าต่าง (window.close)

ปิด () ปิด () ปิดหน้าต่าง

การใช้งาน:

 1 window.close (); // ปิดหน้าต่างนี้ 2 <วัตถุหน้าต่าง> .close (); // ปิดหน้าต่างที่ระบุ

ตัวอย่างเช่น: ปิดหน้าต่างที่สร้างขึ้นใหม่

 1 <script type = "text/javascript"> 2 var mywin = window.open ('// www.vevb.com'); // จัดเก็บวัตถุหน้าต่างที่พิมพ์ใหม่ในตัวแปร mywin3 mywin.close (); 4 </script>

แอตทริบิวต์ innerhtml

แอตทริบิวต์ InnerHTML ใช้เพื่อรับหรือแทนที่เนื้อหาขององค์ประกอบ HTML

ไวยากรณ์:

 Object.innerhtml

วัตถุคือวัตถุองค์ประกอบที่ได้รับเช่นการได้รับองค์ประกอบผ่าน document.getElementById ("id")

 <h2 id = "con"> javascript </h2>

 <script type = "text/javascript"> var mychar = document.getElementById ("con"); document.write ("ชื่อต้นฉบับ:"+mychar.innerhtml+"<br>"); // เอาต์พุตเนื้อหาแท็ก H2 ดั้งเดิม mychar.innerhtml = "Hello World" Document.write ("แก้ไขชื่อ:"+mychar.innerhtml); // เอาต์พุตเนื้อหาแท็ก H2 ที่แก้ไขแล้ว </script>

เปลี่ยนสไตล์ HTML

ไวยากรณ์:

 Object.style.property = รูปแบบใหม่;

หมายเหตุ: วัตถุคือวัตถุองค์ประกอบที่ได้รับ เช่นองค์ประกอบที่ได้รับผ่าน document.getElementById ("id")

 <h2 id = "con"> ฉันรัก JavaScript </h2>

 <script type = "text/javascript"> var mychar = document.getElementById ("con"); mychar.style.color = "สีแดง"; mychar.style.background = "#ccc"; mychar.style.width = "300px"; </script>

แสดงและซ่อน (แอตทริบิวต์แสดงผล)

ไวยากรณ์:

 Object.style.display = ค่า

ค่า:

ไม่มี องค์ประกอบนี้จะไม่แสดง (และซ่อน)

บล็อก องค์ประกอบนี้จะแสดงเป็นองค์ประกอบระดับบล็อก (เช่นจอแสดงผล)

 mychar.style.display = "block"

ชื่อคลาสควบคุม (แอตทริบิวต์ className)

ชุดคุณสมบัติ className ตั้งค่าหรือส่งคืนคุณสมบัติคลาสขององค์ประกอบ

ไวยากรณ์:

 Object.className = className

ผล:

1. รับแอตทริบิวต์คลาสขององค์ประกอบ

2. กำหนดสไตล์ CSS ให้กับองค์ประกอบในหน้าเว็บเพื่อเปลี่ยนลักษณะที่ปรากฏขององค์ประกอบ

 p2.className = "สอง";

บันทึกการศึกษาพื้นฐาน JavaScript ข้างต้น (ต้องอ่านสำหรับ Rookies) เป็นเนื้อหาทั้งหมดที่ใช้ร่วมกันโดยตัวแก้ไข ฉันหวังว่ามันจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น