Module 2: Interactive Webpages with JS

Motivating Module 2: Think, Pair, Share

On your lecture handouts, discuss and respond to the following question (and optionally include a sketch):

• What's one feature involving user interaction on a webpage you would like to learn how to implement (be specific or general)?
  Example: "I would like to learn how to implement a todo-list manager on my webpage!"

Note: We will collect these at the end of the class (optional) - we might add some creative ideas to additional section exercises!

CSE 154

Lecture 7: Intro to JavaScript

Agenda

Administrivia

Introduction to Module 2

JavaScript Basics

• Overview
• Introduction to data types, conditionals, and loops
• Introduction to JS functions
• Getting started with JS on a webpage and handling a click event!

Notes about HW2/CP2

Milestone due Tuesday (remember, no late days!)

For full credit, the Main Menu View (Part A) must be stylistically complete. This includes some requirements listed in Overall Appearance and example screenshot.

The Game View should be hidden - make sure to implement the .hidden class to achieve this for Part A.

CP1 Showcase is up and CP2 out today! Checkout previous showcases (linked from CP2 spec) for some inspiration of how students explored JS in different ways.

Important: Moving forward (CP2 and later) we are enforcing a requirement that all files follow lower-cased naming conventions. Please refer to CP2 spec and Code Quality Guide for more information.

What We've Learned So Far

How to write content for a webpage using HTML5

How to add styles to a webpage using CSS and linking a CSS file to an HTML file

How to inspect the HTML and CSS of web pages in the browser

Git!

CSE 154 Modules

