Session 09 - JavaScript, Part 2
Examples

• Example 9.1  
  <div id="itemlistcontainer"><button onclick="makeApplesList();" type="submit">Build List of Apples</button></div>function makeApplesList() { ul_node = document.createElement("ul"); let mydata= {"apples" : ['Macoun','Empire','Honey Crisp','Albemarle Pippin']}; let itemlist = mydata.apples; for (i in itemlist) { let mytext = itemlist[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("itemlistcontainer"); container.appendChild(ul_node); }
• Example 9.2 - 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(); } ); });
• Example 9.3 - Separation from Markup  
  <form method="get" name="ice_cream" id="ice_cream" action="https://cscie12.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"/> Yes</label><label><input type="radio" name="want" id="ic_no" value="no"/> No</label></div><fieldset id="icecream_options"><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><br/><label><input type="radio" id="container_cone" name="container" value="cone"/> Cone</label><br/><p>Pick your toppings:</p><label><input type="checkbox" name="toppings" id="toppings_wc" value="whipcream"/> Whipped cream</label><br/><label><input type="checkbox" name="toppings" id="toppings_j" value="jimmies"/> Jimmies</label><br/><label><input type="checkbox" name="toppings" id="toppings_nuts" value="nuts"/> Nuts</label><br/><label><input type="checkbox" name="toppings" id="toppings_cherry" value="cherry"/> Cherry</label></fieldset><p><input type="submit"/></p></form>#icecream_options { background-color: #eee; margin-left: 2em; } label { display: block; }$(document).ready( function(){ $("#icecream_options").hide(); $("input[name='want']").click( function(){ displayIceCreamOptions(); } ); } ); function displayIceCreamOptions() { if ($("input[name='want']:checked").val() == 'yes') { $('#icecream_options').fadeIn('slow'); } else { $('#icecream_options').fadeOut('slow'); } }
• Example 9.4 - Check/Uncheck all  
  <form action="https://cscie12.dce.harvard.edu/echo" method="get" enctype="application/x-www-form-urlencoded"><h3>How did you hear about us?</h3><p>[<a href="#" id="checkall">check all</a>] [<a href="#" id="uncheckall">uncheck all</a>] [<a href="#" id="togglecheckboxes">toggle</a>] </p><ul style="list-style: none;"><li><input type="checkbox" name="how" value="radio"/>Radio</li><li><input type="checkbox" name="how" value="newspaper"/>Newspaper</li><li><input type="checkbox" name="how" value="magazine"/>Magazine</li><li><input type="checkbox" name="how" value="online"/>Online</li><li><input type="checkbox" name="how" value="friend"/>Friend</li></ul><input type="submit"/></form>$(document).ready(function() { console.log($('#input[name="how"]')); $('#checkall').click(function() { $('input[name="how"]').prop('checked',true); console.log('check all!'); }); $('#uncheckall').click(function() { $('input[name="how"]').prop('checked',false); console.log('uncheck all!'); }); $('#togglecheckboxes').click(function() { $('input[name=how]').each(function (i) { if ($(this).is(':checked')) { $(this).prop('checked',false); } else { $(this).prop('checked',true); } }); }); });
• Example 9.5 - Separation from Markup  
  <form method="get" name="ice_cream" id="ice_cream" action="https://cscie12.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"/> Yes</label><label><input type="radio" name="want" id="ic_no" value="no"/> No</label></div><fieldset id="icecream_options"><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 { background-color: #eee; margin-left: 2em; } label { display: block; }$(document).ready(function(){ $("#icecream_options").hide(); $("input[name='want']").click(function(){ displayIceCreamOptions(); }); }); function displayIceCreamOptions() { if ($("input[name='want']:checked").val() == 'yes') { $('#icecream_options').fadeIn('slow'); } else { $('#icecream_options').fadeOut('slow'); } }