javascript - a web script language fred durao [email protected]
TRANSCRIPT
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.
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
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> --
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
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
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:
<html><head>
<script type="text/javascript">function display_Message(){ alert("Hello World!");}
</script></head>
</html>
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
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
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