Latest web development tutorials
×

JavaScript หลักสูตร

JavaScript หลักสูตร JavaScript แนะนำโดยย่อ JavaScript การใช้ JavaScript ส่งออก JavaScript ไวยากรณ์ JavaScript งบ JavaScript หมายเหตุ JavaScript ตัวแปร JavaScript ชนิดข้อมูล JavaScript วัตถุ JavaScript ฟังก์ชัน JavaScript ขอบเขต JavaScript เหตุการณ์ JavaScript เชือก JavaScript ผู้ประกอบการ JavaScript เปรียบเทียบ JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript ประเภทการแปลง JavaScript นิพจน์ปกติ JavaScript ความผิดพลาด JavaScript แก้จุดบกพร่อง JavaScript ยกตัวแปร JavaScript โหมดที่เข้มงวด JavaScript ใช้ไม่เหมาะสม JavaScript รูปแบบการตรวจสอบสิทธิ์ JavaScript ลิขสิทธิ์คำสำคัญ JavaScript JSON JavaScript void JavaScript ข้อมูลจำเพาะรหัส

JS ฟังก์ชัน

JavaScript นิยามฟังก์ชัน JavaScript อาร์กิวเมนต์ของฟังก์ชัน JavaScript เรียกใช้ฟังก์ชัน JavaScript การปิด

JS HTML DOM

DOM แนะนำโดยย่อ DOM HTML DOM CSS DOM เหตุการณ์ DOM EventListener DOM ธาตุ

JS การสอนที่ทันสมัย

JavaScript วัตถุ JavaScript Number JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp วัตถุ

JS เบราว์เซอร์ BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript ป๊อป JavaScript เหตุการณ์หมดเวลา JavaScript Cookies

JS โกดัง

JavaScript โกดัง JavaScript ทดสอบ jQuery JavaScript ทดสอบ Prototype

JS ตัวอย่าง

JavaScript ตัวอย่าง JavaScript ตัวอย่างวัตถุ JavaScript วัตถุเช่นเบราว์เซอร์ JavaScript HTML DOM ตัวอย่าง JavaScript ย่อ

JS คู่มืออ้างอิง

JavaScript วัตถุ HTML DOM วัตถุ

เอาท์พุท JavaScript

จาวาสคริปต์ไม่ได้พิมพ์หรือผลใด ๆ ฟังก์ชั่น

JavaScript แสดงข้อมูล

สามารถ javascript ข้อมูลออกในรูปแบบที่แตกต่างกัน:

  • ใช้ window.alert () กล่องเตือนป๊อปอัพ
  • ใช้ document.write () วิธีการเขียนเนื้อหาของเอกสาร HTML
  • ใช้ innerHTML การเขียนองค์ประกอบ HTML
  • ใช้ console.log () ถูกเขียนไปยังคอนโซลเบราว์เซอร์

ใช้ window.alert ()

คุณสามารถ pop up กล่องเตือนเพื่อแสดงข้อมูล:

ตัวอย่าง

<! DOCTYPE html>
<html>
<body>

<h1> หน้าแรกของฉัน </ h1>
<p> วรรคแรกของฉัน </ p>

<script>
window.alert (5 + 6);
</ script>

</ body>
</ html>

ลอง»

จัดการกับองค์ประกอบ HTML

ในการเข้าถึงองค์ประกอบ HTML จาก JavaScript คุณสามารถใช้document.getElementById(ID) วิธีการ

กรุณาใช้แอตทริบิวต์ "id" เพื่อระบุองค์ประกอบ HTML และ innerHTML ที่จะได้รับเนื้อหาหรือใส่องค์ประกอบ:

ตัวอย่าง

<! DOCTYPE html>
<html>
<body>

<h1> เว็บเพจแรกของฉัน </ h1>

<p id = "สาธิต"> วรรคแรกของฉัน </ p>

<script>
document.getElementById ( "สาธิต") innerHTML = "วรรคได้รับการแก้ไข .. ";
</ script>

</ body>
</ html>

ลอง»

งบ JavaScript เพิ่มเติม (ใน <script> แท็ก) อาจจะดำเนินการในเว็บเบราเซอร์:

document.getElementById ( "สาธิต") คือการใช้แอตทริบิวต์ ID เพื่อค้นหาองค์ประกอบ HTML รหัส JavaScript

innerHTML = "วรรคได้รับการแก้ไข." ถูกนำมาใช้ในการปรับเปลี่ยนองค์ประกอบเนื้อหา HTML (innerHTML) รหัส JavaScript


ในการกวดวิชานี้

ในกรณีส่วนใหญ่ในการกวดวิชานี้เราจะใช้วิธีการที่อธิบายข้างต้นเพื่อส่งออก:

ตัวอย่างต่อไปนี้โดยตรงกับ id = "สาธิต" ของ <p> องค์ประกอบเขียนออกเอกสาร HTML:


เขียนเอกสาร HTML

สำหรับวัตถุประสงค์ในการทดสอบคุณโดยตรงสามารถเขียน JavaScript ในเอกสาร HTML:

ตัวอย่าง

<! DOCTYPE html>
<html>
<body>

<h1> เว็บเพจแรกของฉัน </ h1>

<p> วรรคแรกของฉัน </ p>

<script>
document.write (Date ());
</ script>

</ body>
</ html>

ลอง»

หมายเหตุ

กรุณาใช้ document.write () เพียงแค่เขียนเนื้อหาที่จะส่งออกเอกสาร

ถ้าคุณทำ document.write หลังจากเอกสารเสร็จสิ้นการโหลดหน้า HTML ทั้งหมดจะถูกเขียนทับ


ตัวอย่าง

<! DOCTYPE html>
<html>
<body>

<h1> เว็บเพจแรกของฉัน </ h1>

<p> วรรคแรกของฉัน </ p>

<ปุ่ม onclick = "myFunction () "> จุดฉัน </ ปุ่ม>

<script>
ฟังก์ชั่น myFunction () {
document.write (Date ());
}
</ script>

</ body>
</ html>

ลอง»


เขียนไปยังคอนโซล

หากเบราว์เซอร์ของคุณสนับสนุนการแก้จุดบกพร่องคุณสามารถใช้ console.log () วิธีการแสดงค่าของ JavaScript ในเบราว์เซอร์ของคุณ

ใช้เบราเซอร์ F12 เพื่อเปิดใช้งานโหมดแก้ปัญหาหน้าต่างแก้ไขข้อบกพร่องให้คลิกที่เมนู "คอนโซล"

ตัวอย่าง

<! DOCTYPE html>
<html>
<body>

<h1> เว็บเพจแรกของฉัน </ h1>

<script>
A = 5;
B = 6;
C = A + B;
console.log (c);
</ script>

</ body>
</ html>

ลอง»

ภาพหน้าจอตัวอย่างคอนโซล:


คุณรู้หรือไม่?

หมายเหตุ แก้จุดบกพร่องคือการทดสอบโปรแกรมที่จะพบและลดข้อผิดพลาดในกระบวนการ (ผิด)