IWP-Module 1

Module 1 Introduction to Web System

• Internet Overview
• WWW
• Web Protocols
• Web Browsers and Web Servers
• Web System Architecture
• URL
• Domain Name System
• Client and Server-side Scripting.
Internet Overview How Internet Works
• The internet is defined as a global network of linked computers,
servers, phones, and smart appliances that communicate with each
other using the transmission control protocol (TCP) standard to
enable the fast exchange of information and files, along with other
types of services.
• The internet, sometimes simply called the net, is a worldwide system
of interconnected computer networks and electronic devices that
communicate with each other using an established set of protocols.
The internet was conceived by the Advanced Research Projects
Agency (ARPA) of the U.S. government in 1969.
WWW
Introduction to WWW
• The World Wide Web (WWW) is a system of interlinked hypertext
documents accessed via the Internet using web browsers.
The World Wide Web
• The World Wide Web -- also known as the web, WWW or W3 -- refers to all the public
websites or pages that users can access on their local computers and other devices
through the internet.
• These pages and documents are interconnected by means of hyperlinks that users
click on for information.
• This information can be in different formats, including text, images, audio and video.
• The term World Wide Web isn't synonymous with the internet. Rather, the World
Wide Web is part of the internet.
• The World Wide Web (WWW) is a system of interlinked hypertext documents and
multimedia content accessed via the internet using web browsers.
• It allows users to view and navigate web pages using hyperlinks.
History of WWW
• Invented by Sir Tim Berners-Lee in 1989 at CERN to facilitate
automatic information sharing among scientists.
• https://en.wikipedia.org/wiki/WorldWideWeb

• Biography : https://en.wikipedia.org/wiki/Tim_Berners-Lee
• Ted Talk : https://www.youtube.com/watch?v=OM6XIICm_qo
• Interview : https://www.youtube.com/watch?v=fbV82k-ExT0
Benefits of WWW
1. Easy information access
2. Multimedia support
3. Global communication
4. E-commerce and education
How WWW Works
• Users enter a URL in the browser.
• The browser sends a request to a web server,
• retrieves HTML content, and
• displays it.
Basic
Basic 6 HTTP/HTTPs
5. Web Pages

Web Pages

Web Browsers

1. URLs 3 HTTP/HTTPs 4. Web Servers

2. Web Browsers
Key Components
1. Web Pages
2. Web Browsers
3. URLs
4. HTTP/HTTPS
5. Web Servers
hyperlink
• In computing, a hyperlink, or simply a link, is a digital
reference providing direct access to data by a user's clicking
or tapping.
• A hyperlink points to a whole document or to a specific
element within a document.
• Hypertext is text with hyperlinks.
• The text that is linked from is known as anchor text.
Hypertext
• is text displayed on a computer display or other electronic devices
with references (hyperlinks) to other text that the reader can
immediately access.
• Hypertext documents are interconnected by hyperlinks, which are
typically activated by a mouse click, keypress set, or screen touch.
• Apart from text, the term "hypertext" is also sometimes used to
describe tables, images, and other presentational materials with
integrated hyperlinks.
Web Browsers
Web Browsers

• Web browsers are software applications that allow users to access,

retrieve, and view content on the World Wide Web.
• They interpret and display web pages written in HTML, CSS,
JavaScript, and other web technologies.
Key Functions of a Web Browser
• Request Web Pages – They send requests to web servers via the HTTP
or HTTPS protocols.
• Render Content – Convert HTML and other web code into a visual and
interactive display.
• Navigation – Provide tools like back, forward, refresh, bookmarks, and
address bar to navigate the internet.
• Manage Files – Download files and store cookies/cache.
• Security – Warn users about unsafe websites and manage secure
connections (SSL/TLS).
Example Workflow

1.You type www.wikipedia.org into the browser.

2.The browser contacts the DNS to find the IP address.
3.Sends an HTTP/HTTPs request to Wikipedia’s server.
4.The server sends back the webpage.
5.The browser renders and displays the content.
DNS SERVER
Popular Web Browsers
Browser Name Developer Notable Features
Google Chrome Google Fast, widely supported extensions
Mozilla Firefox Mozilla Foundation Open-source, privacy-focused
Microsoft Edge Microsoft Integrated with Windows, based on
Chromium
Safari Apple Optimized for Apple devices
Opera Opera Software Built-in VPN and ad blocker
Brave Brave Software Privacy-first, blocks ads/tracking

