Gots N' Needs Notecards

Gots: On one side of the notecard write what you feel like you "got" so from doing Homework Assignment 2 and CP 2.

Needs: the other side of the notecard, write something you feel you still need to understand, or that would help you understand this material.

CSE 154

Lecture 9: Forms and Events

What we've Covered in JavaScript so Far

Types (Strings, Numbers, Arrays)

Conditionals, Loops, Functions

Modular JS Pattern

Basic Event Handlers

Today: More Events, Forms, Timers, and Animations

More HTML input types

Grouping Input: <fieldset>, <legend>

groups of input fields with optional caption (block)

          

            
Credit cards:
             Visa
             MasterCard
             American Express
          
          

HTML

Fieldset groups related input fields, adds a border; legend supplies a caption

Styling Form Elements

          element[attribute="value"] {
            property: value;
            property: value;
            ...
            property: value;
          }
          

CSS (template)

          input[type="text"] {
            background-color: yellow;
            font-weight: bold;
          }
          

CSS (example)

Attribute selector: matches only elements that have a particular attribute value

Useful for controls because many share the same element (input)

One other handy note

A shortcut for document.getElementById

One method we will use a LOT is document.getElementById. It's handy to declare a shortcut to help us out

  function $(id) {
    return document.getElementById(id);
  }

JS

Example:

HTML

	let button2 = document.getElementById("dothething");
	let button = $("dothething");               // returns the same as above.

JS

Timers

Used to delay or set intervals for executing functions

Setting a Timer

Both setTimeout and setInterval return an ID representing the timer

• This ID can be passed to clearTimeout/Interval later to stop the timer

setTimeout Example

          Click me!
          
          

HTML

          window.onload = function() {
            document.getElementById("clickme").onclick = delayedMessage;
          };

          function delayedMessage() {
            document.getElementById("outputText").innerHTML = "Wait for it...";
            setTimeout(sayBooyah, 5000);
          }

          function sayBooyah() { // called when the timer goes off
            document.getElementById("outputText").innerHTML = "BOOYAH!";
          }
          

JS

setInterval Example

          let timer = null; // stores ID of interval timer
          function delayMsg2() {
            if (timer === null) {
              timer = setInterval(mowgli, 1000);
            } else {
              clearInterval(timer);
              timer = null;
            }
          }

          function mowgli() {
            document.getElementById("outputText").innerHTML += "Mowgli!"
          }
          

JS

Passing Parameters to Timers

          function delayedMultiply() {
            // 6 and 7 are passed to multiply when timer goes off
            setTimeout(multiply, 2000, 6, 7);
          }

          function multiply(a, b) {
            alert(a * b);
          }
          

JS

Any parameters after the delay are eventually passed to the timer function

• Doesn't work in IE; must create an intermediate function to pass the parameters

Why not just write this?

          setTimeout(multiply(6 * 7), 2000);
          

JS

Common Timer Errors

Many students mistakenly write () when passing the function

          setTimeout(booyah(), 2000);
          setTimeout(booyah, 2000);

          setTimeout(multiply(num1 * num2), 2000);
          setTimeout(multiply, 2000, num1, num2);
          

JS

What does it actually do if you have the ()?

• It calls the function immediately, rather than waiting the 2000ms!

The Keyword this

          this.fieldName                 // access field
          this.fieldName = value;        // modify field
          this.functionName(parameters); // call method
          

JS

All JavaScript code actually runs inside of an object

By default, code runs in the global window object (so this === window)

• All global variables and functions you declare become part of window

The this keyword refers to the current object

Event Handler Binding

          window.onload = function() {
            document.getElementById("textbox").onmouseout = booyah;
          };

          function booyah() { // booyah knows what object it was called on
            this.value = "booyah";
          }
          

JS

Event handlers attached unobtrusively are bound to the element

Inside the handler, that element becomes this