0% found this document useful (0 votes)
53 views28 pages

Client Side Prog Notes

Uploaded by

utkarshkmrsingh
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
0% found this document useful (0 votes)
53 views28 pages

Client Side Prog Notes

Uploaded by

utkarshkmrsingh
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/ 28

Prof. Pooja Khot.

– WEB TECHNOLOGY

What Is Client-Side Programming?

ot
Kh
Client-Side Programming refers to the code executed on the user's
device (typically a web browser) when they interact with a web
ja

application. This code is responsible for creating dynamic and


oo

interactive elements, such as:


.P

• User Interface: Designing and manipulating the appearance and


behavior of web pages.
of

Data Validation: Ensuring that user input is correct and meets


Pr

specific criteria.

• Asynchronous Operations: Handling tasks without blocking the


main thread, improving responsiveness.

• Offline Functionality: Enabling web applications to work even


when there's no internet connection.

# Key Technologies and Concepts:

1. HTML (HyperText Markup Language): Defines the structure and


content of a web page.

1
Prof. Pooja Khot. – WEB TECHNOLOGY

2. CSS (Cascading Style Sheets): Controls the presentation and


styling of elements.

3. JavaScript: A versatile language for adding interactivity, handling


events, and manipulating the DOM.

4. DOM (Document Object Model): A tree-like representation of an


HTML document, allowing JavaScript to access and modify
elements.

5. AJAX (Asynchronous JavaScript and XML): Enables web pages


to update without full page reloads, enhancing user experience.

6. Libraries and Frameworks: Simplify development by providing

ot
pre-built components and functions (e.g., jQuery, React, Angular).

# Common Use Cases: Kh


• Form Validation: Checking for valid email addresses, password
ja

strength, and other input criteria.


oo

• Dynamic Content: Updating parts of a page without reloading the


.P

entire page (e.g., search results, product listings).


of

• Interactive Elements: Creating buttons, sliders, drop-down


Pr

menus, and other interactive components.

• Offline Applications: Allowing users to access web applications


even when offline (e.g., progressive web apps).

• Real-time Updates: Providing real-time information, such as chat


messages, stock prices, or game scores.

# Benefits of Client-Side Programming:

• Enhanced User Experience: Faster page load times, smoother


interactions, and more responsive interfaces.

• Reduced Server Load: Handling tasks on the client side can


lighten the burden on servers.

2
Prof. Pooja Khot. – WEB TECHNOLOGY

• Offline Capabilities: Enabling users to access applications


without an internet connection.

• Rich Features: Creating complex and interactive web experiences.

What Is Server-Side Programming?


Server-side programming refers to the code executed on a web server
to process requests from clients (typically web browsers) and generate
dynamic responses. This code handles tasks such as:

• Data Processing: Retrieving, manipulating, and storing data from


databases or other sources.

• Business Logic: Implementing the application's core functionality

ot
and rules.


Kh
Security: Protecting the application from vulnerabilities like SQL
injection, cross-site scripting (XSS), and unauthorized access.
ja
oo

• Session Management: Tracking user interactions and maintaining


state across multiple requests.
.P

Key Technologies and Concepts:


of

1. Programming Languages: Python, Java, Ruby, PHP, Node.js, and


Pr

C# are popular choices for server-side development.

2. Web Frameworks: These provide pre-built components and tools


to streamline development (e.g., Django for Python, Spring Boot
for Java, Ruby on Rails).

3. Databases: MySQL, PostgreSQL, MongoDB, and Oracle are


commonly used to store and manage data.

4. API Development: Creating interfaces for other applications to


interact with the server (e.g., RESTful APIs).

5. Server Administration: Managing server hardware, software, and


network configuration.

3
Prof. Pooja Khot. – WEB TECHNOLOGY

Common Use Cases:

• Dynamic Content Generation: Creating personalized content


based on user preferences or data.

• Data-Driven Applications: Building applications that rely on data


from databases or external sources.

• E-commerce: Handling online transactions, product catalogs, and


