UNIT-1

1.Web Application Architecture

A web app architecture presents a layout with all the software components (such as
databases, applications and middleware) and how they interact with each other. It defines
how the data is delivered through HTTP and ensures that the client-side server and the
backend server can understand.
1. Web Browser: The browser or the client-side component or the front-end
component is the key component that interacts with the user, receives the input and
manages the presentation logic while controlling user interactions with the
application. User inputs are validated as well, if required.
2. Web Server: The web server also known as the backend component or the server
side component handles the business logic and processes the user requests by
routing the requests to the right component and managing the entire application
operations. It can run and oversee requests from a wide variety of clients.
3. Database Server: The database server provides the required data for the application.
It handles data-related tasks. In a multi-tiered architecture, database servers can
manage business logic with the help of stored procedures.
How Web Application Architecture Works With web applications, we have the server vs. the
client side. In essence, there are two programs running concurrently: The code which lives in
the browser and responds to user input The code which lives on the server and responds to
HTTP requests

• Ruby on Rails • PHP • C# • Java • Python • Javascript

• Is never seen by the user (except within a rare malfunction)

• Stores data such as user profiles, tweets, pages, etc…

• Creates the page the user requested

Web Application Components Web app components are broadly divided into two parts–
1. User interface components are a part of the visual interface of a web application and
have no interaction with the architecture. They’re restricted to a web page’s display and
consist of activity logs, configuration settings, dashboards, statistics, widgets, notifications,
etc., to enhance the user experience.
2. Structural web components consist of client and server components. Client components
exist in the user’s browser and interact with the functionality of web applications. HTML,
CSS, and JavaScript are commonly used for building these components.
On the other side, server components are bifurcated into a web app server that handles
business logic and a database server that stores data. PHP, JAVA, Python, Node.js, .NET, and
Ruby on Rails are some frameworks used for creating server components.
2. World Wide Web Consortium (W3C)

• The World Wide Web Consortium (W3C), founded in 1994 by World Wide Web (WWW)
inventor Tim Berners-Lee, set out the list of international standards for web technologies.

• These standards help to maintain a consistent level of technical quality and compatibility
over an extremely diverse platform and have the added benefit of simplifying the job of the
web developer—ensuring they have a finite list of skills they need to learn.

• The W3C standards describe the best practices of web development. These range from
recommended programming languages such as HTML and CSS, to the generally accepted
principles of web architecture and services.

• Technologies that are listed as standards are, as far as the W3C is concerned, the most
appropriate solutions currently available for mass use.
The W3C first define the technology in terms of its use and usefulness. Then through a
thorough vetting process that considers a number of overlapping technologies, one is
designated the standard. The process promotes consensus, fairness, public accountability,
and quality, in the hopes that the ‘best’ technology is chosen.
Technologies involved in Web development
Front-end (client-side) technologies. Front-end technologies are for the “client side” of your
website or application.
Back-end (server-side) technologies. Back-end technologies are for the “server side” of your
website or application. They’re for developing the technical foundation.
1. HTML
2. CSS
3. JavaScript
4. PHP
5. Java
6. Python
7. Rust
8. Angular
9. Node.js
10. React.js
11. Vue.js
12. Database
13. SQL
Some examples of popular databases include: MySQL: An open-source SQL database.
MySQL is used in WordPress websites. MongoDB: An open source NoSQL database. Oracle:
Oracle Database is a proprietary database management system. It’s commonly used for
running online transaction processing, data warehousing and mixed database workloads.
3. Basic Principles Involved in developing a website
1. Accessibility -when a visitor enters the website , he must be able to access each bit of
information in an easiest manner . This means that the text must be legible , the colors must
not be harsh on the eyes and background must not be overpower the content . customers
are online 24/7 and such they expect to be able to interact with businesses and
organizations whenever and wherever they are online. so accessibility is important.
2. Simplicity-company should keep their website simple and clean along with a user friendly
interface to help visitors search for information they needed easily.
3. communication and content -everyone who visit a website is looking for some kind of
information or content. and thus it is very important to communicate with them clearly and
in an engaging manner. the information must be compelling , easy to read and easy to
processes . website are not just about colors , layout or graphics but a major role is played
by its contents. communication is not just about providing written information but also
about images , and multimedia such as video and audio pieces.
4. Navigation -web designer should have a clear idea about managing navigation in a
website. Navigation is the wayfinding system used on websites where visitors interact and
find what they are looking for. Website navigation is key to retaining visitors. If the website
navigation is confusing visitors will give up and find what they need elsewhere. Keeping
navigation simple, intuitive and consistent on every page is key.
5. Precedence- a website is meant for providing information to visitors . one of the great
tools to do this is precedence. it is about how much visual weight need to be given to
different parts of design.
6. Good structure -a web page must have a good structure and should be simple to
understand so that users would not have to think which to go. it must be self explanatory .
7. Typography -text is the most common element of design, so a lot of attention to be given
on it. following things can consider in this respect: • font choices 22 • font size • spacing •
line length
8. Spacing -there is a tendency to fill every available space on web page with information .
empty space seemed to be wasteful . in fact the opposite is true. spacing make things clear .
in web design there are 3 aspects of space that need to be considered. • line spacing •
padding • white space
9. Usability -a web site not only looks attractive , but it should also be usable.
10. Visual hierarchy -in a website visual hierarchy can be referred to the sequence in which
eye moves from one topic , content or block to another. there are mainly 2 ways to create a
visual hierarchy as given below • size hierarchy • content hierarchy
4. Five Golden Rules of Web Designing
1. Focus on the message
If the goal of our web page is to convey information (brand stories, special
offers, announcements, etc.), then focusing on the clarity of our message is of
utmost importance. Our goal here is to help users focus on relevant information
instead of distracting them. Some of the most common examples of ignorant or
malicious attempts to shift our flow include: • Intrusive pop-ups and sidebars •
Floating menu bars • Splash pages • Hidden elements

