client-side scripting javascript. produced by netscape for use within html web pages. built into...
TRANSCRIPT
Client-Side Scripting
JavaScript
JavaScript
produced by Netscape for use within HTML Web pages.
built into all the major modern browsers.
propertieslightweight, interpreted programming languageIntegrated with HTMLCross-platform
Usage
To improve the designTo validate formsDetect browsersCreate cookies
Syntax
<script language = “javascript” type = “text/javascript”>
/* Scripts will be written here
</script>
Where to use JavaScript
In the <head></head>Syntax:<html><head><title> JS in head</title>
<script language = “javascipt” type = “text/javascript”>
</script> </head>
<body><p> body goes here </p>
</body></html>
In the <body></body>Syntax:<html>
<head><title> JS in body</title></head><body><script language = “javascript” type = “text/javascript”> // scripts here</script></body></html>
Along with html elementsSyntax:<html><head><title>JS along html element </title><head><body><button onclick = “JavaScript:alert(‘button’)”> Button Clicked </button></body></html>
Linking to external JSSyntax:
<html><head><title>External JS Demo</title>
<script language = “JavaScript ” src = “demo.js”></script>
</head><body></body></html>
JavaScript cont..
Alerting a userConfirming user’s choicePrompting a users
Alert
Used to interact with a user by popping up an alert box.
It has an “OK” button by default.The user should click on the ok button or
close the alert box before proceeding.
How alerts work
<html><head><title>Alert box</title><script language=“JavaScript” type=“text/javascript”>
alert(‘Please click ok to continue’);</script></head>
Confirm Box
To get information back from the user.
Has got “yes” and “no” options.
How confirmation works
<html><head><title>Confirmation Box</title><script language=“javascript” type=“text/javascript”>
confirm(‘can I close this window?’);</script>
</head>
Prompt Box
To accept an input from a user.Has “ok” and “cancel” buttons
How prompt works
<html><head><title>Prompt Box</title><script language=“javascript” type=“text/javascript”>
prompt(‘what is your name:’ , ’enter your name’);
</script></head>
JavaScript cont…
Declaring and using variablesDecisions, loops and functionsEventsPage redirectionForm validation
variables
Can hold any type of dataYou can start by storing text and
then change to storing numbers without JavaScript having any problems.
How variables work
SyntaxUsing the keyword var
var x;x = 10;alert(x);
Decisions
if if … elseif … else if … elseswitch
if
Syntax if (condition)
{//executable code;
}
if … else
Syntaxif (condition)
{//something here
}else
{//some other thing
}
if … else if … elseSyntax
if (condition){//something here}else if (condition){//some other thing}else{//if both the conditions above are not true execute this}
How they works var x = 5;
if (x == 2){
alert(x);}
else if(x >5){
alert(‘its five’);}
else if(x == 5){
document.write(‘the value of x is: ’ + x);}
else{
document.write(“no value found”);}
switchHas four (4) statements
Test statementCase statementBreak statementDefault statement
Switch cont…Syntax
switch(test){
case ‘1’: //some code here; break;
case ‘2’: // some code here; break;
default: //default code }
How switch works
var x = “honey”;switch(x)
{case “boy”: alert(x);
break;case “honey”: alert(“hello
” + x); break;default: alert(“you are not
” + x);}
Loops
Used to iterate while a condition is trueIf number of iteration is known use for loopOtherwise use while loopTo run the code at least one use do…while
loop
Loops cont…
Loops for loopwhile loopdo … while loop
for loop
for ( n= 1; n<= 3; n++){
document.write(n +“<br>”);
}
while loopvar degCent = 10;while ( degCent != 100)
{ document.write(degCent + “<br>”);
degCent += 10;}
do…while loop
execute at least once, regardless of whether the condition in the while statement evaluates to true.
var userAge;do
{userAge = prompt(“Please enter your
age: ”,””)}
while (isNaN(userAge) == true);
functions
Something that performs a particular taskinvoked by:•Event handlers•By statements elsewhere in the script.
Designed for reuse.
functions cont…
Syntax:function
functionName[arg1,arg2…] {statement[s];
}Remember: function is a keyword and arguments are optional.
How it works<html><head><title>How to create a function in JavaScript</title>
<script language=”javascript” type=”text/javascript”>function displayName(x)
{x = prompt(“What is your name please?”,”Enter
your name”);alert(“Hello” + x);
}</script>
</head><body>
<script language=”javascript” type=”text/javascript”>displayName(x);
</script></body></html>
Events
Used to interact with users• onclick • onmouseover• onmouseout• onLoad• onUnload
How onclick works<body>
<script language=”javascript” type=”text/javascript”>
function showDate(){
document.write(Date());}
</script><button onclick=”showDate()”>Show
Date</button></body>
How onmouseover works<body>
<script language=”javascript” type=”text/javascript”>
function displayAlert(){alert(“Your mouse is on the paragraph”);}</script>
<p onmouseover=”displayAlert()”>hover your pointer </p>
</body>
How onmouseout works<body>
<script language=”javascript” type=”text/javascript”>
function displayAlert(){
alert(“please put your mouse over the paragraph”);
}</script>
<p onmouseout=”displayAlert()”>hover your pointer </p></body>
onLoad and onUnload
<body onLoad="alert('Hello')" onUnload="alert('Goodbye')">
Page redirectionWhen you click a URL to reach to a page X but
internally you are directed to another page Y that simply happens because of page re-direction.
Why?Changing your domain nameSearch engine already indexed your
domain nameLoad a specific webpage for a specific
browser version
Page redirection cont…To redirect your site visitors to a new page, you
just need to add a line in your head section as follows:
<head><script type="text/javascript">
window.location="http://newlocation";</script></head>
Form validation
Used to occur at the server, after the client had entered all necessary data and then pressed the Submit button.
Was lengthy process and over burdening server.
Basic validationData format validation
Basic Validation
Make sure data was entered into each form field that required it.
How it works
Data format validation
The data that is entered must be checked for correct form and value
How it works
Document Object Model inJavaScript