Introduction to JavaScript
Outline Part A
Overview of JavaScript
Versions, embedding, comments
JavaScript Basics
Variables and Data Types Operators Expressions
JavaScript Control Structures
Conditional Statements Looping Statements
Outline Part B
JavaScript Functions and Events
Events Handlers
Using Object in JavaScript
Object-Oriented Programming JavaScript Object Model Using Built-In objects (Predefined Object) Custom Object Types
Error in JavaScript Exception Handling in JavaScript
Outline Part C
Working with Browser Objects
Document Object Model (DOM)
Creating Cookies in JavaScript
Constructing a standard cookie Interaction with the cookie
Introducing DHTML
Styles and Layers Dynamic Positioning
Outline Part D
JavaScript Application Development
JavaScript Example Discuss the execution requirements How to break down the syntax
Cool JavaScript Sites JavaScript and DHTML Reference Hints for JavaScript coding Summary
Introduction
The growth of the WWW has resulted in a demand for dynamic and interactive web sites. There are different kinds of scripting languages JavaScript, This lecture aims at offering in-depth knowledge of JavaScript, discussing the complexity of scripting and studying various common examples.
JavaScript Capabilities
Improve the user interface of a website Make your site easier to navigate Easily create pop-up alert, windows Replace images on a page without reload the page Form validation Many others
JavaScript Versions
JavaScript 1.0
Supported by Netscape 2.0 and IE 3.0
JavaScript 1.1
Supported by Netscape 3.0 and IE 4.0
JavaScript 1.2
Supported by Netscape 4.0 and IE 4.0
JavaScript 1.3
Supported by Netscape 4.5 and IE 5.0
JavaScript 1.5
Supported by Netscape 6.0 and IE 5.5 and later
The Future of JavaScript
ECMA standard brings JavaScript and Jscript together.
ECMA - An International industry association dedicated to standardize information and communication systems.
Both Netscape and Microsoft have pledged that they will support and develop JavaScript in the future. It is future-proof, and it is not going to disappear in the near future.
A Simple Script
<html> <head> <title>First JavaScript Page</title> </head> <body> <h1>First JavaScript Page</h1> <script type="text/javascript"> <!-document.write("<hr>"); document.write("Hello World Wide Web"); document.write("<hr>"); --> </script> </body> </html>
JavaScript Syntax.
Unlike HTML, JavaScript is case sensitive. Dot Syntax is used to combine terms.
e.g., document.write("Hello World Wide Web"); document.write("Hello World)
Certain characters and terms are reserved. JavaScript is simple text (ASCII).
Embedding JavaScript
<html> <head> <title>First JavaScript Program</title> </head> <body> <script language=JavaScript src=your_source_file.js></script> </body> </html>
A <script> tag can be placed either within the <head> or <body> tag of an HTML document.
JavaScript Source File
<script language=JavaScript src=your_source_file.js></script>
SRC specifies the location of an external script TYPE specifies the scripting language of the script LANGUAGE specifies the scripting language of the script TYPE and LANGUAGE have a similar function, we use LANGUAGE to specify the language used in the script
JavaScript Terminology.
JavaScript programming uses specialized terminology. Understanding JavaScript terms is fundamental to understanding the script.
Objects, Properties, Methods, Events, Functions, Values, Variables, Expressions, Operators.
Objects
Objects refers to windows, documents, images, tables, forms, buttons or links, etc. Objects should be named. Objects have properties that act as modifiers.
Properties
Properties are object attributes. Object properties are defined by using the object's name, a period, and the property name.
e.g., background color is expressed by: document.bgcolor Document is the object. Bgcolor is the property.
Methods
Methods are actions applied to particular objects. Methods are what objects can do.
e.g., document.write(Hello World) Document is object. Write is method.
Events
Events associate an object with an action.
e.g., the onmouseover event handler action can change an image. e.g., the onsubmit event handler sends a form.
User actions trigger events.
Functions
Functions are named statements that performs tasks.
e.g., function dowhatever() {statements} The curly braces contain the statements of the function.
JavaScript has built-in functions, and you can also write your own.
Need for a source file
If the JavaScript code is fairly short, you are recommended to include the code in the HTML document. To add clarity to an HTML document. To share JavaScript code across multiple HTML documents. To help you hide your JavaScript code.
Spent lot of time for JavaScript coding. Viewer can only see the location of the source file but not the contents.
JavaScript and Java confusion
JavaScript
Interpreted by the client-side computer
Java
Compiled on the server before executed on the client machine
Dynamic binding, object references are checked at runtime
No need to declare data types Code is embedded in HTML Limited by the browser functionality Can access browser objects
Static binding, object references must exist at compile time
Data types must be declared Code is not integrated in HTML Java applications are standalone Java has no access to browser objects
JavaScript Popup Boxes
JavaScript has three kinds of popup boxes: Alert box, Confirm box, and Prompt box.
Using the alert() Method
<head> <script language=JavaScript> alert(An alert triggered by JavaScript); </script> </head>
It is the easiest methods to use amongst alert(), prompt() and confirm(). You can use it to display textual information to the user (simple and concise). The user can simply click OK to close it.
Using the confirm() Method
<head> <script language=JavaScript> confirm(Are you happy with the class?); </script> </head>
This box is used to give the user a choice either OK or Cancel. It is very similar to the alert() method. You can also put your message in the method.
Using the prompt() Method
<head> <script language=JavaScript> prompt(What is your student id number?); prompt(What is your name?,No name); </script> </head>
This is the only one that allows the user to type in his own response to the specific question. You can give a default value to avoid displaying undefined.
Three methods
<script language="JavaScript"> alert("This is an Alert method"); confirm("Are you OK?"); prompt("What is your name?"); prompt("How old are you?","20"); </script>
Variables
JavaScript allows you to declare and use variables to store values. How to assign a name to a variable?
Include uppercase and lowercase letters Digits from 0 through 9 The underscore _ and the dollar sign $ No space and punctuation characters First character must be alphabetic letter or underscore 99Total?, 012345number?, Case-sensitive No reserved words or keywords
Declaring JavaScript Variables
You declare JavaScript variables with the var keyword: var x; var carname; After the declaration shown above, the variables are empty (they have no values yet). However, you can also assign values to the variables when you declare them: var x=5; var carname="Volvo";
Which one is legal?
My_variable $my_variable 1my_example _my_variable @my_variable My_variable_example ++my_variable %my_variable #my_variable ~my_variable myVariableExample
Legal
Illegal
Variable on-the-fly
<head> <script language=JavaScript> Variable declaration var id; id = prompt(What is your student id number?); alert(id); name = prompt(What is your name?,No name); alert(name); </script> </head>
We should use var because it is more easy to keep track of the variables.
