References Used

JavaScript Demystified: A Self-Teaching Guide by Jim Keogh. McGraw Hill, 2005.

History

Developed by Netscape
Originally called LiveScript
Developed in approximately 2 weeks
Meant as a scripting language that would enhance the capabilities of the Netscape browser
Renamed JavaScript after the introduction of Java, with the hope that Java's popularity would induce developers to adopt JavaScript for client-side scripting.

Uses and Limitations

JavaScript is not a full-featured programming language and its syntax differs from Java in some significant ways. Its most significant difference may be in its object model, which is more akin to a prototype-instance model than to a class-instance model. In a prototype-instance model the prototype is itself an object that may be changed at run-time (e.g., instance variables, also called properties, may be dynamically added or delete) and all instances will inherit the changes. In a class-instance model, the class is not a run-time object, but instead an immutable template from which instances are created.
Uses of JavaScript
1. Handle graphical interface of a browser application
2. Modify the html document object model (dom)
3. Perform form validation
4. Perform simple calculations for a form
5. Perform custom actions in response to key strokes or mouse events
The original limitations of JavaScript included:
1. Cannot read or write to the hard-drive, except to read cookies--a JavaScript application gets downloaded from a server and is not a trusted application as far as the client is concerned so the application should not be able to modify the client's hard drive.
2. Could not be used to create server-side applications
3. Lack of formatted output to the console: Javascript did not have a function comparable to C's printf function. The reason is that Javascript was designed to work with graphical interfaces and hence its output was expected to be in the form of html markup or dialog boxes.
4. Lack of console input: Javascript was designed to work with the graphical interface of a browser and with the html dom, not the console. As a result Javascript gets its input from form elements or dialog boxes, but not from a console window or a file.
Because of Javascript's popularity, many of these limitations have been eased. There is now a server side version of Javascript and there are clunky ways to read from the console and write formatted output to the console. It even provides ways to read and write files. However, a browser typically disables its ability to read and write files, which allows it to retain its status as a way to write trusted applications for the client side. If I ask you on an exam what is the critical feature missing from Javascript that prevents it from being used for general purpose computing but makes it suitable for client-side scripting, you should answer its inability to read/write files.

A Brief Example

Javascript was developed to enable interaction with the browser so let's start with a quick example of how it enables such interaction. The example snippet below changes the text "Hello World" to "Hello Brad!" when the button is pressed and changes the color of the text from black to green:

<head>
  <script>
    function handleClick() {
      console.log("handleClick");
      let announcement = document.getElementById("announcement");
      announcement.textContent = "Hello Brad!";
      announcement.style.color = "green";
    }
  </script>
</head>

<p id="announcement">Hello World</p>
<button type="input" onclick="handleClick()">Press Me!</button>

The javascript code is embedded in a <script> tag in the head section. When the button is clicked, the "onclick" event calls the handleClick function. This function does three things:

it prints a message to the browser console.
it retrieves the html element displaying the text "Hello World" and changes it to "Hello Brad!".
it changes the color of the text to green.

HTML elements are stored in a data structure called the Document Object Model (DOM) and can be retrieved and acted on by various Javascript functions. Additionally each html element has a style object containing CSS key/value pairs that can be modified by various Javascript functions. Over the next couple of weeks we will be discussing how Javascript can interact with the DOM to affect the display of a web page. However, we must first start with the basics of the Javascript language, which is what is done in this set of notes.

JavaScript Terminology

JavaScript typically deals with objects, especially the html dom and form objects. The html dom is created by the browser for each web page. It is represented as a tree and each node, including the root node, is an object. The form elements that you create on an html page are treated as objects by JavaScript, and are part of the html dom tree.
Instance variables in JavaScript objects are called properties
As in Java or C++, JavaScript objects have methods that perform actions on JavaScript objects
Properties and methods are accessed using the . (dot) operator. For example, document.bgColor would access a document's background color and document.write() would write some text.

Embedding JavaScript in an HTML Page

