General Overview

Many details on Javascript can be found at:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
Javascripts can be either directly or indirectly embedded in a document.

Directly:

<script type="text/javascript">
-- code --
</script>

Indirectly:

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

Lexicon

Identifiers (i.e., names) must begin with a letter, an underscore, or a $ and subsequent characters may be one of these three or numbers.
Javascript has reserved words: break, case, catch, class, const, continue, default, delete, do, else, finally, for, function, if, in, instanceof, let, new, return, switch, this, throw, try, typeof, var, void, while, with.
Javascript has additional keywords which are reserved for future use, as well as predefined words such as alert, open, java, and self.
Javascript supports /*...*/ and // for comments.
Semicolons to end lines in Javascript are optional. Beware:
```
return 
x; // has the effect of just return!
```

Example Javascript and HTML document

<html>
<head><title>test</title>
<meta name="description" value="this example illustrates how Javascripts are executed both when the document is loaded and on the occurrence of events" />
<script type="text/javascript" >
   function sayHello()
   {
      alert("hi there");
   } 
</script>
</head><body><form><input type="button" value="test" onclick="return sayHello();" 
/><!-- responds to events --></form>
<script type="text/javascript" >
for( i = 0; i<100; i++) { 
    document.writeln("<p>hi"+i+"</p>");
} // run when document loads
</script></body>
</html>

Primitives

Javascript has 5 primitive types: Number, String, Boolean, Undefined and Null.
Javascript has predefined objects corresponding to Number, String and Boolean. Each of these is wrappers for a value of the corresponding primitive type.
Javascript will do type coercion between objects of type String and Number.
A number literal can be either a integer or a float. You can use hex for integers. If it is a float it can use scientific notation:
7, 0xff, 0XFF, 7.2, .73, -.23, 7E2, 7e2, 7.2e-2, etc.
A string literal can be delimited either by a single or double quote.
"Hi there", 'hi there', '"', "\n", '\'\\', etc.
There are two Boolean literals: true or false.
The only Null literal is null which can be coerced to false as a Boolean and 0 as an Number.
The only literal of type Undefined is undefined. It can be coerced to false as a Boolean and NaN as a Number.

Variables and Constants

The Javascript interpreter determines the type of a variable as needed by the circumstance.
Variables can be declared either by assigning it a value or by explicitly declaring it.
In strict mode (which we will talk about later), variable must be declared before assignment.

Javascript supports two syntaxes for declaring variables each with slightly different scope:

//Declaring variables with function scope
var my_variable; // don't need to assign a var when declaring it
var pi=3.14; // but can
var a=1,b; //can declare more than one variable in one go

// declaring variables with block scope
let my_other_var; //let first appeared in Ecmascript 2015
let foo = 2;
let c=4,d;

{
   let e =10;
   var f = 7; 
   console.log(e + " " + f); //prints 10 7
}
console.log(e); // ReferenceError
console.log(f); // 7

Neither of these ways should be confused with being a property of an object, which we'll talk about in a minute.
Globally scoped var declarations (declarations not within a function) are properties of Javascript's window object; let declarations are not.
Ecmascript 2015 also introduced the const keyword for declaring constants:
```
const PI = 3.14;
```

Numeric Operators and Objects

Numeric operators in Javascript are similar to Java or C: +, -, *, /, %, ++, --, etc.
The Math object has many useful built-in methods and properties for Number objects.
For example, Math.sin(x), Math.PI, Math.random, Math.abs, etc.
The Number object has a useful collection of Number properties. Number.MIN_VALUE, Number.MAX_VALUE, Number.NaN, etc. It also has the toString method.
For example, x=10; y= x.toString(); z=x.toString(2); //binary representation

Strings and Type Conversion

The + sign is used to concatenate strings.

first = "hello"
second = first + "bye" // "hellobye"

The String object also has useful methods such as: charAt, indexOf, substring, toLowerCase, toUpperCase, etc. A String object also always has a length property
When the value of one type is used in a situation where another type is required, Javascript tries to implicitly coerce the type into the required one. For example,
```
"August" + 1977 // "August1977"
1977 + "August" // "1977August"
7*"3" =21
```

One can also explicitly, do type conversion.

var str_value = String(value); // Might want to use toString
var some_number = Number(some_string); // Might want to use parseInt or parseFloat

Quiz

Which of the following statements is true?

WebDAV is a kind of version control software.
Git repositories must be centrally hosted on GitHub.
To get changes from one git repository into another we might use the command git pull.

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.
You can write to the debugging console using console.log("some string").
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
//to delete a property of an object we can do
delete 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]);
}

or (as of Ecmascript 2015)

var value;
for (value of my_object) {
  alert("value:" + value);
}

There is also a literal notation that can be used to write/create Object's:
```
my_object = {
    make: "V6",
    subObject: {}
}
```
Object has a method hasOwnProperty("name_of_property") to detect if the current object has a property set or not.
```
my_object.hasOwnProperty("make"); //returns true given object above
```

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

You can iterate over arrays using the syntax:

(//we'll talk more about functions in a moment)
function my_callback(item, index) {
  alert(index + ":" + item);
}
var a = [1, 2, 3];
a.forEach(my_callback);

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 as a value to variables.
```
var c = swap;
```
So could call:
```
c(10, 5, b);
```
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*/
}
```

Javascript Basics

Outline