1 / 10

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

JavaScript - A Web Script Language Fred Durao fred@cs.aau.dk. 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 .

dorie
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

  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 + "<br />"); - The parameter is sent to the browser, so it can be anything that can appear in an HTML document (<br />, 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.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: • functionfunction_name(parameter1, parameter2, …) { • -- java script code – • } • OBS: parameters are optional! • EXAMPLE: • <html> • <head> • <script type="text/javascript"> • function display_Message(){ • alert("Hello World!"); • } • </script> • </head> • </html>

  8. Calling Functions • A functions are called from event attributes in HTML tags. • EXAMPLE: • <html> • <head> • <script type="text/javascript"> • function display_Message(){ • alert("Hello World!"); • } • </script> • </head> • <body> • <form> • <input type="button" value="Click me!" onclick="display_Message()" /> • </form> • </body> • </html> 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

More Related