CSSE 290 Web Programming

Lecture 14: JavaScript Language Features

Reading: 8.1 - 8.4

Attribution:Except where otherwise noted, the contents of this document are Copyright 2012 Marty Stepp, Jessica Miller, and Victoria Kirst. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

Otherwise noted: Claude Anderson was given permission to modify the slides for CSSE 290 at Rose-Hulman by author Jessica Miller. The authors' original slides, based on Web Programming Step by Step, can be seen at http://webstepbook.com.
Some of the examples in some days' slides are from David Fisher at Rose-Hulman, who was kind enough to allow me to use them. My intention is to mark these examples with [DSF].

Announcements

• There will be a required project team preferences survey on Moodle.
  I'll send email when it is ready (probably Friday afternoon).
  Due Tuesday at noon.
• HW 4 is due on Tuesday at 11:55 PM.
• There are far more Javascript details in the textbook than we can/should cover in class.
  I'll hit some highlights and some tricky things. You should read the rest.
• TODAY: A few important JavaScript details, then begin an extended live-coding example.
• What questions do you have?

JavaScript "strict" Mode

"use strict";

your code...

• Writing "use strict"; at the very top of your JS file turns on strict syntax checking:
  • Shows an error if you try to assign to an undeclared variable
  • Stops you from overwriting key JS system libraries
  • Forbids some unsafe or error-prone language features
• It is a good idea to turn on strict mode.

Special Values: null and undefined

var ned = null;
var benson = 9;
var caroline;

// at this point in the code,
//   ned is null
//   benson is 9
//   caroline is undefined

• undefined: has not been given a value, does not exist
• null: exists, but was specifically assigned an empty or null value
• null == undefined, but null !== undefined.

Recap: Splitting Strings: split and join

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

• split breaks apart a string into an array using a delimiter
  • Can also be used with regular expressions surrounded by /:

    						
    var a = s.split(/[ \t]+/);
    

• join merges an array of strings into a single string, placing a delimiter between them

More about JavaScript functions

For this excursion, many of the ideas and much of the code come from Chapter 3 of Secrets of the JavaScript Ninja by John Resig and Bear Bibeault, ©2013 by Manning Publications.

Download and unZIP the code, linked from today's session on the schedule page.

JavaScript functions are "first-class" data, unlike Java methods.

• can be created via literals in code
• can be assigned to variables and stored in data structures (e.g, an array of functions)
• can be passed as arguments to functions
• can be created and returned as the value of a function call

An Advantage of First-class Functions

Simplicity of expression. Example: sort an array into reverse order.
First, in Java:

Integer[] values = {213, 16, 297, 34, 10, 512, 57};
java.util.Arrays.sort(values, new Comparator(){
  public int compare(Integer value1, Integer value2) {
	return value2 - value1;
  }
});

Now, in JavaScript:

var values = [213, 16, 297, 34, 10, 512, 57];
values.sort(function(value1, value2) { return value2 - value1; });

We'll see more about how this works in JavaScript later. Which appears to be more straightworward?

Java 8 now has (sort of) first-class functions.

Parts of a JavaScript function literal

• the function keyword
• an optional name. If specified, must be a valid JavaScript identifier
• a parenthesized, comma-separated, possibly empty list of parameter names
  • each must be a valid JavaScript identifier
• the body, a list of zero or more JavaScript statements, enclosed in curly braces

An anonymous function is not given a name; its name is the empty string.

Let's examine and run the listing-3.1.html file from Ninja Chapter 3

JavaScript Scope Rules

• the function (not the { ... } block as in C and Java) is the smallest "scoping" unit" in JavaScript.
• variable declarations are in scope from where they are declared to end of function declaration
• named functions are in scope within the entire function within which they are declared
• for applying the above rules to global declarations, pretend that all global code (outside of all function declarations) is inside one "big" function

An anonymous function is not given a name; its name is the empty string.

Example (from Ninja book)

	function outer(){
       var a = 1;
        function inner(){ /* does nothing */ }
        var b = 2;
        if (a == 1) {
          var c = 3;
		}
     }

    outer();

Let's examine and run listing-3.2.html from Ninja Chapter 3

Array of functions example

Because we can!

Uses assert fomr the Ninja book

	var functionArray = [];
	for (var i=0; i<10; i++) {
		functionArray[i] = function(k) {return k*i; };
	}
	resultsArray = [];
	for (i=0; i<10; i++) {
		resultsArray[i] = functionArray[i](3);
	}
	assert(true, resultsArray.join(" "));
	

Recap: DOM Element Objects

• Every element on the page has a corresponding DOM object
• Access/modify the attributes of the DOM object with objectName.attributeName

DOM Object Properties

<div id="main" class="foo bar">
	<p>Hello, <em>very</em> happy to see you!</p>
	<img id="icon" src="images/borat.jpg" alt="Borat" />
</div>

var mainDiv = document.getElementById("main");
var icon    = document.getElementById("icon");

Modifying Text Inside An element

var paragraph = document.getElementById("welcome");
paragraph.innerHTML = "Welcome to our site!";  // change text on page

DOM element objects have the following properties:

• innerHTML : text and/or HTML tags inside a node
• textContent : text (no HTML tags) inside a node
  • Smpler than innerHTML, but not supported in older IE versions
• value : the value inside a form control

Abuse of innerHTML

// bad style!
var paragraph = document.getElementById("welcome");
paragraph.innerHTML = "<p>text and <a href="page.html">link</a>";

• innerHTML can inject arbitrary HTML content into the page
• However, this is prone to bugs and errors and is considered poor style
• It's a bad idea to use innerHTML to inject HTML tags; inject plain text only
  • (Later, we'll see a better way to inject content that includes HTML tags)

Adjusting styles with the DOM

<button id="clickme">Color Me</button>

window.onload = function() {
	document.getElementById("clickme").onclick = changeColor;
};
function changeColor() {
	var clickMe = document.getElementById("clickme");
	clickMe.style.color = "red";
}

• contains same properties as in CSS, but with camelCasedNames
  • examples: backgroundColor, borderLeftWidth, fontFamily

Common DOM styling errors

• many students forget to write .style when setting styles

  var clickMe = document.getElementById("clickme");
  clickMe.color = "red";
  clickMe.style.color = "red";
  

• style properties are capitalized likeThis, not like-this

  clickMe.style.font-size = "14pt";
  clickMe.style.fontSize = "14pt";
  

• style properties must be set as strings, often with units at the end

  clickMe.style.width = 200;
  clickMe.style.width = "200px";
  clickMe.style.padding = "0.5em";
  

  • write exactly the value you would have written in the CSS, but in quotes

DOM properties for form controls

<input id="sid" type="text" size="7" maxlength="7" />
<input id="frosh" type="checkbox" checked="checked" /> Freshman?

var sid   = document.getElementById("sid");
var frosh = document.getElementById("frosh");

More about form controls

<select id="captain">
	<option value="kirk">James T. Kirk</option>
	<option value="picard">Jean-Luc Picard</option>
	<option value="cisco">Benjamin Cisco</option>
</select>
<label> <input id="trekkie" type="checkbox" /> I'm a Trekkie </label>

• when talking to a text box or select, you usually want its value
• when talking to a checkbox or radio button, you probably want to know if it's checked (true/false)