Javascript programming an introduction prepared by p d krolak and m s krolak
This presentation is the property of its rightful owner.
Sponsored Links
1 / 101

JavaScript Programming an Introduction Prepared By P .D. Krolak and M.S. Krolak PowerPoint PPT Presentation

  • Uploaded on
  • Presentation posted in: General

JavaScript Programming an Introduction Prepared By P .D. Krolak and M.S. Krolak. Based on material from JavaScript Unleashed (2nd Ed). Introduction to JavaScript. Basics for Non Programmers. JavaScript. JavaScript is a Programming Language, although not a complete one.

Download Presentation

JavaScript Programming an Introduction Prepared By P .D. Krolak and M.S. Krolak

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript

Javascript programming an introduction prepared by p d krolak and m s krolak

JavaScript Programming an Introduction Prepared ByP .D. Krolak and M.S. Krolak

Based on material from

JavaScript Unleashed (2nd Ed)

Introduction to javascript

Introduction to JavaScript

Basics for Non Programmers



  • JavaScript is a Programming Language, although not a complete one.

  • JavaScript was developed by Netscape and is becoming an international standard, ECMA-262.

  • JavaScript is sent with the HTML document and is interpreted at the time it is loaded on the browser

  • JavaScript adds interaction

Embedding js in html

Embedding JS in HTML

Embedding js in html1

Embedding JS in HTML

  • The <script> </script> tag container

  • Accommodating the Non JS supporting browsers by using a comment to surround the content of the script within the container.

  • Viewing the JS code

  • Executing the scripts

  • loading a page

  • HTML enhancements

The script tag

The <script> tag

  • <script language=“JavaScript1.x”> where x can be version of JavaScript used, i.e 0,1,2,3. If the browser does not support the version the tag and its content is ignored.

  • language can also be set to vb script, php, etc.

  • <Script > </Script> form the container

  • The script may be placed anywhere in the document but must exit before needed.

  • Most scripts are placed in the head and are thus loaded before they are needed for the display & interaction.

  • Scripts that contain document.write() must be in the body.

The script tag continued

The <script> tag continued

  • JavaScript libraries may be stored external to the HTML document.

  • <script Language=javascript1.2 src=“Library’s_URL”>

  • The Library file extension must be “.js”

  • The External file does not have the <script></script> tags

Viewing the js code a simple hello world

Viewing the JS codeA Simple Hello World


<Head> <Title>JS Sample</Title>



<script Language=“javascript1.2”>

document.write(“Hello World”);




See the above web page

Viewing the js code a confirm hello world

Viewing the JS codeA Confirm Hello World


<Head> <Title>JS Sample</Title>



<script Language=“javascript1.2”>

confirm(“Hello World”);




See the above web page

Viewing the js code an alert window hello world

Viewing the JS codeAn Alert window -- Hello World


<Head> <Title>JS Sample</Title>



<script Language=“javascript1.2”>

alert(“Hello World”);




See the above web page

Accommodating the non js supporting browsers

Accommodating the Non JS supporting browsers

  • The contents of the script container are commented so non JS browsers will ignore the contents.

  • <Script >

    <! -- // the comment is used by the non-JS

    Your JavaScript code here



Executing the scripts

Executing the scripts

  • The scripts are not executed in any necessary order.

  • They are executed as the flow of events dictates. Events are generally created by an action of the user interacting with the page elements. An example, a mouse over a link.

Loading a web page

Loading a web page

There is no difference in loading a page with a script or without one.

Html enhancements

HTML enhancements

Js fundamentals

JS Fundamentals

Versions of js

Versions of JS

Versions of js cont

Versions of JS (cont.)

Javascript data types

JavaScript Data Types

  • JavaScript does not have a rich set of data types like most widely used programming languages.

  • JavaScript is also not strongly typed.

Javascript data types1

JavaScript Data Types

Javascript data types2

JavaScript Data Types

Javascript variables

JavaScript Variables

Javascript function

JavaScript Function

Javascript expression

JavaScript Expression

Javascript variables1

JavaScript Variables

Javascript literals

JavaScript Literals

Javascript operators

JavaScript Operators

Js operators

