Unit-2 Web Technology II

Unit-2 Web Technology II
Web Technology:-
Web technology is the mechanism which enables two or more computing devices to communicate over a
network(internet). Web technologies are the various tools and techniques that are utilized in the process of
communication between different types devices over the internet.
Server-Side and Client Side Scripting
Server -Side Scripting:-

Server-Side Scripting is a method of designing websites so that the process or user request is run on the originating
server. Server-side scripts provide an interface to the user and limit access to proprietary data and help keep
control of the script source code. Example: ASP, SSJS(Server-Side JavaScript ), Perl, PHP, Ruby etc.
Client Side Scripting:-

Client Side Scripting is performed to generate a code that can run on the client end(browser) without needing
the server-side processing. Basically, these types of scripts are placed inside a HTML document. Example: HTML,
CSS, JavaScript etc.
JavaScript:-
JavaScript is a light weight object-oriented programming language, which is used by several websites for scripting
the webpages. It is an interpreted, full-fledged programming language that enables dynamic interactivity on
websites when applied to an HTML document.
JavaScript was first known as LiveScript, but Netscape changed its name to JavaScript, possibly because
of the excitement being generated by Java. JavaScript made its first appearance in .Netscape 2.0 in 1995 with the
name LiveScript.
Features of JavaScript
 It is a light-weighted and interpreted language.
 It is a case-sensitive language.
 All popular browsers support JavaScript as they provide built-in execution environment.
 It is a structured programming language. It follows the syntax & structure of C-language.
 It is supportable in several OS including Windows, macOS etc.
 It provides good control to the users over the web browser.
Class-XII Unit-3 Web Technology-II
Uses of JavaScript
 Creating web and Mobile applications
 Creating games
 Adding interactive behavior to web pages.
 To change the appearance of HTML documents.
 To display dialog boxes and pop-up windows.
 To create the form that respond to user input without accessing the server.
 Client-side validation
Advantages of JavaScript
 Fast Speed:-JavaScript is executed on the client side that’s why it is very fast.
 Easy to learn:- JavaScript is easy to learn. Any one which have basic knowledge of programming can
easily learn JavaScript.
 Versatility:- It refers to lots of skills. It can be used in wide range of applications.
 Browser compatible:-JavaScript supports all modern browsers. It can execute on any browser and
produce same result.
 Popularity :-JavaScript is very popular web language because it is used every where on the web.
 Rich interface:-It provides the drag and drop facilities which can provide the rich look to the web page.
 Regular updates:- JavaScript updated annually by ECMA.
 Server load:-JavaScript reduce the server load as it executes on the client side.
Disadvantages of JavaScript
 Code Visibility:- JavaScript code is visible to every one and this is the biggest disadvantage of JavaScript.
 Stop Render:- One error in JavaScript code can stop whole website to render.
 No Multiple Inheritance:- JavaScript only support single inheritance.
Software required for Working with JavaScript:-
✓ Any Text Editor (like: Notepad, Notepad++)
✓ Any Web Browser(like: Google Chrome)
Adding JavaScript to HTML
There are 3 ways to add JavaScript to a webpage:
I. Embedding the JavaScript code between a pair of <script> and </script> tag.
II. Creating an external JavaScript file with .js extension and then load it within the page through the src
attribute of the <script> tag.
III. Placing the JavaScript code directly inside an HTML tag using the special tag attributes such as onclick,
onmouseover, onkeypress, onload etc.
Sample Program:
Syntax:
<html>

<body>
<script>
JavaScript code
</script>
</body>
</html>
OR
<html>
<body>
<script language=“javascript” type=“text/javascript”>
JavaScript code
</script>
</body>
</html>
Example:
<html>
<body>
<script>
Document.write(“Welcome to Javascript”);
</script>
</body>
</html>
JavaScript Dialog Boxes:
JavaScript supports three important types of dialog boxes. These dialog boxes can be used to raise and alert or
to get confirmation on any input or to have a kind of input from the users.
 Alert Dialog Box –alert()
 Conformation Dialog Box-confirm()
 Prompt Dialog Box- prompt()
 Alert Dialog Box : An alert dialog box is mostly used to give a message to the user.
 Conformation Dialog Box: A conformation dialog box is mostly used to take user’s consent on any