2. Keep your layout neat

A good web design layout should provide a lively, balanced flow of information
— but careless spacing of letters, lines, and words can tear this fabric apart.
Some common examples of bad web layout include: • Fonts are too small or
difficult to read. • Text is underlined without a link. • Tiny click targets — please,
be friendly to users.

3. Choose user-friendly fonts

Using too many fonts on the same website decreases cognitive fluency. This
means users will find it difficult to understand what they’re looking at. Script
fonts (or “hand drawn” looking fonts) are hard to read, decreasing ease of use
for visitors and potentially pushing them away.

4. Avoid animation hell

More often than not, online junk attacks are backed up with a significant amount
of dark pattern firepower — including nudity, flashy animations, and hidden
close buttons. Flickering lights may trigger seizures in users with epilepsy. Web
content can avoid this risk by not blinking or flashing too rapidly. The defined
threshold is no more than three flashes per second.

5. Make it easy to navigate

Make our page a clean and navigable river, instead of a swamp. A common
example of bad navigation includes stepped menus: options can quickly become
overwhelming, making users frustrated and motivating them to go elsewhere.
 UNIT-2
1. HTML5 Video and Audio tags
HTML5 features include native audio and video support without the need for Flash. The
HTML5 and tags make it simple to add media to a website. You need to set src attribute to
identify the media source and include a controls attribute so the user can play and pause
the media.
Embedding Video
Here is the simplest form of embedding a video file in your webpage − Your browser does
not support the element.

• Ogg − Ogg files with Thedora video codec and Vorbis audio codec.