https://en.wikipedia.org/wiki/List_of_web_browsers
Architecture of Web Browser
Data Storage (Persistence)
• Stores:
• Cookies
• Local storage (HTML5)
• Cache
• IndexedDB
• Session data
Networking Layer
• Manages all network calls like:
• Fetching web pages
• Sending HTTP/HTTPS requests
• Downloading assets (images, scripts, stylesheets)
Layout and rendering
• The layout of a web page is typically specified by Cascading Style Sheets (CSS).
• Each style sheet is a series of rules for how the page should be presented. For
example, some rules specify typography details, such as font, color, and text
size, while others determine the placement of images.
• The engine combines all relevant CSS rules to calculate precise graphical
coordinates for the visual representation it will paint on the screen.
• Some engines may begin rendering before a page's resources are downloaded.
• This can result in visual changes as more data is received, such as images being
gradually filled in or a flash of unstyled content
browser engine
•Acts as a bridge between the UI and the rendering engine.
•Translates actions like "go", "reload", and "back" into instructions
for the rendering engine.
Rendering Engine
• A browser engine (also known as a layout engine or rendering engine) is a core
software component of every major web browser.
• The primary job of a browser engine is to transform HTML documents and other
resources of a web page into an interactive visual representation on a user's
device.
• a browser engine enforces the security policy between documents,
• handles navigation through hyperlinks and data submitted through forms
• implements the document object model (DOM) exposed to scripts associated
with the document.
• Browser engines are also used in non-browser applications. An email client
needs one to display HTML email.
Notable Browser/rendering engines

Engine Status Creators License Used in

Apple,
WebKit Stable initially GNU LGPL, BSD-style Safari browser, GNOME Web, Konqueror,
forked from Orion and all browsers for iOS[3]
KHTML
Google,
initially
Blink Stable GNU LGPL, BSD-style All Chromium-based browsers
forked from
WebKit
Firefox browser and its forks; SeaMonkey
Gecko Stable Mozilla Mozilla Public
browser, Thunderbird email client
Trident Stable Microsoft Proprietary Internet Explorer browser; Microsoft Edge IE
mode
JavaScript engines
• The first engines for JavaScript were mere interpreters of the source
code, but all relevant modern engines use just-in-time compilation for
improved performance.
• JavaScript engines are typically developed by web browser vendors,
and every major browser has one.
• In a browser, the JavaScript engine runs in concert with the rendering
engine via the Document Object Model and Web IDL bindings.
Popular JavaScript engines
Engine Description
A JavaScript engine used in Google Chrome and other Chromium-based browsers (such as
V8 Microsoft Edge). Also used in Node.js, Deno, and V8.NET.
A JavaScript engine in Mozilla Gecko applications, including Firefox. The engine currently
SpiderMonkey
includes the IonMonkey compiler and OdinMonkey optimization module
A JavaScript interpreter and JIT originally derived from KJS. It is used in the WebKit project,
JavaScriptCore applications such as Safari, and the Bun runtime. Also known as Nitro, SquirrelFish, and
SquirrelFish Extreme.
A JavaScript engine developed by Opera Software ASA, included in the 10.50 release of the
Carakan Opera web browser, until switching to V8 with Opera 15 (released in 2013).
developed by Facebook for React Native mobile apps[24] Can also be used independent
Hermes
from React Native.

https://en.wikipedia.org/wiki/List_of_JavaScript_engines
• In a browser, the two engines are coordinated via the DOM and
Web IDL bindings.
Web IDL
• Web IDL is an interface description language (IDL) format for
describing APIs (application programming interfaces) that are
intended to be implemented in web browsers.
• Its adoption was motivated by the desire to improve the
interoperability of web programming interfaces by specifying how
languages such as ECMAScript should bind these interfaces.
DOM
• When a browser loads an HTML page, it parses the content and
creates a tree-like structure
• where:
• Each HTML element becomes a node in the tree.
• The root of this tree is the <html> element.
Activity test render engine of your browser
• https://output.jsbin.com/surane/quiet

• Taken from youtube video

• https://www.youtube.com/watch?v=u0hYIRQRiws
• Randering by Gecko
• https://www.youtube.com/watch?v=ZTnIxIA5KGw

• Render Engine Servo

