ล่าสุดการพัฒนาเว็บบทเรียน
×

JS เกี่ยวกับการสอน

JS บ้าน JS บทนำ JS สถานที่ที่จะ JS ส่งออก JS วากยสัมพันธ์ JS งบ JS ความคิดเห็น JS ตัวแปร JS ผู้ประกอบการ JS คณิตศาสตร์ JS การมอบหมาย JS ชนิดข้อมูล JS ฟังก์ชั่น JS วัตถุ JS ขอบเขต JS เหตุการณ์ JS เงื่อนไข JS วิธีสตริง JS เบอร์ JS วิธีการจำนวน JS คณิตศาสตร์ JS วันที่ JS รูปแบบวันที่ JS วันวิธีการ JS แถว JS วิธีการอาร์เรย์ JS booleans JS เปรียบเทียบ JS เงื่อนไข JS สวิตซ์ JS ห่วง For JS ในขณะที่ห่วง JS หยุด JS ประเภทการแปลง JS นิพจน์ทั่วไป JS ข้อผิดพลาด JS แก้จุดบกพร่อง JS hoisting JS โหมดที่เข้มงวด JS คู่มือสไตล์ JS ปฏิบัติที่ดีที่สุด JS ข้อผิดพลาด JS ประสิทธิภาพ JS คำสงวน JS JSON

JS ฟอร์ม

แบบฟอร์มการตรวจสอบ รูปแบบ API

JS วัตถุ

นิยามวัตถุ คุณสมบัติของวัตถุ วิธีการของวัตถุ ต้นแบบวัตถุ

JS ฟังก์ชั่น

นิยามฟังก์ชั่น ค่าฟังก์ชัน ฟังก์ชั่นการภาวนา ปิดฟังก์ชั่น

JS HTML DOM

DOM แนะนำ DOM วิธีการ DOM เอกสาร DOM องค์ประกอบ DOM HTML DOM CSS DOM ภาพเคลื่อนไหว DOM เหตุการณ์ DOM EventListener DOM การเดินเรือ DOM โหนด DOM Nodelist

JS เบราว์เซอร์ BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS ตัวอย่าง

JS ตัวอย่าง JS HTML DOM JS HTML อินพุต JS HTML วัตถุ JS HTML เหตุการณ์ JS เบราว์เซอร์ JS ทดสอบ JS สรุป

JS คู่มืออ้างอิง

JavaScript วัตถุ HTML DOM วัตถุ


 

JavaScriptข้อผิดพลาดทั่วไป

❮ก่อนหน้า ถัดไปบท❯

ในบทนี้จะชี้ให้เห็นความผิดพลาดของ JavaScript บางทั่วไป

ตั้งใจใช้ตัวดำเนินการกำหนด

โปรแกรม JavaScript อาจสร้างผลที่ไม่คาดคิดถ้าเป็นโปรแกรมเมอร์ตั้งใจใช้ผู้ประกอบการที่ได้รับมอบหมาย (=) แทนการดำเนินการเปรียบเทียบ (==) ในถ้างบ

นี้ if คำสั่งส่งกลับ false (ตามคาด) เพราะ x ไม่เท่ากับ 10:

var x = 0;
if (x == 10)
ลองตัวเอง»

นี้ if งบผลตอบแทน true (อาจจะไม่เป็นไปตามคาด) เพราะ 10 เป็นจริง:

var x = 0;
if (x = 10)
ลองตัวเอง»

นี้ if คำสั่งส่งกลับ false (อาจจะไม่เป็นไปตามคาด) เพราะเป็นเท็จ 0:

var x = 0;
if (x = 0)
ลองตัวเอง»

งานเสมอกลับค่าของที่ได้รับมอบหมาย

คาดหวังว่าการเปรียบเทียบหลวม

ในการเปรียบเทียบปกติชนิดข้อมูลที่ไม่สำคัญ ถ้ามีคำสั่งนี้จะส่งกลับ true :

var x = 10;
var y = "10";
if (x == y)
ลองตัวเอง»

ในการเปรียบเทียบเข้มงวดชนิดข้อมูลไม่ก็ตาม ถ้ามีคำสั่งนี้จะส่งกลับ false :

var x = 10;
var y = "10";
if (x === y)
ลองตัวเอง»

มันเป็นความผิดพลาดที่จะลืมว่างบสวิทช์ใช้การเปรียบเทียบที่เข้มงวด:

สวิทช์กรณีนี้จะแสดงการแจ้งเตือน:

