JavaScript
advertisement
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.
- 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-validationexample.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