https://www.youtube.com/watch?v=avPRdXB4dJM
Document Object Model (DOM)
• The Document Object Model (DOM) is the data representation of the objects
that comprise the structure and content of a document on the web.
• The Document Object Model (DOM) is a programming interface for web
documents. It represents the page so that programs can change the document
structure, style, and content. The DOM represents the document as nodes and
objects; that way, programming languages 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.
What Can You Do with the DOM?
Using JavaScript, you can:
• Access elements
• Modify content or style
• Add or remove elements
• Handle events (like clicks or keypresses)
DOM = Document as a Tree
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a paragraph.</p>
</body>
</html>
Ex
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:
• js
• const paragraphs = document.querySelectorAll("p");
• // paragraphs[0] is the first <p> element
• // paragraphs[1] is the second <p> element, etc.
• alert(paragraphs[0].nodeName);
web browser
• A web browser, often shortened to browser, is an application for
accessing websites.
• When a user requests a web page from a particular website, the
browser retrieves its files from a web server and then displays the
page on the user's screen.
• Browsers can also display content stored locally on the user's device.
- wikipedia
Web Servers
web server
A web server is both:
• Hardware – a computer that stores web content (HTML files, images,
videos, etc.)
• Software – a program that delivers this content over the internet
when requested by a web browser using the HTTP/HTTPS protocol.
web server
• A web server is computer software and underlying hardware that
accepts requests via HTTP (the network protocol created to distribute
web content) or its secure variant HTTPS.
• A user agent, commonly a web browser or web crawler, initiates
communication by making a request for a web page or other resource
using HTTP, and the server responds with the content of that resource
or an error message.
• A web server can also accept and store resources sent from the user
agent if configured to do so.
Components of Web Server Software:

Component Purpose
HTTP Server Handles HTTP/HTTPS requests
File System Access Retrieves web files (HTML, CSS, JS, images, etc.)
Security Module Manages SSL/TLS (HTTPS), permissions
Logging Keeps logs of requests, errors
Virtual Hosting Serves multiple domains from one server
Popular Web Server Software:

Server Developer Notes