shopping carts.

• Web Services: Providing APIs for other applications to consume.

• Content Management Systems (CMS): Managing and publishing


website content.

ot
Benefits of Server-Side Programming:

• Kh
Security: Implementing security measures to protect sensitive
data.
ja

• Scalability: Handling increasing traffic and data loads efficiently.


oo

• Flexibility: Adapting to changing requirements and technologies.


.P

• Control: Managing application logic and data access.


of

• Integration: Connecting with other systems and services.


Pr

# What is the Difference Between the Client Side and


Server Side?
Client-Side and Server-Side Rendering
Rendering is a web development technique that converts website code
into interactive pages people see when they visit a website. The time it
takes to load pages is greatly reduced by rendering, and users are
provided with a neat and fully loaded website before the webpage is
fully loaded.

4
Prof. Pooja Khot. – WEB TECHNOLOGY

1. Client-Side Rendering:
• Client-Side Rendering (CSR) is a rendering method in which the
browser processes an access request, and only the JavaScript file is
used to produce the HTML content.
• The server receives the access command data and responds with a
straightforward HTML document, including the JavaScript data
necessary to load the full website.
• CSR greatly shortens the duration of the page loading. Because it
lessens the demand on their servers, it is also the less expensive
choice for the website owner.

2. Server-Side Rendering:
• Server-side rendering (SSR) is how a website’s JavaScript is

ot
rendered on the website’s server. When a user visits a website, the
Kh
information in the request is transmitted directly to the server,
which responds with a file containing the full HTML code.
ja
• The website will be fully loaded based on this content. The server
oo

generates a page from the HTML code and the user’s access data
who is visiting the site using this way.
.P

• Because JavaScript is rendered on the server, search engine bots

and humans benefit from a speedier page experience. This avoids


of

crawl budget difficulties caused by crawl speed.


Pr

# Client-Side and Server-Side Scripting


A scripting language is a computer language that is interpreted
individually at runtime rather than requiring the compilation stage.
Applications for the web are written in scripting languages. Both the
client-side and the server-side use it. Client-side scripting languages
include JavaScript, AJAX, jQuery, and PHP. Server-side scripting
languages include JavaScript, PHP, Perl, and others.

• Client-Side Scripting:
Web browsers carry out scripting on the client-side. When browsers
contain full code, it is used. When running directly on browsers, source

5
Prof. Pooja Khot. – WEB TECHNOLOGY

code is transferred over the internet from a web server to a user’s


machine. Additionally, it is utilised for user event functionality and
validations.

Client-side scripting enables increased interaction and typically


performs many tasks without requiring the user’s input. It cannot, in
essence, connect to databases on a web server. These scripts are
unable to access the web browser’s file system. Pages are modified
based on the user’s preferences.

• Server-Side Scripting:
Web servers carry out server-side scripting. They mostly serve to
produce dynamic pages. Additionally, it has access to the web server’s

ot
file system. A web server is a programming language-based server-
side environment. Kh
Scripts can be developed in any of the available server-side scripting
ja
languages. It retrieves and generates material for dynamic pages. It is
oo

used to require the installation of plugins. Load times are generally


faster in this case than in client-side scripting. When a user or client
.P

requests pages, the server sends them.


of
Pr

6
Prof. Pooja Khot. – WEB TECHNOLOGY

JavaScript Syntax
JavaScript syntax refers to the rules and conventions dictating how code
is structured and arranged within the JavaScript programming
language. This includes statements, expressions, variables, functions,
operators, and control flow constructs.

Syntax:
console.log("Basic Print method in JavaScript");

JavaScript syntax is the set of rules, how JavaScript programs are


constructed:

// How to create variables:

ot
var x;
let y; Kh
// How to use variables:
ja

x = 5;
oo

y = 6;
.P

let z = x + y;

# JavaScript Values
of
Pr

The JavaScript syntax defines two types of values:

• Fixed values

• Variable values

Fixed values are called Literals.

Variable values are called Variables.

