JavaScript Intro

Intro What it is What can it do Dynamic loosely typed scripting language What can it do Introduce interactivity Manipulate the Document Object Model (DOM) Alter contents of a page or CSS styles Form validation

Adding JavaScript to a Page Embedded directly in HTML document <script> //JavaScript code here </script> Using an external file <script src=‘myScript.js’></script> Script can be placed anywhere in document, preferably placed just before the closing body tag

The Basics JavaScript (JS) is case sensitive Whitespaces like tabs spaces are ignored unless part of a string Semi colon is optional at the end of a statement, but it is good practice //Single line comment /*Multi-line comment*/

Basics alert(‘Hello’); confirm(‘Are you sure’); prompt(‘How are you’); Displays a dialog box with the parameter, ‘Hello’ in this case, as the message confirm(‘Are you sure’); Displays dialog box with message and Ok/Cancel prompt(‘How are you’); Displays dialog box with text field for user input

Variables These are information containers. You name one and assign it a value. var foo = 3; Notes: var keyword optional (sort of) Use Descriptive variable names; names start with a letter or an underscore; contains letters, digits and underscores; no space

Data Types Undefined: A variable that is declared but is not initialized var foo; alert(foo);//undefined Null: a declared variable with no inherent value var foo=null; alert(null);//null (case sensitive) Numbers: Positive and negative integers and floating point numbers Strings: Sequence of characters and or numbers enclosed in quotes var foo = “hello”; alert(foo)//hello + serves as string concatenation: alert(foo+foo)//hellohello var foo = “4”; alert(foo+foo) //??? var foo = “One”; alert(foo+1)//??? Boolean: true or false used in implementing logic var foo = true; //No quotes necessary Arrays: Group of values assigned to one variable. Arrays are indexed with the first element having index 0 var foo = [“hello”, 4,”four”]; alert(foo[0]);//”hello” alert(foo[2]);//four

Comparison Operators == Is equal to != Is not equal to ===  Is identical to (equal to and of the same data type) !==  Is not identical to > Is greater than >= Is greater than or equal to < Is less than <= Is less than or equal to

Mathematical Operators + Addition between numerical values - Subtraction * Multiplication += Adds the value to itself ++ Increases the value of a number (or a variable containing a number value) by 1 -- Decreases the value of a number (or a variable containing a numbervalue) by 1

If/else Statements Implementing logic and decisions if ( condition){ //Statement to execute when true } else{ //Statements to execute when false Note: We can test conditions on members of an array; if(foo[0]==1)

Loops Mechanisms for repeated execution of instructions. Best used in processing large data sets like arrays for (initialization; condition; increment){ //Statements to execute here } Other looping mechanisms exist. Find them Example: Loop through an array and display its members Loops can be nested for interesting effects Looping through a list of elements on the page and checking the value of each, applying a style to each, or adding/removing/changing an attribute on each. For example, we could loop through each element in a form and ensure that users have entered a valid value for each before they proceed. • Creating a new array of items in an original array that have a certain value. We check the value of each item in the original array within the loop, and if the value matches the one we’re looking for, we populate a new array with only those items. This turns the loop into a filter, of sorts

Functions These are codes that are not executed until they are referenced or called. An example is the alert() function we’ve been using

Native Functions Functions predefined in JavaScript alert(), confirm(), and prompt() Show dialog boxes Date() Shows current date parseInt(“4”) Converts a string of numbers to Number data type setTimeout(functionName, 1000) Executes the function with the same name as the first argument after a delay, the delay is specified as the second argument

Custom Functions Start with function keyword followed by a name for the function, followed by opening and closing parentheses, followed by opening and closing curly brackets -Anonymous Functions have no name function foo(){ alert(“CALLED!”);//Only when foo() is called } Write once execute many times. Saves time and redundant coding

Arguments Pass data to functions to apply logic to different data sets Add one or more comma-separated variables in the parentheses at the time the function is defined When we call that function, anything we include between the parentheses will be passed into that variable as the function executes Results of functions can be passed back to caller using return keyword function sum(a,b){ return a+b; } var tmp = sum(3,5); alert(tmp); //8 Execution in a function stops when return keyword is encountered. Any code found after return is ignored

Variable Scope The availability of a variable inside or outside a function defines its scope Global variables are available anywhere in the script. Variables defined outside a function are global variables Local variables are only available in their parent functions Variables defined in a function can be global or local. Add the var keyword to their definition to make them local and omit the var keyword to make them global function double( num ){ total = num + num; return total; } var total = 10; var number = double( 20 ); alert( total ); //40 To avoid variable collision, always try to use local variables

The Browser Object Browser can be manipulated using the window object. The window object is a collection of properties and functions (like alert()) event Represents the state of an event history Contains the URLs the user has visited within a browser window location Gives read/write access to the URI in the address bar status Sets or returns the text in the status bar of the window alert() Displays an alert box with a specified message and an OK button close() Closes the current window confirm() Displays a dialog box with a specified message and an OK and a Cancel button focus() Sets focus on the current window

Events An event is an action that can be detected with JavaScript, such as when the document loads or when the user clicks on an element or just moves her mouse over it. In scripts, an event is identified by an event handler. For example, the onload event handler triggers a script when the document loads, and the onclick and onmouseover handlers trigger a script when the user clicks or mouses over an element, respectively

Events onblur An element loses focus onchange The content of a form field changes onclick The mouse clicks an object onerror An error occurs when the document or an image loads onfocus An element gets focus onkeydown A key on the keyboard is pressed onkeypress A key on the keyboard is pressed or held down onkeyup A key on the keyboard is released onload A page or an image is finished loading onmousedown A mouse button is pressed onmousemove The mouse is moved onmouseout The mouse is moved off an element onmouseover The mouse is moved over an element onmouseup A mouse button is released onsubmit The submit button is clicked in a form

Applying Event Handlers • As an HTML attribute <body onclick="myFunction();"> /* myFunction will now run when the user clicks anything within 'body' */ Bad, why? • As a method attached to the element window.onclick = myFunction; /* myFunction will run when the user clicks anything within the browser window */ window.onclick = myFunction; window.onclick = myOtherFunction;//overwrites first binding • Using addEventListener (Recommended method) The syntax is a bit more verbose. We start by calling the addEventListener method of the target object, and then specify the event in question and the function to be executed as two arguments. window.addEventListener("click", myFunction);

Objects Objects are entities with properties Can be accessed with dot notation objectName.property Define a property by assigning it a value var car = new Object(); car.make = “Ford”; car.model=“Focus”; To reference properties alert(car.make);//Ford alert(car.color);//undefined Properties can also be referenced using square brackets notation car[‘make’]=“Toyota”;

Creating new Objects Using Object Initializer var obj = { property_1: value_1, // property_# may be an identifier... 2: value_2, // or a number... // ..., 'property n': value_n }; // or a string Using a constructor function: To define an object type, create a function for the object type that specifies its name, properties, and methods function Car(make, model, year) { this.make = make; this.model = model; this.year = year; } You can now create any number of objects of type Car var mycar = new Car('Eagle', 'Talon TSi', 1993);//myCar[‘make’]

Inheritance Objects can inherit properties from other objects (No classes) Every object has a prototype property that points to its parent (Object highest object in heirarchy) Data and Functions (methods) can be inherited Inherit properties using Object.create(parentObject);

Example example( strings ) { var tmp = strings[0]; for( i = 1; i < strings.length; i++ ) { if ( strings[i].length > tmp.length ) { tmp = strings[i]; } return tmp;