Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
161 views

Intro To JavaScript

This document provides an outline for teaching JavaScript in 4 parts: Part A covers an overview and basics of JavaScript including variables, data types, operators, expressions, and control structures. Part B covers functions, events, objects, errors, and exception handling. Part C covers working with browser objects and the DOM. Part D covers application development, JavaScript sites, references, and coding hints. The document introduces JavaScript capabilities and embedding, and provides examples of variables, methods, and popup boxes.

Uploaded by

Shubham Saini
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
161 views

Intro To JavaScript

This document provides an outline for teaching JavaScript in 4 parts: Part A covers an overview and basics of JavaScript including variables, data types, operators, expressions, and control structures. Part B covers functions, events, objects, errors, and exception handling. Part C covers working with browser objects and the DOM. Part D covers application development, JavaScript sites, references, and coding hints. The document introduces JavaScript capabilities and embedding, and provides examples of variables, methods, and popup boxes.

Uploaded by

Shubham Saini
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 30

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.

You might also like