ล่าสุดการพัฒนาเว็บบทเรียน
 

อาคารเว็บ - เพิ่มรหัส (จาวาสคริปต์)


สร้างเว็บไซต์จากรอยขีดข่วน Part III:. เพิ่มรหัสคอมพิวเตอร์ (จาวาสคริปต์)


สิ่งที่เราจะทำ

ในบทนี้เราจะ:

  • สร้างรหัสคอมพิวเตอร์บางส่วน (จาวาสคริปต์)
  • เพิ่มการเชื่อมโยงไปยังสคริปต์ในหน้าเว็บของคุณ

สร้าง JavaScript

ในโฟลเดอร์ demoweb สร้างไฟล์ใหม่ชื่อ script.js

ใส่รหัสต่อไปนี้ภายในไฟล์:

script.js

document.getElementById("foot01").innerHTML =
"<p>&copy;  " + new Date().getFullYear() + " w3ii. All rights reserved.</p>";

แก้ไขหน้าแรก

ในโฟลเดอร์ demoweb แก้ไขไฟล์ index.html

เปลี่ยนแปลงเนื้อหาต่อไปนี้:

index.html

<!DOCTYPE html>
<html>

<head>
  <title>Our Company</title>
  <link href="site.css" rel="stylesheet">
</head>

<body>

<div id="main">
  <h1>Welcome to Our Company</h1>
  <h2>Web Site Main Ingredients:</h2>

  <p>Pages (HTML)</p>
  <p>Style Sheets (CSS)</p>
  <p>Computer Code (JavaScript)</p>
  <p>Live Data (Files and Databases)</p>
  <footer id="foot01"></footer>
</div>

<script src="script.js"></script>

</body>
</html>
ลองตัวเอง»

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


แก้ไขหน้าเกี่ยวกับ

เพื่อให้การทำงานของคุณจะมีการเปลี่ยนแปลงเหมือนกันใน about.html

1. เพิ่ม <ส่วนท้าย> องค์ประกอบ

2. ใส่สคริปต์

เปลี่ยนแปลงเนื้อหาต่อไปนี้:

about.html

<!DOCTYPE html>
<html>
<head>
  <title>About</title>
  <link href="site.css" rel="stylesheet">
</head>

<body>

<div id="main">
  <h1>About Us</h1>
  <p>Lorem Ipsum Porem Lorem Ipsum Porem</p>
  <footer id="foot01"></footer>
</div>

<script src="script.js"></script>

</body>
</html>
ลองตัวเอง»

อ่านเพิ่มเติม

อ่านเพิ่มเติมเกี่ยวกับ JavaScript ในของเรา สอน JavaScript