# JavaScript Literals
Syntax Rules for the JavaScript fixed values are:

• JavaScript Numbers can be written with or without decimals.

7
Prof. Pooja Khot. – WEB TECHNOLOGY

• Javascript Strings are text that can be written in single or double


quotes

Example:

let num1 = 50

let num2 = 50.05

let str1 = "Letter A"

let str2 = 'Letter B'

console.log(num1)

console.log(num2)

ot
console.log(str1)

console.log(str2) Kh
Output:
ja

50
oo

50.05
.P

Letter A
of

Letter B
Pr

# JavaScript Variables
A JavaScript variable is the simple name of the storage location where
data is stored. There are two types of variables in JavaScript which are
listed below:

• Local variables: Declare a variable inside of a block or function.

• Global variables: Declare a variable outside function or with a


window object.

Example: This example shows the use of JavaScript variables.

// Declare a variable and initialize it Global variable declaration

8
Prof. Pooja Khot. – WEB TECHNOLOGY

let Name = "Apple";

// Function definition

function MyFunction() {

// Local variable declaration

let num = 45;

// Display the value of Global variable

console.log(Name);

// Display the value of local variable

console.log(num);

ot
}

// Function call
Kh
MyFunction();
ja
oo

Output:
.P

Apple
of

45
Pr

# JavaScript Operators
JavaScript operators are symbols that are used to compute the value or
in other words, we can perform operations on operands. Arithmetic
operators ( +, -, *, / ) are used to compute the value, and Assignment
operators ( =, +=, %= ) are used to assign the values to variables.

Example: This example shows the use of javascript operators.

// Variable Declarations

let x, y, sum;

// Assign value to the variables

9
Prof. Pooja Khot. – WEB TECHNOLOGY

x = 3;

y = 23;

// Use arithmetic operator to add two numbers

sum = x + y;

console.log(sum);

Output:

26

# JavaScript Expressions

ot
Javascript Expression is the combination of values, operators, and
Kh
variables. It is used to compute the values.

Example: This example shows a JavaScript expression.


ja
oo

// Variable Declarations
.P

let x, num, sum;

// Assign value to the variables


of

x = 20;
Pr

y = 30

// Expression to divide a number

num = x / 2;

// Expression to add two numbers

sum = x + y;

console.log(num + "\n" + sum);

Output:
10

10
Prof. Pooja Khot. – WEB TECHNOLOGY

50

# JavaScript Keywords
The keywords are the reserved words that have special meanings in
JavaScript.

// let is the keyword used to define the variable

let a, b;

// function is the keyword which tells the browser to create a function

function ABC(){};

ot
# JavaScript Comments
Kh
The comments are ignored by the JavaScript compiler. It increases the
readability of code. It adds suggestions, Information, and warning of
ja
code. Anything written after double slashes // (single-line comment) or
oo

between /* and */ (multi-line comment) is treated as a comment and


ignored by the JavaScript compiler.
.P

Example: This example shows the use of javascript comments.


of

// Variable Declarations
Pr

let x, num, sum;

// value to the variables


Assign

x = 20;

y = 30

/* Expression to add two numbers */

sum = x + y;

console.log(sum);

Output:

11
Prof. Pooja Khot. – WEB TECHNOLOGY

50

# JavaScript Data Types


JavaScript provides different datatypes to hold different values on
variables. JavaScript is a dynamic programming language, which means
do not need to specify the type of variable.

There are two types of data types in JavaScript.

• Primitive data type

• Non-primitive (reference) data type

The primitive data types include Number, String, Boolean, Null,

ot
Undefined, and Symbol.
Kh
Non-primitive types include Object, Array, and Function.
ja
# JavaScript Functions
oo

JavaScript functions are the blocks of code used to perform some


.P

particular operations. JavaScript function is executed when something


calls it. It calls many times so the function is reusable.
of

Syntax:
function functionName( par1, par2, ....., parn ) {
Pr

// Function code
}
The JavaScript function can contain zero or more arguments.

