บทความนี้มุ่งเป้าไปที่ผู้เริ่มต้นใช้งาน JavaScript และมีการรวบรวมความรู้ทั่วไปและเคล็ดลับที่เป็นประโยชน์สำหรับการเรียนรู้ภาษา ฉันรวบรวมข้อมูลเชิงลึกเหล่านี้จากบทความและความคิดเห็นต่างๆ ที่ฉันอ่านในขณะที่เรียนรู้ JavaScript ด้วยตัวเอง ฉันหวังว่าคุณจะพบว่าข้อมูลนี้มีประโยชน์ในการเดินทาง JavaScript ของคุณเอง

จาวาสคริปต์คืออะไร?

JavaScript เป็นภาษาสคริปต์เว็บที่ได้รับความนิยมมากที่สุด ใช้สำหรับการพัฒนาทั้งฝั่งไคลเอนต์และฝั่งเซิร์ฟเวอร์ รองรับความสามารถในการเขียนโปรแกรมเชิงวัตถุ โค้ด JavaScript สามารถแทรกลงในหน้า HTML ที่เว็บเบราว์เซอร์สามารถเข้าใจและดำเนินการได้

ECMAscript คืออะไร?

ECMAScript (สคริปต์สมาคมผู้ผลิตคอมพิวเตอร์แห่งยุโรป) เป็นภาษาสคริปต์ที่ใช้ Javascript ECMAScript เป็นภาษาโปรแกรมมาตรฐานโดย ECMA International ส่วนใหญ่จะใช้สำหรับสร้างสคริปต์ฝั่งไคลเอ็นต์ที่ทำงานในเว็บเบราว์เซอร์ แต่ยังใช้ในสภาพแวดล้อมอื่นๆ เช่น Node.js และ Apache CouchDB ECMAScript เป็นเวอร์ชันมาตรฐานของภาษาการเขียนโปรแกรม JavaScript ที่ได้รับความนิยม และคำสองคำนี้มักจะใช้แทนกันได้ ECMAScript เพิ่มคุณสมบัติใหม่ให้กับภาษาเป็นประจำทุกปี โดยเวอร์ชันล่าสุดคือ ECMAScript 2021

ความแตกต่างระหว่างตัวดำเนินการ “==” และ “===”

ข้อแตกต่างที่สำคัญระหว่างตัวดำเนินการ “==” และ “===” ในจาวาสคริปต์คือตัวดำเนินการ == ทำการแปลงประเภทของตัวถูกดำเนินการก่อนการเปรียบเทียบ ในขณะที่ตัวดำเนินการ === จะเปรียบเทียบค่าและประเภทข้อมูลของ ตัวดำเนินการ

JavaScript รองรับประเภทข้อมูลใดบ้าง

• ไม่ได้กำหนด
• โมฆะ
• บูลีน
• วัตถุ
• สตริง
• สัญลักษณ์
• ตัวเลข

การปิดใน JavaScrpt เป็นฟังก์ชันภายในฟังก์ชันอื่น ฟังก์ชันภายในสามารถเข้าถึงตัวแปรของตัวเอง ตัวแปรที่กำหนดในฟังก์ชันภายนอก เช่นเดียวกับตัวแปรส่วนกลาง

let a = 5;
function outher(){
 let b = 8
    function inner(){
        let c = 3;
        console.log(a + b + c);
    }
    inner();
}
outher();

ใน JavaScript NaN ย่อมาจาก Not-a-Number ใน JavaScript NaN เป็นตัวเลขที่ไม่ใช่ตัวเลขตามกฎหมาย คุณสมบัติ Global NaN เหมือนกับ Number

คุณจะสร้าง onject ใน Javascript ได้อย่างไร?

let person = {
name : "Umut",
age : 27,
isHappy: true
}

const cars = ["Saab", "Volvo", "BMW"];
const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";
const cars = new Array("Saab", "Volvo", "BMW");

• ภาษาการเขียนโปรแกรมที่มีน้ำหนักเบาและตีความได้
• เข้ากันได้ข้ามแพลตฟอร์ม
• โอเพ่นซอร์ส
• เชิงวัตถุ
• การผสานรวมกับเทคโนโลยีส่วนหลังและส่วนหน้าอื่น ๆ
• ใช้โดยเฉพาะสำหรับการพัฒนาแอปพลิเคชันบนเครือข่าย

