Scribd
Upload
45 views

Javascript Intro1

This document provides an introduction to JavaScript, including: - What JavaScript is and how it allows for interactivity on web pages - How JavaScript code is embedded in HTML and executed in the browser - The basics of JavaScript statements and how they can manipulate HTML elements and respond to user events - How JavaScript can be used to process user input from HTML forms by accessing the form elements and their values - Tips for writing JavaScript such as checking syntax and formatting code clearly

Uploaded by

Haqqie Deimon
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
45 views

Javascript Intro1

This document provides an introduction to JavaScript, including: - What JavaScript is and how it allows for interactivity on web pages - How JavaScript code is embedded in HTML and executed in the browser - The basics of JavaScript statements and how they can manipulate HTML elements and respond to user events - How JavaScript can be used to process user input from HTML forms by accessing the form elements and their values - Tips for writing JavaScript such as checking syntax and formatting code clearly

Uploaded by

Haqqie Deimon
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

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

You might also like