# JavaScript Identifiers
JavaScript Identifiers are names used to name variables and keywords
and functions.

An identifier must begin with:

• They must start with a letter, underscore (_), or dollar sign ($).

12
Prof. Pooja Khot. – WEB TECHNOLOGY

• The rest of the identifier can contain letters, digits, underscores,


and dollar signs.

• Identifiers are case-sensitive (myVariable and myvariable are


different).

• JavaScript keywords (like let, var, function, if, else) cannot be used
as identifiers.

• In JavaScript Camel case is preferred to name a identifier.

Document Object Model (DOM)


The Document Object Model (DOM) is the data representation of the

ot
objects that comprise the structure and content of a document on the
Kh
web. This guide will introduce the DOM, look at how the DOM
represents an HTML document in memory and how to use APIs to
create web content and applications.
ja
oo

What is the DOM?

The Document Object Model (DOM) is a programming interface for


.P

web documents. It represents the page so that programs can change


of

the document structure, style, and content. The DOM represents the
document as nodes and objects; that way, programming languages
Pr

can interact with the page.


• A web page is a document that can be either displayed in the
browser window or as the HTML source. In both cases, it is the same
document but the Document Object Model (DOM) representation
allows it to be manipulated. As an object-oriented representation of
the web page, it can be modified with a scripting language such as
JavaScript.
• For example, the DOM specifies that the querySelectorAll method in
this code snippet must return a list of all the <p> elements in the
document:

const paragraphs = document.querySelectorAll("p");

13
Prof. Pooja Khot. – WEB TECHNOLOGY

// paragraphs[0] is the first <p> element


// paragraphs[1] is the second <p> element, etc.
alert(paragraphs[0].nodeName);
• All of the properties, methods, and events available for manipulating

and creating web pages are organized into objects. For example,
the document object that represents the document itself,
any table objects that implement the HTMLTableElement DOM
interface for accessing HTML tables, and so forth, are all objects.
• The DOM is built using multiple APIs that work together. The

core DOM defines the entities describing any document and the
objects within it. This is expanded upon as needed by other APIs that
add new features and capabilities to the DOM. For example,

ot
the HTML DOM API adds support for representing HTML documents
to the core DOM, and the SVG API adds support for representing
SVG documents.
Kh
ja
# DOM and JavaScript
oo

• The previous short example, like nearly all examples, is JavaScript.


.P

That is to say, it is written in JavaScript, but uses the DOM to access


the document and its elements.
of

• The DOM is not a programming language, but without it, the


Pr

JavaScript language wouldn't have any model or notion of web


pages, HTML documents, SVG documents, and their component
parts. The document as a whole, the head, tables within the
document, table headers, text within the table cells, and all other
elements in a document are parts of the document object model for
that document.
• They can all be accessed and manipulated using the DOM and a
scripting language like JavaScript.
• The DOM is not part of the JavaScript language, but is instead a Web
API used to build websites. JavaScript can also be used in other
contexts.

14
Prof. Pooja Khot. – WEB TECHNOLOGY

• For example, Node.js runs JavaScript programs on a computer, but


provides a different set of APIs, and the DOM API is not a core part
of the Node.js runtime.
• The DOM was designed to be independent of any particular
programming language, making the structural representation of the
document available from a single, consistent API. Even if most web
developers will only use the DOM through JavaScript,
implementations of the DOM can be built for any language, as this
Python example demonstrates:

# Python DOM example

import xml.dom.minidom as m
doc = m.parse(r"C:\Projects\Py\chap1.xml")

ot
doc.nodeName # DOM property of document object
p_list = doc.getElementsByTagName("para") Kh
ja
# Accessing the DOM
oo

• You don't have to do anything special to begin using the DOM. You
.P

use the API directly in JavaScript from within what is called a script, a
program run by a browser.
of

• When you create a script, whether inline in a <script> element or


Pr

included in the web page, you can immediately begin using the API
for the document or window objects to manipulate the document
itself, or any of the various elements in the web page (the
descendant elements of the document).
• Your DOM programming may be something as simple as the
following example, which displays a message on the console by
using the console.log() function:

