Scribd
Upload
108 views

Javascript

Javascript

Uploaded by

meteoro313
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
108 views

Javascript

Javascript

Uploaded by

meteoro313
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 16

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
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

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">
document.write('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">
document.write('<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="myfile.html">My Page</a>
<br />
<a href="myfile.html"
onMouseover="window.alert('Hello');">
My Page</A>
</p>
JavaScript written
An Event
</body>
inside HTML
</html>

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)

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

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
Remember in the workbook denotes a
continuing line
Be patient

Presentation slides adapted from scom.hud.ac.uk/scomsjw/Web%20Authoring%20Module/Lecture%20Slides/introjs.ppt

You might also like