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

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

• Based on material from
• JavaScript Unleashed (2nd Ed)

2
Introduction to JavaScript

• Basics for Non Programmers

3
JavaScript

• 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

4
Embedding JS in HTML
5
Embedding JS in HTML

• The ltscriptgt lt/scriptgt 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

6
The ltscriptgt tag

• ltscript languageJavaScript1.xgt 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.
• ltScript gt lt/Scriptgt 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.

7
The ltscriptgt tag continued

• JavaScript libraries may be stored external to
  the HTML document.
• ltscript Languagejavascript1.2 srcLibrarys_URL
  gt
• The Library file extension must be .js
• The External file does not have the
  ltscriptgtlt/scriptgt tags

8
Viewing the JS codeA Simple Hello World

• ltHtmlgt
• ltHeadgt ltTitlegtJS Samplelt/Titlegt
• lt/Headgt
• ltBodygt
• ltscript Languagejavascript1.2gt
• document.write(Hello World)
• lt/Scriptgt
• lt/Bodygt
• lt/Htmlgt
• See the above web page

9
Viewing the JS codeA Confirm Hello World

• ltHtmlgt
• ltHeadgt ltTitlegtJS Samplelt/Titlegt
• lt/Headgt
• ltBodygt
• ltscript Languagejavascript1.2gt
• confirm(Hello World)
• lt/Scriptgt
• lt/Bodygt
• lt/Htmlgt
• See the above web page

10
Viewing the JS codeAn Alert window -- Hello World

• ltHtmlgt
• ltHeadgt ltTitlegtJS Samplelt/Titlegt
• lt/Headgt
• ltBodygt
• ltscript Languagejavascript1.2gt
• alert(Hello World)
• lt/Scriptgt
• lt/Bodygt
• lt/Htmlgt
• See the above web page

11
Accommodating the Non JS supporting browsers

• The contents of the script container are
  commented so non JS browsers will ignore the
  contents.
• ltScript gt
• lt! -- // the comment is used by the non-JS
• Your JavaScript code here
• --gt
• lt/Scriptgt

12
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.

13
Loading a web page

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

14
HTML enhancements
15
JS Fundamentals
16
Versions of JS
Version of JavaScript Browser Support
Javascript 1.1 Netscape 3.
Javascript 1.2 Netscape 4.0
Javascript 1.3 Netscape 4.5
17
Versions of JS (cont.)
Version of JavaScript Browser Support
JavaScript 1.5 JS 1.5 is the current version Netscape 7. IE 6 JavaScript 1.5 has fewer issues between the two major browsers


18
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.

19
JavaScript Data Types
Description Examples
String a sequence of letters, numbers, or speical characters a abc 123abc
Number an integer or a floating point number 1 -123 123.45 123.456E05
20
JavaScript Data Types
Description Examples
Boolean True False



21
JavaScript Variables
22
JavaScript Function
23
JavaScript Expression
24
JavaScript Variables
25
JavaScript Literals
26
JavaScript Operators
27
JS Operators

• Assignment Operators
• Arithmetic Operators
• Comparison Operators
• String Operators
• Conditional Operators
• Boolean Operators
• The type of operators

28
Assignment

• Assignment operator assigns a value to a variable.

29
Assignment Operators
Operator Description
Assigns the value on the right to the variable on the left of the .
. -, , / The right variable is operated on by the operand on the left using the indicated operator.
, ! Assign the logical value to the right value using the right and the left operand and the indicated logical operator.
30
Example of Assignment
31
Arithmetic Assignment
Assignment Description
x y x xy addition
x -y x x-y subtraction
x y x xy
x / y x x/y
x y x xy x mod (y)
32
Arithmetic

• Arithmetic operators take numeric variables and
  return a single numeric value

33
Example of Arithmetic Ops
34
Bitwise Operator Assignment
Assignment Description
x ltlty x xltlty
x gtgty x xgtgty
x gtgtgt y x xgtgtgty
x y x xy
x y x xy
x y x xy
35
Arithmetic Operators
Operator Description
or Modulo function 43 returns 1
Increment x sets x x1 and returns x1 but x sets xx1 and returns x
-- Decrement --x sets x x-1 and returns x-1 but x-- sets xx-1 and returns x
- (uninary negation) Sets x -x , i.e reverses sign
36
Comparison

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