option. It displays a dialog box with two buttons Ok and Cancel.
 Prompt Dialog Box:- The prompt dialog box is very useful when you want to pop-up a text box to get
user input. Thus, it enables you to interact with the user.
• prompt()
• parseInt(prompt())
• parseFloat(prompt())
A program to accept value from user and print
<html>
<body>
<script language ="javascript" type="text/javascript">
var na;
na=prompt("Enter your name");
document.write("Your name is :"+na);
</script>
</body>

</html>
A program to find sum of two numbers
<html>
<body>
<script>
var a,b,c;
a=parseInt(prompt(“Enter the First Number:”));
b=parseInt(prompt(“Enter the Second Number:”));
c=a+b;
document.write(“Sum is:”+c);
</script>
</body>
</html>
A program to find sum of two numbers

<html>
<body>
<script>
var a,b,c;
a=parseInt(prompt(“Enter the First Number:”));
b=parseInt(prompt(“Enter the Second Number:”));
c=a+b;
alert(“Sum is:”+c);
</script>
</body>
</html>
JavaScript Fundamentals:
 Variables
 Datatypes
 Operators
 Functions etc.

 Variable:-A variable is a name of storage location. There are two types of variables in JavaScript. They
are:
i. local variable :- A JavaScript local variable is declared inside the block or function. It is accessible within
the function or block only.
ii. global variable:- A JavaScript global variable is accessible from any function.
JavaScript Data Types:
Data types basically specify what kind of data can be stored and manipulated within a program. There are 2
types of data types in JavaScript.
i. Primitives data type:- Primitive data types can hold only one value at a time. There are 5 types of primitive
data type:
▪ Number- represents numeric values
▪ String-represents a sequence of characters
▪ Boolean
▪ Undefined
▪ Null
ii. Non-Primitives data type:- Non-Primitive data types can hold collections of values and more complex entities.
The non-primitive data types are:
▪ Object
▪ Array
▪ RegExp
JavaScript Operator:
Operator is a symbol that signifies the operation. JavaScript supports the following types of operators:
 Arithmetic Operators
 Comparison (Relational) Operators
 Logical Operators
 Bitwise Operators
 Assignment Operators
 Special Operators
Example: Using Arithmetic Operator in JavaScript
<html>
<body>
<script>
var a=30;
var b=10;
var c="test";
var linebreak="<br>";
document.write("a+b=");
result=a+b;
document.write(result);
document.write(linebreak);
document.write("a-b=");
result=a-b;
document.write("a*b=");

result=a*b;
document.write("a/b=");
result=a/b;
document.write("a%b=");
result=a%b;
a=++a;
document.write("++a=");
result=++a;
b=--b;
document.write("--b=");
result=--b;
</script>
</body>
</html>
Output
a+b=40
a-b=20
a*b=300
a/b=3
a%b=0
++a=32
--b=8
Control Structures
Control structure defines the flow of control within the program. Different control structures used are:
 If statement
 If-else statement
 If-else if-statement
 Switch case
Loops in JavaScript:
There are 3 types of loop in JavaScript:
1. For loop
2. While loop
3. Do-while loop
(a)The syntax of if statement :
if (condition)
{
// the body of if
}
(b)The syntax of if...else statement
if (condition)
{
// block of code if condition is true
}
else
{
// block of code if condition is false
}
(c) Nested if...else Statement
You can also use an if...else statement inside of an if...else statement.
This is known as nested if...else statement.
(a) If statement
// A Program to Check if the number is Positive .
<html>
<body>
<script>
var number;
number= prompt("Enter a number: ");
if (number > 0)
{
document.write("The number is positive<br>");
}
document.write("The if statement is easy");
</script>
<body>
</html>
(b) If-else statement
Example:1
// A Program to check whether the number is even or odd using JavaScript.
<html>
<body>

