Scribd
Upload
89 views

Introduction To Javascript

This document provides an introduction to JavaScript, including: - JavaScript allows for interactivity on web pages by reacting to user actions and manipulating the browser and page. It is embedded in HTML and executes on the client side. - JavaScript statements are combined with HTML tags and interpreted by browsers to add functionality without needing to be compiled. - The document demonstrates basic JavaScript statements, events, and how to access and use values from HTML forms with JavaScript.

Uploaded by

Lakshmi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
89 views

Introduction To Javascript

This document provides an introduction to JavaScript, including: - JavaScript allows for interactivity on web pages by reacting to user actions and manipulating the browser and page. It is embedded in HTML and executes on the client side. - JavaScript statements are combined with HTML tags and interpreted by browsers to add functionality without needing to be compiled. - The document demonstrates basic JavaScript statements, events, and how to access and use values from HTML forms with JavaScript.

Uploaded by

Lakshmi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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 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
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
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> Note the symbol for


</body> line continuation
</html>
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>
</body> An Event JavaScript written
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