1. JavaScript - A Web Script Language Fred Durao fred@cs.aau.dk

2. Overview of JavaScript JavaScript is primarily used in the client-side, implemented as part of a web browser in order to provide enhanced user interfaces and dynamic websites. - Originally developed by Netscape and Sun in 1995; - We’ll call collections of JavaScript code scripts, not programs; The primary use of JavaScript is to write functions that are embedded in or included from HTML pages.

3. Examples of JavaScript (2) Some simple examples of this usage are: Validating input values of a web form to make sure that they are acceptable before being submitted to the server. EXAMPLE: http://www.javascript-coder.com/html-form/javascript-form-validation- example.html Opening or popping up a new window with programmatic control over the size, position, and attributes of the new window. EXAMPLE: http://www.tizag.com/javascriptT/javascriptpopups.phphttp://www.tizag.com/javascriptT/javascriptpopups.php Changing images as the mouse cursor moves over them: This effect is often used to draw the user's attention to important links displayed as graphical elements. EXAMPLE: http://www.w3schools.com/js/tryit.asp?filename=tryjs_animationhttp://www.w3schools.com/js/tryit.asp?filename=tryjs_animation

4. General Syntactic Characteristics JavaScript scripts ARE embedded in HTML documents in the HEAD of HTML. - Either directly, as in -- JavaScript script code– - Or indirectly, as a file specified in the src attribute of, as in - Scripts are usually hidden (i.e. have no effect) by putting them in special comments <!-- -- 

5. Screen Output & Keyboard Input - The JavaScript model for the HTML document is the Document object - The model for the browser display window is the Window object - The Window object has two properties, document and window, which refer to the Document and Window objects, respectively - The Document object has a method, write, which dynamically creates content e.g., document.write("Answer: " + result + " "); - The parameter is sent to the browser, so it can be anything that can appear in an HTML document (, but not \n ) - The Window object has three methods for creating dialog boxes, alert, confirm, and prompt

6. Screen Output (continued) 1. alert("Hej! \n"); - Opens a dialog box which displays the parameter string and an OK button - It waits for the user to press the OK button 2. confirm("Do you want to continue?"); - Opens a dialog box and displays the parameter and two buttons, OK and Cancel 3. prompt("What is your name?", ""); - Opens a dialog box and displays its string parameter, along with a text box and two buttons, OK and Cancel Examples: http://www.w3schools.com/js/js_examples.asphttp://www.w3schools.com/js/js_examples.asp

7. Functions A function contains java script code that will be executed by an event or by a call to the function. In general, we place all functions in the head of the the XHTML document Functions are declared as such: function function_name ( parameter1, parameter2, … ) { -- java script code – } OBS: parameters are optional! EXAMPLE: function display_Message(){ alert("Hello World!"); }

8. Calling Functions A functions are called from event attributes in HTML tags. EXAMPLE: function display_Message(){ alert("Hello World!"); } Example: http://www.w3schools.com/js/tryit.asp?filename=tryjs_function1

9. Calling Functions from HTML Event Attributes HTML added the ability to let events trigger actions in a browser, like starting a JavaScript when a user clicks on an element. EXAMPLE FOR MOUSE EVENTS: See complete list at: http://www.w3schools.com/tags/ref_eventattributes.asp

10. Javascript Reference Tutorial: http://www.w3schools.com/js/default.asp Examples: http://www.w3schools.com/js/js_examples.asp Validation: http://www.w3schools.com/js/js_form_validation.asp