MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

UNIT I INTRODUCTION TO CSS and JAVASCRIPT

Introduction to Web: Server - Client - Communication Protocol (HTTP) – Structure of
HTML Documents – Basic Markup tags – Working with Text and Images with CSS– CSS Selectors
– CSS Flexbox - JavaScript: Data Types and Variables - Functions - Events – AJAX: GET and
POST.
1.1 Introduction to Web: Server - Client

A web server is a software program that serves web pages to web users (browsers).

A web server delivers requested web pages to users who enter the URL in a web browser. Every
computer on the internet that contains a web site must have a web server program.

The computer in which a web server program runs is also usually called a "web server". So, the term
"web server" is used to represent both the server program and the computer in which the server
program runs.

Characteristics of web servers

A web server computer is just like any other computer.

The basic characteristics of web servers are:
 It is always connected to the internet so that clients can access the web pages hosted by the web
server.
 It always has an application called "web server" running.
In short, a "web server" is a computer that is connected to the internet/intranet and has software
called "web server". The web server program will always be running in the computer. When a user
tries to access a website hosted by the web server, it is actually the web server program that delivers
the web page that the client asks for.

All web sites in the internet are hosted in web servers sitting in various parts of the world.

Is a Web Server hardware or software?

Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 1

 MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

Mostly, Web server refers to the software program, that serves the clients request. But sometimes,
the computer in which the web server program is installed is also called a "web server".

Web Server, Behind the Scenes

When I type in an URL such as http://www.ASP.NET and click on some link, I dropped into this
page.

But what happens behind the scenes to bring you to this page and make you read this line of text.

So now, let's see what is actually happening behind the scenes.

The first you might do is, you type the http://www.asp.net/ in the address bar of your browser and
press your return key.

We could break this URL into the following two parts:

1. The protocol we will use to connect to the server (http)
2. The server name ( ASP.NET )
And the following process happens:
 The browser breaks up the URL into these parts and then it tries to communicate with the server
looking up for the server name.
 The server is identified through a unique IP address but the alias for the IP address is maintained in
the DNS Server or the Naming server.
 The browser looks up these naming servers, identifies the IP address of the server requested and gets
the site and gets the HTML tags for the web page.
 Finally it displays the HTML Content in the browser.
Where is my web server?

When you try to access a web site, you don't really need to know where the web server is located.
The web server may be located in another city or country, but all you need to do is, type the URL of
the web site you want to access in a web browser. The web browser will send this information to the
internet and find the web server. Once the web server is located, it will request the specific web page
from the web server program running in the server. The Web server program will process your
request and send the resulting web page to your browser. It is the responsibility of your browser to
format and display the web page to you.

How many web servers are needed for a web site?

Typically, there is only one web server required for a web site. But large web sites like Yahoo,
Google, MSN and so on will have millions of visitors every minute. One computer cannot process
such huge numbers of requests. So, they will have hundreds of servers deployed in various parts of
the world so that can provide a faster response.
Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 2
 MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

How many web sites can be hosted in one server?

A web server can host hundreds of web sites. Most of the small web sites in the internet are hosted
on shared web servers. There are several web hosting companies who offer shared web hosting. If
you buy a shared web hosting from a web hosting company, they will host your web site in their web
server along with several other web sites for a fee.

Examples of web server applications:

1. IIS
2. Apache

1.2 Communication Protocol (HTTP)

The Hypertext Transfer Protocol (HTTP) is application-level protocol for collaborative, distributed,
hypermedia information systems. It is the data communication protocol used to establish
communication between client and server.
HTTP is TCP/IP based communication protocol, which is used to deliver the data like image files,
query results, HTML files etc on the World Wide Web (WWW) with the default port is TCP 80. It
provides the standardized way for computers to communicate with each other.

The Basic Characteristics of HTTP (Hyper Text Transfer Protocol):

o It is the protocol that allows web servers and browsers to exchange data over the web.
o It is a request response protocol.
o It uses the reliable TCP connections by default on TCP port 80.
o It is stateless means each request is considered as the new request. In other words, server doesn't
recognize the user by default.
The Basic Features of HTTP (Hyper Text Transfer Protocol):
36.2M
650
Prime Ministers of India | List of Prime Minister of India (1947-2020)
There are three fundamental features that make the HTTP a simple and powerful protocol used for
communication:

Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 3

 MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

