JS กวดวิชา

เจเอสโฮม JS Introduction JS Where To JS เอาท์พุต งบ JS JS ไวยากรณ์ JS ความคิดเห็น ตัวแปร JS เจเอส เลท JS Const JS Operators JS เลขคณิต JS Assignment ประเภทข้อมูล JS ฟังก์ชัน JS วัตถุ JS JS Events JS Strings JS String Methods JS String Search เทมเพลตสตริง JS JS Numbers JS Number Methods JS Arrays JS Array Methods JS Array Sort JS Array Iteration JS Array Const JS Dates รูปแบบวันที่ JS JS วันที่รับเมธอด JS Date Set Methods JS Math JS สุ่ม JS Booleans JS เปรียบเทียบ JS Conditions JS Switch JS ลูปสำหรับ JS Loop สำหรับ In JS วนสำหรับ Of JS วนรอบในขณะที่ JS Break JS Iterables JS ชุด JS Maps JS Typeof JS ประเภทการแปลง JS Bitwise JS RegExp JS Errors JS ขอบเขต JS Hoisting JS โหมดเข้มงวด JS คำสำคัญนี้ JS Arrow Function JS Classes JS JSON JS Debugging คู่มือสไตล์ JS JS แนวทางปฏิบัติที่ดีที่สุด JS ความผิดพลาด JS Performance JS สงวนคำ

เวอร์ชัน JS

เวอร์ชัน JS JS 2009 (ES5) เจเอส 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / ขอบ JS History

วัตถุ JS

คำจำกัดความของวัตถุ คุณสมบัติของวัตถุ วิธีการวัตถุ การแสดงวัตถุ อุปกรณ์เสริมวัตถุ ตัวสร้างวัตถุ ต้นแบบวัตถุ วัตถุ Iterables ชุดวัตถุ แผนที่วัตถุ การอ้างอิงวัตถุ

ฟังก์ชัน JS

คำจำกัดความของฟังก์ชัน พารามิเตอร์ฟังก์ชัน เรียกใช้ฟังก์ชัน เรียกฟังก์ชัน ฟังก์ชัน สมัคร การปิดฟังก์ชัน

JS Classes

แนะนำคลาส การสืบทอดคลาส คลาสคงที่

JS Async

JS Callbacks JS แบบอะซิงโครนัส JS Promises JS Async/รอ

JS HTML DOM

บทนำ DOM วิธี DOM เอกสาร DOM องค์ประกอบ DOM DOM HTML แบบฟอร์ม DOM DOM CSS ภาพเคลื่อนไหว DOM กิจกรรม DOM DOM Event Listener การนำทาง DOM โหนด DOM DOM Collections รายการโหนด DOM

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

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

JS Web APIs

แนะนำ Web API เว็บฟอร์ม API API ประวัติเว็บ API ที่เก็บข้อมูลเว็บ Web Worker API API ดึงเว็บ เว็บ Geolocation API

JS AJAX

บทนำ AJAX AJAX XMLHttp คำขอ AJAX การตอบสนอง AJAX ไฟล์ AJAX XML AJAX PHP AJAX ASP ฐานข้อมูล AJAX แอปพลิเคชัน AJAX ตัวอย่าง AJAX

JS JSON

บทนำ JSON ไวยากรณ์ JSON JSON กับ XML ประเภทข้อมูล JSON JSON Parse JSON สตริงริฟาย วัตถุ JSON อาร์เรย์ JSON เซิร์ฟเวอร์ JSON JSON PHP JSON HTML JSON JSONP

JS กับ jQuery

ตัวเลือก jQuery jQuery HTML jQuery CSS jQuery DOM

JS กราฟิก

JS กราฟิก JS Canvas JS Plotly JS Chart.js JS Google Chart JS D3.js

ตัวอย่าง JS

ตัวอย่าง JS JS HTML DOM JS HTML อินพุต JS HTML Objects JS HTML Events JS Browser JS Editor JS แบบฝึกหัด JS Quiz ใบรับรอง JS

JS References

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


คุณสมบัติอ็อบเจ็กต์ JavaScript


คุณสมบัติเป็นส่วนที่สำคัญที่สุดของวัตถุ JavaScript


คุณสมบัติจาวาสคริปต์

คุณสมบัติเป็นค่าที่เกี่ยวข้องกับวัตถุ JavaScript

วัตถุ JavaScript คือชุดของคุณสมบัติที่ไม่เรียงลำดับ

คุณสมบัติมักจะสามารถเปลี่ยนแปลง เพิ่ม และลบได้ แต่คุณสมบัติบางอย่างเป็นแบบอ่านอย่างเดียว


การเข้าถึงคุณสมบัติ JavaScript

ไวยากรณ์สำหรับการเข้าถึงคุณสมบัติของวัตถุคือ:

objectName.property      // person.age

หรือ

objectName["property"]   // person["age"]

หรือ

objectName[expression]   // x = "age"; person[x]

นิพจน์ต้องประเมินเป็นชื่อคุณสมบัติ

ตัวอย่าง 1

person.firstname + " is " + person.age + " years old.";

ตัวอย่าง 2