Apache Apache Foundation Open-source, most widely used
Nginx F5, Inc. High-performance, handles many users efficiently
Microsoft IIS Microsoft Windows-based server
LiteSpeed LiteSpeed Tech Lightweight, commercial & free version
Node.js Open Source JavaScript-based, also acts as a server
Common Web Server Tasks
• Hosting websites
• Running server-side scripts (PHP, Python, Node.js)
• Managing security (SSL certificates)
• Load balancing & reverse proxy
• Logging and analytics
Web System Architecture
An Overview of Web Architecture Components and Models
What is Web System Architecture?
• Web System Architecture defines the
• structure and
• interaction of components in a web application,
such as clients,
• servers, and
• databases.
Typical Web System Architecture Model
• Two-Tier Architecture
• Client ↔ Server (combines app + database)
• Simpler but less scalable
• Three-Tier Architecture (Most Common) Client Tier:
• Browser/UIApplication Tier
• Server with business logic
• Database Tier: Backend data storage
• Offers better scalability, maintainability, and security
• N-Tier Architecture / Distributed
• Includes additional layers (e.g., caching, messaging queues, APIs, microservices)
• Used in large-scale enterprise systems
N-Tier Architecture Web System Architecture
https://learn.microsoft.com/en-us/azure/architecture/guide/architecture-styles/n-tier
When to use this architecture
N-tier architectures are typically implemented as infrastructure-as- platforms.
service (IaaS) applications, with each tier running on a separate set • Less learning curve for most developers.
of VMs. However, an N-tier application doesn't need to be pure
IaaS. Often, it's advantageous to use managed services for some • Relatively low cost by not rearchitecting the solution
parts of the architecture, particularly caching, messaging, and data • Natural evolution from the traditional application model.
storage. • Open to heterogeneous environment (Windows/Linux)
Consider an N-tier architecture for: Challenges
• Simple web applications. • It's easy to end up with a middle tier that just does CRUD
• A good starting point when architectural requirements are not operations on the database, adding extra latency without doing
clear yet. any useful work.
• Migrating an on-premises application to Azure with minimal • Monolithic design prevents independent deployment of
refactoring. features.
• Unified development of on-premises and cloud applications. • Managing an IaaS application is more work than an application
• N-tier architectures are very common in traditional on-premises that uses only managed services.
applications, so it's a natural fit for migrating existing workloads • It can be difficult to manage network security in a large system.
to Azure. • User and data flows typically span across multiple tiers, adding
Benefits complexity to concerns like testing and observability.
• Portability between cloud and on-premises, and between cloud
Main Components
1. Client (Front-End)
2. Web Server
3. Application Server
4. Database Server
Client (Front-End)
• The user-facing part of the application.
• Technologies: HTML, CSS, JavaScript.
• Runs in a web browser.
Web Server
• Handles HTTP requests.
• Serves static content or routes dynamic requests to application server.
• Examples: Apache, Nginx.
Application Server
• Executes business logic.
• Processes dynamic requests and interacts with databases.
• Languages: PHP, Python, Node.js, Java, etc.
Database Server
• Stores and manages data.
• Supports queries, updates, and transactions.
• Examples: MySQL, PostgreSQL, MongoDB.
Two-Tier Architecture
• Client ↔ Server (combines app and database).
• Simple and fast but limited scalability.
Three-Tier Architecture
• 1. Client Tier: UI/Browser
• 2. Application Tier: Business logic
• 3. Database Tier: Persistent data
• Common in modern web apps.
N-Tier / Distributed Architecture
• Includes additional layers like caching, APIs, microservices.
• Used in large-scale systems for scalability and modularity.
Benefits of Web Architecture
• ✔ Scalability
• ✔ Performance
• ✔ Maintainability
• ✔ Security
• ✔ Modular Development
URL
Uniform Resources Locator
URL
• A URL (Uniform Resource Locator) is the address used to access a
specific resource on the Internet.
• It tells the browser where to find a resource—such as a web page,
image, or file—on a server.
What is a URL?
• URL stands for Uniform Resource Locator.
• It is the address used to access resources on the Internet, such as web
pages or files.
Purpose of a URL
• URLs allow browsers to locate and retrieve web resources hosted on
servers across the internet.
Basic Structure of a URL
• Example: https://www.example.com/blog/what-is-a-url/page.html
• Main parts: Protocol, Domain, Path, Query, Fragment
1. Protocol
• Defines the communication method (e.g., HTTP, HTTPS, FTP).
• Format : protocol://
• Example:
• https://
• http://
• ftp://
2. Domain Name
• The server or website's address.
• Example: www.example.com
Example
• www.example.com
•│ │ │
•│ │ └─ Top-Level Domain (TLD) → e.g., .com, .org, .edu
• │ └───────── Second-Level Domain (SLD) → e.g., example
• └────────────── Subdomain → e.g., www (optional)
Parts Explained
• Subdomain (Optional)
• Prefix to organize content (e.g., www, blog, mail)
• Not always required
• Example: blog.example.com
• Second-Level Domain (SLD)
• The main name of the website
• Registered by individuals or organizations
• Example: example in example.com
• Top-Level Domain (TLD)
• The suffix indicating domain category
• Examples: .com, .net, .org, .edu, .in
Role of Domain Name:
• Translates to an IP address via the Domain Name System (DNS)
• Makes web addresses human-friendly
• Used in emails, websites, and other internet services
Generic TLDs (gTLDs) – Open to general
use:
TLD Description
.com Commercial websites (most common)
.org Organizations, nonprofits
.net Networks, infrastructure
.info Informational sites
.biz Business use
.name Personal names
.pro Professionals (e.g., doctors)
Sponsored TLDs (sTLDs) – Restricted to
specific groups:

TLD Description
.edu Educational institutions (mostly US)
.gov U.S. Government agencies
.mil U.S. Military
.int International organizations
.aero Aviation industry
.museum Museums
.coop Cooperatives
Country-Code TLDs (ccTLDs) – For
specific countries:

TLD Country
.in India
.us United States
.uk United Kingdom
.cn China
.ca Canada
.jp Japan
.de Germany
.au Australia
New gTLDs – Custom or branded TLDs
introduced in recent years:

TLD Usage Example

