Javascript (3): Events and Functions

Short live intro on these topics. After that you will work through the page on your own. (There is a lab handout at the bottom but you'll have to go through each check points. It's not meant to be hard, it's meant to have you understand. Often the answer is in the slides. Let me know if it's unclear/hard).

1. Last class, variables.
2. Go over idea of events (something happening) and responding to it.
   • Google Search, YouTube, gmail are full of events. You rarely reload/refresh the page but things happen!

     Events in Google Search Events in YouTube

     Google Search homepage

     • Type in the box: suggestions update per keystroke (input)
     • Press Enter: search runs (keydown / submit)
     • Hover over "I'm Feeling Lucky": the button text spins to something else (mouseover)
     • Click the microphone or the apps grid: a panel opens (click)

     Close

     YouTube video page

     • Hover over a thumbnail: preview plays (mouseover)
     • Press space or k: play/pause (keydown)
     • Press f: fullscreen (keydown)
     • Click and drag the progress bar (mousedown, mousemove, mouseup)
     • Scroll down: more comments load (scroll)
     • Video ends: next one autoplays (ended, an event with no user action)

     Close
3. Functions: it's a way to reduce repeating the same code over and over again. It's also a way to access code that you have not written yourself. (You did not write the code that actually does the work in alert()... it opens a window, .. prints out text...)

So far every line of Javascript you have written ran once, top to bottom, the moment the page loaded. You have used variables, arithmetic, string concatenation, prompt(), alert() and document.write().

Today we add two more ideas:

• Events. Code that runs only when the user does something.
• Functions. Code you package under a name so you can call it whenever you want.

In Javascript, an event handler is code that runs when a specific event occurs. Common mouse events:

For a full list: w3schools, DOM events

Two button elements in HTML. Both work, <button> is more flexible:

  <input type="button" value="Click Me" />
  <button>Click Me</button>

Click Me

Nothing happens above. That is why we did not cover it before. We needed a way to react to the button click and that can be doen with "events" using javascript

The simplest way to attach an event handler is to add it as an HTML attribute, named after the event, with Javascript directly inside the quotes:

<!DOCTYPE html>
<html>
<head><title>onclick Demo</title></head>
  <body>

<button onclick="alert('Ouch, you clicked my button!');">Click Me (button)</button>

<div onclick="alert('you clicked my div!');"> click here (div) </div>

</body>
</html>

Try it right here on the slide:

Click Me (button)

[sample file]

The onclick attribute can be applied to nearly any HTML element, not just buttons.

These two events fire as the mouse enters or leaves an element. They are how hover effects are built.

<!DOCTYPE html>
<html>
<body>

  <img src="tick01.jpg"
       onmouseover="alert('You entered the image!');" />

</body>
</html>

[sample file]

Demo 1

Hover over the image. It will generate a onmouseover event.

<img src="tick01.jpg" onmouseover="alert('You entered the image!');" />

Dismiss the alert and hover again. It fires every single time you re-enter. An alert is a blunt way to see an event, it stops the whole page until you click OK. The next demo shows the same two events without interrupting anything.

<div onmouseover="...javascript code to log onmouseover with time...";
     onmouseout="...javascript code to log onmouseover with time...">
  hover in and out of me
</div>

<img onmouseover="alert('hello');" />   correct
<img onmouseover="alert("hello");" />   breaks the HTML

To build a hover effect, the handler needs to change the element it is attached to. There is a one word shortcut for that.

Image rollover. Swap the picture on hover:

<img src="tick01.jpg"
     onmouseover="this.src='tick02.jpg';"
     onmouseout="this.src='tick01.jpg';" />

[sample file]

Demo of the above code.

Hover on and off the image. The src attribute in html is changing based on the event:



Right click the image and choose inspect. Then hover it while you watch the HTML. You will see the src attribute change in place. Notice the source code changing without reloading.

Color change. You can use the same technique to change a property. The CSS style of the <div> is being changed

<div onmouseover="this.style.background='yellow';"
     onmouseout="this.style.background='white';">
  Hover over me
</div>

<p onmouseover="this.style.color='red';"
   onmouseout="this.style.color='black';">
  Now hover over me
</p>

Hover over each one:

Now hover over me

this.style.background is reaching the same CSS property you would write as div { background: yellow; } in a stylesheet. The style rule is now being set from Javascript as a result of an event. The only difference is how multi-word property names are spelled. CSS uses a hyphen, as in font-size. Javascript cannot use a hyphen in a name (it would be read as a minus sign), so it removes the hyphen and capitalizes the next word instead: this.style.fontSize.

A function is a named block of code. You define it once, then call it by name as many times as you need.

<!DOCTYPE html>
<html>
<body>

<button onclick="
  let name = prompt('What is your name?');
  let score1 = Number(prompt('Enter score 1:'));
  let score2 = Number(prompt('Enter score 2:'));
  let score3 = Number(prompt('Enter score 3:'));
  let average = (score1 + score2 + score3) / 3;
  alert(name + ', your average is ' + average);