JS Operators

  • Assignment Operators

  • Arithmetic Operators

  • Comparison Operators

  • String Operators

  • Conditional Operators

  • Boolean Operators

  • The type of operators



Assignment operator assigns a value to a variable.

Assignment operators

Assignment Operators

Example of assignment

Example of Assignment:

Arithmetic assignment

Arithmetic Assignment



Arithmetic operators take numeric variables and return a single numeric value

Example of arithmetic ops

Example of Arithmetic Ops:

Bitwise operator assignment

Bitwise Operator Assignment

Arithmetic operators

Arithmetic Operators



A comparison operator logically compares its operands and returns a logical True or False.

Comparison operators

Comparison Operators

Example of comparison ops

Example of Comparison Ops:

String operators

String Operators

String operators are the same as comparison, using a sort sequence. This is called a lexicographic or dictionary sort

String a> b, or a>=b etc.

String has two forms of concatenation, i.e.

(the string ‘b’ is added to the end of string ‘a’)

  • a+b

  • a +=b

String operator

String Operator



Assign a value if the condition is true or the alternative value if not.

(condition) ? True Value : False Value



A Boolean operator takes two operands and returns a truth value.

Boolean operators

Boolean Operators

Typeof operand

Typeof Operand

Typeof operand returns the data type of the operand.

Js operators continued

JS Operators (continued)

  • Function operators

  • Data structure operators

  • Bit wise operators

  • Operator precedence

Function operator

Function Operator

Javascript statements

JavaScript Statements



  • Statements define the flow of the script.

  • JS statements require a “;” at the end if there are more than one on a line.

  • A block of statement that are executed in order is enclosed by curly brackets {}.

  • Flow is normally linear but may be altered by conditional, looping, or similar statements.



  • Comments are not really part of the program statement but are provided for the programmer and others as notes and reminders of what is happening in the JS.

    Statement; //single line comment

    /* this the way to

    create multi line comments */

Js control structures and looping

JS Control Structures and Looping

  • Conditional statements

  • Looping statements

  • Labeled

  • with

  • switch

Conditional statements

Conditional statements

If …. else

If (condition)

{Block of Statements;}


{Block of Statements;}

Looping statements

Looping statements


The traditional for loop -- loops until the test condition is false. The initial statement is executed once. The test is applied and if true, the Block of Statements are executed. The counter is incremented and test applied. Repeat looping.

for (initial_statement; test_condition; increment)

{Block of Statements;}

Looping statements1

Looping statements

For … in

On each iteration get one property of the object. If the object has no properties the loop is not executed.

for (property in object)

{Block of Statements;}

Looping statements2

Looping statements

do …. while

Repeat the block statement until the condition is false.

(Note it goes thru loop at least once)


{ Block of Statements; }

while (condition)

Looping statements3

Looping statements


While executes as long as condition is true. Will not execute the first time if false.

While (condition)

{ Block of Statements;}

Break continue statements

Break & Continue Statements

  • Break – Drop out of loop and go to statement following loop.

  • Continue – Drop out of the loop block of statements and go to the loop control. Looping continues until control is false.



  • Label statement – allows the break and continue statement to transfer to this label.

    Label: statement;

Javascript programming an introduction prepared by p d krolak and m s krolak


  • Establishes an object as the point of reference.

    with (object)

    {Block of Statement;}



Switch is the JavaScript case statement.

