JavaScript

kettletangibleInternet and Web Development

Feb 16, 2014 (3 years and 5 months ago)

357 views

1

JavaScript

Building interactivity into web pages

2

Web Server





Web
Browser

HTML

document

Client

Server

Request page
from server

transfer
protocol & URL

Retrieves
requested

HTML page

Transmits
page

Displays

interpretation
of page

Client
-
server Web

3

JavaScript is NOT Java



JAVA was developed by Sun Microsystems


Cross
-
platform, object oriented self
contained programming language


JAVA is suitable for embedding executable
objects within the HTML page


Embedded objects are called
applets


<APPLET> tag introduced in HTML 3.2,
depricated in HTML 4.0 in favor of <OBJECT>


4

What is JavaScript?


Simple programming language used to add
interactivity to web pages



Is case sensitive


Requires a JavaScript interpreter


Client
-
side JavaScript (IE, Netscape, Opera)


Server side JavaScript (web server executing
JavaScript, including ability to compile code for
faster performance)


Stand alone JavaScript (stand alone PC with
JavaScript interpreter)

5

How did JavaScript come about?


Developed as Live Script 1.0 by Netscape


When JAVA became popular, name was
changed to JavaScript


Microsoft’s version: JScript



European Computer Manufacturing
Association (ECMA) defined JavaScript
standards in July 1997

6

Client
-
side JavaScript functionality


Put message in browser status bar


Open new windows and display alert boxes


Change page contents to react to events


Assure valid data entry in forms


Highlight buttons with rollovers


Generate clocks, calendars and time stamps





7

Client
-
side JavaScript
Placement










<HTML>

<HEAD>

<TITLE>
A skeletal HTML template
</TITLE>

</HEAD>

<BODY>

<H1>The Primary Heading</H1>

<P>The first paragraph starts here. The paragraph

tag will cause a double
-
spaced line to appear.


Explicit line breaks are ignored, so this

is still part of the previous paragraph.</P>

<P>A short, new paragraph starts.</P>

</BODY>

</HTML>

8

Scripts and non
-
supporting
browsers



Hide script code inside HTML comment


Add <NOSCRIPT> with alternate instructions


<SCRIPT TYPE=“text/javascript”>

<!
--

the hidden script code


... goes here

// end hiding
--
>

</SCRIPT>

<NOSCRIPT TYPE=“text/javascript”>

Your browser does not support client
-
side JavaScript, so
this page will not work correctly. You can use pages that

don’t require scripting by going to

<A HREF=“noscriptpage.htm”>

My No Script Page.</A>

</NOSCRIPT>

9

Programming in JavaScript


Objects: Person, place or thing


Properties: attributes of objects


Methods: Predefined function of an
object


Events: User or system action


10

What it handles


onAbort


User aborted loading page


onBlur


User left the object


onChange


User changed the object


onClick


User clicked on object


onDblClick


User double
-
clicked on object


onError


Script encountered an error


onFocus


User made an object active


onKeyDown


Key was pressed down


onKeyPress


Key was pressed and released


onKeyUp


Key was released after pressing


onLoad


Page (all frames) finished loading


onMouseDown Mouse button pressed down on object


onMouseMove Mouse is moving over an object


onMouseOut Mouse moved off an object


onMouseOver Mouse moved over an object


onMouseUp


Mouse button is released on object


onReset


Form was reset


onSelect


User selected the contents


onSubmit


User submitted a form


onUnload


User left the window

Event


11

Object Notation


Object.property represents a value


Examples


window.status = “New location is “ + NewAddr


If (document.images.name == “MyDocument”) …


Object.method() represents processing


Example


document.write(“The current date and time is” + Now)

12

Adding Comments


Multi
-
line comment


/* Comment goes here




and here




and here */



Single
-
line comment


// Comment goes here



13

The Famous ‘Hello, world!’

14

‘Hello, world!’ via Alert

15

Functions


A set of JavaScript statements that perform a
specific task


Every function has a unique name


Defining a function

Function FunctionName [ list of arguments]


{



\
\

function’s processing steps


}


Calling/Invoking a function

X = FunctionName (value/argument list)

Where X
-
an object’s property or variable

16

Hello World via Function

17

Function Example