<script language="javascript" type="text/javascript">
var a=parseInt(prompt("Enter your number:"));
if(a%2==0)
{
document.write("Even Number"+a);
}
else
{
document.write("Odd number"+a);
}
</script>
</body>
</html>
Example:2
// A Program to Check if the number is Positive.
<html>
<body>
<script>
var number;
number= prompt("Enter a number: ");
if (number > 0)
{
document.write("The number is positive<br>");
}
else
{
document.write("The number is either a negative number or 0<br>");
}
document.write("The if statement is easy");
</script>
<body>
</html>
(c)If-else if-statement
// A Program to Check if the number is positive, negative or zero
<html>
<body>
<script>
var number;
number = prompt("Enter a number: ");
if (number >= 0)
{
if (number == 0)
{
document.write("You entered number 0<br>");
}

else
{
document.write("You entered a positive number<br>");
}
}
else
{
document.write("You entered a negative number");
}
</script>
</body>
</html>
JavaScript Loops:
The JavaScript loops are used to iterate or repeat the execution of code using for, while and do while loops.
There are 3 types of loops:
1. For loop
2. While loop
3. Do-while loop
(1) For Loop :

Example:
// program to display numbers from 1 to 10 using for loop.
<html>
<body>
var i;
for(i=1; i<=10; i++)
{
document.write(i+"<br>");
}
</script>
</body>
</html>
(2) While Loop :
Example:
// program to display numbers from 1 to 10 using while loop.
<html>
<body>
var i=1;
while(i<=10)
{
document.write(i+"<br>");
i=i+1;

}
</script>
</body>
</html>
(3)Do-While Loop :
Example:
// program to display numbers from 1 to 10 using while loop.
<html>
<body>
var i=1;
do
{
document.write("<br>"+i);
i++;
}
while(i<=10);
</script>
</body>
</html>
Functions in JavaScript:
JavaScript functions are used to perform operation. We can call JavaScript function many times to reduce the
code.
There are many advantages of JavaScript functions:
a. Code reusability
b. Less coding
// A program to find the sum of two numbers using function
<html>
<head>
<title >Sum of two number using function</title>
</head>
<body>
function sum() //function declaration
{
var a,b,c;
a=parseInt(prompt("Enter the first no:"));
b=parseInt(prompt("Enter the second number:"));
c=a+b;
document.write("The sum of two numbers is:"+c);
}
sum(); //function calling
</script>
</body>
</html>

Do Your Self
(1) A program to find the product of two numbers using function
(2)A program to find the Simple Interest using function.
(3) A program to find the largest number among two numbers using function.
Object based Programming with JavaScript
Object based Programming:-
JavaScript is an object-based programming language. Everything is an object in JavaScript. A JavaScript object is
an entity having state and behavior (property and method).
Creating Objects in JavaScript:-
There are 3 ways to create objects:
1. By object literal
2. By creating an instance of Object (using a new keyword)
3. By using an object constructor (using a new keyword)
(1) By object literal
Syntax:
Object={property1:value1, property2:value2…………..propertyN:valueN}
The property and value is separated by : (colon)
(2) By creating an instance of Object (using a new keyword)
Syntax:
Var Objectname=newObject();
Here, a new keyword is used to create an object
(3) By using an object constructor (using a new keyword)
Here, we need to create function with arguments. Each arguments value can be assigned in the current
object by using this keyword.
This keyword refers to the current object.
(1) By object literal

Example:
<html>
<body>
<script>
emp={id:1, name:"Ram Sharma", salary:25000}
document.write(emp.id=""+emp.name+""+emp.salary);
</script>
</body>
</html>
(2) By creating an instance of Object (using a new keyword)

Example:
<html>
<body>

