Contents Client-data script It refers to class of computer programs on the web that are executed...

CLIENT –SERVER

SIDE SCRIPTIN

G

ContentsIntroduction to java scriptAdvantages and disadvantages of java scriptData object modelEvent modelingServer side scriptingScripting methodsPHPGET METHOD and POST METHODPHP variables and control structures.

Client-data scriptIt refers to class of computer programs on

the web that are executed client-side, by the user`s web browser , instead of server side.

These are often embedded with in an HTML document but they may also be contained in a separate file , which is referenced by the document that uses it.

Client-side scripts may also contain instructions for the browser to follow if the user interacts within a document in a certain way

JAVASCRIPT and WHAT CAN IT DOMost popular scripting language on the internet and

works in all major browsers such as internet explorerUsually embedded directly into web pagesIt is an interpreted languageIt gives HTML designers a programming tool.It can put dynamic text into an html pageIt can react to eventsIt can read and write HTML elements Can be used to validate data.Can be used to create computer

Advantages of javascriptSpeed :- being client side, javascript is very fast

because any code functions can be run immediately instead of having to contact to the server and wait for an answer.

Simplicity :- javascript is relatively simple to learn and implement.

Versatility :- javascript plays nicely with other languages and be used in a huge variety of applications.

Server Load :- being client –side reduces the website server.

Easy to debug and testingNo special editor is required for it.

Disadvantages of Javascript

Security :- as the code executes the user`s computer, in some cases it can be exploited for malicious purpose.

Relying on End User :- Javscript is sometimes interpreted differently by different browsers . Where as server side script will always produce the same output, client side scripts can be a little predictable

How to add HTML tags to the javascriptTo insert a javascript into an HTML page , we use the <script> tag

Inside the <script> tag we use the type attribute to define the scripting language.

EXAMPLE :- <html> <body> < script

type=“text/JavaScript”> document.write(“Hello

World!”); </script> </body> </html>

Javascript code and blocksJavascript code is a sequence of Javascript

statements.Each statement is executed by the browser in

the sequence they are writtenJavascript statements are grouped together

in a block.Block start with a left curly bracket and ends

with a right curly bracket.The purpose of block is to make the sequence

of statement execute together.

JavaScript CommentsSingle line comment start with //Example //write a headingJavascript multiple line comments start

with /* and end with*/.Example /*the code will write one heading

and two pragraphs.*/

Javascript operatorsArithmetic operatorsAssignment operatorsComparison operatorsLogical operatorsConditional operator

Arithmetic operators : Y=5OPERATOR

DESCRIPTION EXAMPLE RESULT

+ ADDITION X=Y+2 X=7

_ SUBTRACTION X=Y-2 X=3

* MULTIPLICATION

X=Y*2 X=10

/ DIVISION X=Y/2 X=2.5

% MODULUS X=Y%2 X=1

++ INCREMENT X=++Y X=6

_ DECREMENT X=_Y X=4

Assignment operators:X=10,Y=5OPERATOR EXAMPLE SAME AS RESULT

= X=Y X=5

+= X+=Y X=X+Y X=15

-= X-=Y X=X-Y X=5

*= X*=Y X=X*Y X=50

/= X/=Y X=X/Y X=2

%= X%=Y X=X%Y X=0

Comparison Operators : X=5OPERATOR

DESCRIPTION EXAMPLE

== IS EQUAL TO X==8 IS FALSE

=== IS EXACTLY EQUAL TO

X===5 IS TRUEX===“5” IS FALSE

!= IS NOT EQUAL X!=8 IS TRUE

> IS GREATER THAN X>8 IS FALSE

< IS LESS THAN X<8 IS TRUE

>= IS GREATER THAN OR EQUAL TO

X>=8 IS FALSE

<= IS LESS THAN OR EQUAL TO

X<=8 IS TRUE

Logical Operators:X=6,Y=3OPERATOR DESCRIPTI

ONEXAMPLE

&& AND (X<10&& Y > 1) IS TRUE

|| OR (X==5 || Y==5) IS FALSE)

! NOT !(X==Y) IS TRUE

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”);

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”);

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”);

Javascript functionsA function contains a code that will be executed by

an event or by a call to the function. We may call a function from anywhere with in a

pageFunctions can be defined both in the <head> and

in the <body> section of a documentSyntax :-Function function name(var1, var2…varx){Some code}

Example of function <html> <head> <script type =“text/JavaScript’’> function displaymessage() { alert(“hello friends”); } </script> </head> <body > <form> < input type=“button” value=“click me!” Onclick=“display message()”/> </form> </body> </html>