">Student A</button>

<button onclick="
  let name = prompt('What is your name?');
  let score1 = Number(prompt('Enter score 1:'));
  let score2 = Number(prompt('Enter score 2:'));
  let score3 = Number(prompt('Enter score 3:'));
  let average = (score1 + score2 + score3) / 3;
  alert(name + ', your average is ' + average);
">Student B</button>

<button onclick="
  let name = prompt('What is your name?');
  let score1 = Number(prompt('Enter score 1:'));
  let score2 = Number(prompt('Enter score 2:'));
  let score3 = Number(prompt('Enter score 3:'));
  let average = (score1 + score2 + score3) / 3;
  alert(name + ', your average is ' + average);
">Student C</button>

</body>
</html>

The red part seems redundant. It's repeating the same thing over and over.

Here is the same idea using a function. Much cleaner no?

<!DOCTYPE html>
<html>
<head>
<script>
  function showReport() {
    let name    = prompt("What is your name?");
    let score1  = Number(prompt("Enter score 1:"));
    let score2  = Number(prompt("Enter score 2:"));
    let score3  = Number(prompt("Enter score 3:"));
    let average = (score1 + score2 + score3) / 3;
    alert(name + ", your average is " + average);
  }
</script>
</head>
<body>

  <button onclick="showReport();">Student A</button>
  <button onclick="showReport();">Student B</button>
  <button onclick="showReport();">Student C</button>

</body>
</html>

The red block appears exactly once now. It is the same six lines, in the same order, doing the same thing. The difference is that there is one copy of it instead of three, and the three buttons point at it by name. We say the button is "calling" the function showReport()

In this example, one function is "called" (used) three times. This solves two problems:

• Your file is much more readable. onclick="showReport()" instead of six lines of code.
• The logic (eg. six lines of code) is contained in one place. If you change the function, all three buttons change with it.

The syntax:

A function can receive data when it is called. The values you pass in are called arguments. The names that receive them inside the function are called parameters.

<!DOCTYPE html>
<html>
<head>
<script>
  function greet(name) {
    alert("Hello, " + name + "!");
  }
</script>
</head>
<body>

<script>
  greet("Alice");
</script>

</body>
</html>

The same function now produces different output depending on what you pass in:

  greet("Alice");   gives   Hello, Alice!
  greet("Bob");     gives   Hello, Bob!
  greet("class");   gives   Hello, class!

The syntax:

You can pass numbers too. This is the key idea for Checkpoint 3:

<!DOCTYPE html>
<html>
<head>
<script>
  function showNumber(n) {
    alert("You picked: " + n);
  }
</script>
</head>
<body>

  <button onclick="showNumber(1)">Button 1</button>
  <button onclick="showNumber(2)">Button 2</button>
  <button onclick="showNumber(3)">Button 3</button>

</body>
</html>

[sample file] [sample file 2]

The button passes a message, the function writes it into the document. In a new file called buttons.html, type this in and run it. Only Button 1 is wired up:

<!DOCTYPE html>
<html>
<head>
<script>
  function showMessage(message) {
    document.write("<h1>" + message + "</h1>");
  }
</script>
</head>
<body>

  <button onclick="showMessage('Hello from Button 1');">Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
  <button>Button 4</button>

</body>
</html>

Make two copies of your buttons.html from Checkpoint 3. Leave showMessage() and Buttons 1 through 3 exactly as they are. In the first copy, you will ask the agent to create a new function. Button 4 gets its own, second function, something too "fun and complicated" to build by hand in the next five minutes. This time you are not writing the code, you are writing the request. Open your AI's edit or agent mode on this file and try it twice.

Attempt 1. Step 1
Give it a vague instruction below. Type this in, run it, see what you get:

When button 4 is clicked, do something fun and complicated: open a new window,
play a sound, and change the page's background color to go along with the sound.

Look closely at what comes back. Note what the AI decided for you: what size the window is, what kind of sound it picked, how the color changes, how long any of it lasts, whether the page goes back to normal afterward.

Attempt 1 Step 2
Once you are happy with the result, ask your agent to comment at the top of your file what it is doing and to add descriptive comments on what each function is doing. Read it carefully.

Attempt 2 Step 1.
Using the second copy, give it the precise instruction below:

Add one new function called wildButton(), attached only to Button 4's onclick.
Do not change showMessage() or Buttons 1 through 3. When wildButton() runs:

1. Open a new browser window, 300px by 200px, showing the text "Surprise!".
2. Play a one second tone using the Web Audio API (AudioContext and
   OscillatorNode). Do not load an external sound file.
3. While the tone plays, smoothly slide a rainbow-colored gradient across
   the page background (for example, animate a CSS linear-gradient's
   background-position), so the colors blend continuously rather than
   switching abruptly.
4. When the tone ends, set the background color back to what it was
   before the button was clicked.

Add no other functions.

Run it.

Attempt 2 Step 2
Once you are happy with the result, ask your agent to comment at the top of your file what it is doing and to add descriptive comments on what each function is doing. Read it carefully.