o HTTP is media independent: It specifies that any type of media content can be sent by HTTP as
long as both the server and the client can handle the data content.
o HTTP is connectionless: It is a connectionless approach in which HTTP client i.e., a browser
initiates the HTTP request and after the request is sent the client disconnects from server and waits
for the response.
o HTTP is stateless: The client and server are aware of each other during a current request only.
Afterwards, both of them forget each other. Due to the stateless nature of protocol, neither the client
nor the server can retain the information about different request across the web pages.
The Basic Architecture of HTTP (Hyper Text Transfer Protocol):
The below diagram represents the basic architecture of web application and depicts where HTTP
stands:

HTTP is request/response protocol which is based on client/server based architecture. In this

protocol, web browser, search engines, etc. behave as HTTP clients and the Web server like Servlet
behaves as a server

1.3 Structure of HTML Documents

Here you will learn about document structure of an HTML document. The figure given below shows
the general structure of an HTML document.

Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 4

 MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

Texts between the BODY tag (<body> and </body>) will be displayed in or by the browser.
Basic Structure of an HTML Document
Here is an example shows the basic structure of an HTML document.
<!DOCTYPE html>
<html>
<head>
<title>This is Page Title</title>
</head>
<body>

<h1>This is Main Heading</h1>

<p>This is a paragraph.</p>

</body>
</html>
To start HTML coding, open your text editor like Notepad for windows user. Type the above HTML
code or just do copy and paste.
After typing/copying, save it as filename.htm or filename.html in you computer. Now open saved
HTML document in a web browser to watch output webpage.
You will watch the following given HTML output webpage on your browser.

Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 5

 MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

Here is the explanation of the above HTML document structure example:

 The DOCTYPE declaration defines the document type to be HTML
 The text between <html> and </html> describes an HTML document
 The text between <head> and </head> provides information about the HTML document
 The text between <title> and </title> provides a title for the HTML document
 The text between <body> and </body> describes the visible page content i.e. the content which is
visible in the browser.
 The text between <h1> and </h1> describes the main heading
 The text between <p> and </p> describes a paragraph

1.4 Basic Markup tags

HTML tags are like keywords which defines that how web browser will format and display the
content. With the help of tags, a web browser can distinguish between an HTML content and a
simple content. HTML tags contain three main parts: opening tag, content and closing tag. But some
HTML tags are unclosed tags.
When a web browser reads an HTML document, browser reads it from top to bottom and left to
right. HTML tags are used to create HTML documents and render their properties. Each HTML tags
have different properties.
An HTML file must have some essential tags so that web browser can differentiate between a simple
text and HTML text. You can use as many tags you want as per your code requirement.
o All HTML tags must enclosed within < > these brackets.
o Every tag in HTML perform different tasks.
o If you have used an open tag <tag>, then you must use a close tag </tag> (except some tags)
Unclosed HTML Tags
Some HTML tags are not closed, for example br and hr.
<br> Tag: br stands for break line, it breaks the line of the code.
<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the webpage.
HTML Meta Tags

Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 6

 MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

DOCTYPE, title, link, meta and style

HTML Text Tags
<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>, <address>,
<bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>, <kbd>, <pre>, <samp>, <var> and
<br>
HTML Link Tags
<a> and <base>
HTML Image and Object Tags
<img>, <area>, <map>, <param> and <object>
HTML List Tags
<ul>, <ol>, <li>, <dl>, <dt> and <dd>

open Close
Description Example
tag tag
My name is
This tag allows you to Fred.
<p> </p>
create paragraphs I live in
Medway
<h1> </h1> This is the largest heading Heading 1
This is second biggest
<h2> </h2> Heading 2
heading
<h3> </h3> This is the next heading Heading 3
<h4> </h4> This is another heading Heading 4
This is the second smallest
<h5> </h5> Heading 5
heading
<h6> </h6> This is the smallest heading Heading 6
This is a horizontal line.
<hr
n/a You can use width and size
>
attributes
<b> </b> This makes text bold Bold text
<i> </i> This makes text italic Italic text
<br This tag allows you to abc
n/a
/> insert line breaks def

1.5 Working with Text and Images with CSS

2.16. 1.TEXT COLOR

Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 7
 MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

Text-color property is used to set the color of the text.

