# 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

- img
- img
- img
- img
- img

## JavaScript

Goals for the JavaScript Unit

- Understand some basics in JavaScript
  - events
  - DOM
  - Troubleshoot with browser console
  - Do essential operations:
    - DOM manipulations
    - if...else
    - for and iterations
    - lists, objects, JSON structure
- Understand how to use JavaScript
  - Separate JS from Markup
  - Be able to incorporate JavaScript functionality into a site
  - Be able to use JavaScript for commonly needed functionality
- Ready for more!

## Client-side Web Parts: Markup, Style, Function

Markup (HTML) Structure Content Style (CSS) Style Presentation Appearance Function (JavaScript) Actions Manipulations Behavior | Structure + Style + Function: solarsystem.html Structure + Style: solarsystem-style.html Structure: solarsystem-markup.html

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

## Javascript

### What is it?

- JavaScript is a programming language
- JavaScript runs within web browser
- Key concept in JavaScript is browser events
- But there's more — JavaScript can run on the server and command-line.

### What can it do?

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

- CSS properties
- Markup content
- Forms, communication to Server
- Add functionality

### ECMAScript and JavaScript

The standard for JavaScript is called ECMAScript.

## Javascript Resources

- JavaScript - Mozilla Developer Center
- JS Reference (DevDocs)
- JavaScript Tutorial and Reference from w3schools.com
- JavaScript for Web Designers, a short book available online through the Harvard Library.
- Jennifer Robbins, 2018. Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics, 5th ed. O'Reilly Media. 500 p. ISBN 978-1491960202

## Javascript: Manipulate Styles

- Manipulate Styles / Classes
- Manipulate Content
- Communicate with Web Server to Get and Post data
- Add functionality such as maps, galleries, etc.

## Javascript: Manipulate Content

- Manipulate Styles / Classes
- Manipulate Content
- Communicate with Web Server to Get and Post data
- Add functionality such as maps, galleries, etc.

## Javascript: Communicate with Web Server

- Manipulate Styles / Classes
- Manipulate Content
- Communicate with Web Server to Get and Post data
- Add functionality such as maps, galleries, etc.

## Javascript: Add functionality

- Manipulate Styles / Classes
- Manipulate Content
- Communicate with Web Server to Get and Post data
- Add functionality such as maps, galleries, etc.

## Javascript: Add functionality

- Manipulate Styles / Classes
- Manipulate Content
- Communicate with Web Server to Get and Post data
- Add functionality such as maps, galleries, etc.

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

- JavaScript - Mozilla Developer Center
- JS Reference (DevDocs)
- JavaScript Tutorial and Reference from w3schools.com
- JavaScript for Web Designers, a short book available online through the Harvard Library.
- Jennifer Robbins, 2018. Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics, 5th ed. O'Reilly Media. 500 p. ISBN 978-1491960202

### Some basics

- JS in HTML.
  Including JavaScript in HTML with `script` element, with either `src` attribute or JS code.
- Variables.
  Declare variables with `let` and sometimes `const`.
  Though you will see the older `var`, which works but is not preferred.
- Console is your friend.
  Your browser developer tools will be critical to use, and especially the "Console". Log to the console in JS with

      console.log('hello there!');

- When is the code executed?
  `script` in `head` or right before the body close tag - `</body>`
  But it is good practice to rely on specific events!
- Events, Listeners, and Handlers
  `load`, `click`, `focus`, `blur`, `submit`, `mouseover`, `mouseout`, `keypress`.
  HTML attributes are available, but don't use these.
  Add event listeners through JavaScript!

## JavaScript and HTML

- Scripting (HTML Living Standard)
- `<script>` element
  - Can reference an external JS file (`src` attribute)
  - JS code can be within `script` element
- `<script>` element can go in `head`, but is often placed just before the body close (i.e. `</body>`) elements.
- Note the `<noscript>` element for clients without JavaScript.

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

- Events - things that happen on page
- Event Handlers - code that is run when an event happens
- Registering an Event Handler - linking the code you want to run to an event

### Working with Events

- `addEventListener()`
- `DOMContentLoaded`
- Events: `click`, `submit`, `change`, `focus`
  - And more events: `blur`, `mouseover`, `mouseout`, `keypress`, `mousedown`, and more

## addEventListener function lets us add Event Listeners via JavaScript!

- Example using addEventListener

      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)

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

## JavaScript and DOM

- `getElementById`
- `getElementsByTagName`
- `querySelector` lets us use "CSS selector" syntax and grab the "first" occurence (so you always get a "single" item).
- `querySelectorAll` lets us use "CSS selector" syntax and grab the "all" occurences (so you get a "list" of things).
- `getAttribute` and `setAttribute`
- `classList` and `add`, `remove`, `toggle`
- Various DOM methods to create nodes and add to the node tree (not today!)

## 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" enctype="application/x-www-form-urlencoded"><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>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; } 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"); } }) }); });

- Markup
- Style
- Script
- Display
- Screenshot

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

    });