Introduction to JavaScript
Introduction
What
is it?
How does it work?
What is Java?
Learning JavaScript
JavaScript
Statements
JavaScript and HTML forms
What is JavaScript?
Browsers
Text,
have limited functionality
images, tables, frames
JavaScript
allows for interactivity
Browser/page manipulation
Reacting
A type
to user actions
of programming language
Easy
to learn
Developed by Netscape
Now a standard exists
[Link]/publications/
standards/[Link]
JavaScript Allows Interactivity
Improve
appearance
Especially
graphics
Visual feedback
Site
navigation
Perform calculations
Validation of input
Other technologies
[Link]
How Does It Work?
Embedded
View
source
Executes
Fast,
within HTML page
on client
no connection needed once loaded
Simple
programming statements combined with
HTML tags
Interpreted (not compiled)
No special tools required
What is Java?
Totally
different
A full programming language
Much harder!
A compiled language
Independent of the web
Sometimes used together
Learning JavaScript
Special
syntax to learn
Learn the basics and then use other people's
(lots of free sites)
Write it in a text editor, view results in browser
You need to revise your HTML
You need patience and good eyesight!
JavaScript Statements
<html>
<head><title>My Page</title></head>
<body>
<script language="JavaScript">
[Link]('This is my first
JavaScript Page');
</script>
</body>
</html>
Note the symbol for
line continuation
JavaScript Statements
<html>
<head><title>My Page</title></head>
<body>
<script language=JavaScript">
[Link]('<h1>This is my first
JavaScript Page</h1>');
</script>
</body>
</html>
HTML written
inside JavaScript
JavaScript Statements
<html>
<head><title>My Page</title></head>
<body>
<p>
<a href="[Link]">My Page</a>
<br />
<a href="[Link]"
onMouseover="[Link]('Hello');">
My Page</A>
</p>
JavaScript written
An Event
</body>
inside HTML
</html>
Example Statements
<script language="JavaScript">
[Link]('Enter your name:','');
</script>
Another event
<form>
<input type="button" Value="Press"
onClick="[Link]('Hello');">
</form>
Note quotes: " and '
HTML Forms and JavaScript
JavaScript
is very good at processing user input
in the web browser
HTML <form> elements receive input
Forms and form elements have unique names
Each
unique element can be identified
Uses JavaScript Document Object Model (DOM)
Naming Form Elements in HTML
<form name="addressform">
Name: <input name="yourname"><br />
Phone: <input name="phone"><br />
Email: <input name="email"><br />
</form>
Forms and JavaScript
[Link]
Thus:
[Link]
[Link]
[Link]
Using Form Data
Personalising an alert box
<form name="alertform">
Enter your name:
<input type="text" name="yourname">
<input type="button" value= "Go"
onClick="[Link]('Hello ' +
[Link]);">
</form>
Tips
Check
your statements are on one line
Check your " and ' quotes match
Take care with capitalisation
Lay it out neatly - use tabs
Remember in the workbook denotes a
continuing line
Be patient
Presentation slides adapted from [Link]/scomsjw/Web%20Authoring%20Module/Lecture%20Slides/[Link]
