CSE 154

Lecture 7: Intro to JavaScript

Agenda

Administrivia

Introduction to JavaScript

• History and motivation
• Getting started with JS (linking to a .js script file and interacting with it in the browser)
• Introduction to data types, conditionals, and loops
• Introduction to JS functions
• Summary: Java vs. JS vs. Python
• Our first interactions with HTML: Event handlers (if time)

Course Logistics: Creative Project Showcase!

CP2 is due tonight - great work so far!

We've seen some pretty fantastic CP's already, and have decided to start a "Creative Project showcase" each week.

Starting today, we'll have a weekly survey for students to "opt-in" to a creative project showcase. You can find the "opt-in" links on the weekly Creative Page spec, but here's a link for CP2 (make sure you're logged in your UW account to access it).

Course Logistics: HW2

1. There was an incorrect link to the clouds.png background image for HW 2 - this is fixed in the spec, so make sure to update it in your solution if needed.
2. Clarification added to spec regarding Overall HTML Page and Body (last bullet point added):

What We've Learned So Far

How to write content for a webpage using HTML

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

Today: JavaScript

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

This lecture we'll cover the basics of the JavaScript language:

• JavaScript vs. Java comparisons
• Syntax and types
• Loops and functions
• Events (basics) and form elements

Later this week we'll use these building blocks to learn how 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 runs in browser after page is sent back from server. Often, this code manipulates the page or responds to user actions.

You don't need to have a server running to run client-side code - you can get started programming in JavaScript (our client-side scripting language) right away in your browser of choice!

What is JavaScript?

A lightweight programming language ("scripting language")

Created in 1995 by Brendan Elch (original prototype created in 10 days and called LiveScript)

Used to make web pages interactive:

• Insert dynamic text into HTML (ex: username)
• React to events (ex: page load, user's mouse click)
• Get information about a user's computer (ex: what browser they are using)
• Perform calculations on user's computer (ex: form validation)
• Populate draggable ponies on a course webpage...

A web standard (but not supported identically by all browsers )

NOT related to Java other than name and some syntactic similarities...

Can be used in the browser, Adobe Acrobat, Adobe Photoshop, embedded computers, the Unix terminal, etc. (we will be using it in the browser)

JavaScript vs. Java

Interpreted, not compiled (huh?)

More relaxed syntax and rules

• Fewer and "looser" data types
• Variables don't need to be declared
• Errors often silent (few exceptions)
• More similar to Python in these ways

JavaScript's key construct is the function rather than the object/class.

• "first-class" functions are used in many situations

Contained within a web page and integrates with its HTML/CSS content

Linking to a JavaScript file: <script>

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

HTML (template)

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

HTML (example)

The script tag should be placed in the HTML page's head

Note: Before HTML5, it was required to use a type="text/javascript" in the script tag. In HTML5, this is recommended against, since it's a redundant MIME type. You should only use src as the attribute to link to your JS file in a script tag.

Script code is stored in a separate .js file

JS code can be placed directly in the HTML file's body or head (like CSS)

• This is poor code quality though: You should always separate content, presentation, and behavior

Our First JavaScript Statement: alert

            
              alert("message");
          

JS (template)

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

JS (example)

A JS command that pops up a dialog box with a message - not ideal in practice, but a good debugging tool when first learning JS

Output in JS: console.log

Used to output values to the browser console (can view in your browser's dev tools under "Console").

Often preferred over alert to debug JS programs.

          console.log("message");
          

JS (template)

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

JS (example)

Comments (same as 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, as previewed in HW1.

Practice: commentSyntax, commentary

Variables and types

            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, and you should use let in this class.

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
• 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).

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

for loop (same as Java)

            for (initialization; condition; update) {
              statements;
            }
          

JS (template)

            
              let sum = 0;
              for (let i = 0; i < 100; i++) {
                sum = sum + i; // same as sum += i;
              }
          

JS (example)

            
              let s1 = "It's a-me, Mario!";
              let s2 = "";
              for (let i = 0; i < s.length; i++) {
                s2 += s1[i] + s1[i];
              }
              // s2 stores "IItt''ss  aa--mmee,,  MMaarriioo!!"
          

JS (example)

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 usually a good idea 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!

Special Values: null and undefined

            
              let foo = null;
              let bar = 9;
              let baz;

              /* At this point in the code,
               * foo is null
               * bar is 9
               * baz is undefined
               */
          

JS

undefined: declared but has not yet been assigned a value

null: exists, but was specifically assigned an empty value or null. Expresses intentional a lack of identification.

A good motivating overview of null vs. undefined

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

A Few Last Notes on Typing

As you write JS programs, you may will run into some silent bugs resulting from odd typing behavior in JS. Automatic type conversion, or coersion, is a common, often perplexing, source of JS bugs (even for experienced JS programmers).

Why does it happen? JS was designed to "work" as intuitively as possible without requiring the strict types.

Why is this important to be aware of? You'll be writing programs which use variables and conditional logic. Knowing what is considered truthy/false and how types are evaluated (at a high level) can make you a much happier JS developer (some practice)

Examples of some "less-intuitive" evaluations:

• 2 < 1 < 2;// true
• 0 + "1" + 2;// "012"
• [] + [];// ""
• "1" / null;// Infinity
• 0.1 + 0.2 == 0.3;// false

This is worth 3 minutes of your viewing pleasure.

Check Your Understanding

Take a look at your answers to the warmup, and spend a minute or two more on it. Based on what we've covered in the last few slides, do you have a different answer that you may have had earlier?

Solution: "0123"

Summary of Java vs. JS vs. Python

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
• Codecademy's JavaScript Baics 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
• Species in Pieces
• Rainbow Worm
• OMFGDOGS