37
Comparison Operators
Operator Description
Equal
! Not Equal
gt Greater than
gt Greater than or Equal
lt Less than
lt Less than or Equal
38
Example of Comparison Ops
39
String Operators

• String operators are the same as comparison,
  using a sort sequence. This is called a
  lexicographic or dictionary sort
• String agt b, or agtb etc.
• String has two forms of concatenation, i.e.
• (the string b is added to the end of string
  a)
• ab
• a b

40
String Operator
41
Conditional

• Assign a value if the condition is true or the
  alternative value if not.
• (condition) ? True Value False Value

42
Boolean

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

43
Boolean Operators
Operator Description
Logical And returns True if both operands are True.
Logical OR returns True if either operand or both are True.
! Logical NOT returns a True if the operand is False and returns False if operand is True.
44
Typeof Operand

• Typeof operand returns the data type of the
  operand.

45
JS Operators (continued)

• Function operators
• Data structure operators
• Bit wise operators
• Operator precedence

46
Function Operator
47
JavaScript Statements
48
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.

49
Comments

• 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 /

50
JS Control Structures and Looping

• Conditional statements
• Looping statements
• Labeled
• with
• switch

51
Conditional statements

• If . else
• If (condition)
• Block of Statements
• else
• Block of Statements

52
Looping statements

• For
• 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

53
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

54
Looping statements

• do . while
• Repeat the block statement until the condition is
  false.
• (Note it goes thru loop at least once)
• do
• Block of Statements
• while (condition)

55
Looping statements

• While
• While executes as long as condition is true. Will
  not execute the first time if false.
• While (condition)
• Block of Statements

56
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.

57
Labeled

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

58
with

• Establishes an object as the point of reference.
• with (object)
• Block of Statement

59
switch

• Switch is the JavaScript case statement.
• Switch (expression)
• case label-1
• Block of Statements
• break
• .
• case label-n
• Block of Statements
• break
• default
• Block of Statements

60
JavaScript Objects
61
JS as Object Orientated Language

• Object and Dot Notation
• Properties
• Methods
• Events

62
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
• Window.document.form

63
Object Dot Notation

• A property is
• Object.property where dot reads is_a
• A method is
• Object.method() where dot reads is_a

64
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.

65
JavaScript Objects

• JS is not true Object Oriented Programming (OOP)
  but object like
• What are the JSs objects
• What is the JS object Hierarchy
• Built-In Language Objects

66
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.

67
What are the JSs objects

• JavaScript objects fall into classes
• Navigator Objects that mostly correspond to HTML
  tags
• Built-in Language Objects

68
JavaScript Objects Corresponding HTML Tags
69
JS Object Hierarchy
70
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

71
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.

72
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 objects properties
• Constructor for the object.

73
JS Window Object

• The Window Object contains all the objects.

74
JS Navigator object

• Contains information about the browser.
• Properties can not be set by JavaScript.

75
JS History Object

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

76
JS History Properties Methods
Methods Description
Back () Go back n pages no argument go to last page
Forward() Go forward n pages if possible,
Go() Go N pages where n gt0 for forward and nlt0 for back.
77
JS History Properties Methods
78
JS History Example

• Create a back to last page link
• lta HREFJavaScripthistory.back()gt
• Go to Last Page lt/agt
• 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

79
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.

80
JS Location Object

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

81
JS Frame Object

• Contains information about the frames in the
  widow.

82
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

83
Array Object
84
Date Object
85
Math Object
86
Regular Expression Objects
87
String Object
88
Properties
89
Methods
90
Events
91
JS Events and Event Handlers
92
User Defined Objects
93
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
• ..

94
Instantiating Objects
95
Debugging JavaScript
96
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.

97
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
• user_pref(javascript.console.open_on_error,
• true)
• Save file and Restart Netscape.
• Console should pop up when a JavaScript error
  occurs.

98
Netscape JS Debugger

• Download the JS debugger from their web site
• http//developer.netscape.com/software/jsdebug.ht
  ml

99
JavaScript Applications
100
JavaScript References
101
JavaScript References

• Richard Wagner, et al. JavaScript Unleashed
  (Second Ed.), Sams.net (1997)
• Michael Moncur, SAMS Teach Yourself JavaScript in
  24 Hours (Second Ed.), Sams Pubs. (2000).
• Ellie Quigley, JavaScript by Example, Prentice
  Hall, (2001).