Session 08 - JavaScript, Part 1
Examples

• Example 8.1 - Javascript Events Illustrated  
  <p><a href="#" onclick="document.getElementById('simple1a').style.backgroundColor='#ff33ff';">Change background color</a></p><p id="simple1a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lobortis orci a odio. Donec cursus, felis eu pulvinar ornare, sem turpis dapibus elit, eget laoreet eros quam vel dolor. Ut ante mauris, ullamcorper quis, posuere quis, lacinia a, felis. In tincidunt malesuada pede. Donec varius lacus sed nisi. Donec rhoncus est ac erat. Duis lobortis fringilla eros. Donec volutpat ligula eu neque. In hac habitasse platea dictumst. Donec in massa. Aenean lectus ante, gravida et, luctus id, posuere at, pede. Nam risus orci, rhoncus eu, aliquam ut, interdum ut, orci. Suspendisse rutrum, turpis sed molestie gravida, libero risus iaculis ligula, quis tempor ligula enim vel sem. </p>body {font-family: Calibri,Tahoma,Verdana,Helvetica,sans-serif;} #simple1a { padding: 1em; border: medium solid black; width: 75%; }
• Example 8.2 - Javascript Events Illustrated  
  <p><a href="#" onclick="setBackgroundColor();">Change background color</a></p><p id="simple1b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lobortis orci a odio. Donec cursus, felis eu pulvinar ornare, sem turpis dapibus elit, eget laoreet eros quam vel dolor. Ut ante mauris, ullamcorper quis, posuere quis, lacinia a, felis. In tincidunt malesuada pede. Donec varius lacus sed nisi. Donec rhoncus est ac erat. Duis lobortis fringilla eros. Donec volutpat ligula eu neque. In hac habitasse platea dictumst. Donec in massa. Aenean lectus ante, gravida et, luctus id, posuere at, pede. Nam risus orci, rhoncus eu, aliquam ut, interdum ut, orci. Suspendisse rutrum, turpis sed molestie gravida, libero risus iaculis ligula, quis tempor ligula enim vel sem. </p>body {font-family: Calibri,Tahoma,Verdana,Helvetica,sans-serif;} #simple1b { padding: 1em; border: medium solid black; width: 75%; } function setBackgroundColor() { document.getElementById('simple1b').style.backgroundColor = '#ff33ff'; }
• Example 8.3 - Javascript Events Illustrated  
  <p><a href="#" onclick="setBackgroundColor();">Change background color</a></p><p id="simple2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lobortis orci a odio. Donec cursus, felis eu pulvinar ornare, sem turpis dapibus elit, eget laoreet eros quam vel dolor. Ut ante mauris, ullamcorper quis, posuere quis, lacinia a, felis. In tincidunt malesuada pede. Donec varius lacus sed nisi. Donec rhoncus est ac erat. Duis lobortis fringilla eros. Donec volutpat ligula eu neque. In hac habitasse platea dictumst. Donec in massa. Aenean lectus ante, gravida et, luctus id, posuere at, pede. Nam risus orci, rhoncus eu, aliquam ut, interdum ut, orci. Suspendisse rutrum, turpis sed molestie gravida, libero risus iaculis ligula, quis tempor ligula enim vel sem. </p>body {font-family: Calibri,Tahoma,Verdana,Helvetica,sans-serif;} #simple2 { padding: 1em; border: medium solid black; width: 75%; } function setBackgroundColor() { myid = 'simple2'; mycolor = '#ff33ff'; mynode = document.getElementById(myid); mynode.style.backgroundColor = mycolor; }
• Example 8.4 - Javascript Events Illustrated  
  <p><a href="#" onclick="setBackgroundColor('simple3','#33ffff');">Change background color</a></p><p id="simple3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lobortis orci a odio. Donec cursus, felis eu pulvinar ornare, sem turpis dapibus elit, eget laoreet eros quam vel dolor. Ut ante mauris, ullamcorper quis, posuere quis, lacinia a, felis. In tincidunt malesuada pede. Donec varius lacus sed nisi. Donec rhoncus est ac erat. Duis lobortis fringilla eros. Donec volutpat ligula eu neque. In hac habitasse platea dictumst. Donec in massa. Aenean lectus ante, gravida et, luctus id, posuere at, pede. Nam risus orci, rhoncus eu, aliquam ut, interdum ut, orci. Suspendisse rutrum, turpis sed molestie gravida, libero risus iaculis ligula, quis tempor ligula enim vel sem. </p>body {font-family: Calibri,Tahoma,Verdana,Helvetica,sans-serif;} #simple3 { padding: 1em; border: medium solid black; width: 75%; } function setBackgroundColor(myid,mycolor) { mynode = document.getElementById(myid); mynode.style.backgroundColor = mycolor; }