ขอบเขตใน JavaScript หมายถึงบริบทปัจจุบันของโค้ด ซึ่งกำหนดความสามารถในการเข้าถึงตัวแปรของ JavaScript

1. ขอบเขตทั่วโลก:
2. ตัวแปรส่วนกลางที่มีขอบเขตส่วนกลางมีอยู่ทุกที่ในโค้ด JavaScript
3. พูดง่ายๆ ตัวแปรที่สามารถเข้าถึงได้จากทุกที่ในโปรแกรมเรียกว่าตัวแปรที่มีขอบเขตส่วนกลาง ตัวแปรที่กำหนดขอบเขตทั่วโลกสามารถกำหนดได้โดยใช้คำหลักใดๆ จากสามคำ: let, const และ var

• ตัวแปรโลคัลสามารถเข้าถึงได้ภายในฟังก์ชันที่กำหนดไว้เท่านั้น หากคุณพยายามเข้าถึงตัวแปรใดๆ ที่กำหนดไว้ภายในฟังก์ชันจากภายนอกหรือฟังก์ชันอื่น จะเกิดข้อผิดพลาด

• เนื่องจากคุณไม่สามารถเข้าถึงตัวแปรโลคัลจากภายนอกฟังก์ชันได้ คุณจึงสามารถมีตัวแปรชื่อเดียวกันในฟังก์ชันอื่นได้เช่นกัน

• ก่อนที่จะเปิดตัว ES6 (ECMAScript 6) ในปี 2558 JavaScript มีขอบเขตเพียงสองประเภทเท่านั้น: ขอบเขตส่วนกลางและขอบเขตภายใน
• ด้วยการเปิดตัวคำหลัก let และ const ทำให้เพิ่มขอบเขตประเภทใหม่ใน JavaScript คุณไม่สามารถเข้าถึงตัวแปรที่ประกาศภายในบล็อกเฉพาะ (แสดงโดย {}) จากภายนอกบล็อก

• ด้วยการสร้างแต่ละฟังก์ชันใหม่ จะสร้างขอบเขตใหม่ใน JavaScript คุณไม่สามารถเข้าถึงตัวแปรที่กำหนดภายในฟังก์ชันจากภายนอกฟังก์ชันหรือจากฟังก์ชันอื่นได้ Var, let และ const ทำงานคล้ายกันเมื่อใช้ภายในฟังก์ชัน


let myFunction = (a, b) => a * b;
hello = () => {
  return "Hello World!";
}

คำหลัก 'นี้' ใน JavaScript หมายถึงวัตถุที่กำลังเรียก มักใช้ในตัวสร้างเพื่อกำหนดค่าให้กับคุณสมบัติของวัตถุ

// Regular Function:
hello = function() {
  document.getElementById("demo").innerHTML += this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);

var และ let ใช้สำหรับการประกาศตัวแปรในจาวาสคริปต์ แต่ข้อแตกต่างระหว่างตัวแปรทั้งสองคือ var เป็นฟังก์ชันที่กำหนดขอบเขต และปล่อยให้เป็นบล็อกกำหนดขอบเขต



ประเภทของข้อผิดพลาดในจาวาสคริปต์

ข้อผิดพลาด JavaScript มี 7 ประเภท:

• ข้อผิดพลาดทางไวยากรณ์
• ข้อผิดพลาดในการอ้างอิง
• พิมพ์ผิด
• ข้อผิดพลาดในการประเมิน
• ข้อผิดพลาดช่วง
• ข้อผิดพลาด URI
• ข้อผิดพลาดภายใน


Document Object Model (DOM) เป็นอินเทอร์เฟซการเขียนโปรแกรมสำหรับเอกสารบนเว็บ เป็นตัวแทนของหน้าเพื่อให้โปรแกรมสามารถเปลี่ยนโครงสร้างรูปแบบและเนื้อหาของเอกสารได้ DOM แสดงเอกสารเป็นโหนดและวัตถุ ด้วยวิธีนี้ ภาษาโปรแกรมสามารถโต้ตอบกับเพจได้



ความแตกต่างระหว่างแอตทริบิวต์และคุณสมบัติในวานิลลา JS

