JavaScript

Teppo Räisänen

LIIKE/OAMK 2011

HTML, CSS, JavaScript

HTML defines the structure CSS defines the layout JavaScript is used for scripting

It adds functionality and interaction, and improves usability

General Information

JavaScript (JS) is a programming language for interactie Web pages Mouse event based functionalities Input validation Dynamic menus

JS is especially good for validating form input

General Information

HTML does not provide means for input validation

Validation on server side (PHP…) is possible but slower (Why?)

There are plenty of available scripts for different kinds of validation processes

JavaScript - Basics

JS scripts are usually executed on the client-side

The scripts are usually rather simple and small-scaled programs

The execution of the scripts is based on runtime interpreting

JavaScript - Basics JS is a fully-scaled programming

language: functions control structures string processing

The inbuilt functionalities of the JS have been specialized for control of a browser

JavaScript & HTML

JS script can be embedded into a HTML page by including scripting section into the

head element writing the script part into an .js file

and including the file into the page including the script into the definition

of an HTML element

Example 1

Automatic focus to a form field Without the script the user must point

the mouse to the form field The script is executed when the body

of the page is loaded The script will improve the usability of

the page

Example 2

Validation of an email field Validation on the client side is faster

than server side validation onsubmit-value is defined in the

beginning tag of the form -> Validation happens when the form is being submitted

The function will recieve the HTML form as a parameter

Compatibility

There are some issues with compatibility

Check http://www.quirksmode.org/dom/events/

HTML DOM

DOM Document Object Model http://www.w3schools.com/htmldom/default.asp

JavaScript can access HTML elements trough DOM

In JavaScript: var object =

document.getElementById(”elementId”); object.value = ”interesting”;