Session 08 - JavaScript, Part 1

<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>
 

In style element (<style type="text/css">) within head element:

body {font-family: Calibri,Tahoma,Verdana,Helvetica,sans-serif;}
#simple1a { 
  padding: 1em; 
  border: medium solid black;
  width: 75%;
}

<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>
  

In style element (<style type="text/css">) within head element:

body {font-family: Calibri,Tahoma,Verdana,Helvetica,sans-serif;}
#simple1b { 
  padding: 1em; 
  border: medium solid black;
  width: 75%;
}

In script element within head element (<script type="text/javascript">):

function setBackgroundColor() {
    document.getElementById('simple1b').style.backgroundColor = '#ff33ff';
}

<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>
  

In style element (<style type="text/css">) within head element:

body {font-family: Calibri,Tahoma,Verdana,Helvetica,sans-serif;}
#simple2 { 
  padding: 1em; 
  border: medium solid black;
  width: 75%;
}

In script element within head element (<script type="text/javascript">):

function setBackgroundColor() {
    myid = 'simple2';
    mycolor = '#ff33ff';
    mynode = document.getElementById(myid);
    mynode.style.backgroundColor = mycolor;
}

<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>
  

In style element (<style type="text/css">) within head element:

body {font-family: Calibri,Tahoma,Verdana,Helvetica,sans-serif;}
#simple3 { 
  padding: 1em; 
  border: medium solid black;
  width: 75%;
}

In script element within head element (<script type="text/javascript">):

function setBackgroundColor(myid,mycolor) {
    mynode = document.getElementById(myid);
    mynode.style.backgroundColor = mycolor;
}

<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>
  

In style element (<style type="text/css">) within head element:

body {font-family: Calibri,Tahoma,Verdana,Helvetica,sans-serif;}
#simple4 { 
  padding: 1em; 
  border: medium solid black;
  width: 75%;
}

In script element within head element (<script type="text/javascript">):

function setBackgroundColor(myid) {
    mynode = document.getElementById(myid);
    mycolor = document.getElementById('background_color').value;
    mynode.style.backgroundColor = mycolor;
}

 <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>
  

In style element (<style type="text/css">) within head element:

body {font-family: Calibri,Tahoma,Verdana,Helvetica,sans-serif;}
#p1 { 
  padding: 1em; 
  border: medium solid black;
  width: 75%;
}

In script element within head element (<script type="text/javascript">):

function setBackgroundColor(myid,mycolor) {
    mynode = document.getElementById(myid);
    mynode.style.backgroundColor = mycolor;
    return false;
}

<form method="get" name="ice_cream" id="ice_cream" action="http://cscie12.dce.harvard.edu/echo">
<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>

In style element (<style type="text/css">) within head element:

#icecream_options {
    display:none; 
    background-color: #eee;
    margin-left: 2em;
}

In script element within head element (<script type="text/javascript">):

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'; 
    }
}

<form onsubmit="return Validate(this)" method="get" action="http://cscie12.dce.harvard.edu/echo">
<div><label for="YourName1">Enter your name</label>:
<input type="text" id="YourName1" name="YourName"/><br/>
<input type="submit" value="Submit Information"/></div>
</form>

In script element within head element (<script type="text/javascript">):

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;
  }
}

<form onsubmit="return Validate(this)" method="get" action="http://cscie12.dce.harvard.edu/echo">
<div><label for="email1">Email Address</label>:
<input type="text" size="32" name="email" id="email1"/><br/>
<input type="submit"/></div>
</form>

In head element:

<script type="text/javascript" src="example9.js"> </script>

Contents of example9.js

/* validates that the entry is formatted as an email address */
function Validate(thisForm) {
    var tocheck = thisForm.email.value;
    var re = /^[\w\._-]+@[\w\._-]+\.[a-zA-Z]{2,7}$/;
    if (!tocheck.match(re)) {
        alert("Please verify the email address format.");
        thisForm.email.focus();
        thisForm.email.style.backgroundColor = '#ff9';
        return false;
    } else {
        return true;
    }
}

 <div id="seasonslist1"><p><button onclick="makeSeasonsList(); return false;" type="submit">Click to append list of seasons</button></p>
</div>

In script element within head element (<script type="text/javascript">):

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);
}

 <div id="seasonslist2"><p><button onclick="makeSeasonsList();" type="submit">Click to append list of seasons</button></p>
</div>

In script element within head element (<script type="text/javascript">):

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);
}

 <div id="seasonslist3"><p><button onclick="makeSeasonsList();" type="submit">Click to append list of seasons</button></p>
</div>

In script element within head element (<script type="text/javascript">):

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);
}

 <div id="seasonslist2"><p><button onclick="makeSeasonsList(); return false;" type="submit">Click to append list of seasons</button></p>
</div>

In script element within head element (<script type="text/javascript">):

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);
}

<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>  

In script element within head element (<script type="text/javascript">):

$(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();
    }
   );
});