• mpeg4 − MPEG4 files with H.264 video codec and AAC audio codec.
<!DOCTYPE HTML>
<html>
<body>
<videowidth="300"height="200"controlsautoplay>
<sourcesrc="/html5/foo.ogg"type="video/ogg"/>
<sourcesrc="/html5/foo.mp4"type="video/mp4"/>
Your browser does not support the <video> element.
</video>
</body>
</html>
1 autoplay
This Boolean attribute if specified, the video will automatically begin to play back as soon as
it can do so without stopping to finish loading the data.
2 autobuffer This Boolean attribute if specified, the video will automatically begin buffering
even if it's not set to automatically play.
3 controls If this attribute is present, it will allow the user to control video playback,
including volume, seeking, and pause/resume playback.
4 heighThis attribute specifies the height of the video's display area, in CSS pixels.
5 loop This Boolean attribute if specified, will allow video automatically seek back to the
start after reaching at the end.
6 preload This attribute specifies that the video will be loaded at page load, and ready to
run. Ignored if autoplay is present.
Embedding Audio
HTML5 supports tag which is used to embed sound content in an HTML or XHTML document
as follows. Your browser does not support the element. The current HTML5 draft
specification does not specify which audio formats browsers should support in the audio
tag. But most commonly used audio formats are ogg, mp3 and wav.
<!DOCTYPE HTML>
<html>
<body>
<audiocontrolsautoplay>
<sourcesrc="/html5/audio.ogg"type="audio/ogg"/>
<sourcesrc="/html5/audio.wav"type="audio/wav"/>
Your browser does not support the <audio> element.
</audio>
</body>
</html>
autoplay 1 This Boolean attribute if specified, the audio will automatically begin to play back
as soon as it can do so without stopping to finish loading the data.
2 autobuffer This Boolean attribute if specified, the audio will automatically begin buffering
even if it's not set to automatically play.
3 controls If this attribute is present, it will allow the user to control audio playback,
including volume, seeking, and pause/resume playback.
4 loop This Boolean attribute if specified, will allow audio automatically seek back to the
start after reaching at the end.
5 preload This attribute specifies that the audio will be loaded at page load, and ready to
run. Ignored if autoplay is present.
6 src The URL of the audio to embed. This is optional; you may instead use the element
within the video block to specify the video to embed.
2. THE CSS BOX MODEL
The CSS box model is a container that contains multiple properties including borders,
margin, padding, and the content itself. It is used to create the design and layout of web
pages. It can be used as a toolkit for customizing the layout of different elements. The web
browser renders every element as a rectangular box according to the CSS box model. Box-
Model has multiple properties in CSS. Some of them are given below:
content: This property is used to displays the text, images, etc, that can be sized using the
width & height property.
padding: This property is used to create space around the element, inside any defined
border.
border: This property is used to cover the content & any padding, & also allows to set the
style, color, and width of the border.
margin: This property is used to create space around the element ie., around the border
area.
<!DOCTYPE html>
<head>
<title>CSS Box Model</title>
<style>
.main {
font-size: 36px;
font-weight: bold;
Text-align: center;
}
.gfg {
margin-left: 60px;
border: 50px solid #009900;
width: 300px;
height: 200px;
text-align: center;
padding: 50px;
}
.gfg1 {
font-size: 42px;
font-weight: bold;
color: #009900;
margin-top: 60px;
background-color: #c5c5db;
}
.gfg2 {
font-size: 18px;
font-weight: bold;
background-color: #c5c5db;
}
</style>
</head>
<body>
<divclass="main">CSS Box-Model Property</div>
<divclass="gfg">
<divclass="gfg1">GeeksforGeeks</div>
<divclass="gfg2">
A computer science portal for geeks
</div>
</div>
</body>
</html>
3. HTML BLOCK AND INLINE ELEMENTS
Every HTML element has a default display value, depending on what type of element it is.
There are two display values: block and inline. Block-level Elements A block-level element
always starts on a new line, and the browsers automatically add some space (a margin)
before and after the element. A block-level element always takes up the full width available
(stretches out to the left and right as far as it can). Two commonly used block elements are:
and The <p>element defines a paragraph in an HTML document. The <div>
element defines a division or a section in an HTML document.
Block-level elements in HTML:
<address><article><aside><blockquote><canvas><dd><div>
<dl><dt><fieldset><figcaption><figure><footer><form><h1>
<h6><header><hr><li><main><nav><noscript><ol><p><pre><section
><table><tfoot><ul><video>
Inline Elements
An inline element does not start on a new line.
An inline element only takes up as much width as necessary.
This is a <span> element inside a paragraph.
The inline elements in HTML:
<a><abbr><acronym><b><bdo><big><br><button><cite><code>
<dfn><em><i><img><input><kbd><label><map><object><output>
<q><samp><script><select><small><span><strong><sub><sup>
<textarea><time><tt><var>
HTML SEMANTIC ELEMENTS
Semantic elements = elements with a meaning A semantic element clearly describes its
meaning to both the browser and the developer. Examples of non-semantic elements:
and - Tells nothing about its content. Examples of semantic elements:
<article> <aside>
<details> <figcaption>
<figure> <footer>
<header> <main>
<mark> <nav>
4. CSS Layout - the position Property
The position property specifies the type of positioning method used for an element. There
are five different position values:

• static • relative • fixed • absolute • sticky

i.position: static;
HTML elements are positioned static by default. Static positioned elements are not affected
by the top, bottom, left, and right properties. An element with position: static; is not
positioned in any special way; it is always positioned according to the normal flow of the
page:
Example
div.static {
position: static;
border: 3px solid #73AD21;
}
ii. position: relative;
An element with position: relative; is positioned relative to its normal position. Setting the
top, right, bottom, and left properties of a relatively-positioned element will cause it to be
adjusted away from its normal position. Other content will not be adjusted to fit into any
gap left by the element.
Example
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
iii. position: fixed;
An element with position: fixed; is positioned relative to the viewport, which means it
always stays in the same place even if the page is scrolled.
Example
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
iv. position: absolute;
An element with position: absolute; is positioned relative to the nearest positioned ancestor
(instead of positioned relative to the viewport, like fixed).
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
v. position: sticky;
An element with position: sticky; is positioned based on the user's scroll position. A sticky
element toggles between relative and fixed, depending on the scroll position.
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50; }
5.CSS LAYOUT – FLOAT
The CSS float property specifies how an element should float. The CSS clear property
specifies what elements can float beside the cleared element and on which side. The float
property is used for positioning and formatting content e.g. let an image float left to the text
in a container. The float property can have one of the following values:

• left - The element floats to the left of its container

• right - The element floats to the right of its container

• none - The element does not float (will be displayed just where it occurs in the text). This
is default

• inherit - The element inherits the float value of its parent

img { float: right; }
img { float: left; }
img { float: none; }
CSS LAYOUT - THE Z-INDEX PROPERTY
The z-index property specifies the stack order of an element. When elements are
positioned, they can overlap other elements. The z-index property specifies the stack order
of an element (which element should be placed in front of, or behind, the others).
Example
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
z-index only works on positioned elements (position: absolute, position: relative, position:
fixed, or position: sticky) and flex items (elements that are direct children of display: flex
elements)
6. CSS PREPROCESSOR

• A CSS preprocessor is a program that generate CSS from the preprocessor's own unique
syntax.

