Scribd
Upload
51 views

Javascript Presentation

JavaScript allows dynamic interactivity on web pages. It runs in web browsers and can modify HTML content, react to user input, and perform calculations. JavaScript is not the same as Java - it is a scripting language that interacts with HTML pages on the client-side, while Java is a full programming language that runs on the server-side. The document provides examples of how JavaScript statements can be embedded in HTML to add interactivity, such as responding to mouse events or form submissions.

Uploaded by

Puneet Sharma
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
51 views

Javascript Presentation

JavaScript allows dynamic interactivity on web pages. It runs in web browsers and can modify HTML content, react to user input, and perform calculations. JavaScript is not the same as Java - it is a scripting language that interacts with HTML pages on the client-side, while Java is a full programming language that runs on the server-side. The document provides examples of how JavaScript statements can be embedded in HTML to add interactivity, such as responding to mouse events or form submissions.

Uploaded by

Puneet Sharma
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 19

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
 JavaScript ≠ Java
 Purpose: to Create Dynamic websites
 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
CLIENT

Web Server Servlet Engine

HTML
XML
CSS
MySql
JavaScript
JSP/Servlets
JQuery
C# etc..

Client side Data Source Server side


JavaScript Allows Interactivity
 Improve appearance
 Especially graphics
 Visual feedback
 Site navigation
 Perform calculations
 Validation of input
 Other technologies

javascript.internet.com
What is it used for today?
 Handling User Interaction
 Doing small calculations
 Checking for accuracy and appropriateness of data
entry from forms.
 Doing small calculations/manipulations of forms
input data
 Save data as cookie so it is there upon visiting the
page
 Generating Dynamic HTML documents
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
JavaScript Statements
<html>
<head><title>My Page</title></head>
<body>
<script language="JavaScript">

document.write('This is my first
JavaScript Page');

</script>
</body>
</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
 You can use event handlers, such as onChange
and onClick, to make your script react to events.
 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
Some key points
 Every element is associated with the ID. ID is
used to access that object on the HTML page.
And document.getElementById(“element_name”)
will give you the power to access that element on
the page. Now you are just one step away from
altering/modifying the HTML page.
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
Thank you

You might also like