<body onload="console.log('Welcome to my home page!');">



</body>

15
Prof. Pooja Khot. – WEB TECHNOLOGY

JavaScript Events
• JavaScript Events are actions or occurrences that happen in the
browser. They can be triggered by various user interactions or by the
browser itself.
• Common events include mouse clicks, keyboard presses, page loads,
and form submissions. Event handlers are JavaScript functions that
respond to these events, allowing developers to create interactive
web applications.
• Syntax:

<HTML-element Event-Type = "Action to be performed">

Common JavaScript Events Table

ot
Event Kh
Attribute Description
ja
oo

onclick Triggered when an element is clicked.


.P

Fired when the mouse pointer moves over an


of

onmouseover
element.
Pr

onmouseout Occurs when the mouse pointer leaves an element.

onkeydown Fired when a key is pressed down.

onkeyup Fired when a key is released.

Triggered when the value of an input element


onchange
changes.

16
Prof. Pooja Khot. – WEB TECHNOLOGY

Event
Attribute Description

onload Occurs when a page has finished loading.

onsubmit Fired when a form is submitted.

onfocus Occurs when an element gets focus.

onblur Fired when an element loses focus.

ot
1. JavaScript Events Examples Kh
Example 1: Here, we will display a message in the alert box when the
ja

button is clicked using onClick() event. This HTML document features a


oo

button styled to appear in the middle of the page. When clicked, the
.P

button triggers the `hiThere()` JavaScript function, which displays an


alert box with the message “Hi there!”.
of

Example Code:
Pr

<!doctype html>
<html>
<head>
<script>
function hiThere() {
alert('Hi there!');
}
</script>
</head>
<body>
<button type="button"
onclick="hiThere()"

17
Prof. Pooja Khot. – WEB TECHNOLOGY

style="margin-left: 50%;">
Click me event
</button>
</body>
</html>

2. JavaScript Event Handlers


• JavaScript event handlers are functions that are executed in response
to specific events occurring in the browser.
• They can be attached to HTML elements using event attributes
like onclick, onmouseover, etc., or added dynamically using
the addEventListener() method in JavaScript.

ot
• Example: Here’s an example of a JavaScript event handler attached
Kh
to an HTML button element using the onclick attribute. This code
demonstrates an event handler attached to a button element. When
ja
the button is clicked, the `myFunction()` JavaScript function is
oo

invoked, triggering an alert box displaying “Button clicked!”.


.P

Code:
of

<!DOCTYPE html>
<html>
Pr

<head>
<title>Event Handler Example</title>
</head>
<body>
<button onclick="myFunction()">Click me</button>
<script>
// JavaScript function to handle the click event
function myFunction() {
alert("Button clicked!");
}
</script>
</body>
</html>

18
Prof. Pooja Khot. – WEB TECHNOLOGY

JavaScript Output
• JavaScript provides different methods to display output, such
as console.log(), alert(), document.write(), and manipulating HTML
elements directly.
• Each method has its specific use cases, whether for debugging, user
notifications, or dynamically updating web content. Here we will
explore various JavaScript output methods, demonstrating how and
when to use them effectively.
• There are primarily multiple distinct methods for displaying output in
JavaScript. Although there are other methods for output display, they
are not advisable, so it is recommended to refrain from using

ot
alternative output approaches.

1. JavaScript innerHTML Property Kh


The innerHTML property is used with the HTML element. JavaScript can
ja
be used to select an element using the document.getElementById(id)
oo

method, and then use the innerHTML property to display the output on
the specified element (selected element).
.P

Syntax:
of

document.getElementById("id").innerHTML;
Pr

Example: The document.getElementById(id) method with innerHTML


property is used to display the output.
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Output</title>
</head>
<body>
<h2>
Display Output using innerHTML Property
</h2>

19
Prof. Pooja Khot. – WEB TECHNOLOGY