1. Webpage structure and appearance with HTML5 and CSS.
2. Client-side interactivity with JS DOM and events.
3. Using web services (API's) as a client with JS.
4. Writing JSON-based web services with PHP.
5. Storing and retreiving information in a database with MySQL and server-side programs.

Webpage Behavior with JavaScript

Now that we know how to add content and styles to a web page, lets explore how to add responsive behavior

These slides will introduce the basics of the JavaScript language:

• As a client-side scripting language
• Variables and Types
• Conditional statements and Loops
• Functions
• Simple click event handling

Soon, we'll use these building blocks to dynamically update what you see on a web page in response to clicks, text input, timers, etc.

Terminology: Client-Side Scripting

Client-side script: Code that runs on the user's computer and does not need a server to run (just a browser!).

Client-side JavaScript is usually run after HTML and CSS have been loaded on the browser (e.g. from a server response).

Often, this JavaScript manipulates the page or responds to user actions through "event handlers".

What is JavaScript?

Today: Following Along

As an interpreted programming language, JS is great to interact with a line at a time (similar to Python, but very different than Java). Where do you start?

The easiest way to dive in is with the Chrome browser's Console tab in the same inspector tool you've used to inspect your HTML/CSS.

Until we learn functions to interact with the HTML DOM with JS, we recommend experimenting with the following code examples using this console to get comfortable with the fundamental syntax and behavior of the language.

Our First JavaScript Statement: console.log

Used to output values to the browser console, most often used to debug JS programs.

console.log("message");

JS (template)

console.log("The answer is: " + 42);

JS (example)

The alert Function

alert("message");

JS (template)

            alert("IE6 detected. Suck-mode enabled.");

JS (example)

A JS function that pops up a dialog box with a message - not ideal in practice, but sometimes a recommended debugging tool when first learning JS. Don't include alert statements in any of your assignments.

Comments (similar to Java)

// single-line comment

/**
 * multi-line
 * comment
 */

JS

Identical to Java's comment syntax

Recall: 3 comment syntaxes

• HTML: <!-- comment -->
• CSS/Java/JS: /* comment */
• Java/JS: // comment

For functions and program files, we'll use JSDoc commenting with @param and @returns, which is covered in the Code Quality Guide here.

Variables

let name = expression;

JS (template)

let level = 23;
let accuracyRate = 0.99;
let name = "Pikachu";

JS (example)

Variables are declared with the let keyword (case-sensitive). You may also see var used instead of let - this is an older convention with weaker scope - DO NOT USE var anywhere

CQG: Use camelCasing for variable (and function) names

"Types" in JavaScript

let level = 23; // Number
let accuracyRate = 0.99; // Number
let name = "Pikachu"; // String
let temps = [55, 60, 57.5]; // Array

JS (example)

Types are not specified, but JS does have types ("loosely-typed")

• Number, Boolean, String, Array, Object, Function, Null, Undefined
• Can find out a variable's type by calling typeof, but usually this is poor practice (why?)
• Note: Type conversion isn't always what you expect...

A Note about Declaring Types in JavaScript

If you've programmed in a statically-typed language like Java, you will recall that when declaring variables, you must specify their type which must always stay the same.

boolean isValid = "hello!"; // error

Java

In a dynamically-typed language like JavaScript, you don't need to specify the type (just use let or const) and you may change the type the variable refers to later in execution.

let isValid = true; // no error
isValid = "hello!";
isValid = 1;

JS

This may seem to imply fewer errors in JS, but it's not uncommon to run into subtle (silent) bugs in your JS programs as a result!

"Constants" in JavaScript

Since ECMA6, JavaScript has a special keyword to declare "constant" values. You should use these over the let keyword for variables that are not intended to ever be updated (similar to constants in Java).

CGQ: Use UPPER_CASING naming conventions to denote const in JS.

let month = 12;
month = 1; // no error

const COOLEST_CLASS = "CSE154";
COOLEST_CLASS = "clazz"; // error

JS

These can help avoid some of the bugs mentioned on the previous slide (an error occurs when trying to reassign a const).

Number Type

let enrollment = 99;
let medianGrade = 2.8;
let credits = 5 + 4 + (2 * 3);

JS

Integers and real numbers are the same type (no int vs. double). All numbers in JS are floating point numbers.

Same operators: + - * / % ++ -- = += -= *= /= %=

Similar precedence to Java

Many operators auto-convert types: "2" * 3 is 6

Practice!

String type

let nickName = "Sparky O'Sparkz";                  // "Sparky O'Sparks"
let fName = nickName.substring(0, s.indexOf(" ")); // "Sparky"
let len = nickName.length;                         // 15
let name = 'Pikachu';                              // can use "" or ''

JS

Methods: charAt, charCodeAt, fromCharCode, indexOf, lastIndexOf, replace, split, substring, toLowerCase, toUpperCase

More about Strings

Escape sequences behave as in Java: \' \" \& \n \t \\

To convert between Numbers and Strings:

let count = 10;                              // 10
let stringedCount = "" + count;              // "10"
let puppyCount = count + " puppies, yay!";   // "10 puppies, yay!"
let magicNum = parseInt("42 is the answer"); // 42
let mystery = parseFloat("Am I a number?");  // NaN          

JS

To access characters of a String s, use s[index] or s.charAt(index):

let firstLetter  = puppyCount[0];                            // "1"
let fourthLetter = puppyCount.charAt(3);                     // "p"
let lastLetter   = puppyCount.charAt(puppyCount.length - 1); // "!"

JS

Common Bugs when Using Strings

While Strings in JS are fairly similar to those you'd use in Java, there are a few special cases that you should be aware of.

• Remember that length is a property (not a method, as it is in Java)
• Concatenation with +: 1 + 1 is 2, but "1" + 1 and 1 + "1" are both "11"!

Practice: repeat, containsTwice

Math object

            let rand1to10 = Math.floor(Math.random() * 10 + 1);
let three = Math.floor(Math.PI);

JS

Methods: abs, ceil, cos, floor, log, max, min, pow, random, round, sin, sqrt, tan

Properties: E, PI

Loops and Conditionals

function mystery(a, b) {
  if (a > b) {
    return 0;
  } else {
    let result = 0;
    for (let i = a; i <= b; i++) {
      result += i;
    }
    return result;
  }
}

Q: What does this code do? What does mystery(4, 6) return? How would you use the function to get a result of 10?

*Image created by Lauren using imgflip

if/else Statements (same as Java)

if (condition) {
  statements;
} else if (condition) {
  statements;
} else {
  statements;
}

JS

Identical structure to Java's if/else statements

JavaScript allows almost anything as a condition

Practice: rockPaperScissors

while loops (same as Java)

while (condition) {
  statements;
}

JS

do {
  statements;
} while (condition);

JS

break and continue keywords also behave as in Java but do not use them in this class!

Practice: loopMystery6

Logical Operators

Relational: > < >= <=, Logical: && || !, Equality: === !== == !=

• Most logical operators automatically convert types. These are all true:
  • 5 < "7"
  • 42 == 42.0
  • "5.0" == 5
• The === and !== are strict equality tests; checks both type and value: "5.0" === 5 is false. It's almost always best to use === instead of ==.
• What does 154 === 154.0 evaluate to?

Helpful JavaScript equality table!

Boolean Type

            let iLikeJS = true;
let ieIsGood = "IE6" > 0; // false
if ("web dev is great") { /* true */ }
if (0) { /* false */ }
if (1) { /* true */ }

JS

Any value can be used as a Boolean

• "falsey" values: false, 0, NaN, "", null, and undefined
• "truthy" values: anything else

Understanding what is "falsey" vs. "truthy" takes patience and practice.

When in doubt, check in the browser console!

Arrays

let name = [];                          // empty array
let names = [value, value, ..., value]; // pre-filled
names[index] = value;                   // store element

JS (template)

            let types = ["Electric", "Water", "Fire"];
let pokemon = [];        // []
pokemon[0] = "Pikachu";  // ["Pikachu"]
pokemon[1] = "Squirtle"; // ["Pikachu", "Sqiurtle"]
pokemon[3] = "Magikarp"; // ["Pikachu", "Sqiurtle", undefined, "Magikarp"]
pokemon[3] = "Gyarados"; // ["Pikachu", "Sqiurtle", undefined, "Gyarados"]

JS (example)

Two ways to initialize an array

length property (grows as needed when elements are added)

Array methods

let a = ["Mario", "Luigi"]; // [Mario, Luigi]
a.push("Koopatroopa");      // [Mario, Luigi, Koopatroopa]
a.unshift("Bowser");        // [Bowser, Mario, Luigi, Koopatroopa]
a.pop();                    // [Bowser, Mario, Luigi]
a.shift();                  // [Mario, Luigi]
a.sort();                   // [Luigi, Mario]

JS

Array serves as many data structures: list, queue, stack, ...

Methods: concat, join, pop, push, reverse, shift, slice, sort, splice, toString, unshift

• push and pop add/remove from back
• shift and unshift add/remove from front
• shift and pop return the element that is removed

Practice: findMin , switchPairs

Splitting strings: split and join

let s = "the quick brown fox";
let a = s.split(" "); // ["the", "quick", "brown", "fox"]
a.reverse();          // ["fox", "brown", "quick", "the"]
s = a.join("!");      // "fox!brown!quick!the"

JS

split breaks apart a String into an array using a delimiter

• Can also be used with regular expressions surrounded by /:
  let a = s.split(/[ \t]+/);

join merges an array into a single String, placing a delimiter between them

Defining Functions

function name(params) {
  statement;
  statement;
  ...
  statement;
}

JS (template)

            function myFunction() {
  console.log("Hello!");
  alert("Your browser says hi!");
}

JS (example)

The above could be the contents of basics.js linked to our HTML page

Statements placed into functions can be evaluated in response to user events

Practice: fixErrors2 , containsTwice , functionMystery1 , sumUpTo , veryBestSong

JS Function vs. Java Method

function repeat(str, n) {
  let result = str;
  for (let i = 1; i < n; i++) {
    result += str;
  }
  return result;
}
let repeatedStr = repeat("echo...", 3); // "echo...echo...echo..."

JS (example)

public static String repeat(String str, int n) {
  String result = str;
  for (int i = 1; i < n; i++) {
    result += str;
  }
  return result;
}
String repeatedStr = repeat("echo...", 3); // "echo...echo...echo..."

Java (example)

JS Function vs. Python Function

function repeat(str, n) {
  let result = str;
  for (let i = 1; i < n; i++) {
    result += str;
  }
  return result;
}
let repeatedStr = repeat("echo...", 3); // "echo...echo...echo..."

JS (example)

def repeat(str, n):
  result = str;
  for i in range(1, n):
    result = result + str;
  return result;

repeatedStr = repeat("echo...", 3) // "echo...echo...echo..."

Python (example)

From the Console to a .js File

Now, we'll use these building blocks of a new programming language to control the behavior of our pages (which we don't get with HTML/CSS!).