• Example 8.5 - Javascript Events Illustrated  
  <p>Background color: <input type="text" id="background_color"/><br/><button onclick="setBackgroundColor('simple4');" type="submit">Set background color</button></p><p id="simple4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lobortis orci a odio. Donec cursus, felis eu pulvinar ornare, sem turpis dapibus elit, eget laoreet eros quam vel dolor. Ut ante mauris, ullamcorper quis, posuere quis, lacinia a, felis. In tincidunt malesuada pede. Donec varius lacus sed nisi. Donec rhoncus est ac erat. Duis lobortis fringilla eros. Donec volutpat ligula eu neque. In hac habitasse platea dictumst. Donec in massa. Aenean lectus ante, gravida et, luctus id, posuere at, pede. Nam risus orci, rhoncus eu, aliquam ut, interdum ut, orci. Suspendisse rutrum, turpis sed molestie gravida, libero risus iaculis ligula, quis tempor ligula enim vel sem. </p>body {font-family: Calibri,Tahoma,Verdana,Helvetica,sans-serif;} #simple4 { padding: 1em; border: medium solid black; width: 75%; } function setBackgroundColor(myid) { mynode = document.getElementById(myid); mycolor = document.getElementById('background_color').value; mynode.style.backgroundColor = mycolor; }
• Example 8.6 - Javascript Events Illustrated  
  <ul><li><a href="#" onclick="setBackgroundColor('p1','#ff3333');">Click to make "red"</a></li><li><a href="#" onclick="setBackgroundColor('p1','#3333ff');">Click to make "blue"</a></li><li><a href="#" ondblclick="setBackgroundColor('p1','#33ff33');">Double Click to make "green"</a></li><li><a href="#" onmouseover="setBackgroundColor('p1','#ffff33');" onmouseout="setBackgroundColor('p1','#cccccc');">Mouseover to make "yellow" and mouseout to make "gray"</a></li><li><a href="#" onkeypress="setBackgroundColor('p1','#ff33ff');">Keypress to make "magenta"</a></li></ul><p id="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lobortis orci a odio. Donec cursus, felis eu pulvinar ornare, sem turpis dapibus elit, eget laoreet eros quam vel dolor. Ut ante mauris, ullamcorper quis, posuere quis, lacinia a, felis. In tincidunt malesuada pede. Donec varius lacus sed nisi. Donec rhoncus est ac erat. Duis lobortis fringilla eros. Donec volutpat ligula eu neque. In hac habitasse platea dictumst. Donec in massa. Aenean lectus ante, gravida et, luctus id, posuere at, pede. Nam risus orci, rhoncus eu, aliquam ut, interdum ut, orci. Suspendisse rutrum, turpis sed molestie gravida, libero risus iaculis ligula, quis tempor ligula enim vel sem. </p>body {font-family: Calibri,Tahoma,Verdana,Helvetica,sans-serif;} #p1 { padding: 1em; border: medium solid black; width: 75%; } function setBackgroundColor(myid,mycolor) { mynode = document.getElementById(myid); mynode.style.backgroundColor = mycolor; return false; }
• Example 8.7 - Exposing Additional Form Elements  
  <form method="get" name="ice_cream" id="ice_cream" action="http://cscie12.dce.harvard.edu/echo" enctype="application/x-www-form-urlencoded"><div> Would you like ice cream?<br/><input type="radio" name="want" id="ic_yes" value="yes" onclick="displayIceCreamOptions()"/><label for="ic_yes">Yes</label><br/><input type="radio" name="want" id="ic_no" value="no" onclick="displayIceCreamOptions()"/><label for="ic_no">No</label></div><fieldset id="icecream_options" style="display: none;"><legend>Ice Cream Options</legend><p>How would you like it?</p><input type="radio" id="container_cup" name="container" value="cup"/><label for="container_cup">Cup</label><br/><input type="radio" id="container_cone" name="container" value="cone"/><label for="container_cone">Cone</label><br/><p>Pick your toppings:</p><input type="checkbox" name="toppings" id="toppings_wc" value="whipcream"/><label for="toppings_wc">Whipped cream</label><br/><input type="checkbox" name="toppings" id="toppings_j" value="jimmies"/><label for="toppings_j">Jimmies</label><br/><input type="checkbox" name="toppings" id="toppings_nuts" value="nuts"/><label for="toppings_nuts">Nuts</label><br/><input type="checkbox" name="toppings" id="toppings_cherry" value="cherry"/><label for="toppings_cherry">Cherry</label></fieldset><p><input type="submit"/></p></form>#icecream_options { display:none; background-color: #eee; margin-left: 2em; }function displayIceCreamOptions() { var divico = document.getElementById('icecream_options'); var inputYes = document.getElementById('ic_yes'); if (inputYes.checked == true) { divico.style.display = 'block'; } else { divico.style.display = 'none'; } }
• Example 8.8 - Simple Form Validation  
  <form onsubmit="return Validate(this)" method="get" action="http://cscie12.dce.harvard.edu/echo" enctype="application/x-www-form-urlencoded"><div><label for="YourName1">Enter your name</label>: <input type="text" id="YourName1" name="YourName"/><br/><input type="submit" value="Submit Information"/></div></form>function Validate(myForm) { console.log(myForm); if(myForm.YourName.value == null || myForm.YourName.value == "") { console.log("in failure branch"); alert("Please enter your name!"); myForm.YourName.focus(); myForm.YourName.style.backgroundColor = '#ff3'; return false; } else { console.log("in success branch"); return true; } }
