Contents

Introduction .................................................................................................................................................. 2
Web Development ........................................................................................................................................ 2
Server side and client-side programming ..................................................................................................... 2
Client-Side Scripting programming ........................................................................................................... 2
Server-Side Scripting programming .......................................................................................................... 3
Comparison between Client-side and Server-side Scripting ......................................................................... 4
Application area of Scripting Language......................................................................................................... 4
Differences between Server-side scripting and Client-side scripting ............................................................ 4
Some popular Languages .............................................................................................................................. 5
Front-End, Back-End and Full-Stack Developers ........................................................................................... 5
Front-End Developers: .............................................................................................................................. 5
Back-End Developers................................................................................................................................. 6
Full-Stack Developers ................................................................................................................................ 6
Difference between Scripting Language and Programming Language ......................................................... 6
Internet Technology ...................................................................................................................................... 6
Static Website ............................................................................................................................................... 6
Dynamic Website .......................................................................................................................................... 7
JavaScript ...................................................................................................................................................... 7
Introduction .............................................................................................................................................. 7
Features of JavaScript ............................................................................................................................... 7
Advantages ................................................................................................................................................ 8
Uses of JavaScript...................................................................................................................................... 8
Embedding JavaScript to HTML................................................................................................................. 8
Inline JavaScript..................................................................................................................................... 9
Internal JavaScript ................................................................................................................................. 9
External JavaScript ................................................................................................................................ 9
JavaScript Fundamental .............................................................................................................................. 10
Script ....................................................................................................................................................... 10
Statements .............................................................................................................................................. 10
JavaScript comments .................................................................................................................................. 11
Whitespace and Line Breaks ....................................................................................................................... 11

Compiled By: Ravi Singh

Case Sensitivity............................................................................................................................................ 11
Output ......................................................................................................................................................... 11
1. Console.log() ................................................................................................................................... 11
2. alert()............................................................................................................................................... 12
3. document.write() ................................................................................................................................ 12
4. innerHTML........................................................................................................................................... 12
5. console.error() and console.warn() ..................................................................................................... 12

Web Technology II

Introduction
Web Technology is the tools and techniques which enables two or more computing devices to
communicate over a network i.e. Internet. Web Technology consist of two words, the web refers to the
World Wide Web generally known as www. WWW is the cyber space containing webpages, documents,
and any other resources which are identified and located with the help of their URLs. Technology refers to
the tools and techniques that makes these resources available on the Web such as, web browsers to view
content of web, Programming languages and frameworks for the development of websites, Database to
store data at back end, protocols for communicating on the web, multimedia elements etc.

Web Development
It is the process of designing and developing website which are hosted through internet or intranet. The
process of developing web can range from developing static page to a complex web software such as web-
based application social media sites, E-commerce. Web development includes web design, web content
development, client-side scripting, server-side scripting, web engineering etc. Since, web development
consists of several inter-related task which can be accomplish by different types of developer who focuses
on different aspect of web creation.

Server side and client-side programming

Client-Side Scripting programming
Client-side scripting is performed to generate a code that can run on the client side i.e (front end) browser
without needing the server-side (back end) processing. Basically, client-side scripts are placed inside an
HTML document.

The client-side scripting can be used to layout the content of the web. For example, when a user makes a
request through web browser for a webpage to the server, it just sent the HTML and CSS as plain text, and
the browser interprets and renders the content of web in the client end (user).

Client-side scripting is designed to run as a scripting language which can be executed by web browser.
Front end developer is someone who design and develop client side of a website. Generally, he or she

Compiled By: Ravi Singh

works in user interface (UI) of a website. Front end developer must be at least fluent in three different
languages i.e. HTML, CSS, JavaScript whereas, there are several other libraries which can be used for front
end development.

Advantages of Client-side Scripting:

1. Immediate response to users

2. Enhance the appearance of websites
3. More responsive design and interaction with the user
4. It does not need to send requests to the server hence reduces the load on server
5. Loading time of a page is faster
6. Reduces the network traffic
7. It is reusable

Disadvantages of Client-side Scripting:

1. All browsers may not support client-side script

2. The code is not secure because anyone can look at the code
3. Users can disable the client side scripts so required content may not be displayed
4. Database connection is not possible with client-side scripting.
5. Dynamic content cannot be displayed.

Server-Side Scripting programming

