client-side scripting
DESCRIPTION
Client-Side Scripting . JavaScript. JavaScript. produced by Netscape for use within HTML Web pages. built into all the major modern browsers . properties lightweight , interpreted programming language Integrated with HTML Cross-platform. Usage. T o improve the design - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/1.jpg)
Client-Side Scripting
JavaScript
![Page 2: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/2.jpg)
JavaScript
produced by Netscape for use within HTML Web pages.
built into all the major modern browsers.
propertieslightweight, interpreted programming languageIntegrated with HTMLCross-platform
![Page 3: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/3.jpg)
Usage
To improve the designTo validate formsDetect browsersCreate cookies
![Page 4: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/4.jpg)
Syntax
<script language = “javascript” type = “text/javascript”>
/* Scripts will be written here
</script>
![Page 5: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/5.jpg)
Where to use JavaScript
![Page 6: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/6.jpg)
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>
![Page 7: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/7.jpg)
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>
![Page 8: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/8.jpg)
Along with html elementsSyntax:<html><head><title>JS along html element </title><head><body><button onclick = “JavaScript:alert(‘button’)”> Button Clicked </button></body></html>
![Page 9: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/9.jpg)
Linking to external JSSyntax:
<html><head><title>External JS Demo</title>
<script language = “JavaScript ” src = “demo.js”></script>
</head><body></body></html>
![Page 10: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/10.jpg)
JavaScript cont..
Alerting a userConfirming user’s choicePrompting a users
![Page 11: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/11.jpg)
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.
![Page 12: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/12.jpg)
How alerts work
<html><head><title>Alert box</title><script language=“JavaScript” type=“text/javascript”>
alert(‘Please click ok to continue’);</script></head>
![Page 13: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/13.jpg)
Confirm Box
To get information back from the user.
Has got “yes” and “no” options.
![Page 14: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/14.jpg)
How confirmation works
<html><head><title>Confirmation Box</title><script language=“javascript” type=“text/javascript”>
confirm(‘can I close this window?’);</script>
</head>
![Page 15: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/15.jpg)
Prompt Box
To accept an input from a user.Has “ok” and “cancel” buttons
![Page 16: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/16.jpg)
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>
![Page 17: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/17.jpg)
JavaScript cont…
Declaring and using variablesDecisions, loops and functionsEventsPage redirectionForm validation
![Page 18: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/18.jpg)
variables
Can hold any type of dataYou can start by storing text and
then change to storing numbers without JavaScript having any problems.
![Page 19: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/19.jpg)
How variables work
SyntaxUsing the keyword var
var x;x = 10;alert(x);
![Page 20: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/20.jpg)
Decisions
if if … elseif … else if … elseswitch
![Page 21: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/21.jpg)
if
Syntax if (condition)
{//executable code;
}
![Page 22: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/22.jpg)
if … else
Syntaxif (condition)
{//something here
}else
{//some other thing
}
![Page 23: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/23.jpg)
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}
![Page 24: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/24.jpg)
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”);}
![Page 25: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/25.jpg)
switchHas four (4) statements
Test statementCase statementBreak statementDefault statement
![Page 26: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/26.jpg)
Switch cont…Syntax
switch(test){
case ‘1’: //some code here; break;
case ‘2’: // some code here; break;
default: //default code }
![Page 27: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/27.jpg)
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);}
![Page 28: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/28.jpg)
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
![Page 29: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/29.jpg)
Loops cont…
Loops for loopwhile loopdo … while loop
![Page 30: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/30.jpg)
for loop
for ( n= 1; n<= 3; n++){
document.write(n +“<br>”);
}
![Page 31: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/31.jpg)
while loopvar degCent = 10;while ( degCent != 100)
{ document.write(degCent + “<br>”);
degCent += 10;}
![Page 32: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/32.jpg)
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);
![Page 33: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/33.jpg)
functions
Something that performs a particular taskinvoked by:•Event handlers•By statements elsewhere in the script.
Designed for reuse.
![Page 34: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/34.jpg)
functions cont…
Syntax:function
functionName[arg1,arg2…] {statement[s];
}Remember: function is a keyword and arguments are optional.
![Page 35: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/35.jpg)
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>
![Page 36: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/36.jpg)
Events
Used to interact with users• onclick • onmouseover• onmouseout• onLoad• onUnload
![Page 37: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/37.jpg)
How onclick works<body>
<script language=”javascript” type=”text/javascript”>function showDate(){document.write(Date());}</script><button onclick=”showDate()”>Show Date</button>
</body>
![Page 38: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/38.jpg)
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>
![Page 39: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/39.jpg)
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>
![Page 40: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/40.jpg)
onLoad and onUnload
<body onLoad="alert('Hello')" onUnload="alert('Goodbye')">
![Page 41: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/41.jpg)
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 42: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/42.jpg)
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>
![Page 43: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/43.jpg)
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
![Page 44: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/44.jpg)
Basic Validation
Make sure data was entered into each form field that required it.
![Page 45: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/45.jpg)
How it works
![Page 46: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/46.jpg)
Data format validation
The data that is entered must be checked for correct form and value
![Page 47: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/47.jpg)
How it works
![Page 48: Client-Side Scripting](https://reader033.vdocument.in/reader033/viewer/2022051402/56816189550346895dd1257b/html5/thumbnails/48.jpg)
Document Object Model inJavaScript