Web Programming Step by Step

Lecture 12
Introduction to JavaScript

Reading: 7.1 - 7.4

Except where otherwise noted, the contents of this presentation are Copyright 2010 Marty Stepp and Jessica Miller.

Client-side scripting (7.1.1)

• 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

Why use client-side programming?

PHP already allows us to create dynamic web pages. Why also use client-side scripting?

• client-side scripting (JavaScript) benefits:
  • usability: can modify a page without having to post back to the server (faster UI)
  • efficiency: can make small, quick changes to page without waiting for server
  • event-driven: can respond to user actions like clicks and key presses
• server-side programming (PHP) benefits:
  • security: has access to server's private data; client can't see source code
  • compatibility: not subject to browser compatibility issues
  • power: can write files, open connections to servers, connect to databases, ...

What is JavaScript? (7.1)

• a lightweight programming language ("scripting language")
• used to make web pages interactive
  • insert dynamic text into HTML (ex: user name)
  • react to events (ex: page load user click)
  • get information about a user's computer (ex: browser type)
  • perform calculations on user's computer (ex: form validation)
• a web standard (but not supported identically by all browsers)
• NOT related to Java other than by name and some syntactic similarities

JavaScript vs. Java

+ = JavaScript

• interpreted, not compiled
• more relaxed syntax and rules
  • fewer and "looser" data types
  • variables don't need to be declared
  • errors often silent (few exceptions)
• key construct is the function rather than the class
  • "first-class" functions are used in many situations
• contained within a web page and integrates with its HTML/CSS content

JavaScript vs. PHP

JS <3

• similarities:
  • both are interpreted, not compiled
  • both are relaxed about syntax, rules, and types
  • both are case-sensitive
  • both have built-in regular expressions for powerful text processing
• differences:
  • JS is more object-oriented: noun.verb(), less procedural: verb(noun)
  • JS focuses on UIs and interacting with a document; PHP on HTML output and files/forms
  • JS code runs on the client's browser; PHP code runs on the web server

Linking to a JavaScript file: script

<script src="filename" type="text/javascript"></script>

<script src="example.js" type="text/javascript"></script>

• script tag should be placed in HTML page's head
• 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)
  • but this is bad style (should separate content, presentation, and behavior)

A JavaScript statement: alert

alert("message");

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

• a JS command that pops up a dialog box with a message

Variables and types (7.2.1, 7.2.3)

var name = expression;

var age = 32;
var weight = 127.4;
var clientName = "Connie Client";

• variables are declared with the var keyword (case sensitive)
• 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

String type (7.2.7)

var s = "Connie Client";
var fName = s.substring(0, s.indexOf(" "));   // "Connie"
var len = s.length;                           // 13
var s2 = 'Melvin Merchant';                   // can use "" or ' '

• methods: charAt, charCodeAt, fromCharCode, indexOf, lastIndexOf, replace, split, substring, toLowerCase, toUpperCase
  • charAt returns a one-letter String (there is no char type)
• length property (not a method as in Java)
• concatenation with + : 1 + 1 is 2, but "1" + 1 is "11"

Event-driven programming

• JS programs have no main; they respond to user actions called events
• event-driven programming: writing programs driven by user events

Buttons: <button>

the canonical clickable UI control (inline)

<button>Click me!</button>

• 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

JavaScript functions

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

function myFunction() {
	alert("Hello!");
	alert("How are you?");
}

• the above could be the contents of example.js linked to our HTML page
• statements placed into functions can be evaluated in response to user events

Event handlers

<element attributes onclick="function();">...

<button onclick="myFunction();">Click me!</button>

• JavaScript functions can be set as event handlers
  • when you interact with the element, the function will execute
• onclick is just one of many event HTML attributes we'll use

• but popping up an alert window is disruptive and annoying
  • A better user experience would be to have the message appear on the page...

Document Object Model (DOM) (7.1.4)

a set of JavaScript objects that represent each element on the page

• most JS code manipulates elements on an HTML page
• we can examine elements' state
  • e.g. see whether a box is checked
• we can change state
  • e.g. insert some new text into a div
• we can change styles
  • e.g. make a paragraph red

DOM element objects (7.2.5)

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

Accessing elements: document.getElementById

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

<button onclick="changeText();">Click me!</button>
<input id="output" type="text" value="replace me" />

function changeText() {
	var textbox = document.getElementById("output");
	textbox.value = "Hello, world!";
}

• document.getElementById returns the DOM object for an element with a given id
• can change the text in most form controls by setting the value property

More advanced example

<button onclick="swapText();">Click me!</button>
<span id="output2">Hello</span>
<input id="textbox2" type="text" value="Goodbye" />

function swapText() {
	var span = document.getElementById("output2");
	var textBox = document.getElementById("textbox2");
	var temp = span.innerHTML;
	span.innerHTML = textBox.value;
	textBox.value = temp;
}

• can change the text inside most elements by setting the innerHTML property