var x = 10;
switch(x) {
    case 10: alert("Hello");
}
ลองตัวเอง»

สวิทช์กรณีนี้จะไม่แสดงการแจ้งเตือน:

var x = 10;
switch(x) {
    case "10": alert("Hello");
}
ลองตัวเอง»

ทำให้เกิดความสับสนและเพิ่ม Concatenation

นอกจากนี้เป็นเรื่องเกี่ยวกับการเพิ่มตัวเลข

เรียงต่อกันเป็นเรื่องเกี่ยวกับการเพิ่มสตริง

ใน JavaScript การดำเนินงานทั้งใช้ประกอบ + เดียวกัน

ด้วยเหตุนี้การเพิ่มจำนวนเป็นตัวเลขจะผลิตได้ผลที่แตกต่างกันจากการเพิ่มจำนวนเป็นสตริง:

var x = 10 + 5;          // the result in x is 15
var x = 10 + "5";        // the result in x is "105"
ลองตัวเอง»

เมื่อมีการเพิ่มตัวแปรทั้งสองก็อาจเป็นเรื่องยากที่จะคาดการณ์ผลลัพธ์:

var x = 10;
var y = 5;
var z = x + y;           // the result in z is 15

var x = 10;
var y = "5";
var z = x + y;           // the result in z is "105"
ลองตัวเอง»

ความเข้าใจผิดที่ลอยตัว

ตัวเลขทั้งหมดใน JavaScript จะถูกเก็บเป็น 64 บิตตัวเลขทศนิยม (ลอย)

ทุกภาษาการเขียนโปรแกรมรวมทั้ง JavaScript, มีปัญหากับค่าที่แม่นยำลอยจุด:

var x = 0.1;
var y = 0.2;
var z = x + y            // the result in z will not be 0.3
if (z == 0.3)            // this if test will fail
ลองตัวเอง»

เพื่อแก้ปัญหาดังกล่าวข้างต้นจะช่วยให้คูณและหาร:

ตัวอย่าง

var z = (x * 10 + y * 10) / 10;       // z will be 0.3
ลองตัวเอง»

ทำลายสตริง JavaScript

JavaScript จะช่วยให้คุณที่จะทำลายคำสั่งเป็นสองสาย:

ตัวอย่างที่ 1

var x =
"Hello World!";
ลองตัวเอง»

แต่หมดงบในช่วงกลางของสตริงจะไม่ทำงาน:

ตัวอย่างที่ 2

var x = "Hello
World!";
ลองตัวเอง»

คุณต้องใช้ "ทับขวา" ถ้าคุณต้องทำลายคำสั่งในสตริง:

ตัวอย่างที่ 3

var x = "Hello \
World!";
ลองตัวเอง»

วางผิดอัฒภาค

เพราะถูกใส่ผิดอัฒภาคบล็อกรหัสนี้จะดำเนินการโดยไม่คำนึงถึงความคุ้มค่าของ x:

if (x == 19);
{
    // code block 
}
ลองตัวเอง»

หมดงบกลับ

มันเป็นพฤติกรรม JavaScript เริ่มต้นที่จะปิดคำสั่งโดยอัตโนมัติเมื่อสิ้นสุดของบรรทัด

ด้วยเหตุนี้ทั้งสองจะกลับมาตัวอย่างผลเดียวกัน:

ตัวอย่างที่ 1

function myFunction(a) {
    var power = 10 
    return a * power
}
ลองตัวเอง»

ตัวอย่างที่ 2

function myFunction(a) {
    var power = 10;
    return a * power;
}
ลองตัวเอง»

JavaScript นอกจากนี้ยังจะช่วยให้คุณสามารถที่จะทำลายคำสั่งเป็นสองสาย

ด้วยเหตุนี้ตัวอย่างที่ 3 ยังจะกลับผลเดียวกัน:

ตัวอย่างที่ 3

function myFunction(a) {
    var
    power = 10; 
    return a * power;
}
ลองตัวเอง»

แต่สิ่งที่จะเกิดขึ้นถ้าคุณทำลายคำสั่งกลับในสองบรรทัดเช่นนี้

ตัวอย่างที่ 4

function myFunction(a) {
    var
    power = 10; 
    return
    a * power;
}
ลองตัวเอง»

ฟังก์ชั่นจะกลับมาไม่ได้กำหนด!

ทำไม? เพราะคิดว่า JavaScript คุณหมายถึง:

ตัวอย่างที่ 5

