Session 08 - Javascript, Part 1

Harvard Extension School  
Spring 2022

Course Web Site: https://cscie12.dce.harvard.edu/

Topics

  1. JavaScript
  2. Getting Started with JavaScript
  3. JavaScript and HTML
  4. Document Object Model (DOM)
  5. JavaScript and Ice Cream

Session 08 - Javascript, Part 1, slide1
JavaScript, slide2
Client-side Web Parts: Markup, Style, Function, slide3
Javascript, slide4
Javascript Resources, slide5
Javascript: Manipulate Styles, slide6
Javascript: Manipulate Content, slide7
Javascript: Communicate with Web Server, slide8
Javascript: Add functionality, slide9
Getting Started with JavaScript, slide10
JavaScript and HTML, slide11
Script element in HTML/XML syntax should have separate end tag!, slide12
JavaScript in HTML, slide13
Events, slide14
addEventListener function lets us add Event Listeners via JavaScript!, slide15
JavaScript Functions, slide16
Document Object Model (DOM), slide17
JavaScript and DOM, slide18
JavaScript and Ice Cream, slide19

Presentation contains 19 slides

JavaScript

Goals for the JavaScript Unit

Client-side Web Parts: Markup, Style, Function

http client

  • Markup (HTML)
    • Structure
    • Content
  • Style (CSS)
    • Style
    • Presentation
    • Appearance
  • Function (JavaScript)
    • Actions
    • Manipulations
    • Behavior

Structure + Style + Function: solarsystem.html
markup

Structure + Style: solarsystem-style.html
markup

Structure: solarsystem-markup.html
markup

Javascript

"JavaScript is now a language every developer should know."
– Mike Loukides, Vice President of Content Strategy for O'Reilly Media

JavaScript is everywhere: servers, rich web client libraries, HTML5, databases, even JavaScript-based languages.
If you've avoided JavaScript, this is the year to learn it.
And if you don't, you risk being left behind.

What is it?

What can it do?

Javascript provides programmatic access to virtually all aspects of a page.

ECMAScript and JavaScript

The standard for JavaScript is called ECMAScript.

Javascript Resources

Javascript: Manipulate Styles

ice cream optionsice cream options

Javascript: Manipulate Content

table sortable

Javascript: Communicate with Web Server

course search

Javascript: Add functionality

javascript and functionality

Getting Started with JavaScript

Some basics

JavaScript and HTML

Script element in HTML/XML syntax should have separate end tag!

To function in all browsers, script element should have an explicit end tag. Best: 
<script src="jquery.js"  > </script>
Do not use: 
<script src="jquery.js"  />

JavaScript in HTML

External Script
<script src="path/to/javascript/file.js"  > </script>
Script within HTML document
<script>
  /*
    JavaScript code as content of script element
  */
</script>

Events

Working with Events

addEventListener function lets us add Event Listeners via JavaScript!


  let myButton = document.getElementById("makelistbutton");
  myButton.addEventListener("click", createMyListOfFruits);

JavaScript Functions

Named Functions

function davidsFunction() {


}

Anonymous Functions

function() {


}

Functions with arguments

function calcContrast(color1, color2) {
  let contrast;
  /* contrast calculation..... */
  return(contrast);
}

calling a function:

let myContrast = calcContrast('a51c30','ffffff');

Document Object Model (DOM)

web page
dom tree

<html lang="en">
  <head>
    <title>My Schools</title>
  </head>
  <body>
    <h1>My Schools</h1>
    <ul>
      <li>
        <a href="http://www.harvard.edu/">Harvard University</a><br/>
        <img src="images/veritas.gif" alt="Harvard Shield" height="84" width="72"/>
      </li>
      <li>
        <a href="http://www.ku.edu/">University of Kansas</a><br/>
        <img src="images/KUSeal.gif" alt="University of Kansas Seal" height="73" width="72"/>
      </li>
    </ul>
  </body>
</html>

DOM Visualizer

dom visualization

JavaScript and DOM

JavaScript and Ice Cream

Exposing Additional Form Elements

Additional relevant form elements are exposed based upon user input. Here, this is achieved by having the entire form in the markup, with a certain section hidden via CSS (display: none;). If "Yes" is chosen, the display property is changed to "block" through JS.

Example 8.1 - Exposing Additional Form Elements - Example 8.1

 <form method="post" name="ice_cream" id="ice_cream" action="https://cs12.net/form/submit.php">
   <div>Would you like ice cream?
     <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>Cup or a Cone?
     </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_jimmies" value="jimmies"/>
Jimmies     </label>
     <label>
       <input type="checkbox" name="toppings" id="toppings_sprinkles" value="sprinkles"/>
Sprinkles     </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>
   <button type="submit">Submit Order   </button>
 </form>

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

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

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


document.addEventListener("DOMContentLoaded", function() {
  let inputYes = document.getElementById('ic_yes');
  inputYes.addEventListener("click", function() {
    displayIceCreamOptions();
  });

  let inputNo = document.getElementById('ic_no');
  inputNo.addEventListener("click", function() {
    displayIceCreamOptions();
  });
});

function displayIceCreamOptions() {
let divICO = document.getElementById('icecream_options');
let inputYes = document.getElementById('ic_yes');
if (inputYes.checked == true) {
  divICO.classList.add("show");
} else {
  divICO.classList.remove("show");
}
}
 

ice cream options

ice cream options