Server-side scripting also known as back-end runs on the server where the application is hosted. Server-
side is used to serve content depending upon the user request. Back end helps to create dynamic web-
based application that allows user to interact and communicate with the application. Back-end language
also helps to connect front end with data base. So that, User can store and retrieve data as per the
requirement. Back-end developer is responsible for server-side programming. Some of the popular server-
side (back-end) scripting language are ASP, JavaScript (using SSJS (Server-side JavaScript e.g. node.js), Perl,
PHP, Ruby, Python etc.

The client-side scripting emphasizes making the interface of the web application or website (UI) more
appealing and functional. Whereas, server-side scripting emphasizes on data accessing methods, error
handling and fast processing etc.

Advantages of Server-side Scripting:

1. You can create dynamic pages.

2. Can connect to database that resides on the web server.
3. Can access files from the server to client browser Users are not able to block the contents from
server
4. The actual code is not visible to the client
5. Authentication and verification of user is possible
6. It supports many databases like MySQL Oracle,

Disadvantages of Server-side Scripting:

1. The scripting software has to be installed on the server.

2. The script takes more time to execute.

Compiled By: Ravi Singh

 3. It requires a large amount of memory space in the server computer.
4. Implementation cost is high
5. If a lot of users are accessing server data, server may crash due to overload

Comparison between Client-side and Server-side Scripting

This section elaborates the fundamental differences between client-side and server-side scripts:

1. The client-side script is executed at the front-end in the client’s browser while the server-side
script is executed at the back end with a web server.
2. The client-side script is visible to the user of the web browser while the server-side script is
hidden.
3. The client-side script is not secure while the server-side script is secure.
4. The client-side script does not need to interact with the server while the server-side script needs
a web server to be processed.
5. The client-side script is executed on a local computer while the server-side script is executed on
a remote computer.
6. The client-side script has a faster response time than the server-side script.
7. Client-side script is executed after the browser receives the web pages sent by the server while
the server-side script cannot execute the client-side script.
8. The client-side script cannot connect with the database while the server-side script can connect
with the database present on the server-side.
9. The client-side script cannot access files while the server-side script can access and manipulate
the files present at the webserver.
10. The client-side script helps create interactive web pages while the server-side script helps create
web pages with dynamic data.

Application area of Scripting Language

1. Dynamic web applications
2. Game application and Multimedia
3. Scripting like Ruby and Python are used in statistics and research
4. To automate the process
5. Used to create plug ins and extensions for existing applications.

Differences between Server-side scripting and Client-side scripting

SN. Server-Side Scripting Client-side scripting
1. The Server executes the server-side The client (web browser) executes the client-side
scripting scripting.
2. It can be used to connect database on the It cannot be used to connect to the database on
web server. the web server.
3. Server-side scripting response is slower. Client-side scripting response is faster.
4. Source code is not visible to the user so it Source code is visible to user so it is relatively
is secure. insecure.
5. It does not depend on client. Any server- It depends on browser and version of the
side technology can be used. browser.

Compiled By: Ravi Singh

 6. Examples: PHP, ASP.NET, ASP, Ruby on Examples: JavaScript, VBScript, jQuery etc.
rails, Python, Perl.

Some popular Languages

1. Python: Python is a very popular and demanding programming language now because it is suitable for
developing very simple to complex applications. It is also used to connect database systems. Python has
simple English like syntax.

2. Perl: Practical Extraction and Reporting Language, first released in 1987 is a powerful language with
advance features. Perl is a stable, cross platform programming language. It is a general-purpose
programming language originally developed for text manipulation and now used for a wide range of tasks
including system administration, web development, network programming, GUI development, and more.

3. Ruby: Ruby is a dynamic, open-source programming language with a focus on simplicity and
productivity. It has an elegant syntax that is natural to read and easy to write.

4. Bash: A Bash script is a plain text file which contains a series of commands. It is widely available on
various operating systems and is a default command interpreter on most GNU/Linux systems.

5. Node.js: Node.js is used to create dynamic page contents. It can create, open, read, write, delete, and
close file on the server.

6. ASP.net: It is used to develop dynamic websites, web applications, and web services. ASP.NET is a web
application framework developed and marketed by Microsoft to allow programmers to build dynamic
web sites.

7. VBScript: Visual Basic Script (VBScript) is an open-source web programming language developed by
Microsoft. It is superset of JavaScript and adds optional static typing class-based object-oriented
programming VBScript is lightweight scripting language. As VBScript is only used by IE browsers JavaScript
is preferred over VBScript.

8. JavaScript: JavaScript is most well-known and widely used scripting language for web pages. All java
script files are stored in file having is extension. JavaScript and Java programming language are two
different things: JavaScript is generally used for making websites interactive and dynamic.

9. jQuery: jQuery is a JavaScript library that simplifies writing code and enables rapid web development.
jQuery simplifies HTML document traversing and manipulation, and browser event handling. The main
concept of jQuery is "write less, do more".

10. PHP: Hypertext Preprocessor (PHP) is widely used scripting language. PHP scripts are executed on the
server. It is used to manage dynamic content, databases, session tracking and building ecommerce sites.
It is integrated with a popular database MySQL.

Front-End, Back-End and Full-Stack Developers

Front-End Developers:
Front-end developers are responsible for designing and implementing the visual aspects and user
interactions of websites or web applications. They primarily work with languages like HTML, CSS, and
JavaScript to create user interfaces that are intuitive and visually appealing.

Compiled By: Ravi Singh

Back-End Developers
Back-end developers, on the other hand, focus on the server-side logic and database management of
websites or web applications. They work with languages like Python, Ruby, Java, or Node.js to handle data
processing, user authentication, server configuration, and database interactions

Full-Stack Developers
Full-stack developers are proficient in both front-end and back-end development. They have a
comprehensive understanding of how both the client-side and server-side components of a web
application work together. Full-stack developers can handle all aspects of web development, from
designing user interfaces to building server-side logic and managing databases.

Difference between Scripting Language and Programming Language

SN. Scripting Language Programming Language
1. Scripting language are platform-specific. Programming language are platform
independent.
2. Most of the scripting languages are Most of the programming language are complied.
interpreted.
3. It is used to create dynamic web It is used to write computer programs
applications
4. It does not create a .exe file and it It generates .exe files and is self-executable
requires the host to execute.
5. All scripting language are programming All programming language are not scripting
language language
6. Examples: JavaScript, VBScript, jQuery Examples: PHP, ASP.NET, ASP, Ruby on rails,
etc. Python, Perl.
7. It normally uses an interpreter In normally uses both compiler or interpreter

Internet Technology
The Internet is the global system of interconnected computer networks that uses the Internet protocol
suite to communicate between networks and devices. It is a network of networks that consists of private,
public, academic, business, and government networks of local to global scope, linked by a broad array of
electronic, wireless, and optical networking technologies. The Internet carries a vast range of information
resources and services, such as the inter-linked hypertext documents and applications of the World Wide
Web, electronic mail, telephony, and file sharing.

Static Website
Static Web pages are very simple. It is written in languages such as HTML, JavaScript, CSS, etc. Static
websites are the websites that doesn’t change the content or layout dynamically with every request to the
web server. Static websites display exactly the same information whenever anyone visits it. User sees the
updated content of Static Website only when a web author manually updates them with a text editor or
any web editing tool used for creating websites. Static webpages do not have to be simple plain text. They
can feature multiple design and even videos.

Compiled By: Ravi Singh

Dynamic Website
Dynamic websites are those websites that changes the content or layout with every request to the
webserver. These websites have the capability of producing different content for different visitors from
the same source code file. There are two kinds of dynamic web pages i.e. client side scripting and server
side scripting. The client-side web pages changes according to your activity on the web page. On the
server-side, web pages are changed whenever a web page is loaded.

Example: login & signup pages, application & submission forms, inquiry and shopping cart pages. A Typical
Architecture of dynamic website

JavaScript
Introduction
JavaScript is a lightweight, interpreted and object-oriented programming language. It is commonly used
to create dynamic and interactive elements in web applications. JavaScript is very easy to implement
because it is integrated with HTML. It is open and cross-platform. It was introduced in the year 1995 for
adding programs to the webpages in the Netscape Navigator browser. Since then, it has been adopted by
all other graphical web browsers. With JavaScript, users can build modern web applications to interact
directly without reloading the page every time.

Features of JavaScript
➢ JavaScript is a lightweight, interpreted programming language.
➢ Designed for creating network-centric applications.
➢ Complementary to and integrated with HTML.
➢ It is case sensitive language.
➢ JavaScript is platform independent.

Compiled By: Ravi Singh

 ➢ It provides good control to the users over the web browsers.

Advantages
1. An Interpreted Language: JavaScript is an interpreted language, which requires no compilation steps. The
syntax is completely interpreted by the browser just as it interprets HTML tags.

2. Embedded within HTML: JavaScript does not require any special editor for programs to be written. It can
be written in any text editor along with appropriate HTML tags.

3. JavaScript is an object-oriented language: The language supports several built-in objects and
programmers can create or delete their own objects. JavaScript does not have classes in the C++ or Java
sense. In JavaScript, objects can inherit properties directly from each other, forming the object prototype
chain.

4. Minimal Syntax- Easy to Learn: By learning just a few commands and simple rules of syntax, complete
application can be built using JavaScript.

5. Quick Development: Because JavaScript does not require time-consuming compilations; scripts can be
developed in a short period of time.

6. Procedural Capabilities: Every programming language needs to support facilities such as conditional
checking, looping and Branching. JavaScript provides syntax, which can be used to add such procedural
capabilities to web page.

7. Easy Debugging and Testing: Being and interpreted language, scripts in JavaScript are tested line by line,
and errors are also listed as they are encountered, i.e. an appropriate error message along with the line
number is listed for every error that is encountered.

8. Platform Independent: JavaScript is a programming language that is completely independent of the

hardware on which it works. It is a language that is understood by any JavaScript enabled browser.
Uses of JavaScript
➢ Client-side validation
➢ Dynamic drop-down menus.
➢ Displaying date and time.
➢ Displaying pop-up windows and dialog boxes
➢ Displaying clocks.
➢ Event handling.
➢ Developing Mobile applications
➢ Creating web browser-based games.
➢ Adding interactivity to website.

Embedding JavaScript to HTML

1. Inline JavaScript
2. Internal JavaScript
3. External JavaScript

Compiled By: Ravi Singh

Inline JavaScript
JavaScript code is directly written within an HTML element's attribute, usually in the onclick, onmouseover,
or other event-handler attributes.

Example:

Output:

Internal JavaScript
JavaScript is written within a <script> tag inside the <head> or <body> of the HTML document.

Example

Output

External JavaScript
JavaScript is written in a separate .js file and linked using a <script> tag with a src attribute.

Compiled By: Ravi Singh

Example

We will see how we can include an external JavaScript file in an HTML document. Let us make a file named
ExternalJS.html:

Now let's create separate JavaScript file ext.js

Note: External JavaScript is generally used for larger projects or when we need to reuse scripts across
multiple HTML files.

JavaScript Fundamental
Script
In JavaScript, a script is a set of instructions or code that performs specific tasks or actions within a web
page. JavaScript statements are written within <script>…..</script>. The <script> tag alerts the browser
program to start interpreting all the statements between these tags as a script. A simple syntax of your
JavaScript will appear as follows:

Syntax:

<script>

block of Statements

</script>

Statements
JavaScript statements are composed of Values, Operators, Expressions, Keywords, and Comments. The
program consists of many statements. The statements are executed, one by one, in the same order as
they are written. It is often called JavaScript code.

var area = l*b;

Compiled By: Ravi Singh

JavaScript comments
The JavaScript comments are meaningful way to deliver message. It is used to add information about the
code, warnings or suggestions so that end user can easily interpret the code. The JavaScript comment is
ignored by the JavaScript engine i.e. embedded in the browser. There are two types of comments in
JavaScript.

1. Single-line comments: These begin with // and continue to the end of the line. They are useful for
short notes or annotations.
// This is a single-line comment
let x = 5; // This sets x to 5
2. Multi-line comments: These begin with /* and end with */. They can span multiple lines, which
makes them ideal for longer explanations or for temporarily disabling blocks of code.
/*
This is a multi-line comment.
It can span multiple lines.
Useful for detailed explanations or large blocks of commented-out code.
*/
let y = 20;
/*
console.log(y);
console.log("This code is ignored");
*/

Whitespace and Line Breaks

JavaScript ignores spaces, tabs, and newlines that appear in JavaScript programs. To make a code
readable and understandable, formatting and indenting the code by using several spaces, tabs, and
newlines can be used freely in the program.

Case Sensitivity
JavaScript is a case-sensitive language. The keywords, variables, functions names, and any other identifiers
must always be typed with a consistent capitalization of letters. So, the identifiers Time and TIME will
convey different meanings in JavaScript.

Output
Java Script can "display" data in different ways: It defines the ways to display the output of a given code.
The output can be display by using four different ways which are listed below:

1. Console.log()
This method is used to output data to the web console. It’s the most common way to
debug in JavaScript.
Example
console.log("Hello, World!");

Compiled By: Ravi Singh

 console.log(42);
console.log({ name: "Alice", age: 30 });

2. alert()
This method displays an alert dialog with a specified message and an OK button. It’s usually used
for simple notifications.
alert("This is an alert box!");

3. document.write()
This function writes directly to the HTML document stream.
document.write("Hello, World!");

4. innerHTML
This property allows you to set or get the HTML content inside an element, enabling rich content
display.

const div = document.getElementById('myDiv');

div.innerHTML = "<strong>Hello, World!</strong>";

5. console.error() and console.warn()

These methods output error messages and warnings to the console, making it easy for developers to
identify issues.

Examples of console.error():

function divideNumbers(a, b) {

if (b === 0) {

console.error("Division by zero is not allowed!");

return null;

return a / b;

console.log(divideNumbers(10, 2)); // Output: 5

console.log(divideNumbers(10, 0)); // Logs error: Division by zero is not allowed!

Example of console.warn()

let age = 15;

Compiled By: Ravi Singh

if (age < 18) {

console.warn("Warning: You must be at least 18 years old!");

Compiled By: Ravi Singh