Download Introduction - Introduction to Java Script - Lecture Slides and more Slides Javascript programming in PDF only on Docsity!

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

Note the symbol for line continuation

JavaScript Statements

<script language=“JavaScript">

document.write('

This is my first 

JavaScript Page

');

HTML written inside JavaScript

JavaScript Statements

My Page
My Page

JavaScript written inside HTML An Event

Example Statements

**

Another event Note quotes: " and '

HTML Forms and JavaScript

• JavaScript is very good at processing user input in the web browser
• HTML
  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

Name:
Phone:
Email:

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

Enter your name:

<input type="button" value= "Go"

onClick="window.alert('Hello ' + 

document.alertform.yourname.value );">

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