CSC 1020
Introduction to JavaScript
Introduction to JavaScript
Introduction
What is it?
How does it work?
What is Java?
Learning JavaScript
JavaScript Statements
JavaScript and HTML forms
1
CSC 1020
Introduction to JavaScript
What is JavaScript?
Browsers have limited functionality
Text, images, tables, frames
JavaScript allows for interactivity
Browser/page manipulation
Reacting to user actions
A type of programming language
Easy to learn
Developed by Netscape
Now a standard exists –
www.ecma-international.org/publications/
standards/ECMA-262.HTM
JavaScript Allows Interactivity
Improve appearance
Especially graphics
Visual feedback
Site navigation
Perform calculations
Validation of input
Other technologies
javascript.internet.com
2
CSC 1020
Introduction to JavaScript
How Does It Work?
Embedded within HTML page
View source
Executes on client
Fast, 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
3
CSC 1020
Introduction to JavaScript
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 1</title></head>
<body>
<script language="JavaScript">
document.write('This is my first
JavaScript Page');
</script> Note the symbol for
</body> line continuation
</html>
4
CSC 1020
Introduction to JavaScript
JavaScript Statements
<html>
<head><title>My Page</title></head>
<body>
<script language=“JavaScript">
document.write('<h1>This is my first
JavaScript Page</h1>');
</script>
HTML written
</body> inside JavaScript
</html>
JavaScript Statements
<html>
<head><title>My Page</title></head>
<body>
<p>
<a href="myfile.html">My Page</a>
<br />
<a href="myfile.html"
onMouseover="window.alert('Hello');">
My Page</A>
</p>
An Event JavaScript written
</body> inside HTML
</html>
5
CSC 1020
Introduction to JavaScript
Example Statements
<script language="JavaScript">
window.prompt('Enter your name:','');
</script> Another event
<form>
<input type="button" Value="Press"
onClick="window.alert('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)
6
CSC 1020
Introduction to JavaScript
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
document.formname.elementname.value
Thus:
document.addressform.yourname.value
document.addressform.phone.value
document.addressform.email.value
7
CSC 1020
Introduction to JavaScript
Using Form Data
Personalising an alert box
<form name="alertform">
Enter your name:
<input type="text" name="yourname">
<input type="button" value= "Go"
onClick="window.alert('Hello ' +
document.alertform.yourname.value);">
</form>
Tips
Check your statements are on one line
Check your " and ' quotes match
Take care with capitalisation
Lay it out neatly - use tabs
Be patient
Presentation slides adapted from scom.hud.ac.uk/scomsjw/Web%20Authoring%20Module/Lecture%20Slides/introjs.ppt