<script>
var emp=new Object();
emp.id=1;
emp.name="Ram Sharma";
emp.salary=25000;
document.write(emp.id=""+emp.name+""+emp.salary);
</script>
</body>
</html>
<html>
<body>
<script>
function emp(id, name, salary)
{
this.id=id;
this.name=name;
this.salary=salary;
}
e=new emp(1,"Ram Sharma", 25000);
document.write(e.id=""+e.name+""+e.salary);
</script>
</body>
</html>
Event Object:-
Some of the events are:
1. onclick:- This is the most frequently used event type which occurs when a user clicks the left button of
his mouse.
2. onsubmit
3. onmouseover and onmouseout
4. onfocus and onblur
5. onselect
6. onchange
7. ondblclick
Example : onclick event
<html>
<head>
function SayHello()
{
document.write("Wel come to JavaScript");
}
</script>
</head>

<body>
<p>Click the following button to call the function</p>
<form>
<input type="button" onclick=“SayHello()" value=“sayhello">
</form>
</body>
</html>
Example : onmouseover and onmouseset
<html>
<head>
function over()
{
document.write(" Mouse Over");
}
function Out()
{
document.write("Mouse Out");
}
</script>
</head>
<body>
<p>Bring your mouse inside the division to see the result:</p>
<div onmouseover="over()" onmouseout="out">
<h2>This is inside the division</h2>
</div>
</body>
</html>
Introduction to PHP:-
 PHP is a recursive acronym for “PHP: Hypertext Preprocessor”.
 PHP is a server scripting language, and a powerful tool for making dynamic and interactive Web pages.
 It is used to manage dynamic content, databases, session tracking, even build entire e-commerce sites.
 It can be integrated with a number of popular databases, including MSSQL, Oracle, Sybase, Informix and
Microsoft SQL Server.
 PHP syntax is similar to the C programming language.
Advantages of PHP
 Open Source and Free of Cost: One of the most vital advantages of PHP is that it is accessible to all.
People can download it from an open-source and get it for free. One can download it anywhere and
readily use it for web application development.
 Platform Independence: Another important factor is that since PHP-based applications can run on any
OS such as UNIX, Windows, Linux, etc., people can use it without worrying about a platform where one
can use it.

 Easy loading: One can load the PHP-based applications easily and connect them to a database. People
mainly use it since it has a fast rate of loading even if it is over a slow internet connection and speed
than other programming languages.
 User-friendly: It has a less learning curve, and one can learn it quickly. The language is straightforward to
use, and if one knows about C programming, they can catch on to PHP language quickly for application
development.
 Stable: Unlike other scripting languages, PHP is very stable over the years and can provide one with
assistance and continuous support. They can get help over various versions as well.
 No lengthy code required: As we mentioned earlier, it is a simple language that people can utilize for
various purposes. It has such a quality that one can use it without having to write lengthy codes and
sophisticated structures for any web application event.
 Flexible: It is highly flexible, and people can readily use it to combine its function with various other
programming languages. They can use the software packages as the foremost effective technology for
every feature.
 Increased Job opportunity: Since PHP is very popular, many developers and developing communities
have evolved who have knowledge of this language. People who know the simple language can become
potential candidates for jobs.
 Database connection: It has a built-in database connection that helps to connect databases and reduce
the trouble and the time to develop web applications or content-based sites altogether.
 Library support: PHP has strong library support using which one can utilize the various function modules
for data representation.
Disadvantages of PHP
 Security issues: Since PHP is open-source, it is not secure. The ASCII text file is easily available, and
anyone can look it up.
 Not suitable for giant web application development: If one wants to develop a giant content-based web
application, it is not possible to do it with the help of PHP. They would have to use other programming
languages.
 Weak: PHP is weak and sometimes can cause errors. It can cause incorrect data and knowledge to be
available for users.
 Extra learning: One needs to know about the PHP framework to use the built-in PHP functionalities. If
one does not know about it, they will be forced to write additional codes.
 Doesn’t allow change or modification: It is not possible to modify or change the core behaviour of the
online applications since PHP does not allow it.
 Poor framework: PHP frameworks are not equivalent in behaviour in comparison to other such
