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 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

HTML DOM DOM Document Object Model JavaScript can access HTML elements trough DOM In JavaScript: var object = document.getElementById(”elementId”); object.value = ”interesting”;