Alert Box - WordPress.com

Transcript Alert Box - WordPress.com

In the Name of Allah ,The Most Gracious,
The Most Merciful
King Khalid University
College of Computer and Information System
Web pages Development & Programming
Chapter 5: JavaScript (js)
Alaa Alwabel - 2011
Company
LOGO
1
What is Javascript?
 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 into
HTML pages
2
What Can JavaScript do?
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.
3
Example
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
4
Handling browsers that do not
support JavaScript
•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">

</script>
5
Where to Put the
JavaScript
Where to
Put the
JavaScript
Head
section
body
section
External
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
Operator
Arithmetic
Operator
Comparison
Operator
Logical
Operator
Addition
+
Subtraction
-
Multiplication
*
Division
/
and
&&
is equal to
==
or
||
is not equal
=!
not
!
is greater than
>
is less than
<
10
Popup Boxes
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")
11
Alert Boxes
<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
12
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
<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
14
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
<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
16
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
<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>
 The onload
andonUnload
events are
triggered when
the user enters
or leaves the
page.
<body onload="Hello();" onunload="Goodbye();">
<p>Whatever text appears in the page.</p>
</body>
</html>
18
onMouseOver and
onMouseOut
<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
19
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