Use the script form element to surround JavaScript code. For example: A more interesting thing to do would be to pop-up an alert box:
Functions that you may want to execute in the body of the html page should be declared and placed in the head section of the html document
JavaScript code that should produce dynamic output for the web page should be embedded in the body section of the html document.
JavaScript code can be imported from a source file using the src attribute:
The functions defined in the head section can be either called directly from the body or in response to events that occur on forms (such as a click event). Events will be discussed further at a later time.

Debugging JavaScript

If your script has an error, your browser may either print an error message or give you a blank screen.
The best way to debug your javascript code is to print messages to the brower console using the function console.log. Different browsers have different ways of displaying their console. On Firefox you can go to "Tools->WebDeveloper->Web Developer Tools" and choose the "Console" tab. ON Chrome you can go to "View->Developer->Developer Tools" and select the "Console" tab.

Variables, Operators, and Expressions

Variables
1. Variable names have the same rules for construction as C or C++ variables and are not prefixed by a special character.
2. Variables are dynamically typed and declaring them is optional although highly recommended. You can declare a variable using either the let or var keywords. Older versions of javascript use
  but let is preferred these days. For example:
```
let total
let purchase_price = 100
let sales_tax = purchase_price * .06
total = purchase_price + sales_tax
	  
```
  However, it is equally valid to not declare any of the variables, in which case you would write:
```
purchase_price = 100
sales_tax = purchase_price *.06
total = purchase_price + sales_tax
	  
```
  Notice that statements do not have to end with a semi-colon. The newline is interpreted as terminating the statement. If you want to put multiple statements on the same line, then they should be separated with a semi-colon.
let and var have subtle differences with respect to scope. If X is used outside a function, then:
1. If X has been declared with var, a property named "X" is added to the global window object. However, browsers will generally disallow the declaration if the property is a pre-defined property with special meaning such as "location", which represents the URL to which the browser is currently pointing. The global window object is defined by all browsers and has a variety of browser-specific properties associated with it.
2. If X has been declared with let, a property named "X" is not added to the global object, but X is still accessible from anywhere in the code.
3. If X has not been declared with var or let, the variable becomes a property of the global object, even if assigned to inside a function. If the property already exists, the assignment is allowed, which can be dangerous if you inadvertently modify a browser-specific property sucy as location.
If X is used inside a function, then:
1. If X is declared with var, then it has function-scope visibility and is visible within the scope of the function and goes out-of-scope when the function exits.
2. If X is declared with let then it has block-scope visibility and is visible within the most-enclosed set of {} braces and goes out-of-scope when the block exits.
3. If X is not declared with either var or let, then it becomes a global variable, which is typically undesirable.
Data types
1. integers: The parseInt(string) function will convert a string to an integer or return NaN if the string cannot be converted to an integer. Use the isNaN() global function to check if a value is a NaN value.
2. floating point numbers: The parseFloat(string) function will convert a string to an integer or return NaN if the string cannot be converted to a float. Use the isNaN() global function to check if a value is a NaN value.
3. booleans: true or false
4. strings: either single or doubly quoted
  1. .length: returns the length of the string
  2. substring(begin,end): returns the substring starting at index begin and going up to, but not including, end. Indices start at 0.
  3. charAt(index): returns the character at that index or an empty string if you are past the end of the string
  4. indexOf(substring, [start]): returns the index in the string where the substring starts or -1 if the substring cannot be found. If a start index is specified then the search starts at start.
  5. string interpolation: create a string with backquotes ` and use ${expression} in the string to evaluate the expression and have the result interpolated into the string. For example:
```
	    
