JavaScript Introduction

Introduction to JavaScript

• JavaScript is commonly used with HTML and CSS in DHTML

Table of Contents

• DHTML
• JavaScript introduction, implementation
• JavaScript syntax
• Document Object Model
• Debugging

What is DHTML?

• DHTML means Dynamic HTML
• Enables web pages react and change on user actions
• DHTML is a combo of HTML, CSS, and JavaScript

HTML, CSS, JavaScript

• HTML defines content
• CSS defines rules / styles
• JavaScript defines behavior

What is JavaScript?

• Front-end scripting language from Netscape for dynamic content
• Lightweight, but limited
• Simple and flexible
• Powerful to manipulate the DOM
• Can be object-oriented

JavaScript Advantages

• Allows interactivity, such as form validation and AJAX functionality

What Can JavaScript Do?

• Handle events
• Modify the DOM
• Validate form data
• Modify browser cookies
• Detect browser and OS
• Handle exceptions
• Asynchronous server calls (AJAX)

AJAX

• AJAX = Asynchronous JavaScript and XML
• New technique for more interactive web apps using XML, HTML, CSS, and JavaScript
• AJAX uses XHTML, CSS, DOM, and JavaScript

How AJAX works

• A typical web application transmits information serially
• AJAX uses JavaScript to request data after submission, and updates the current screen

Using JavaScript Code

• JavaScript code can be placed in the head or body
• Usually external linked files using a script tag in the head are used
• .js files are cached by the browser

JavaScript Execution

• JavaScript executes during page loading or when the browser fires an event
• Function calls or code attached via tag attributes

JavaScript Syntax

• The JavaScript syntax is similar to C# and Java
• Typeless variables
• Common Operators (+, *, =, !=, &&, ++, ...)
• Conditional statements (if, else)
• Loops (for, while)
• Arrays (my_array[]) and associative arrays (my_array [‘abc’])
• Functions (can return value)
• Function variables (like the C# delegates)

JavaScript Data Types

• Numbers
• Boolean (true / false)
• String

var myName = "You can use both single or double quotes for strings";
var my_array = [1, 5.3, "aaa"];
var my_hash = {a:2, b:3, c:"text"};

• Arrays, Associative arrays

JavaScript: Everything is an Object

• Every JavaScript variable can be considered an object

String Operations

Adding Strings

string1 = "fat ";
string2 = "cats";
alert(string1 + string2); // fat cats

What is "9" + 9?

alert("9" + 9); // 99

Converting string to number

alert(parseInt("9") + 9); // 18

Arrays in JavaScript

var arr = new Array();
var arr = [1, 2, 3, 4, 5];
arr.push(3);
var element = arr.pop();
arr.length;
arr.indexOf(1);

Standard Popup Boxes

Alert box

alert("text");

• Confirmation box (OK / Cancel)

confirm("Are you sure?");

• Prompt box (text, input field)

prompt ("enter amount", 10);

Conditional Statement

unitPrice = 1.30;
if (quantity > 100) {
unitPrice = 1.20;
}
>	Greater than
<	Less than
>=	Greater than or equal to
<=	Less than or equal to
==	Equal
!=	Not equal

Conditional Statement (if)

• The condition may be of Boolean or integer type

Switch Statement

• The switch statement functions like C#

Loops and Functions

• JavaScript, like C#, has for, while, and do...while loops

JavaScript Functions

• JavaScript functions can split code into parts
• Is used to processes data, and return a response

Function Arguments and Return Values

• Functions are optional

function sum() {
var sum = 0;
for (var i = 0; i < arguments.length; i ++)
sum += parseInt(arguments[i]);
return sum;
}
alert(sum(1, 2, 4));

Document Object Model - DOM

• Every HTML element is accessible via the JavaScript DOM API
• Most DOM objects can be manipulated by the programmer

DOM: The Event Model

• The event model lets the document react to user actions
• Advantages: Create interactive pages, update objects without reload

How to Access DOM Elements

var elem = document.getElementById("some_id")
var arr = document.getElementsByName("some_name")
var imgTags = el.getElementsByTagName("img")

How to Manipulate the DOM

function change(state) {
var lampImg = document.getElementById("lamp");
lampImg.src = "lamp_" + state + ".png";
var statusDiv = document.getElementById("statusDiv");
statusDiv.innerHTML = "The lamp is " + state";
}
...
<img src="test_on.gif" onmouseover="change('off')"
onmouseout="change('on')" />

Common Element Properties

• Most properties come from the HTML attributes of the tag.
• Example: id, name, href, alt, title, src, className
• The style property modifies the CSS

How to Access Elements through the DOM Tree Structure

• element.childNodes
• element.parentNode
• element.nextSibling
• element.previousSibling
• element.firstChild
• element.lastChild

The HTML DOM Event Model

<img src="logo.gif" onclick="alert('clicked!')" />

is the same as

var img = document.getElementById("logo");
img.onclick = imageClicked;

HTML DOM Event Model: Event Handlers

• Event handlers receive one parameter that brings information about the event
• Includes type (mouse click, key press, etc)
• Location
• Reference to the event sender

Common DOM Events

• Mouse Events: onclick, onmousedown, onmouseup
• Key Events: onkeypress, onkeydown, onkeyup
• Interface Events: onblur, onfocus, onscroll
• Form Events: onchange, onsubmit
• Miscellaneous Events: onload, onunload

Built-In Browser Objects

• The browser provides some read-only data
• Commonly used: window, document, screen, browser

JavaScript Debugging

• JavaScript console reports errors in scripts
• Use Microsoft Script Editor, and Firebug