ใน JavaScript (DOM จริงๆ) องค์ประกอบมีแอตทริบิวต์และคุณสมบัติ คำเหล่านี้มักใช้แทนกันได้ แต่จริง ๆ แล้วเป็นสองสิ่งที่แยกจากกัน
แอตทริบิวต์คือสถานะเริ่มต้นเมื่อแสดงผลใน DOM คุณสมบัติคือสถานะปัจจุบัน
ในกรณีส่วนใหญ่ แอตทริบิวต์และคุณสมบัติจะถูกซิงค์โดยอัตโนมัติ ตัวอย่างเช่น เมื่อคุณใช้ setAttribute() เพื่ออัปเดตแอตทริบิวต์ ID คุณสมบัติ id จะถูกอัปเดตเช่นกัน

let p = document.querySelector('p');

// Update the ID
p.setAttribute('id', 'first-paragraph');

// These both return "first-paragraph"
let id1 = p.getAttribute('id');
let id2 = p.id;

เมธอดการโทร การผูก และการนำไปใช้ทั้งสามตั้งค่าอาร์กิวเมนต์นี้เป็นฟังก์ชัน

• เมธอดการโทรและนำไปใช้ตั้งค่านี้เป็นฟังก์ชันและเรียกใช้ฟังก์ชัน
• วิธีการผูกจะตั้งค่านี้เป็นฟังก์ชันเท่านั้น เราจะต้องเรียกใช้ฟังก์ชันแยกต่างหาก

เมธอดการโทรผูกค่านี้กับฟังก์ชันและเรียกใช้ฟังก์ชัน ใช้ค่านี้และรายการอาร์กิวเมนต์เป็นพารามิเตอร์ จากนั้นจะส่งกลับค่าที่ส่งกลับโดยฟังก์ชัน ซึ่งเรียกโดยใช้เมธอดการโทร

function test(arg1, arg2){
  console.log(this.num, arg1, arg2); // 100, 10, 20
}

test.call({num: 100}, 10, 20);

นำมาใช้

วิธีการสมัครผูกค่านี้กับฟังก์ชันและเรียกใช้ฟังก์ชัน ใช้ค่านี้และออบเจกต์อาร์เรย์เดียวเป็นพารามิเตอร์ และส่งคืนค่าที่ส่งคืนโดยฟังก์ชัน ซึ่งเรียกโดยใช้เมธอด apply

function test(...arguments){
  console.log(this.num, arguments);//100, [1,2,3]
}

test.apply({num: 100}, [1,2,3]);
// call() and apply() are identical in functionality,
// the only difference is that call() accepts a list of arguments;
// whereas, apply() accepts a single array of arguments.

วิธีผูกผูกค่านี้กับฟังก์ชันและส่งกลับฟังก์ชันใหม่ อย่างไรก็ตาม เรายังจำเป็นต้องเรียกใช้ฟังก์ชันที่ส่งคืนแยกต่างหาก

function test(arg){
 console.log(this.number, arg);
}

let bindedFn = test.bind({number: 99}, "argument");

bindedFn(); // 99, "argument"

อะไรคือความแตกต่างระหว่าง for และ foreach loop ในจาวาสคริปต์

• เมธอด forEach ไม่มีเงื่อนไข ดังนั้นเมธอดนี้จะรันสำหรับแต่ละอิลิเมนต์ในอาร์เรย์เสมอ แม้ว่าอาร์เรย์จะว่างเปล่าก็ตาม ในทางกลับกัน for loop จะไม่ทำงานหากไม่ตรงตามเงื่อนไข
• เมธอด forEach เป็นวิธีที่ยอดเยี่ยมในการวนซ้ำอาร์เรย์ อ่านและทำความเข้าใจได้ง่ายกว่า for loop และคุณไม่ต้องสร้างตัวแปรตัวนับลูป อย่างไรก็ตาม มีบางสถานการณ์ที่คุณควรใช้ for วนซ้ำเมธอด forEach

for (initialization; condition; increment)  
{  
   // code to be executed
}
for (let i = 1; i <= 5; i++)
{
    document.write(i + "<br/>");
}
numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number) {
   // code to be executed
   document.write(number + "<br/>");
});
//same output
1
2
3
4
5