3.1 Introduction
Web technology helps us to allow different computers to communicate and helps to share resources among different computer network systems across the internet. It has been simpler and user-friendly day by day from users' side, on the other hand, it has been complex and huge from programmer perspective. Therefore, scientists are trying make simple and manageable by using different tools and techniques. Web technology has started from simple hyper text page technology and now it has been reached to the cloud computing and Al based expert system. The primary concerns of web technology are to give us a way to interact with hosted information, such as websites and how to secure this web-based information. The three main languages which helps to make the World Wide Web are HTML, CSS, and JavaScript.
Web technology is defined as the technology that primarily deals with how to save web information securely in webservers and how to retrieve informnation from these servers using different internet based tool and techniques.
Webpage is the collection documents electronic provided by the website to the user in internet. We can post our information in the form of text, pictures, audio, video etc as a webpage. A webpage is developed by using special type of programming language called Hypertext mark-up language (HTML). It is also known as hypertext page. We can traverse from one hypertext page to others by using special link called hyperlink. Hpermedia is a nonlinear medium of information that includes graphics, audio, video, unds, plain text and hyperlinks. Hypermedia documents feature links to images, animations, and movies. A collection of webpages is called website. Web development task is a project work which involves developing website of organizations, individual or any agencies in the Internet.
3.2 Server Side and Client Side Scripting
Mainly a website is classified into two types: static and dynamic. A static website has no interactive features and it delivers the information to the user exactly as stored. Such website contains text, graphics, audio and video. The audio and video are considered as static content because they play automatically in webpage and has no intereactive features. Such website is periodically updated by manually editing text, graphics, audio and video. The static website is developed by using client side scripting languages: HTML, CSS and JavaScript. Such scripts are also known as client end (front end) scripts which require browser to run the scripts on client computer, but it does not interact with the server.
On other hand, dynamic website is interactive website with capability to change the content each time they are accessed. Mainly, such website is controlled by the server where it is stored. Such server runs special program called webserver program which helps to manage website. The dynamic website also contains web application or web app. The dynamic website can be easily updated and developed by using server-side scripting such as Perl, ASP, PHP, JSP, Java, etc. Such scripts are also known as server end (back end) scripts which can interact with the server.
Server side scripting involves server for its processing and client-side scripting requires browsers to run the scripts on the client computer but does not interact with the server
Difference between Server Side Scripting and Client Side Scripting
3.3 Introduction of Internet Technology
The term 'internet' comes from the word computer network. When one computer network connects to other computer networks then, it becomes internet. The internet or Internet is defined as a global system of interconnection of millions of networks around the world that use common standard rules, commonly known as TCP/IP (Transmission Control Protocol/ Internet Protocol) suite.
The internet is global public networking system for exchanging the information and resources.
The Internet is also termed as the network of networks that consists of millions of individual computers, mobile networks, academic and business organizations, government and non-government oraganization Social networks, global media houses, etc. Moreover, smart home appliances, office automation devices, smart vehicles, etc. are connected to the Internet. Therefore, Internet is a global village for sharing information in the most efficient way of communication.
The term web is derived from World Wide Web (WWW). It is now the most popular service on the internet in which we can get or post the information by making hypertext documents. It is a combination of all the resources and users on the Internet that are using the common rules also known as Hypertext Transfer Protocol (HTTP). HTTP is a set of rules to transfer the webpages with hyperlinks that can be viewed on web browsers such as Microsoft Edge, Google Chrome, Safari, etc.
WWW or Web is a global platform to access the information resources from web pages and HTTP is the common rule or protocol that allows to transfer web pages with links from one computer to another on the internet.
Webpage is the collection of electronic documents provided by the website to the user in internet. We can post our information in the form of text, pictures, audio, video etc as a webpage, A webpage is developed by using scripting languages such as HTML, CSS and JavaScript, etc. Such scripts only create static web page. Therefore, scripts such as PHP, JSP, ASP, etc are used in order to create dynamic websites.
Figure : Web Technology
Assignment XII - Ch 3 (1) 1. Write full form of HTTP,CSS,HTML.
2. Compare static and dynamic page.
3. List any three client scripts and any three types of server side scripts.
4. Write pros and cons of server side scripts.
5. Write pros and cons of clinet side scripts.
3.4 Adding Java Script to HTML Page
As HTML is simple mark-up language for developing web documents. Such web documents contents static nature of information because they do not respond to the user. Such HTML documents do not make decisions, automate repetitive of tasks. In order to solve such problems, scientist develops scripting language. A scripting language is kind of web-based programming language for solving web related problems. But it is not complete programming language because it cannot solve all kind of problems. Scripting languages have simple syntax; can perform tasks with minimurm number of command and interpreted by web browser. Scripting language cannot independently execute and it is embedded inside HTML tags. Client site scripting languages execute in client site browser as per the user's responds. Examples of client site scripts are JavaScript ,VBScript etc. Consider the following example, it shows how to embed JavaScripts to HTML.
EXAMPLE
<script language "javascript" type="text/javascript">
</script>
Or Simply,
<script type="text/javascript">
</script>
Scripts can be placed either inside the <HEAD> tags or <BODY> tags. We can embed any number of scripts in a webpage. In the <HEAD> tags, the scripts are run before the page is displayed and in the <BODY> tags scripts are run as the page is displayed. Mostly, the functions and variables are defined in the <HEAD> tags and these functions are used by the scripts within the <BODY> tags. Scripts also can be stored in external file with file estension .js and such scripts can also be loaded from external file by using the following example. This practice is useful if we have complex and repetitive scripts that are used in several different webpages.
Example of External Scripts:
<script src="myscript.js">
</script>
Example 1 is simple example to demonatrate how Javascript is embedded in html. In this example the script is embedded inside <body> tag. The function document.write() helps to display the output on web browser.
EXAMPLE 1
<!DOCTYPE html>
<html>
<head>
<title> Hello World in Java Script </title>
</head>
<body>
<script type="text/javascript">
document.write(" Hello World ");
</script>
</body>
</html>
Instead of using function document.write(), we can also use function getElementById() to access the HTML element with id and element content innerHTML. This feature helps us to access particular tag in HTML using tag id.
EXAMPLE 2
<!DOCTYPE html>
<html>
<head>
<title>Example2</title>
</head>
<body>
<p id="eg"> </p>
<script type="text/javascript">
document.getElementById("eg").innerHTML = "Hello World";
</script>
</body>
</html>
3.5. Java Script Fundamental
JavaScript (JS) is one of the most popular scripting programming language. It is light weight and mostly used to develop dynamic websites. It is implemented as client-side script in html to make dynamic pages. It is a case sensitive interpreted programing language with object-oriented capabilities. It was developed by Netscape aund originally called LiveScript in 1995. Netscape changed its name to JavaScript language and later it has been also supported by Internet Explorer and Mozilla Firefox. European Computer Manufacturers Association (ECMA) is a standard organization for information and communication systems which standardized JavaScript as ECMA-262. It is a general-purpose client side scripting language on the World Wide Web.
Major Features of JavaScript
It is a standard scripting language and supported by most of the browsers.
It is a lightweight and efficient interpreted programming language.
It is complementary to and integrated with HTML and Java.
It is object-oriented event driven programming language.
It is open source and cross platform (independent to OS).
JavaScript is standard client-side scripting programming language for developing dynamic web based application.
Importance of JavaScript
It is designed for solving client-side application with prompt responds.
It can dynamically modify webpage as per requirements.
It can validate and respond user's input.
It can be used to create cookies. (A piece of information stored on the user's computer by the web browser while browsing a website)
It does not require any interaction to web server while processing scripts on web browser.
Simple User Interaction Functions
JavaScript provides three built-in function to do simple user interaction.alert(msg): It helps to make alerts to the user that something has happened.
Example: alert (" Don't touch it is hot ");confirm(msg): It helps to asks the user to confirm or cancel something.
Example: confirm (" Do you want to delete the file ");prompt(msg, default value): It helps to ask user to enter some text value.
Example: prompt (" Enter your Name: ","Alex Lal Karn");
EXAMPLE 3
<!DOCTYPE html>
<html>
<head>
<title> Example of User Interaction Functions </title>
</head>
<body>
<script type="text/javascript">
document.write(" Example of alert, confirm and prompt functions: ");
alert("thanks for visiting my blog.");
confirm("do you want to delete the file");
prompt("Enter your name : ");
</script>
</body>
</html>
Comments in JavaScript
JavaScript defines two types of comments: single line comment and multiline comments. There comments do not have any effect on program codes. It is same as c language.
Single line comments:
//This is an example of single line comment
Multi line comments:
/* This is an example of
multi line comment */
Example 4 shows the example of single line comment and multi line comments. It also show how html tags can be embedded inside JavaScript.
EXAMPLE 4
<!DOCTYPE html>
<html>
<head>
<title> Example of Comments </title>
</head>
<body>
<script type="text/javascript">
document.write(" Single Line comment ");
// This is single line comment
document.write("<BR>");
document.write(" Multi Line comment ");
/* This is multi line
comment */
</script>
</body>
</html>
3.6 JavaScript Data Types
Every programming language has set of data types. JavaScript provides three basic data types i.e. Numbers, Strings and Boolean. Each data type defines set of values. Numbers data type defines all real numbers such as integers: -34, -1, 0, 20, 200, etc and floating-point numbers: -34.5, 1.0,3.1415, 400.3 etc. String data types defines letter, characters and text including white space. Boolean data type defines true or false value.
Numbers: -1, -20, -35, 30, 50.45, 3.14, etc.
Strings: "A", "ABC", "1234", "Example of Java Script"
Boolean: true or false 1 or 0
Moreover, JavaScript also provides two trivial data types called null and undefined. Such data type defines only a single value.
3.7. Variables and Operators
A variable defines a unique name that represents a unit of memory space to store data on computer. Every variable name must start with character or underscore and it must not be space and JavaScript keywords. A variable should declare before using it, so it is declared by using the keyword var followed by semicolon. A value is assigned to the respective variable by using assignment = operator.
var variable_name;
Example:
var x;
var roll_number=1;
var fullname;
Example 5 show how variable is declared with assigned value and the value is displayed on page by using the function document wtite(). The + operator also helps concatenates the string. The value of x = and the value of variable x.
EXAMPLE 5
<!DOCTYPE html>
<html>
<head>
<title> Example of Variables </title>
</head>
<body>
<script type="text/javascript">
var x=100;
document.write(" The value of x = " +x);
</script>
</body>
</html>
Assignment XII - Ch 3 (2) 1. Write synatx to embed JavaScript in HTML.
2. How external scripts can be embedded in HTML?
3. WHat is the use of built in function document.write().
4. Write the use of alert(), confirm() and prompt() functions.
5. Define data types of JavaScript.
Operator
An operator is defined as meaningful symbol in programming which is used to carry out some specific calculation or comparison. JavaScript supports the following types of operators: Arithmetic, comparison, logical, assignment and conditional (or ternary) operators.
Arithmetic Operators
EXAMPLE 6
<!DOCTYPE html>
<html>
<body>
<h1>Examples of Arithmetic Operators</h1>
<script type="text/javascript">
var a=25;
var b=10;
var result;
document.write(" a=25 <BR> b=10 ");
result=a+b;
document.write(" <BR> a+b = "+result);
result=a-b;
document.write(" <BR> a-b = "+result);
result=a*b;
document.write(" <BR> a*b = "+result);
result=a/b;
document.write(" <BR> a/b = "+result);
result=a%b;
document.write(" <BR> a%b = "+result);
a++;
document.write(" <BR> Example of a++ ="+a);
b--;
document.write(" <BR> Example of b-- ="+b);
</script>
</body>
</html>
Comparision Operators
Comparision operators are Boolean operators, so they give Boolean result: true or false.
Example 7 shows how comparision operators can be implemented in programming.
EXAMPLE 7
<!DOCTYPE html>
<html>
<body>
<h1>Examples of Comparision Operators</h1>
<script type="text/javascript">
var a=10;
var b=20;
document.write(" a=10 <BR> b=20");
document.write("<BR> a<b:");
document.write(a<b);
document.write(" <BR> a<=b: ");
document.write(a<=b);
document.write(" <BR> a>b: ");
document.write(a>b);
document.write(" <BR> a>=b: ");
document.write(a>=b);
document.write(" <BR> a==b: ");
document.write(a==b);
document.write(" <BR> a!=b: ");
document.write(a!=b);
</script>
</body>
</html>
Logical Operators
Logical operators are Boolean operators, so they give Boolean result either true or false.
Example 8: demonstrate how logical operators can be implemented in programming.
EXAMPLE 8
<!DOCTYPE html>
<html>
<body>
<h1>Examples of Logical Operators</h1>
<script type="text/javascript">
var a=true;
var b=false;
document.write(" a=true <br> b=false");
document.write("<br> a&&b:");
document.write(a&&b);
document.write(" <br> a||b: ");
document.write(a||b);
document.write(" <br> !a: ");
document.write(!a);
document.write(" <br> !b: ");
document.write(!b);
</script>
</body>
</html>
Assignment Operators
Assignment operator helps to assign or store value to a variable. There are various types of assignments which are listed on the table and they are explained in the example 9.
EXAMPLE 9
<!DOCTYPE html>
<html>
<body>
<h1>Examples of Assignment Operators</h1>
<script type="text/javascript">
var a=10;
document.write("<br> Value of a : "+a);
a+=5;
document.write(" <br> Value of (a+=5) : "+a);
a-=5;
document.write(" <br> Value of (a-=5) : "+a);
a*=5;
document.write("<br> Value of (a*=5) : "+a);
a/=5;
document.write(" <br> Value of (a/=5) : "+a);
a%=5;
document.write(" <br> Value of (a%=5) : "+a);
</script>
</body>
</html>
Ternary Operators(Conditional)
Conditional operator is also known as ternary operator helsp to check the Boolean values that true or false. It is same as simple if else statement, if exp1 is true, then exp2 will be executed , otherwise exp3 will be executed.
Synatx: exp1?exp2:exp3;
Example : a>b?a:b;
EXAMPLE 10
<!DOCTYPE html>
<html>
<body>
<h1>Examples of Ternary Operators</h1>
<script type="text/javascript">
var a=10;
var b=20;
var max;
document.write("<br> a=10 <br> b=20");
max=(a>b)?10:20;
document.write(" <br> The maximum number is =");
document.write(max);
</script>
</body>
</html>
Assignment XII - Ch 3 (3) 1. List any five types of arithmetic operators.
2. Compare increment ++ and decrement -- operator.
3. List any five types of comparision operators.
4. List any three types of logical operators.
5. Compare between = operator and == operator.
3.8 Functions and Control Structures
A function is self-contained subprogram or set of program codes to perform some specific well-defined task. A function will carry out its intended action whenever it is accessed from some other portion of the program. The same function can be accessed from several different places within a program. A function is executed by calling its name with set of input parameters and the result will be returned to the calling place of the program from the function. Some function may not take parameters. Mainly, a function is categorized into two types: library function and user defined function. A library function is built-in function defined by JavaScript and these functions can be simply accessed by using their respective name. Example of library functions: alert(),confirm(),prompt() etc.
A user defined function can be declared either globally or locally. A global function can be declared within the <head> section and it can be accessed within the entire program. A local function can be declared with the <body> section of any specific scripts and it can be accessed only within the script where it is defined. The general syntax to define a function is as follows:
function functionNAME(parameters)
{
local variable declaration;
statement 1;
statement 2;
statement n;
return statement;
}
The keyword function is used to define a function, functionNAME defines unique name of the function and parameters are optional that defines input value to the function. The body of the function is defined with the scope {} of the function that consists local variable declaration, statements of the functions and finally return statement for output result. The function is called by using the name functionNAME(parameters); . Example 11 shows a simple function related program to calculate area of rectangle. In this example the function defined locally and accessed within <body> tags.
EXAMPLE 11
<!DOCTYPE html>
<html>
<body>
<h2>Example of Local functions: Area of Rectangle </h2>
<script type="text/javascript">
function area(l,b)
{
return l*b;
}
var a = area(5,4);
document.write("<br> Length=5 <br> Breadth=4");
document.write("<br> Area = "+a);
</script>
</body>
</html>
Example 12 shows the same program to calculate area f rectangle but in this example the function is defined globally inside <head> tags and accessed within the <body> tags.
EXAMPLE 12
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function area(l,b)
{
return l*b;
}
</script>
</head>
<body>
<h2>Example of Global functions: Area of Rectangle </h2>
<script type="text/javascript">
var a = area(5,4);
document.write("<br> Length=5 <br> Breadth=4");
document.write("<br> Area = "+a);
</script>
</body>
</html>
Control structures is particulary useful programming constructs with control the flow of program statements in a program. It also specifies the order of statements in program. Mainly control structures are classified into the following two categories.
Branching (if else, if else if and switch case)
Looping (while, do while and for)
In branching control structure, selection is made based on condition, when the given condition is true or false, the flow of program statements execution is totally directed by the result obtained from checkig condition. Mainly there are three types of branching statements: if else, if else if and switch case.
Type 1 : if else statement
This is the simple form of conditional statement in which statement are executed based on given condition. When condition is true, first statement is executed otherwise second statement is executed. In this statement else part (second part) is option.
Syntax:
if(condition)
first statement;
else
second statement;
Example 13 shows the simple use of simple if statement to check the number is odd or even.
EXAMPLE 13
<!DOCTYPE html>
<html>
<body>
<h2>Example of simple if statement </h2>
<script type="text/javascript">
var n=prompt(" Enter a number = ");
if(n%2==1)
document.write(n+ " is odd number ");
else
document.write(n+ " is even number ");
</script>
</body>
</html>
Type 2 : if else if statement
When we have two or more conditions to be checked in a series , we can use if-else if statement. This is a ladder type of if else conditional statement in which statements are executed based on multiple given conditions. When condition1 is true, first statement is executed, otherwise the control moves to test the second condition. When condition2 is true; second statement is executed, otherwise moves to next condition and so on. When all given conditions are false finally last statement is executed.
Syntax:
if(condition1)
first statement;
else if(condition2)
second statement;
else
last statement;
Example 14 shows the simple use of if else if statement to find the largest one among threee numbers.
EXAMPLE 14
<!DOCTYPE html>
<html>
<body>
<h2>Example of if else if statement </h2>
<script type="text/javascript">
var a=1;
var b=2;
var c=3;
document.write("<br> a=1<br>b=2<br>c=3<br>");
if(a>b&&a>c)
document.write(a+ " is greatest number ");
else if(b>c)
document.write(b+ " is greatest number ");
else
document.write(c+ " is greatest number ");
</script>
</body>
</html>
Type 3 : switch case statement
When a program flow of given the problem is divided into multi-path statements, then we can apply switch case statement. It selects the case based on the value of expression of the switch statement.
Syntax:
switch(expression) // expression
{
case "1": statements;
break;
case "2": statements;
break;
case "n": statements;
break;
default: // default case is option
default statement;
}
Example 15 shows the simple use of switch case statement, in this example program takes a value (1 to 7) and displays the respective day on text format.
EXAMPLE 15
<!DOCTYPE html>
<html>
<body>
<h2>Example of switch statement </h2>
<script type="text/javascript">
var day=prompt(" Enter a number = ");
switch(day)
{
case "1":
document.write( " <br> Sunday");
break;
case "2":
document.write( " <br> Monday");
break;
case "3":
document.write( " <br> Tuesday");
break;
case "4":
document.write( " <br> Wednesday");
break;
case "5":
document.write( " <br> Thursday");
break;
case "6":
document.write( " <br> Friday");
break;
case "7":
document.write( " <br> Saturday");
break;
default:
document.write(" <br> Invalid Day");
}
</script>
</body>
</html>
Looping is the process of executing the same program statement or block of program statements repeatedly for specified number of times or till the given condition is satisfied. There are three types of loops: while, do while and for loop. In every loop there are three expressions: initialization, condition and counter. The initialization defines the starting point of a loop, condition defines the stopping point and the counter increments or decrements the value of counter.
Type 1: while loop
In while loop, it checks condition at first; if it is found true then it executes the statements written in its body part otherwise it just gets out from the loop structure. It is entry control or pre-test loop.
Syntax:
initialization;
while (condition)
{
statements;
increment/decrement;
}
Example 16 shows the basic example of while loop. It displays numbers from 1 to 10.
EXAMPLE 16
<!DOCTYPE html>
<html>
<body>
<h2>Example of while loop </h2>
<script type="text/javascript">
var counter=1;
while(counter<=10)
{
document.write( " <br> " +counter);
counter++;
}
</script>
</body>
</html>
Type 2: do while loop
In do while loop, it executes the statements written in inside body part and finally checks the condition, if the condition is true then the control of the loop moves to second pass for further execution, otherwise it exists from the loop structure. It is exit control or post-test loop.
Syntax:
initialization;
do
{
statements;
increment/decrement;
} while(condition);
Example 17 shows the basic example of do while loop. It displays multiplication table of 5.
EXAMPLE 17
<!DOCTYPE html>
<html>
<body>
<h2>Example of do while loop </h2>
<script type="text/javascript">
var count=1;
var m;
do
{
m=5*count;
document.write( " <br> " +m);
count++;
}while(count<=10);
</script>
</body>
</html>
Type 3: for loop
The for loop is the most used loop in programming. It is same as while loop but the syntax is different. The initialization, condition and counter are defined at the same line within the loop. These expressions are seperated by semicolon.
Syntax:
for(initialization;condition;counter)
{
statements;
}
Example 18 shows the basic example of while loop. It displays numbers factorial of given number.
EXAMPLE 18
<!DOCTYPE html>
<html>
<body>
<h2>Example of for loop </h2>
<script type="text/javascript">
var count=1;
var f=1;
var i,n;
n=prompt("Enter a number : ");
for(i=1;i<=n;i++)
{
f=f*i;
}
document.write( " <br> The factorial is "+f);
</script>
</body>
</html>
Assignment XII - Ch 3 (4) 1. Write the general syntax to define user defined function.
2. Compare local and global function.
3. List any three types of branching statement.
4. List any three types of looping statements.
5. What are the three major components of a loop.
3.9 Object Oriented Programming and Event Handling
In object-oriented programming, an object is defined as people,person, thing etc which exits in real world. Every object has two fundamental characteristics: the collection of properties and set of behaviours. A set of properties are defined by the set of variables that hold data and the set of behaviours are defined by the set of methods or functions. For example, car , student,bank_account, employee, Date, Time etc are the examples of objects. Let us consider an object car which has properties like make,model,year,color,car_number etc. The set of behaviours like start(),run(),stop(),break(),turn(),reverse() etc. Finally, the properties and the methods are encapsulated with a single unit car as an object.
A class is defined as collection of similar types of objects whereas an object of instance of the respective class. Therefore, class is template and object is an instance. In JavaScript, users can define their own set of objects by defining common template also known as class. Such objects are called user defined objects. JavaScript also provides some built-in objects are known as Document Object Model (DOM) . Examples of DOM objects are window, frame, form , document etc.
Assessing Properties
Properties of an object can be accessed by using syntax:
objectName.propertyName
Example:
car.make="Toyota"
car.model="RAV4"
car.year=2022
car.number="BA 20 CHA 2020"
Example 19 shows how an object can be defined and how the properties of the object can be accessed.
EXAMPLE 19
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object</h2>
<script type="text/javascript">
var car={
make:"Toyota",
model:"RAV4",
year:2022,
number:"BA 20 CHA 2020"};
document.write( car.make+"--"+car.model+"--"+car.year+"--"+car.number);
</script>
</body>
</html>
Assessing Methods
The methods of an object can be accessed by using the syntax:
objectName.methodName()
The set of arguments may be required for accessing the method like function call.
Example:
car.start();
car.run();
car.turn();
car.stop();
Example 20 shows how an object can be defined and how the methods of the object can be accessed. In object-orineted programming this operator helps to access the properties of respective object within the scope of the object.
EXAMPLE 20
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object</h2>
<script type="text/javascript">
var car={
make:"Toyota",
model:"RAV4",
year:2022,
number:"BA 20 CHA 2020",
display:function () {
return this.make+"--"+this.model+"--"+this.year+"--"+this.number;
}
};
document.write(car.display());
</script>
</body>
</html>
Event Handling
Event handling is one of the important features of object-oriented programming. It is an efficient and user-friendly mechanism in graphical user interface (GUI) environment. Event is defined as an action of an application or user such as mouse click, mouse over, pressing any key, open window, close window , etc that triggers an action related to an object. In web programming, event is useful mechanism to communicate between HTML with JavaScript. When a user accesses a webpage in browser the page loads on the browser, it is called an event, when user clicks a button, it is also an event. Events are the parts of the Document Object Model(DOM) of JavaScript. Every HTML event can communicate with JavaScript codes. Some popular HTML5 standard events are listed below
Here script defines JavaScript function to be executed against that event.
Example 21 shows a basic example of event handling program. In this program the HTML event onclick is used to trigger the JavaScript function test() that displays 'Example of Event' on page.
EXAMPLE 21
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
document.write("Example of Event");
}
</script> </head>
<body>
<p> Click on Button to Trigger the function</p>
<input type="button" onclick="test()" value="click">
</body>
</html>
Function ( ) Constructor
In object-oriented programming, a constructor is a special type of function which helps to create an object. It creates a new object with some initial values for respective member variables. The keywords new Function() are used to define a new constructor. The normal user-defined function is defined by using the keyword function whereas the constructor is defined using new Function ().
The following syntax is used to define a new constructor.
var variable_name=new Function(arg1,arg2,...,"function body");
Example 22 demonstrates use of function constructor in JavaScript.
EXAMPLE 22
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var area= new Function ("L","B","return L*B");
function display(){
var result;
result=area(20,10);
document.write(result);
}
</script> </head>
<body>
<input type="button" onclick="display()" value="Call Function">
</body>
</html>
Function Literals
A function literals is an expression that defines an unnamed function. A function without name is function literals in JavaScript. The general syntax to define function literal is as follows:
var variable_name=function (arg1,arg2,....)
{
Function body
};
Example 23 demonstrates use of function literals in JavaScript.
EXAMPLE 23
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var area= function(L,B)
{
return L*B;
};
function display(){
var result;
result=area(20,10);
document.write(result);
}
</script> </head>
<body>
<input type="button" onclick="display()" value="Call Function">
</body>
</html>
Array Object
An array can also be defined as an object in JavaScript. An array is the collection of similar types of data treated as single unit. Each of the items of array can be accessed by using array index which starts from 0 to ends with the array size-1, where the size defines the length(total data items) in the array. An array is defined by using the keyword new Array(). Consider the following examples to define a new array.
var arrayName=new Array();
or
var araayName=new Array(SIZE);
// SIZE defines size of the array
Example:
var a=new Array(5);
or
var a=[10,20,30,40,50];
Example 24 shows how an array can be implemented as an object. This program display the contents of an array.
EXAMPLE 24
<!DOCTYPE html>
<html>
<body>
<h2> JavaSript Array Object </h2>
<script type="text/javascript">
var a = new Array(5);
a=[10,20,30,40,50];
document.write(a);
</script>
</body>
</html>
String Object
A string is defined as an array of characters or group of characters. String automatically assigns a null character '\0' at the end of the string. String is defined as an object in JavaScript. The general syntax to define string object is as follows:
var string_name=new String(string);
Example 25 shows how string can be implemented as an object. This program display the length of the string using built-in memory property length.
EXAMPLE 25
<!DOCTYPE html>
<html>
<head>
<title> String Length Property </title>
</head>
<body>
<script type="text/javascript">
var str = new String("PLK computer SIR");
document.write("String length is "+str.length);
</script>
</body>
</html>
Assignment XII - Ch 3 (5) 1. What are properties and methods of an object?
Ans: Every object has two fundamental characteristics: the collection of properties and set of behaviours. A set of properties are defined by the set of variables that hold data and the set of behaviours are defined by the set of methods or functions. For example, car , student,bank_account, employee, Date, Time etc are the examples of objects. Let us consider an object car which has properties like make,model,year,color,car_number etc. The set of behaviours like start(),run(),stop(),break(),turn(),reverse() etc. Finally, the properties and the methods are encapsulated with a single unit car as an object.
2. List any two events of a mouse.
3. Write the syntax to define a function constructor.
4. Write the syntax to define a function literal.
5. Write syntax to define an array object.
3.10 Image, Event and Form Objects
In HTML, an image can inserted in web document by using <img> tag with properties src, height, width etc. This <img> element of HTML can be accessed by using getElementById(). Some of the image object properties are listed below.
Example 26 gives an idea about an image object can be accessed in JavaScript.
EXAMPLE 26
<!DOCTYPE html>
<html>
<body>
<p>Click Button to Display Image</p>
<button onclick="myfunction()">Click</button>
<script type="text/javascript">
function myfunction(){
var x=document.createElement("IMG");
x.setAttribute("src","https://drive.google.com/uc?export=view&id=1MVlplMMFeXsyboR_2M_K27WwmtJO47fW");
x.setAttribute("width","200");
x.setAttribute("height","200");
x.setAttribute("alt","Refress to show image");
document.body.appendChild(x);
}
</script>
</body>
</html>
Example 27 is a basic example of image object and this program counts the number of images on web document.
EXAMPLE 27
<!DOCTYPE html>
<html>
<body>
<img src="https://drive.google.com/uc?export=view&id=1pOa099tcHcHhKtyqB-gNvNfr1ke-qj_h" alt="First Image" width="200" height="200">
<img src="https://drive.google.com/uc?export=view&id=1MVlplMMFeXsyboR_2M_K27WwmtJO47fW" alt="Second Image" width="200" height="200">
<p> Click Button to display the number of images </p>
<button onclick="testFunction()">Count Image</button>
<p id="test"> </p>
<script type="text/javascript">
function testFunction(){
var a=document.images.length;
document.getElementById("test").innerHTML=a;
}
</script>
</body>
</html>
Form Object
In HTML, form can inserted in web document by using <form> tag with form element <input>, <select>,<textarea>,<button> etc. The <form> element can be accessed by using getElementById().
Example 28 shows how form element textbox can be implemented in JavaScript.
EXAMPLE 28
<!DOCTYPE html>
<html>
<body>
<h2> Type Text on the TextBox</h2>
<input type="text" id="text1" value=" ">
<button onclick="fun1()">Click</button>
<p id="p1"> </p>
<script type="text/javascript">
function fun1(){
var x=document.getElementById("text1").value;
document.getElementById("p1").innerHTML=x;
}
</script>
</body>
</html>
Example 29 shows how form element select can be implemented in JavaScript.
EXAMPLE 29
<!DOCTYPE html>
<html>
<body>
<h2> Select Options </h2>
<select id="s1" size="1">
<option> Coke </option>
<option> Sprite </option>
<option> Fanta </option>
<option> Slice </option>
</select>
<br><br>
<button onclick="fun2()">Try It</button>
<p id="demo"> </p>
<script type="text/javascript">
function fun2(){
var x=document.getElementById("s1").value;
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
Example 30 shows how form element textarea can be implemented in JavaScript.
EXAMPLE 30
<!DOCTYPE html>
<html>
<body>
<h2> Type text on Textarea</h2>
<textarea id="t1">
</textarea>
<br><br>
<button onclick="fun3()">Click</button>
<p id="p1"> </p>
<script type="text/javascript">
function fun3(){
var x=document.getElementById("t1").value;
document.getElementById("p1").innerHTML=x;
}
</script>
</body>
</html>
Example 31 shows how form element button can be implemented in JavaScript.
EXAMPLE 31
<!DOCTYPE html>
<html>
<body>
<h2> Create New Button </h2>
<button onclick="fun4()">Click</button>
<script type="text/javascript">
function fun4(){
var x=document.createElement("BUTTON");
var t = document.createTextNode("Click Me");
x.appendChild(t);
document.body.appendChild(x);
}
</script>
</body>
</html>
3.11 Form Validation and jQuery
Form is useful interface to enter data to the system and form element can be implemented using HTML tag <form>. While entering data in form, there may be chances of entering incorrect data or blank data for all the mandatory fields which may lead data inconsistency in web server. Although, form validation process is also occurred at server side, it is better to validate at client side during data entering time. It improves efficiency of system by minimizing server request from the client. In order to make more data consistence, JavaScript provides two levels of data validation techniques: in basic level, the form must be checked to make sure all the mandatory fields are filled in, in format validation the data that is entered must be checked for correct form and value. Consider the following Example 32 to validate a simple form.
EXAMPLE 32
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function validate() {
if(document.myForm.Name.value== "") {
alert( "Please provide your name !" );
document.myForm.Name.focus();
return false;
}
if(document.myForm.EMail.value== "" ) {
alert( "Please provide your Email!" );
document.myForm.EMail.focus();
return false;
}
if(document.myForm.Zip.value== "" || isNaN(document.myForm.Zip.value) ||
document.myForm.Zip.value.length!=5)
{
alert ("Enter zip in the format #####" );
document.myForm.Zip.focus();
return false;
}
if(document.myForm.Country.value == "-1" ) {
alert( "Please provide your country!" );
return false;
}
return(true);
}
</script>
</head>
<body>
<form action="example.php" name="myForm" onsubmit="return validate()">
<table cellspacing="2" cellpadding="2" border ="0">
<tr>
<td align="right">Name</td>
<td> <input type="text" name="Name"></td>
</tr>
<tr>
<td align="right" >EMail</td>
<td> <input type="email" name="EMail"></td>
</tr>
<tr>
<td align="right">Zip Code</td>
<td><input type="text" name= "Zip"></td>
</tr>
<tr>
<td align="right">Country</td>
<td> <select name="Country">
<option value="-1" selected>Choose Country </option>
<option value="1">USA</option>
<option value="2">UK</option>
<option value="3">Nepal</option>
</select>
</td>
</tr>
<tr>
<td align="right"> </td>
<td> <input type ="submit" value="Submit"> </td>
</tr>
</table>
</form>
</body>
</html>
Introduction to jQuery
HTML, CSS, and JavaScript are the three fundamental languages for developing static websites. HTML provides structure of a websites, CSS provides dynamic style and JavaScript adds interactive functionality, with the users. In fact, most animations and events that happens as a result of a user clicking, hovering, or scrolling are constructed with JavaScript. jQuery is the collection of JavaScript library that makes it easy to add dynamic behaviour to HTML elements. It is a tool that makes programming "Write Less, Do More" JavaScript library. Moreover, it also adds cross-browser compatible that means your codes are compatible with any modern browser. Many of the biggest companies such as Google, Microsoft, Apple, IBM, use jQuery. Let us consider a program "Hello World" program in both JavaScript and jQuery.
In JavaScript
document.getElementByld("p").innerHTML = "Hello World!";
OR
document.write("Hello World");
In jQuery
$("p").html("Hello, World!");
jQuery can be implemented in JavaScript by downloading jQuery from jquery.com. jQuery library is a single JavaScript file that can be implemented using <script> tag within <head>. The jquery-3.5.1.min.js file must be stored in the same directory where the page is stored.
<head>
<script src="jquery-3.5.1.min.js"> </script>
</head>
Otherwise , you can include the jQuery library from google CDN (Contenet Delivery Network).
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jqury.min.js"> </script>
</head>
The basic syntax of jQury selecting HTML elements and performing some action on the elements are as follows:
$(selector).action()
Where, the sign $ helps to define or access jQuery, a (selector) defines HTML elements and jQuery action() to be performed on the elements.
for example:
Example 33 is a simple example of jQuery which helps to hide the paragraph by clicking the event button click.
EXAMPLE 33
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
<body>
<h2> Simple Example of jQuery </h2>
<p> This is a sample paragraph </p>
<button>Click me </button>
</body>
</html>
Some Useful Built in Objects
Some of the commonly used in built in objects with respective methods and events are listed on the table.
Assignment XII - Ch 3 (6)1. List any four properties of image object.
2. Write syntax to access <form> element in JavaScript.
3. Mention the levels of form validation process.
4. What is a jQuery?
5. Write syntax to define jQuery in JavaScript.
3.12 Server Side Scripting using PHP
A scripting language is a kind of web-based programming language for solving web related problems. There are two types of scripting languages: client side scripting(JavaScript) language and server-side scripting(PHP,ASP) language.
Server Side Scripting using PHP for the following reasons:
PHP is a server side scripting language that is embedded in HTML.
It is used to manage dynamic content, database, session tracking, even build entire e-commerce sites.
It is integrated with a number of popular databases, including MySQL, Oracle, Sybase, Informix and Microsoft SQL server.
PHP is pleasantly dynamic in its execution, especially when compiled as an Apache module.
The MySQL server, once started, executes even very complex queries with huge result sets in record-setting time.
PHP supports a large number of major protocols such as POP3,IMAP and LDAP. PHP4 added support for Java and distributed object architecture (COM and COBRA), making n-tier development a possibility for the first time.
3.13 Introduction to PHP
PHP originally stood for Personal Home Pages, although the acronym is now understood to stand (somewhere recursively) for PHP:Hypertext Preprocessor.
When any person request for any PHP page in the address bar of the browser that request is first sent to the server then server interpret PHP files and return back response in form of HTML. That's why it is called HyperText Preprocessor.
PHP started out as a small open source project that evolved as more and more popular found how useful it was. Rasmus Lerdorf released the first version of PHP war back in 1994.
Features of PHP
This syntax of PHP is similar to C, so, it is easy to learn and use.
PHP runs efficiently on the server side.
PHP is free software under the PHP license. We can easily download it from the official PHP website.
PHP runs on various platforms like Windows, Linux, UNIX, Mac OS etc.
It is compatible with almost all servers used today like Apache, IIS, etc.
PHP supports a wide range of databases
Common uses of PHP
By using PHP, you can create , open, read, write, and close files.
PHP can handle forms, i.e. gather data from files, save data to a file, through email hat t geh on icat you can send data, return data to the user.
You add, delete, and modify elements within your database through PHP.
Access cookies variables and set cookies.
Using PHP, you can restrict users to access some pages of your website.
It can encrypt data.
PHP File
PHP files can contain text,HTML,CSS,JavaScript and PHP code. PHP code is executed on the server, and the result is returned to the browser as plain HTML. PHP files have extension .php.
Hardware requirements
Actually, hardware requirements depend on the user, but minimum requirements an follows:
(a) 1 GHZ CPU Processor
(b) 2 GB RAM
(c) 1 GB Hard Disk
Software requirements:
You need to be running PHP 5.4+ on a web server. Software has been deployed sucessfully on both Apache and IIS web servers and tested with MySQL, MariaDB and MSSQL Server databases at the backend.
Operating System: Linux, Unix, Windows
Web Server: Apache Web Server, IIS (with ISAPI_Rewrite installed)
PHP Version:
- For MYSQL & MariaDB Editions, PHP 5.4 or above with PHP XML extension enabled.
- For SQL Server Editions, PHP 5.4 or above with PHP XML extension enabled and Microsoft SQL Server Driver for PHPDatabase: MYSQL 5.1 or above, MariaDB 10.0 or above, Microsoft SQL Server 2005 or above.
3.14 Object oriented programming with server side scripting
Object-Oriented Programming (OOP), is a type of programming language principle t helps in building complex, reusable web applications. Object oriented programm languages like JAVA, PHP, Python, and ASP which are used for server side script having following concepts:
+ Class
+ Objects
+ Inheritance
+ Interface
+ Abstraction
For object oriented programming in detail, we will discuss in Chapter 5.
Class & Object:Class is a programmer-defined data type, which includes local methods and local variables.
Class is a collection of objects, Object has properties and behaviour.
First we have to define a class like php class, where classname should be same filename.
When we create a class, the object is created with new keyword.
Calling Member Function
When the object is created we can access the variables and method function of the cla with the help of operator -, accessing the method is done to get the information of the method.
Inheritance
When the properties and the methods of the parent class are accessed by the child class we call the concept has inheritance. The child class can inhent the parenr methed and give own method implementation, this property is called overridden method. To pertor inheritance, extends keyword is used.
INTERFACES:
An interface is a description of the actions that an object can do. Interface is written in the same way as the class the declaration with interface keyword.
Abstract Classes:
An abstract class is a class that contains at least one abstract method. The abstract method s hunction declaration without anybody and it has the only name of the method and its arameters. There can be any number of methods in the class and we have to declare the Ciass as abstract only when there is an abstract method.
3.15 Basic PHP syntax
Before starting PHP tags, lets discuss some terms:
a) Canonical PHP tags
Mostly canonical PHP tags style used as:
<?php ...?>
If you use this style, you can be positive that your tags will always be correctly interpreted .Here, symbol "?" is used in the starting and ending. So, it is a short-open
b) Short-open (SGML-style) tags
Short or short-open tags used with symbol "?" as:
A PHP script can be placed anywhere in the document. A PHP script starts with<?php and ends with ?>.
<?php // PHP code goes here?>
The default file extension for PHP files is ".php". A PHP file normally contains HTML tags, and some PHP scripting code.
EXAMPLE 34
<!DOCTYPE html>
<html>
<body>
<h1> My first PHP page </h1>
<?php
echo "Hello World!";
?>
</body>
</html>
In this example, PHP script that uses a built-in PHP function "echo" to output the text "Hello World!" on a web page.
Assignment XII - Ch 3 (7)1. What is server side script language?
2. List the basic hardware and software requirements.
3. Mention the uses of PHP.
4. Describe OOP with scripting side language.
5. Write basic syntax to define PHP.
3.16 PHP data types
PHP supports the following data types:
a) String
b) Integer
c) Float (floating point numbers - also called double)
d) Boolean
e) Array
f) Object
g) NULL
PHP String
A string is a sequence of characters. It contains number, letter or symbol. A string can be any text inside quotes. You can use single or double quotes. String is followed by $ symbol.
Example:
$x = "My Collegel";
$y = 'My College!',
PHP Integer
An integer data type is a non-decimal number. It may be positive or negative numbeot integer value lies between -2,147,483,648 and 2,147,483,647. For example: 1007. dee use $ symbol with variable following message will be display for below prograne php on line 5
Rules for integers:An integer must have at least one digit
An integer must not have a decimal point
An integer can be either positive or negative
Example: $x=6319;
PHP Float
A float (floating point number) isanumber with a decimal point or a number in exponential form. It may be positive or negative. The float data type can commonly store a value up to 1 7976931348623E+308 (platform dependent), and have a maximum precision of 14 digits. For example, 73.258, 0.0009876 etc.
One thing to notice about PHP is that it provides automatic data type conversion. So, if you assign an integer value to a variable, the type of that variable will automatically be an integer. Then, if you assign a string to the same variable, the type will change to a string.
Example
$x = 63.25;
PHP Boolean
A Boolean represents two possible states: TRUE or FALSE Generally, it is used for conditional testing.
Example
$x=true;
$y = false;
Bobleans are often used in conditional testing.
PHP Array
An array stores values in one single is keyword used for PHP amary is an array which stores three values and "Toyota".
Example: $cars= array("Volvo","BMW","Toyota");
PHP Object
An Object is a dala type which stores data and on how to that data.In PHP, an objecr must be explicitly declared.
First we must declare a class of object. For this, we use the class and Sthis keyword. A class is a structure that can contain properties and methods:
EXAMPLE 35
<!DOCTYPE html>
<html>
<body>
<h1> My first PHP page </h1>
<?php
echo "Hello World!";
?>
</body>
</html>
PHP NULL Value
A variable of data type NULL is a variable that has no value assigned to it. Null is a special data type which can have only one value: NULL.
EXAMPLE 36
<!DOCTYPE html>
<html>
<body>
<h1> My first PHP page </h1>
<?php
echo "Hello World!";
?>
</body>
</html>
3.17 Basic Programming in PHP
XII- Ch-3 Exercise
A. Multiple Choice Questions (Tick the best options)
1. Which of the following language is not web scripting language?
a. HTML
b. CSS
c. JavaScript
d. C Language
2. Which of the following statement is not true?
a. HTML is standard language for development webpages
b. HTML helps to embed text, graphics, audio, video and animation on webpage
c. HTML is also used to store database in websites
d. HTML also defines a link to traverse from one page to another
3. An example of client-side scripting language is ....
a. PHP
b. JSP
c. ASP
d. JavaScript
4. JavaScript was originally developed by ......
a. Google
b. Microsoft
c. Sun microsystem
d. Netscape
5. What are the basic three types of data in JavaScript?
a. Numbers, Strings and Boolean
b. Numbers Strings and Bytes
c. Integer, Character and Boolean
d. Numbers, Strings and Array
6. Grater than equal to >= is an example of
a. Assignement
b. Comparaison
c. Logical
d. Conditional
7. WHich of the following statement is not a type of looping statement?
a. do while
b. for
c. switch case
d. while
8. Which of the following is not an example of object?
a. Array
b. String
c. Image
d. Number
9. Which of the following statement is not true?
a. PHP is open-source scripting language
b. PHP is client site scripting language
c. PHP can be integrated with database like MYSQL, Oracle, Sybase and MS SQL Server
d. PHP syntax is same as C language
10. What are the two method of form access?
a. get/post
b. give/take
c. input/output
d. get/set
11. In PHP in order to access MYSQL database you will use:
a mysqlconnect() function
b. mysql-connect() function
c. mysql_connect() function
d. sql_connect[) function
12. The .... statement is used to delete a table.
a. DROP TABLE
b. DELETE TABLE
c. DEL TABLE
d. REMOVE TABLE
13. Which Program Copies The Databases From One Server To Another?
a. Mysqlcopydb
b. Mysqldbcopy
c. Mysqlflushdb
d. Mysqldbflush
14. Which among the following have the maximum bytes?
a. varchar
b. char
c. Both varchar and char
d. Text Type
15. The "father" Of MYSQL......
a. Bill Joy
b. Michael Widenius
c. Bill Gates
d. Stephanie Wall
(B) Short Answer Questions:
1. What are static webpage and dynamic web page ?
2. Differentiate between client-side and server-side scripting language.
3. What is the importance of script in web programming? Explain.
4.Explain how a client-side application can access a server-side application with suitable diagram.
5. What is JavaScript? Explain the major features and importance.
6. What is OOP? Explain the concept of OOP in the context of JavaScript with suitable example.
7. What is event? List any four popular events.
8. What is function constructor? Explain with example.
9. What is array object? Explain how it can be declared.
10. What is form validation? Explain the importance of it.
11. What are PHP operators?
12. Describe different types of PHP variables.
13. How do you connect database with PHP?
14. Write queries to perform different operations in PHP.
C. Long Answer Questions:
1. Write steps to creating SQL database with server side scripting. 2. How do you display queries in tables? Explain it with examples. CASE STUDY (PROJECT WORK) Develop an attractive and informative dynamic web site of your own. Ye features of HTML5, CSS, JavaScript. Design a small webpage that contents at least five fields of form. Valida form validation techniques of JavaScript. 2. Develop a small dynamic website that can capable to communicate dat. post method. A
No comments:
Post a Comment