Session 08 - Javascript, Part 1

Harvard Extension School  
Fall 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, slide5
Javascript Resources, slide6
Javascript: Manipulate Styles, slide7
Javascript: Manipulate Content, slide8
Javascript: Communicate with Web Server, slide9
Javascript: Add functionality, slide10
Javascript: Add functionality, slide11
Getting Started with JavaScript, slide12
JavaScript and HTML, slide13
Script element in HTML/XML syntax should have separate end tag!, slide14
JavaScript in HTML, slide15
Events, slide16
addEventListener function lets us add Event Listeners via JavaScript!, slide17
JavaScript Functions, slide18
Document Object Model (DOM), slide19
JavaScript and DOM, slide20
JavaScript and Ice Cream, slide21

Presentation contains 21 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:

If you've avoided JavaScript, this is the year to learn it.

And if you don't, you risk being left behind.

Javascript

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

Javascript: Add functionality

Code highlighting!

<header>
  <h1>Our Solar System</h1>
  <nav>
    <ul>
      <li><a href="#">Planet</a></li>
      <li><a href="#">Solar System</a></li>
      <li><a href="#">Galaxy</a></li>
      <li><a href="#">Universe</a></li>
    </ul>
  </nav>
</header>
<main>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Montes nascetur ridiculus mus mauris vitae ultricies leo integer malesuada.
  </p>
</main>
header {
  background-color: rgb(250, 250, 200);
  font-family: sans-serif;
  display: flex;
  padding: 1rem;
}
header > nav {
  flex-grow: 1;
  flex-shrink: 1;
}
header nav ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  justify-content: flex-end;
}
header nav ul li {
  margin-left: 1rem;
}
header nav ul li a {
  display: block;
  padding: 0.5rem;
  text-align: right;
  font-weight: bold;
  font-size: 1.2rem;
}
header nav ul li a:link,
header nav ul li a:visited {
  text-decoration: none;
}
header nav ul li a:hover,
header nav ul li a:active {
  text-decoration: underline;
  color: white;
  background-color: blue;
}
main {
  line-height: 1.5;
}
h1,
ul,
li {
  margin: 0;
  padding: 0;
}

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", makeSeasonsList);

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 7.1 - Exposing Additional Form Elements - Example 7.1

 <form method="post" name="ice_cream" id="ice_cream" action="https://cs12.net/form/submit.php">
   <fieldset>
     <legend>Would you like ice cream?     </legend>
     <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>   </fieldset>
   <fieldset id="icecream_options">
     <legend>Ice Cream Options     </legend>
     <fieldset>
       <legend>Would you like a cup or a cone?       </legend>
       <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>     </fieldset>
     <fieldset>
       <legend>What topping do you want?       </legend>
       <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>   </fieldset>
   <button type="submit">Submit Order   </button>
 </form>

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

label {
  display: block;
}

input[type=submit],
button[type=submit] {
  display: block;
}
form fieldset {
  margin-bottom: 1rem;
}
#icecream_options {
  border-style: none;
}
button.clicked {
  border: 3px solid purple;
}
ul.resourcelist {
  border: 2px solid black;
  border-radius: 5px;
}
.hidden {
  display: none;
}
body {
  font-family: helvetica, sans-serif;
  margin: 1rem;
  line-height: 1.5;
}

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


document.addEventListener('DOMContentLoaded',function(){
    console.log("dom is loaded!");
    let iceCreamOptions = document.querySelector('#icecream_options');

    iceCreamOptions.classList.add("hidden");
    let wantRadioInputs = document.querySelectorAll("form input[name=want]");

    wantRadioInputs.forEach(function(el){
        console.log(el);
        el.addEventListener("click",function(){
            console.log("radio button was just clicked!");
            let yesRadio = document.querySelector('#ic_yes');
            if (yesRadio.checked == true) {
                console.log("Yes is checked!");
                iceCreamOptions.classList.remove("hidden");
            } else {
                console.log("Yes is NOT checked");
                iceCreamOptions.classList.add("hidden");
            }
        })
    });

});

ice cream options

ice cream options