• There are many CSS preprocessors to choose from, however most CSS preprocessors will
add some features that don't exist in pure CSS, such as mixin, nesting selector, inheritance
selector, and so on. These features make the CSS structure more readable and easier to
maintain.

• To use a CSS preprocessor, must install a CSS compiler on our web server; Or use the CSS
preprocessor to compile on the development environment, and then upload compiled CSS
file to the web server.

• CSS Preprocessors are increasingly becoming a mainstay in the workflow of front end web
developers.

• CSS is an incredibly complicated and nuanced language, and in an effort to make it’s usage
easier, developers often turn to using preprocessors such as SASS or LESS.

• few of most popular CSS preprocessors: 1. Sass 2. LESS 3. Stylus 4. PostCSS

1.SASS

• The SASS is the abbreviation of Syntactically Awesome Style Sheets. It is a CSS pre-
processor with syntax advancements. • The style sheets in the advanced syntax are
processed by the program and compiled into regular CSS style sheets, which can be used in
the website. • It is a CSS extension that allows to use feature like variables, nesting, imports,
mixins, inheritance, etc, all in a CSS-compatible syntax ie., it is compatible with all the CSS
versions.
Variables: Variables can be used to store CSS values that may be reused. To
declare a variable in SASS, the ‘$’ character is used. For eg, $v_name.
$fs: 30px;
$bgcolor: #00ff40;
$pd: 100px 350px;
#dl {
font-size: $fs;
color: $bgcolor;
padding: $pd;
}
After compiling the CSS code, save it in file by style.css.
#dl {
font-size: 30px;
color: #00ff40;
padding: 100px 350px;
}
Loops
Another common item in languages are loops, something else CSS lacks. Loops
can be used to repeat the same instructions multiple times without having to
be reentered multiple times. An example with SASS would be:
@for $vfoo 35px to 85px {
.margin-#{vfoo} {
margin: $vfoo 10px;
}
}
If/Else Statements
Yet another feature which CSS lacks are If/Else statements. These will run a
set of instructions only if a given condition is true. An example of this in SASS
would be:
@if width(body) > 500px {
background color: blue;
} else {
background color: white;
}
 UNIT-3
1. CSS Flexbox
Before the Flexbox Layout module, there were four layout modes:

• Block, for sections in a webpage

• Inline, for text

• Table, for two-dimensional table data

• Positioned, for explicit position of an element The Flexible Box Layout Module, makes it
easier to design flexible responsive layout structure without using float or positioning.
Flexbox Elements To start using the Flexbox model, you need to first define a flex container.
Example
A flex container with three flex items:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
CSS Flex Container
Parent Element (Container) Like we specified in the previous chapter, this is a flex container
(the blue area) with three flex items: The flex container becomes flexible by setting the
display property to flex:
Example
.flex-container { display: flex; }
The flex container properties are:

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content
The flex-direction Property
The flex-direction property defines in which direction the container wants to
stack the flex items.
.flex-container {
display: flex;
flex-direction: column; /
flex-direction: column-reverse;/
flex-direction: row;/
flex-direction: row-reverse;
}
The flex-wrap Property
The flex-wrap property specifies whether the flex items should wrap or not.
Example
.flex-container {
display: flex;
flex-wrap: wrap;/
flex-wrap: nowrap;/
flex-wrap: wrap-reverse;/
}
The flex-flow Property
The flex-flow property is a shorthand property for setting both the flex
direction and flex-wrap properties.
.flex-container {
display: flex;
flex-flow: row wrap;
}
The justify-content Property
The justify-content property is used to align the flex items:
Example
The center value aligns the flex items at the center of the container:
.flex-container {
display: flex; }
2. CSS GRID LAYOUT
The CSS Grid Layout Module offers a grid-based layout system, with rows and columns,
making it easier to design web pages without having to use floats and positioning.
Grid Elements A grid layout consists of a parent element, with one or more child elements.
Display Property An HTML element becomes a grid container when its display property is
set to grid or inline-grid.
Example
.grid-container { display: grid; }
.grid-container {
display: inline-grid;
}
Example
The column-gap property sets the gap between the columns:
.grid-container {
display: grid;
column-gap: 50px; }
Grid Lines
The lines between columns are called column lines. The lines between rows are called row
lines. Example
Place a grid item at column line 1, and let it end on column line 3:
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
column-gap Specifies the gap between the columns
gap A shorthand property for the row-gap and the column-gap properties
grid A shorthand property for the grid-template-rows, grid-template-columns, grid-
template-areas, grid auto-rows, grid-auto-columns, and the grid-auto flow properties
grid-area Either specifies a name for the grid item, or this property is a shorthand property
for the grid-row start, grid-column-start, grid-row-end, and grid column-end properties
grid-auto-columns Specifies a default column size .
3. ADVANCED CSS EFFECTS

CSS Gradients • We can normally declare the background of an element to be a solid color in
CSS, but we can also declare that background to be a gradient.

• Using gradients declared in CSS, rather using an actual image file, is better for control and
performance.

