Web Technology
BCS 502
Unit 3 - Notes
SCRIPTING & NETWORKING
Unit 3 - Notes
Scripting: Java script: Introduction, documents, forms, statements, functions, objects; introduction to AJAX.
Networking : Internet Addressing, InetAddress, Factory Methods, Instance Methods, TCP/IP Client Sockets, URL, URL
Connection, TCP/IP Server Sockets, Datagram.
What is JavaScript
1. JavaScript is a light-weight object-oriented programming language which is used by
several websites for scripting the web pages.
2. It is an interpreted, programming language that enables dynamic interactivity on websites
when applied to an HTML document.
3. It was introduced in the year 1995 for adding programs to the web pages in the Netscape
Navigator browser. Since then, it has been adopted by all other graphical web browsers.
4. With JavaScript, users can build modern web applications to interact directly without
reloading the page every time. The traditional website uses js to provide several forms of
interactivity and simplicity.
Features of JavaScript
There are following features of JavaScript:
1. All popular web browsers support JavaScript as they provide built-in execution
environments.
2. JavaScript follows the syntax and structure of the C programming language. Thus, it is a
structured programming language.
3. JavaScript is a weakly typed language, where certain types are implicitly cast (depending
on the operation).
4. JavaScript is an object-oriented programming language that uses prototypes rather than
using classes for inheritance.
5. It is a light-weighted and interpreted language.
6. It is a case-sensitive language.
7. JavaScript is supportable in several operating systems including, Windows, macOS, etc.
8. It provides good control to the users over the web browsers.
History of JavaScript
In 1993, Mosaic, the first popular web browser, came into existence. In the year
1994, Netscape was founded by Marc Andreessen. He realized that the web needed to become
more dynamic. Thus, a 'glue language' was believed to be provided to HTML to make web
designing easy for designers and part-time programmers.
Consequently, in 1995, the company recruited Brendan Eich intending to implement and embed
Scheme programming language to the browser. But, before Brendan could start, the company
merged with Sun Microsystems for adding Java into its Navigator so that it could compete with
Microsoft over the web technologies and platforms. Now, two languages were there: Java and
the scripting language. Further, Netscape decided to give a similar name to the scripting
language as Java's. It led to 'Javascript'. Finally, in May 1995, Marc Andreessen coined the first
code of Javascript named 'Mocha'. Later, the marketing team replaced the name with
'LiveScript'. But, due to trademark reasons and certain other reasons, in December 1995, the
language was finally renamed to 'JavaScript'. From then, JavaScript came into existence.
Application of JavaScript
JavaScript is used to create interactive websites. It is mainly used for:
o Client-side validation,
o Dynamic drop-down menus,
o Displaying date and time,
o Displaying pop-up windows and dialog boxes (like an alert dialog box, confirm dialog
box and prompt dialog box),
o Displaying clocks etc.
Example of JavaScript
<html>
<body>
<h2>Welcome to JavaScript</h2>
<script>//Start tag
document.write("Hello JavaScript");
// document is object instance of Document object and write is a function
</script>//End Tag
</body>
</html>
Difference Between Java and javaScript
Introduction to JavaScript Documents
→ JavaScript Document object is an object that provides access to all HTML elements of a
document. When an HTML document is loaded into a browser window, then it becomes a
document object.
→ The document object stores the elements of an HTML document, such as HTML, HEAD,
BODY, and other HTML tags as objects.
→ A document object is a child object of the Window object, which refers to the browser.
→ You can access a document object either using window.document property or using object
Directly
JavaScript Document Object Methods
We can access and change the contents of document by its methods.
The important methods of document object are as follows:
JavaScript Document Object Tree:
JavaScript Document Object Methods :
JavaScript Variable
A JavaScript variable is simply a name of storage location.
There are two types of variables in JavaScript
1. Local variable
2. Global variable.
There are some rules while declaring a JavaScript variable (also known as identifiers).
1. Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ ) sign.
2. After first letter we can use digits (0 to 9), for example value1.
3. JavaScript variables are case sensitive, for example x and X are different variables
JavaScript variables Syntax
var x = 10;
var _value="sonoo";
Example: //Sum of two variables
<html>
<body>
<script>
var x = 10;
var y = 20;
var z=x+y;
document.write(z);
</script>
</body>
</html>
1. JavaScript local variable
A JavaScript local variable is declared inside block or function. It is accessible within the
function or block only. For example:
<script>
function abc(){
var x=10;//local variable
</script>
2. JavaScript global variable
A JavaScript global variable is accessible from any function. A variable i.e. declared outside
the function or declared with window object is known as global variable. For example:
<html>
<body>
<script>
var data=200;//gloabal variable
function a(){
document.writeln(data); }
function b(){
document.writeln(data); }
a();//calling JavaScript function
b();
</script>
Data Types
JavaScript provides different data types to hold different types of values. There are two types of
data types in JavaScript.
1. Primitive data type
2. Non-primitive (reference) data type
JavaScript is a dynamic type language, means you don't need to specify type of the variable
because it is dynamically used by JavaScript engine. You need to use var here to specify the data
type. It can hold any type of values such as numbers, strings etc. For example:
var a=40;//holding number
var b="Rahul";//holding string
JavaScript primitive data types
There are five types of primitive data types in JavaScript. They are as follows:
JavaScript non-primitive data types
The non-primitive data types are as follows:
JavaScript Operators
JavaScript operators are symbols that are used to perform operations on operands.
For example:
var sum=10+20;
Here, + is the arithmetic operator and = is the assignment operator.
There are following types of operators in JavaScript.
1. Arithmetic Operators
2. Comparison (Relational) Operators
3. Bitwise Operators
4. Logical Operators
5. Assignment Operators
6. Special Operators
1. Arithmetic Operators
Arithmetic operators are used to perform arithmetic operations on the operands. The following
operators are known as JavaScript arithmetic operators
2. Relational Operators
The JavaScript comparison operator compares the two operands. The comparison operators are
as follows:
3. Bitwise Operators
The bitwise operators perform bitwise operations on operands. The bitwise operators are as
follows:
4.Logical Operators
The following operators are known as JavaScript logical operators.
5. Assignment Operators
The following operators are known as JavaScript assignment operators
6. Special Operators
The following operators are known as JavaScript special operators.
6. Special Operators
The following operators are known as JavaScript special operators.
JavaScript If-else
The JavaScript if-else statement is used to execute the code whether condition is true or false.
There are three forms of if statement in JavaScript.
1. If Statement
2. If else statement
3. if else if statement
If Statement
<script>
var a=20;
if(a>10){
document.write("value of a is greater than 10");
</script>
JavaScript If...else Statement
It evaluates the content whether condition is true of false. The syntax of JavaScript if-else
statement is given below.
if(expression){
//content to be evaluated if condition is true
else{
//content to be evaluated if condition is false
JavaScript If...else if statement
It evaluates the content only if expression is true from several expressions. The signature of
JavaScript if else if statement is given below.
<script>
var a=20;
if(a==10){
document.write("a is equal to 10"); }
else if(a==15){
document.write("a is equal to 15"); }
else if(a==20){
document.write("a is equal to 20"); }
else{
document.write("a is not equal to 10, 15 or 20"); }
</script>
JavaScript Loops
The JavaScript loops are used to iterate the piece of code using for, while, do while loops. It
makes the code compact. It is mostly used in array.
There are four types of loops in JavaScript.
1. for loop
2. while loop
3. do-while loop
JavaScript For loop
The JavaScript for loop iterates the elements for the fixed number of times. It should be used if
number of iteration is known. The syntax of for loop is given below
or (i=1; i<=5; i++)
document.write(i + "<br/>")
2) JavaScript while loop
The JavaScript while loop iterates the elements for the infinite number of times. It should be
used if number of iteration is not known. The syntax of while loop is given below.
while (condition)
code to be executed
3) JavaScript do while loop
The JavaScript do while loop iterates the elements for the infinite number of times like while
loop. But, code is executed at least once whether condition is true or false. The syntax of do
while loop is given below.
do{
code to be executed
}while (condition);
JavaScript Functions
JavaScript functions are used to perform operations. We can call JavaScript function many
times to reuse the code.
Advantage of JavaScript function
There are mainly two advantages of JavaScript functions.
1. Code reusability: We can call a function several times so it save coding.
2. Less coding: It makes our program compact. We don’t need to write many lines of code
each time to perform a common task.
JavaScript Function Syntax
The syntax of declaring function is given below.
function functionName([arg1, arg2, ...argN]){
//code to be executed
JavaScript Objects
A JavaScript object is an entity having state and behavior (properties and method). For example:
car, pen, bike, chair, glass, keyboard, monitor etc.
JavaScript is an object-based language. Everything is an object in JavaScript.
JavaScript is template based not class based. Here, we don't create class to get the object. But, we
direct create objects.
Creating Objects in JavaScript
There are 3 ways to create objects.
1. By object literal
2. By creating instance of Object directly (using new keyword)
3. By using an object constructor (using new keyword)
1) JavaScript Object by object literal
The syntax:
object={
property1:value1,property2:value2.....propertyN:valueN
As you can see, property and value is separated by: (colon).
Simple example of creating object in JavaScript:
<script>
emp={
id:102,name:"Shyam Kumar",salary:40000
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>
Output:
102 Shyam Kumar 40000
2) By creating instance of Object
The syntax of creating object directly is given below:
var object_name=new Object();
Here, new keyword is used to create object.
Let’s see the example of creating object directly.
<script>
var emp=new Object();
emp.id=101;
emp.name="Ravi Malik";
emp.salary=50000;
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>
3) By using an Object constructor
Here, you need to create function with arguments. Each argument value can be assigned in the
current object by using this keyword.
The this keyword refers to the current object.
The example of creating object by object constructor is given below.
<script>
function emp(id,name,salary){
this.id=id;
this.name=name;
this.salary=salary;
e=new emp(103,"Vimal Jaiswal",30000);
document.write(e.id+" "+e.name+" "+e.salary);
</script>
Output:
103 Vimal Jaiswal 30000
JavaScript Array
JavaScript array is an object that represents a collection of similar type of elements.
There are 3 ways to construct array in JavaScript
1. By array literal
2. By creating instance of Array directly (using new keyword)
3. By using an Array constructor (using new keyword)
1) JavaScript array literal
The syntax of creating array using array literal is given below:
var arrayname=[value1,value2.....valueN];
values are contained inside [ ] and separated by , (comma).
Let's see the simple example of creating and using array in JavaScript.
<script>
var emp=["Sonoo","Vimal","Ratan"];
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br/>");
</script>
2) JavaScript Array directly (new keyword)
The syntax of creating array directly is given below:
var arrayname=new Array();
Here, new keyword is used to create instance of array.
Let's see the example of creating array directly.
<script>
var i;
var emp = new Array();
emp[0] = "Arun";
emp[1] = "Varun";
emp[2] = "John";
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br>");
</script>
3) JavaScript array constructor (new keyword)
Here, you need to create instance of array by passing arguments in constructor so that we don't
have to provide value explicitly.
The example of creating object by array constructor is given below.
<script>
var emp=new Array("Jai","Vijay","Smith");
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br>");
</script>
Array Properties
Here is a list of the properties of the Array object along with their description.
Introduction to Forms
Forms are the basics of HTML. We use HTML form element in order to create
the JavaScript form. For creating a form, we can use the following sample code:
<html>
<head>
<title> Login Form</title>
</head>
<body>
<h3> LOGIN </h3>
<form form ="Login_form" onsubmit="submit_form()">
<h4> USERNAME</h4>
<input type="text" placeholder="Enter your email id"/>
<h4> PASSWORD</h4>
<input type="password" placeholder="Enter your password"/></br></br>
<input type="submit" value="Login"/>
<input type="button" value="SignUp" onClick="create()"/>
</form>
</html>
In the code:
o Form name tag is used to define the name of the form. The name of the form here is
"Login_form". This name will be referenced in the JavaScript form.
o The action tag defines the action, and the browser will take to tackle the form when it is
submitted. Here, we have taken no action
o The method to take action can be either post or get, which is used when the form is to be
submitted to the server. Both types of methods have their own properties and rules.
o The input type tag defines the type of inputs we want to create in our form. Here, we have
used input type as 'text', which means we will input values as text in the textbox.
o Net, we have taken input type as 'password' and the input value will be password.
o Next, we have taken input type as 'button' where on clicking, we get the value of the form
and get displayed.
Other than action and methods, there are the following useful methods also which are provided
by the HTML Form Element
o submit (): The method is used to submit the form.
o reset (): The method is used to reset the form values.
Introduction to AJAX
Introduction to AJAX:-
AJAX stands Asynchronous, Javascript and XML. Asynchronous means that we are exchanging data to from the Serven in
the background without having to refresh the page again and again group of inter related web development technique
used on the client side to create web application.
AJAX is not a programming language rather AJAX is a technique used by web developer inorder to make website behave
like desktop applications.
➔AJAX is Based on Internet StandardsAJAX is based on internet standards, and uses a combination of:
➔XMLHttpRequest object (to exchange data asynchronously with a server)
➔JavaScript/DOM (to display/interact with the information)
➔CSS (to style the data)XML (often used as the format for transferring data)AJAX applications are browser- and
platform-independent
Why use Ajax?
Mainly to build a fast, dynamic website, but also to save resources.
For improving sharing of resources, it is better to use the power of all the clientcomputers rather than just a unique
server and network.
Ajax allows to perform processing on client computer (in JavaScript) with datataken from the server. The processing of
web page formerly was only server-side,using web services or PHP scripts, before the whole page was sent within
thenetwork.
But Ajax can selectively modify a part of a page displayed by the browser, andupdate it without the need to reload the
whole document with all images, menus,etc...
For example, fields of forms, choices of user, may be processed and the resultdisplayed immediately into the same page
How AJAX works?
AJAX communicates with the server using XMLHttpRequest object. Let's try to understand the flow of ajax or how ajax
works by the image displayed below.
As you can see in the above example, XMLHttpRequest object plays a important role.
1. User sends a request from the UI and a javascript call goes to XMLHttpRequest object.
2. HTTP Request is sent to the server by XMLHttpRequest object.
3. Server interacts with the database using JSP, PHP, Servlet, ASP.net etc.
4. Data is retrieved.
5. Server sends XML data or JSON data to the XMLHttpRequest callback function.
6. HTML and CSS data is displayed on the browser.
IP Address :
1. The IP address is a network layer address that uniquely identifies each
computer on network.
2. Each TCP/IP host is identified by a logical IP address.
3. The IP address identifies a system’s location on the network. An IP
address must be globally unique and have a uniform format.
Classful Addressing
The 32-bit IP address is divided into five sub-classes. These are given below:
• Class A
• Class B
• Class C
• Class D
• Class E
Each of these classes has a valid range of IP addresses. Classes D and E are reserved for multicast and experimental
purposes respectively. The order of bits in the first octet determines the classes of the IP address.
• IP addresses are globally managed by Internet Assigned Numbers Authority(IANA) and Regional Internet
Registries(RIR).
• While finding the total number of host IP addresses, 2 IP addresses are not counted and are therefore,
decreased from the total count because the first IP address of any network is the network number and whereas
the last IP address is reserved for broadcast IP.
Class A
IP addresses belonging to class A are assigned to the networks that contain a large number of hosts.
• The network ID is 8 bits long.
• The host ID is 24 bits long.
Class B
IP address belonging to class B is assigned to networks that range from medium-sized to large-sized networks.
• The network ID is 16 bits long.
• The host ID is 16 bits long.
Class C
IP addresses belonging to class C are assigned to small-sized networks.
• The network ID is 24 bits long.
• The host ID is 8 bits long.
Class D
IP address belonging to class D is reserved for multi-casting. The higher-order bits of the first octet of IP
addresses belonging to class D is always set to 1110. The remaining bits are for the address that interested
hosts recognize.
Class E
IP addresses belonging to class E are reserved for experimental and research purposes. IP addresses of class E range
from 240.0.0.0 – 255.255.255.255. This class doesn’t have any subnet mask. The higher-order bits of the first octet of
class E are always set to 1111.
Socket programming
1. Java socket programming is used for communication between the
applications running on different JRE.
2. Java socket programming can be connection-oriented or connectionless.
3. Socket and ServerSocket classes are used for connection-oriented socket
programming and DatagramSocket and DatagramPacket classes are
used for connection-less socket programming.
Write a program in Java to demonstrate
// A Java program for a Client
import java.net.*;
import java.io.*;
public class Client
{
// initialize socket and input output streams
private Socket socket = null;
private DataInputStream input = null;
private DataOutputStream out = null;
// constructor to put ip address and port
public Client(String address, int port)
{
// establish a connection
try
{
socket = new Socket(address, port);
System.out.println(“Connected”);
// takes input from terminal
input = new DataInputStream(System.in);
// sends output to the socket
out = new DataOutputStream(socket.getOutputStream());
}
catch(UnknownHostException u)
{
System.out.println(u);
}
catch(IOException i)
{
System.out.println(i);
}
// string to read message from input
String line = “”;
// keep reading until “Over” is input
while (!line.equals(“Over”))
{
try
{
line = input.readLine();
out.writeUTF(line);
}
catch(IOException i)
{
System.out.println(i);
}
}
// close the connection
try
{
input.close();
out.close();
socket.close();
}
catch(IOException i)
{
System.out.println(i);
}
}
public static void main(String args[ ])
{
Client client = new Client(“127.0.0.1”, 5000);
}
}