The return statement The return statement is used to specify the value that is returned from thr

functions. Therefore the functions that are going to return a value must use the

return statement.Example <html> <head> <script type =“text/JavaScript’’> function product(a,b) { returna*b; } </script> </head> <body > <script type =“text/JavaScript’’> document.write(product(5,10)); </script> </body> </html

JavaScript eventsEvents are the beating heart of any

JavaScript application.This gives us an overview of what event

handling is , what its problems are and how to write proper cross-browser scripts

Without events there are no scripts.Whenever a user of JavaScript takes

action , he causes an event.

Event ModelingThis is example of event modeling in which we

displays the date when a button is clicked.<html><head><script type=“text/javascript”>Function displayDate( ){Document.getElementBy(“demo”).innerHTML=date

( );</script></head>

<body><h1>My First Web Page</h1><p id=“demo”></p><button type=“button”

onclick=“displayDate( )>Display Date</button>

</body></html>

Document Object ModelThe document object model is an application

programming interface(API) for valid HTML and well –formed XML documents.

It defines the logic structure of documents and the way a document is accessed and manipulated.

With the Document Object Model , programmers can build documents , navigate their structure and add, modify , or delete elements and contents.

Ant thing found in an HTML or XML document can be accessed , changed , deleted or added using the Document Object Model, with few exceptions.

One important objective for the Document Object Model is to provide a standard programming interface that can be used in a wide variety of environments and applications.

It is designed to be used with any programming language .

The DOM is programming API for documents .

ExampleWe have a one HTML Table which is given below :-<TABLE><TBODY><TR><TD>Shady Grove</TD></TR><TR><TD>Dorian</TD></TR></TBODY></TABLE>

<TABLE>

<TBODY>

<TR> <TR>

<TD> <TD> <TD> <TD>

SHADDY GROVE

AEOLIAN OVER THE RIVER

CHRLIE

DORIAN

SERVER SIDE SCRIPTINGServer – side scripting is a web server

technology in which a user `s request is fulfilled by running a script directly on the web server to generate dynamic web pages.

Server –side scripting is a option for delivering customized HTML in contrast to client – side scripting, where the HTML is modified typically by JavaScript in the client `s machine after the HTML and java are sent from the web server.

Server-side scripting is about “programming “ the behavior of the browser.

Scripting MethodsAny scripting language can generate web pages

through CGI or an extension module or application server framework.

1. ASP :- active server pages (ASP) is Microsoft `s server script engine for dynamically generated web pages.

2. ASP.NET :- It is a set of web application development technologies marketed by Microsoft.

3. COLDFUSION :-Cross platform tag-based commercial server side scripting system.

4. ESP:- It is a server-side scripting language that is designed to provide an easy interface to database contents.

5. JSP :- A Java – based system for embedding Java – related code in HTML pages.. JSP`s are compiled into Java servlets by a JSP compiler.

6. LASSO :- LASSO is a data source neutral interpreted programming language and cross platform server. LASSO is developed by Lassosoft, LLC.

7. PHP:- PHP is a reflective programming language originally designed to produce dynamic web pages.

8. Server Side JavaScript :- it refers to Javascript that returns on server –side.

9. SMX:-SMX is a macro processing language shipped with the Internet Factory`s Commerce Builder software.

SR NO

CLIENT –SIDE SCRIPTING

SERVER –SIDE SCRIPTING

1 Response to interaction may be more immediate (once program code has been downloaded)

Complex process are often more efficient (as the program and the associated resources are not downloaded to the browser)

2. In client-side scripting the services are secure as no information sent from the browser.

But there are some security consideration when sending sensitive information using server-side scripting.

3. The client side scripting is reliant on the user having using a specific browser and / or plug-in on their computer.

The server-side scripting does not rely on the user having specific browser or plug-in.

4. Client-side scripting is affected by the processing speed of the user`s computer

The server-side scripting is affected by the processing speed of the host server.

PHPPHP started out as small open source project

that evolved as more people found out how useful it was.

PHP is a recursive acronym for “PHP: Hypertext Preprocessor”.

PHP is a server side scripting language that is embedded in HTML

It is used to manage dynamic content , databases , session tracking ,even build entire commerce site.

It is integrated with a number of popular databases , including My SQL , Oracle and Microsoft SQL server.

PHP supports a large number of major protocols such as POP3 , IMAP and LDAP.

PHP4 added support for JAVA and disturbed object architectures , making n-tier development a possibility for the first time.

PHP is forgiving : PHP language tries to be as forgiving as possible.

PHP syntax is like C Like

Uses of PHPPerforms system functions i.e from files on a

system it can create , open , read , write and close them.

Can handle forms , i.e gather data from files , save data to file, through email you send data, return data to the user.

Add , delete or modify elements within your database through PHP

Access cookies variables and set cookiesWe can restrict users to access some pages of any

websiteIt can encrypt data.

BASIC SYNTAX FOR PHPThe PHP parsing engine needs a way to

differentiate PHP code from other elements in the page. The mechanism for doing so is known as `escaping to PHP`. There are four ways to do this.

We have canonical PHP tags.The most universally effective PHP tag style

is<?

php….?>

Ways for sending information.There are two ways the browser can send

information to the web browser.The GET MethodThe POST Method

GET POST METHODBefore the browser sends the information, it

encodes it using a scheme called URL encoding. In this scheme , name/values pairs are joined

with equal signs and different pairs are separated by the ampersand.

Spaces are removed and replaced wit the +character and any other nonalphanumeric characters are replaced with a hexadecimal values.

Name1=value1&name2=value2&name3=value3

The GET methodThe get method sends the encoded user

information appended to the page requestThe page and the encoded information are

separated by the ? character

The get method produces a long string that appears in your server logs , in browser`s location :box.

The GET method is restricted to send upto 1024 characters only

HTTP://WWW.TEST.COM/INDEX.HTM?NAME1=VALUE1&NAME2=VALUE2

Never use GET method if you have password or other sensitive information to be sent to user.

It can`t be used to send binary data , like images or word documents , to the server.

The data sent be GET method can be accessed using QUERY_STRING environment variable.

The PHP provides $_GET associative array to access all the sent information using the GET method.

Example :- GET Method<?phpIf($_GET[“name”]||$_GET[“age”]){echo“welcome”.$_GET[`name`].“<br/>”;echo “You are “.$_GET[`age`].“yearsold.”;exit();}?><html><body>

<form action=“<?php$_PHP_SELF?>”method=“GET”>”

name:<input type=“text” name=“name”/>Age:<input type=“text”name=“age”/><input type=“submit”/></form></body></html>

THE POST METHODThe post method transfers information via HTTP

headers.The information is encoded as describes in case of

GET method and put into a header called QUERY_STRING.

This method does not have any restrictions on dta size to be sent.

This method can be used to send ASCII as well as binary data.

The data sent by POST method goes through HTTP Header so security depends on HTTP protocol.

The PHP provides $_POST associative array to access all the sent information using GET method.

EXAMPLE :-<?phpIf($_POST[“name”]||$_POST[“age”]){echo“welcome”.$_POST[`name`].“<br/>”;echo “You are “.$_POST[`age`].“yearsold.”;exit();}?><html>

<body><form action=“<?php$_PHP_SELF?

>”method=“POST”>” name:<input type=“text” name=“name”/>Age:<input type=“text”name=“age”/><input type=“submit”/></form></body></html>

PHP variablesAll variables in PHP are denoted with a

leading dollar sign $.The value of variable is the value of its

most recent assignment.PHP does a good job of automatically

converting types from one to another when necessary .

Variables in PHP do not have intrinsic types-a variable does not know in advance whether it will be used to store a number or a string of characters.

DATATYPES IN PHPINTERGERS:- are whole numbers , without a

decimal point, like 574.DOUBLES:-are floating point numbers , like 3.146.BOOLEANS:-have only two possible values either

true or false.NULL:-null is a special type that only has one value

i.e. null.STRINGS:- are sequences of characters like “hello

friends” Arrays :- arrays are names and indexed collection of

other values.Resources :-are special variables that hold

references to resources external to PHP.OBJECTS:- Objects are instances of programmer-

defined classes.

PHP CONTROL STRUCTURESif…..else statement :- use this statement if

you want to execute some code if a condition is true and another code if a condition is false .

if(condition)Code to be executed if condition is true;elseCode to be executed if condition is false;

Else if statementIf you want to execute some code if one of the

several conditions are true , use this statement.

if(condition)Code to be executed if condition is true;else if(condition)Code to be executed if condition is trueElseCode to be executed if condition is false;

The switch statement If you want to select one of many blocks of code to be executed ,

use the switch statement.switch(expression){case label 1Code to be executed if expression=label 1;break;case label 2Code o be executed if expression= label 2;break;default:code to be executedif expression is different from both label 1 and label 2;}

THANK YOU

STUDENTS

Contents Client-data script It refers to class of computer programs on the web that are executed...

Documents

Transcript of Contents Client-data script It refers to class of computer programs on the web that are executed...