X
HOME HTML5 CSS3 JAVASCRIPT SQL PHP5 JQUERY ANGULAR BOOTSTRAP3 XML MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

Web Building - Adding Code (JavaScript)


Building a web site from scratch.   Part III: Adding computer code (JavaScript).


What We Will Do

In this chapter we will:

  • Create some computer code (JavaScript)
  • Add a link to the script in your pages

Create JavaScript

In the DemoWeb folder, create a new file named Script.js.

Put the following code inside the file:

Script.js

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


Edit the Home Page

In the DemoWeb folder, edit the file Index.html.

Change the content to the following:

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>

Try it Yourself »

The page above, is a copy of the page from the previous chapter, with an added footer, and a link to a script.


Edit the About Page

To complete your work, do the same changes in About.html.

1. Add a <footer> element.

2. Include the script.

Change the content to the following:

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>

Try it Yourself »


Read More

Read more about JavaScript in our JavaScript Tutorial.



Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB HOSTING

UK Reseller Hosting

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE

facebook