function myFunction(a) {
    var
    power = 10; 
    return;
    a * power;
}
ลองตัวเอง»

คำอธิบาย

ถ้ามีคำสั่งเป็นเหมือนสมบูรณ์:

var

JavaScript จะพยายามที่จะดำเนินการคำสั่งโดยการอ่านบรรทัดถัดไป:

power = 10;

แต่เนื่องจากคำสั่งนี้เป็นที่สมบูรณ์แบบ:

return

JavaScript จะปิดโดยอัตโนมัติเช่นนี้

return;

นี้เกิดขึ้นเพราะปิด (สิ้นสุด) งบอัฒภาคเป็นตัวเลือกใน JavaScript

JavaScript จะปิดคำสั่งกลับในตอนท้ายของสายเพราะมันเป็นคำสั่งที่สมบูรณ์

ไม่เคยทำลายคำสั่งกลับ

การเข้าถึงอาร์เรย์กับดัชนีชื่อ

การเขียนโปรแกรมภาษาหลายอาร์เรย์สนับสนุนกับดัชนีชื่อ

อาร์เรย์กับดัชนีชื่อจะเรียกว่าเชื่อมโยงอาร์เรย์ (หรือแฮช)

JavaScript ไม่สนับสนุนอาร์เรย์กับดัชนีชื่อ

ใน JavaScript อาร์เรย์ใช้ดัชนีหมายเลข:

ตัวอย่าง

var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;         // person.length will return 3
var y = person[0];             // person[0] will return "John"
ลองตัวเอง»

ใน JavaScript ใช้วัตถุชื่อดัชนี

ถ้าคุณใช้ดัชนีชื่อเมื่อมีการเข้าถึงอาร์เรย์ JavaScript จะ redefine อาร์เรย์ไปยังวัตถุมาตรฐาน

หลังจากที่นิยามใหม่อัตโนมัติวิธีการที่หลากหลายและคุณสมบัติที่จะให้ผลลัพธ์ที่ไม่ได้กำหนดหรือไม่ถูกต้อง:

ตัวอย่าง:

var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;         // person.length will return 0
var y = person[0];             // person[0] will return undefined
ลองตัวเอง»

สิ้นสุดวันที่นิยามอาร์เรย์ด้วยเครื่องหมายจุลภาค

ไม่ถูกต้อง:

points = [40, 100, 1, 5, 25, 10,];

บาง JSON และ JavaScript เครื่องยนต์จะล้มเหลวหรือประพฤติตนไม่คาดคิด

แก้ไข:

points = [40, 100, 1, 5, 25, 10];

สิ้นสุดวันที่นิยามวัตถุที่มีเครื่องหมายจุลภาค

ไม่ถูกต้อง:

person = {firstName:"John", lastName:"Doe", age:46,}

บาง JSON และ JavaScript เครื่องยนต์จะล้มเหลวหรือประพฤติตนไม่คาดคิด

แก้ไข:

person = {firstName:"John", lastName:"Doe", age:46}

ไม่ได้กำหนดเป็นไม่เป็นโมฆะ

ด้วย JavaScript, null สำหรับวัตถุที่ไม่ได้กำหนดเป็นตัวแปรคุณสมบัติและวิธีการ

จะเป็นโมฆะวัตถุจะต้องมีการกำหนดมิฉะนั้นจะไม่ได้กำหนด

หากคุณต้องการที่จะทดสอบว่าวัตถุที่มีอยู่นี้จะโยนความผิดพลาดถ้าวัตถุไม่ได้กำหนด:

ไม่ถูกต้อง:

if (myObj !== null && typeof myObj !== "undefined") 

ด้วยเหตุนี้คุณต้องทดสอบ typeof () ครั้งแรก:

แก้ไข:

if (typeof myObj !== "undefined" && myObj !== null) 

คาดหวังว่าบล็อกขอบเขตระดับ

JavaScript ไม่สร้างขอบเขตใหม่สำหรับรหัสแต่ละบล็อก

มันเป็นความจริงในการเขียนโปรแกรมภาษาจำนวนมาก แต่ไม่เป็นความจริงใน JavaScript

มันเป็นความผิดพลาดที่พบบ่อยในหมู่นักพัฒนา JavaScript ใหม่ที่จะเชื่อว่ารหัสนี้ส่งกลับไม่ได้กำหนด:

ตัวอย่าง

for (var i = 0; i < 10; i++) {
    // some code
}
return i;
ลองตัวเอง»

❮ก่อนหน้า ถัดไปบท❯