languages. Hence, its performance and features can suffer.
 Poor performance: PHP cannot support the usage of many features at a time. Using more features from
the PHP framework or tools can result in poor performance while developing online applications.
 Presence of simpler programming languages: Though PHP is a powerful programming language, there
are plenty of other languages supported by an outsized community and reference documentation that
are easier to handle for web applications.
 Handling errors: Many have seen that PHP features are prone to handling errors due to the lack of
debugging tools and error warnings.
Uses of PHP :-

PHP is a scripting language generally used to make websites. PHP is mainly used for design server side
applications. Actually PHP is a server side scripting language which is used for connect Web Page with a
Database such as asp or jsp. Some basic uses of PHP are given below;
Characteristics of PHP:
Some important Characteristics of PHP are as follows:
 Simplicity
 Efficiency
 Security
 Flexibility
 Familiarity etc.
Software requirements :-
To run PHP code, we need the following software on our local computer:
 Browser
 Web server (e.g. Apache)
 PHP (Interpreter)
 MSSQL Database (it is optional)
Hardware requirements:-
 Desktop/ laptop computer
 Windows 2007/2008/2010/2011(32 or 64 bit)
 Pentium IV or above processor
 RAM 2 GB
 Hard disk :160 GB or above
Basic PHP Syntax:
Creating a PHP file is similar to creating an HTML file. In fact, most PHP files are a mixture of PHP code and
HTML. To create a PHP file, simply do the following:
• Create a new file in your favorite editor.
• Type some PHP code
• Save the file with a .php extension
Example :
<html>
<head>
<title>My first PHP page</title>
</head>
<body>
<?php
echo “Wel come to PHP”;
?>
</body>
</html>
Steps to run a PHP Program
Step 1: To write a code you need a text editor. Some commonly used editors are: Notepad, Notepad ++, Sublime
text, Editplus, Dreamweaver etc.
Step 2: PHP requires a Server to run the code. Some commonly used web servers are : Apache Web server,
Install XAMPP server and connect with MYSQL Database Or Install WAMP server
Step 3: Write a PHP code in your favorite editor.
Step 4: Save the file in location C:\xampp\htdocs\filename.php or C:\wamp
Step 5: Open the browser and type:http://localhost/filename.php
Variables:
Variables are “containers” for storing information. PHP variables names are case-sensitive. In PHP, a variable
starts with the $ sign, followed by the name of the variables.
Example:
<html>
<body>
<?php
$txt=”Hello world!”;
$x=5;
$y=10.5;
?>
</body>
</html>
Output Variables:
PHP Echo and Print Statements
The PHP echo and print statement is often used to output a data to the screen. Echo and print are more or less
same. They are both used to output data on the screen.
The difference is small: echo has no return value while print has a return value of 1 so it can be used in
expression. Echo is marginally faster than print.
Example1: PHP program of arithmetic operator.

<html>
<head>
<title>Arithmetic operator</title>
</head>
<body>
<?php
$x=10;
$y=6;
$sum=$x+$y; //arithmetic addition
$diff=$x-$y //arithmetic subtraction
echo “x=$x, y=$y<br>”;
echo “x+y=$sum<br>”;
echo “x-y=$diff<br>”;
?>
</body>
</html>
Output:-
x=10 , y=6
x+y=16
x-y=4
Example2: Write a PHP code to enter your name and display it.
<html>
<head>
<title>Your name</title>
</head>
<body>
<b> Enter your Name</b><br>
<form method=”post”>
<input type=”text” name=”name”><br>
<input type=”submit” value=”Submit”>
</form>
<?php
$name=$_POST[‘name’];
echo “Your Name=$name”;
?>
</body>
</html>
Output:-

