Session 08 - Javascript
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="https://cscis12.dce.harvard.edu/echo" enctype="application/x-www-form-urlencoded"><div> Would you like ice cream?<br/><label><input type="radio" name="want" id="ic_yes" value="yes" onclick="displayIceCreamOptions()"/> Yes</label><label><input type="radio" name="want" id="ic_no" value="no" onclick="displayIceCreamOptions()"/> No</label></div><fieldset id="icecream_options" style="display: none;"><legend>Ice Cream Options</legend><p>How would you like it?</p><label><input type="radio" id="container_cup" name="container" value="cup"/> Cup</label><label><input type="radio" id="container_cone" name="container" value="cone"/> Cone</label><p>Pick your toppings:</p><label><input type="checkbox" name="toppings" id="toppings_wc" value="whipcream"/> Whipped cream</label><label><input type="checkbox" name="toppings" id="toppings_j" value="jimmies"/> Jimmies</label><label><input type="checkbox" name="toppings" id="toppings_nuts" value="nuts"/> Nuts</label><label><input type="checkbox" name="toppings" id="toppings_cherry" value="cherry"/> Cherry</label></fieldset><p><input type="submit"/></p></form>#icecream_options { display:none; background-color: #eee; margin-left: 2em; } label { display: block; }function displayIceCreamOptions() { let divico = document.getElementById('icecream_options'); let 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="https://cscis12.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="https://cscis12.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();" type="submit">Click to append list of seasons</button></p></div>function makeSeasonsList() { let ul_node = document.createElement("ul"); // Autumn let li_node1 = document.createElement("li"); let li_text1 = document.createTextNode("Autumn"); li_node1.appendChild(li_text1); // Winter let li_node2 = document.createElement("li"); let li_text2 = document.createTextNode("Winter"); li_node2.appendChild(li_text2); // Spring let li_node3 = document.createElement("li"); let li_text3 = document.createTextNode("Spring"); li_node3.appendChild(li_text3); // Summer let li_node4 = document.createElement("li"); let 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 let 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"); let seasons = ['Summer','Autumn','Winter','Spring']; for (i in seasons) { let mytext = i + " " + seasons[i]; let text_node = document.createTextNode(mytext); let li_node = document.createElement("li"); li_node.appendChild(text_node); ul_node.appendChild(li_node); }; let 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"); let seasons = ['Summer','Autumn','Winter','Spring']; seasons.forEach(function(s){ let text_node = document.createTextNode(s); let li_node = document.createElement("li"); li_node.appendChild(text_node); ul_node.appendChild(li_node); }); let container = document.getElementById("seasonslist3"); container.appendChild(ul_node); }
• Example 8.13  
  <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"); let mydata= {"seasons":['Spring','Summer','Fall','Winter']} ; let seasons = mydata.seasons; for (i in mydata.seasons) { let mytext = i + " " + seasons[i]; let text_node = document.createTextNode(mytext); let li_node = document.createElement("li"); li_node.appendChild(text_node); ul_node.appendChild(li_node); }; let container = document.getElementById("seasonslist2"); container.appendChild(ul_node); }