Introduction to JavaScript

JavaScript Facts A scripting language - not compiled but interpreted line by line at run-time. Platform independent. It is NOT the same as Java. Object-oriented. Event-driven Beware: implementation varies according to browser. Can be run “Client-Side” or “Server-Side”.

Why is JavaScript so cool? JavaScript has many uses including: –Adding interactivity and novelty to pages (games, animations, user preferences) –Giving the web developer more control over presentation and appearance of pages –Validating data input through forms –Creating and controlling windows –Interface with databases –Feedback to users (alert) and cookies

Programming Environment Mainly between tags, script itself must be contained within tag e.g: Example //code goes here

Programming Environment Also in object tags e.g:

Programming Environment JavaScript can also be shared across web pages by saving the code in a separate file and referring to it as shown. This is very handy for building up libraries of functions:

Inputs & Outputs Programs are most often required to do two things: –Run through a routine set of operations e.g. batch processing. –Interact with the user in some way often outputting a result on screen. You will be using client-side JavaScript for the latter.

Inputs & Outputs There are several ways that the user can input information and that your program can output it. These can be divided into roughly 3 categories: Forms Windows HTML

Form Inputs –Text Boxes –Text Areas –Button Clicks –Check Boxes –Radio Buttons –Select List

Form Inputs Normally the purpose of forms is to collect data which is to be ed to someone or sent to a database via the submit() function. In order to use the methods of input just discussed it is always necessary to enclose the code in tags even when there is no interaction with the web server (i.e. all the processing is done client-side).

Window Inputs window.prompt() displays a text box and a cancel button for gathering input. window.confirm() this has 2 buttons - OK or Cancel.

HTML Inputs Hyperlinks Clicking on a hyperlink itself is a method of interacting with a web page and may trigger an event, whether the hyperlink is an image or is text-based.

Outputs Without reloading the page: –window.alert() which displays a message and has an OK button. –Text displayed in a text box or text area. –Swapping one image for another. –Messages in the status bar.

Outputs Which require reloading the page: –document.write() a function which writes HTML directly into a page on the fly, usually when the document is first loaded. This way you can include dynamic content, such as User name, the time or date etc.

Simple JavaScript Examples <input type="button" value="Click here!" onclick="alert('Hello World!');"> Here the alert() function is used inside an event handler - onclick. When the button is clicked, the piece of code is executed causing the alert box to be shown. Code using these event handlers must be written inside double quotation marks. JavaScript statements end with a semicolon ;

JavaScript Event Handlers So far we have seen the onClick event handler in action, providing a response to clicking a button, but there are many others. Handlers are a programmed response to a specific event - such as loading the document, or a user changing the text in a text box.

onload and onunload Certain events are associated with certain elements only. For example the onload and onunload event handlers reside in the tag and can also be placed in the tag but cannot but used elsewhere. These event handlers are useful if you want something to happen when a web page is opened or closed.

Event Handlers onblur - When focus is taken away from a form element (e.g. the user clicks elsewhere or presses the tab key). Works with text inputs and select lists. onchange - Works when the focus is taken away from a form element and the contents have been changed (e.g. a text box). onclick - Responds to the user clicking on a button or a hyperlink. onfocus - When focus moves to a form element.

Event Handlers onload, onunload - As per previous slide. onmouseover - When the mouse points at a hyperlink. onselect - When the user selects something in a form element. onsubmit - Used in the tag and executed when the form is submitted. and lots more… It is possible to use several handlers in one tag and to have more than one event that happens when the event is triggered.

Validation and Error Prevention Don't allow users to enter inappropriate information into form elements - this prevents errors at the database end. GIGO – Garbage In Garbage Out

Validation Many types: –Existence: can the data be null? –Syntactic: does this look like an address –Range: age between 18 and 120 –Type: Is it a number or an integer –Domain: special constrained type of type e.g. Mr|Mrs|Ms or Standard|Emergency –Rule Based: collections of interdependent business rules

 Generally, the less error checking done on the server the better. This minimises traffic.  You must use server side checking when you need to interrogate the database e.g. to check if a record already exists  However, if traffic considerations are not important then do all the error checking at the server. Client-Side or Server-Side?

Client Side Error Prevention Use JavaScript to prevent simple errors e.g. not entering required data or entering wrong type of data in text boxes Use list boxes if possible to restrict range of input Give examples to the user and clear instructions

Error Prevention <form method = "post" onsubmit="return checkall(this);" action=" Error checking is best done at client side by calling a function from the form's onsubmit event handler.

What is a Function? A function is a piece of code which returns a value to the calling program. The program can then act accordingly. Data can be passed to the function in the form of a parameter or argument.

function checkall(theFormName) { if (theFormName.Surname.value == "") { alert("You must enter a surname"); return (false); } Make sure you use ==

If you write a function in the part of the HTML document which returns true the form will be submitted, if the function returns false, the form will not submit. This effectively prevents the data being sent to the ASP document in the first place.

<input type="Submit" value="Submit" name=“btnSubmit"> The other bits …. Note the parameter “this” passes the name of the form to the function

Further validation Example of type validation: –To check to see whether it is a number use isNaN method (is not a number method) –And to combine different conditions use the OR operator: ||

Further validation Example of format validation: – validation: if -1) { alert("You must enter a proper address"); return (false); } Checking starting at the second character. If result is -1 then that means there is in the address

JavaScript Variables As with algebra, JavaScript variables can be used to hold values (x=5) or expressions (z=x+y). Variable can have short names (like x and y) or more descriptive names (age, sum, totalvolume). Variable names must begin with a letter Variable names can also begin with $ and _ (but we will not use it) Variable names are case sensitive (y and Y are different variables)

JavaScript Data Types JavaScript variables can also hold other types of data, like text values (name="John Doe"). In JavaScript a text like "John Doe" is called a string. There are many types of JavaScript variables, but for now, just think of numbers and strings. When you assign a text value to a variable, put double or single quotes around the value. When you assign a numeric value to a variable, do not put quotes around the value. If you put quotes around a numeric value, it will be treated as text.

Declaring (Creating) JavaScript Variables Creating a variable in JavaScript is most often referred to as "declaring" a variable. You declare JavaScript variables with the var keyword: var carname; carname="Volvo"; var carname="Volvo";

Validation Exercise Demo Lab exercise