• CSS gradients let you display smooth transitions between two or more specified colors.
1. CSS Linear Gradients
To create a linear gradient you must define at least two color stops. Color stops are the
colors you want to render smooth transitions among. You can also set a starting point and a
direction (or an angle) along with the gradient effect.
.gradient {
background-color: red;
background-image: linear-gradient(red, orange);
background: red;
background: linear-gradient(red, orange);
}
2.CSS Radial Gradients
A radial gradient is defined by its center. To create a radial gradient you must also define at
least two color stops.
#grad {
background-image: radial-gradient(circle, red, yellow, green); }
3.CSS Conic Gradients
A conic gradient is a gradient with color transitions rotated around a center point. To create
a conic gradient you must define at least two colors.
#grad {
background-image: conic-gradient(red, yellow, green, blue, black); }
Example
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
border-radius: 50%;
}
4. CSS Animations

• CSS allows animation of HTML elements without using JavaScript or Flash!

• An animation lets an element gradually change from one style to another.

• We can change as many CSS properties we want, as many times as we want.

• To use CSS animation, need must first specify some keyframes for the animation.

• Keyframes hold what styles the element will have at certain times.
The @keyframes Rule
When we specify CSS styles inside the @keyframes rule, the animation will gradually change
from the current style to the new style at certain times. To get an animation to work, we
must bind the animation to an element.
The following example binds the "example" animation to the <div> element.
The animation will last for 4 seconds, and it will gradually change the
background-color of the <div> element from "red" to "yellow":
Example
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
5. CSS-Transform
The transform property allows you to visually manipulate an element by skewing, rotating,
translating, or scaling:
.element {
width: 20px;
height: 20px;
transform: scale(20);
}
.element {
transform: scale(2, .5);
} (or)
transform: scaleX(2);
transform: scaleY(.5);
Values

• scale(): Affects the size of the element. This also applies to the font-size, padding, height,
and width of an element, too. It’s also a a shorthand function for the scaleX and scaleY
functions.

• skewX() and skewY(): Tilts an element to the left or right, like turning a rectangle into a
parallelogram. skew() is a shorthand that combines skewX() and skewY by accepting both
values.

• translate(): Moves an element sideways or up and down.

• rotate(): Rotates the element clockwise from its current position.

• matrix(): A function that is probably not intended to be written by hand, but combines all
transforms into one.

• perspective(): Doesn’t affect the element itself, but affects the transforms of descendent
elements’ 3D transforms, allowing them all to have a consistent depth perspective.
3D Transforms
translate3d(x, y, z)
translateZ(z)
The third value in translate3d or the value in translateZ moves the element
toward the viewer, negative values away.
6. CSS Transitions
CSS transitions allows us to change property values smoothly, over a given duration.
Properties are: • transition • transition-delay • transition-duration • transition-property •
transition-timing-function
How to Use CSS Transitions?
To create a transition effect, we must specify two things:
1. the CSS property we want to add an effect to
2. the duration of the effect
If the duration part is not specified, the transition will have no effect, because the default
value is 0.
Example
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
Specify the Speed Curve of the Transition
The transition-timing-function property specifies the speed curve of the transition effect.
The transition-timing-function property can have the following values:
ease - specifies a transition effect with a slow start, then fast, then end slowly (this is
default)
linear - specifies a transition effect with the same speed from start to end
ease-in - specifies a transition effect with a slow start
ease-out - specifies a transition effect with a slow end
ease-in-out - specifies a transition effect with a slow start and end
cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function
Example
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
 UNIt-4
1. JavaScript Events:
The change in the state of an object is known as an Event. In html, there are various events
which represent that some activity is performed by the user or by the browser. When
javascript code is included in HTML, js react over these events and allow the execution. This
process of reacting over the events is called Event Handling. Thus, js handles the HTML
events via Event Handlers.
Click Event :
<html>
<head> Javascript Events </head>
<body>
<script language="Javascript" type="text/Javascript">
<!--
function clickevent()
{
document.write("This is JavaTpoint");
}
//-->
</script>
<form>
<input type="button" onclick="clickevent()" value="Who's this?"/>
</form>
</body>
</html>
MouseOver Event :
<html>
<head>
<h1> Javascript Events </h1>
</head>
<body>
<script language="Javascript" type="text/Javascript">
<!--
function mouseoverevent()
{
alert("This is JavaTpoint");
}
//-->
</script>
<p onmouseover="mouseoverevent()"> Keep cursor over me</p>
</body>
</html>
Focus Event
<html>
<head> Javascript Events</head>
<body>
<h2> Enter something here</h2>
<input type="text" id="input1" onfocus="focusevent()"/>
<script>
<!--
function focusevent()
{
document.getElementById("input1").style.background=" aqua";
}
//-->
</script>
</body>
</html>
2. JavaScript Classes
A class in javascript is basically a blueprint or template of the object. New objects can be
created from a class. Classes are similar to functions. Here, a class keyword is used instead
of a function keyword. Unlike functions classes in JavaScript are not hoisted. The constructor
method is used to initialize. The class name is user-defined.
Syntax
class ClassName { constructor() { ... } }
Use the keyword class to create a class. Always add a method named constructor():
Example
class Car { constructor(name, year) { this.name = name; this.year = year; } }
The example above creates a class named "Car". The class has two initial properties: "name"
and "year".
3. JQuery

