introduction to javascript. javascript facts a scripting language - not compiled but interpreted...
TRANSCRIPT
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
ProgrammingEnvironment
• Mainly between <head> tags, script itself must be contained within <script> tag e.g:
<head><title>Example</title><script type="text/javascript">//code goes here</script></head>
ProgrammingEnvironment
• Also in object tags e.g:
<form><input type="button" value="Click Me" onclick="doIt();"></form>
ProgrammingEnvironment
• 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:
<head><script src=“myJavaScript.js”></head>
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 emailed 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 <form> 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
• HyperlinksClicking 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<form><input type="button" value="Click here!" onclick="alert('Hello World!');"></form>
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.
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 statements end with a
semicolon ;
JavaScript EventHandlers
<tag attributes eventHandler="JavaScript Code;">
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 <body> tag and can also be placed in the <image> 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.
<body onload="alert('Greetings!');">
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 <form> 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 email 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 databasee.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="http://www.eg.com/eg.asp">
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.
<head><script type="text/javascript">
function checkall(theFormName){ if (theFormName.Surname.value == "")
{ alert("You must enter a surname"); return (false);}
}
</script ></head>
Make sure you use ==
If you write a function in the <head> 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.
<form method = " post " onsubmit = "return checkall(this);" action= " CustomerUpdate.asp" >
<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:
– Email validation:
if (theFormName.email.value.indexOf(‘@’,1)== -1)
{
alert("You must enter a proper email address");
return (false);
}
Checking for @ starting at the second character. If result is -1 then that means there is no @ 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