Developing Web Applications

1
Lecture 2 Dynamic Web Pages JavaScript
Introduction
2
Review

• What kinds of applications are around
• Where is it leading to (developments)
• Brief history
• What makes a web page
• Architecture (Client-server, protocol, ports,
  browser, server)
• HTML

3
Whats wrong with HTML?
4
Dynamic Web Pages

• Static Web page
• Page content established at the time page is
  created
• Useful for displaying data that doesnt change
  often, and for navigating between HTML Web page
  files
• Dynamic Web page
• Also called an interactive Web page
• Page content varies according to user requests or
  inputs

5
Client-side Scripts

• Client-side scripts, which run on the users
  workstation can be used to
• Validate user inputs entered on HTML forms
• Create advanced Web page features, including
• Handling manipulation of the browser (opening new
  ones, redirection )
• Creating cookies that store data on users
  computer about his or her actions while browsing
  a Web page
• Create animations and graphical effects

6
Scripting Languages

• VBScript (IE only, client side)
• Active Server Pages (ASPs) (Server side)
• JavaScript (mainly client, can be server too)
• Most commonly used client-side scripting language
  because it is supported by IE and Netscape
• PHP (Server side)
• PERL (Server side)
• Others Coldfusion, Zope

7
JavaScript

• Can be Server-side scripting language too
• Can be added to standard HTML Web pages using
  special HTML tags
• Used in Web pages for data validation
• Used to create pop-up browser windows
• Animations, games, dynamic graphics

8
Current Versions and Variants

• The JavaScript Programming Language
• JavaScript
• Current version 1.8 (as of end of 2008)
• JScript
• MS version of JavaScript (Jscript.net, latest
  version)
• ECMAScript (European Computer Manufacturers
  Association )
• International, standardized version
• Both versions (JavaScript and JScript) conform to
  the standard
• Both have proprietary extensions

9
JavaScript is not Java

• Interpreted (not compiled) by client.
• Object-based, not object-oriented. Uses built-in,
  extensible objects, but no classes or
  inheritance.
• Code integrated with, and embedded into, HTML.
• Variable data types not declared (loose typing).
• Dynamic binding. Object references checked at
  runtime.

10
Scripted languages are interpreted

• Scripting Languages
• Executed by an interpreter contained within the
  web browser (scripting host)
• Interpreter uses a scripting engine
• Converts code to executable format each time it
  runs
• Converted when browser loads web document

11
WWW Browser Architecture
D i s p l a y D r i v e r
Input from keyboard and mouse
Controller
html interpreter
Output sent to display

optional plugins
HTTP client
Other client

Network Interface
Communication with remote server
12
Programming in JavaScript
13
Syntax and logic

• Syntax
• Rules of the language
• Misuse of syntax
• e.g., typing fer instead of for
• Logic
• Order of execution of various parts of the
  program
• Unintended operation of program
• e.g., Infinite loop

14
Where to put your script

• JavaScript programs can be used in two ways
• Incorporated directly into an HTML file
• Using ltscriptgt tag
• Placed in an external (source) file
• Has file extension .js
• Contains only JavaScript statements

15
Embedded in HTML
16
Creating a JavaScript Source File

• JavaScript source files
• Use src attribute of ltscriptgt tag to denote
  source of JavaScript statements
• Browser will ignore any JavaScript statements
  inside ltscriptgt and lt/scriptgt if src attribute is
  used
• Cannot include HTML tags in source file
• ltscript languageJavaScript srcc\source.jsgt
• lt/scriptgt

17
Advantages of a JS Source File

• Makes HTML document neater (less confusing)
• JS can be shared among multiple HTML files
• Hides JavaScript code from incompatible browsers
• Can use a combination of embedded and
  nonembedded code
• Allows finer granularity in coding functionality
• JavaScript sections executed in order of location
  within HTML document

18
A First JavaScript Program

• The ltscriptgt Tag
• Document object
• Considered a top-level object
• Naming convention
• Capitalise first letter of object
• Unlike HTML, JavaScript is case sensitive

19
The ltscriptgt Tag

• language attribute
• Denotes the scripting language being used
• Default ? JavaScript
• Other languages (e.g., VBScript) may be used
• Can also specify script language version
• No space between name and version
• Checked by browser, scripts ignored if browser
  doesnt support version
• For ECMAScript compatible browsers, omit version

20
Where to put the embedded script

• Placing JavaScript in ltheadgt or ltbodygt sections
• Script statements interpreted in order of
  document rendering
