ก่อนที่จะอ่านหนังสือเล่มนี้ฉันขอขอบคุณทีมเทคนิค Taobao สำหรับการแปล JavaScript Core และ Flanagan นี้สำหรับการเขียนหนังสือเล่มนี้ ขอบคุณสำหรับการแบ่งปันที่เสียสละและมีเพียงโน้ตนี้เท่านั้นที่ทุ่มเทให้กับการทำงานหนักของคุณ
1: แกนภาษาจาวาสคริปต์
หลังจากบทนี้เราจะมุ่งเน้นไปที่พื้นฐานของ JavaScript เป็นหลัก บทที่ 2 เราจะอธิบายความคิดเห็นเครื่องหมายอัฒภาคและชุดอักขระ Unicode ของ JavaScript; บทที่ 3 จะน่าสนใจมากขึ้นส่วนใหญ่อธิบายตัวแปรและการมอบหมายของ JavaScript
นี่คือรหัสตัวอย่างบางส่วนเพื่อแสดงเนื้อหาคีย์ของสองบทแรก
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
// เนื้อหาหลังจากสแลชสองครั้งเป็นของความคิดเห็น
// อ่านความคิดเห็นที่นี่อย่างระมัดระวังมันจะอธิบายรหัส JavaScript
// ตัวแปรเป็นชื่อสัญลักษณ์ที่แสดงถึงค่า
// ตัวแปรจะถูกประกาศผ่านคำหลัก VAR
var x; // ประกาศตัวแปร x
// ค่าสามารถกำหนดให้กับตัวแปรผ่านสัญลักษณ์
x = 0; // ค่าของตัวแปร x ตอนนี้ 0
x // รับค่าตามชื่อตัวแปร
// JavaScript รองรับหลายประเภทข้อมูล
x = 1; //ตัวเลข
x = 0.01; // จำนวนเต็มและจำนวนจริงแบ่งปันประเภทข้อมูล
x = "Hello World"; // สร้างสตริงของข้อความในคำพูดสองครั้ง
x = 'Hello World'; // คำพูดเดี่ยวยังสร้างสตริง
x = true; // บูลีน
x = false; // ค่าบูลีนอื่น
x = null; // null เป็นค่าพิเศษ ความหมายว่างเปล่า
x = ไม่ได้กำหนด; // undefinined และ null มีความคล้ายคลึงกันมาก
</script>
ใน JavaScript ประเภทที่สำคัญที่สุดคือวัตถุและอาร์เรย์ บทที่ 6 แนะนำวัตถุและบทที่ 7 แนะนำอาร์เรย์ วัตถุและอาร์เรย์มีความสำคัญใน JavaScript มากจนพวกเขาสามารถเห็นได้ทุกที่ในหนังสือเล่มนี้
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
// ประเภทที่สำคัญที่สุดในจาวาสคริปต์คือวัตถุ
// Object เป็นคอลเลกชันของคู่ชื่อ/ค่าหรือการรวบรวมค่าสตริงเป็นค่าที่แมป
var book = {// วัตถุถูกล้อมรอบในวงเล็บปีกกา
หัวข้อ: "JavaScript", // ค่าของแอตทริบิวต์ "หัวข้อ" คือ JavaScript
ไขมัน: จริง // ค่าของคุณสมบัติไขมันเป็นจริง
- // การจัดฟันที่หยิกทางด้านขวา
// การเข้าถึงคุณสมบัติวัตถุผ่าน "." หรือ "[]".
book.topic // => "javascript"
จอง ["fat"] // => จริงอีกวิธีหนึ่งในการรับแอตทริบิวต์
book.author = "ahthw"; // สร้างแอตทริบิวต์ใหม่โดยการกำหนด
book.content = {}; // {} เป็นวัตถุที่ว่างเปล่า ไม่มีคุณลักษณะ
// JavaScript ยังรองรับอาร์เรย์ (รายการดัชนีโดยอาร์เรย์)
var primes = [2, 3, 5, 7]; // มีการรวมกันของ 4 ค่าขอบเขตจะถูกวาดโดย "[" ""] "
primes [0] // => 2: วัตถุแรกของอาร์เรย์ดัชนีคือ 0
primes.length // => 4 จำนวนองค์ประกอบในอาร์เรย์
primes [primes.length-1] // => 7: องค์ประกอบสุดท้ายในอาร์เรย์
primes [4] = 9; // เพิ่มองค์ประกอบใหม่โดยการกำหนด
primes [4] = 11; // เปลี่ยนองค์ประกอบที่มีอยู่โดยการมอบหมาย
var empty = []; // อาร์เรย์เปล่าที่มี 0 องค์ประกอบ
empty.length // =>: 0
// อาร์เรย์และวัตถุสามารถมีอาร์เรย์หรือวัตถุอื่น
var point = [// array ที่มีสององค์ประกอบ
{x: 0, y: 0}, // แต่ละองค์ประกอบเป็นวัตถุ
{x: 1, y: 1}
-
var data = {// วัตถุที่มีสองแอตทริบิวต์
Trial1: [[1,2], [3,4]], // แต่ละวัตถุเป็นอาร์เรย์
Trial2: [[2,3], [4,5]] // องค์ประกอบของอาร์เรย์ก็เป็นอาร์เรย์เช่นกัน
-
</script>
ไวยากรณ์ของรหัสข้างต้นที่กำหนดองค์ประกอบอาร์เรย์ผ่านวงเล็บเหลี่ยมและกำหนดความสัมพันธ์การแมประหว่างชื่อแอตทริบิวต์วัตถุและค่าแอตทริบิวต์ผ่านวงเล็บหยิก บทที่ 4 มีการแนะนำโดยเฉพาะ นิพจน์เป็นวลีใน JavaScript วลีนี้สามารถคำนวณได้เพื่อให้ได้ค่าและอ้างอิงค่าของแอตทริบิวต์วัตถุหรือองค์ประกอบอาร์เรย์ผ่าน "," และ "[]" เพื่อสร้างนิพจน์
วิธีการเขียนนิพจน์ที่พบบ่อยที่สุดใน JavaScript คือตัวดำเนินการเช่นรหัสต่อไปนี้ (oprator)
การคัดลอกรหัสมีดังนี้:
// ตัวดำเนินการในฐานะผู้ให้บริการสร้างค่าใหม่
// ตัวดำเนินการเลขคณิตที่พบบ่อยที่สุด
3+2 // => 5 เพิ่มเติม
3-2 // => การลบ
3*2 // => หลาย
3/2 // => ส่วน
จุด [1] .x -point [0] .x // => การดำเนินการที่ซับซ้อนสามารถทำงานได้ตามปกติ
"3"+"2" // => 32. คุณสามารถดำเนินการเพิ่มเติมหรือการประกบสตริงได้
// JavaScript กำหนดตัวดำเนินการทางคณิตศาสตร์บางตัวเป็นตัวย่อ
count var = 0; // กำหนดตัวแปร
นับ ++; // เพิ่มขึ้น 1
นับ--; // ลดลง 1
นับ += 2; // The Auto-Increment 2 เหมือนกับ "count = count + 2;"
นับ *= 3 // คูณ 3 เช่นเดียวกับ "count = count *3;" เขียนขึ้น
count // => 6: ชื่อตัวแปรเองก็เป็นนิพจน์เช่นกัน
// ตัวดำเนินการความสัมพันธ์ที่เท่าเทียมกันถูกใช้เพื่อตรวจสอบว่าทั้งสองค่าเท่ากันหรือไม่
// ไม่เท่ากันมากกว่าผลการดำเนินงานที่น้อยกว่าผู้ประกอบการเป็นจริงหรือเท็จ
var x = 2, y = 3; // เครื่องหมายที่เท่าเทียมกันที่นี่หมายถึงการกำหนดไม่เท่ากัน
x == y; // => เท็จเท่ากับ
x! = y; // => จริง
x <y; // => จริง: น้อยกว่า
x <= y; // จริงน้อยกว่าหรือเท่ากับ
x> y; // เท็จมากกว่า
x> = y; // เท็จมากกว่าหรือเท่ากับ
"สอง" == "สาม"; // เท็จสองสายไม่เท่ากัน
"สอง"> "สาม"; // จริงดัชนีของ "tw" ในตัวอักษรมากกว่า "th"
false == (x> y); // ture false = false;
// ตัวดำเนินการแบบลอจิคัลถูกรวมเข้าหรือผกผันของค่าบูลีน
(x == 2) && (y == 3); // => จริงการเปรียบเทียบทั้งสองเป็นจริง && คือ "และ"
(x> 3) || (y <3); // => การเปรียบเทียบเท็จไม่เป็นจริง - หมายถึง "หรือ"
- (x == y); // => จริง! ระบุการค้นหาแบบผกผัน
หาก "วลี" ในจาวาสคริปต์เป็นนิพจน์แล้วประโยคทั้งหมดจะเรียกว่าคำสั่งซึ่งจะอธิบายรายละเอียดในบทที่ 5
ในรหัสข้างต้นบรรทัดที่ลงท้ายด้วยเครื่องหมายอัฒภาคเป็นข้อความทั้งหมด ด้วยวิธีคร่าวๆนิพจน์จะคำนวณค่าเดียวเท่านั้น (หรือค่าที่มีอยู่ไม่เกี่ยวข้อง) แต่พวกเขาเปลี่ยนสถานะการทำงานของโปรแกรม ในข้างต้นคำสั่งประกาศตัวแปรและคำสั่งการมอบหมายได้รับการเห็น คำแถลงประเภทอื่นคือ "โครงสร้างการควบคุม" เช่นการตัดสินตามเงื่อนไขและลูป หลังจากแนะนำฟังก์ชั่นเราให้รหัสตัวอย่างที่เกี่ยวข้อง
ฟังก์ชั่นเป็นตัวอย่างโค้ด JavaScript ที่มีชื่อและพารามิเตอร์ที่สามารถกำหนดและใช้งานได้หลายครั้งในแต่ละครั้ง บทที่ 8 จะอธิบายฟังก์ชั่นอย่างเป็นทางการอย่างเป็นทางการ เช่นเดียวกับวัตถุและอาร์เรย์ฟังก์ชั่นถูกกล่าวถึงในหลาย ๆ ที่ในหนังสือเล่มนี้ดังนั้นนี่คือรหัสตัวอย่างง่ายๆ
การคัดลอกรหัสมีดังนี้:
// ฟังก์ชั่นเป็นเซ็กเมนต์รหัส JavaScript ที่มีพารามิเตอร์การรักษาซึ่งสามารถถ่ายโอนได้หลายครั้ง
ฟังก์ชั่น Plus1 (x) {// กำหนดฟังก์ชั่นชื่อ Plus1 ด้วยพารามิเตอร์ x
ส่งคืน x + 1; // ส่งคืนค่าที่ใหญ่กว่า 1 ที่ผ่าน
} // บล็อกรหัสของฟังก์ชั่นคือชิ้นส่วนที่ห่อด้วยวงเล็บปีกกา
Plus1 (y) //
var square = function (x) {// function เป็นค่าที่สามารถกำหนดให้กับตัวแปร
ส่งคืน x*x; // คำนวณค่าของฟังก์ชัน
- // semicolon ระบุถึงจุดสิ้นสุดของคำสั่งการกำหนด
สแควร์ (บวก 1 (y)); // หนึ่งฟังก์ชั่นหนึ่งในการแสดงออกเดียว
เมื่อฟังก์ชั่นและวัตถุถูกเขียนเข้าด้วยกันฟังก์ชั่นจะถูกตั้งโปรแกรมด้วย "วิธี" (วิธีการ)
การคัดลอกรหัสมีดังนี้:
// เมื่อฟังก์ชั่นถูกกำหนดให้กับแอตทริบิวต์ของวัตถุเราเรียกมันว่า
// "วิธีการ" วัตถุ JavaScript ทั้งหมดมีวิธีการ
var a = []; // สร้างอาร์เรย์ที่ว่างเปล่า
A.Push (1,2,3); // เพิ่มวัตถุไปยังอาร์เรย์ไปยังวิธีการกด ()
A.Reverse (); // การพลิกกลับข้อมูล
// document.write (a)
// เราสามารถกำหนดวิธีการย่อย- คำหลัก "นี้" เป็นวิธีการนิยาม
การอ้างอิงถึงวัตถุของ // ตัวอย่างที่นี่คืออาร์เรย์ที่มีข้อมูลตำแหน่งสองจุดที่กล่าวถึงข้างต้น
points.dist = function () {// กำหนดวิธีการคำนวณระยะห่างระหว่างสองจุด
var p1 = สิ่งนี้ [0]; // รับการอ้างอิงไปยังอาร์เรย์ปัจจุบันผ่านคำหลักนี้
var p2 = สิ่งนี้ [1]; // และรับสององค์ประกอบแรกของอาร์เรย์ที่เรียกว่า
var a = p2.x- p1.y; // ระยะทางบนแกนพิกัด x
var b = p2.y - p1.y; // ระยะทางบนแกนพิกัด y
ส่งคืน math.sqrt (a * a + "เราเรียกมันว่า" + b * b); // ทฤษฎีบทพีทาโกรัส
- //math.sqrt () คำนวณรูทสแควร์
points.dist () // => ค้นหาระยะห่างระหว่างสองจุด
ตอนนี้ให้ตัวอย่างของคำสั่งควบคุม ที่นี่ฟังก์ชั่นตัวอย่างมีคำสั่งควบคุม JavaScript ที่พบบ่อยที่สุดในร่างกาย
การคัดลอกรหัสมีดังนี้:
// ที่นี่คำสั่ง JavaScript ใช้ไวยากรณ์นี้เพื่อรวมการตัดสินตามเงื่อนไขและการวนซ้ำ
// ไวยากรณ์คล้ายกับ Java C ++ และใช้ภาษาอื่น ๆ
ฟังก์ชั่น abs (x) {// ค้นหาฟังก์ชันค่าสัมบูรณ์
if (x> = 0) {// ถ้า
กลับ x; // ถ้าเป็นจริงให้ดำเนินการรหัสนี้
} else {// false execute
return -x;
-
-
ฟังก์ชั่น factprial (n) {// การคำนวณแฟคทอเรียล
ผลิตภัณฑ์ var = 1; // กำหนดค่า 1 ให้กับผลิตภัณฑ์
ในขณะที่ (n> 1) {// loop เพื่อเรียกใช้เนื้อหา {} เมื่อค่านิพจน์ค่า () เป็นจริง
ผลิตภัณฑ์ *= n; // ผลิตภัณฑ์ = ผลิตภัณฑ์ * ตัวย่อ
n--; // n = วิธีการเขียน N-1
} // การวนซ้ำสิ้นสุดลง
ผลิตภัณฑ์ส่งคืน; // ส่งคืนสินค้า
-
factprial (4) // => 24 1*4*3*2 document.write (factprial (4))
ฟังก์ชั่น factorior2 (n) {// อีกวิธีหนึ่งในการเขียนลูป
var i, product = 1; -
สำหรับ (i = 2; i <= n; i ++) // เพิ่ม i จาก 2 เป็น n
ผลิตภัณฑ์ *= i; // Loop Body เมื่อมีรหัสเพียงหนึ่งประโยคในร่างกายลูปละเว้น {}
ผลิตภัณฑ์ส่งคืน; // คำนวณและส่งคืนแฟคทอเรียลที่ดี
-
Factorior2 (5) //document.write(Factorial2(5)) => 120: 1*2*3*4*5
JavaScript เป็นภาษาการเขียนโปรแกรมเชิงวัตถุ แต่มันแตกต่างจากวัตถุหน้าแบบดั้งเดิมมาก บทที่ 9 จะอธิบาย JavaScript เชิงวัตถุโดยละเอียด บทนี้จะมีรหัสตัวอย่างมากมายซึ่งเป็นบทที่ยาวที่สุดในหนังสือเล่มนี้
นี่คือตัวอย่างง่ายๆรหัสนี้แสดงวิธีกำหนดคลาสใน JavaScript เพื่อแสดงจุดในรูปทรงเรขาคณิตของใบหน้า 2D วัตถุที่มีอินสแตนซ์ในคลาสนี้มีวิธีที่เรียกว่า r () เพื่อคำนวณระยะทางจากการเปลี่ยนจุดเป็นแหล่งกำเนิด
การคัดลอกรหัสมีดังนี้:
// กำหนดคอนสตรัคเตอร์เพื่อเริ่มต้นวัตถุจุดใหม่
ฟังก์ชันจุด (x, y) {// constructors โดยทั่วไปเริ่มต้นด้วยตัวอักษรตัวใหญ่
this.x = x; // คำหลักที่นี่หมายถึงอินสแตนซ์ที่เริ่มต้น
this.y = y; // พารามิเตอร์ฟังก์ชั่นการจัดเก็บเป็นคุณลักษณะของวัตถุ
-
// สร้างอินสแตนซ์โดยใช้คำหลักใหม่และตัวสร้างใหม่
var p = จุดใหม่ (1, 1); // คะแนน 1, 1 ในรูปทรงเรขาคณิตของระนาบ
// กำหนดค่าผ่านวัตถุต้นแบบตัวสร้าง
// เพื่อกำหนดวิธีการสำหรับวัตถุจุด
point.prototype.r = function () {
Return Math.SQRT (// ส่งคืนสแควร์รูทของ X Square + Y Square
this.x * this.x + // นี่หมายถึงวัตถุที่ขนส่งวิธีนี้
this.y * this.y);
-
// วัตถุอินสแตนซ์ของ Point P (และวัตถุอินสแตนซ์จุดทั้งหมด) สืบทอดเมธอด r ()
pr () // => 1.4142135623730951 /document.write (pr ())
บทที่ 9 เป็นสาระสำคัญของส่วนแรก บทที่ตามมาได้รับการขยายเป็นระยะซึ่งจะนำเราไปสู่จุดสิ้นสุดของการสำรวจ JavaScript ของเรา
บทที่ 10 ส่วนใหญ่พูดถึงรูปแบบการจับคู่ข้อความที่ดำเนินการโดยนิพจน์ทั่วไป
บทที่ 11 ชุดย่อยหลักภาษาหลักและ superset ของยิปซั่มจาวาสคริปต์
ก่อนที่จะป้อนเนื้อหาของ JavaScript บนไคลเอนต์บทที่ 12 เราจะแนะนำสภาพแวดล้อมที่ใช้งาน JavaScript สองตัวนอกเว็บ
2. ไคลเอนต์จาวาสคริปต์
มีการอ้างอิงข้ามจำนวนมากไปยังจุดความรู้เนื้อหาในส่วนหลักของภาษาจาวาสคริปต์และความรู้สึกของความรู้ไม่ชัดเจน การประสานเนื้อหาของ JavaScript ทางฝั่งไคลเอ็นต์มีการเปลี่ยนแปลงมาก ตามบทนี้คุณสามารถใช้ JavaScript ในเว็บเบราว์เซอร์ (แต่ถ้าคุณต้องการเรียนรู้ JavaScript โดยการอ่านหนังสือเล่มนี้คุณไม่สามารถมุ่งเน้นไปที่ส่วนที่สอง) บทที่ 13 เป็นส่วนแรกของส่วนที่สองซึ่งแนะนำวิธีทำให้ JavaScript ทำงานในเว็บเบราว์เซอร์ บทที่ 14 อธิบายเทคโนโลยีการเขียนสคริปต์เว็บเบราว์เซอร์และครอบคลุมฟังก์ชั่นระดับโลกที่สำคัญของ Javascipt ลูกค้า
ตัวอย่างเช่น:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น moveon () {
// ถามคำถามผ่านกล่องโต้ตอบ
var คำตอบ = ยืนยัน ("คุณพร้อมหรือยัง?");
// คลิกตกลงและเบราว์เซอร์จะโหลดหน้าใหม่
ถ้า (ตอบ) window.location = "http://www.baidu.com";
-
// ดำเนินการฟังก์ชั่นนี้หลังจาก 1 นาที (60000 มิลลิวินาที)
Settimeout (Moveon, 300);
บทที่ 15 จะบอกคุณว่า JavaScript สามารถจัดการสไตล์ HTML เพื่อกำหนดวิธีการแสดงผลของเนื้อหาได้อย่างไร เนื้อหาของบทที่ 15 จะใช้งานได้จริงมากขึ้น ผ่านสคริปต์มันจะแสดงวิธีเลือกองค์ประกอบหน้าเว็บเฉพาะวิธีการตั้งค่าแอตทริบิวต์สำหรับองค์ประกอบ HTML หากเนื้อหาขององค์ประกอบได้รับการแก้ไขและวิธีการเพิ่มโหนดใหม่ลงในเอกสาร
ฟังก์ชั่นตัวอย่างต่อไปนี้แสดงหากคุณค้นหาและแก้ไขเนื้อหาบทความพื้นฐาน
การคัดลอกรหัสมีดังนี้:
// ข้อมูลที่ระบุในเอกสารและแผนผังพื้นที่มีการดีบักข้อมูลมากกว่าข้อมูล
// หากองค์ประกอบนี้ไม่มีอยู่ในเอกสารให้สร้างไฟล์
ฟังก์ชั่นดีบัก (MSG) {
// ค้นหาส่วนการดีบักของเอกสารโดยดูแอตทริบิวต์ ID ขององค์ประกอบ HTML
var log = document.getElementById ("debuglog");
// หากองค์ประกอบไม่มีอยู่ให้สร้างไฟล์
if (! log) {
log = document.createElement ("div"); // สร้างองค์ประกอบ div ใหม่
log.id = "debuglog"; // กำหนดค่าให้กับ ID ของแต่ละองค์ประกอบ
log.innerhtml = "<h1> บันทึกการดีบัก </h1>"; // ปรับแต่งเนื้อหาเริ่มต้น
document.body.appendchild (บันทึก); // เพิ่มลงในตอนท้ายของเอกสาร
-
// รวมข้อความใน <pre> และเพิ่มลงในบันทึก
var pre = document.createElement ("pre"); // สร้างองค์ประกอบก่อน
var text = document.createElement (msg); // รวมข้อความบนโหนดข้อความ
pre.appendchild (ข้อความ); // เพิ่มข้อความในก่อน
log.AppendChild (ก่อน); // ก่อนเพิ่มลงในบันทึก
-
บทที่ 16 จะพูดคุยเกี่ยวกับวิธีการใช้ JavaScript เพื่อใช้งานองค์ประกอบ ซึ่งมักจะใช้สไตล์และคุณลักษณะคลาสขององค์ประกอบ
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่นซ่อน (e, reflow) {// จัดการองค์ประกอบและซ่อนองค์ประกอบ e ผ่าน jvascript
if (reflow) {// ถ้าพารามิเตอร์ที่สองเป็นจริง
E.STYLE.DISPLAY = "ไม่มี" // ซ่อนองค์ประกอบนี้และพื้นที่ที่ใช้ในการขายยังขายได้
} อื่น {
E. style.visibility = "ซ่อน"; // ซ่อน e รักษาพื้นที่ที่ใช้
-
-
ฟังก์ชั่นไฮไลต์ (e) {// ไฮไลต์ E โดยการตั้งค่า CSS
if (! e.className) e.className = "highcss";
อื่น
e.className += "highcss";
-
รูปแบบเนื้อหาและ CSS ขององค์ประกอบสามารถควบคุมได้ผ่าน JavaScript และพฤติกรรมของเอกสารยังสามารถกำหนดได้ผ่านตัวจัดการเหตุการณ์ การจัดการเหตุการณ์เป็นฟังก์ชั่น JavaScript ที่ลงทะเบียนในศูนย์เบราว์เซอร์ เมื่อเหตุการณ์เฉพาะเกิดขึ้นเบราว์เซอร์สามารถเรียกใช้ฟังก์ชันนี้ได้
โดยปกติประเภทของเหตุการณ์ที่เรามุ่งเน้นคือการคลิกเมาส์และกิจกรรมคีย์แป้นพิมพ์ (สมาร์ทโฟนเป็นกิจกรรมสัมผัสที่หลากหลาย) หรือเมื่อเบราว์เซอร์เสร็จสิ้นการโหลดเอกสารเหตุการณ์บุคคลจะถูกทริกเกอร์เมื่อผู้ใช้เปลี่ยนขนาดของหน้าต่างหรือเมื่อผู้ใช้ป้อนข้อมูลลงในแบบฟอร์ม
บทที่ 17 จะอธิบายรายละเอียดเกี่ยวกับวิธีการกำหนดลงทะเบียนตัวจัดการเวลาและวิธีที่เบราว์เซอร์เรียกพวกเขาเมื่อเหตุการณ์เกิดขึ้น
วิธีที่ง่ายที่สุดในการปรับแต่งตัวจัดการเหตุการณ์คือการผูกการโทรกลับไปยังแอตทริบิวต์นำหน้าโดย HTML เมื่อเขียนการทดสอบโปรแกรมง่าย ๆ วิธีที่ใช้งานได้จริงที่สุดคือการผูกการโทรกลับไปยังตัวจัดการ "onclick" สมมติว่าฟังก์ชั่นการดีบัก () และซ่อน () ข้างต้นจะถูกบันทึกลงในไฟล์ debug.js และ hide.js ด้านบนคุณสามารถระบุตัวจัดการเหตุการณ์สำหรับแอตทริบิวต์ onclick ดังนี้
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
// ข้อมูลที่ระบุในเอกสารและแผนผังพื้นที่มีการดีบักข้อมูลมากกว่าข้อมูล
// หากองค์ประกอบนี้ไม่มีอยู่ในเอกสารให้สร้างไฟล์
ฟังก์ชั่นดีบัก (MSG) {
// ค้นหาส่วนการดีบักของเอกสารโดยดูแอตทริบิวต์ ID ขององค์ประกอบ HTML
var log = document.getElementById ("debuglog");
// หากองค์ประกอบไม่มีอยู่ให้สร้างไฟล์
if (! log) {
log = document.createElement ("div"); // สร้างองค์ประกอบ div ใหม่
log.id = "debuglog"; // กำหนดค่าให้กับ ID ของแต่ละองค์ประกอบ
log.innerhtml = "<h1> บันทึกการดีบัก </h1>"; // ปรับแต่งเนื้อหาเริ่มต้น
document.body.appendchild (บันทึก); // เพิ่มลงในตอนท้ายของเอกสาร
-
// รวมข้อความใน <pre> และเพิ่มลงในบันทึก
var pre = document.createElement ("pre"); // สร้างองค์ประกอบก่อน
var text = document.createElement (msg); // รวมข้อความบนโหนดข้อความ
pre.appendchild (ข้อความ); // เพิ่มข้อความในก่อน
log.AppendChild (ก่อน); // ก่อนเพิ่มลงในบันทึก
-
ฟังก์ชั่นซ่อน (e, reflow) {// จัดการองค์ประกอบและซ่อนองค์ประกอบ e ผ่าน jvascript
if (reflow) {// ถ้าพารามิเตอร์ที่สองเป็นจริง
E.STYLE.DISPLAY = "ไม่มี" // ซ่อนองค์ประกอบนี้และพื้นที่ที่ใช้ในการขายยังขายได้
} อื่น {
E. style.visibility = "ซ่อน"; // ซ่อน e รักษาพื้นที่ที่ใช้
-
-
ฟังก์ชั่นไฮไลต์ (e) {// ไฮไลต์ E โดยการตั้งค่า CSS
if (! e.className) e.className = "highcss";
อื่น
e.className += "highcss";
-
</script>
สวัสดี
<ปุ่ม onclick = "ซ่อน (นี่จริง); debug ('ซ่อนปุ่ม 1');"> hide1 </ button>
<ปุ่ม onclick = "ซ่อน (นี่); debug ('ซ่อนปุ่ม 2');"> hide2 </butotn>
JavaScript ไคลเอนต์ต่อไปนี้ใช้กิจกรรมซึ่งให้เหตุการณ์ที่สำคัญมาก: เหตุการณ์ "โหลด" ลงทะเบียนเหตุการณ์เพื่อจัดการกับ Chenxing เพื่อนร่วมงานยังแสดงวิธีการขั้นสูงเพิ่มเติมในการลงทะเบียนตัวจัดการเหตุการณ์ "คลิก"
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
// เหตุการณ์ "โหลด" สามารถยิงได้หลังจากโหลดเอกสารเท่านั้น
// หากคุณมักจะต้องรอให้เหตุการณ์โหลดเกิดขึ้นก่อนที่คุณจะสามารถเรียกใช้รหัส JavaScript
window.onload = function () {
// ค้นหาแท็ก IMG ทั้งหมดในเอกสาร
var images = document.getElementsByTagname ("IMG");
// ถ่ายโอนผ่านรูปภาพและเพิ่มตัวจัดการในเหตุการณ์คลิกของแต่ละโหนด
// ซ่อนรูปภาพเมื่อคลิกที่มัน
สำหรับ (var i = 0; i <images.length; i ++) {
var imge = images [i];
ถ้า (imge.addeventListener) // อีกวิธีหนึ่งในการลงทะเบียนตัวจัดการเวลา
imge.addeventListener ("คลิก", ซ่อน, เท็จ);
อื่น // เข้ากันได้กับการดำเนินการก่อนหน้าของ IE8
imge.attachevent ("onclick", ซ่อน);
-
// นี่เป็นฟังก์ชั่นการประมวลผลเหตุการณ์ที่ลงทะเบียนข้างต้น
ฟังก์ชั่นซ่อน (evnet) {
Event.target.style.visibility = "Hidden";
-
-
</script>
บทที่ 15-17 บอกวิธีใช้ JavaScript เพื่อควบคุมเนื้อหาสไตล์และพฤติกรรมของหน้าเว็บ (การประมวลผลเหตุการณ์) บทนี้กล่าวถึง API ที่ซับซ้อนเล็กน้อยและมีความเข้ากันได้กับเบราว์เซอร์ที่ไม่ดี นี่คือเหตุผลที่โปรแกรมเมอร์ JavaScript จำนวนมากเลือกใช้ "Library" หรือ "Framework" เพื่อทำให้การเข้ารหัสของพวกเขาง่ายขึ้น สิ่งที่ได้รับความนิยมมากที่สุดคือ jQuery บทที่ 19 แนะนำห้องสมุด jQuery
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่นดีบัก (MSG) {
var log = $ ("#debuglog");
if (log.length == 0) {
log = $ ("<div id = 'debuglog'> <h1> debuglog </h1> </div>");
log.appendto (document.body);
-
document.write (บันทึก)
log.append ($ ("<pre/>") ข้อความ (msg));
-
บทที่สี่ของส่วนที่สองที่เรากล่าวถึงนั้นทั้งหมดถูกกล่าวถึงรอบ ๆ หน้าเว็บ สี่บทที่ตามมาจะมุ่งเน้นไปที่ร้านค้าและหันไปใช้เว็บแอปพลิเคชัน เนื้อหาเหล่านี้ไม่ได้กล่าวถึงวิธีการเขียนและจัดการเนื้อหา สไตล์และสคริปต์ที่เจริญรุ่งเรืองใช้เว็บเบราว์เซอร์เพื่อแสดงผลเอกสาร แทนที่จะอธิบายวิธีใช้เว็บเบราว์เซอร์เป็นแพลตฟอร์มแอปพลิเคชัน และอธิบายถึง APIs สำหรับการสนับสนุนเว็บแอปพลิเคชันที่ซับซ้อนและละเอียดอ่อนมากขึ้นและเบราว์เซอร์ที่ทันสมัย
บทที่ 18 อธิบายวิธีการใช้ JavaScript เพื่อเริ่มคำขอ HTTP
บทที่ 20 อธิบายกลไกการจัดเก็บข้อมูลและการบำรุงรักษาสถานะเซสชันของแอปพลิเคชันไคลเอนต์ บทที่ 21 ครอบคลุมกราฟิก APPACT APIS/เครือข่ายรุ่นใหม่ที่ขับเคลื่อนโดย HTML5 สิ่งเหล่านี้ขึ้นอยู่กับการพัฒนาเบราว์เซอร์ที่รองรับ API ใหม่ เจ้อเจียงเป็นช่วงเวลาที่น่าตื่นเต้นที่สุดของคุณในฐานะโปรแกรมเมอร์ JavaScript ไม่มีรหัสตัวอย่างมากใน 4 บทสุดท้าย ตัวอย่างต่อไปนี้ใช้ API ใหม่เหล่านี้