a = 'brad';
b = 10;
c = `The return of the ${a} in ${b + 30} seconds`;
```
    c will have the value "The return of the brad in 40 seconds".
5. objects
6. null: a special keyword that indicates that a variable has no value
Operators
1. JavaScript's arithmetic operators are the same as the C/C++ arithmetic operators and use the same syntax
2. JavaScript's logical operators are the same as C/C++'s logical operators and use the same syntax
3. The + operator can be used to concatenate two strings: In a mixed expression that involves both a string and a number, the number will be converted to a string, regardless of whether the string is the first or the second operator
4. The assignment operators (e.g., =, +=, -=) are the same as the C/C++ assignment operators and have the same syntax.
5. The comparison operators (e.g., <, <=, ==) are the same as the C/C++ comparison operators and have the same syntax.
6. Conditional operator: Like C/C++, JavaScript has the following conditional operator The booleanExpression should evaluate to either true or false and either the trueExpression or falseExpression will be evaluated and its value returned as the result of the operator.

Comments

//: Single line comment
/* ... */: Multi-line comments

Input and Output

Input can be obtained in one of two ways:

via form elements (to be discussed later)
via the prompt function
1. the prompt function pops up a dialog box with a text box and allows the user to enter a string of input
2. the prompt function returns the string as its return value
3. syntax: prompt("prompt message", default value)
4. example: prompt("please enter sales tax rate", ".05");
5. it is ok to provide an empty string, '', as the default value, or to simply omit the default value, in which case it will default to the empty string
6. it is ok to provide any evaluable expression as the default value--the resulting value will be converted to a string
7. if the user presses the "Cancel" button then prompt returns null

Output can be provided in a number of ways

document.write(string): document is a pre-defined object and write is a method that writes a string. You use the write method to dynamically create content on a web-page as it it being loaded.
1. You can use the string concatenation operator, +, to concatenate several string fragments.
2. You can write html markup in order to obtain formatted output.
3. write destroys the content that was previously displayed on the web page so do not use it after the html page has loaded. Once the html page has loaded, you should modify the page by adding or deleting nodes from the dom tree (talked about in the AJAX notes).
4. document.writeln will write a string with a newline attached to it but it is of limited utility because 1) the newline does not show up in the html output--<br> would be needed to do that, and 2) the source view will show the script, not the dynamically generated html so the string will not show up in the source view.
console.log(string): writes a debugging message to the browser console. This message will not appear in the web-page.
alert(string): alert will pop up a dialog box with the given string value. Execution of the script will be suspended until the user presses the ok button.
alter the html dom: You can use javascript to modify, add, or delete nodes from the html dom, and this will adjust the contents of the page. We will discuss the html dom in later notes.

Ifs and Loops

If statements are exactly the same as in C/C++ and have the same syntax
1. Single statements do not require {} braces
2. if-else is always used: there is no elsif, elif, or other abbreviations for elses that are used in other scripting languages
3. The pre-defined navigator object can be used to determine the browser and version number. This information can be used to determine whether or not the browser supports various features needed by the script.
  1. navigator.appName: The browser type (e.g., Internet Explorer, Safari)
  2. navigator.userAgent: The browser version
  The following script will pop up an alert box with your browser's name and version number. You can view the html page source to see what the script looks like.
Switch statements: The syntax for switch statements is similar to C/C++
```
switch (expression) {
       case label1, label2, ... label_n:
         statements;
	 break;
       case ...
       case ...
       default:
         statements to execute if none of the cases match
}
     
```
There are a few enhancements to C's switch statement in that labels can be one of:
1. a number
2. a string
3. a variable which will be evaluated and should yield a number or string
Loops
1. For loop: syntax exactly like C for loop
2. While loop: syntax exactly like C while loop
3. Do..While loop: syntax exactly like C do..while loop
4. For..In loop: The for..in loop iterates through an array or object and produces a list of numeric indices or property names depending on whether it's an array or an object.
  1. Example: Iterating through the elements of a numeric array
  2. Example: Iterating through the properties in an object: Note that I can use an object like an associative array to access its properties

for-of loop: returns each value in an array:

let groceries = ["bread", "milk", "peanut butter"];

// Display all elements in groceries array
for (let item of groceries) {
   console.log(item);
}

forEach function: Allows the user to provide a function that will be applied to each element of an array:

      
let groceries = ["bread", "milk", "peanut butter"];

// Display all elements in groceries array
groceries.forEach(function(item, index) {
   console.log(index + " - " + item);
});

Arrays

JavaScript arrays are objects, not built-in data types

You can create either an uninitialized or an initialized array

type example effect

uninitialized array x = new Array(10) create an array with 10 elements

initialized array x = new Array(10, 20, 30) create an array with 3 elements: 10, 20, and 30

initialized array x = [10, 20, 30]; create an array with 3 elements: 10, 20, and 30

String arrays
1. Splitting a string into an array: array = string.split(" "): The parameter is a character on which to split the string, in this case, a blank character. You cannot use a fancy regular expression and you cannot have multiple occurrences of the character separating the strings. For example, if you have:
  
  then your array will be ["Brad", "Vander", " ", "Zanden"].
2. Joining array elements to form a string: string = array.join(","): The parameter is a separator character
Sorting arrays
1. sorted_array = array.sort(): sorts array alphabetically and stores the result in a new array called sorted_array.
2. numeric sorting or other types of sorting can be accomplished by passing to the sort method a comparison function that takes two parameters, a and b to be compared. The comparison function should return a negative number if a should appear before b, 0, if they are the same, and a positive number if a should appear after b. For example:
  
  IIf you want you can create an anonymous function or a so-called arrow function:
```
sorted_nums = nums.sort((a,b) => a - b);	   
	 