• ltheadgt section rendered before ltbodygt section
• Good practice to place as much code as possible
  in ltheadgt section

21
ltHTMLgt ltHEADgt ltTITLEgtA First Program in
JavaScriptlt/TITLEgt lt/HEADgt ltBODYgt ltSCRIPT
LANGUAGE JavaScriptgt document.writeln(
ltH1gtWelcome to JavaScript Programming!lt/H1gt
) lt/SCRIPTgt lt/BODYgt lt/HTMLgt
22
Document object

• Represents the content of a browsers window
• write() writeln() methods of Document object
• Creates new text on a web page
• Called by appending method to object with a
  period
• Methods accept arguments
• Information passed to a method

23
(No Transcript)
24
ltHTMLgt ltHEADgt ltTITLEgtA First Program in
JavaScriptlt/TITLEgt lt/HEADgt ltBODYgt ltSCRIPT
LANGUAGE JavaScriptgt window.alert(
Welcome to\nJavaScript\nProgramming!
) lt/SCRIPTgt lt/BODYgt lt/HTMLgt
25
(No Transcript)
26
Variables

• Example, declaring variables within a Script
• Example, initialising variables within a Script

var variable1 var variable2, variable3
variable1 0 variable2 Hello
27
Comments in JavaScript

• Non-printing lines that are placed in the code to
  contain various remarks about the code
• Makes it easier to understand the code operation
• Two types
• Line comments
• // ignore all text to the end of the line
• Block comments
• / ignore all text between these symbols /

28
Hiding JavaScript from Incompatible Browsers

• Two methods
• Place JavaScript in external source file
• Enclose the code within HTML comments
• lt!-- beginning of HTML block comment
• end of HTML block comments --gt

29
ltHTMLgt ltHEADgt ltTITLEgtA First Program in
JavaScriptlt/TITLEgt lt/HEADgt ltBODYgt ltSCRIPT
LANGUAGE JavaScriptgt var thenumber //
Read in number from user thenumber
window.prompt( Enter first integer, 0
) // Display the number to the
user document.writeln( ltH1gtThe number is
thenumber lt/H1gt ) lt/SCRIPTgt ltPgtClick
refresh or reload to run this script
againlt/Pgt lt/BODYgt lt/HTMLgt
30
(No Transcript)
31
(No Transcript)
32
Arrays

• Array
• An ordered collection of values referenced by a
  single variable name.

quote1"I like JavaScript." quote2"I used to
like Java." quote3"JavaScript rules."
quote4"Help! JavaScript Error!" quote5"Just
Kidding."
33
Arrays
var quote new Array(5) quote0"I like
JavaScript." quote1"I used to like Java."
quote2"JavaScript rules." quote3"Help!
JavaScript Error!" quote4"Just Kidding."
var x0 for (x0 xlt5 x) // note alert
is part of window object (top level)
alert(quotex)
34
Maths

• You can easily add, subtract, multiply, divide
  and find the modulus
• variable1 variable2 variable3
• variable1 variable2 - variable3
• variable1 variable2 variable3
• variable1 variable2 / variable3
• variable1 variable2 variable3

35
Maths

• Precedence of arithmetic operators
• Multiplication, Division and Modulus operators
  have highest precedence
• Then comes Addition and Subtraction
• This can be over-ridden using parentheses
• e.g. a2, b3 and c4
• a b c 10
• a (b c) 14

36
JavaScript Operators   Some of the common
JavaScript Operators include   gt greater
than lt less than equal to ! not equal
to or a string variable concatenator
(str"a" same as strstr"a") a numeric
variable adder (xy is the same as
xxy) x increment x x-- decrement x
37
All languages have mechanisms for Sequence Repet
ition Selection
38
IF statements if (condition) statements1
else statements2
  FOR statement for (initial-expression
condition increment-expression)
statements   WHILE
statement while (condition) statements
  SWITCH statement switch (expression) case
label statement break case label
statement break default statement  
The structure of the major JavaScript Statements
is basically the same as C.
39
Functions   JavaScript, like a lot of programming
languages, uses functions. The basic format is
  function function-name ( parameters )
