JAVASCRIPT
Overview
2
¨ Introduction to JavaScript
¨ The JavaScript Language
¨ Global DOM Objects (Browser)
¨ The DOM Tree model
¨ Unobtrusive JavaScript
3 Introduction to JavaScript
Client Side Scripting
4
Why use client-side programming?
5
Any server side programming language allows us to
create dynamic web pages. Why also use client-side
scripting?
¨ client-side scripting (JavaScript) benefits:
¤ usability:can modify a page without having to post
back to the server (faster UI)
¤ efficiency: can make small, quick changes to page
without waiting for server
¤ event-driven: can respond to user actions like clicks and
key presses
CSC309
Why use Server-side programming?
6
¨ server-side programming benefits:
¤ security:has access to server's private data; client can't
see source code
¤ compatibility: not subject to browser compatibility
issues
¤ power: can write files, open connections to servers,
connect to databases, ...
CSC309
What is Javascript?
7
¨ a lightweight programming language ("scripting
language")
¤ used to make web pages interactive
¤ insert dynamic text into HTML (ex: a date)
¤ react to events (ex: user clicks on a button)
¤ get information about a user's computer (ex: browser
type)
¤ perform calculations on user's computer (ex: form
validation)
CSC309
What is Javascript?
8
¨ a web standard (but not supported identically by
all browsers)
¨ NOT related to Java other than by name and some
syntactic similarities
CSC309
Javascript vs Java
9
¨ interpreted, not compiled
¨ more relaxed syntax and rules
¤ fewer and "looser" data types
¤ variables don't need to be declared
¤ errors often silent (few exceptions)
¨ key construct is the function rather than the class
¨ contained within a web page and integrates with its
HTML/CSS content
CSC309
Linking to a JavaScript file: script
10
<script src="filename" type="text/javascript"></script>
HTML
¨ script tag should be placed in HTML page's head
¨ script code is stored in a separate .js file
¨ JS code can be placed directly in the HTML file's
body or head (like CSS)
¤ but this is bad style (should separate content,
presentation, and behavior)
CSC309
Event-driven programming
11
CSC309
A JavaScript statement: alert
12
alert("IE6 detected.");
JS
¨ a JS command that pops up a dialog box with a
message
CSC309
Event-driven programming
13
¨ you are used to programs that start with a main
method (or implicit main like in PHP)
¨ JavaScript programs instead wait for user actions
called events and respond to them
¨ event-driven programming: writing programs driven
by user events
¨ Let's write a page with a clickable button that pops
up a "Hello, World" window...
CSC309
Buttons
14
<button>Click me!</button>
HTML
¨ button's text appears inside tag; can also contain
images
¨ To make a responsive button or other UI control:
1. choose the control (e.g. button) and event (e.g. mouse
click) of interest
2. write a JavaScript function to run when the event
occurs
3. attach the function to the event on the control
CSC309
JavaScript functions
15
function name() {
statement ;
statement ;
...
statement ;
}
JS
function myFunction() {
alert("Hello!");
alert("How are you?");
}
JS
¨ the above could be the contents of [Link]
linked to our HTML page
¨ statements placed into functions can be evaluated in
response to user events