.tech Technology businesses
.app Mobile/web apps
.blog Blogging sites
.xyz Generic, brandable use
.online General online presence
.shop E-commerce stores
.ai Popular with AI startups
Common Subdomains and Their Uses:
Subdomain Purpose
www Standard website access
blog Blogging section of a website
mail Email service or webmail access
shop Online store or e-commerce section
support Customer support/helpdesk
docs Documentation or manuals
forum Community forum
dev Development or testing site
news News or updates section
api Public or private API access
portal User login portal
3. Port (Optional)
• Specifies the communication port on the server.
• Defaults: 80 for HTTP, 443 for HTTPS.
Commonly Used Web Ports
Port Number Protocol Purpose
80 HTTP Default port for unencrypted web traffic
443 HTTPS Default port for secure (SSL/TLS) web traffic
21 FTP File Transfer Protocol (for file uploads/downloads)
22 SSH Secure shell access (can be used for secure file transfers via SFTP)
23 Telnet Remote command-line access (insecure, rarely used now)
25 SMTP Email sending protocol (not for browsing)
53 DNS Domain Name System (resolves domain names to IPs)
110 POP3 Post Office Protocol (for receiving emails)
143 IMAP Internet Message Access Protocol (email retrieval)
3306 MySQL Database port for MySQL (backend of web apps)
HTTP
8080 Alternate HTTP port, often used for testing/proxy
(alt)
8443 HTTPS Alternate HTTPS port for secure web apps
(alt)
4. Path
• Indicates the specific resource or file on the server.
• Example: /path/page.html
Web Page Files

Extension Description
.html Standard web page (HTML5)
.htm Alternative HTML extension
.php PHP script (server-side)
.asp Active Server Page (Microsoft)
.aspx ASP.NET web page
.jsp Java Server Page
.cgi Common Gateway Interface script
.erb Embedded Ruby (Ruby on Rails)
Script and Data Files

Extension Description
.js JavaScript file
.json JSON data file
.xml XML data file
.ts TypeScript source file
Styles and Layout

Extension Description
.css Cascading Style Sheets
.scss SASS (CSS preprocessor)
Image Files

Extension Description
.jpg or .jpeg JPEG image
.png Portable Network Graphics
.gif Graphics Interchange Format
.webp Modern image format (Google)
.svg Scalable Vector Graphics
.ico Icon file (e.g., for favicons)
Document and Media Files

Extension Description
.pdf Portable Document Format
.doc / .docx Microsoft Word document
.ppt / .pptx PowerPoint presentation
.mp4 Video file
.mp3 Audio file
.zip Compressed archive
5. Query String
• The query string is the part of a URL that contains data to be sent to
the server, often used for things like searches, filtering, form
submissions, and tracking.

• https://www.example.com/search?query=books&category=fiction
↑
Query String
Structure of a Query
• String:
rubyCopyEdit?key1=value1&key2=value2&key3=value3
• rubyCopyEdit → Name of the script on server
• ? → Starts the query string
• & → Separates multiple key-value pairs
• = → Assigns a value to a key
Common Use Cases:

Example URL Use

...?search=laptop Search queries
...?page=2&limit=10 Pagination
...?sort=price&order=asc Sorting results
...?user=123&token=abc Authentication/session tracking
...?utm_source=google&utm_campaign=sale Marketing and analytics tracking
How the Server Uses It:
• The server reads the query string values to generate customized
responses, such as filtering product listings, processing form data, or
tracking users.
6. Fragment
• Points to a specific section within a resource.
• Example: #section1
Example
• https://www.facebook.com/photo/?
fbid=10221369559653379&set=a.1419656416339
Query Parameters
After the ?, we have two parameters:
• fbid=10221369559653379
• fbid stands for Facebook ID.
• This is the unique identifier for the specific photo being requested.
• set=a.1419656416339
• set=a.1419656416339 refers to the album or photo set.
• a. indicates an album, and the number 1419656416339 is the album ID.
Amazon shopping
• https://www.amazon.in/s?i=computers&bbn=1375248031&rh=n
%3A976392031%2Cn%3A1375248031%2Cn%3A1375412031%2Cn
%3A1375419031%2Cp_n_deal_type
%3A26921224031%2Cp_36%3A34900-&_encoding=UTF8&content-
id=amzn1.sym.28de4b46-9bf8-434c-96bd-
5afb7cb1a8cd&pd_rd_r=82c66a3c-cdc3-4823-a37b-
df99c007ba05&pd_rd_w=jMdb8&pd_rd_wg=6f4eO&pf_rd_p=28de4b
46-9bf8-434c-96bd-
5afb7cb1a8cd&pf_rd_r=96M6PYGJ3QHGSJYNVWMW&ref=pd_hp_d_
atf_unk
Amazon shopping site
• https://www.amazon.in/s?
• i=computers&
• bbn=1375248031&
• rh=n%3A976392031%2Cn%3A1375248031%2Cn%3A1375412031%2Cn
%3A1375419031%2Cp_n_deal_type%3A26921224031%2Cp_36%3A34900-&
• _encoding=UTF8&
• content-id=amzn1.sym.28de4b46-9bf8-434c-96bd-5afb7cb1a8cd&
• pd_rd_r=82c66a3c-cdc3-4823-a37b-df99c007ba05&
• pd_rd_w=jMdb8&
• pd_rd_wg=6f4eO&
• pf_rd_p=28de4b46-9bf8-434c-96bd-5afb7cb1a8cd&
• pf_rd_r=96M6PYGJ3QHGSJYNVWMW&ref=pd_hp_d_atf_unk
Amazon shopping site
Query Parameters
These come after the ? and are separated by &:
Parameter Meaning
i=computers Specifies the category: Computers & Accessories