lines of code
40
ltheadgt ltscript type"text/javascript"gt function
myFunction() return ("Hello, have a nice
day!") lt/scriptgt lt/headgt ltbodygt ltpgtThe script
in the body section calls a function.lt/pgt ltpgtThe
function returns a text.lt/pgt ltscript
type"text/javascript"gt document.write(myFunction
()) lt/scriptgt lt/bodygt lt/htmlgt
Functions
41
Functions
Output to browser window
The script in the body section calls a
function. The function returns a text. Hello,
have a nice day!
42
Functions
Parameters-
function Calculate( miles ) return (miles
6)
43
Functions

• Built-in functions
• eval( str )
• parseFloat( str )
• parseInt( str, radix )
• unEscape( str )

44
Events
JavaScript and a few other script based
languages could be described as event driven.
Events are built into the HTML code, not within
script tags.
Multiple events can be active
ltINPUT TYPE"text" size"30"
onFocus"window.status'Enter name'"
onBlur"window.status''" onChange"alert('Na
me has been changed.')"gt
45
Events
OnClick Triggered when the user clicks the
appropriate object or control. OnMouseOver
Event occurs when the user positions the mouse
pointer over the appropriate object or
control. OnDblClick Happens when a user double
clicks the appropriate object or control. OnLoad
Occurs when a document object or controls are
loaded in the current page.
Also OnBlur, OnChange, OnFocus,
OnMouseOut, OnSelect,OnSubmit, OnUnload
46
lthtmlgt ltheadgt ltscript type"text/javascript"gt
function myfunction()
alert("HELLO") lt/scriptgtlt/headgtltbodygt ltfo
rmgt ltinput type"button" onclick"myfunction()"
value"Call function"gtlt/formgt ltpgtBy pressing the
button, a function will be called. The function
will alert a message.lt/pgt lt/bodygtlt/htmlgt
Events Functions
47
Example 1
ltHTMLgt ltHEADgt ltSCRIPT LANGUAGE"JavaScript"gt lt!--
hide script contents from old browsers function
square(number) document.write("The call
passed ", number, // the
function's parameter " to
the function.ltBRgt", number,
// the function's parameter
" squared is ", number
number, ".ltBRgt") square(3)
// end hiding contents from old browsers
--gt lt/SCRIPTgt lt/HEADgt ltBODYgt lt/BODYgt lt/HTMLgt
48
ltHTMLgt ltHEADgt ltTITLEgtCalling a function from
within another functionlt/TITLEgt ltSCRIPT
LANGUAGE"JavaScript"gt lt!-- hide script contents
from old browsers function makeBar() var
output "ltHR ALIGN'left' WIDTH400gt" document.w
rite(output) function makeHeader(text, color,
size) var output "ltFONT COLOR'" color
"' SIZE" size "gt" text
"lt/FONTgt" document.write(output) makeBar() m
akeHeader("JavaScript Examples", "red", "4") //
end hiding contents from old browsers
--gt lt/SCRIPTgt lt/HEADgt ltBODYgt lt/BODYgt lt/HTMLgt
Example 2
49
Example 3
ltHTMLgt ltHEADgt ltTITLEgtA simple if
statementlt/TITLEgt ltSCRIPT LANGUAGE"JavaScript"gt lt
!-- var age parseInt(prompt("Please enter your
age", 15)) if (age lt 21) alert("Sorry, you are
too young to enter") // --gt lt/SCRIPTgt lt/HEADgt ltBOD
Ygt lt/BODYgt lt/HTMLgt
50
Example 4
ltHTMLgt ltHEADgt ltTITLEgtimageslt/TITLEgt ltSCRIPT
LANGUAGE"JavaScript"gt lt!-- function
swapImages(a, b) var asource
document.imagesa.src document.imagesa.src
document.imagesb.src document.imagesb.src
asource // --gt lt/SCRIPTgt lt/HEADgt ltBODYgt ltIMG
SRC"comp1.gif" HEIGHT60 WIDTH70gt ltIMG
SRC"comp2.gif" HEIGHT60 WIDTH70gtltPgt ltFORMgt ltINP
UT TYPE"button" VALUE"swap" onClick"swapImages(
0, 1)"gt lt/FORMgt lt/BODYgt lt/HTMLgt
51
Example 5
ltHTMLgt ltHEADgt ltTITLEgtHello / Goodbyelt/TITLEgt lt/HEA
Dgt ltBODY onLoad"alert('Hello')"
onUnLoad"alert('Goodbye')"gt lt/BODYgt lt/HTMLgt
52
Summary

• Why we need dynamic web pages
• How client-side programming fits in
• Introduced to JavaScript, an object-based
  interpreted language
• Basic format of a program
• Variables and arrays
• Operators and maths
• Sequence, repetition, selection
• Functions
• Events

Next More JavaScript objects, DOM and graphics