Enter Your Name
Raj Kushwaha
Submit
Your Name: Raj Kushwaha
Example3: Write a PHP code to display the factorial of a number given by user.
<html>
<head>
<title>Factorial</title>
</head>
<body>
<b> Factorial Calculation Program</b><br>
<form name=”Dev” method=”POST”>
Input a Number:
<input type=”Number” name=”number”><br>
<input type=”submit” value=”Calculate”>
</form>
<?php
$n=$_POST[‘number’];
$fact=1;
for($i=1;$i<=$n;$i++)
{
$fact=$fact*$i;
}
echo “The factorial of $n=$fact”;
?>
</body>
</html>
Output:-
Factorial Calculation Program
Input a Number 6
Calculate
The factorial of 6= 720
Example4: Write a PHP code to display the following patterns.

*
* *
* * *
* * * *
* * * * *

<html>
<head>
<title>pattern</title>
</head>
<body>
<b> Displaying patterns</b><br>
<?php
for($x=1;$x<=5;$x++)
{
for($y=1;$y<=$x;$y++)
{
echo “*”;
}
echo “<br>”;
}
?>
</body>
</html>
Example5: Write a PHP code to display the Simple Interest.
<html>
<head>
<title>Simple interest</title>
</head>
<body>
<b> Simple Interest Calculator</b><br>
<table border=”1”>
<tr><td>
<form name=”SI” method=”POST”>
Input Principal:
<input type=”Number” name=”p”><br>
Input Rate
<input type=”number” name=”r”><br>
Input Time:
<input type=”number” name=”t”><br>
<input type=”submit” value=”Calculate SI”>
</form>
<?php
$p=$_POST[‘p’];
$t=$_POST[‘t’];
$r=$_POST[‘r’];
$si=($p*$t*$r)/100;
echo “Simple Interest=$si”;
?>
</td></tr>
</body>

</html>
Output:-
Simple Interest Calculator
Input Principal 1200
Input Rate
8
Input Time 4
Calculate SI
Simple Interest= 384
Example6: Write a function to add two numbers in PHP.

<html>
<head>
<title>addition of two number</title>
</head>
<body>
<?php
Function add($a,$b)
{
$c=$a+$b;
echo$c;
}
echo “Sum of two numbers is”;
add(1,2);
?>
</body>
</html>

Unit-2 Web Technology II

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit-2 Web Technology II

Uploaded by

Copyright:

Available Formats

Unit-2 Web Technology II

Server-Side and Client Side Scripting

Server -Side Scripting:-

Client Side Scripting:-

 Versatility:- It refers to lots of skills. It can be used in wide range of applications.

 Regular updates:- JavaScript updated annually by ECMA.

 No Multiple Inheritance:- JavaScript only support single inheritance.

Software required for Working with JavaScript:-

✓ Any Text Editor (like: Notepad, Notepad++)

✓ Any Web Browser(like: Google Chrome)

Adding JavaScript to HTML

There are 3 ways to add JavaScript to a webpage:

Class-XII Unit-3 Web Technology-II

Class-XII Unit-3 Web Technology-II

A program to find sum of two numbers

Class-XII Unit-3 Web Technology-II

Class-XII Unit-3 Web Technology-II

Class-XII Unit-3 Web Technology-II

Class-XII Unit-3 Web Technology-II

(1) For Loop :

Class-XII Unit-3 Web Technology-II

Class-XII Unit-3 Web Technology-II

(1) By object literal

(2) By creating an instance of Object (using a new keyword)

Class-XII Unit-3 Web Technology-II

Class-XII Unit-3 Web Technology-II

Class-XII Unit-3 Web Technology-II

Class-XII Unit-3 Web Technology-II

Steps to run a PHP Program

Step 3: Write a PHP code in your favorite editor.

Step 4: Save the file in location C:\xampp\htdocs\filename.php or C:\wamp

Step 5: Open the browser and type:http://localhost/filename.php

Example1: PHP program of arithmetic operator.

Class-XII Unit-3 Web Technology-II

Your Name: Raj Kushwaha

Example4: Write a PHP code to display the following patterns.

Class-XII Unit-3 Web Technology-II

Class-XII Unit-3 Web Technology-II

Simple Interest= 384

Example6: Write a function to add two numbers in PHP.

Class-XII Unit-3 Web Technology-II

You might also like