• Example 8.9 - Form Validation with Regular Expressions  
  <form onsubmit="return Validate(this)" method="get" action="http://cscie12.dce.harvard.edu/echo" enctype="application/x-www-form-urlencoded"><div><label for="email1">Email Address</label>: <input type="text" size="32" name="email" id="email1"/><br/><input type="submit"/></div></form>
• Example 8.10  
  <div id="seasonslist1"><p><button onclick="makeSeasonsList(); return false;" type="submit">Click to append list of seasons</button></p></div>function makeSeasonsList() { var ul_node = document.createElement("ul"); // Autumn var li_node1 = document.createElement("li"); var li_text1 = document.createTextNode("Autumn"); li_node1.appendChild(li_text1); // Winter var li_node2 = document.createElement("li"); var li_text2 = document.createTextNode("Winter"); li_node2.appendChild(li_text2); // Spring var li_node3 = document.createElement("li"); var li_text3 = document.createTextNode("Spring"); li_node3.appendChild(li_text3); // Summer var li_node4 = document.createElement("li"); var li_text4 = document.createTextNode("Summer"); li_node4.appendChild(li_text4); // Append the list items to the ul ul_node.appendChild(li_node1); ul_node.appendChild(li_node2); ul_node.appendChild(li_node3); ul_node.appendChild(li_node4); // Place on page var container = document.getElementById("seasonslist1"); container.appendChild(ul_node); }
• Example 8.11  
  <div id="seasonslist2"><p><button onclick="makeSeasonsList();" type="submit">Click to append list of seasons</button></p></div>function makeSeasonsList() { ul_node = document.createElement("ul"); var seasons = ['Spring','Summer','Autumn','Winter']; for (i in seasons) { var mytext = i + " " + seasons[i]; var text_node = document.createTextNode(mytext); var li_node = document.createElement("li"); li_node.appendChild(text_node); ul_node.appendChild(li_node); }; var container = document.getElementById("seasonslist2"); container.appendChild(ul_node); }
• Example 8.12  
  <div id="seasonslist3"><p><button onclick="makeSeasonsList();" type="submit">Click to append list of seasons</button></p></div>function makeSeasonsList() { ul_node = document.createElement("ul"); var seasons = ['Spring','Summer','Autumn','Winter']; seasons.forEach(function(s){ var text_node = document.createTextNode(s); var li_node = document.createElement("li"); li_node.appendChild(text_node); ul_node.appendChild(li_node); }); var container = document.getElementById("seasonslist3"); container.appendChild(ul_node); }
• Example 8.13  
  <div id="seasonslist2"><p><button onclick="makeSeasonsList(); return false;" type="submit">Click to append list of seasons</button></p></div>function makeSeasonsList() { ul_node = document.createElement("ul"); var mydata= {"seasons":['Spring','Summer','Fall','Winter']} ; var seasons = mydata.seasons; for (i in mydata.seasons) { var mytext = i + " " + seasons[i]; var text_node = document.createTextNode(mytext); var li_node = document.createElement("li"); li_node.appendChild(text_node); ul_node.appendChild(li_node); }; var container = document.getElementById("seasonslist2"); container.appendChild(ul_node); }
• Example 8.14 - JS Separation from Markup  
  <div id="cscie12-course2" style="font-family: calibri,verdana,tahoma,helvetica,sans-serif; float: left; width: 50%; padding: 10px; margin: 10px; border: medium solid black; background-color: #ffb;"><h3>CSCI E-12: Fundamentals of Website Development</h3><p> Harvard Extension School<br/> David Heitmeyer <br/> CSCI E-12 </p><p id="cscie12-description2"> This course provides a comprehensive overview of website development. Students explore the prevailing vocabulary, tools, and standards used in the field and learn how the various facets including HTML5, XHTML, CSS, JavaScript, Ajax, multimedia, scripting languages, HTTP, clients, servers, and databases function together in today's web environment. The course provides a solid web development foundation, focusing on content and client-side (browser) components (HTML5, XHTML, CSS, JavaScript, multimedia), with an overview of the server-side technologies. In addition, software and services that are easily incorporated into a website (for example, maps, checkout, blogs, content management) are surveyed and discussed. Students produce an interactive website on the topic of their choice for the final project and leave the course prepared for more advanced and focused web development studies. </p></div><div style="width: 20%; float: left; margin-left: 2em;"><p><strong>Hide/Show/Toggle Description</strong></p><ul><li><a href="#" id="hide">Hide</a></li><li><a href="#" id="show">Show</a></li><li><a href="#" id="toggle">Toggle</a></li></ul></div>$(document).ready(function() { $('#hide').click( function(event){ $('#cscie12-description2').fadeOut('slow'); event.preventDefault(); } ); $('#show').click( function(event){ $('#cscie12-description2').fadeIn('slow'); event.preventDefault(); } ); $('#toggle').click( function(event) { console.log('toggle!'); $('#cscie12-description2').toggle('slow'); event.preventDefault(); } ); });