Remember Friday?

We introduced different form element tags offered in HTML

But they're not too helpful if we can't do anything with them!

In general, to add interactivity to our HTML/CSS websites we need to:

1. Link a JS program to our HTML (in the <head>)
2. Identify user/page events we want to respond to
3. Identify what each response function is
4. Get the HTML DOM elements we want to be interactive, and "assign" the element its own event(s) to listen to

Event-Driven Programming

Unlike Java programs, JS programs have no main; they respond to user actions called events

Event-Driven Programming: writing programs driven by user events

Linking to a JavaScript file: <script>

<script src="filename"></script>

HTML (template)

<script src="example.js"></script>

HTML (example)

Common Types of JavaScript Events

We'll cover more later (you can find a full list here), but today we'll demo click!

Accessing Elements from the Document in JavaScript

Finally... the fun starts.

Accessing an Element by ID

let name = document.getElementById("id");

JS

• document.getElementById returns the DOM object for an element with a given id (note that you omit the # when giving an id)
• We'll learn about other ways to get DOM elements (e.g. by class) tomorrow and Wednesday!

Back to HTML with Buttons: <button>

            <button id="my-btn">Click me!</button>

HTML

Button's text appears inside tag; can also contain images

To make a responsive button or other UI control:

1. Choose the control (e.g., button) and event (e.g., mouse click) of interest
2. Write a JavaScript function to run when the event occurs
3. Attach the function to the event on the control

Right now this button doesn't do anything when we click it. That's because it doesn't have event handler code attached :( Let's see an example where we do have an event listener attached to a button on our page!

click Event Handler: an Example

<img id="pokeball" src="images/pokeball.jpg" alt="a pokeball" />
<button id="demo-btn">Click me!</button>

HTML

let demoButton = document.getElementById("demo-btn");
demoButton.addEventListener("click", changeImage);

function changeImage() {
  let pokeballImg = document.getElementById("pokeball");
  pokeballImg.src = "images/mystery.gif";
}

JS

Click me!

output

Putting it All Together

// listener attached before page is loaded
window.addEventListener("load", init);

function init() {
  // this code is ran after page is loaded!
  let demoButton = document.getElementById("demo-btn");
  demoButton.addEventListener("click", changeImage);
}

function changeImage() {
  let pokeballImg = document.getElementById("pokeball");
  pokeballImg.src = "images/mystery.gif";
}

button-example.js (commented example)

You can see the HTML output here. On Wednesday, we'll add one more important component to our JS files: the module pattern.

Resources and Tips

Review programming basics: using variables, arrays, loops, if-statements, and functions

Go over some JavaScript tutorials - there are many great ones!

• Mozilla's JavaScript Basics Tutorial (highly recommended)
• Codecademy's JavaScript Basics course (free)

Practice! We now have JavaScript problems on Practice-It (80+ problems) and its sister site CodeStepByStep (200+ problems).

Check out cool examples of JavaScript on the web!

• Dennis Music Video
• Robby Leonardi Mario-style Resume
• Example CP Showcase Project!
• Rainbow Worm
• OMFGDOGS