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

เบราว์เซอร์จะอ่าน JavaScript จากนั้นนิพจน์ที่เขียนจะถูกดำเนินการและดำเนินการจัดการที่ระบุไว้บนเพจ JavaScript มีไวยากรณ์คล้ายกับภาษาโปรแกรมเช่น Java, C++ และ C

JavaScript เป็นผลมาจากการพัฒนาของบริษัทต่างๆ เช่น Sun Microsystems (Oracle) และ Netscape (Mozilla) ชื่อดั้งเดิมของภาษาคือ LiveScript อย่างไรก็ตาม เนื่องจากในขณะนั้นภาษา Java จาก Sun Microsystems ได้รับความนิยมอย่างมาก แผนกการตลาดของ Netscape จึงตัดสินใจเปลี่ยนชื่อภาษาเป็น JavaScript ขณะเดียวกันก็มีความคาดหวังว่าขั้นตอนนี้จะทำให้ภาษาได้รับความนิยมมากขึ้น นอกจากนี้ เมื่อกล่าวถึงเรื่องนี้ ควรสังเกตว่า Java และ JavaScript เป็นภาษาที่แตกต่างกันสองภาษา

ECMA-262 เป็นมาตรฐานอย่างเป็นทางการสำหรับภาษานี้ ชื่อของภาษา JavaScript นี้คือ ECMAScript

หากต้องการเรียนรู้ภาษานี้ ความรู้เดิมเกี่ยวกับ CSS และ Html จะเป็นประโยชน์ หากถึงจุดนี้คุณยังไม่รู้เกี่ยวกับ CSS และ Html คุณควรทำความคุ้นเคยทันที

ข้อจำกัดและความสามารถของ JavaScript

คุณสมบัติต่อไปนี้จะปรากฏขึ้นเมื่อมีการใช้สคริปต์บนหน้าเว็บ:

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

นี่ไม่ใช่รายการคุณลักษณะการเขียนสคริปต์ทั้งหมดที่เขียนในภาษานี้ คุณลักษณะ JavaScript มีความหมายกว้างกว่ามาก

นอกเหนือจากความเป็นไปได้ข้างต้นแล้ว ยังมีข้อจำกัดในการใช้สคริปต์อีกด้วย:

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

ข้อจำกัดดังกล่าวทำให้โค้ดที่เป็นอันตรายดำเนินการได้ยาก

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

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

บางคนถึงกับเปรียบเทียบ JavaScript กับภาษาอื่น Ruby, Self, Python แต่นี่เป็นภาษาที่แยกจากกัน

การใช้จาวาสคริปต์

เมื่อใช้ JavaScript คุณสามารถเปลี่ยนแปลงเพจ เปลี่ยนสไตล์องค์ประกอบ และเพิ่มหรือลบแท็กได้ นอกจากนี้ยังสามารถค้นหาข้อมูลเกี่ยวกับการกระทำของผู้ใช้บนเพจได้ (การลดหรือขยายพื้นที่ทำงานของหน้าจอ, การคลิกด้วยเมาส์, การกดปุ่มใด ๆ , การเลื่อนหน้า) เป็นไปได้ที่จะเข้าถึงองค์ประกอบใด ๆ ของโค้ด Html และจัดการองค์ประกอบนี้ ดังนั้นคำตอบสำหรับคำถาม “JavaScripts คืออะไร” จะสามารถโหลดข้อมูลโดยไม่ต้องโหลดหน้าซ้ำ ใส่ข้อความ ตั้งค่าหรืออ่านคุกกี้ และดำเนินการอื่นๆ อีกมากมาย

พื้นฐานของเอกลักษณ์ของ JavaScript

เอกลักษณ์หลักของภาษานี้คือรองรับโดยเบราว์เซอร์เกือบทั้งหมดและทำงานร่วมกับภาษาเหล่านี้ได้อย่างสมบูรณ์ การดำเนินการทั้งหมดโดยใช้ JavaScript นั้นง่ายมาก ไม่มีเทคโนโลยีอื่นใดที่ให้ประโยชน์ทั้งหมดนี้ ตัวอย่างเช่น ไม่มีเบราว์เซอร์ข้ามเบราว์เซอร์ เบราว์เซอร์บางประเภทไม่รองรับ (ได้แก่ XUL, ActiveX, VBScript) นอกจากนี้ยังมีสิ่งที่ไม่ได้รวมเข้ากับเบราว์เซอร์อย่างสมบูรณ์ เหล่านี้คือ Silverlight, Flash, Java ในขณะนี้ เทคโนโลยีนี้อยู่ระหว่างการพัฒนาที่ยอดเยี่ยม และองค์ประกอบของ JavaScript 2 อยู่ระหว่างการพัฒนา

ภาษาโปรแกรมทางเลือก

