Javascript (I/O, Control, Arrays, Objects, Regex, Functions)

CS174

Chris Pollett

April 6, 2016

Outline

Assignment, I/O, Control
Let's Build Something
Functions
Constructors/Methods
Pattern Matching
Execution Environment
Document Object Model

typeof, Assignments, and the Date Object

The operators
```
typeof x //and
typeof(x)
```
returns either "boolean", "string", "number" if x is of primitive type, it returns "object" if x is null or an object; and it returns "undefined" if x is not defined.
Assignments in Javascript are similar to C or Java:
```
a++; a+=2; a--; a-=2; a = b +57;
```
The Date object is useful for getting information about the current date and time:
```
var today = new Date();
```
Date supports methods: toLocaleString, getDate, getMonth, getDay,getFullYear, getTime, getHours, getMinutes, getSeconds, getMilliseconds

I/O

The default output target of a Javascript I/O is the browser window.
Javascript models an XHTML document as a Document object.
The window in which this document is displayed is a Window object.
Window has two properties document and window. Here document refers to the current Document object.
Document has several useful methods for I/O. write, writeln.
In addition to this method of I/O one can also create dialogs with the alert, prompt, and confirm methods. For example,
```
name = prompt("What is your name", "John Smith")
```

Control Statements

Javascript supports the relational operators: ==, !=, <, >, <=, >=, ===, !==
The last two operators disallow conversion of either operand. So "3" === 3 evaluate to false.
Javascript also supports the operators &&, ||, !
Selection statements in Javascript are like in C/Java: if( a >b){} else{}
Javascript supports switch/case as in C/Java
Javascript supports while, for and do-while loops

Objects

Objects can be created with an initial declaration like:
```
var my_object = new Object();
```
This object would initially have no properties. To delete an object use: delete my_object;

An assignment like:

my_object.make= "V6" /* would then give a property make a value. */
//can access as
p = my_object["make"]
q = my_object.make

You can also nest objects this:
```
my_object.subObject = new Object();
```

You can loop over properties using:

for (prop in my_object) {
   alert("prop:" + prop + "\nvalue:" + my_object[prop]);
}

There is also a literal notation that can be used to write/create Object's:
```
my_object = {
    make: "V6",
    subObject: {}
}
```

Arrays

Arrays can be created with the syntax:

var myArr = new Array(1, 2, "hello")
var myArr = new Array(100);
var myArr = [1,2,3];
//to access
myArr[0]
//to determine length
myArr.length

More Arrays

The Array object in Javascript has several useful methods for manipulating arrays.

join --- can be used to make a string out of an array.

var names = new Array("Mary", "Murray", "Max");
var nstring = names.join(":");

concat --- can be used to add elements to an existing array.
```
var a = [1, 2, 3];
a.concat(4, 5);
```
slice(i,j) --- return a sublist from the i to the j element.
push, pop, shift, unshift --- stack-like operations

Let's Build Something

Make an HTML page with a form on it with text fields labeled First Name, Last Name, and Age, and with a button Save. Clicking the button Save should store into a Javascript object person with fields fname, lname, and age. Beneath the form on the HTML page have a link which when clicked causes an alert to be displayed with the contents of the person object neatly drawn.

Post your answers to the April 6 Let's Build something Thread.

Functions

A Javascript function definition consists of two parts:
1. a function header consisting of
  - the keyword function
  - an identifier
  - a parenthesized list of parameters
2. a compound statement

Function Example

function swap(i, j, a)
{
	var tmp=a[i]; /* explicitly defined variables 
                         have scope within the function
                         if I had declared the variable 
                         implicitly it would have global scope */
	a[i] = a[j]; a[j] = tmp;
}

This function could be called with a syntax like:
```
swap(10, 5, b);
```
A return statement can be used to return a value from a function.
Functions are objects so can be assigned to variables.
```
var b = swap;
```
The definition of a function does not need to list its arguments. One can obtain a list of arguments using the argument subobject of a Function.
```
function swap()
{ var i = this.arguments[0], j=this.arguments[1], a=this.arguments[2];
  //same code as before
}
```
Functions can be declared anonymously in Javascript, so we can also write code like:
```
swap = function(i, j, a) {
   /* same code as before*/
}
```

Constructors

Javascript constructors are special methods that create and initialize the properties for newly created objects. For example,

function car(new_make, new_model, new_year)
{
   this.make = new_make;
   this.model = new_model;
   this.year = new_year;
}

I could then create an object with

my_car = new car("Ford", "Contour SVT", "2000");

Methods

To create methods, I can do things like the following way to create a display method to pretty print cars:

function display_car()
{
    document.write("Make:", this.make, "<br />");
    document.write("Model:", this.model, "<br />");
    document.write("Year:", this.year, "<br />");
}
function car(new_make, new_model, new_year)
{ 
    //same as before
    this.display = display_car;
}

The drawback of this is that each time we create a new car we have a separate pointer to display_car. Instead, we can use the prototype property of the car function. This will only create one pointer.
```
function car(new_make, new_model, new_year)
{ 
    //same as before
}
car.prototype.display = display_car;
```

More on the Prototype Property

When Javascript looks up a property of an object, it:
- looks up property in the instance,
- if it is not found then it looks in the prototype object of the given function object,
- if it is not found there it looks at the prototype property of the class Object.