JavaScript

• Introduction
• Variables
• Conditional Statements
• Functions
• Objects and Methods

History of JavaScript

• Orginally developed for Netscape 2.0
• Has little to do with Java despite similarity in names
• Microsoft created own JavaScript implementation
  • JScript mostly compatible with JavaScript 1.1
  • Recently added features (e.g. dynamic access to document object model) are very different
• Effort to standardize these languages
  • ECMAScript (itself not specific to the Web)
  • DOM (Document Object Model)

JavaScript vs. Java

• JavaScript merely resembles Java
• Does not have Java�s typing system
• Fewer core data types
• Prototype-based object model

Client-Side and Server-Side JavaScript

• Core JavaScript contains a set of objects
  • Array, Math, String
• Client-side JavaScript
  • Objects to control a browser (e.g. input fields)
• Server-side JavaScript
  • Objects relevant to accessing the server (e.g. files)

Including JavaScript in a Web Page

• Use <script> tag to enclose regions of JavaScript code

  <script language="JavaScript">
  ...
  </script>

• LANGUAGE attribute indicates language to use
  • JavaScript, VBScript, TCL
• "Hello world" in JavaScript

  <script language="JavaScript">
  	alert("Hello world!");
  </script>

• SRC attribute lets you include scripts defined in a file

  <script language="JavaScript" src="jscode.js">

Including JavaScript in a Web Page

• Alternative ways of invoking JavaScript
  • From within an URL
  • From within a tag attribute
• Include JavaScript code inside an URL

  <a href="javascript:alert('Error');">

• Include JavaScript code as the value of a tag attribute

  <hr width="&{barWidth};%" >

Variables

• Declared implicitly through an assignment

  x = 42;

• Declared explicitly through var

  var x;

• As in Perl explicit declaration is better

Dynamic Typing

• Variable declaration does not include type

  var answer = 42;      	// an integer ...
  answer = "hello";     	// ... is now a string

• Data types converted automatically

  answer = "hello" + 42; 	// hello42
  "37" - 7                // 30
  "37" + 7                // 37

• Should convert strings to numbers first

  parseInt("37") + 7    	// 44 (1st way)
  ("37" - 0) + 7       	// 44 (2nd way)

Conditional Statements

• Syntax for most consitionals same as Java
  • if, while, for, and do...while
• Switch statement allows strings as cases

  switch (action) { 
  	case "recalculate":
  		recalculate();
  		break;
  	...
  	default: 
  		statement;
  }

Functions

• Syntax
  • Function name
  • Parameter list
  • Function body
• Note that return types are not defined

  function square(number) {
  	return number * number;
  }

Variable Number of Arguments

• Function arguments can be accessed by name or through an array

  arguments[i]	// index starts at 0

• Use it to call function with more arguments than formally declared

  function concat(separator) {
  	result = "";
  	for(var i = 1; i<arguments.length; i++) {
  		result += arguments[i] + separator;
  	}
  	return result;
  }

Objects

• JavaScript has a prototype-based object model
  • Encapsulation
  • But no support for classes or inheritance
• Predefined objects
  • Array, Date, String, Math
• Generic object prototype Object
• User-defined prototypes

Predefined Objects - Array

• Arrays represent lists of values

  var weekdays = new Array("Sun", "Mon", "Tue",
  	"Wed", "Thu", "Fri");
  var mon = weekdays[1];

• Get the length of an Array

  weekdays.length

Predefined Objects - Date

• Date provides access to the current date
  • getDay()
  • getMonth()
  • getYear()

  var today = new Date();
  var dayOfWeek = weekdays[today.getDay()];

Predefined Objects - Math

• Mathematical methods and properties defined in Math
  • Math.PI
  • Math.max()
  • Math.round()

  var max = Math.max(x, y);

Predefined Objects - String

• Wrapper around primitive string type
• Use when you need to access characters in a string
  • toLowerCase(), toUpperCase()
  • charAt(), indexOf(), substring(),
  • concat(), split(), match()

  var phone = "613-234-6789";
  
  var i = phone.indexOf("-");
  var area = phone.substring(0, i);
  var rest = phone.substring(i, phone.length);
  
  var phoneParts = phone.split(/-/);

Generic Objects

• The following creates a generic object car and defines three properties

  var car = new Object();
  car.make = "Pontiac";
  car.model = "GrandAm";
  car.year = 2000;

Prototypes and Objects

• Prototypes are functions that create objects and, optionally, initialize them
• Create instances of the object with new

  function Car(make, model, year) {
  	this.make = make;
  	this.model = model;
  	this.year = year;
  }
  var car = new Car("Pontiac", "GrandAm", 2000);

Object Properties

• Dot operator familiar from Java

  car.make

• To create a property assign a value to it

  car.model = "Taurus";
  car.color = "red";

Properties as Arrays

• An object can be treated as an associative array

  car["make"]		// Pontiac
  car["model"]	// GrandAm
  car["color"] 	// red
  car["year"] 	// 2000

• The loop construct for...in iterates over all the properties of an object

  for(var prop in car) {
    	document.write("car." + prop  + "= " + 	
  	car[prop] +"<br>");
  }

Object Initializers

• Syntax for object initializers

  objectName = {property1: value1,	
  	propertyN: valueN};

• Applied to our car example

  var car = {make: "Pontiac", model: "GrandAm", 
  	color: "red", year: 2000};

Methods

• Define methods in the same way you would define a standard function
• Associate the function with an object

  object.methodName = functionName;

Methods - Example

• LineItem object in an order, or a shopping cart

  function total() {
  	return (this.qty * this.unitPrice);
  }
  
  function LineItem(name, qty, price) {
  	this.name = name;
  	this.qty = qty;
  	this.unitPrice = price;
  	this.total = total;		// method
  }

• This code can later be used like this

  var lineItem = 
  	new LineItem("Perl and CGI", 2, 28.95);
  document.write("You pay $" + 
  	lineItem.total());

Objects as Parameters

• Can pass objects as function parameters
• If the function changes the object�s properties, these changes are visible outside the scope of the function

  function makeItAJaguar(theObject) {
  	theObject.make = "Jaguar";
  }
  makeItAJaguar(car);

References

• Netscape's JavaScript Documentation
  • http://developer.netscape.com/tech/javascript/index.html
• Netscape's JavaScript FAQ
  • http://developer.netscape.com/support/faqs/champions/javascript.html