CLIENT –server SIDE SCRIPTING
Contents Introduction to java script Advantages and disadvantages of java script Data object model Event modeling Server side scripting Scripting methods PHP GET METHOD and POST METHOD PHP variables and control structures.
Client-data script It 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 DO Most popular scripting language on the internet and works in all major browsers such as internet explorer Usually embedded directly into web pages It is an interpreted language It gives HTML designers a programming tool. It can put dynamic text into an html page It can react to events It can read and write HTML elements Can be used to validate data. Can be used to create computer
Advantages of javascript Speed :- 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 testing No 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 javascript To 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 blocks Javascript code is a sequence of Javascript statements. Each statement is executed by the browser in the sequence they are written Javascript 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 Comments Single line comment start with // Example //write a heading Javascript multiple line comments start with /* and end with*/. Example /*the code will write one heading and two pragraphs.*/
Javascript operators Arithmetic operators Assignment operators Comparison operators Logical operators Conditional operator
Arithmetic operators : Y=5 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=5 EXAMPLE SAME AS RESULT = X=Y X=5 += X+=Y X=X+Y X=15 -= X-=Y X=X-Y *= X*=Y X=X*Y X=50 /= X/=Y X=X/Y X=2 %= X%=Y X=X%Y X=0
Comparison Operators : X=5 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=3 DESCRIPTION EXAMPLE && 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 functions A 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 page Functions can be defined both in the <head> and in the <body> section of a document Syntax :- 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 > document.write(product(5,10)); </body> </html
JavaScript events Events 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 Modeling This 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 Model The 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 .
Example We have a one HTML Table which is given below :- <TABLE> <TBODY> <TR> <TD>Shady Grove</TD> </TR> <TD>Dorian</TD> </TBODY> </TABLE>
<TABLE> <TBODY> <TR> <TR> <TD> <TD> <TD> <TD> SHADDY GROVE AEOLIAN OVER THE RIVER CHRLIE DORIAN
SERVER SIDE SCRIPTING Server – 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 Methods Any scripting language can generate web pages through CGI or an extension module or application server framework. ASP :- active server pages (ASP) is Microsoft `s server script engine for dynamically generated web pages. ASP.NET :- It is a set of web application development technologies marketed by Microsoft. COLDFUSION :-Cross platform tag-based commercial server side scripting system. ESP:- It is a server-side scripting language that is designed to provide an easy interface to database contents.
JSP :- A Java – based system for embedding Java – related code in HTML pages.. JSP`s are compiled into Java servlets by a JSP compiler. LASSO :- LASSO is a data source neutral interpreted programming language and cross platform server. LASSO is developed by Lassosoft, LLC. PHP:- PHP is a reflective programming language originally designed to produce dynamic web pages. Server Side JavaScript :- it refers to Javascript that returns on server –side. SMX:-SMX is a macro processing language shipped with the Internet Factory`s Commerce Builder software.
CLIENT –SIDE SCRIPTING SERVER –SIDE SCRIPTING 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.
PHP PHP 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 PHP Performs 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 cookies We can restrict users to access some pages of any website It can encrypt data.
BASIC SYNTAX FOR PHP <?php….?> The 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 Method The POST Method
Name1=value1&name2=value2&name3=value3 GET POST METHOD Before 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 method The get method sends the encoded user information appended to the page request The 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 <?php If($_GET[“name”]||$_GET[“age”]) { echo“welcome”.$_GET[`name`].“<br/>”; echo “You are “.$_GET[`age`].“yearsold.”; exit(); } ?> <html> <body>
<form action=“<. php$_PHP_SELF <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 METHOD The 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 :- <?php If($_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 variables All 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 PHP INTERGERS:- 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 STRUCTURES if…..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; else Code to be executed if condition is false;
Else if statement If 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 true Else Code 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 1 Code to be executed if expression=label 1; break; case label 2 Code o be executed if expression= label 2; default: code to be executed if expression is different from both label 1 and label 2; }
THANK YOU STUDENTS