★ jQuery is a lightweight, "write less, do more", JavaScript library.

★ The purpose of jQuery is to make it much easier to use JavaScript on your website.

★ jQuery takes a lot of common tasks that require many lines of JavaScript code to
accomplish, and wraps them into methods that you can call with a single line of code.
● HTML/DOM manipulation ● CSS manipulation ● HTML event methods ● Effects and
animations ● AJAX ● Utilities
The element Selector:
The jQuery element selector selects elements based on the element name.
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
The #id Selector:
The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.
An id should be unique within a page, so you should use the #id selector when you want to
find a single, unique element.
To find an element with a specific id, write a hash character, followed by the id of the HTML
element:
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
The .class Selector:
The jQuery .class selector finds elements with a specific class. To find elements with a
specific class, write a period character, followed by the name of the class:
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
Clicking s :
<button class="clickme">Click Me!</button>
<script type="text/javascript">
$(function() {
$(".clickme").on("click", function() {
alert("Good job!");
});
});
</script>

1 $(function() {
2 $(".clickme").on("click", function() {
3 alert("Good job!");
4 });
5 });
4.JQuery Events
jQuery events are the actions that can be detected by your web application. They are used
to create dynamic web pages. An event shows the exact moment when something happens.
● A mouse click ● An HTML form submission ● A web page loading ● A keystroke on the
keyboard
● Scrolling of the web page etc.
jQuery Syntax For Event Methods :
In jQuery, most DOM events have an equivalent jQuery method. To assign a click event to all
paragraphs on a page, you can do this:
$("p").click();
Example :
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
Output : If you click on me, I will disappear. Click me away! Click me too!
jQuery submit() :
jQuery submit event is sent to the element when the user attempts to submit a form. When
the submit event occurs, the submit() method attaches a function with it to run.
Example of jQuery submit() event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>submit demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Type 'javatpoint' to submit this form finally.</p>
<form action="javascript:alert( 'success!' );">
<div>
<input type="text">
<input type="submit">
</div>
</form>
<script>
$( "form" ).submit(function( event ) {
if ( $( "input:first" ).val() === "javatpoint" ) {
$( "span" ).text( "Submitted Successfully." ).show();
return;
}
$( "span" ).text( "Not valid!" ).show().fadeOut( 2000 );
event.preventDefault();
});
</script>
</body> </html>
5. Adding and Removing elements with JQuery
Add New HTML Content : We will look at four jQuery methods that are used to add new
content:
append() - Inserts content at the end of the selected elements
prepend() - Inserts content at the beginning of the selected elements
after() - Inserts content after the selected elements
before() - Inserts content before the selected elements
jQuery append() Method
The jQuery append() method inserts content AT THE END of the selected HTML elements.
Example
$("p").append("Some appended text.");
jQuery prepend() Method The jQuery prepend() method inserts content AT THE BEGINNING
of the selected HTML elements.
jQuery after() and before() Methods
The jQuery after() method inserts content AFTER the selected HTML elements. The jQuery
before() method inserts content BEFORE the selected HTML elements. Example
$("img").after("Some text after"); $("img").before("Some text before");
Remove Elements/Content
To remove elements and content, there are mainly two jQuery methods: remove() -
Removes the selected element (and its child elements) empty() - Removes the child
elements from the selected element
jQuery remove() Method The jQuery remove() method removes the selected element(s)
and its child elements.
Example: $("#div1").remove();
Filter the Elements to be Removed :
The jQuery remove() method also accepts one parameter, which allows you to filter the
elements to be removed. The parameter can be any of the jQuery selector syntaxes. The
following example removes all elements with class="test":
Example:
$("p").remove(".test"); This example removes all
elements with class="test" and class="demo":
6. AJAX with JQuery
AJAX is an acronym standing for Asynchronous JavaScript and XML and this technology helps
us to load data from the server without a browser page refresh.
jQuery load() Method The jQuery load() method is a simple, but powerful AJAX method.
The load() method loads data from a server and puts the returned data into the selected
element.
Example
$("button").click(function(){
$("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){
if(statusTxt == "success")
alert("External content loaded successfully!");
if(statusTxt == "error")
alert("Error: " + xhr.status + ": " + xhr.statusText);
});
});
jQuery - AJAX get() and post() Methods
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.
POST can also be used to get some data from the server. However, the POST
Example
$("button").click(function(){
$.post("demo_test_post.asp",
{
name: "Donald Duck",
city: "Duckburg"
},
function(data, status){
alert("Data: " + data + "\nStatus: " + status);
}); });
7. Animations with JQuery(hide,show,animate,fade methods,slide methods)
The jQuery library provides several techniques for adding animation to a web page. These
include simple, standard animations that are frequently used, and the ability to craft
sophisticated custom effects.
1.Hide : You can apply any jQuery selector to select any element and then apply jQuery
hide() method to hide it.
Syntax:
$(selector).hide( [speed, callback] );
Sample code:
$("button").click(function(){
$("p").hide(1000);
});
2. Show: You can apply any jQuery selector to select any element and then apply jQuery
show() method to show it.
Syntax:
$(selector).show( [speed, callback] );
Sample code:
$("button").click(function(){
$("p").show(1000);
});
3. Fade: jQuery gives us two methods - fadeIn() and fadeOut() to fade the elements in and
out of visibility.
Syntax:
$(selector).fadeIn( [speed, callback] );
$(selector).fadeOut( [speed, callback] );
$(selector).fadeToggle( [speed, callback] );
Sample code:
$(document).ready(function() {
$("#show").click(function(){
$("#box").fadeIn(1000);
});
$("#hide").click(function(){
$("#box").fadeOut(1000);
});
});
//fade toggle
$("#button").click(function(){
$("#box").fadeToggle(1000);
});