person["firstname"] + " is " + person["age"] + " years old.";


JavaScript สำหรับ...ในลูป

คำสั่ง JavaScript for...inวนซ้ำคุณสมบัติของวัตถุ

ไวยากรณ์

for (let variable in object) {
  // code to be executed
}

บล็อกของรหัสภายในfor...inลูปจะดำเนินการเพียงครั้งเดียวสำหรับแต่ละคุณสมบัติ

วนรอบคุณสมบัติของวัตถุ:

ตัวอย่าง

const person = {
  fname:" John",
  lname:" Doe",
  age: 25
};

for (let x in person) {
  txt += person[x];
}

การเพิ่มคุณสมบัติใหม่

คุณสามารถเพิ่มคุณสมบัติใหม่ให้กับวัตถุที่มีอยู่ได้โดยเพียงแค่ให้ค่าแก่วัตถุนั้น

สมมติว่าวัตถุบุคคลมีอยู่แล้ว - จากนั้นคุณสามารถให้คุณสมบัติใหม่แก่วัตถุได้:

ตัวอย่าง

person.nationality = "English";

การลบคุณสมบัติ

คำdeleteหลักลบคุณสมบัติออกจากวัตถุ:

ตัวอย่าง

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

delete person.age;

หรือลบบุคคล["อายุ"];

ตัวอย่าง

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

delete person["age"];

คีย์เวิร์ดจะลบ ทั้งdeleteค่าของพร็อพเพอร์ตี้และพร็อพเพอร์ตี้เอง

หลังจากลบแล้ว จะไม่สามารถใช้คุณสมบัตินี้ก่อนที่จะเพิ่มกลับเข้าไปใหม่อีกครั้ง

โอ deleteเปอเรเตอร์ได้รับการออกแบบเพื่อใช้กับคุณสมบัติของอ็อบเจ็กต์ ไม่มีผลกับตัวแปรหรือฟังก์ชัน

deleteไม่ควรใช้ตัวดำเนินการกับคุณสมบัติของวัตถุ JavaScript ที่กำหนดไว้ล่วงหน้า อาจทำให้แอปพลิเคชันของคุณขัดข้อง


ซ้อนวัตถุ

ค่าในวัตถุสามารถเป็นวัตถุอื่นได้:

ตัวอย่าง

myObj = {
  name:"John",
  age:30,
  cars: {
    car1:"Ford",
    car2:"BMW",
    car3:"Fiat"
  }
}

คุณสามารถเข้าถึงวัตถุที่ซ้อนกันโดยใช้เครื่องหมายจุดหรือเครื่องหมายวงเล็บ:

ตัวอย่าง

myObj.cars.car2;

หรือ:

ตัวอย่าง

myObj.cars["car2"];

หรือ:

ตัวอย่าง

myObj["cars"]["car2"];

หรือ:

ตัวอย่าง

let p1 = "cars";
let p2 = "car2";
myObj[p1][p2];

อาร์เรย์และอ็อบเจ็กต์ที่ซ้อนกัน

ค่าในวัตถุสามารถเป็นอาร์เรย์ และค่าในอาร์เรย์สามารถเป็นวัตถุได้:

ตัวอย่าง

const myObj = {
  name: "John",
  age: 30,
  cars: [
    {name:"Ford", models:["Fiesta", "Focus", "Mustang"]},
    {name:"BMW", models:["320", "X3", "X5"]},
    {name:"Fiat", models:["500", "Panda"]}
  ]
}

ในการเข้าถึงอาร์เรย์ภายในอาร์เรย์ ให้ใช้ for-in loop สำหรับแต่ละอาร์เรย์:

ตัวอย่าง

for (let i in myObj.cars) {
  x += "<h1>" + myObj.cars[i].name + "</h1>";
  for (let j in myObj.cars[i].models) {
    x += myObj.cars[i].models[j];
  }
}

คุณสมบัติคุณสมบัติ

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

ค่าเป็นหนึ่งในคุณสมบัติของคุณสมบัติ

คุณลักษณะอื่นๆ ได้แก่ นับได้ กำหนดค่าได้ และเขียนได้

คุณลักษณะเหล่านี้กำหนดวิธีการเข้าถึงคุณสมบัติ (สามารถอ่านได้หรือไม่ เขียนได้หรือไม่)

ใน JavaScript สามารถอ่านแอตทริบิวต์ทั้งหมดได้ แต่สามารถเปลี่ยนได้เฉพาะแอตทริบิวต์ค่าเท่านั้น (และเฉพาะในกรณีที่คุณสมบัติสามารถเขียนได้)

( ECMAScript 5 มีเมธอดสำหรับทั้งการรับและการตั้งค่าแอตทริบิวต์คุณสมบัติทั้งหมด)


คุณสมบัติต้นแบบ

วัตถุ JavaScript สืบทอดคุณสมบัติของต้นแบบ

คีย์เวิร์ดจะไม่ลบคุณสมบัติ ที่deleteสืบทอดมา แต่ถ้าคุณลบคุณสมบัติต้นแบบ จะมีผลกับอ็อบเจ็กต์ทั้งหมดที่สืบทอดมาจากต้นแบบ