ข้อมูลเบื้องต้นเกี่ยวกับ JavaScript

ถึงแม้ว่าจะตั้งชื่อแล้ว แต่ JavaScript ก็มีความเกี่ยวข้องกับ Java ตรงที่ทั้งคู่มีความคล้ายคลึงกันในด้านไวยากรณ์ ไวยากรณ์ของ JavaScript ในการพัฒนาในช่วงแรกได้รับแรงบันดาลใจมาจากไวยากรณ์ของ Java อย่างคร่าวๆ และมีชื่อว่า "LiveScript" เมื่อมีการให้บริการในเวอร์ชันเบต้าของ Netscape Navigator เป็นครั้งแรกในปี 1995 เพื่อให้สอดคล้องกับข้อเสนออื่นๆ ที่ตั้งชื่อของ Netscape และเป็นการพิสูจน์ข้อเท็จจริงที่ว่ามีการทำงาน "สด" ในเบราว์เซอร์ Microsoft ได้เปิดตัวการใช้งาน JavaScript "JScript" ด้วยตนเองหลังจากนั้นไม่นานกับ Internet Explorer 3.0

Netscape ส่งผลงานช่วงแรกๆ นี้ไปยัง Ecma International ซึ่งเป็นองค์กรที่พัฒนาและเผยแพร่มาตรฐานทางเทคนิค เพื่อสร้างรายละเอียดและอธิบายว่าเบราว์เซอร์อื่นๆ ควรเข้าใจภาษาสคริปต์นี้อย่างไร ในปี 1997 นั้น Ecma International เปิดตัว ECMA-262 โดยเป็นมาตรฐานของภาษาสคริปต์เวอร์ชันแรกที่เรียกว่า ECMAScript ECMAScript เป็นมาตรฐานที่ให้ข้อมูลในการสร้างภาษาสคริปต์ที่เฉพาะเจาะจงยิ่งขึ้น เช่น ก่อนหน้านี้ Microsoft สามารถทำงานกับ JScript, Action ของ Adobe และ JavaScript ที่ปิดให้บริการแล้วในภายหลังได้

ความแตกต่างนี้มีความสำคัญเมื่อพูดถึงแง่มุมและฟีเจอร์เฉพาะของ JavaScript "ES5" หมายถึงการเผยแพร่มาตรฐาน ECMAScript เวอร์ชันหลัก "เวอร์ชัน" ครั้งแรกในปี 2009 ตามด้วยการพัฒนาเป็นส่วนๆ หลายปี "ES6" (หรือ "ES2015") ย่อมาจากมาตรฐานที่กำหนดโดย ECMAScript รุ่นที่ 6 ซึ่งเผยแพร่ในปี 2015 หลัง ES6 เราได้เผยแพร่มาตรฐาน ECMAScript รุ่นใหม่ทุกปี โดยมีการเปลี่ยนแปลงและเพิ่มเติมในแต่ละรุ่นซึ่งหมายถึงปี เช่น "ES2016" หรือ "ES2017"

กฎพื้นฐาน

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

เมื่ออินเทอร์พรีเตอร์ของ JavaScript ได้รับสคริปต์ จะเริ่มการวิเคราะห์คำศัพท์ แยกวิเคราะห์สตริงอักขระแบบยาวที่ประกอบขึ้นเป็นสคริปต์ แล้วแปลงเป็นองค์ประกอบอินพุตที่แยกจากกันดังต่อไปนี้

• โทเค็น
• อักขระควบคุมการจัดรูปแบบ
• เครื่องหมายสิ้นสุดเส้น
• ความคิดเห็น
• ช่องว่าง (มักจะหมายถึงแท็บและการเว้นวรรค)

ผลลัพธ์ของสคริปต์จะไม่ปรากฏหลังจากโหลดซ้ำหรือออกจากหน้าปัจจุบัน เว้นแต่คุณจะระบุวิธีการอย่างชัดแจ้งในสคริปต์

ในระดับสูง แอปพลิเคชัน JavaScript ประกอบด้วยคำสั่งและนิพจน์

คำชี้แจง

คำสั่งคือหน่วยคำสั่งที่ประกอบด้วยโค้ดอย่างน้อย 1 บรรทัดที่แสดงถึงการดำเนินการ ตัวอย่างเช่น คุณใช้คำสั่งต่อไปนี้เพื่อกําหนดค่าให้กับตัวแปรชื่อ myVariable ได้

let myVariable = 4;

myVariable;
> 4

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

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

บล็อกใบแจ้งยอด

คำสั่งบล็อกจะจัดกลุ่มคำสั่งและการประกาศจำนวนเท่าใดก็ได้ภายในวงเล็บปีกกาคู่หนึ่ง ({}) ซึ่งช่วยให้คุณรวมคำสั่งในที่ที่ JavaScript คาดว่าจะพบเพียงรายการเดียว

สิ่งที่คุณจะเห็นคือคำสั่งบล็อกบ่อยที่สุดควบคู่ไปกับคำสั่งขั้นตอนควบคุม เช่น if