มันเกิดขึ้นที่ความสามารถของ JavaScript นั้นมีจำกัด ในกรณีนี้ภาษาการเขียนโปรแกรมต่อไปนี้จะช่วยได้

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

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

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

Silverlight, Vbscript, JavaFX, XUL

เพื่อเสริมความสามารถของ JavaScript เมื่อสร้างอินเทอร์เฟซและการสื่อสาร จึงใช้เทคโนโลยี Silverlight, Vbscript, JavaFX และ XUL
ยังคงมีการใช้บ่อยน้อยกว่า Flash และ JavaScript เพื่อเน้นคุณสมบัติของแต่ละคุณสมบัติเราสามารถพูดได้ดังต่อไปนี้:

XUL - ใช้เพื่ออธิบายแอปพลิเคชันเดสก์ท็อปและอินเทอร์เฟซ แต่จะเป็นไปได้ก็ต่อเมื่อคุณสร้างโปรแกรมสำหรับ Mozilla

JavaFX - ทำงานบนคอมพิวเตอร์ที่ใช้ Java เท่านั้น เนื่องจากเป็นส่วนเสริมของภาษานี้

Vbscript ได้รับการพัฒนาโดย Microsoft Corporation พื้นฐานคือ Visual Basic ภาษานี้ไม่ได้พัฒนาแต่อย่างใด แทบจะไม่ได้ใช้เลยในปัจจุบัน และมีความสามารถด้อยกว่า JavaScript

Silverlight ได้รับการพัฒนาโดย Microsoft ในฐานะคู่แข่งของ Flash ก็ยังไม่ค่อยได้รับความนิยมมากนักเพราะ... สตริง JavaScript สามารถให้การเขียนสคริปต์หน้าได้มากขึ้น

วิธีเปิดใช้งาน JavaScript และข้อผิดพลาด JavaScript คืออะไร

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

วิธีเปิดใช้งาน JavaScript ใน Mozilla Firefox

หากผู้ใช้ทำงานใน Mozilla คุณต้องไปที่ "เครื่องมือ" จากนั้นไปที่ "การตั้งค่า" จากนั้นในแท็บ "เนื้อหา" คุณต้องทำเครื่องหมายที่ช่องถัดจาก "ใช้ JavaScript"

วิธีเปิดใช้งาน JavaScript ใน Google Chrome

หากต้องการเปิดหรือปิดใช้งาน JavaScript ในเบราว์เซอร์นี้ คุณต้องทำตามขั้นตอนเหล่านี้: ตั้งค่าและจัดการ Google Chrom, ตัวเลือก, ขั้นสูง, ส่วนตัว (การตั้งค่าเนื้อหา), JavaScript อนุญาตให้ไซต์ทั้งหมดใช้ JavaScript (แนะนำ)

วิธีเปิดใช้งาน JavaScript ใน Opera

หากต้องการเปิดหรือปิดใช้งาน JavaScript ในเบราว์เซอร์นี้ คุณต้องดำเนินการดังต่อไปนี้:

กดปุ่ม F12

การเลือก “เปิดใช้งาน JavaScript”

วิธีเปิดใช้งาน JavaScript ใน IE (Internet Explorer)

หากต้องการเปิดใช้งานหรือปิดใช้งาน JavaScript ใน Internet Explorer คุณต้องทำสิ่งต่อไปนี้: "เครื่องมือ", "ตัวเลือกอินเทอร์เน็ต", แท็บ "ความปลอดภัย", "เลือกโซนอินเทอร์เน็ต", ปุ่ม "อื่น ๆ", รายการ "สคริปต์", "อนุญาตสคริปต์" .

จาวาสคริปต์ใน VK

เพื่อแก้ไขปัญหานี้ คุณต้องแก้ไขข้อผิดพลาด JavaScript ในเครือข่าย VKontakte

ข้อผิดพลาด JavaScript VK คืออะไร

ผู้ใช้เยี่ยมชมหน้าของเขาบนโซเชียลเน็ตเวิร์กและพยายามเปิดไฟล์วิดีโอหรือเสียง แต่พบข้อความ “ข้อผิดพลาด JavaScript: ไม่ได้กำหนด initAddMedia” ที่มุมซ้ายบน ข้อความนี้จะปรากฏขึ้นเมื่อมีข้อผิดพลาด
"initAddMedia"

ก่อนอื่นคุณต้องไปที่ "Start", "My Computer" และโฟลเดอร์ Windows จากนั้นไปที่ส่วน system32 และโฟลเดอร์ไดรเวอร์ จากนั้นไปที่โฟลเดอร์ etc

