1. JavaScript Teppo Räisänen LIIKE/OAMK 2011

2. HTML, CSS, JavaScript HTML defines the structure CSS defines the layout JavaScript is used for scripting It adds functionality and interaction, and improves usability

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

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

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

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

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

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

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

10. Compatibility There are some issues with compatibility Check http://www.quirksmode.org/dom/events/

11. 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”;