Switch (expression){

case label-1:

{Block of Statements;}



case label-n:

{Block of Statements;}



{Block of Statements;}


Javascript objects

JavaScript Objects

Js as object orientated language

JS as Object Orientated Language

  • Object and Dot Notation

  • Properties

  • Methods

  • Events

Object and dot notation

Object and Dot Notation

The object is described from the container that holds the container that holds .. the container. Read from left to right and the dot as contains.

Example the form object from the diagram


Object dot notation

Object Dot Notation

  • A property is: where dot reads is_a

  • A method is:

    Object.method() where dot reads is_a

Object dot notation1

Object Dot Notation

  • Since a window contains everything, it is called self.

  • In the Dot notation we can drop the window because it is contained by nothing and contains everything.

Javascript objects1

JavaScript Objects

  • JS is not true Object Oriented Programming (OOP) but object like

  • What are the JS’s objects

  • What is the JS object Hierarchy

  • Built-In Language Objects

Js is not true oop but object like

JS is not true OOP but object like.

  • JS objects do have properties and methods like and object orientated language.

  • JS objects do not support inheritance.

  • JS object model is a container model not a class model.

  • Container objects contain other containers.

What are the js s objects

What are the JS’s objects

  • JavaScript objects fall into classes

    • Navigator Objects that mostly correspond to HTML tags

    • Built-in Language Objects

Javascript objects corresponding html tags

JavaScript Objects & Corresponding HTML Tags

Js object hierarchy

JS Object Hierarchy

Javascript properties

JavaScript Properties

  • Properties in JS resemble data attributes of an object

  • Properties explain the characteristics and identity of the given object

  • Properties can represent the state of the object

  • Properties could represent the role that the object plays at a given time

Javascript events event handlers

JavaScript Events & Event Handlers

  • A JavaScript event is controlled by browser based on action normally initiated by the viewer.

  • Each tag has an associated set of event handlers that are triggered by a corresponding event. When the event handler is triggered, a JavaScript is preformed.

Javascript methods

JavaScript Methods

Methods are functions that provide services for the object

  • Set the value of a property

  • Get the value of a property

  • Iterate on the object’s properties

  • Constructor for the object.

Js window object

JS Window Object

  • The Window Object contains all the objects.

Js navigator object

JS Navigator object

  • Contains information about the browser.

  • Properties can not be set by JavaScript.

Js history object

JS History Object

  • The History object records the documents that were displayed in order of their presentation – most recent descending to oldest.

Js history properties methods

JS History Properties & Methods

Js history properties methods1

JS History Properties & Methods

Js history example

JS History Example

Create a back to last page link

<a HREF=“JavaScript:history.back();”>

Go to Last Page </a>

In the above link tag the href is:

  • set to a JavaScript

  • Returns the link found in the history object using the back method with no argument, i.e. the default is the URL of the previous link.

  • When clicked the link returns to the previous link

Js document object

JS Document Object

  • Contains all the objects that are contained in the document. The objects that are contained correspond to the HTML tags found on the web page.

Js location object

JS Location Object

  • Location Object contains the information about the source of the document, i.e. the URL, and related information.

Js frame object

JS Frame Object

  • Contains information about the frames in the widow.

Built in language objects

Built-In Language Objects

  • Built-in objects do not appear in the document but in the code.

  • Built-in objects include:

    • Array

    • Date

    • Math

    • Regular Expression

    • String

Array object

Array Object

Date object

Date Object

Math object

Math Object

Regular expression objects

Regular Expression Objects

String object

String Object







Js events and event handlers

JS Events and Event Handlers

User defined objects

User Defined Objects

Js object constructor

JS Object Constructor

A method is a constructor if it has the same name as the object an provides a template for creating an instance of the object.

Function object(parm1, … ){

This.property1 = parm1 ;


This.method1= function1



Instantiating objects

Instantiating Objects

Debugging javascript

Debugging JavaScript

Debugging javascript1

Debugging JavaScript

  • First sign of trouble will appear as error message in the status window (lower left bottom of window).

    When a error does appear then type:

    Javascript: in the location window (where the document URL goes). Note the last character “:” is required. A series of error messages that will attempt to locate the error will appear in the dialog window.

When creating javascript turn javascript console automatically

When creating JavaScript turn JavaScript Console automatically

  • Can not be done through preference option But it can done.

  • Go to the pref.js in the Netscape directory.

  • Open in a text editor.

  • Last line add:



  • Save file and Restart Netscape.

    Console should pop up when a JavaScript error occurs.

Netscape js debugger

Netscape JS Debugger

  • Download the JS debugger from their web site:

Javascript applications

JavaScript Applications

Javascript references

JavaScript References

Javascript references1

JavaScript References

  • Richard Wagner, et al. JavaScript Unleashed (Second Ed.), (1997)

  • Michael Moncur, SAMS Teach Yourself JavaScript in 24 Hours (Second Ed.), Sams Pubs. (2000).

  • Ellie Quigley, JavaScript by Example, Prentice Hall, (2001).

  • Login