bbn=1375248031 Base Browse Node (BBN): this helps Amazon identify the category sub-tree

rh=... A long chain of filters (explained below)

_encoding=UTF8 Character encoding
content-id=amzn1.sym.28de4b46- Identifies a specific marketing campaign or widget
9bf8-434c-96bd-5afb7cb1a8cd
pd_rd_r=..., pd_rd_w=...,
Internal tracking codes for Amazon's recommendation/display engine
pd_rd_wg=...

pf_rd_p=..., pf_rd_r=... Used for personalized recommendation engine or tracking promotion

ref=pd_hp_d_atf_unk Referrer code (identifies the widget or page that led to this search)
• The rh Parameter (Search Filters)
• This is the most important part of the URL:
• rh=n%3A976392031%2Cn%3A1375248031%2Cn%3A1375412031%2Cn
%3A1375419031%2Cp_n_deal_type%3A26921224031%2Cp_36%3A34900-
• Decode the percent-encoding:
• rh=n:976392031,n:1375248031,n:1375412031,n:1375419031,p_n_deal_type:26921224031,p_36:34
900-
• This breaks down as:
• n:976392031 – Main category (likely "Computers & Accessories")
• n:1375248031, n:1375412031, n:1375419031 – Subcategories (e.g., Laptops → Traditional Laptops
→ under a certain brand or type)
• p_n_deal_type:26921224031 – Filter by Deal Type, likely showing Today's Deals
• p_36:34900- – Price filter, where 34900- means ₹34,900 and above
Example: vtop url
• https
• ://
• vtop.vitbhopal.ac.in
• /vtop/content
Scripting
Scripting
• Client side scripting
• embedded script
• external script
• Server side scripting
Client-side scripting
• Client-side scripting refers to a type of online programming that is run on the client side,
rather than on the server, by the user's web browser (on the web server).
• Client-side programming, such as JavaScript, can be integrated in a client's browser's
page. When operating a web application, this script will allow the client's browser to
relieve some of the load on your web server. Client-side scripting enables the
construction of quicker and more responsive online applications by executing source
code on the client's browser rather than the web server.
• The script is run by the user's web browser, which subsequently displays the page,
including any visible script output. In addition, client-side scripts may include
instructions for the browser to execute in response to certain user activities (e.g.,
clicking a button). These instructions are frequently obeyed without the need for further
contact with the server. To reduce communication burden, server load, and response
time, balancing the execution of client and server scripts is utilised.
Types
• Client-side scripts are frequently embedded within an HTML or
XHTML page (thus the term "embedded script"), but they can also be
found in a separate file that is referenced by the document (or
documents) that utilise them (hence the term "external script"). The
relevant files are delivered to the user's computer by the web server
(or servers) on which they reside in response to a request.
Disadvantages of client side scripting
languages
• If the user’s browser is out of date, the website will not display
properly.
• More quality assurance testing is required because different browsers
support script differently
• Not secure because anyone can look at the code in the page source
• Some browsers will disable the active content and tell the user they
may be harmful
Client-side scripting languages uses
• Creates interactive websites.
• Make things move around.
• Play around with temporary storage.
• Serves as a link between the user and the server.
• Requests are sent to the server.
• Data retrieval from the server.
• Allows client-server programmes to be accessed remotely.
JavaScript
• Before 1995, JavaScript was known as LiveScript and was created by Netscape. Later, under the
name JavaScript, it evolved as a joint effort between Netscape and Sun. The most widely used
programming language is JavaScript. According to studies, JavaScript is used on around 97 % of
websites nowadays.
• Mozilla Firefox, Google Chrome, Microsoft Internet Explorer, Microsoft Edge, Opera, Safari, and
other major web browsers are all supported.
• Using form components such as buttons, menus, and text boxes, JavaScript makes it easy to make a
web page interactive. When an event may be triggered by a mouse movement or a keyboard, it's
easier to write event handling in JavaScript.
• The JavaScript programming language is not the same as the Java programming language. Because
JavaScript is not an object-oriented programming language, it lacks the idea of classes.
• Many prominent frameworks and libraries are available for JavaScript at the moment. jQuery,
React, and Angular are the most popular. Facebook developed React, and Google developed
Angular.
Server side scripting
Definition: Server-Side Scripting
• Server-side scripting refers to code that is executed on a web server
rather than in the user's browser. It is used to generate dynamic web
content, interact with databases, manage sessions, authenticate
users, and perform other backend operations before the webpage is
sent to the client’s browser.
Server Side Scripting
• When a user requests a document, the web server executes server-side scripts
written in languages including PHP, ASP.NET, Java, Adobe ColdFusion, Perl, Ruby,
Go, Python, and server-side JavaScript. They generate output in a web browser-
friendly format (typically HTML), which is then delivered to the user's machine.
• The user will not be able to access the script's source code (unless the author
makes it available separately) and may not even be aware that a script has been
run. Client-side scripts may be included in documents generated by server-side
scripts.
• Server-side scripts necessitate the installation of their language's interpreter on
the server, and they provide the same results independent of the client's
browser, operating system, or other system specifics.
Common Server-Side Scripting Languages:
• PHP
• Python (with Flask, Django)
• Node.js (JavaScript on the server)
• Ruby (with Rails)
• Java (JSP, Spring)
• C# (ASP.NET)
Key Features:
• Runs on the web server
• Generates dynamic content
• Can access and manipulate databases and files
• Supports authentication, session management, form processing, etc.
• Results are sent as HTML/CSS/JavaScript to the browser
How It Works:
• The client (browser) sends a request to the server (e.g., by clicking a
link or submitting a form).
• The server-side script runs on the server.
• The script processes the request (e.g., querying a database,
processing data).
• The server sends back the HTML result to the client.
BASIS OF COMPARISON SERVER SIDE SCRIPTING LANGUAGES CLIENT SIDE SCRIPTING LANGUAGES
It's utilised in backend applications when the source
It is utilized at the front end, which is visible to users
Use code isn't visible or concealed from the client through their browser.
(browser).
A web server executes the server-side scripting script
The script for client-side scripting that is already on
Script Running that generates the page that must be delivered to the
the user's computer is run by the browser.
browser.
When a user's browser sends a server request, this It occurs when the browser has all of the codes and
Occurrence occurs. After that, dynamic pages are produced based
then changes the page based on the user's input.
on a number of factors.
Because the server-side programming is done on a When opposed to server side scripting, the client
Execution remote computer, the response time is slower than server scripting procedure is performed on a local
the client-side response time. computer, resulting in a faster response.
A server can run a server-side script, but it cannot run
After receiving the page supplied by the server, the
Operation client-side scripts. browser can conduct client-side scripting.
It facilitates the connection to databases already It doesn't connect to any of the web server's
Connection to the database existing on the web server. databases.
It's ideal for any application that necessitates the It's ideal for any situation that necessitates user
Suitability loading of dynamic data. engagement.
Ruby on Rails, PHP, ColdFusion, Python, ASP, Perl, and Javascript, HTML, CSS, VB script, and other
Languages more languages are used in server programming.
languages are frequently used for client-side
scripting.
It does not have access to all of the files on the web
Access To Files It has full access to all files on the web server. server.

Because server side scripts are generally concealed

Because the scripts are generally not concealed
Security from the client end, it is more secure than client side
from the client, it is less secure.
scripting.
Extra
Protocols Used
• HTTP (HyperText Transfer Protocol) and HTTPS (secure version) are
used to communicate between browsers and servers.
http/https
intermediate
Advanced