Home-theater-designers
JavaScript ได้กลายเป็นแก่นในการพัฒนาเว็บสมัยใหม่ ภาษาที่ทรงพลังนี้ได้พัฒนาเป็นเครื่องมือที่จำเป็นสำหรับนักพัฒนาเว็บทุกคนที่จะเข้าใจ
JavaScript มีคุณสมบัติพิเศษที่ทำให้แตกต่างจากภาษาโปรแกรมทั่วไป เราจะเจาะลึกลงไปว่ามันคืออะไร มันทำงานอย่างไร และคุณสามารถทำอะไรกับมันได้บ้าง มาทำลายมันกันเถอะ
JavaScript คืออะไร?
JavaScript เป็นภาษาสคริปต์สำหรับเว็บ เป็นภาษาที่แปลแล้ว ซึ่งหมายความว่าไม่จำเป็นต้องใช้คอมไพเลอร์ในการแปลโค้ด เช่น C หรือ C++ รหัส JavaScript ทำงานโดยตรงในเว็บเบราว์เซอร์
เวอร์ชันล่าสุดของภาษาคือ ECMAScript 2018 ซึ่งเผยแพร่ในเดือนมิถุนายน 2018
วิธีเชื่อมต่อ wii กับ hdtv
JavaScript ทำงานร่วมกับ HTML และ CSS เพื่อสร้างเว็บแอปหรือหน้าเว็บ JavaScript ได้รับการสนับสนุนโดยเว็บเบราว์เซอร์ที่ทันสมัยส่วนใหญ่ เช่น Google Chrome, Firefox, Safari, Microsoft Edge, Opera เป็นต้น เบราว์เซอร์มือถือส่วนใหญ่สำหรับ Android และ iPhone ในขณะนี้รองรับ JavaScript เช่นกัน
JavaScript ควบคุมองค์ประกอบแบบไดนามิกของหน้าเว็บ ใช้งานได้ในเว็บเบราว์เซอร์และล่าสุดบนเว็บเซิร์ฟเวอร์ด้วย Application Programming Interfaces (API) ยังได้รับการสนับสนุนโดย JavaScript ทำให้คุณมีฟังก์ชันการทำงานมากขึ้น
การทำความเข้าใจวิธีการทำงานของ JavaScript ทั้งหมดจะง่ายขึ้นเล็กน้อยเมื่อคุณเข้าใจวิธีการทำงานของการเขียนโปรแกรมเว็บ ดังนั้นมาเรียนรู้เพิ่มเติมกัน
การสร้างบล็อกของเว็บแอป
มีสามองค์ประกอบที่สร้างเว็บไซต์และแอพ: Hypertext Markup Language (HTML), Cascading Style Sheets (CSS) และ JavaScript แต่ละคนมีบทบาทในการสร้างเว็บแอป
- HTML เป็นภาษามาร์กอัปที่สร้างโครงกระดูกของหน้าเว็บ ย่อหน้า ส่วน รูปภาพ หัวเรื่อง และข้อความทั้งหมดเขียนด้วย HTML เนื้อหาปรากฏบนเว็บไซต์ตามลำดับที่เขียนด้วย HTML
- CSS ควบคุมสไตล์และลักษณะเพิ่มเติมของเค้าโครง CSS ถูกใช้เพื่อสร้างการออกแบบของเว็บไซต์ที่สร้างสี แบบอักษร คอลัมน์ เส้นขอบ ฯลฯ โดยนำเว็บไซต์จากองค์ประกอบข้อความธรรมดาไปสู่การออกแบบที่มีสีสัน
- องค์ประกอบที่สามคือ จาวาสคริปต์ HTML และ CSS สร้างโครงสร้าง แต่ไม่ได้ทำอะไรจากที่นั่น JavaScript สร้างกิจกรรมแบบไดนามิกในแอปของคุณ การเขียนสคริปต์ใน JavaScript คือสิ่งที่ควบคุมการทำงานเมื่อมีการคลิกปุ่ม วิธีตรวจสอบความถูกต้องของแบบฟอร์มรหัสผ่าน วิธีควบคุมสื่อ
ทั้งสามส่วนทำงานร่วมกันเพื่อสร้างแอปเต็มรูปแบบ จะเป็นความคิดที่ดีที่จะเรียนรู้เพิ่มเติมเกี่ยวกับ HTML และ CSS หากคุณไม่สะดวกกับมันเลย
JavaScript ทำงานอย่างไร?
ก่อนที่จะเขียน JavaScript สิ่งสำคัญคือต้องรู้ว่ามันทำงานอย่างไรภายใต้ประทุน มีสองส่วนสำคัญที่ต้องเรียนรู้: วิธีการทำงานของเว็บเบราว์เซอร์ และ Document Object Model (DOM)
เว็บเบราว์เซอร์โหลดหน้าเว็บ แยกวิเคราะห์ HTML และสร้างสิ่งที่เรียกว่า Document Object Model (DOM) จากเนื้อหา DOM นำเสนอมุมมองแบบสดของหน้าเว็บไปยังโค้ด JavaScript ของคุณ
เบราว์เซอร์จะคว้าทุกอย่างที่เชื่อมโยงกับ HTML เช่นรูปภาพและไฟล์ CSS ข้อมูล CSS มาจากตัวแยกวิเคราะห์ CSS
HTML และ CSS ถูกรวมเข้าด้วยกันโดย DOM เพื่อสร้างหน้าเว็บก่อน จากนั้น เอ็นจิ้น JavaScript ของเบราว์เซอร์จะโหลดไฟล์ JavaScript และโค้ดแบบอินไลน์ แต่จะไม่เรียกใช้โค้ดในทันที รอให้ HTML และ CSS โหลดเสร็จ
เมื่อเสร็จแล้ว JavaScript จะดำเนินการตามลำดับที่เขียนโค้ด ส่งผลให้ DOM ได้รับการอัปเดตด้วยโค้ด JavaScript และแสดงผลโดยเบราว์เซอร์
ลำดับที่นี่มีความสำคัญ หาก JavaScript ไม่รอให้ HTML และ CSS ทำงานเสร็จ จะไม่สามารถเปลี่ยนองค์ประกอบ DOM ได้
ฉันจะทำอะไรกับ JavaScript ได้บ้าง
JavaScript เป็นภาษาโปรแกรมเต็มรูปแบบที่สามารถทำสิ่งส่วนใหญ่ที่ภาษาปกติเช่น Python สามารถทำได้ ซึ่งรวมถึง:
เปลี่ยนโทรศัพท์เครื่องเก่าให้เป็นเครื่องติดตามจีพีเอส
- การประกาศตัวแปร
- การจัดเก็บและเรียกค่า
- การกำหนดและเรียกใช้ฟังก์ชัน รวมทั้ง ฟังก์ชั่นลูกศร .
- การกำหนดวัตถุ JavaScript และคลาส
- กำลังโหลดและใช้งานโมดูลภายนอก
- การเขียนตัวจัดการเหตุการณ์ที่ตอบสนองต่อเหตุการณ์การคลิก
- การเขียนโค้ดเซิร์ฟเวอร์
- และอีกมากมาย
คำเตือน: เนื่องจาก JavaScript เป็นภาษาที่ทรงพลัง จึงเป็นไปได้ที่จะเขียนมัลแวร์ ไวรัส และแฮ็กเบราว์เซอร์เพื่อสร้างความเสียหายให้กับผู้ใช้ มีตั้งแต่การขโมยคุกกี้ของเบราว์เซอร์ รหัสผ่าน บัตรเครดิต ไปจนถึงการดาวน์โหลดไวรัสลงในคอมพิวเตอร์ของคุณ
การใช้จาวาสคริปต์
มาดูพื้นฐาน JavaScript บางส่วนพร้อมตัวอย่างโค้ด
การประกาศตัวแปร
JavaScript ถูกพิมพ์แบบไดนามิก ซึ่งหมายความว่าคุณไม่จำเป็นต้องประกาศประเภทของตัวแปรในโค้ดของคุณ
let num = 5;
let myString = 'Hello';
var interestRate = 0.25;
ผู้ประกอบการ
ส่วนที่เพิ่มเข้าไป
12 + 5
>> 17
การลบ
20 - 8
>> 12
การคูณ
5 * 2
>> 10
แผนก
50 / 2
>> 25
โมดูลัส
45 % 4
>> 1
อาร์เรย์
let myArray = [1,2,4,5];
let stringArray = ['hello','world'];
ฟังก์ชั่น
JavaScript สามารถเขียนฟังก์ชันได้ นี่คือฟังก์ชันง่ายๆ ที่เพิ่มตัวเลข
วิธีบังคับปิดแอพบน windows
function addNumbers(num1,num2){
return num1 + num2;
}
>> addNumbers(10,5);
>> 15
ลูป
JavaScript สามารถดำเนินการวนซ้ำวนซ้ำเช่น สำหรับลูป และ ในขณะที่ลูป
for(let i = 0; i <3; i++){
console.log('echo!');
}
>> echo!
>> echo!
>> echo!
let i = 0;
while(i <3) {
console.log('echo!');
i++;
}
>> echo!
>> echo!
>> echo!
ความคิดเห็น
// Writing a comment
/*Writing a multi-line comment
You can use as many lines as you like
to break up text and make comments more readable
*/
ในหน้าเว็บ
วิธีทั่วไปในการโหลด JavaScript ในหน้าเว็บคือการใช้ สคริปต์ แท็ก HTML คุณสามารถใช้วิธีใดวิธีหนึ่งต่อไปนี้ได้ ทั้งนี้ขึ้นอยู่กับความต้องการของคุณ
- โหลดไฟล์ JavaScript ภายนอกลงในหน้าเว็บดังนี้: |_+_|
- คุณสามารถระบุ URL ที่สมบูรณ์ได้หากจาวาสคริปต์มาจากโดเมนอื่นจากหน้าเว็บดังนี้: |_+_|
- JavaScript สามารถฝังลงใน HTML ได้โดยตรง นี่คือ |_+_|
นอกจากวิธีการเหล่านี้แล้ว ยังมีวิธีการโหลดโค้ด JavaScript แบบออนดีมานด์อีกด้วย อันที่จริง มีเฟรมเวิร์กเฉพาะสำหรับการโหลดและรันโมดูล JavaScript ที่มีการขึ้นต่อกันที่เหมาะสมซึ่งได้รับการแก้ไข ณ รันไทม์
นี่เป็นหัวข้อขั้นสูง ตอนนี้คุณกำลังเรียนรู้พื้นฐาน
ตัวอย่างโค้ด JavaScript ตัวอย่าง
ต่อไปนี้คือตัวอย่างโค้ด JavaScript ง่ายๆ บางส่วนเพื่อแสดงให้เห็นวิธีใช้งานบนหน้าเว็บ นี่คือตัวอย่างโค้ดที่ใช้งานได้กับ DOM
- ต่อไปนี้จะเลือกทั้งหมด ตัวหนา ในเอกสารและกำหนดสีขององค์ประกอบแรกเป็นสีแดง |_+_|
- ต้องการเปลี่ยนภาพใน an img แท็ก? ต่อไปนี้เชื่อมโยงตัวจัดการเหตุการณ์สำหรับ คลิก เหตุการณ์ของปุ่ม |_+_|
- อัปเดตเนื้อหาข้อความของย่อหน้า ( NS ) ธาตุ? ตั้งค่า innerHTML คุณสมบัติขององค์ประกอบตามที่แสดง: |_+_|
ตัวอย่างโค้ดเหล่านี้เป็นเพียงภาพรวมคร่าวๆ ของสิ่งที่คุณสามารถทำได้โดยใช้ JavaScript บนหน้าเว็บของคุณ มีบทช่วยสอนมากมายที่สามารถสอนวิธีเขียนโค้ดเพื่อให้คุณเริ่มต้นได้ คุณสามารถทดลองใช้บนหน้าเว็บใดก็ได้ แม้แต่หน้านี้! เปิดคอนโซลของคุณและลองใช้โค้ด JavaScript
ตอนนี้คุณรู้แล้วว่า JavaScript ทำอะไร
หวังว่าบทนำนี้จะให้ข้อมูลเชิงลึกเกี่ยวกับ JavaScript และทำให้คุณรู้สึกตื่นเต้นกับการเขียนโปรแกรมเว็บ คุณสามารถสรุปได้ทั้งหมดใน สูตรโกง JavaScript ที่มีประโยชน์ของเรา . ยังมีอะไรอีกมากมายให้เรียนรู้เกี่ยวกับ JavaScript เมื่อคุณรู้สึกสบายใจขึ้นแล้ว ทำไมไม่ลองเรียนรู้วิธีใช้ Document Object Model ล่ะ คุณอาจสนใจที่จะเรียนรู้เกี่ยวกับ TypeScript
แบ่งปัน แบ่งปัน ทวีต อีเมล วิธีทำความสะอาดพีซี Windows ของคุณโดยใช้พรอมต์คำสั่งหากพีซี Windows ของคุณมีพื้นที่เก็บข้อมูลเหลือน้อย ให้ล้างขยะโดยใช้ยูทิลิตี้ Command Prompt ที่รวดเร็วเหล่านี้
อ่านต่อไป หัวข้อที่เกี่ยวข้อง- เทคโนโลยีอธิบาย
- การเขียนโปรแกรม
- การพัฒนาเว็บ
- JavaScript
- การเขียนสคริปต์
Anthony Grant เป็นนักเขียนอิสระที่ครอบคลุมการเขียนโปรแกรมและซอฟต์แวร์ เขาเป็นวิทยาการคอมพิวเตอร์ที่สำคัญในการเขียนโปรแกรม Excel ซอฟต์แวร์และเทคโนโลยี
เพิ่มเติมจาก Anthony Grantสมัครรับจดหมายข่าวของเรา
เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!
คลิกที่นี่เพื่อสมัครสมาชิก