Scribd
Upload
4 views

Java Script Continued

Uploaded by

kevinken254
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
4 views

Java Script Continued

Uploaded by

kevinken254
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 43

Java script

Pop up boxes
JavaScript Popup Boxes

• JavaScript has three kind of popup boxes: Alert box,


Confirm box, and Prompt box.
• 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 box example
<html>
<head>
<script type="text/javascript">
function show_alert()
{
alert("I am an alert box! Am used to ensure that info is passed
to the user before going on");
}
</script>
</head>
<body>
<input type="button" onclick="show_alert()" value="Show
alert box" />
</body>
</html>
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");
<html>
<head>
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Press a button");
if (r==true)
{
document.write("You pressed OK!");
}
else
{
document.write("You pressed Cancel!");
}
}
</script>
</head>
<body>
<input type="button" onclick="show_confirm()" value="Show confirm box" />
</body>
</html>
Prompt box
• A 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.
• Syntax
• prompt("sometext","defaultvalue");
<html>
<head>
<script type="text/javascript">
function Show_prompt()
{
var name=prompt("Please enter your name",“Your name");
if (name!=null && name!="")
{
document.write("Hello " + name + "! How are you today?");
}
}
</script>
</head>
<body>
<input type="button" onclick=“Show_prompt()" value="Show
prompt box" />
</body>
</html>
JAVASCRIPT FUNCTIONS
• A function will be executed by an event or by a call to the
function.
• JavaScript Functions
• To keep the browser from executing a script when the page
loads, you can put your script into a function.
• A function contains code that will be executed by an event or by
a call to the function.
• You may call a function from anywhere within a page (or even
from other pages if the function is embedded in an external .js
file).
• Functions can be defined both in the <head> and in the <body>
section of a document. However, to assure that a function is
read/loaded by the browser before it is called, it could be wise to
put functions in the <head> section.
How to Define a Function
• Syntax
• function functionname(var1,var2,...,varX)
{
some code
} The parameters var1, var2, etc. are variables or values passed into
the function. The { and the } defines the start and end of the
function.
• Note: A function with no parameters must include the parentheses
() after the function name.
• Note: Do not forget about the importance of capitals in JavaScript!
The word function must be written in lowercase letters, otherwise a
JavaScript error occurs! Also note that you must call a function with
the exact same capitals as in the function name.
• If the line: alert("Hello world!!") in the example above had not
been put within a function, it would have been executed as
soon as the line was loaded. Now, the script is not executed
before a user hits the input button. The function
displaymessage() will be executed if the input button is clicked.
• The return Statement
• The return statement is used to specify the value that is
returned from the function.
• So, functions that are going to return a value must use the
return statement.
• The example below returns the product of two numbers (a and
b):
Example
<html>
<head>
<script type="text/javascript">
function product(a,b)
{
return a*b;
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(product(4,3));
</script>
</body>
</html>
The Lifetime of JavaScript Variables
• If you declare a variable within a function, the
variable can only be accessed within that function.
When you exit the function, the variable is
destroyed. These variables are called local variables.
You can have local variables with the same name in
different functions, because each is recognized only
by the function in which it is declared.
• If you declare a variable outside a function, all the
functions on your page can access it. The lifetime of
these variables starts when they are declared, and
ends when the page is closed.
• <html>
<head>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!");
}
</script>
</head>

<body>
<form>
<input type="button" value="Click me!" onclick="displaymessage()" />
</form>
</body>
</html>
JavaScript For Loop

• Loops execute a block of code a specified number of times, or while a specified


condition is true.
• JavaScript Loops
• Often when you write code, you want the same block of code to run over and
over again in a row. Instead of adding several almost equal lines in a script we
can use loops to perform a task like this.
• In JavaScript, there are two different kind of loops:
• for - loops through a block of code a specified number of times
• while - loops through a block of code while a specified condition is true
• The for Loop
• The for loop is used when you know in advance how many times the script
should run.
• Syntax
• for (var=startvalue;var<=endvalue;var=var+increment)
{
code to be executed
}
• The example below defines a loop that starts
with i=0. The loop will continue to run as long
as i is less than, or equal to 5. i will increase by
1 each time the loop runs.
• Note: The increment parameter could also be
negative, and the <= could be any comparing
statement.
<html>
<body>
<script type="text/javascript">
var i=0;
for (i=0;i<=5;i++)
{
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>
• Example 2
• <html>
• <head>
• <script type="text/javascript">
• function show_prompt()
• {
• var i=0;
• for (i=0;i<=5;i++)
• {
• var name=prompt("Please enter your name","Harry Potter");
• if (name!=null && name!="")
• { document.write("Hello " + name + "! How are you today?")

• document.write("<br />");
• }
• }
• }
• </script></head><body>
• <input type="button" onclick="show_prompt()" value="Show prompt box" />
• </body>
• </html>
JavaScript While Loop
• Loops execute a block of code a specified number
of times, or while a specified condition is true.
• The while Loop
• The while loop loops through a block of code while
a specified condition is true.
• Syntax
• while (var<=endvalue)
{
code to be executed
} Note: The <= could be any comparing
statement.
Example
• The example below defines a loop that starts with i=0. The loop will
continue to run as long as i is less than, or equal to 5. i will increase by 1
each time the loop runs:
• Example
• <html>
<body>
<script type="text/javascript">
var i=0;
while (i<=5)
{
document.write("The number is " + i);
document.write("<br />");
i++;
}
</script>
</body>
</html>
The do...while Loop
•
The do...while loop is a variant of the while loop. This loop
will execute the block of code ONCE, and then it will repeat
the loop as long as the specified condition is true.
• Syntax
• do
{
code to be executed
}
while (var<=endvalue); Example
• The example below uses a do...while loop. The do...while
loop will always be executed at least once, even if the
condition is false, because the statements are executed
before the condition is tested:
Example
• <html>
<body>
<script type="text/javascript">
var i=0;
do
{
document.write("The number is " + i);
document.write("<br />");
i++;
}
while (i<=5);
</script>
</body>
</html>
JavaScript Break and Continue Statements
• The break Statement
• The break statement will break the loop and continue executing the code that follows after
the loop (if any).
• Example
• <html>
<body>
<script type="text/javascript">
var i=0;
for (i=0;i<=10;i++)
{
if (i==3)
{
break;
}
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>
JavaScript For...In Statement
• The for...in statement loops through the
elements of an array or through the properties of
an object.
• Syntax
• for (variable in object)
{
code to be executed
} Note: The code in the body of the for...in loop
is executed once for each element/property.
• Note: The variable argument can be a named
variable, an array element, or a property of an
object.
•
Example
Use the for...in statement to loop through an array:
• Example
• <html>
<body>
<script type="text/javascript">
var x;
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";
• Mycars[3]= “probox”;
• Mycars[4]= “larmboghini”;
• Mycars[5]= “hummer”;
for (x in mycars)
{
document.write(mycars[x] + "<br />");
}
</script>
</body>
</html>
JavaScript Events
• Events are actions that can be detected by JavaScript.
• Events
• By using JavaScript, we have the ability to create
dynamic web pages. Events are actions that can be
detected by JavaScript.
• Every element on a web page has certain events
which can trigger a JavaScript. For example, we can
use the onClick event of a button element to indicate
that a function will run when a user clicks on the
button. We define the events in the HTML tags.
Events
• Examples of events:
• A mouse click
• A web page or an image loading
• Mousing over a hot spot on the web page
• Selecting an input field in an HTML form
• Submitting an HTML form
• A keystroke
• Note: Events are normally used in combination with
functions, and the function will not be executed before
the event occurs!
Events
• onLoad and onUnload
• The onLoad and onUnload events are triggered when the user
enters or leaves the page.
• The onLoad event is often used to check the visitor's browser type
and browser version, and load the proper version of the web page
based on the information.
• Both the onLoad and onUnload events are also often used to deal
with cookies that should be set when a user enters or leaves a
page. For example, you could have a popup asking for the user's
name upon his first arrival to your page. The name is then stored
in a cookie. Next time the visitor arrives at your page, you could
have another popup saying something like: "Welcome John Doe!".
onFocus, onBlur and onChange
• The onFocus, onBlur and onChange events are
often used in combination with validation of
form fields.
• Below is an example of how to use the
onChange event. The checkEmail() function
will be called whenever the user changes the
content of the field:
• <input type="text" size="30" id="email"
onchange="checkEmail()">
Events
• onSubmit
• The onSubmit event is used to validate ALL form fields before
submitting it.
• Below is an example of how to use the onSubmit event. The
checkForm() function will be called when the user clicks the
submit button in the form. If the field values are not accepted,
the submit should be cancelled. The function checkForm()
returns either true or false. If it returns true the form will be
submitted, otherwise the submit will be cancelled:
• <form method="post" action="xxx.htm" onsubmit="return
checkForm()">
JavaScript Try...Catch Statement

• The try...catch statement allows you to test a block of


code for errors.
• JavaScript - Catching Errors
• When browsing Web pages on the internet, we all
have seen a JavaScript alert box telling us there is a
runtime error and asking "Do you wish to debug?".
Error message like this may be useful for developers
but not for users. When users see errors, they often
leave the Web page.
• need to catch and handle JavaScript error messages,
so you don't lose your audience.
The try...catch Statement

• The try...catch statement allows you to test a block of code for


errors. The try block contains the code to be run, and the catch
block contains the code to be executed if an error occurs.
• Syntax
• try
{
//Run some code here
}
catch(err)
{
//Handle errors here
} Note that try...catch is written in lowercase letters. Using
uppercase letters will generate a JavaScript error!
Examples
• The example below is supposed to alert
"Welcome guest!" when the button is clicked.
However, there's a typo in the message()
function. alert() is misspelled as adlert().
• A JavaScript error occurs. The catch block
catches the error and executes a custom code
to handle it. The code displays a custom error
message informing the user what happened:
• <html>
Example
<head>
<script type="text/javascript">
var txt="";
function message()
{
try
{
adlert("Welcome guest!");
}
catch(err)
{
txt="There was an error on this page.\n\n";
txt+="Error description: " + err.description + "\n\n";
txt+="Click OK to continue.\n\n";
alert(txt);
}
}
</script>
</head>

<body>
<input type="button" value="View message" onclick="message()" />
</body>

</html>
• The next example uses a confirm box
to display a custom message telling
users they can click OK to continue
viewing the page or click Cancel to go
to the homepage. If the confirm
method returns false, the user clicked
Cancel, and the code redirects the user.
If the confirm method returns true, the
code does nothing:
• <html>
<head>
<script type="text/javascript">
var txt="";
function message()
{
try
{
adddlert("Welcome guest!");
}
catch(err)
{
txt="There was an error on this page.\n\n";
txt+="Click OK to continue viewing this page,\n";
txt+="or Cancel to return to the home page.\n\n";
if(!confirm(txt))
{
document.location.href="http://www.kca.ac.ke/";
}
}
}
</script>
</head>

<body>
<input type="button" value="View message" onclick="message()" />
</body>

</html>
JavaScript Throw Statement
• The throw statement allows you to create an exception.
• The Throw Statement
• The throw statement allows you to create an exception. If you
use this statement together with the try...catch statement, you
can control program flow and generate accurate error messages.
• Syntax
• throw(exception) The exception can be a string, integer, Boolean
or an object.
• Note that throw is written in lowercase letters. Using uppercase
letters will generate a JavaScript error!
• Example
• The example below determines the value of a variable called x.
If the value of x is higher than 10, lower than 0, or not a number,
we are going to throw an error. The error is then caught by the
catch argument and the proper error message is displayed:
Example
• <html> • if(er=="Err1")
<body> {
<script type="text/javascript">
var x=prompt("Enter a number between 0 and
alert("Error! The value is too high");
10:",""); }
try if(er=="Err2")
{
if(x>10)
{
{ alert("Error! The value is too low");
throw "Err1"; }
}
else if(x<0)
if(er=="Err3")
{ {
throw "Err2"; alert("Error! The value is not a
}
else if(isNaN(x))
number");
{ }
throw "Err3"; }
}
}
</script>
catch(er) </body>
{ </html>
Cookies

• A cookie is a variable that is stored on


the visitor's computer. Each time the
same computer requests a page with a
browser, it will send the cookie too. With
JavaScript, you can both create and
retrieve cookie values.
• A cookie is often used to identify a user.
Examples of cookies:
• Name cookie - The first time a visitor arrives at your web
page, he or she must fill in her/his name. The name is then
stored in a cookie. Next time the visitor arrives at your page,
he or she could get a welcome message like "Welcome
Teresia!" The name is retrieved from the stored cookie
• Password cookie - The first time a visitor arrives to your web
page, he or she must fill in a password. The password is
then stored in a cookie. Next time the visitor arrives at your
page, the password is retrieved from the cookie
• Date cookie - The first time a visitor arrives to your web
page, the current date is stored in a cookie. Next time the
visitor arrives at your page, he or she could get a message
like "Your last visit was on Tuesday August 11, 2005!" The
date is retrieved from the stored cookie
Assignment
• Create a cookie that stores the name of a visitor. The first time a visitor
arrives to the web page, he or she will be asked to fill in her/his name. The
name is then stored in a cookie. The next time the visitor arrives at the
same page, he or she will get welcome message and a message indicating
the last date they visited the site. The individual functions are provided
below.
• You are required to combine them together
• First, we create a function that stores the name of the visitor in a cookie
variable:

• function setCookie(c_name,value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
} The parameters of the function above hold the name of the cookie, the
value of the cookie, and the number of days until the cookie expires.
• function getCookie(c_name)
• In the function above we {
first convert the number of if (document.cookie.length>0)
{
days to a valid date, then
we add the number of days c_start=document.cookie.indexOf(c_na
until the cookie should me + "=");
if (c_start!=-1)
expire. After that we store {
the cookie name, cookie c_start=c_start + c_name.length+1;
value and the expiration c_end=document.cookie.indexOf(";",c_
date in the start);
document.cookie object. if (c_end==-1)
c_end=document.cookie.length;
• Then, we create another return
function that checks if the unescape(document.cookie.substring(c
_start,c_end));
cookie has been set: }
}
return "";
}
• The function above first
checks if a cookie is stored • function checkCookie()
{
at all in the username=getCookie('username');
document.cookie object. If if (username!=null && username!
the document.cookie object ="")
{
holds some cookies, then alert('Welcome again
check to see if our specific '+username+'!');
cookie is stored. If our }
else
cookie is found, then return {
the value, if not - return an username=prompt('Please enter
empty string. your name:',"");
if (username!=null && username!
• Last, we create the function ="")
that displays a welcome {
message if the cookie is set,
setCookie('username',username,365)
and if the cookie is not set it ;
will display a prompt box, }
asking for the name of the }
}
user: • All together now:
• Example • function checkCookie()
• <html>
<head>
{
<script type="text/javascript"> username=getCookie('username');
function getCookie(c_name) if (username!=null && username!="")
{
if (document.cookie.length>0)
{
{ alert('Welcome again '+username+'!');
c_start=document.cookie.indexOf(c_name + "="); }
if (c_start!=-1)
{
else
c_start=c_start + c_name.length+1; {
c_end=document.cookie.indexOf(";",c_start); username=prompt('Please enter your
if (c_end==-1) c_end=document.cookie.length;
return
name:',"");
unescape(document.cookie.substring(c_start,c_end)); if (username!=null && username!="")
} {
}
return "";
setCookie('username',username,365);
} }
}
function setCookie(c_name,value,expiredays)
{
}
var exdate=new Date(); </script>
exdate.setDate(exdate.getDate()+expiredays); </head>
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" :
";expires="+exdate.toGMTString()); <body onload="checkCookie()">
} </body>
</html>

You might also like