Let's get started with a JavaScript Web Page!

  1. Open Notepad++
    1. Open your index.html file
    2. Open your styles.css file
    3. Click: New -> File
    4. Copy the JavaScript Page Template (HTML) code (below)
    5. Paste that code into your new file
    6. Click: Save
    7. Name the file: javascript.html
    8. Change the Save as type:
      to: Hyper Text Markup Language file (*.html)
    9. Click: New -> File
    10. Copy the JavaScript Code Template (JS) code (below)
    11. Paste that code into your new file
    12. Click: Save
    13. Save that file in your includes folder
    14. Name the file: javascript.js
    15. Change the Save as type:
      to: JavaScript file (*.js)
    16. Change your page title, your Author name, and your page heading to something appropriate
    17. Open your styles.css file
    18. Copy the JavaScript Styles (CSS) code (below)
    19. Paste that code into your styles.css file
    20. Change some styles
    21. In your index.html file
    22. Add a link to this page. Change: <li>Create a Javascript Page</li>
      to: <li><a href="javascript.html">Create a Javascript Page</a></li>
    23. Save your changes
    24. Click: Run
    25. Choose: Launch in IE
      or Launch in Chrome
      or Launch in Firefox
    26. View your web page
    27. Make any changes
    28. Save your changes

JavaScript Page Template (HTML)

<!doctype html>
<html>
  <head>
    <title>page title goes here</title>
    <!-- put your name in this comment line -->
    <link href="includes/styles.css" rel="stylesheet"/>
    <script src="includes/javascript.js"></script>
  </head>
  <body>
    <h1>put page heading here</h1>
    <p>Required fields marked with: <span style="color: red; font-weight: bold;">*</span*> </p> 
    <form id="myForm" name="myForm" method="POST" onsubmit="convertTemp()">
      <fieldset>
        <legend>put name of form here</legend>
        <span style="color: red; font-weight: bold;">*</span*> <label for="firstName">First Name: 
        <span style="color: red; font-weight: bold;">*</span></label>
        <input type="text" id="firstName" name="firstName" size="25" 
        required placeholder="Enter your first name here"><br>
        <span style="color: red; font-weight: bold;">*</span*> <label for="lastName">Last Name:
        <span style="color: red; font-weight: bold;">*</span></label>
        <input type="text" id="lastName" name="lastName" size="25" 
        required placeholder="Enter your last name here"><br>
        <span style="color: red; font-weight: bold;">*</span*> <label for="tempF">Fahrenheit Temperature:
        <span style="color: red; font-weight: bold;">*</span></label>
        <input type="number" id="tempF" name="tempF" size="2" required><br>
        <input type="submit" id="submit" name="submit" value="Convert">
      </fieldset>
    </form>
    <div id="today"></div>
    <script>
      document.getElementById("today").innerHTML = Date();
    </script>
    <p>This page was last modified on: 
     <script>document.write(document.lastModified);</script>.</p>
  </body>
</html>

JavaScript Code Template (JS)

/* put your name in this comment line */
function convertTemp () {
  var fName = document.forms["myForm"]["firstName"].value;
  var lName = document.forms["myForm"]["lastName"].value;
  var fTemp = document.forms["myForm"]["tempF"].value;
  var cTemp = (fTemp - 32) * 5 / 9;
  alert("Hello " + fName + " " + lName + " " + fTemp + "F converts to " + cTemp + "C");
}

JavaScript Styles (CSS)

#today {
  color: navy;
  font-size: 8pt;
  font-style: italic;
  text-align: right;
}

Example