<p id="ABC"></p>
<!-- Script to use innerHTML -->
<script>
document.getElementById("ABC").innerHTML
= "Hello ABCD!";
</script>
</body>
</html>

2. JavaScript console.log() Method


The console.log() method is used for logging messages to the console.
It is a debugging tool available in most web browsers. It is used during

ot
development to output information about the state of the program.
Syntax:
console.log();
Kh
ja
Example: This example uses the console.log() property to display data.
oo

HTML
<!DOCTYPE html>
.P

<html lang="en">
<head>
of

<title>JavaScript Output</title>
Pr

</head>
<body>
<h2>
Display Output using console.log() Method
</h2>
<!-- Script to use console.log() -->
<script>
console.log("Hello ABCD!");
</script>
</body>
</html>

20
Prof. Pooja Khot. – WEB TECHNOLOGY

3. JavaScript document.write() Method


To use the document.write(), simply call this method and provide the
content you want to be written to the document. This method is often
used for directly adding content to the HTML document while it is being
parsed.
Syntax:
document.write();
Example: The document.write() method display the output.
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Output</title>

ot
</head>
<body> Kh
<h2>
ja
Display Output using document.write() Method
</h2>
oo

<!-- Script to uses document.write() -->


.P

<script>
document.write("Hello ABCD!");
of

</script>
Pr

</body>
</html>

4. JavaScript window.alert() Method


The window.alert() method is used to display an alert box with a
specified output (or message) and an OK button.
Syntax:
window.alert();
Example: The window.alert() method display the output data.
html
<!DOCTYPE html>
<html lang="en">
<head>

21
Prof. Pooja Khot. – WEB TECHNOLOGY

<title>JavaScript Output</title>
</head>
<body>
<h2>
Display Output using window.alert() Method
</h2>
<!-- Script to use window.alert() -->
<script>
window.alert("Hello ABCD!");
</script>
</body>
</html>

5. JavaScript window.print() Method

ot
The window.print() method is used to open the browser’s print dialog,
Kh
allowing the user to print the current page. JavaScript does not contain
any default print object or methods.
ja
Syntax:
oo

window.print();
Example: The window.print() method prints the current page.
.P

HTML
<!DOCTYPE html>
of

<html>
Pr

<body>
<h2>JavaScript window.print() Method</h2>
<button onclick="window.print()">
Click here to Print
</button>
</body>
</html>

6. JavaScript window.prompt() Method


The window.prompt() method is used to display a dialog box that
prompts the user input. It returns the text entered by the user as a
string. It doesn’t display output directly but captures user input.
Syntax:

22
Prof. Pooja Khot. – WEB TECHNOLOGY

window.prompt();
Example: The window.prompt() method to take user input and display
the entered data used alert() method.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Output</title>
</head>
<body>
<h2>
Display prompt box for user input
</h2>

ot
<script>
let userInput = window.prompt("Please Enter your Input");
if (userInput !== null) {
Kh
window.alert("Hello, " + userInput + "!");
ja
} else {
oo

window.alert("You clicked Cancel or closed the prompt.");


}
.P

</script>
</body>
of

</html>
Pr

JavaScript Cookies
• JavaScript cookies are small data stored on a user’s device by a web
browser.
• These cookies play a crucial role in web development, enabling
websites to store and retrieve information about user preferences,
session states, and other data.
• Cookies facilitate a more personalized browsing experience by
allowing websites to remember user actions and preferences. They
are widely used for user authentication, tracking, and maintaining
session states.

23
Prof. Pooja Khot. – WEB TECHNOLOGY

# Creating Cookie in JavaScript


• Cookies are created by a web server and sent to the user’s browser
as part of the HTTP response headers.
• Creating cookies in JavaScript involves using
the document.cookie object to set key-value pairs and additional
parameters. To create a cookie, assign a string containing the desired
cookie information to document.cookie. This string can include
attributes like expiration date, domain, and path.

# Reading Cookie in JavaScript


• JavaScript allows developers to read cookies using the

