Company
LOGO
In the Name of Allah ,The Most Gracious,
The Most Merciful
King Khalid UniversityCollege of Computer and
Information System
Web pages Development & Programming
Alaa Alwabel - 2011
Chapter 5: JavaScript (js)
1
What is Javascript?
2
JavaScript was designed to add interactivity to HTML pages.
JavaScript is a scripting language: A scripting language is a lightweight programming language.
JavaScript is usually embedded directly intoHTML pages
What Can JavaScript do?
3
1. JavaScript gives HTML designers a programming tool.
2. JavaScript can react to events.
3. JavaScript can read and write HTML elements.
4. JavaScript can be used to detect the visitor's browser.
5. JavaScript can be used to create cookies.
Example
4
html><head><title>JavaScript Page</title></head><body><script type="text/javascript">document.write("<p>Hello world!</p>");document.write(" <p>How are <br/> " +" <i>you</i>?</p> ");</script><p>Here is some static text as well.</p></body></html>
javascript.html
Handling browsers that do not support JavaScript
5
•Browsers that do not support JavaScript will display the script as page content. To prevent them from doing this, we may use the HTML comment tag:
<script type="text/javascript"> <!-- document.write("Hello World!") //--> </script>
Where to Put the JavaScript
6
Variables and If…Else Statement
Variables are used to store data. Declare a Variable You can create a variable with the var statement: var strname = some value You can also create a variable without the var statement: strname = some value
Example: var name=“Reem”
or name =“ Reem”
Example2: var x=5
or x=5
7
Conditional Statements
In JavaScript we have the following conditional statements:
if statement - use this statement if you want to execute some code only if a specified condition is true
if...else statement - use this statement if you want to execute some code if the condition is true and another code if the condition is false
if...else if....else statement - use this statement if you want to select one of many blocks of code to be executed.
8
If…..else Statement
If you want to execute some code if a condition is true and another code if the condition is not true, use the
if....else statement.
Syntax: if (condition)
{ code to be executed if condition is true }
Note: When comparing variables you must always use two equals signs next to each other (==)!
9
Operator
10
Addition+
Subtraction-
Multiplication*
Division/
and&&
or||
not!
is equal to==
is not equal=!
is greater than<
is less than>
Popup Boxes
11
Alert Box•An alert box is often used if you want to make sure information comes through to the user.
•When an alert box pops up, the user will have to click "OK" to proceed.
Syntax:alert("sometext")
Alert Boxes
12
<html> <head> <script type="text/javascript"> function disp_alert() { alert("I am an alert box!!") } </script> </head> <body> <form action=""> <div> <input type="button" onclick="disp_alert()" value="Display alert box" /> </div> </form> </body> </html
javascript.html
Confirm Box
Confirm Box A confirm box is often used if you want the user
to verify or accept something. When a confirm box pops up, the user will have
to click either "OK" or "Cancel" to proceed. If the user clicks "OK", the box returns true. If the
user clicks "Cancel", the box returns false. Syntax: confirm("sometext")
13
Confirm Box
14
<html> <head> <script type="text/javascript"> function disp_confirm() { var r=confirm("Press a button") if (r==true) { document.write("You pressed OK!") } else { document.write("You pressed Cancel!") } } </script> </head> <body> <form action=""> <div> <input type="button" onclick="disp_confirm()" value="Display confirm box" /> </div> </form> </body> </html
javascript.html
Prompt Box
prompt box is often used if you want the user to input a value before entering a page.
When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value.
If the user clicks "OK" the box returns the input
value. If the user clicks "Cancel" the box returns null.
15
Prompt Box
16
<html> <head> <script type="text/javascript"> function disp_prompt() { var name=prompt("Please enter your name","Harry Potter") if (name!=null && name!="") { document.write("Hello " + name + "! How are you today?") } } </script> </head> <body> <form action=""> <div> <input type="button" onclick="disp_prompt()" value="Display prompt box" /> </div> </form> </body> </html javascript.html
JavaScript Events
By using JavaScript, we have the ability to create dynamic web pages. Events are actions that can be detected by JavaScript.
Examples of events: A mouse click A web page or an image loading Mousing over a hot spot on the web page
Note: Events are normally used in combination with functions, and the function will not be executed before the event occurs!
17
onload and onUnload
The onload andonUnload events are triggered when the user enters or leaves the page.
18
<html> <head> <title>Hello/Goodbye page</title>
<script type="text/javascript"> function Hello() { globalName=prompt("Welcome to my page. " + "What is your name?",""); }
function Goodbye() { alert("So long, " + globalName + " come back real soon."); } </script> </head>
<body onload="Hello();" onunload="Goodbye();"> <p>Whatever text appears in the page.</p> </body></html>
onMouseOver and onMouseOut
19
<html> <head>
</head> <body> <a href="http://www.w3schools.com" onmouseover="alert('An onMouseOver event');"> <img src="w3schools.gif" width="100" height="30"> </a> </body> </html>
javascript.html
Js- Guideline
JavaScript is case sensitive JavaScript ignores extra spaces You can add comments to your script by
using two slashes //. break up a code line within a text string
with a backslash Ex. document.write("Hello \
World!")
20
