JavaScript in small bites, Part 3

JavaScript is a great langauge for learning programming: you don't need any new software, and you get instantaneous feedback. "In small bites" is a by-example philosophy to language-learning: in this article, you will find code snippets showing many different ways to accomplish the same task in JavaScript. "In small bites" contrasts with the "syntax and semantics" approach to language-learning, which emphasizes top-down learning of formal grammar and specification.

Part 1 covered creating a basic JavaScript program, "Hello, World!", literal values, basic functions and basic objects.

Part 2 covers interacting with forms, object constructors, methods, prototypes and the meaning of the this keyword. The exercise is to create a hand-held calculator simulator from partially completed code.

Part 3 covers arrays, DOM tree interaction and events. The exercise is to create a simulated board game from partially completed code.

Part 4 covers (more) event-handling and how to interact with CSS from JavaScript. The exercise is to create the game Minesweeper from partially completed code.

Arrays

Arrays in JavaScript index data according to natural numbers.

[array-example.html]

<html>
 <body>
  
  The
   <select id="dwarves-numbers">
     <option value="0" >1st</option>
     <option value="1" >2nd</option>
     <option value="2" >3rd</option>
     <option value="3" >4th</option>
     <option value="4" >5th</option>
     <option value="5" >6th</option>
     <option value="6" >7th</option>
   </select>

   Dwarf is <span id="dwarf-name">Doc</span>.

  <script>
   var Dwarves =
    ["Doc","Grumpy","Happy","Sleepy","Bashful","Sneezy","Dopey"] ;

   function SetDwarf() {
    var dwarfNumber = document.getElementById("dwarves-numbers").value ;
    var dwarf = Dwarves[dwarfNumber] ;
    document.getElementById("dwarf-name").innerHTML = dwarf ;
   }

   document.getElementById("dwarves-numbers").onclick = SetDwarf ;
  </script>
 </body>
</html>

produces:

JavaScript arrays can also function as stacks. A stack is a data structure in which the last element to go in is the first element to go out. All arrays in JavaScript support pop and push methods.

[stack-example.html]

<html>
 <body>
  <script>
   var ToDoList = [] ;
   ToDoList.push("dishes") ;
   ToDoList.push("laundry") ;
   ToDoList.push("groceries") ;
   while (ToDoList.length > 0) {
    document.writeln ("I just did " + ToDoList.pop() + ".</br>") ;
   }
  </script>
 </body>
</html>

produces:

JavaScript arrays can also function as queues. A queue is a data structure in which the first element in is the first element out.

[queue-example.html]

<html>
 <body>
  <script>
   var Line= [] ;
   Line.push("Customer A") ;
   Line.push("Customer B") ;
   Line.push("Customer C") ;
   while (Line.length > 0) {
    document.writeln ("Now serving: " + Line.shift() + ".</br>") ;
   }
  </script>
 </body>
</html>

produces:

For loops are frequently used to iterate over the elements of an array:

[array-iteration.html]

<html>
 <body>
  <script>
   var Ordinals = ["first", "second", "third", "fourth"] ;
   for (var i = 0; i < Ordinals.length; ++i) {
    document.writeln("Index " +i+ " is the " + Ordinals[i] + " element. <br />") ;
   }
  </script>
 </body>
</html>

produces:

DOM-tree manipulation

DOM stands for "Document Object Model," and the DOM tree is a tree-like data-structure that describes the logical model behind the document. If you want to change the appearance of a page, you can modify or add to the DOM tree. JavaScript allows you to manipulate the DOM tree using procedures like document.getElementById document.appendChild, document.createElement and document.createTextNode.

[dom-examples.html]

<html>
 <body>

  <div id="content">
    
  </div>

  <script>
   var Content = document.getElementById("content") ;

   var paragraph = document.createElement("p") ;
   paragraph.style.color = "red" ;
   paragraph.style.border = "1px solid black" ;
   paragraph.style.padding = "30px" ;

   var text1 = document.createTextNode("Send ") ;
   var emailTag = document.createElement("a") ;
   var meText = document.createTextNode("me") ;
   emailTag.href = "mailto:me@domain.com";
   emailTag.appendChild(meText) ;
   var text2 = document.createTextNode(" some mail.") ;

   paragraph.appendChild(text1) ;
   paragraph.appendChild(emailTag) ;
   paragraph.appendChild(text2) ;

   Content.appendChild(paragraph) ; 
  </script>
  
 </body>
</html>