Text-color can be set by using the name “red”, hex value “#ff0000” or by its RGB
value“rgb(255, 0, 0).

Syntax:

body
{
color:color name;
}
Example:Html

<!DOCTYPE html>
<html><head>

<style>

h1{

color:red;

h2{

color:gre

en;

</style></head>

<body>

<h
1>
AP
EC
</h1>
<h
2>
M

Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 8

 MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

C
A
</h2>
</body>
</html>

2.TEXT ALIGNMENT
Text alignment property is used to set the horizontal alignment of the text.
The text can be set to left, right, centered and justified alignment.
In justified alignment, line is stretched such that left and right margins are straight.
Syntax:
body
{
text-align:alignment type;
}
Example:html

<!DOCTYPE html>

<html>

<head>

<sty

le>

h1

color:red;

Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 9

 MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

text-align:center;

}
h2

{
color:gr’89

een; text-

align:left;

}
</style>
</head>
<body>
<h1>

GEEKS FOR GEEKS

</h1>

<h2>

TEXT FORMATTING

</h2>

</body>

</html>

3.TEXT-weight

The font-weight property sets the weight, or thickness, of a font and is dependent either
onavailable font faces within a font family or weights defined by the browser.

span {
font-weight: bold;
}
Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 10
 MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

The font-weight property accepts either a keyword value or predefined numeric value.
Theavailable keywords are:

 normal
 bold
 bolder
 lighter

The available numeric values are:

 100
 200
 300
 400
 500
 600
 700
 800
 900

The keyword value normal maps to the numeric value 400 and the value bold maps to 700.

In order to see any effect using values other than 400 or 700, the font being used must
havebuilt-in faces that match those specified weights.

If a font has a bold (“700”) or normal (“400”) version as part of the font family, the
browserwill use that. If those are not available, the browser will mimic its own bold or
normal version of the font. It will not mimic the other unavailable weights. Fonts often
use names like “Regular” and “Light” to identify any alternate font weights.

The following demo demonstrates the use of the alternate weight values:

Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 11

 MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

4.Text font

The font property is a shorthand property for:

 font-style
 font-variant
 font-weight
 font-size/line-height
 font-family

The font-size and font-family values are required. If one of the other values is missing,
theirdefault value are used

Property Values

Property/Value Description

font-style Specifies the font style. Default value is "normal"

font-variant Specifies the font variant. Default value is "normal"

font-weight Specifies the font weight. Default value is "normal"

Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 12

 MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

font-size/line-height Specifies the font size and the line-height. Default value is "normal"

Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 13

 MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

font-family Specifies the font family. Default value depends on the browser

Caption Uses the font that are used by captioned controls (like buttons, drop-
downs, etc.)

Icon Uses the font that are used by icon labels

Menu Uses the fonts that are used by dropdown menus

message-box Uses the fonts that are used by dialog boxes

small-caption A smaller version of the caption font

status-bar Uses the fonts that are used by the status bar

Initial Sets this property to its default value. Read about initial

Inherit Inherits this property from its parent element. Read about inherit

Example:

<!DOCTYPE html>
<html>
<body>

<h1>The font Property</h1>

Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 14

 MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

<p style="font:caption">The font used in captioned controls.</p>

<p style="font:icon">The font used in icon labels.</p>

Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 15

 MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

<p style="font:menu">The font used in dropdown menus.</p>

<p style="font:message-box">The font used in dialog boxes.</p>
<p style="font:small-caption">A smaller version of the caption font.</p>
<p style="font:status-bar">The font used in the status bar.</p>
<p><b>Note:</b> The result of the font keywords is browser dependant.</p>

</body>
</html>
Output:

Css working with images

Images play an important role in any webpage. Though it is not recommended to include a lot of
images, but it is still important to use good images wherever required.
CSS plays a good role to control image display. You can set the following image properties using CSS.
 The border property is used to set the width of an image border.
 The height property is used to set the height of an image.
 The width property is used to set the width of an image.
 The -moz-opacity property is used to set the opacity of an image.

The Image Border Property

The border property of an image is used to set the width of an image border. This property can have a value
in length or in %.
A width of zero pixels means no border.
Here is the example −

<html>
<head>
</head>

Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 16

 MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

<body>
<img style = "border:0px;" src = "C:\Users\JANAKIRAMAN\OneDrive\Desktop\1.png" />
<br />
<img style = "border:3px dashed red;" src =
"C:\Users\JANAKIRAMAN\OneDrive\Desktop\1.png" />
</body>
</html>

It will produce the following result −

The Image Height Property

The height property of an image is used to set the height of an image. This property can have a
value in length or in %. While giving value in %, it applies it in respect of the box in which an image
is available.
Here is an example –

<html>

<head>

</head>

<body>

Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 17

 MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

<img style = "border:1px solid red; height:100px;" src =

"C:\Users\JANAKIRAMAN\OneDrive\Desktop\1.png" />

<br />

<img style = "border:1px solid red; height:50%;" src =

"C:\Users\JANAKIRAMAN\OneDrive\Desktop\1.png" />

</body>

</html>

It will produce the following result –

The Image Width Property

The width property of an image is used to set the width of an image. This property can have a
value in length or in %. While giving value in %, it applies it in respect of the box in which an image
is available.
Here is an example −
<html>
<head>
</head>

<body>

Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 18

 MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

<img style = "border:1px solid red; width:50px;" src =

"C:\Users\JANAKIRAMAN\OneDrive\Desktop\1.png" />
<br />
<img style = "border:1px solid red; width:25%;" src =
"C:\Users\JANAKIRAMAN\OneDrive\Desktop\1.png" />
</body>
</html>
It will produce the following result –

1.6 CSS Selectors

There are many different types of CSS selector that allow you to target rules to specific
elements in an HTML document. The table on the opposite page introduces the mostcommonly
used CSS selectors. On this page, there is an HTML file to demonstrate which elements these
CSS selectors would apply to. CSS selectors are case sensitive, so they must match element
names and attribute values exactly. There are some more advanced selectors which allow you to
select elements based on attributes and their values, which you will see on page 292. IE 7 was
the first version of IE to support the last two selectors in the table (thesibling selectors), so their
use is less common than the other selectors shown here.

There are several different types of selectors in CSS.

1. CSS Element Selector

2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector

Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 19

 MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

1) CSS Element Selector

