[go: up one dir, main page]
Scribd
Upload
12 views21 pages

Unit 3

This document provides an overview of scripting and networking concepts, focusing on JavaScript, its features, history, applications, and key components such as variables, data types, operators, control structures, functions, and objects. It also introduces AJAX as a technique for creating dynamic web applications that communicate with servers without refreshing the page. Additionally, the document includes examples and explanations of JavaScript's usage in HTML forms and networking fundamentals.

Uploaded by

nadeemmehraj368
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views21 pages

Unit 3

This document provides an overview of scripting and networking concepts, focusing on JavaScript, its features, history, applications, and key components such as variables, data types, operators, control structures, functions, and objects. It also introduces AJAX as a technique for creating dynamic web applications that communicate with servers without refreshing the page. Additionally, the document includes examples and explanations of JavaScript's usage in HTML forms and networking fundamentals.

Uploaded by

nadeemmehraj368
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

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

You might also like