produces:

Or, we could have accomplished the same effect with one write to an innerHTML property:

[innerHTML-examples.html]

<html>
 <body>

  <div id="content">
    
  </div>

  <script>
   document.getElementById("content").innerHTML =
   '<p style="color: red; border: 1px solid black; padding: 30px;">' +
   'Send <a href="mailto:me@domain.com">me</a> some email.' +
   '</p>'
  </script>
  
 </body>
</html>

produces:

Manipulating the DOM tree is considered good style, while innerHTML is considered poor style. The advantage to DOM-tree manipulation is that it preserves attributes that have been applied, while innerHTML wipes them out. Unless this preservation is actually required, innerHTML is a perfectly reasonable approach.

Events

Many of the elements on a web page respond to events, including clicking, typing and mousing. When an element has "focus," and an event occurs, the corresponding event handler on that object is invoked. It is possible to attach event handlers to elements in JavaScript:

[mouse-over-example.html]

<html>
 <body>
  <div id="target-area" style="padding: 30px; border: 1px solid black;">
   Mouse over this block.
  </div>

  <script>
   var TargetArea = document.getElementById("target-area") ;
  
   TargetArea.onmouseover = function () {
    TargetArea.style.backgroundColor = "red" ;
   } ;

   TargetArea.onmouseout = function () {
    TargetArea.style.backgroundColor = "white" ;
   } ;
  </script>
 </body>
</html>

produces:

You can watch a text input field, and update some part of the page instantaneously:

[keypress-example.html]

<html>
 <body>
  <input type="text" onkeyup="Update();" id="input-text" />

  You have entered "<span id="typed"></span>"; type some more.

  <script>
   function Update() {
    document.getElementById("typed").innerHTML =
     document.getElementById("input-text").value ;
   }
  </script>
 </body>
</html>

produces:

Note that event-handling code can be specified directly in attributes inside HTML.

Below is the beginning of a board-game board built out of tables; click each square to change its color to red:

[game-board.html]

<html>
 <body>

  <style>
   table#board td {
    width: 50px ;
    height: 50px ;
    border: 1px solid black ;
   }
  </style>

  <center>
  <table id="board">
    <script>
    var Rows = 4 ;
    var Cols = 4 ;
    
    for (var i = 0; i < Rows; ++i) {
     document.write("<tr>") ;
     for (var j = 0; j < Cols; ++j) {
       document.write('<td id="cell-'+i+'-'+j+'" onclick="ClickCell(this)">') ;
       document.write("<span></span>") ; 
       document.write("</td>") ; 
     }
     document.writeln("</tr>") ;
    }
    </script>
  </table>
  </center>

  <script>
  function ClickCell(cell) {
   cell.style.backgroundColor = "red" ;
  }
  </script>
 </body>
</html>

produces:

Exercise: Board Game

Make the game board below "playable." That is, if a user clicks on a cell, and then clicks on another cell, it should move the ship from the old cell to the new cell.

[board-game-exercise.html]

<html>
 <body>

  <style>

   table#board {
    background-color: black ;
   }

   table#board td {
    width: 64px ;
    height: 64px ;
    border: 1px solid white ;
   }
  </style>

  <center>
  <table id="board">
    <script>
    var Rows = 5 ;
    var Cols = 5 ;
    
    for (var i = 0; i < Rows; ++i) {
     document.write("<tr>") ;
     for (var j = 0; j < Cols; ++j) {
       document.write('<td id="cell-'+i+'-'+j+'" onclick="ClickCell(this)">') ;
       document.write("<span></span>") ; 
       document.write("</td>") ; 
     }
     document.writeln("</tr>") ;
    }
    </script>
  </table>
  </center>

  <script>

  var FedStartCell = document.getElementById("cell-4-2")  ;
  var FedImg = document.createElement("img") ;
  FedImg.src = "images/constitution.png" ;
  FedImg.width = 62 ;
  FedImg.height = 62 ;

  FedStartCell.appendChild(FedImg) ;


  var KlingonStartCell = document.getElementById("cell-0-2")  ;
  var KlingonImg = document.createElement("img") ;
  KlingonImg.src = "images/warbird.png" ;
  KlingonImg.width = 62 ;
  KlingonImg.height = 62 ;

  KlingonStartCell.appendChild(KlingonImg) ;
  
  function ClickCell(cell) {

  }
  </script>
 </body>
</html>

produces:

Hint: You may want to use the childNodes property of an element.