The element selector in CSS is used to select HTML elements which are required to bestyled.
In a selector declaration, there is the name of the HTML element and the CSS properties which
are to be applied to that element is written inside the brackets {}.
Syntax:
element {
\\ CSS property
}
Example :

<!DOCTYPE html>

<html>

<head>

<title>element selector</title>

<style>

/* h1 element selected here */

h1 {

color:green;

text-align:center;

} /* h2 element selected here */

h2 {

text-align:center;

</style>

</head>

Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 20

 MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

<body>

<h1>GeeksforGeeks</h1>
<h2>element Selector</h2>

</body>

</html>

Output:

2) CSS class Selector

The .class selector is used to select all elements which belong to a particular class attribute. In
order to select the elements with a particular class, use the period (.) character specifying the
class name ie., it will match the HTML element based on the contents of their class attribute.
The class name is mostly used to set the CSS property to a given class.
Syntax:
.class {
// CSS property
}
Example : This example demonstrates the class Selector for the specific HTML element.

<!DOCTYPE html>

<html><head><style>

.geeks {

color: green;

.gfg {

background-color: yellow;

font-style: italic;color: green;

Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 21

 MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

</style>

</head>

<body style="text-align:center">

<h1 class="geeks">GeeksforGeeks</h1>

<h2>.class Selector</h2>

<div class="gfg">

<p>GeeksforGeeks: A computer science portal</p>

</div></body></html>

Output:

3. css id(#) selector

The #id selector is used to set the style of given id. The id attribute is the unique identifier in
HTML document. The id selector is used with # character.
Syntax:
#id {
// CSS property
}

Example:
<!DOCTYPE html>

<html><head>

<title>#id selector</title>

Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 22

 MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

<!-- CSS property using id attribute -->

<style>

#gfg1 {

color:green;

text-align:center;

#gfg2 {

text-align:center;

</style>

</head><body>

<!-- id attribute declare here -->

<h1 id = "gfg1">GeeksforGeeks</h1>

<h2 id = "gfg2">#id selector</h2>

</body></html>

Output:

4. Css universal(*) selector

The * selector in CSS is used to select all the elements in a HTML document. It also selectsall
elements which are inside under another element. It is also called universal selector.
Syntax:
*{
// CSS property
}
Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 23
 MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

Example :

<!DOCTYPE html>

<html><head>

<title>* Selector</title>

<!-- CSS property of * selector -->

<style>

* { color:green;

text-align:center;

</style>

</head><body>

<h1>Adhiparasakthi Engineering college</h1>

<h2>*(Universal) Selector</h2>

<div>

<p>MBA</p>

<p>MCA</p>

</div>

<p>COMPUTER APPLICATION</p>

</body></html>

Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 24

 MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

Output:

5.Group-selector:
This selector is used to style all comma separated elements with the same style.
style.css: The following code is used in the above HTML code using the group selector.
Suppose you want to apply common styles to different selectors, instead of writing rules
separately you can write them in groups as shown below.
#div-container, .paragraph-class, h1{color: white;
background-color: purple;font-family: monospace;
}
Example :

<!DOCTYPE html>
<html lang="en">

<head>
<link rel="stylesheet" href="style.css">
</head>

<body>
<h1>
Sample Heading
</h1>

<p> Geeks for Geeks is a computer science

</p> <div id="div-container">

Geeks for geeks is a computer science

</div>

<p class="paragraph-class">
Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 25
 MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

Geeks
for
geeks is
a
compute
r science
</p>
</body>

</html>

Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 26

MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

1.7 CSS Flexbox

What is CSS flexbox ?
CSS Flexible Layout Box, popularly known as Flexbox is a powerful one-
dimensional layout model. It helps to lay, align and distribute items (children)
efficiently inside a container (parent).
Important Features:
 One-dimensional layout model: Flex is a one-dimensional layout model as it
can only deal with items either horizontally as rows or vertically as columns.
On the contrary, the CSS Grid layout can handle rows and columns together.
 Creates flexible and responsive layouts: Flexbox gives flex container the
ability to customize the items within it, depending on different screen sizes. A
flex container can expand its children’s items to fill the available space or it can
also shrink them to prevent overflow.
 Direction-agnostic: Flexbox is free from any directional constraints unlike
Block (vertically biased) and Inline (horizontally biased).
 Super easy to use: It is easy to align items in Flexbox, unlike using float and
positioning which are a little frustrating and sometimes difficult to use.
Flexbox Architecture:
There are two aspects of a Flexbox: Flex container and Flex item
The flex items can be laid out either along the main axis (starting from the main
start and ending at the main end) or along the cross axis (starting from the cross
start and ending at the cross end).
 Main axis: Flex items are laid out along this axis, either horizontally or
vertically based upon the flex-direction.
 Cross axis: It is perpendicular to the main axis and its direction depends on the
direction of the main axis.
 Main size: It is the width/height of the flex item depending on the main
dimension.
 Cross size: It is the width/height of the flex item depending on the cross
dimension.

To understand the different Flexbox properties, let us take an example by

creating an HTML file, along with a CSS file.

Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 27

MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

Example:
.HTML

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>CSS Flexbox</title>
<link rel="stylesheet" href="style.css" />
</head>

<body>
<div class="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
</div>
</body>

</html>

This is our CSS code in which we will be styling the flex-container and flex-
item.

.CSS

.container {
border: 5px solid rgb(0, 0, 0);
background-color: rgb(245 197 221);
}
.item {
border: 5px solid rgb(0, 0, 0);
background-color: rgb(141, 178, 226);
margin: 10px;
padding: 20px;

Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 28

MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

height: 100px;
width: 100px;
font-weight: bold;
font-size: 45px;
}

Output:

From the above output, the items are aligned vertically, by default, and the
default display is block-level. The pink area is the container and the blue boxes
within it are the items.
 flex-direction: It sets the direction of the flex container’s main axis and
specifies how items will be placed inside the container.
Syntax:
flex-direction: attribute value
Attribute Values:
 row: Flex items are displayed horizontally along a row.
 column: Flex items are displayed vertically along a column.
 row reverse: Flex items are displayed horizontally along a row but in reverse
order.
 column reverse: Flex items are displayed vertically along a column but in
reverse order.
Note: The display direction, by default, is row.

 flex-wrap: It specifies whether the flex container will have a single line or have
multiple lines.
Syntax:
flex-wrap: attribute value
Attribute values:
 nowrap (default): It specifies that the flex items will not wrap and will be laid
out in a single line. It may cause the flex container to overflow.
Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 29
MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

 wrap: It specifies that the flex items will wrap if necessary, and will be laid out
in multiple lines.
 wrap-reverse: It is the same as a wrap, but the flex items will wrap in reverse
order in this case.
 initial: It represents the value specified as the property’s initial value.
 inherit: It represents the computed value of the property on the element’s
parent.

1.8 JavaScript: Data Types and Variables

What is JavaScript

JavaScript (js) is a light-weight object-oriented programming language which is used

by several websites for scripting the webpages. It is an interpreted, full-fledged programming
language that enables dynamic interactivity on websites when applied to an HTML
document. 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. The traditional website uses js to provide several
forms of interactivity and simplicity.

JavaScript Data Types

JavaScript provides different data types to hold different types of values.

There are two types of data types in JavaScript.

1. Primitive data type

2. Non-primitive (reference) data type

JavaScript is a dynamic type language, means you don't need to specify type of
the variable because it is dynamically used by JavaScript engine. You need to
use var here to specify the data type. It can hold any type of values such as
numbers, strings etc.

There are eight basic data types in JavaScript. They are:

Data Descriptio
Example
Types n

represents
'hello', "hello world!"
String textual
etc
data

Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 30

MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

an integer
or a
Number floating- 3, 3.234, 3e-2 etc.
point
number

an integer
with 90071992512474099
BigInt
arbitrary 9n , 1n etc.
precision

Any of
two
Boolean values: true and false
true or
false

a data type
whose
undefine
variable is let a;
d
not
initialized

denotes a
Null let a = null;
null value

data type
whose
instances let value =
Symbol
are unique Symbol('hello');
and
immutable

key-value
pairs of
Object let student = { };
collection
of data

Here, all data types except Object are primitive data types, whereas Object is
non-primitive.
JavaScript Variable
1. JavaScript variable
2. JavaScript Local variable
3. JavaScript Global variable

Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 31

MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

A JavaScript variable is simply a name of storage location. There are two types
of variables in JavaScript : local variable and global variable.

There are some rules while declaring a JavaScript variable (also known as
identifiers).

1. Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ )

sign.
2. After first letter we can use digits (0 to 9), for example value1.
3. JavaScript variables are case sensitive, for example x and X are different
variables.

Example

1. <script>
2. var x = 10;
3. var y = 20;
4. var z=x+y;
5. document.write(z);
6. </script>
output:

30.

JavaScript local variable

A JavaScript local variable is declared inside block or function. It is accessible

within the function or block only. For example:

<script>
function abc(){
var x=10;//local variable
}
</script>

JavaScript global variable

A JavaScript global variable is accessible from any function. A variable i.e.

declared outside the function or declared with window object is known as global
variable. For example:

<script>
var data=200;//gloabal variable

Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 32

MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

function a(){
document.writeln(data);
}
function b(){
document.writeln(data);
}
a();//calling JavaScript function
b();
</script>

Output:

200 200

1.9 Functions
A function is a group of reusable code which can be called anywhere in your
program. This eliminates the need of writing the same code again and again. It
helps programmers in writing modular codes. Functions allow a programmer to
divide a big program into a number of small and manageable functions.
Like any other advanced programming language, JavaScript also supports all the
features necessary to write modular code using functions. You must have seen
functions like alert() and write() in the earlier chapters. We were using these
functions again and again, but they had been written in core JavaScript only once.
JavaScript allows us to write our own functions as well. This section explains
how to write your own functions in JavaScript.

Function Definition

Before we use a function, we need to define it. The most common way to define a
function in JavaScript is by using the function keyword, followed by a unique
function name, a list of parameters (that might be empty), and a statement block
surrounded by curly braces.
Syntax
The basic syntax is shown here.
<script type = "text/javascript">
<!--
function functionname(parameter-list)
{
statements
}
//-->

Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 33

MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

</script>

Example
Try the following example. It defines a function called sayHello that takes no
parameters −
<script type = "text/javascript">
<!--
function sayHello()
{
alert("Hello there");
}
//-->
</script>

Calling a Function

To invoke a function somewhere later in the script, you would simply need to
write the name of that function as shown in the following code.
<html>
<head>
<script type = "text/javascript">
function sayHello() {
document.write ("Hello there!");
}
</script>
</head>

<body>
<p>Click the following button to call the function</p>
<form>
<input type = "button" onclick = "sayHello()" value = "Say Hello">
</form>
<p>Use different text in write method and then try...</p>
</body>
</html>

Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 34

MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

1.10 Events

What is an Event ?

JavaScript's interaction with HTML is handled through events that occur when
the user or the browser manipulates a page.
When the page loads, it is called an event. When the user clicks a button, that
click too is an event. Other examples include events like pressing any key,
closing a window, resizing a window, etc.
Developers can use these events to execute JavaScript coded responses, which
cause buttons to close windows, messages to be displayed to users, data to be
validated, and virtually any other type of response imaginable.
Events are a part of the Document Object Model (DOM) Level 3 and every
HTML element contains a set of events which can trigger JavaScript Code.
Please go through this small tutorial for a better understanding HTML Event
Reference. Here we will see a few examples to understand a relation between
Event and JavaScript −

onclick Event Type

This is the most frequently used event type which occurs when a user clicks the
left button of his mouse. You can put your validation, warning etc., against this
event type.
Example
Try the following example.

<html>
<head>
<script type = "text/javascript">
<!--
function sayHello() {

Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 35

MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

alert("Hello World")
}
//-->
</script>
</head>

<body>
<p>Click the following button and see result</p>
<form>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</form>
</body>
</html>

1.11 AJAX: GET and POST

wo commonly used methods for a request-response between a client and server

are: GET and POST.

 GET - Requests data from a specified resource

 POST - Submits data to be processed to a specified resource

GET is basically used for just getting (retrieving) some data from the
server. Note: The GET method may return cached data.

Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 36

MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

POST can also be used to get some data from the server. However, the POST
method NEVER caches data, and is often used to send data along with the
request.

To learn more about GET and POST, and the differences between the two
methods, please read our HTTP Methods GET vs POST chapter.

jQuery $.get() Method

The $.get() method requests data from the server with an HTTP GET request.

Syntax:

$.get(URL,callback);

The required URL parameter specifies the URL you wish to request.

The optional callback parameter is the name of a function to be executed if the

request succeeds.

The following example uses the $.get() method to retrieve data from a file on the
server:

Example
<!DOCTYPE html>

<html>

<head>

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>

$(document).ready(function(){

$("button").click(function(){

$.get("demo_test.asp", function(data, status){

alert("Data: " + data + "\nStatus: " + status);

});

});

});

Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 37

MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

</script>

</head>

<body>

<button>Send an AJAX GET request to a page and get the result back</button>

</body>

</html>

The first parameter of $.get() is the URL we wish to request ("demo_test.asp").

The second parameter is a callback function. The first callback parameter holds
the content of the page requested, and the second callback parameter holds the
status of the request.

Tip: Here is how the ASP file looks like ("demo_test.asp"):

<%
response.write("This is some text from an external ASP file.")
%>

jQuery $.post() Method

The $.post() method requests data from the server using an HTTP POST request.

Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 38

MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

Syntax:

$.post(URL,data,callback);

The required URL parameter specifies the URL you wish to request.

The optional data parameter specifies some data to send along with the request.

The optional callback parameter is the name of a function to be executed if the

request succeeds.

The following example uses the $.post() method to send some data along with the
request:

Example
$("button").click(function(){
$.post("demo_test_post.asp",
{
name: "ADHIPARASAKTHI ENGINEERING COLLEGE",
city: "MELMARUVATHUR"
},
function(data, status){
alert("Data: " + data + "\nStatus: " + status);
});
});

The first parameter of $.post() is the URL we wish to request

("demo_test_post.asp").

Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 39

MC4201 – FULL STACK WEB DEVELOPMENT UNIT - 1

Then we pass in some data to send along with the request (name and city).

The ASP script in "demo_test_post.asp" reads the parameters, processes them,

and returns a result.

The third parameter is a callback function. The first callback parameter holds the
content of the page requested, and the second callback parameter holds the status
of the request.

Tip: Here is how the ASP file looks like ("demo_test_post.asp"):

<%
dim fname,city
fname=Request.Form("name")
city=Request.Form("city")
Response.Write("Dear " & fname & ". ")
Response.Write("Hope you live well in " & city & ".")
%>

Prepared by. E.Janakiraman.MCA,Mphil,. AP/MCA Page 40