```

type	example	effect
uninitialized array	x = new Array(10)	create an array with 10 elements
initialized array	x = new Array(10, 20, 30)	create an array with 3 elements: 10, 20, and 30
initialized array	x = [10, 20, 30];	create an array with 3 elements: 10, 20, and 30

Functions

Declared using the keyword function
Can take any number of arguments
return keyword returns a value
Called in the normal C/C++ manner
Primitive types passed by value and arrays/objects passed by reference
Use let or var to declare a variable as local. If you simply use a variable without declaring it then it will be placed in the global name space and will remain defined after the function exits.
Function pointers can be assigned to variables. For example:
You can create anonymous "arrow" functions as well. The general form is:
```
(parameter list) => { code }    
    
```
If the parameter list is only one variable then you omit the ()'s. Arrow functions return a function pointer that must be assigned to a variable or passed to a function, as was done in the sort function above.

Objects

Created using the new keyword
Deleted using the delete keyword
"Anonymous" objects can be created using the {} notation: a = {};
Objects are somewhat like associative arrays in that properties can be dynamically added to or deleted from an object and properties can be accessed using either . (dot) or [] (bracket) notation. For example:
Maps: The Map object is a newer alternative to using objects for storing key/value pairs. Common methods and properties of the Map object include:
1. The set(key, value) method sets a key/value pair. If the key is new, a new element is added to the map. If the key already exists, the new value replaces the existing value.
2. The get(key) method gets a key's associated value.
3. The has(key) method returns true if a map contains a key, false otherwise.
4. The delete(key) method removes a map element.
5. The size property is the number of elements in the map.
The Map object's syntax is clunkier than an object's syntax but a Map object does have a number of advantages over a regular object:
1. Keys can be any type, not just strings.
2. A Map has a .size() function that allows you to easily determine the number of keys in the map.
3. You can access the key/value pairs in the order in which they were inserted using a for..of loop. For example:
```
let stateCapitals = new Map();
stateCapitals.set("AR", "Little Rock");
stateCapitals.set("CO", "Denver");
stateCapitals.set("NM", "Santa Fe");

console.log("All capitals:");
for (let [state, capital] of stateCapitals) {
   console.log(state + " is " + capital); 
}
	  
```

Constructor functions: You can create a constructor function by naming the function after the object you wish to create and using the this variable to assign values to the object's properties. For example:

function Account(cust_name, initial_deposit, date) { this.name = cust_name; this.balance = initial_deposit; this.origination_date = date; } new_acct = new Account("Brad", 500, '4/10/08'); alert("name: " + new_acct.name + '\n' + "deposit: " + new_acct.balance + '\n' + "date: " + new_acct.origination_date);

Adding methods to objects: You can add a method to an object by defining a function and then assigning a pointer to the function to one of the object's properties.
Creating an inheritance chain: You can make one object inherit from another object by setting the object's prototype property to an instance of the appropriate prototype object. For example:
```
function C() {
   this.height = 25;
}

function B() {
   this.width = 20;
}

B.prototype = new C();
var b1 = new B();
alert(b1.height);   // prints 25
```
Note that B is a function object with a prototype property, which is what we are setting.