Animate:
The jQuery animate() method is used to create custom animations.The .animate() method
allows us to create animation effects on any numeric CSS property. The only required
parameter is a plain object of CSS properties.
Syntax: $(selector).animate({ properties }, [speed, callback] );
properties − A required parameter which defines the CSS properties to be animated and this
is the only mandatory parameter of the call.
speed − An optional string representing one of the three predefined speeds ("slow",
"normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
Sample code:
$("button").click(function(){
$("div").animate({left: '250px'});
});
 UNIT-5
1. What is PHP?

• PHP is an acronym for "PHP: Hypertext Preprocessor" • PHP is a widely-used, open source
scripting language • It is deep enough to run large social networks! • PHP files can contain
text, HTML, CSS, JavaScript, and PHP code • PHP code is executed on the server, and the
result is returned to the browser as plain HTML • PHP files have extension ".php"
<!DOCTYPE html>
<html>
<body>
<h1>My first PHP page</h1>
<?php
echo "Hello World!";
?>
</body>
</html>
2. PHP Variables
Variables are "containers" for storing information. In PHP, a variable starts with the $ sign,
followed by the name of the variable:
<!DOCTYPE html>
<html>
<body>
<?php
$x = 5;
$y = 4;
echo $x + $y;
?>
</body>
</html>
3. PHP Data Types
Variables can store data of different types, and different data types can do different things.
PHP supports the following data types: • String • Integer • Float (floating point numbers -
also called double) • Boolean • Array • Object • NULL • Resource
PHP String A string is a sequence of characters, like "Hello world!". A string can be any text
inside quotes. You can use single or double quotes:
PHP Integer An integer data type is a non-decimal number between -2,147,483,648 and
2,147,483,647. Rules for integers:

• An integer must have at least one digit

• An integer must not have a decimal point

• An integer can be either positive or negative

• Integers can be specified in: decimal (base 10), hexadecimal (base 16), octal (base 8), or
binary (base 2) notation
PHP Float A float (floating point number) is a number with a decimal point or a number in
exponential form. 9 In the following example $x is a float. The PHP var_dump() function
returns the data type and value:
<?php
$x = 10.365;
var_dump($x);
?>
PHP Boolean A Boolean represents two possible states: TRUE or FALSE. $x = true; $y = false;
PHP Array An array stores multiple values in one single variable.
In the following example $cars is an array. The PHP var_dump() function
returns the data type and value
<!DOCTYPE html>
<html><body>
<?php
$cars = array("Volvo","BMW","Toyota");
var_dump($cars);
?> </body>
</html>
4. PHP Conditional Statements

• if statement - executes some code if one condition is true

• if...else statement - executes some code if a condition is true and another code if that
condition is false

• if...elseif...else statement - executes different codes for more than two conditions

• switch statement - selects one of many blocks of code to be executed

<!DOCTYPE html>
<html><body>
<?php
$t = date("H");
echo "<p>The hour (of the server) is " . $t;
echo ", and will give the following message:</p>";
if ($t < "10") { echo "Have a good morning!";
} elseif ($t < "20") {
echo "Have a good day!";
} else {
echo "Have a good night!";
}
?>
</body>
</html>
The PHP switch Statement
The switch statement is used to perform different actions based on different conditions.
<!DOCTYPE html>
<html><body>
<?php
$favcolor = "red";
switch ($favcolor) {
case "red":
 echo "Your favorite color is red!";
break;
case "blue":
echo "Your favorite color is blue!";
break;
case "green":
echo "Your favorite color is green!";
break;
default:
echo "Your favorite color is neither red, blue, nor green!";
}?>
</body></html>
PHP Loops
Often when you write code, you want the same block of code to run over and over again a
certain number of times. So, instead of adding several almost equal code-lines in a script, we
can use loops.

• while - loops through a block of code as long as the specified condition is true

• do...while - loops through a block of code once, and then repeats the loop as long as the
specified condition is true

• for - loops through a block of code a specified number of times

• foreach - loops through a block of code for each element in an array

Syntax foreach ($array as $value) { code to be executed; }
<!DOCTYPE html>
<html><body>
<?php
$colors = array("red", "green", "blue", "yellow");
foreach ($colors as $value) {
echo "$value <br>";
}
?> </body></html>
5. PHP Form Handling
The PHP superglobals $_GET and $_POST are used to collect form-data.
HTML FILE
<!DOCTYPE HTML>
<html>
<body>
<form action="welcome.php" method="post">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit">
</form>
</body>
</html>
Welcome.psp
<html>
<body>
Welcome <?php echo $_POST["name"]; ?><br>
Your email address is: <?php echo $_POST["email"]; ?>
</body>
</html>
The output
Welcome John
Your email address is john.doe@example.com
6. PHP File Handling
PHP has several functions for creating, reading, uploading, and editing files.
PHP Open File - fopen()
To open files is with the fopen() function. This function gives more options than
the readfile() function.
<!DOCTYPE html>
<html>
<body>
<?php
$myfile = fopen("webdictionary.txt", "r") or die("Unable to open file!");
echo fread($myfile,filesize("webdictionary.txt"));
fclose($myfile);
?>
</body>
</html>
PHP Read File - fread() The fread() function reads from an open file.
fread($myfile,filesize("webdictionary.txt"));
PHP Close File - fclose() The fclose() function is used to close an open file.
<?php
$myfile = fopen("webdictionary.txt", "r");
// some code to be executed....
fclose($myfile);
?>
PHP Read Single Line - fgets() The fgets() function is used to read a single line from a file.
<?php
$myfile = fopen("webdictionary.txt", "r") or die("Unable to open file!");
echo fgets($myfile);
fclose($myfile);
?>
7. PHP COOKIES
A cookie is often used to identify a user. A cookie is a small file that the server embeds on
the user's computer. Each time the same computer requests a page with a browser, it will
send the cookie too. With PHP, you can both create and retrieve cookie values. A cookie is
created with the setcookie() function.
Syntax
setcookie(name, value, expire, path, domain, secure, httponly);
<!DOCTYPE html>
<?php
$cookie_name = "user";
$cookie_value = "John Doe";
setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/"); // 86400
= 1 day
?>
<html>
<body>
<?php
if(!isset($_COOKIE[$cookie_name])) {
echo "Cookie named '" . $cookie_name . "' is not set!";
} else {
echo "Cookie '" . $cookie_name . "' is set!<br>";
echo "Value is: " . $_COOKIE[$cookie_name];
}
?>
<p><strong>Note:</strong> You might have to reload the page to see the
value of the cookie.</p>
</body>
</html>
8.PHP Sessions
A session is a way to store information (in variables) to be used across multiple pages.
Unlike a cookie, the information is not stored on the users computer. When we work with
an application, open it, do some changes, and then close it. This is much like a Session.
Start a PHP Session
<?php
session_start();
?>
<!DOCTYPE html>
<html> <body>
<?php
// Set session variables
$_SESSION["favcolor"] = "green";
$_SESSION["favanimal"] = "cat";
echo "Session variables are set.";
?>
</body> </html>
Modify a PHP Session Variable
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<body>
<?php
$_SESSION["favcolor"] = "yellow";
print_r($_SESSION);
?>
</body>
</html>
9. Connect MySQL Database with PHP Websites
To Connect MySQL with PHP code, we can make use of one of three methodologies. There
are three types of methods in PHP to connect MySQL database through backend: 1. MySQL
2. MySQLi 3. PDO
mysql() is now obsolete because of security issues like SQL injection etc, but the other two
are being actively used.

MySQLi: • MySQLi is an API used as a connector function to link the backend of the PHP app
to the MySQL database. • It works just like the previous version, but it is safer and faster,
and provides a better set of functions and extensions. • MySQLi was introduced with PHP
5.0.0 and the drivers were installed in 5.3.0. The API was designed to support MySQL from
version 4.1.13 to newer ones.

PDO: • PHP Data Objects (PDO) extension is a Database Abstraction Layer.

Create Database:

• Now return to the homepage of PHPMyAdmin. Click the New button to create a new
database.

• In the new window, name your database as per your need, Now select

• The newly created database will be empty now, as there are no tables in it. We Can add it..

• we are going to connect this database to localhost using PHP

Example
<?php
function OpenCon()
{
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "1234";
$db = "example";
$conn = new mysqli($dbhost, $dbuser, $dbpass,$db) or die("Connect
failed: %s\n". $conn -> error);
return $conn;
}
function CloseCon($conn)
{
$conn -> close();
}
?>

Create a new PHP file to check your database connection:

Create a new PHP file to connect to your database. Name it index.php and
add this code in this file.
<?php
include 'db_connection.php';
$conn = OpenCon();
echo "Connected Successfully";
CloseCon($conn);
?>