บทช่วยสอนในส่วนนี้เกี่ยวกับจาวาสคริปต์หลัก ซึ่งเป็นภาษานั้นเอง
แต่เราจำเป็นต้องมีสภาพแวดล้อมการทำงานเพื่อเรียกใช้สคริปต์ของเรา และเนื่องจากหนังสือเล่มนี้ออนไลน์อยู่ เบราว์เซอร์จึงเป็นตัวเลือกที่ดี เราจะรักษาจำนวนคำสั่งเฉพาะเบราว์เซอร์ (เช่น alert ) ให้น้อยที่สุด เพื่อที่คุณจะได้ไม่ต้องเสียเวลากับคำสั่งเหล่านี้ หากคุณวางแผนที่จะมุ่งความสนใจไปที่สภาพแวดล้อมอื่น (เช่น Node.js) เราจะเน้นที่ JavaScript ในเบราว์เซอร์ในส่วนถัดไปของบทช่วยสอน
ก่อนอื่น เรามาดูกันว่าเราแนบสคริปต์กับหน้าเว็บอย่างไร สำหรับสภาพแวดล้อมฝั่งเซิร์ฟเวอร์ (เช่น Node.js) คุณสามารถรันสคริปต์ด้วยคำสั่งเช่น "node my.js"
โปรแกรม JavaScript สามารถแทรกได้เกือบทุกที่ในเอกสาร HTML โดยใช้แท็ก <script>
ตัวอย่างเช่น:
<!DOCTYPE HTML>
<html>
<ร่างกาย>
<p>ก่อนสคริปต์...</p>
<สคริปต์>
alert( 'สวัสดีชาวโลก!' );
</สคริปต์>
<p>...หลังสคริปต์</p>
</ร่างกาย>
</html>คุณสามารถเรียกใช้ตัวอย่างได้โดยคลิกปุ่ม "เล่น" ที่มุมขวาบนของช่องด้านบน
แท็ก <script> มีโค้ด JavaScript ซึ่งจะดำเนินการโดยอัตโนมัติเมื่อเบราว์เซอร์ประมวลผลแท็ก
แท็ก <script> มีคุณลักษณะบางอย่างที่ไม่ค่อยได้ใช้ในปัจจุบัน แต่ยังสามารถพบได้ในโค้ดเก่า:
แอตทริบิวต์ type : <script type =…>
มาตรฐาน HTML เก่า HTML4 กำหนดให้สคริปต์ต้องมี type โดยปกติแล้วมันจะเป็น type="text/javascript" มันไม่จำเป็นอีกต่อไป นอกจากนี้มาตรฐาน HTML สมัยใหม่ยังเปลี่ยนความหมายของคุณลักษณะนี้โดยสิ้นเชิง ตอนนี้คุณสามารถใช้สำหรับโมดูล JavaScript แล้ว แต่นั่นเป็นหัวข้อขั้นสูง เราจะพูดถึงโมดูลในส่วนอื่นของบทช่วยสอน
แอตทริบิวต์ language : <script language =…>
คุณลักษณะนี้มีไว้เพื่อแสดงภาษาของสคริปต์ คุณลักษณะนี้ไม่สมเหตุสมผลอีกต่อไปเนื่องจาก JavaScript เป็นภาษาเริ่มต้น ไม่จำเป็นต้องใช้มัน
ความคิดเห็นก่อนและหลังสคริปต์
ในหนังสือและคู่มือโบราณ คุณอาจพบความคิดเห็นภายในแท็ก <script> เช่นนี้:
<script type="text/javascript"><!--
-
//--></สคริปต์> เคล็ดลับนี้ไม่ได้ใช้ใน JavaScript สมัยใหม่ ความคิดเห็นเหล่านี้ซ่อนโค้ด JavaScript จากเบราว์เซอร์เก่าที่ไม่รู้วิธีประมวลผลแท็ก <script> เนื่องจากเบราว์เซอร์ที่เปิดตัวในช่วง 15 ปีที่ผ่านมาไม่มีปัญหานี้ ความคิดเห็นประเภทนี้จึงสามารถช่วยคุณระบุโค้ดเก่าได้
หากเรามีโค้ด JavaScript จำนวนมาก เราสามารถแยกมันออกเป็นไฟล์แยกต่างหากได้
ไฟล์สคริปต์แนบมากับ HTML ด้วยแอตทริบิวต์ src :
<script src="/path/to/script.js"></script>
ที่นี่ /path/to/script.js เป็นเส้นทางที่แน่นอนไปยังสคริปต์จากรูทของไซต์ ท่านสามารถระบุเส้นทางสัมพันธ์จากหน้าปัจจุบันได้ ตัวอย่างเช่น src="script.js" เช่นเดียวกับ src="./script.js" จะหมายถึงไฟล์ "script.js" ในโฟลเดอร์ปัจจุบัน
เราสามารถให้ URL แบบเต็มได้เช่นกัน ตัวอย่างเช่น:
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
หากต้องการแนบหลายสคริปต์ ให้ใช้หลายแท็ก:
<script src="/js/script1.js"></script> <script src="/js/script2.js"></script> -
โปรดทราบ:
ตามกฎแล้ว เฉพาะสคริปต์ที่ง่ายที่สุดเท่านั้นที่จะใส่ลงใน HTML ไฟล์ที่ซับซ้อนกว่าจะอยู่ในไฟล์แยกกัน
ประโยชน์ของไฟล์แยกต่างหากคือเบราว์เซอร์จะดาวน์โหลดและจัดเก็บไว้ในแคช
หน้าอื่นๆ ที่อ้างอิงถึงสคริปต์เดียวกันจะถูกดึงจากแคชแทนที่จะดาวน์โหลดไฟล์ ดังนั้นไฟล์จึงถูกดาวน์โหลดเพียงครั้งเดียวเท่านั้น
ซึ่งจะช่วยลดปริมาณการเข้าชมและทำให้เพจเร็วขึ้น
หากตั้งค่า src เนื้อหาสคริปต์จะถูกละเว้น
แท็ก <script> เดียวไม่สามารถมีทั้งแอตทริบิวต์ src และโค้ดภายในได้
สิ่งนี้จะไม่ทำงาน:
<script src="file.js"> การแจ้งเตือน (1); // เนื้อหาจะถูกละเว้น เนื่องจากมีการตั้งค่า src </สคริปต์>
เราต้องเลือก <script src="…"> ภายนอกหรือ <script> ปกติพร้อมโค้ด
ตัวอย่างข้างต้นสามารถแบ่งออกเป็นสองสคริปต์เพื่อให้ทำงานได้:
<script src="file.js"></script> <สคริปต์> การแจ้งเตือน(1); </สคริปต์>
เราสามารถใช้แท็ก <script> เพื่อเพิ่มโค้ด JavaScript ให้กับเพจได้
ไม่จำเป็นต้องมีแอตทริบิวต์ type และ language
สามารถแทรกสคริปต์ในไฟล์ภายนอกด้วย <script src="path/to/script.js"></script>
มีอะไรอีกมากมายให้เรียนรู้เกี่ยวกับสคริปต์ของเบราว์เซอร์และการโต้ตอบกับหน้าเว็บ แต่โปรดจำไว้ว่าส่วนนี้ของบทช่วยสอนนั้นเน้นไปที่ภาษา JavaScript ดังนั้นเราจึงไม่ควรหันเหความสนใจไปที่การใช้งานเฉพาะเบราว์เซอร์ เราจะใช้เบราว์เซอร์เป็นวิธีเรียกใช้ JavaScript ซึ่งสะดวกมากสำหรับการอ่านออนไลน์ แต่เป็นเพียงหนึ่งในหลาย ๆ
ความสำคัญ: 5
สร้างเพจที่แสดงข้อความ “ฉันชื่อ JavaScript!”
ทำมันในแซนด์บ็อกซ์หรือบนฮาร์ดไดรฟ์ของคุณไม่สำคัญ แค่ให้แน่ใจว่ามันใช้งานได้
การสาธิตในหน้าต่างใหม่
<!DOCTYPE html>
<html>
<ร่างกาย>
<สคริปต์>
alert( "ฉันชื่อ JavaScript!" );
</สคริปต์>
</ร่างกาย>
</html>เปิดโซลูชันในแซนด์บ็อกซ์
ความสำคัญ: 5
ดำเนินการแก้ไขปัญหาของงานก่อนหน้า แสดงการแจ้งเตือน แก้ไขโดยแตกเนื้อหาสคริปต์ลงในไฟล์ภายนอก alert.js ซึ่งอยู่ในโฟลเดอร์เดียวกัน
เปิดหน้าดังกล่าว ตรวจสอบให้แน่ใจว่าการแจ้งเตือนใช้งานได้
รหัส HTML:
<!DOCTYPE html> <html> <ร่างกาย> <script src="alert.js"></script> </ร่างกาย> </html>
สำหรับไฟล์ alert.js ในโฟลเดอร์เดียวกัน:
alert("ฉันชื่อ JavaScript!");