ในบรรดาไฟล์จำนวนน้อยในโฟลเดอร์นี้ คุณจะต้องเลือกไฟล์โฮสต์
จากนั้นไฟล์นี้จะถูกเปิดโดยใช้ Notepad ดูเหมือนว่านี้: คุณต้องคลิกขวาที่มันแล้วเลือก "เปิดด้วย" ถัดไป คุณสามารถเลือก “โปรแกรมแก้ไขข้อความ WordPad”

หลังจากเปิดไฟล์นี้ คุณจะต้องดูไฟล์ที่มีรายการ 127.0.0.1 localhost รายการอื่นๆ นั้นไม่จำเป็นและมีแต่จะซับซ้อนและขัดขวางการทำงานที่เสถียรของไฟล์เสียงและวิดีโอเท่านั้น คุณต้องลบข้อมูลทั้งหมดออกจากไฟล์โดยสมบูรณ์และคัดลอกเฉพาะคำจารึกนี้ 127.0.0.1 localhost ถัดไปคุณต้องคลิก "บันทึก" และรีสตาร์ทคอมพิวเตอร์ ครั้งต่อไปที่คุณเยี่ยมชมหน้า VKontakte ทุกอย่างจะทำงานได้ดี

JavaScript กำลังพัฒนาอย่างรวดเร็ว คลื่นเทคโนโลยีใหม่จำนวนมากกำลังปกคลุมงานยุ่งยากซึ่งเมื่อวานนี้ดูเหมือนจะเข้มแข็งและคุกคามเท่านั้น

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

1. ความสูงหรือความกว้างสูงสุดในชุดองค์ประกอบ

สคริปต์ที่มีประโยชน์มากสำหรับการปรับความสูงหรือความกว้างของคอลัมน์

ตัวเลือกความสูง:

