WEB TECHNOLOGY II
3.1 introduction
Web technology refers to the tools, techniques and languages used to
communicate between devices over the internet and to build and manages web
sites and web applications.
It includes both front-end (client-side) and back-end (server -side) components
Components of web Technology
1. Web Browser
2. Web server(Apache, Tomcat)
3. HTML
4. CSS
5. JavaScript
6. Front-end frameworks(React, Angular, NODE JS, Vue.JS)
7. Back-end technologies(PHP,PYTHON,NODE JS)
8. Database (MySQL, Mongo DB, ORACLE, Microsoft SQL server)
What is WWW? Explain.
WWW stands for World Wide Web. It is a system of interlinked hypertext
documents and resources that are accessed through the internet using a web
browser.
The Web was invented by Tim Berners-Lee in 1989 while he was working at CERN
(European Organization for Nuclear Research).
Web pages: Written in HTML (Hyper Text Markup Language).
Web browsers: Software used to access the web (e.g., Chrome, Firefox).
Web servers: Computers that store and serve web content.
What is mean by protocol?
A protocol is a set of rules or standards that define how data is transmitted and
communicated between computers or devices in a network. Examples of common
protocol
Protocol Purpose
Used for transferring web pages on
HTTP (Hyper Text Transfer Protocol)
the World Wide Web
Like HTTP, but with encryption for
HTTPS (HTTP Secure)
secure communication
Used for transferring files between
FTP (File Transfer Protocol)
computers
The foundation protocols of the
TCP/IP (Transmission Control Protocol /
Internet — manage how data is
Internet Protocol)
packaged and sent
SMTP (Simple Mail Transfer Protocol) Used to send emails
Translates domain names (like
DNS (Domain Name System)
google.com) into IP addresses
Some important terms of web Technology
Web page: A page displayed by the browser is called web page.
HTML: It is a standard language used to design web pages.
Web server: A powerful computer that contains web pages and runs 24 hours.
Web browser: software used to display web pages in a readable format. For
examples Google chrome, Firefox, Safari, etc.
Internet protocol (IP) address: it contains set of numbers as an address used to
recognize devices or computers on a Network.
XML: XML is a markup language used to store and transport data in a structured,
readable, and machine-understandable format.
Key Points:
Designed to be both human- and machine-readable.
Uses custom tags to define data (unlike HTML, which has predefined tags).
Commonly used in web services, configuration files, and data exchange
between systems.
Examples:
<person>
<name>John</name>
<age>30</age>
</person>
Gateway: it is a node or computer which connects two or more networks for data
transmission.
API: Application programming Interface. It is a set of rules or subroutine for building
software and applications.
E.g. the Twitter API allows you to do things like displaying your latest tweets on
your website.
JavaScript
JavaScript is a High-Level programming language that is mainly used to make web
pages interactive and dynamic. It runs directly in the web browser. It allows web
pages to respond to user actions, update content without reloading, and create
features like image sliders, dropdown menus, form validation, and more.
Runs on the client-side (browser), but can also run on the server-side using
Node.js.
Works with HTML and CSS to build modern web applications.
Supports event handling, form validation, animations.
Benefits of JavaScript
1. Runs in the Browser (Client-Side):
o JavaScript runs directly in the user’s web browser, reducing the load
on the server and making websites faster and more responsive.
2. Highly Interactive:
o It adds dynamic behavior like sliders, dropdowns, live form validation,
and real-time updates without reloading the page.
3. Versatile (Front-End and Back-End):
Can be used for both front-end (with HTML/CSS) and back-end (with
Node.js) development.
4. Fast Execution:
Executes quickly in the browser because it doesn't need to be compiled
5. Rich Tools and Libraries:
Frameworks like React, Angular.js, Vue.js, and libraries like jQuery help
build apps faster and more efficiently.
6. Cross-Platform Support:
JavaScript can run on any device with a web browser—desktops, laptops,
tablets, and phones.
7. Supported by All Browsers:
JavaScript is universally supported by all major web browsers without the
need for extra plugins.
8. Large Community and Learning Resources:
Huge global community, lots of tutorials, forums, open-source projects,
and job opportunities.
9. Integrates Easily with Other Technologies:
Works smoothly with HTML, CSS, and various APIs to create full-featured
web apps.
What JavaScript can do?
Make webpage interactive
Manipulate HTML DOM
Validate form before submission
Handle events (Mouse clicks, hover, keyboard input, scrolling, etc.)
Create Animations
Build web applications
Create mobile and desktop applications
Game development (Create browser games using canvas,)
Define Script:
Script means a piece of code that runs on the server or client. It is of two types
1. Client-side scripting
2. Server-side scripting
1. Client side scripting
Client-side scripting refers to scripts that run in the user's web browser,
rather than on the web server. These scripts are typically used to create
interactive and dynamic web pages.
Examples: JavaScript, HTML, CSS
2. Server-side scripting:
Server-side scripting refers to scripts that run on a web server, rather than
in the user's browser. These scripts are used to generate dynamic content,
interact with databases, process user input, and control the logic of a web
application before the result is sent to the client (browser).
Examples: PHP, Python (e.g., Django, Flask), Node.js, Ruby, ASP.NET, etc.
Differences between client-side and server-side programming languages
Client-side Server-side
It runs in the browser It runs in the web server
To create interactive and dynamic To handle data processing, business
user interface. logic and database operations
Code is visible to users(can view Code is hidden from user
source)
Faster for user interactions (no server
Slower as it depends on server
request needed) response
Less secure because code is exposedMore secure as code runs on the
server
Handles UI events, animations, and Handles form submissions, user
validations authentication, server logic
Working of JS
AST:
A tree-like representation of source code.
AST Interpreter:
An interpreter that traverses the AST to evaluate and execute the program.
Instead of running the raw code, it:
1. Parses the code into an AST.
2. Walks through each node in the AST.
3. Executes the operation represented by each node.
Add JavaScript to HTML Document
There are three main ways to add JavaScript (JS) code into an HTML document:
1. Inline JavaScript
JavaScript code is written directly inside an HTML element using the onclick,
onmouseover, etc., attributes.
Inline JavaScript refers to embedding JavaScript code directly within HTML
elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline JavaScript</title>
</head>
<body>
<h2>This is an example of inline JS</h2>
<button onclick="alert('The button was clicked')">click me!</button>
</body>
</html>
2. Internal JavaScript
JavaScript code is placed inside a <script> tag within the HTML file, usually
inside the <head> or at the end of the <body>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal JavaScript</title>
<script>
function sayHello(){
alert('Hello student, you are doing internal js');
}
</script>
</head>
<body>
<h2>This is an Example of Internal JavaScript</h2>
<button onclick="sayHello()">Click me</button>
</body>
</html>
3. External JavaScript
JavaScript code is written in a separate .js file and linked to the HTML using
the src attribute of the <script> tag.
Create an HTML File (e.g., externaljs.html)
<!DOCTYPE html>
<html>
<head>
<title>External Js </title>
<script src="external.js"></script>
</head>
<body>
<h2>This is an example of External JavaScript</h2>
<button onclick="sayHello()">ClickMe!</button>
</body>
</html>
Create a JavaScript File (e.g., external.js)
function sayHello(){
alert('the button was clicked');
}