if ( x === 2 ) {
  //some behavior;
}

นิพจน์

นิพจน์คือหน่วยของโค้ดที่แสดงผลลัพธ์เป็นค่า จึงสามารถใช้ได้ทุกที่ที่ต้องการค่า 2 + 2 คือนิพจน์ที่ให้ผลลัพธ์เป็นค่า 4 ดังนี้

2 + 2;
> 4

"โอเปอเรเตอร์การจัดกลุ่ม" ซึ่งเป็นคู่วงเล็บปิดที่ตรงกันจะใช้ในการจัดกลุ่มส่วนต่างๆ ของนิพจน์เพื่อให้ประเมินส่วนหนึ่งของนิพจน์เป็นหน่วยเดียว เช่น คุณอาจใช้โอเปอเรเตอร์การจัดกลุ่มเพื่อoverride the mathematical order of operations หรือปรับปรุงโค้ดให้อ่านง่ายขึ้น

2 + 2 * 4;
> 10

( 2 + 2 ) * 4;
> 16

let myVariable = ( 2 + 2 );

myVariable;
> 4

การพิมพ์ที่ไม่รัดกุม

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

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

>>> "1" + 1
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
TypeError: cannot concatenate 'str' and 'int' objects

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

"1" + 1;
> "11"

นอกจากนี้ ยังสามารถเปลี่ยนแปลงประเภทข้อมูลอย่างชัดแจ้งได้อีกด้วย ตัวอย่างต่อไปนี้บังคับให้ค่าตัวเลข 100 เป็นค่าสตริงเป็น "100" โดยใช้เมธอด toString ในตัวของ JavaScript

let myVariable = 100;

typeof myVariable;
> "number"

myVariable = myVariable.toString();
> "100"

typeof myVariable;
> "string"

คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่

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

console.log( "Log this." );
> Log this.

console.Log( "Log this too." );
> Uncaught TypeError: console.Log is not a function

const myVariable = 2;

myvariable;
> Uncaught ReferenceError: variablename is not defined

myVariable;
> 2

ช่องว่าง

JavaScript ไม่คำนึงถึงช่องว่าง ซึ่งหมายความว่าล่ามไม่สนใจจำนวนและประเภท (แท็บหรือเว้นวรรค) ของช่องว่างที่ใช้

                     console.log(       "Log this"  );console.log("Log this too");
> "Log this."
> "Log this too."

อย่างไรก็ตาม การมีอยู่ของช่องว่างอาจมีนัยสำคัญเป็นเครื่องหมายคั่นระหว่างโทเค็นคลัง ดังนี้

let x;

[โทเค็น: [let] [x] ]

letx;
> Uncaught ReferenceError: letx is not defined

[โทเค็น: [letx] ]

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

let           x                             =                           2;

[โทเค็น: [let] [x] [=] [2] ]

การขึ้นบรรทัดใหม่ก็เช่นกัน แม้ว่าจะมีบางกรณีที่การขึ้นบรรทัดใหม่อาจทำให้เกิดปัญหาโดยการสิ้นสุดข้อความก่อนกำหนด)

let x
=
2;

[โทเค็น: [let] [x] [=] [2] ]

วิธีการพูดตามหลักการ ข้อความบางประเภทมักอยู่ในบรรทัดเดียว

let x = 1;
let y = 2;

บางข้อความมักจะใช้หลายบรรทัด แต่ข้อความต่อไปนี้

if ( x == 2 ) {
  //some behavior;
}

อย่างไรก็ตาม แบบแผนเหล่านี้มีไว้เพื่อช่วยให้อ่านได้ง่าย JavaScript จะตีความตัวอย่างก่อนหน้านี้ในลักษณะเดียวกับข้อความต่อไปนี้

let x=1;let y=2;

if(x==2){}

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

การใช้อักขระช่องว่างใน JavaScript ส่วนมากแล้วจะขึ้นอยู่กับค่ากำหนดของผู้เขียนและผู้ดูแลรักษา โปรเจ็กต์ JavaScript ที่มีนักพัฒนาซอฟต์แวร์หลายรายร่วมเขียนโค้ดมักจะแนะนำหรือบังคับใช้กฎการเว้นวรรคบางอย่างเพื่อให้การจัดรูปแบบโค้ดสอดคล้องกัน เช่น การใช้แท็บหรือการเว้นวรรคเพื่อเยื้องคำสั่งที่ซ้อนกัน ดังนี้

let myVariable = 10;

if ( typeof myVariable === "number" ) {
    console.log( "This variable is a number." );
    if( myVariable > 5 ) {
     console.log( "This variable is greater than five." );
    }
}

> "This variable is a number."
> "This variable is greater than five."

ทดสอบความเข้าใจ

นิพจน์คืออะไร

หน่วยของรหัสที่ให้ผลลัพธ์เป็นค่า

ความคิดเห็นที่อธิบายหน้าที่ของโค้ด

กลุ่มของข้อความและประกาศ

JavaScript จะพิจารณาตัวพิมพ์เล็กและตัวพิมพ์ใหญ่

จริง

เท็จ