Var getMaxHeight = function ($elms) ( var maxHeight = 0; $elms.each(function () ( // ในบางกรณี คุณสามารถใช้ outerHeight() var height = $(this).height(); if (height > maxHeight ) ( maxHeight = ความสูง; ) );

การใช้งาน:

$(องค์ประกอบ).height(getMaxHeight($(องค์ประกอบ)));

หากต้องการใช้สคริปต์สำหรับความกว้าง คุณต้องแทนที่ความสูงและความสูงทั้งหมดด้วยความกว้างและความกว้างตามลำดับ

2. การตรวจสอบวันที่มีผลบังคับใช้

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

ฟังก์ชัน isValidDate(value, userFormat) ( // ใช้รูปแบบเริ่มต้นหากไม่มีการระบุ userFormat = userFormat || "mm/dd/yyyy"; // ค้นหาตัวคั่นที่ไม่รวมสัญลักษณ์เดือน วัน และปี (ในภาษาอังกฤษ - m, d, y) var delimiter = /[^mdy]/.exec(userFormat); // สร้างอาร์เรย์ของเดือน วัน และปี // นั่นคือ เรารู้ลำดับรูปแบบ var theFormat = userFormat.split(delimiter) ; สร้างอาร์เรย์จากวันที่ของผู้ใช้ var theDate = value.split(delimiter); function isDate(date, format) ( var m, d, y, i = 0, len = format.length, f; for (i; i;< len; i++) { f = format[i]; if (/m/.test(f)) m = date[i]; if (/d/.test(f)) d = date[i]; if (/y/.test(f)) y = date[i]; } return (m >0 && ม< 13 && y && y.length === 4 && d >0 && // ตรวจสอบว่าวันของเดือน d ถูกต้องหรือไม่

อีกส่วนที่สำคัญมากของการเขียนโปรแกรม JS คือเหตุการณ์และตัวจัดการเหตุการณ์ เหตุการณ์ส่วนใหญ่จะถูกกระตุ้นโดยการกระทำบางอย่างของผู้ใช้ แต่ละการกระทำจะอธิบายถึงเหตุการณ์ประเภทต่างๆ สมมติว่าเมื่อคุณกดปุ่มเมาส์ เหตุการณ์ที่เรียกว่า "คลิก" จะเกิดขึ้น เมื่อตัวชี้เมาส์ข้ามลิงก์ไฮเปอร์เท็กซ์ เหตุการณ์ MouseOver จะเกิดขึ้น เพื่อให้โปรแกรมตอบสนองต่อเหตุการณ์เหล่านี้ จึงมีการใช้โปรแกรมประมวลผลเหตุการณ์พิเศษ ตัวอย่างเช่น โปรแกรมที่จัดการเหตุการณ์ปุ่มเมาส์เรียกว่า onClick และบอกคอมพิวเตอร์ว่าต้องทำอย่างไรหากเหตุการณ์นี้เกิดขึ้น เพื่อความชัดเจน เรามาสร้างตัวอย่างง่ายๆ กันอีกครั้ง มาสร้างแบบฟอร์มที่จะมีปุ่มเมื่อคลิกแล้วหน้าต่างแบบเลื่อนลงจะปรากฏขึ้น

หน้าทดสอบ

การคลิกปุ่มทดสอบจะแสดงหน้าต่างพร้อมข้อความ “ทดสอบเสร็จสิ้น!” (รูปที่ 1) มาดูรายละเอียดแต่ละคำสั่งในโค้ดนี้กัน

ใช้คำสั่งเราสร้างแบบฟอร์มด้วยปุ่ม คุณลักษณะ onClick="alert("Test pass!")" กำหนดว่าจะเกิดอะไรขึ้นเมื่อคลิกปุ่มเมาส์ ดังนั้น หากมีเหตุการณ์การคลิกเกิดขึ้น คอมพิวเตอร์จะแจ้งเตือน ("ทดสอบเสร็จสิ้น!") ฟังก์ชัน alert() จะสร้างหน้าต่างป๊อปอัป เมื่อเรียกคุณจะต้องระบุสตริงในวงเล็บซึ่งจะปรากฏในหน้าต่างแบบเลื่อนลง ดังที่คุณเห็นในโค้ด โครงสร้าง alert() ใช้เครื่องหมายคำพูดเดี่ยว สิ่งนี้อธิบายได้จากข้อเท็จจริงที่ว่าในกรณีส่วนใหญ่ คุณสามารถใช้เครื่องหมายคำพูดทั้งสองประเภทได้ ยิ่งกว่านั้นไม่สำคัญว่าจะใช้ตามลำดับใด: สองครั้งก่อนแล้วจึงเดี่ยวหรือในทางกลับกัน ในตัวอย่างของเรา จะใช้เครื่องหมายคำพูดคู่ก่อน จากนั้นจึงใช้เครื่องหมายคำพูดเดี่ยว และหากเราใช้การสร้างเครื่องหมายคำพูดคู่ 2 ตัว -onClick="alert("Test complete!")" คอมพิวเตอร์จะไม่สามารถเข้าใจสคริปต์ได้ เนื่องจากยังไม่ชัดเจนว่าส่วนใดของการออกแบบที่เกี่ยวข้องกับฟังก์ชันการจัดการเหตุการณ์ onClick และส่วนใดที่ไม่

ดังนั้น หน้าต่างจึงมีข้อความที่ส่งไปยังฟังก์ชันแจ้งเตือน JS ข้อจำกัดนี้นำไปใช้ด้วยเหตุผลด้านความปลอดภัย หน้าต่างแบบเลื่อนลงยังสามารถสร้างได้โดยใช้เมธอด prompt() (ดูรูปที่ 2) แต่ในกรณีนี้ หน้าต่างจะทำซ้ำข้อความที่ผู้ใช้ป้อน ดังนั้นสคริปต์ที่เขียนโดย "แฮ็กเกอร์ที่ชั่วร้าย" จึงสามารถรับได้ รูปแบบของข้อความระบบและขอให้คุณป้อนรหัสผ่านบางอย่าง ในกรณีของเรา เห็นได้ชัดว่าหน้าต่างถูกสร้างขึ้นโดยเบราว์เซอร์ ไม่ใช่โดยระบบปฏิบัติการ และไม่สามารถลบและลบออกได้ง่ายๆ

คุณสมบัติที่มีประโยชน์มากใน JS คือฟังก์ชั่น ซึ่งโดยส่วนใหญ่แล้วจะใช้เป็นวิธีการเชื่อมโยงหลายคำสั่งเข้าด้วยกัน เพื่อเป็นตัวอย่าง สมมติว่าคุณต้องทำซ้ำลำดับสตริงข้อความหลาย ๆ ครั้ง ด้วยการใช้ความรู้ JS ที่เรามีอยู่แล้ว เราสามารถใช้คำสั่ง document.write และรับโค้ดดังนี้:

");

");
document.write("หน้าโต้ตอบมากที่สุด
");
document.write("Java Script ทำให้เป็นเรื่องง่าย
");
document.write("หน้าโต้ตอบมากที่สุด
");
document.write("Java Script ทำให้เป็นเรื่องง่าย
");
// -->

ด้วยตาเปล่าจะเห็นว่าโครงสร้างถูกสร้างขึ้นอย่างไร้เหตุผล มาสร้างโค้ดนี้ใหม่โดยใช้ฟังก์ชัน:

คำสั่งสคริปต์ทั้งหมดที่อยู่ในวงเล็บปีกกาเป็นของฟังก์ชัน FreeFunc() ที่เราสร้างขึ้น ขณะนี้คำสั่ง document.write() ทั้งสองคำสั่งเชื่อมโยงกันและสามารถดำเนินการได้เมื่อมีการเรียกใช้ฟังก์ชันที่ระบุ ต่อไป เราจะเรียก FreeFunc() สามครั้งทันทีหลังจากกำหนดฟังก์ชันเอง สิ่งนี้จะทำให้ฟังก์ชันถูกดำเนินการสามครั้ง กล่าวคือ ทั้งสองบรรทัดจะถูกพิมพ์สามครั้ง ข้อดีคือความสามารถในการส่งผ่านตัวแปรเมื่อเรียกใช้ฟังก์ชันทำให้สคริปต์มีความยืดหยุ่นอย่างแท้จริง ฟังก์ชั่นยังสามารถใช้ร่วมกับขั้นตอนการจัดการเหตุการณ์ได้ ตัวอย่างเช่น คุณสามารถสร้างฟังก์ชัน calc() ซึ่งจะมีตัวแปร x และ y สองตัว และผลลัพธ์ของการดำเนินการทางคณิตศาสตร์จะถูกเก็บไว้ในตัวแปรผลลัพธ์ คำสั่งสุดท้ายของฟังก์ชันจะแจ้งเตือน (ผลลัพธ์) จากนั้น สามารถเรียกใช้ฟังก์ชัน calc() ได้เมื่อคลิกปุ่มด้วยคำสั่ง onClick="calc()" ส่งผลให้หน้าต่างป๊อปอัปพร้อมผลการคำนวณ

การทำงานกับวินโดวส์

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

ตารางที่ 1. พารามิเตอร์พื้นฐานสำหรับการสร้างหน้าต่างใน JS

มาดูตัวอย่างเชิงปฏิบัติของการสร้างหน้าต่างใหม่ในเบราว์เซอร์:

จากการรันโปรแกรมนี้เราจะได้รับปุ่มในเบราว์เซอร์เมื่อคลิกแล้วหน้าต่างใหม่พร้อมข้อความจะถูกสร้างขึ้น (ดูรูปที่ 3)

ฟังก์ชัน OpenWindow() ที่เราสร้างขึ้นจะเปิดหน้าต่างเบราว์เซอร์ใหม่ อาร์กิวเมนต์แรกของฟังก์ชัน open() - สตริงว่าง ("") - หมายความว่าในกรณีนี้เราไม่ต้องการระบุ URL ที่เฉพาะเจาะจง และ JS ต้องสร้างเอกสารใหม่เพิ่มเติม ในสคริปต์เรากำหนดตัวแปร myWindow ซึ่งเราเข้าถึงหน้าต่างใหม่ (เป็นไปไม่ได้ที่จะใช้ชื่อหน้าต่าง (TestWindow) เพื่อจุดประสงค์นี้ในกรณีนี้) หน้าต่างที่สร้างขึ้นมีขนาด 300x100 พิกเซล และไม่มีแถบสถานะ แถบเครื่องมือ หรือเมนู หลังจากเปิดหน้าต่างแล้ว ข้างในเราจะเปิดวัตถุเอกสารเพื่อแสดงข้อความ ซึ่งทำได้โดยใช้คำสั่ง myWindow.document.open() ที่นี่เราเข้าถึงเมธอด open() ของวัตถุเอกสาร คำสั่งนี้ไม่ได้เปิดหน้าต่างใหม่ - เพียงเตรียมเอกสารสำหรับการพิมพ์ที่กำลังจะมาถึงเท่านั้น จำเป็นต้องใส่คำนำหน้า document.open() ด้วยคำนำหน้า myWindow เพื่อให้สามารถพิมพ์ในหน้าต่างใหม่ได้ นอกจากนี้ในข้อความของสคริปต์ โดยใช้การเรียก document.write() ข้อความของเอกสารใหม่และพารามิเตอร์จะถูกสร้างขึ้น ในการดำเนินการนี้ เราเขียนแท็ก HTML ปกติลงในเอกสาร ในกรณีนี้ คุณสามารถใช้แท็กใดก็ได้ของภาษามาร์กอัปไฮเปอร์เท็กซ์ HTML หลังจากเสร็จสิ้นการทำงานกับคำสั่ง document() คุณต้องปิดมัน ซึ่งเราใช้คำสั่ง myWindow.document.close()

เมื่อเปิดหน้าต่าง เราต้องใช้สามอาร์กิวเมนต์:
myWindow= open("page.htm", "TestWindow",
"width=300,height=100,status=no,toolbar=no,menubar=no");

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

ในกรณีนี้ คุณต้องระบุชื่อของหน้าต่างที่เกี่ยวข้อง และหากไม่มีหน้าต่างดังกล่าว หน้าต่างใหม่จะถูกสร้างขึ้นด้วยชื่อนี้ อย่าทำผิดพลาด: ตัวแปร myWin ไม่ใช่ชื่อของหน้าต่างเลย แต่คุณสามารถเข้าถึงได้ด้วยความช่วยเหลือของตัวแปรนี้เท่านั้น ขอบเขตของตัวแปรนี้ถูกจำกัดโดยสคริปต์ที่กำหนดไว้เท่านั้น แต่ชื่อหน้าต่าง (TestWindow) เป็นตัวระบุเฉพาะที่สามารถใช้ได้จากหน้าต่างเบราว์เซอร์ใดก็ได้ หากต้องการปิดหน้าต่าง ให้ใช้ฟังก์ชัน close() และทุกอย่างจะเหมือนกับการทำงานกับฟังก์ชัน open()

แถบสถานะ

ใน JS คุณสามารถเขียนลงในแถบสถานะของเบราว์เซอร์ได้ สิ่งที่คุณต้องทำคือเขียนข้อความที่ต้องการลงใน windows.status มาดูวิธีใช้ฟังก์ชันนี้อีกครั้งพร้อมตัวอย่าง มาสร้างสคริปต์ที่เมื่อคุณคลิกที่ปุ่มจะแสดงข้อความที่ระบุในแถบสถานะและเมื่อคุณคลิกที่ปุ่มที่สองให้ลบออก:

เมื่อรันโปรแกรมในเบราว์เซอร์เราจะได้แบบฟอร์มที่มีสองปุ่ม เมื่อคุณกดปุ่ม On Statbar Text ข้อความ “กดปุ่ม On ถูกกด” จะปรากฏขึ้นในแถบสถานะ และเมื่อคุณกดปุ่ม Off Statbar (ล้างข้อความ) แถบสถานะจะถูกล้าง (ดูรูปที่ 4)

ดังนั้นเราจึงมีแบบฟอร์มที่มีปุ่มสองปุ่ม ซึ่งทั้งสองปุ่มเรียกฟังก์ชัน statbar() เมื่อกดปุ่ม On Statbar Text ฟังก์ชันนี้จะถูกเรียกใช้
ดังต่อไปนี้: statbar("กดปุ่มเปิด") ข้อความในเครื่องหมายคำพูดคือข้อความที่เราจะเห็นในแถบสถานะ ในทางกลับกัน ฟังก์ชัน statbar() ได้รับการประกาศดังนี้:

ฟังก์ชั่น statbar(txt) (
window.status = txt;)

เราใส่ (txt) ในฟังก์ชันที่อยู่ในวงเล็บ ซึ่งหมายความว่าสตริงที่เราส่งไปยังฟังก์ชันนี้จะอยู่ในตัวแปร txt และสตริง txt จะถูกเขียนลงในแถบสถานะโดยใช้คำสั่ง window.status = txt ดังนั้น การลบข้อความออกจากแถบสถานะจึงทำได้โดยการเขียนสตริงว่างลงใน window.status: ("") การใช้งานการเขียนข้อความบนแถบสถานะนั้นไร้ขีดจำกัด คุณสามารถใส่คำอธิบายของลิงก์ไว้ที่นั่นเมื่อคุณวางเมาส์เหนือลิงก์ สร้างสัญลักษณ์ หรือใช้เพื่อแสดงวันที่และเวลา

ตัวจับเวลา

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

setTimeout("alert("ยินดีต้อนรับสู่ \"MyHome\" ")", 3000);
// -->

รอ 3 วินาที หน้าต่างจะปรากฏขึ้น

หลังจากเปิดเพจได้ 3 วินาที หน้าต่างป๊อปอัปจะปรากฏขึ้นพร้อมข้อความ “ยินดีต้อนรับสู่หน้า MyHome” (ดูรูปที่ 5)

SetTimeout() เป็นวิธีการของวัตถุหน้าต่าง ออกแบบมาเพื่อกำหนดช่วงเวลา อาร์กิวเมนต์แรกของการโทรคือโค้ด JS ที่ควรดำเนินการหลังจากเวลาที่กำหนดผ่านไป (ในกรณีของเราคือ alert()) อาร์กิวเมนต์ที่สองใช้เพื่อระบุว่าเมื่อใดควรเรียกใช้โค้ดนี้ ในกรณีนี้ เวลาจะแสดงเป็นมิลลิวินาที

เฟรม

หน้าต่างเบราว์เซอร์สามารถแบ่งออกเป็นหลายเฟรมแยกกัน กรอบโดยทั่วไปคือช่องรูปสี่เหลี่ยมผืนผ้า แต่ละเฟรมจะแสดงเนื้อหาของเอกสารของตัวเอง การสร้างเฟรมยังคงเป็นงาน HTML แต่เราจะกล่าวถึงพื้นฐานของกระบวนการใน JS โดยย่อ แท็กและใช้ในการสร้างเฟรม ในตัวอย่างต่อไปนี้ เราจะสร้างสคริปต์ที่แบ่งหน้าเบราว์เซอร์ออกเป็น 5 เฟรม และโหลดหน้าแยกกันในแต่ละเฟรม:

ผลลัพธ์ของการรันสคริปต์นี้แสดงไว้ในรูปที่ 1 6.

ในเฟรม เราใช้คุณสมบัติแถวและคอลัมน์ และตั้งค่าเปอร์เซ็นต์ของพื้นที่ที่เฟรมครอบครองในหน้าต่างเบราว์เซอร์ คุณสมบัติแถวหมายความว่าเฟรมจะวางซ้อนกันและมีคอลัมน์อยู่ตรงข้ามกัน คุณยังสามารถกำหนดขนาดเฟรมเป็นพิกเซลได้ ซึ่งก็เพียงพอแล้วที่จะไม่ใส่สัญลักษณ์ % หลังตัวเลข ในแท็ก เราระบุลิงก์ไปยังเพจที่จะโหลด และด้วยแอตทริบิวต์ name เราจะระบุชื่อที่ไม่ซ้ำสำหรับเฟรม สามารถกำหนดความหนาของเส้นขอบระหว่างเฟรมได้ ในการดำเนินการนี้ คุณจะต้องใช้พารามิเตอร์ border ในแท็กและตั้งค่าเป็นค่าบางค่า (โดยค่าเริ่มต้น border=0) มาดูกันว่า JavaScript "เห็น" เฟรมที่อยู่ในหน้าต่างเบราว์เซอร์อย่างไร เมื่อต้องการทำเช่นนี้ ให้เราหันไปที่หน้าต่างที่มีเฟรมที่เราสร้างไว้ด้านบน JS จัดระเบียบเฟรมที่นำเสนอบนเว็บเพจในรูปแบบของโครงสร้างแบบลำดับชั้นที่ด้านบนสุดคือหน้าต่างเบราว์เซอร์ ในกรณีของเรา จะแบ่งออกเป็นห้าเฟรม ดังนั้น หน้าต่างในฐานะออบเจ็กต์จึงเป็นบรรพบุรุษของลำดับชั้นนี้ และเฟรมก็เป็นผู้สืบทอดตามลำดับ เราได้กำหนดชื่อเฉพาะให้กับเฟรมเหล่านี้: frame1, frame2... frame5 การใช้ชื่อเหล่านี้ทำให้เราสามารถแลกเปลี่ยนข้อมูลกับเฟรมที่ระบุได้ สมมติว่าคุณต้องเปิดใช้งานลิงก์บางลิงก์ในเฟรมแรก แต่หน้าเว็บที่เกี่ยวข้องไม่ควรโหลดในเฟรมเดียวกัน แต่โหลดในเฟรมอื่น ตัวอย่างของงานดังกล่าวคือการสร้างเมนูหรือที่เรียกว่าแถบการนำทาง โดยที่เฟรมหนึ่งจะยังคงเหมือนเดิมเสมอ แต่มีลิงก์ต่างๆ สำหรับการนำทางที่แตกต่างกัน โดยไม่ต้องเจาะลึกการศึกษาลำดับชั้นมาสร้างตัวอย่างการนำทางไซต์โดยใช้เฟรมกันดีกว่า เราจะสร้างลิงก์หลายรายการในเฟรมเดียว เมื่อเปิดใช้งานหน้าใดหน้าหนึ่ง หน้าที่เกี่ยวข้องจะไม่อยู่ในเฟรมเดียวกัน แต่อยู่ในหน้าที่อยู่ติดกัน ขั้นแรก เรามาสร้างเฟรมกันก่อน:

ต่อไป เรามาสร้างหน้า HTML แบบง่ายๆ "start.htm":


หน้าเริ่มต้น
นี่คือหน้าเริ่มต้นของเว็บไซต์ของเรา

และเมนูแถบนำทาง:

หน้า 1
หน้า 2
แผนที่เว็บไซต์

ต่อไปนี้เราจะเห็นวิธีการโหลดหน้าใหม่ลงในเฟรมหลักหลายวิธี ลิงค์แรกใช้ฟังก์ชัน load() เพื่อจุดประสงค์นี้:
หน้า 1

ในบรรทัดนี้ แทนที่จะโหลดหน้าใหม่อย่างชัดเจน เราเชิญเบราว์เซอร์ให้ดำเนินการคำสั่งใน JavaScript - ด้วยเหตุนี้ เราใช้พารามิเตอร์ javascript แทน href ปกติ ต่อไป เราจะส่งผ่าน “1.htm” เป็นอาร์กิวเมนต์ไปยังฟังก์ชัน load() และกำหนดฟังก์ชัน load() เองดังนี้:

โหลดฟังก์ชั่น (url) (
parent.main.location.href= url;)

URL ถูกเขียนอยู่ในวงเล็บ ในตัวอย่างของเรา หมายความว่ามีการป้อนสตริง "1.htm" ลงในตัวแปร url เมื่อเรียกใช้ฟังก์ชัน และตัวแปรใหม่นี้สามารถใช้งานได้เมื่อทำงานภายในฟังก์ชัน load()

ลิงค์ที่สองใช้พารามิเตอร์เป้าหมาย นี่ไม่ใช่โค้ด JavaScript อีกต่อไป แต่เป็นหนึ่งในโครงสร้างภาษา HTML เราเพียงแค่ระบุชื่อของเฟรมที่ต้องการ และไม่จำเป็นต้องขึ้นต้นชื่อของเฟรมที่ระบุด้วยคำว่า parent หากคุณต้องการกำจัดเฟรมโดยใช้ฟังก์ชัน load() คุณเพียงแค่เขียน parent.location.href= url ลงไปเท่านั้น ผลลัพธ์ของการรันสคริปต์ของเราจะแสดงในรูป 7.

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

พาเวล คูชินสกี้ [ป้องกันอีเมล]

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

มอซซิลา ไฟร์ฟอกซ์

• ในเมนูด้านบนเลือกส่วน "เครื่องมือ" - "การตั้งค่า"

• หน้าต่างเปิดขึ้นต่อหน้าคุณบนแท็บ "พื้นฐาน" คุณต้องเลือกแท็บ "เนื้อหา"

• ที่ด้านบนของหน้าต่าง คุณจะเห็นหลายรายการ โดยรายการหนึ่งเรียกว่า "ใช้ JavaScript" - ทำเครื่องหมายในช่องถัดจากรายการนั้นแล้วคลิกตกลง

• รีเฟรชหน้าโดยใช้ปุ่ม F5 บนแป้นพิมพ์ของคุณ

ความสนใจ! คำอธิบายนี้เหมาะสำหรับเวอร์ชันที่ต่ำกว่าเวอร์ชัน 22 เท่านั้น ตั้งแต่เวอร์ชัน 23 เป็นต้นไป ไม่จำเป็นต้องใช้ JavaScript - ตัวเลือกจะเปิดใช้งานตามค่าเริ่มต้น

โอเปร่า

• ที่มุมซ้ายบนให้คลิกที่ปุ่ม "เครื่องมือ" - "การตั้งค่า" - "การตั้งค่าทั่วไป"

• เมื่ออยู่ในเมนู ให้ไปที่แท็บ "ขั้นสูง" (ซึ่งเป็นแท็บที่ห้า)

• ในเมนูด้านซ้าย คลิกลิงก์ "เนื้อหา" และทำเครื่องหมายในช่องถัดจาก "ใช้ JavaScript"

• คลิกตกลงและรีเฟรชเพจ

กูเกิลโครม

• ที่มุมขวาบนจะมีปุ่มที่คุณจะเห็นแถบสามแถบ - คลิกที่มันแล้วเลือกส่วน "การตั้งค่า"

• เลื่อนหน้าลงไปด้านล่างสุดแล้วคลิก "แสดงการตั้งค่าขั้นสูง"

• ในส่วน "ข้อมูลส่วนบุคคล" คุณจะเห็นปุ่ม "การตั้งค่าเนื้อหา" ที่คุณต้องคลิก

• มีการเปิดหน้าต่างเพิ่มเติมแล้ว ค้นหาตัวเลือก "อนุญาตให้ไซต์ทั้งหมดใช้ JavaScript (แนะนำ)" แล้วคลิกตกลง

• โหลดหน้านี้ซ้ำในอินเทอร์เน็ตเบราว์เซอร์ของคุณ

อินเทอร์เน็ตเอ็กซ์พลอเรอร์

• เปิดคุณสมบัติของเบราว์เซอร์ (สามารถทำได้ในเบราว์เซอร์ผ่านเมนูหรือใช้แผงควบคุมของคอมพิวเตอร์ของคุณ)

• มีหน้าต่างเปิดขึ้น คุณต้องไปที่แท็บ "ความปลอดภัย"

• ที่ด้านล่างของมัน คุณต้องคลิกที่ปุ่มที่ระบุว่า “อื่นๆ...”

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

• คลิกตกลงและรีเฟรชเพจ

แอปเปิ้ลซาฟารี

• ในเมนูเราจะพบส่วน "การตั้งค่า"

• หน้าต่างแยกต่างหากเปิดขึ้นพร้อมกับหลายแท็บ ซึ่งคุณต้องเปิดแท็บที่เรียกว่า "ความปลอดภัย"

• ถัดจากรายการ "เปิดใช้งาน JavaScript" ให้ทำเครื่องหมายในช่องและปิดหน้าต่าง

• เรารีเฟรชหน้าโดยกดปุ่ม F5

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

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