Web Application Development Notes
Uploaded by
adithyakrishna235Web Application Development Notes
Uploaded by
adithyakrishna235COMPLETE NOTES
Web Application Development
HTML5, CSS, and JavaScript
1. HTML5
Definition: HTML5 is the latest version of the HyperText Markup Language,
used for structuring content on the web.
Key Features:
Semantic Elements: Introduces new tags (like , ,
, , ) that provide meaning and improve SEO.
Multimedia Support: Native support for audio and video through
and tags.
Canvas Element: Allows for dynamic, scriptable rendering of 2D shapes
and images via the tag.
Forms Enhancements: New input types (like , , ) and
attributes (like , ) improve web forms.
Offline Capabilities: Use of local storage and application cache allows
websites to function even when offline.
2. CSS (Cascading Style Sheets)
Definition: CSS is a stylesheet language used to describe the presentation
of a document written in HTML or XML.
Key Features:
Separation of Content and Style: CSS allows web designers to
separate content (HTML) from design (CSS), making maintenance
easier.
Responsive Design: Media queries enable web pages to adjust styles
based on the screen size or device type, creating a better user
experience on mobile devices.
Flexbox and Grid: Modern layout techniques for creating complex
responsive designs easily.
Web Application Development 1
Animations and Transitions: CSS3 introduces keyframes and transition
properties that allow for smooth animations without JavaScript.
3. JavaScript
Definition: JavaScript is a high-level, dynamic, and interpreted
programming language that enables interactivity on web pages.
Key Features:
Client-Side Scripting: JavaScript runs in the user's web browser,
allowing for dynamic content updates without requiring a page reload.
DOM Manipulation: JavaScript can access and modify the HTML
document object model (DOM) to change content, styles, and structure
on the fly.
Event Handling: JavaScript can listen for user actions (like clicks,
keystrokes, etc.) and execute code in response to those events.
AJAX Support: Allows for asynchronous requests to web servers,
enabling data exchange without a full page reload, enhancing user
experience.
Frameworks and Libraries: Popular libraries (like jQuery) and
frameworks (like React, Angular, and Vue.js) simplify development and
improve code reusability.
Diagram
Hereʼs a simple Mermaid diagram to visualize the relationship between HTML5,
CSS, and JavaScript:
graph TD;
A[Web Development] --> B[HTML5]
A --> C[CSS]
A --> D[JavaScript]
B --> E[Structure & Content]
C --> F[Presentation & Design]
D --> G[Interactivity & Behavior]
HTML5
Web Application Development 2
1. What is HTML5?
HTML5 is the latest version of the Hypertext Markup Language, the standard
language for creating web pages. It provides a more structured and semantic
way to design and manage web content. Additionally, HTML5 supports
multimedia elements, local storage, and enhances native capabilities for web
applications.
2. Key Features of HTML5
Feature Description
Introduces new elements like <section> ,
Semantic Elements <article> , <nav> , <header> , and
<footer> to add meaning to content.
Native support for audio and video using
Multimedia Support <audio> and <video> tags, which reduce
the need for plugins like Flash.
The <canvas> element allows for drawing
Canvas
graphics on the fly via JavaScript.
New input types (e.g., date , color ,
Form Enhancements email ) and attributes (e.g., placeholder ,
required ) improve forms.
Provides an API for storing data in the
Local Storage user's browser, enabling applications to
work offline.
Allows web applications to access the
Geolocation API
geographical location of a user.
Enables background scripts that run
Web Workers concurrently with the main page script,
improving performance.
3. Basic Structure of an HTML Document
The basic structure of an HTML document includes the following elements:
<!DOCTYPE>
<html>
<head>
<title>Web page title</title>
</head>
Web Application Development 3
<body>
<h1>Write Your First Heading</h1>
<p>Write Your First Paragraph.</p>
</body>
</html>
4. Key Components
1. Tags: Enclosed in angle brackets (< >), tags define elements (e.g., for
headings, for paragraphs).
2. Elements: Combinations of opening and closing tags and their content
(e.g., ).
3. Attributes: Provide additional information about elements (e.g.,
).
4. Doctype Declaration: informs the web browser about the
version of HTML being used—essentially declaring that this document is an
HTML5 document.
5. Common HTML Elements
Headings: to for different levels of headings.
Paragraphs: for blocks of text.
Links: for hyperlinks.
Images: to embed images.
Lists: (unordered) and (ordered) for creating lists.
Tables: , (table row), (table data) to create tables.
6. HTML Comments
To create a comment in HTML, you use the following syntax:
<!-- This is a comment -->
Important Table:
Web Application Development 4
HTML Tag Description Example
<html>
The root element of an <html lang="en">...</html>
HTML page.
Contains meta-
<head><title>Page Title</title>
<head> information about the </head>
document.
Sets the title of the
<title> document (shown in <title>My Website</title>
the browser tab).
Provides metadata
<meta> such as character set <meta charset="UTF-8">
and keywords.
Links to external
<link rel="stylesheet"
<link> resources, like href="styles.css">
stylesheets.
Contains the visible
<body> content of the HTML <body>...</body>
document.
Define headings from
<h1> to <h6> most to least <h1>Main Title</h1>
important.
<p> Defines a paragraph. <p>This is a paragraph.</p>
<a href="
<a> Creates a hyperlink. <https://example.com>">Link</a>
<img src="image.jpg"
<img> Embeds an image. alt="Description">
Creates an unordered <ul><li>Item 1</li><li>Item 2</li>
<ul>
list. </ul>
Creates an ordered <ol><li>First</li><li>Second</li>
<ol>
list. </ol>
Defines a list item
<li> (used within <ul> or <li>List Item</li>
<ol> ).
<table><tr><td>Cell</td></tr>
<table> Creates a table. </table>
Defines a row in a
<tr> <tr><td>Row 1</td></tr>
table.
Web Application Development 5
Defines a cell in a table
<td> <td>Cell 1</td>
row.
Defines a header cell
<th> <th>Header</th>
in a table.
A generic container for <div
<div>
flow content. class="container">Content</div>
A generic inline <span style="color:red;">Red
<span>
container for text. Text</span>
Creates an interactive <form action="/submit"
<form>
form for user input. method="post">...</form>
Defines an input <input type="text"
<input>
control in a form. name="username">
Other Tags:
Tag Description Example
Represents introductory
<header><h1>Title</h1>
<header> content or navigational </header>
links.
Represents the footer of a <footer><p>Footer
<footer>
document or section. Content</p></footer>
Represents a thematic <section><h2>Section
<section>
grouping of content. Title</h2></section>
Represents self-contained <article><h2>Article
<article> content that could be Title</h2><p>Content</p>
</article>
distributed independently.
<nav><ul><li><a
<nav>
Represents navigation href="#">Link</a></li></ul>
links. </nav>
Represents content
<aside><p>Related Info</p>
<aside> indirectly related to the </aside>
main content.
Represents the dominant <main><p>Main Content</p>
<main>
content of the <body> . </main>
<video controls><source
Embeds a video file in the src="video.mp4"
<video>
document. type="video/mp4"></video>
<audio> Embeds an audio file in the <audio controls><source
src="audio.mp3"
document.
Web Application Development 6
type="audio/mp3"></audio>
<canvas id="myCanvas"
<canvas>
Used for drawing graphics width="200" height="100">
on the web page. </canvas>
CSS
1. What is CSS?
CSS stands for Cascading Style Sheets, a stylesheet language used to
describe the presentation of a document written in HTML or XML. CSS controls
layout, colors, fonts, and overall visual aesthetics and is an essential part of
modern web design.
Types of CSS:
1. Inline CSS
Definition: Styles applied directly in the HTML element using the
attribute.
Usage:
2. Internal CSS
Definition: Styles defined within a tag in the document's .
Usage:
<style>
p { color: red; }
</style>
3. External CSS
Definition: Styles written in a separate file linked to the HTML
document.
Usage:
<link rel="stylesheet" href="styles.css">
Web Application Development 7
CSS Comments
CSS comments are enclosed within and . Hereʼs how to write them:
/* This is a single-line comment */
/* This is a
multi-line comment */
Examples
1. Single-Line Comment:
body {
background-color: lightgrey; /* Set background color
*/
}
2. Multi-Line Comment:
/* This is a CSS rule for paragraphs
It sets the text color and font size */
p {
color: blue;
font-size: 16px;
}
Basic Structure of a CSS File
A typical CSS file consists of selectors and declaration blocks. Hereʼs a simple
example:
/* Styles for the body element */
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
/* Styles for headers */
Web Application Development 8
h1 {
color: #333;
text-align: center;
}
/* Styles for links */
a {
color: #0066cc;
text-decoration: none;
}
a:hover {
text-decoration: underline; /* Underline on hover */
}
CSS Selectors
Selector Type Description Example
Targets HTML elements
Element Selector h1 { color: blue; }
directly.
Targets elements with a
Class Selector .example { margin: 10px; }
specific class.
Targets an element with a #header { font-size: 20px;
ID Selector }
specific ID.
Targets elements based on input[type="text"] {
Attribute Selector border: 1px solid #ccc; }
attributes.
Targets elements in a
Pseudo-class Selector a:hover { color: red; }
specific state.
CSS Colors
Format Description Example
A six-digit code
Hexadecimal #ff5733 (Orange)
representing RGB values.
Specifies colors using the
RGB rgb(255, 87, 51)
Red, Green, Blue model.
Web Application Development 9
RGB with an Alpha channel
RGBA rgba(255, 87, 51, 0.5)
for opacity.
Specifies colors using
HSL hsl(12, 100%, 60%)
Hue, Saturation, Lightness.
HSL with an Alpha channel
HSLA hsla(12, 100%, 60%, 0.5)
for opacity.
Named CSS colors
Color Names defined by the CSS red , blue , yellow
specifications.
Important Table
CSS Property Description Example
color
Sets the text color of an color: red;
element.
background-color
Sets the background background-color:
color of an element. #f0f0f0;
font-size
Sets the size of the text font-size: 16px;
font.
font-family
Sets the font family for font-family: Arial,
an element's text. sans-serif;
font-weight
Sets the thickness of the font-weight: bold;
font (boldness).
Aligns the text within an
text-align element (e.g., left, right, text-align: center;
center).
line-height
Sets the height of a line line-height: 1.5;
box.
Sets the outer margin
margin space around an margin: 20px;
element.
Sets the inner padding
padding space within an padding: 10px;
element.
border
Sets the border around border: 1px solid
an element. black;
width
Sets the width of an width: 100%;
element.
Web Application Development 10
Sets the height of an
height height: 50px;
element.
Specifies how an
display element is displayed display: block;
(block, inline, flex, etc.).
Specifies the type of
position positioning method for position: relative;
an element.
Offsets an element
top , right , bottom , left relative to its normal top: 10px;
position or the viewport.
A shorthand property to
set the flex-grow, flex-
flex flex: 1;
shrink, and flex-basis
properties.
Aligns flex items along justify-content:
justify-content
the main axis. space-around;
Aligns flex items along
align-items align-items: center;
the cross axis.
Specifies what happens
overflow if the content overflows overflow: hidden;
an element's box.
Sets the transparency
level of an element (0
opacity opacity: 0.5;
transparent, 1
opaque).
Javascript
Definition
JavaScript (JS) is a high-level, dynamic, and interpreted programming
language primarily used for enhancing web pages and creating interactive web
applications. It is object based scripting language.
Key Concepts
Concept Description
Web Application Development 11
Use // for single-line comments and /*
Comments
... */ for multi-line comments.
Declare variables using var , let , or
Variables
const keywords.
Variable Declaration
Keyword Scope Reassignment
var Function/global Yes
let Block Yes
const Block No
1. Data Types
Data Type Description Example
Represents numeric values
Number let num = 42;
(both integers and floats).
Represents a sequence of
String let str = "Hello";
characters.
Represents a logical entity
Boolean and can have two values: let isTrue = false;
true or false.
A variable that has been
Undefined declared but not assigned a let x;
value.
Represents the intentional
Null absence of any object let value = null;
value.
A collection of properties, let obj = { name: "John",
Object
can store multiple values. age: 30 };
A special type of object
Array used to store multiple let arr = [1, 2, 3];
values.
2. Operators
Operator Type Description Example
Web Application Development 12
Used for arithmetic
Arithmetic operations (addition, let sum = a + b;
subtraction, etc.).
Used to compare two
Comparison if (a === b) {}
values.
Used to perform logical
Logical `let result = (a
operations (AND, OR, NOT).
Used to assign values to
Assignment let x = 10;
variables.
A shorthand for if-else let status = (age >= 18)
Ternary
statements. ? "Adult" : "Minor";
Type Operators
Arithmetic + , - , * , / , % , ++ , --
Assignment = , += , -= , *= , /= , %= , ++ , --
Comparison == , === , != , !== , < , > , <= , >=
Logical && , ||, !
Bitwise &, |, ^, ~, <<, >>, >>>
3. Functions
Type Description Example
function greet() { return
Function Declaration Defines a named function. "Hello"; }
A function defined as part const add = function(a, b) {
Function Expression return a + b; };
of a larger expression.
A shorthand syntax for
const multiply = (a, b) => a
Arrow Function writing function * b;
expressions.
Immediately Invoked
A function that runs as (function() {
Function Expression console.log("IIFE"); })();
soon as it is defined.
(IIFE)
4. Control Flow
Statement Description Example
if Executes a block of code if if (x > 10) { ... }
a specified condition is
Web Application Development 13
true.
Executes a block of code if
else else { ... }
the condition is false.
A different approach for switch(day) { case 1: ...
switch
multi-way branching. }
Loops over a block of code
for (let i = 0; i < 5;
for a specified number of i++) { ... }
times.
Loops over a block of code
while (count < 5) { ...
while as long as the condition is }
true.
Executes a block of code at
do { ... } while
do...while least once, then repeats as (condition);
long as a condition is true.
5. Object-Oriented Programming
Concept Description Example
A collection of properties let person = { name:
Object
and methods. "Alice", age: 25 };
class Car {
Class
A blueprint for creating constructor(model) {
objects. this.model = model; } }
A special function used to function Person(name, age)
Constructor create and initialize { this.name = name;
this.age = age; }
objects.
A mechanism to create a
class Dog extends Animal {
Inheritance new class from an existing ... }
class.
person.sayHello =
Method
A function that is a function() { return
property of an object. "Hello"; };
6. Asynchronous Programming
Concept Description Example
Represents a value that let promise = new
Promise may be available now, or in Promise((resolve, reject)
=> { ... });
the future, or never.
Web Application Development 14
Declares an asynchronous async function fetchData()
async
function. { ... }
Pauses the execution of an
let result = await
await async function until a fetchData();
promise is settled.
Calls a function after a setTimeout(() => {
setTimeout specified number of console.log("Hello after 2
seconds"); }, 2000);
milliseconds.
Calls a function
setInterval(() => {
repeatedly, with a fixed
setInterval console.log("Hello every
time delay between each second"); }, 1000);
call.
7. Strings
Strings are sequences of characters.
Method Description
length Returns the length of the string.
Returns the character at the specified
charAt(index)
index.
Returns the index of the first occurrence
indexOf(search)
of a substring.
slice(start, end) Extracts a section of the string.
toLowerCase() Converts the string to lowercase.
toUpperCase() Converts the string to uppercase.
trim() Removes whitespace from both sides.
split(separator) Splits the string into an array.
replace(search, replace) Replaces occurrences of a substring.
JavaScript Cookies
A cookie is an amount of information that persists between a server-side and a
client-side. A web browser stores this information at the time of browsing.
How to create a Cookie in JavaScript?
Command Description
Web Application Development 15
document.cookie Read cookie values.
document.cookie = "name=value" Create or update a cookie.
How Cookies Works?
When a user sends a request to the server, then each of that request is
treated as a new request sent by the different user.
So, to recognize the old user, we need to add the cookie with the response
from the server.
browser at the client-side.
Now, whenever a user sends a request to the server, the cookie is added
with that request automatically. Due to the cookie, the server recognizes
the users.
Javascript Browser Object Model:
The Browser Object Model (BOM) is used to interact with the browser.
The default object of browser is window means you can call all the functions of
window by specifying window or directly. For example:
window.alert("hello javatpoint");
is same as:
alert("hello javatpoint");
Web Application Development 16
BOM Object Description Key Methods/Properties
alert() , prompt() ,
Main browser
window setTimeout() , location ,
window/tab object
document
navigator.userAgent ,
navigator Browser and OS info navigator.language ,
navigator.onLine
location.href ,
Current URL, navigation
location location.reload() ,
control
location.assign()
history.back() ,
history Browser history control history.forward() ,
history.go()
Screen info (size, color screen.width , screen.height ,
screen
depth) screen.colorDepth
HTML document in the document.getElementById() ,
document
window document.body
console.log() ,
console Logs and debugging console.error() ,
console.clear()
Persistent local data localStorage.setItem() ,
localStorage
storage localStorage.getItem()
Session-based data sessionStorage.setItem() ,
sessionStorage
storage sessionStorage.getItem()
Stores small data for document.cookie , expires ,
cookies
tracking/session path , secure
Pop-up dialogs for user
dialogs alert() , confirm() , prompt()
interaction
Web Application Development 17
Javascript DOM
DOM Object Description Key Methods/Properties
Represents the HTML
document.body , document.title ,
document document loaded in the
document.URL
browser
Represents each HTML element.id , element.className ,
Element
element element.innerHTML
getElementById() ,
Access elements based
Selectors getElementsByClassName() ,
on selectors
querySelector()
Change or update innerHTML , textContent ,
Content Manipulation
element content setAttribute()
style.property ,
Change element styles
CSS Manipulation classList.add() ,
dynamically
classList.remove()
Adds interactivity by
addEventListener() , onclick ,
Event Handling responding to user
onmouseover
actions
Navigate through DOM parentNode , children ,
Traversal
elements nextSibling , previousSibling
Create new elements or createElement() ,
Creation
modify structure appendChild() , removeChild()
getAttribute() ,
Manage element
Attributes setAttribute() ,
attributes
removeAttribute()
DOM Example
document.getElementById("myId").innerHTML = "Hello World!";
Exception Handling
JavaScript uses , , and blocks for error handling.
Usage Description
try Wraps code to test for errors.
Web Application Development 18
Handles any error that occurs in the try
catch
block.
Executes code after try and catch ,
finally
regardless of the outcome.
try {
// Code that may throw an error
} catch (error) {
// Handle error
} finally {
// Always executes
}
Errors in Javascript:
Error Type Description Example
Occurs when there is a
mistake in the syntax,
Syntax Error var x = ; (missing value)
preventing code from
running.
Happens during code
execution, usually due to console.log(y); (y is not
Runtime Error
undefined variables or defined)
invalid operations.
Code runs without errors,
but produces incorrect or Using + instead of - in
Logical Error
unexpected results due to calculations
flawed logic.
Multiple-Choice Questions on HTML, CSS, and JavaScript
1. What does HTML stand for?
A) HyperText Markup Language
B) HyperText Machine Language
C) HyperText Multi-language
Web Application Development 19
D) HyperText Modeling Language
2. Which tag is used to create a hyperlink in HTML?
A)
B)
C)
D)
3. What does CSS stand for?
A) Cascading Style Sheets
B) Creative Style Sheets
C) Colorful Style Sheets
D) Computer Style Sheets
4. Which of the following is used to apply styles to an HTML document?
A) <style> tag
B) <script> tag
C) <css> tag
D) <design> tag
5. What is the correct HTML element for inserting a line break?
A)
B)
C)
D)
6. Which of the following is NOT a valid JavaScript data type?
A) String
B) Number
C) Boolean
D) Character
7. What does the function do in JavaScript?
A) Displays a message in the console
Web Application Development 20
B) Sends an HTTP request
C) Displays an alert box with a specified message
D) Changes the background color of the page
8. Which CSS property is used to change the text color of an element?
A) text-color
B) color
C) font-color
D) text-style
9. Which HTML attribute is used to define inline styles?
A) styles
B) class
C) style
D) css
10. What does the method do in JavaScript?
A) Retrieves the value of an HTML element
B) Returns an element that matches the provided ID
C) Creates a new HTML element
D) Updates the content of an HTML element
Answers
1. A) HyperText Markup Language
2. B)
3. A) Cascading Style Sheets
4. A)
5. C)
6. D) Character
7. C) Displays an alert box with a specified message
8. B) color
Web Application Development 21
9. C) style
10. B) Returns an element that matches the provided ID
HTTP/HTTPS
Definition
HTTP (Hypertext Transfer Protocol) is a protocol used for transferring data
over the web. It facilitates communication between clients (such as web
browsers) and servers.
HTTPS (HTTP Secure) is the secure version of HTTP, using SSL/TLS to encrypt
the data exchanged between the browser and the web server, ensuring
confidentiality and integrity.
HTTP (Hypertext Transfer HTTPS (Hypertext Transfer
Feature
Protocol) Protocol Secure)
Data is transferred as plain Data is encrypted,
Security text, vulnerable to providing secure data
interception. transfer.
No encryption; anyone can Uses SSL/TLS encryption
Encryption
read data if intercepted. to protect data.
Operates on port 80 by Operates on port 443 by
Port
default. default.
URL Prefix Begins with http:// . Begins with https:// .
Essential for sensitive data
Common for non-sensitive
Use Case like payments, login
data and internal networks.
credentials, etc.
Offers SEO benefits; search
SEO Impact No SEO benefits.
engines prefer secure sites.
No padlock icon; often Displays a padlock icon,
Browser Indicator labeled "Not Secure" in indicating a secure
modern browsers. connection.
Only Adds a Security Layer
Operates over the
Layers (SSL/TLS) before the
Application Layer
Application Layer
Web Application Development 22
In summary, HTTPS is the secure, encrypted version of HTTP, widely used for
any website that handles user data, transactions, or personal information,
providing both security and a trust signal to users.
Multiple-Choice Questions on HTTP/HTTPS
1. What does HTTP stand for?
A) HyperText Transfer Protocol
B) HyperText Transmission Protocol
C) Hyper Transfer Text Protocol
D) HyperText Transaction Protocol
2. What is the main difference between HTTP and HTTPS?
A) HTTP is faster than HTTPS.
B) HTTPS uses encryption (SSL/TLS) for security, while HTTP does not.
C) HTTPS is used only for APIs, while HTTP is for web pages.
D) There is no difference; they are the same.
3. What port does HTTP typically use?
A) 21
B) 25
C) 80
D) 443
4. Which of the following protocols is used to secure communications over
a computer network?
A) FTP
B) SSH
C) SSL/TLS
D) Telnet
5. What does the "S" in HTTPS stand for?
A) Secure
B) System
Web Application Development 23
C) Standard
D) Simple
6. Why is HTTPS important for web applications?
A) It improves the loading speed of a website.
B) It prevents users from accessing the website.
C) It ensures data integrity and confidentiality during transmission.
D) It provides free hosting services.
7. What type of certificate is used to establish HTTPS?
A) API Key
B) Security Token
C) SSL/TLS Certificate
D) Authentication Token
8. What kind of attacks does HTTPS help prevent?
A) SQL Injection
B) Man-in-the-Middle Attacks
C) Denial of Service Attacks
D) Cross-Site Scripting (XSS)
9. How can a user tell if a website is using HTTPS?
A) There is a warning message.
B) The URL starts with "http://"
C) The URL starts with "https://"
D) The website has no advertisements.
10. What happens when a web server receives an HTTP request?
A) It ignores the request.
B) It sends the request to another server.
C) It processes the request and sends back a response.
D) It returns an error without processing.
Web Application Development 24
Answers
1. A) HyperText Transfer Protocol
2. B) HTTPS uses encryption (SSL/TLS) for security, while HTTP does not.
3. C) 80
4. C) SSL/TLS
5. A) Secure
6. C) It ensures data integrity and confidentiality during transmission.
7. C) SSL/TLS Certificate
8. B) Man-in-the-Middle Attacks
9. C) The URL starts with "https://"
10. C) It processes the request and sends back a response.
AJAX (Asynchronous JavaScript and
XML)
Definition
AJAX is a set of web development techniques that allow web applications to
communicate with a server asynchronously without interfering with the display
and behavior of the existing page.
Web Application Development 25
1. User sends a request from the UI and a javascript call goes to
XMLHttpRequest object.
2. HTTP Request is sent to the server by XMLHttpRequest object.
3. Server interacts with the database using JSP, PHP, Servlet, ASP.net etc.
4. Data is retrieved.
5. Server sends XML data or JSON data to the XMLHttpRequest callback
function.
6. HTML and CSS data is displayed on the browser.
Key Features
Feature Description
Enables updating web pages without
Asynchronous
reloading.
Primarily uses the XMLHttpRequest object
JavaScript-Based
for making requests.
Initially designed for XML but now
Data Formats
commonly uses JSON.
Web Application Development 26
Note: Synchronous vs Asynchronous
Synchronous (Sync)
Definition: Operations occur one after the other, in sequence.
Definition: Operations occur one after the other, in sequence.
Example: Waiting in line at a coffee shop. You wait for the person ahead to
finish before ordering.
Example: Waiting in line at a coffee shop. You wait for the person ahead to
finish before ordering.
Asynchronous (Async)
Definition: Operations occur simultaneously, without blocking.
Definition: Operations occur simultaneously, without blocking.
Example: Ordering food at a restaurant. You place your order and continue with
other activities while waiting for your food.
Example: Ordering food at a restaurant. You place your order and continue
with other activities while waiting for your food.
Key differences
Aspect Synchronous Asynchronous
Execution Sequential Parallel
Blocking Yes No
Performance Slower Faster
Complexity Simpler More complex
Real-time updates Difficult Easier
JS vs AJAX
Feature JavaScript (JS) AJAX
A technique for creating
A programming language
asynchronous web
Definition used for client-side
applications using
scripting.
JavaScript.
Web Application Development 27
To send and receive data
To enable interactive web
asynchronously from a
Purpose pages and dynamic
server without refreshing
content.
the page.
Primarily used for
Can manipulate data in the exchanging data with
Data Exchange
browser (client-side). servers (often in the
background).
Always asynchronous,
Synchronous vs. Can be both synchronous
promoting a seamless user
Asynchronous and asynchronous.
experience.
No specific format
Commonly uses JSON and
Supported Formats requirement (text, HTML,
XML for data exchange.
DOM manipulation).
Loading new content,
Form validation, interactive submitting forms without a
Use Cases
content, animations. page reload, retrieving
updated data.
Summary
JavaScript is a fundamental programming language used for web development,
while AJAX is a technique built on JavaScript that enables asynchronous data
exchange with a server, enhancing the user experience.
1. What does AJAX stand for?
A) Asynchronous JavaScript and XML
B) Asynchronous Java and XHTML
C) Advanced JavaScript and XML
D) Asynchronous Java XML
2. Which of the following technologies is NOT typically used in AJAX?
A) HTML
B) JavaScript
C) SQL
D) XMLHttpRequest
3. What is the purpose of the XMLHttpRequest object?
Web Application Development 28
A) To send data synchronously
B) To perform database queries
C) To send and receive data asynchronously
D) To manipulate HTML DOM elements
4. Which of the following is an advantage of using AJAX for web
applications?
A) It blocks the user interface until the data is loaded.
B) It provides a more interactive and faster user experience.
C) It requires a full page reload for every request.
D) It is less secure than traditional form submissions.
5. What happens when the readyState property of XMLHttpRequest is 4?
A) The request is opened.
B) The response headers have been received.
C) The response is fully received and ready to be processed.
D) The request is being sent.
6. Which of the following methods is used to send data in an
XMLHttpRequest?
A) load()
B) open()
C) send()
D) request()
7. What is JSON in the context of AJAX?
A) A method for sending data to the server.
B) A security feature used to protect data.
C) A lightweight data-interchange format.
D) A proprietary data format used by Microsoft.
8. What does the responseText property of XMLHttpRequest return?
A) The HTTP status of the request.
Web Application Development 29
B) The headers returned from the server.
C) The response body as a text string.
D) The ready state of the request.
9. What method would you use to open a request in an XMLHttpRequest
object?
A) initialize()
B) start()
C) open()
D) begin()
10. Which of the following best describes the difference between
synchronous and asynchronous requests?
A) Synchronous requests return data instantly; asynchronous requests
take longer.
B) Synchronous requests do not block the UI; asynchronous requests
do block the UI.
C) Synchronous requests block the UI until the response is received;
asynchronous requests do not.
D) There is no difference; they operate the same way.
Answers
1. A) Asynchronous JavaScript and XML
2. C) SQL
3. C) To send and receive data asynchronously
4. B) It provides a more interactive and faster user experience.
5. C) The response is fully received and ready to be processed.
6. C) send()
7. C) A lightweight data-interchange format.
8. C) The response body as a text string.
9. C) open()
Web Application Development 30
10. C) Synchronous requests block the UI until the response is received;
asynchronous requests do not.
REST APIs (Representational State
Transfer)
Definition
REST is an architectural style for designing networked applications. It relies on
a stateless communication protocol, typically HTTP, and uses standard HTTP
methods.
Resources: Access data identified by URIs.
HTTP Methods:
Method Description Usage
Retrieves data from the
GET GET /api/items
server without altering it.
Sends data to the server
POST POST /api/items
to create a new resource.
Updates an existing
PUT resource or creates it if it PUT /api/items/1
doesn't exist.
Removes a resource from
DELETE DELETE /api/items/1
the server.
Stateless: Each request is independent; no server-side session state.
Data Format: Typically JSON or XML.
Advantages
Scalable: Can grow easily with traffic.
Simple: Uses familiar HTTP methods.
Flexible: Supports various data formats.
Quick Example
Request:
Web Application Development 31
>
Response:
{
"id": 12345,
"name": "John Doe",
"email": "john@example.com"
}
REST VS HTTP:
REST is an architectural style for designing networked applications that use
HTTP as a protocol for communication, focusing on resource manipulation
and statelessness.
Multiple-Choice Questions on REST API
1. What does REST stand for?
A) Representational State Transfer
B) Remote Server Transfer
C) Representational Service Transfer
D) Real-time State Transfer
2. Which HTTP method is typically used to retrieve data from a RESTful API?
A) POST
B) GET
C) PUT
D) DELETE
3. What is the primary purpose of a REST API?
A) To create user interfaces
B) To enable communication between a client and a server
C) To manage databases
Web Application Development 32
D) To provide security features
4. Which of the following is NOT a characteristic of RESTful APIs?
A) Statelessness
B) Client-Server Architecture
C) Multiple protocols
D) Use of standard HTTP methods
5. What does the status code 404 indicate in a REST API response?
A) OK
B) Created
C) Not Found
D) Unauthorized
6. Which HTTP method is typically used to create a new resource in a
RESTful API?
A) PUT
B) POST
C) GET
D) DELETE
7. In RESTful services, resources are usually identified using what?
A) APIs
B) URLs
C) Methods
D) Headers
8. What does the status code 200 indicate in a REST API response?
A) Created
B) No Content
C) OK
D) Bad Request
9. In REST APIs, which format is commonly used for exchanging data?
Web Application Development 33
A) XML
B) JSON
C) CSV
D) Both A and B
10. What is HATEOAS in the context of REST APIs?
A) An architectural constraint that requires clients to navigate the API
dynamically by following links
B) A method for securing API requests
C) A standard for defining API endpoints
D) A protocol for data transmission
Answers
1. A) Representational State Transfer
2. B) GET
3. B) To enable communication between a client and a server
4. C) Multiple protocols
5. C) Not Found
6. B) POST
7. B) URLs
8. C) OK
9. D) Both A and B
10. A) An architectural constraint that requires clients to navigate the API
dynamically by following links
Cookies
Definition
Cookies are small pieces of data stored by the web browser that provide a way
for websites to remember information about the user.
Web Application Development 34
Type of Cookie Description
Temporary cookies that expire when the
Session Cookies
browser is closed.
Remain on the device for a set duration or
Persistent Cookies
until deleted.
Created by the website being visited; used
First-Party Cookies
for user preferences.
Set by external domains; often used for
Third-Party Cookies
tracking and advertising.
Transmitted only over HTTPS, ensuring
Secure Cookies
encryption.
Key Features
Feature Description
Stored on the client-side and sent to the
Storage
server with each HTTP request.
Can have a specified expiration date;
Expiration otherwise, they expire when the session
ends.
Can be marked as Secure , HttpOnly , and
Security Options
SameSite for enhanced security.
Cookie Example
Setting a cookie in JavaScript:
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 20
23 23:59:59 GMT; path=/";
Retrieving a cookie:
const cookies = document.cookie.split(';').reduce((acc, coo
kie) => {
const [name, value] = cookie.split('=');
acc[name.trim()] = value;
return acc;
Web Application Development 35
}, {});
console.log(cookies["username"]); // Output: JohnDoe
Multiple-Choice Questions on Cookies
1. What is a cookie in web development?
A) A piece of software
B) A text file stored on a user's computer by a web browser
C) A type of malware
D) A server-side technology
2. Which of the following is a common use of cookies?
A) Storing user preferences
B) Tracking user sessions
C) Personalizing content
D) All of the above
3. How long can a cookie be set to expire?
A) Only for the current session
B) 1 year maximum
C) Indefinitely
D) Any specified duration
4. Which attribute of a cookie defines its expiration date?
A) Max-Age
B)
C)
D) Both A and B
5. What is a session cookie?
A) A cookie that expires when the browser is closed
B) A long-term cookie stored on the user's computer
C) A cookie that is shared between different websites
Web Application Development 36
D) A cookie used for server-side sessions
6. Which HTTP header is used to send cookies from the server to the client?
A) Set-Cookie
B) Cookie
C) Content-Type
D) User-Agent
7. What is the purpose of the attribute in a cookie?
A) It defines how cookies are shared between sites
B) It prevents cross-site request forgery (CSRF)
C) It increases cookie security
D) Both A and B
8. What is a persistent cookie?
A) A cookie that only exists during the session
B) A cookie that can be used across different browsing sessions
C) A cookie that cannot be deleted
D) A cookie that is not stored on the server
9. How can a user view and delete cookies stored in their browser?
A) Through the web server settings
B) Via the browser's settings or developer tools
C) By clearing their browser cache
D) Through the command line
10. What is the purpose of the flag in a cookie?
A) It allows the cookie to be accessed by JavaScript
B) It makes the cookie accessible only via HTTP(S) requests
C) It increases the cookie's lifetime
D) It restricts the cookie to specific pages
Answers
Web Application Development 37
1. B) A text file stored on a user's computer by a web browser
2. D) All of the above
3. D) Any specified duration
4. D) Both A and B
5. A) A cookie that expires when the browser is closed
6. A) Set-Cookie
7. D) Both A and B
8. B) A cookie that can be used across different browsing sessions
9. B) Via the browser's settings or developer tools
10. B) It makes the cookie accessible only via HTTP(S) requests
Version Control System
What is Git?
Git is a distributed version control system that allows multiple people to work
on a project while keeping track of changes and history.
Types of Version Control Systems
Type Description
Tracks changes on a single machine, using
Local Version Control
file backups.
All files are stored on a central server,
Centralized Version Control
requiring a connection to access.
Everyone has a full copy of the repository,
Distributed Version Control allowing work offline and flexible
collaboration (e.g., Git).
Key Terminology in Git
Term Description Example
A place to store your Your project folder on GitHub is a
Repository
project files. repository.
Web Application Development 38
A saved change or
Saving your work after adding a new
Commit update to your
feature is a commit.
project.
A separate line of Working on a new feature in a branch
Branch
development. called feature1 .
Combining changes
Merging feature1 into main after it's
Merge from one branch into
finished.
another.
A request to review
and add code Asking to merge feature1 into main
Pull Request
changes from one on GitHub.
branch.
git clone
Copying a repository
Clone <https://github.com/user/repo.git >
to your computer.
makes a copy locally.
Sending your
After committing, use git push to
Push changes to a remote
upload your changes.
repository.
Getting the latest
Using git pull to update your local
Pull changes from a
branch with changes from GitHub.
remote repository.
Switching to a git checkout feature1 switches to the
Checkout
different branch. feature1 branch.
A place to prepare
Use git add filename to add changes
Staging Area changes before
to the staging area.
saving them.
A version of your
origin is the default name for your
Remote project on a server
remote repo.
like GitHub.
A personal copy of
You can fork a project on GitHub to
Fork someone else's
make your own changes.
repository.
The current position
HEAD points to your latest commit in
HEAD in your projectʼs
the branch you're on.
history.
A label for a specific
Use tags to mark version 1.0 with git
Tag version of your
tag v1.0 .
project.
Web Application Development 39
Showing changes git diff shows what has changed
Diff
made to files. since the last commit.
Git Configuration Levels
Level Description
Configuration applies to all users on the
System
system.
Configuration applies to the current user
Global
across all repositories.
Configuration applies only to a specific
Local
repository.
Common Git Commands
Command Description
git init Initializes a new Git repository.
Clones an existing repository from a
git clone [url]
remote location.
git add [file] Stages changes for commit.
git commit -m "[message]" Commits staged changes with a message.
git status Shows the current status of the repository.
Uploads local changes to a remote
git push
repository.
Fetches and integrates changes from a
git pull
remote repository.
git branch Lists branches or creates a new branch.
Merges changes from the specified branch
git merge [branch]
into the current branch.
Git vs. GitHub
Aspect Git GitHub
A version control system A platform for hosting Git
Type
for tracking changes. repositories online.
Functionality Manages and tracks Provides collaboration
version history locally. features, issues tracking,
Web Application Development 40
and project management
tools.
Accessed via a web
Installed on your local
Usage interface for sharing and
machine for version control.
collaborating.
GitHub is a proprietary
Git is open-source
Ownership service but offers free
software.
repositories.
Multiple-Choice Questions
1. What is Git?
A) A web hosting service
B) A distributed version control system
C) A programming language
D) A text editor
2. Which command initializes a new Git repository?
A) git start
B) git new
C) git init
D) git create
3. What is the purpose of the command?
A) To save changes to the repository
B) To upload changes to the remote repository
C) To list all files in the repository
D) To switch branches
4. What does do?
A) Creates a new branch
B) Fetches updates from a remote repository
C) Copies a remote repository to your local machine
D) Merges changes from another branch
Web Application Development 41
5. Which of the following is NOT a level of Git configuration?
A) System
B) Global
C) Local
D) Default
6. What command would you use to merge changes from a branch called
“featureˮ into the current branch?
A) git merge feature
B) git combine feature
C) git branch feature
D) git switch feature
7. What is GitHub primarily used for?
A) Coding in different programming languages
B) Hosting Git repositories and collaborative work
C) Compiling code
D) Debugging applications
8. In Git, what does a branch represent?
A) A different version of the repository
B) A separate line of development
C) A backup of the repository
D) A compiled program
9. Which of the following commands is used to view the status of files in the
working directory?
A) git status
B) git check
C) git log
D) git overview
10. What happens during a ?
Web Application Development 42
A) Changes are staged for commit
B) Local changes are sent to a remote repository
C) Remote changes are downloaded to the local repository
D) A new branch is created
Answers
1. B) A distributed version control system
2. C) git init
3. A) To save changes to the repository
4. C) Copies a remote repository to your local machine
5. D) Default
6. A) git merge feature
7. B) Hosting Git repositories and collaborative work
8. B) A separate line of development
9. A) git status
10. B) Local changes are sent to a remote repository
Web Application Development 43
You might also like
- Design and Implementation of An Online Barcode Attendance System100% (4)Design and Implementation of An Online Barcode Attendance System80 pages
- ITT 05103 - 2023mimi Internet Programming-1No ratings yetITT 05103 - 2023mimi Internet Programming-1142 pages
- CSC 204 Lecture Notes by Baako MohammedNo ratings yetCSC 204 Lecture Notes by Baako Mohammed58 pages
- Web Application Development Notes by Piyush - SlashbyteNo ratings yetWeb Application Development Notes by Piyush - Slashbyte44 pages
- Chapter 1 Introduction To HTML, HTTP and PHPNo ratings yetChapter 1 Introduction To HTML, HTTP and PHP78 pages
- Comprehensive Lecture Note On Introduction To Internet TechnologyNo ratings yetComprehensive Lecture Note On Introduction To Internet Technology26 pages
- V - CSE - CCS375 - WT - QB - Unit1 (5 Files Merged)No ratings yetV - CSE - CCS375 - WT - QB - Unit1 (5 Files Merged)31 pages
- CV-MOHAMED-BERRAHO-JOBINTECH 2024-.Net-ReactNo ratings yetCV-MOHAMED-BERRAHO-JOBINTECH 2024-.Net-React1 page
- Web and Internet Technology: Introduction To HTML and CSS ElementsNo ratings yetWeb and Internet Technology: Introduction To HTML and CSS Elements8 pages
- Web Technology - 39072812 - 2025 - 01 - 23 - 16 - 04No ratings yetWeb Technology - 39072812 - 2025 - 01 - 23 - 16 - 0435 pages
- Desafios Grandes em Javascript - 064050No ratings yetDesafios Grandes em Javascript - 06405014 pages
- Web Development: Is The Building, Creating, AND Maintenance of WebsitesNo ratings yetWeb Development: Is The Building, Creating, AND Maintenance of Websites14 pages