HTML, CSS, & JavaScript – Getting Started

HTML, CSS, & JavaScript – Getting Started

Enhancing your HTML with JavaScript

Now we have our static HTML document set up, we will dynamically populate HTML elements on the page with some in-line JavaScript. See where you write JavaScript code and how it interacts with HTML on the page.

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Hello World</title> 
  </head> 
  <body> 
    <div id="intro">Hello World!</div> 
    <div id="context1"></div> 
    <div id="context2"></div> 
    <div id="context3"></div> 
  <script type="text/javascript"> 
    var intro = document.getElementById("intro"); 
    intro.innerHTML = "JavaScript Hello World!!"; 
    function populateDiv(theDiv, populateWith){ 
      var divID = document.getElementById(theDiv); 
      divID.innerHTML = populateWith; 
    } 
    populateDiv("context1", "this is more hello world goodness!!!"); 
    populateDiv("context2", "this is context2!!!"); 
    populateDiv("context3", "this is context3!!!"); 
  </script> 
  </body> 
</html>

Example of rendered page

Completed files from this step:

HelloWorld_Step2.zip