ot
document.cookie property, which stores all cookies as a string.
• Kh
To extract specific values, developers often create functions that
parse this string. Security considerations, like proper decoding and
ja
HttpOnly attributes, are crucial.
oo
.P

# Changing Cookie in JavaScript


• JavaScript enables the modification of cookies by updating their
of

values or attributes.
Pr

• Developers use the document.cookie property to both read and write


cookies. When changing a cookie, it’s crucial to consider parameters
like expiration date, path, and security attributes.

# Deleting Cookie in JavaScript


JavaScript provides a way to delete cookies by setting their expiration
date in the past. When a cookie’s expiration date is in the past, the
browser automatically removes it. Developers use
the document.cookie property to delete cookies, ensuring a clean and
secure user experience.

24
Prof. Pooja Khot. – WEB TECHNOLOGY

Introduction to VBScript

ot
Kh
The VBScript stands for Visual Basics Script language. Basically it is
the combination of Visual Basic programming language
ja
and JavaScript language. VBScript was invented and maintained by
oo

Microsoft. It is used to develop dynamic web pages. It is much lighter


compared to Visual Basic programming language but works as a
.P

scripting language like JavaScript. To run VBScript on the client-side,


the client must have to use Internet Explorer because other browsers
of

are still not supported by the VBScript.


Pr

VBScript currently runs on below mentioned environments:


• Internet Information Server (IIS) – It is a Microsoft web server.
• Windows Script Host(WSH) – It is a native hosting environment
of Windows operating system.
• Internet Explorer (IE) – It is the simplest hosting environment
where we can run VBScript code.

# To run VBScript script locally we need only two things:


• Text Editor (Any VBScript editors like Notepad++, Text Hawk,
EditPlus, etc.)

25
Prof. Pooja Khot. – WEB TECHNOLOGY

• Microsoft Edge

Setup for VBScript:


• Step 1: Open your text editor and create a basic HTML file (for
example: index.html) and paste the below code inside that file.
Code:
<!DOCTYPE html>
<html>
<head>
<title>VBScript Introduction</title>
</head>
<body>

ot
<!-- Paste VBScript Here -->
</body>
Kh
</html>
ja
oo

• Step 2: Paste the below code inside the body tag of your HTML
.P

code, or you can paste it inside the head tag. Exactly the same as you
have done with JavaScript.
of

Code:
Pr

<script type="text/vbscript">
document.write("Hello students, greeting from Us")
</script>

• Step 3: Combine both the code and run it on Microsoft Edge and you
will get the below output in the console.
Code:
<!DOCTYPE html>
<html>
<head>
<title>VBScript Introduction</title>
</head>

26
Prof. Pooja Khot. – WEB TECHNOLOGY

<body>
<script type="text/vbscript">
document.write("Welcome to Delhi")
</script>
</body>
</html>
Output:
Welcome to Delhi

# Disadvantages of VBScript:
• The VBScript code will be processed by Microsoft Edge only. Other
browsers except Microsoft Edge (like Chrome, Firefox, Safari, Opera

ot
etc) will not process the VBScript code.
• Kh
The VBScript code will run only Windows Operating System
platform. Other operating systems (like Linux, Mac, etc) will not run.
ja
• The VBScript code is used as a default scripting language of ASP.
oo

# Form Building
.P

• Handling forms is a multipart process.


of

• First a form is created, into which a user can enter the required
Pr

details.
• This data is then sent to the web server, where it is interpreted,
often with some error checking.
• If the PHP code identifies one or more fields that require
reentering, the form may be redisplayed with an error message.
• When the code is satisfied with the accuracy of the input, it takes
some action that usually involves the database, such as entering
details about a purchase.
To build a form, you must have at least the following
elements:
o An opening <form> and closing </form> tag.

27
Prof. Pooja Khot. – WEB TECHNOLOGY

o A submission type specifying either a GET or POST method.


o One or more input fields.
o The destination URL to which the form data is to be submitted

ot
Kh
ja
oo
.P
of
Pr

28

You might also like