Session 08 - Javascript

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

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

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

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

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

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

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

In style element (<style>) within head element:

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

In script element within head element (<script>):

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

 <form onsubmit="return Validate(this)" method="get" action="https://cscis12.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>):

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="https://cscis12.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 src="example9.js"> </script>

Contents of example9.js

/* validates that the entry is formatted as an email address */
function Validate(thisForm) {
    let tocheck = thisForm.email.value;
    let 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();" type="submit">Click to append list of seasons     </button>
   </p>
 </div>

In script element within head element (<script>):

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

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

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

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

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

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

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