83% found this document useful (6 votes)

20K views

HTML, CSS & Javascript Notes

This document provides an overview of what will be covered in learning HTML5, CSS3, and JavaScript. For HTML5, topics include introduction, text formatting tags, lists, links, images, tables, semantic elements, multimedia, entities, accessibility, tools, DOM, and validation. CSS3 topics cover styling, colors, text, fonts, selectors, positioning, filters, blending modes, shapes, transitions, animations, and flexbox. JavaScript topics include variables, data types, operators, errors, functions, scope, objects, arrays, strings, numbers, prototypes, OOP principles, promises, events, DOM, and BOM.

Uploaded by

Steve Morfaw

Available Formats

Download as PDF, TXT or read online on Scribd

83% found this document useful (6 votes)

20K views

HTML, CSS & Javascript Notes

Uploaded by

Steve Morfaw

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 144

HTML|CSS|JAVASCRIPT

What you are going to learn in HTML 5 ?

● Introduction to HTML 5
● How HTML 5 code gets rendered on the page
● Required tools to learn HTML 5
● HTML 5 text formatting tags
● HTML 5 list elements
● HTML 5 attributes
● HTML 5 Link elements
● HTML 5 image element
● HTML 5 table element
● HTML 5 semantic elements
● HTML 5 multimedia elements (like audio, video, iframe)
● HTML 5 entities
● HTML 5 accessibilities
● HTML 5 tools
● HTML 5 DOM
● HTML 5 W3C validation

What you are going to learn in CSS 3 ?

● Styling Module
● Color Module
● Text Module
● Fonts Module
● Selectors
● Pseudo Classes
● Generated Contents
● Specificity
● Values & Units
● List Styles
● Box Model
● Background Module
● Gradients
● Display Module
● Positioning Module
● Filters Module
● Clipping & Masking
● Blending Modes
● Shapes Module
● Table Layout
● Transformation
● Transition & Animations (Keyframes)
● Media Queries
● Newly Introduced CSS 3 concepts
● Flexbox Layout

1|Page
What you are going to learn in JavaScript (EcmaScript) ?

● Introduction to JavaScript
● Introduction to programming
● About JavaScript language behaviour
● Keywords and Reserve words
● Variable or Identifier and its naming convention
● Data types
● Values & its type in JavaScript
● Operand, Operator, Expression, Instruction and Statement
● Comments
● Types of Operators (Unary, Binary & Ternary)
● Conditional statements
● Control statements
● Difference between undefined & undeclare
● Type of errors in JavaScript
● Scope
● Function and its types
● How scope works for a variable and a function ?
● How JavaScript code gets executed ?
● Execution context, Call stack & Heap
● Scope and Function Expression
● Hoisting and Shadowing
● var, let and const
● Coercion (Explicit & Implicit)
● Equality
● Closure
● Array and its methods
● Object
● Call by value & Call by reference
● String and its methods
● Template Literals
● Number and its representations (Binary, Octal, Decimal & HexaDec)
● Prototypes
● Object Oriented Principles (OOP) in JavaScript
● Rest and Spread
● Destructuring (Array & Object)
● Symbols
● Iterators & Generators
● Regular Expression
● Promise
● async and await
● Event Queue and Event Loop
● New utility methods or Higher order functions for Array
● JavaScript latest features
● Modular JavaScript
● Document Object Model (DOM)
● Browser Object Model (BOM)
● Security

2|Page
html => hypertext markup language
=> data presentation
=> UI designing (sign up, login, registration, search form…)
= static webpages

CSS => Cascading Style Sheets

=> used to change look & feel of webpage (html elements)

JS => JavaScript
=> its back-end for html/css (Front-end)
=> it provides logical support or client validations

Html/css/JavaScript static web site designing

Html/css/JavaScript+angular or reactJS front-end developer

UI/UX developer

advJava/spring/asp.net/python/php/nodejs back-end dev

front-end+back-end+DB+config+versioning full stack developer

full stack web dev:

html/css/JavaScript/anguler/SST/bootstrap/wordpress/xml-werservice

server side tech’s:

node.js/servlet/asp.net/php/cgi-perl/py

Network:Collection of computers interlinked together is called network. First network name is

ARPANET (Advanced Research Projects Agency Network). First protocol in IT industry is FTP (File
Transfer Protocol).

Internet:Internet stands for international networking.

1990
The Internet is a network of connected computers. No company owns the Internet; it is a
cooperative effort governed by a system of standards and rules. The purpose of connecting
computers together, of course, is to share information.

Internet is a collection web application,

Web application is group of web pages
Web page is group components (means heading, para, image, button, tables, …)

A Brief History of the Web

The Web was born in a particle physics laboratory (CERN) in Geneva, Switzerland in 1989. There a
computer specialist named Tim Berners-Lee first proposed a system of information management
that used a “hypertext” process to link related documents over a network. He and his partner,
RobertCailliau, created a prototype and released it for review. For the first several years, web pages
were text-only. It’s difficult to believe that in 1992, the world had only about 50 web servers.
3|Page
TimBerners-Lee internet (1989-1990)
 Html (HyperText Markup Lang)
 http (hyper Text Transfer Protocol)
 W3C org

The World Wide Web Consortium

World Wide Web Consortium (called W3C) is the organization that oversees the development of
web technologies. The group was founded in 1994 by TimBerners-Lee, the inventor of the Web, at
the Massachusetts Institute of Technology (MIT).
Tim Berners-Lee (WWW/HTTP), Cerf & Kahn (TCP/IP), Baran, Davies, Kleinrock & Roberts (packet
networking), Bob Metcalfe (Ethernet).

WHAT IS APPLICATION OR SOFTWARE?

Automation of manual business operations by using a programming language.

TYPES OF APPLICATIONS OR SOFTWARES

We can create an application or software in fallowing flavors:
1. Desktop: The applications which are installable in local systems are called desktop
applications.
2. Mobile: The applications which are installable in mobile phones or tablets downloaded from
play store for android and apple store for ios.
3. Web: The applications which are deployable in any server and can be accessible from any
location using browser.

WHAT IS WEB APPLICATION?

Web applications are network enable applications. We can deploy any web applications in servers
and we can access them over network using server ip address and application name.
In computing, a web application or web app isaclient–server software application which the client
(or user interface) runs in a web browser and it contains web documents in the form electronic
pages(web pages).

A web application typically contains fallowing three layers:

Presentation layer is a user interface (views) which are accessible from any web browser.
Business layeris a server-side program which is nothing but automation of business rules. Client
layer will interact with business layer to persist data.
Data layeris database software where we can store client related data. Business layer will interact
with data layer.

How the Web Works

1. When you connect to the web, you do so via an Internet ServiceProvider (ISP). You type
adomain name or web addressinto your browser to visit a site;for example: google.com,
oracle.com, microsoft.com.

4|Page
2. Your computer contacts anetwork of servers calledDomain Name System (DNS)servers. These
act like phonebooks; they tell your computerthe IP address associated withthe requested
domain name.An IP address is a numberof up to 12 digits separatedby periods / full stops.
Everydevice connected to the webhas a unique IP address; it islike the phone number for
thatcomputer.
3. The unique number that theDNS server returns to yourcomputer allows your -browserto
contact the web serverthat hosts the website yourequested. A web server is acomputer that is
constantlyconnected to the web, and is setup specially to send web pagesto users.
4. The web server then sends thepage you requested back to yourweb browser.

What is web browser?

It is client-side lightweight software installed in client machine. It sends http request from client to
server;ittakeshttp response from server.
Browser provides navigation among web pages, and browsers executes html, css, JavaScript files
and displays output to user.

List of Computer Browsers:

Internet Explorer(1995), Opera(1995), Mozilla Firefox(1998), Safari(2005), Google Chrome(2008)
etc…

List of Mobile Browsers:

Mobile Safari (iOS), Android Browser (Android), BlackBerry Browser (RIM), Nokia Browser
(Symbian), Opera Mobile and Mini (installed on any device), Internet Explorer Mobile (Windows
Phone), Silk (Kindle Fire) etc…

Server
A server is a computer or system that provides resources, data, services, or programs to other
machines, known as clients, over a network/inet.
In theory, whenever computers share resources with client machines, they are considered servers.
a server stores all the data associated with the websites that are hosted by it and shares that info
with all computers and mobile devices (like yours) that need to access them.

Client
A client is a electronic device that connects to and uses the resources of a remote computer, or
server.
Client maybe a desktop or a laptop or a tablet or a mobile phone or a TV etc.
The device which is used by the user is called as “Client”.

User
The person who is working on/operating client machine is known as User or end-user.

5|Page
Client:
It is a machine or device (desktop or laptop or tablet or mobile phone or TV etc), which can access
the data from server machine.
The device which is used by the user is called as “Client”, person who is working on client machine is
known asUser.

Email: Electronic mail services. It is a free service to communicate with other internet users. Email is
invented by Shabeer Bhatia. Sabeer Bhatia is an Indian entrepreneur who founded the webmail
company Hotmail.com.
SMTP: Simple Mail Transfer Protocol. It takes care of delivering emails from one server to another.
MIME: Multipurpose Internet Mail Extensions. It exchanges different kinds of data.
Blog: It is daily updating website or webpage. Every post displayed in reverse chronological order.
Forum: It is an online discussion website to exchange resources each other.
Http: It is a transfer protocol to exchange hypertext documents in the world wide web.
Http(s): Secured transfer protocol to exchange hypertext documents with the help of
SSL(ciphertext).
Ciphertext is encrypted text. Plaintext is what you have before encryption, and ciphertext is the
encrypted result. The term cipher is sometimes used as a synonym for ciphertext, but it more
properly means the method of encryption rather than the result.

HOW MANY TYPES OF WEB APPLICATIONS WE HAVE?

A webpage is an electronic page developed on HTML. It is classified into two types.

Static webpage: A user unable to interact directly with these webpages. Eg: HTML, CSS
Dynamic webpage: End-user can able to interact directly with these webpages. Eg: HTML, CSS
&Javascript

6|Page
Collection of webpages or web documents are called web application(website). These are classified
into two types:

STATIC WEB APPS:The applications which can’t able to handle business logic are known as static
web apps.Static apps will contain only client layer.We can develop static web applications using
HTML. To provide look and feel to these static pages we can use CSS. To handle client layer business
logic we ca use Javascript.We can’t able to maintain end user interaction(state) using static web
apps.

DYNAMIC WEB APPS:The applications which can able to handle business logic are known as
dynamic web apps.These type of apps contains at least 2 layers client and business. If we need to
store client data then these application contains data layer too.We can develop client layer using
HTML, CSS &javascript and business layer using any one of the server programming language like
.NET, JAVA/J2EE & PHP etc...We can store end user data using any database like mongo db, MS-SQL,
MySql, Oracle etc.
What is HTML?
It is specially designed hypertext for web browsers, with meaningful tags or elements in simple
English language.

HTML Versions
From W3C organization there are fallowing versions released.
Version Specification Release Date
1.0 N/A (HTML 1.0) 1-Jan-1994
2.0 HTML 2.0 24-Nov-1995
3.2 W3C: HTML 3.2 14-Jan-1997
4.0 W3C: HTML 4.0 24-Apr-1998
4.1 W3C: HTML 4.1 24-Dec-1999
5.0 WHATWG 28-Oct-2014
(Adv Markup Language For Mobiles)
5.1 W3C: HTML 5.1 -Nov-2016
(Adv Markup Language For Small Electronic Devices)
5.2 W3C: HTML 5.2 14-Dec-2017

HTML Intro
1. HTML wasdeveloped by “Tim-Berners-Lee”, released in 1994 and maintained by W3C Org.

2. HTML stands for “Hypertext Markup Language”.

3. Hypertext” means the text that can be transferred from internet server to internet client.

"Markup Language" means which syntax will be in the form of tags or you simply "markup" a
text document with tags that tell a Web browser how to structure it to display.

7|Page
4. Technically, HTML is not a programming language, but rather a markup language.

5. HTML is used to design "static web pages", means HTML is used to create elements (such as
headings, paragraphs, icons, menus, logos, images, textboxes, button etc) in the web pages.
static webpage means, that pages always showing same information.

6. HTML is very easy to understand (no pre-requisites).

7. HTML is “client side tech”. That means the html code executes on the client browser but not
in server.
web tech:
which sw are supporting to design web pages or providing API to dev web coding those sw are
called as web tech.
>client side tech ex: html/css, js, jquery, BS ...
used for static web pages.
bw rec source code & trans after execution then produced the
output.
>server side tech ex: servlet, jsp, asp.net, php, cgi, nodejs, cold fusion ...
dynamic web pages.
code trans, execute with in server only, and produced output, this
output sent to client machine.

8. HTML is supported by all the browsers such as Google Chrome, Mozilla Firefox, Microsoft
Internet Explorer, Safari, Opera and other browsers.

9. HTML is used in all real time web sites today; html is the only language available in world for
designing Webpages.

1. The file extension either "filename.html" or "filename.htm"

2. HTML is an interpreter-based language. That means the HTML code will be converted
into machine language in +. Browser interprets HTML code.
Translators:converting high level code (human) into machine level code (MP/OS) is called as
translation. who performs this operation those called as translators.
types: >compiler ex: c, cpp,...
8|Page
>interpreter ex: html, js, oracle,...
>assembler

3. for working html no need installs any software, and browser is responsible for executing &
producing output of html programs.

4. html is 100% error free programming.

5. HTML is not a case sensitive language that means you can write the html code in either
upper case or lower case.

how design& execute html programs

 open any text editor (sw) and type program.

notepad, editplus, notepad++, textpad, sublime, ms vs, word, atom, coffee, ...
 save that program with any name (.html or .htm) and anywhere in system.
but filename must be single word (space is not allowed).
> execution:
1st Approch:goto file location, then dbl click on file
2nd Approch:goto file location, then right click on file and click on open then select browser
3rd Approch:open any browser, then goto address bar and type filename with address.
d:\siva\test.html e:\test.html

Tag:
 A tag is a keyword, enclosed within "<" and ">" in HTML language.
 It is special kind of text placed between left angular brace and right angular
brace(<tag_name>).
 Tag is predefined program, program is instructions / command to browser.
 Tag is used to display some specific output in the web page.
 browser was not identified the tag; it shows blank page or it prints as text.
 tags also represented as elements.
 tag has some attributes(properties), those are used to change look & feel (components or
output).

types of tags:

in html we have two types tags, those are:

>paired tags
contains open tag and closing tag.

9|Page
opening tag specifies starting point of operation/output, closing tag specifies ending point of
operation/output.
Syn: <tagname>something</tagname>
</tagname>
ex: <html> ... </html>
<head> ... </head>
<body> … </body>
<script> ... </script>
<style> ... </style>
<p> … </p>
note: paired tags also called as body
body-full tags

>unpaired tags
contains only open tag.
VOID => ITS not RETURNING ANY VALUE
Syn: <tagname> or <tagname/>
ex: <br/> <img/><input/>
<hr>
<link>
note: Unpaired tags also called as body
body-less tags
Structure of HTML
as per W3C we have to follow the following structure to design web pages (but it’s not comp).

<!DOCTYPE html>
<html> web
web page/document designing starts here
<head>
-> non-content
content sec(non
sec(non-result)
->> settings/internal info about page
-> 1st executed sec
Ex: title tag, link tag, style tag, script tag, meta tag
</head>
<body>
->> content sec(result)
->it
>it contains page designing
-> 2nd executed sec
Ex: form, h1, h2, h3, h4, h5, h6, p, div, table, img, a, button, audio, video, iframe,
etc…
</body>
</html> web
web page/document designing ends here

generally, html page contains three parts, those are:

>versioning section
>head section
>body section

versioning section
this is providing information to browser which version we are using in webpage/program. So,
browser is interpreting code and producing output as per given specification.
Syn:

10 | P a g e
<!DOCTYPE htmlversion-url>

HTML4.0:
<!DOCTYPE html public "-//W3C//DTD HTML 4.0//EN" "http://www.w3c.org/TR/html4/strict.dtd">

XHTML:
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Html+xml =>xhtml

HTML5:
<!DOCTYPE html> current version

strcit.dtd file (document type definition), it contains definitions of tags, specifications.

doctype is not case-sen, so we type in any case.
ex: DOCTYPE => valid (recommended)
doctype => valid
DocType => valid

html tag
the <html> tag represents starting and ending of html program. html tag contains two child/sub
tags those are head tag and body tag.

head tag
head tag represents non-content section (means not output) of the web page.
this information doesn't appear on webpage/in browser (it's called as non-content), but it's used
internally by the browser.
this tag is used to set icons, title, to provide some meta data (info about web app), css settings, java
scripting etc...
head tag contains some child/sub tags, those are
Syn:
<head>
<link>
<title></title>
<meta>
<style></style>
<script></script>
...
</head>

body tag
body tag represents content information (means output) of the web page.
this information appears on webpage/in browser (it’s called as content).
this tag is used to design UI or to display output.
body tag contains so many child/sub tags.
some of tags:
<body>
<form>

11 | P a g e
<h1>
<h2>
<p>
<div>
<input>
<a>
<audio>
<video>
<iframe> etc...
</body>

html is collection of tags(elements) and attributes.

comment lines
comment lines are to provide some description about of our program.
Syn:

comments are not executed by browser.

heading tags
these tags are used to print data/text in heading format.
html providing 6 heading tags, those are h1, h2, h3, h4, h5, h6.
These 6 tags are used to display headings in different sizes.
six tags are paired tags and block level elements.
Syn:
<h1> text </h1>
<h2> text </h2>
<h3> text </h3>
<h4> text </h4>
<h5> text </h5>
<h6> text </h6>
Note: inside body section we can repeat any tag and no.of times.

p tag
> p stands for paragraph.
> this tag is used to display/print more lines of text (paragraph)
> its paired tag and block level.
> browser display an empty line(gap) between paragraphs
Syn:
<p> text or info </p>

Note:
>browser/html doesn't accept more than one space (space bar & tab key), means while designing of
program we given more space but browser prints only one space.

12 | P a g e
>browser/html doesn't accepts enter key (line breaking), means while designing of program we use
enter key but browser prints data without breaking line.

br tag

 br stands for break line (enter key)

 its un-paired

Syn: <br> or <br/>

Html entities

Special characters or html operators

Syn: &entity;

  © ™ ® € £

¥ < > ¼ ½ ¾ etc…

Html hexa-decimal operators, these operators are starts with #

Hexa-dec base 16 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f
Syn: &#hexa-code;

Label tag
>label tag used for displaying prompting text.
>its paired tag, inline tag
Syn: <label> text </label>

Span tag
>span tag used for small textual data, like as error message, mandatory specification.
> in continuity of text, if we want to highlight couple of word or letters,
we use span tag
>its paired tag, inline tag
Syn: <span> text </span>

pre tag
> pre stands for pre-formatting (alignment)
> pre tag is used to print data/text, how we typed in same format
> pre is paired tag, block level
Syn:
<pre> text </pre>

formatting tags

<b><strong> <u> <i><em> <strike> <sub> <sup>

13 | P a g e
Ex: Apple apple 4568 apple H20 a2

All are paired tags

Inline tags

b tag or strong
> b stands for bold
> b tag used to print text in bold format
>both are paired tags & inline tags
Syn:
<b> text </b>
<strong> text </strong>

u tag
> u stands for underline
> u tag used to print text with underline (draws a line base of text)
> u is paired tag
Syn:
<u> text </u>

strikeout tag
> strikeout tag used to print text with line (draws a line middle of text)
>strikeout is paired tag
Syn:
<strike> text </strike>

superscript tag
>this tag used to display text top of upper line
> superscript is paired tag
Syn:
<sup> text </sup>

subscript tag
>this tag used to display text bottom of baseline
> subscript is paired tag
Syn:
<sub> text </sub>

I or em tag
>i stand for italic (inclined)
>i tag used to print text with little banding
>i is paired
Syn:
<i> text </i>
<em> text </em>

14 | P a g e
All 6 tags are paired tags &inline tags

title tag
this tag used to set the title for a webpage, means every webpage
they have individual title.
its paired tag.
<title> is the sub tag of <head> tag.
Web site => 10 web pages =>Title 10 times
Syn:
<title>text</title>
Note: one web page/one title

Link tag
Link tag used to set the icon/logo for a webpage.
Un-paired tag.
<link> is the sub tag of <head> tag.
Syn: <link rel=”stylesheet” href=”filename”/>
Relative
Hyper reference =>.jpg .bmp .png .jfif .gif .tif .ico
Preferable image size:
18px X 18px
20X20px
30X30px
40X40px

Attributes
> attribute is a special feature/setting
setting/property of a tag.
> attributes are used to change the default look/feel of data(elements).
> every tag they have attributes

Syn:
<tagname attribute="parameter" attribute=’parameter’ ...
...> Html
Width=”100px” height=200px
Note:
 parameter means the value of attribute.
 Parameter should enclosed within “ “ or ‘ ‘ or without quotes.
 Every attribute must be separated by a space

types:
as per html4 we have 3types of attributes, those are
>global attributes (core)
Ex: id, name, class, style, align, width, height, title etc…
>specific attributes (personal)
Ex: rel, href, src, colspan, rowspan, action, alt etc…
>event attributes (dynamic)
Ex: onclick, onload, onfocus, onblur, onchange, onsubmit, onkeypress,
15 | P a g e
Oncopy, onpaste, oncut, onchange, ondblclick, oncontextmenu, onmousemove,
onmouseover, onmouseexit etc…
>optional attribute <== html5
Ex: lang, type, method etc…

global attributes:
these attributes are common for most of tags (99% of tags)
those attributes are:
class, id, name, style, align etc...
ex:
<h1 class="" id="" name="a" style="" ...>
<p id="" class="" name="b" style="" ...>
<pre class="" id="" name="c" style="" ...>

specific attributes:
these attributes are specific to some tags/elements only (not common).
those attributes are:
src, href, rel, target, colspan, rowspan, alt, placeholder, poster, loop, etc...
ex:
<a href="url" ... >
<imgsrc="" ...>
<audio controls>

event attributes:
these attributes are used to some logical operations.
logical operations we can perform by using JavaScript, these also called dynamic attribute.
attributes are:
onclick, oninput, onfocus, onexit, onload, onchange,onblur, ....
ex:
<button onclick="js code/fun1">
<body onload="js code">

optional attributes:
these attributes are not comp to specify/to use.
these type attributes are supported since html5.0.
those attributes are:
lang, type, method ...
ex:
<style type="text/css" ...>
<script type="text/javascirpt" ...>
<link type="image/jpg" ...>
<form method="get" ...>

categories of attributes:
html attributes <tag attribute="value">
css attributes <tag style="css-attribute:value; css-attribute:value;...">
16 | P a g e
CS S change look/feel of html elements
Css provide only styles but not tags
Style is group of attribute/properties

Different ways to implement css:

1stApproch (inline):
Html tag and css properties are defined With n the same line
<tag Style=”attribute:value; attribute:value; …”>

2ndApproch (internal):
Html tags and css styles are designed in the same program, but not in same line.
Internal css should be implements in Style tag, style tag must be sub tag head tag.

3rdApproch (external)
Css styles are designed in separate file and should be save with “.css”, and html code saved with
“.html”
Use link tag for mapping css file to html file
Syn: <link rel=”stylesheet” href=”filename.css”/>

note:
 css attributes we can't use in place of html attributes.
 html attributes we can't in place of css attributes.
 “Id” attribute we are using while writing javascript code.
 “Name” attribute we are using while writing server-side code. (servlet, jsp, asp, php, noedjs)

images
> "img" tag is used to display images on webpage.
> in one webpages we can display any no.of images and any type of images.
> it is strongly recommended to place all images in side root folder or create
sub folder with name images in root folder
>its un-paired tag, and its inline element
Syn:
<img attributes/>
17 | P a g e
.jfif .svg.jpg .bmp .gif .tif .png .webp

attributes:
src => to specify which img you want to display
width => width of image (pixel)
height => height of image (pixel)
title => it is used to specify tool tip. ((whenever
whenever mouse pointer comes on top of image)
alt => alternative text, if image not loaded in webpage/not display, we want to display text message
to user it called as alt
+
global attributes

opacity: 0.5;
filter: blur(5px);
brightness(125%)
contrast(135%)
grayscale(100%)
invert(100%)
hue-rotate(180deg)
saturate(8)
sepia(100%)
drop-shadow(8px
shadow(8px 8px 10px green)

hyperlinks
> a stand for "anchor”
>"a" tag is used to create hyperlink, hyperlinks are used to move from one webpage to another
webpage.
>whenever user clicks on the hyperlink, it moves to the specified page.
> destination page sometime within same application or other application.

>web application basically contains links to other pages, so it's very commonly used tag.
> by default, every browser provides built
built-in style for each hyperlink,

i.e blue color+handsymbol+under line.

we can customize these styles by using CSS.
> its paired tag, and inline element

18 | P a g e
Syn:

<a attributes>Display Text</a>

attributes:
href : hyper reference, used to specify the ad address of webpage or web site, i.e whenever user clicks
on this link, which page you want to open
url may be html page, server
server-side
side file, image, audio file, video, pdf file, documents
etc...
href=”url”
“https://www.abc.com/login.aspx
https://www.abc.com/login.aspx”
“” self-calling
calling
“.” home page of web site/home dir of web application
“#id” it creates book marks (moving within same page)

target : where you want open destination page

_blank ==> opens the link in a window/tab
_self ==> opens the link in current working tab/window (its default)
_parent ==> opens the link in parent frame
_top ==> opens the link in full body of windo
window
framename ==> opens the link in specified frame

html colors
html supports 3types of patterns, those are
> named colors
> RGB colors
> Hexadecimal colors

named colors:
>it supports to write direct colorname
>we have some limited colors
ex: white, black, red, green etc...
> color names are not case-sen

RGB colors:
>RGB model specifies that the composition of 3 basic colors (Red, Green, Blue)
>RGB produces 16millions colors.

Syn: rgb(red,green,blue)
red => 0 - 255
green => 0 - 255
blue => 0 – 255
ex: rgb(10, 45, 201) 401%255 146

19 | P a g e
Hexadecimal number colors:
>Hexadecimal model is the shortcut for rgb model
>Hexadecimal system ranges from 0 - 15
0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f
Syn: #RRGGBB 1,2 red 3,4 green 5,6 blue
ex: #1a4b68
#RGB
ex: #3d7

Note: in realtime "Hexadecimal model" is recommended.

these colors we can use for foreground color, background color, border color etc..
for setting colors we have some attributes, those are
color to set/to change foreground color (text color)
background-color to set/to change background color
border-color to set/to change border color (line color)
box-shadow to set/to change shadow color
text-shadow to set/to change text shadow color
Note: all these are CSS attributes.Support by Most of html tags

Gradient colors
background: #FC466B; /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #3F5EFB, #FC466B); Chrome 10-25,
Safari 5.1-6
background: linear-gradient(to bottom, #3F5EFB, #FC466B); W3C, IE 10+/ Edge, Firefox
16+, Chrome 26+, Opera 12+, Safari 7+

linear-gradient(direction, color1,color2,…color-n)
dir: to left (r=>l)
to right (l=>r)
to top (b=>t)
to bottom (t=>b)

background: linear-gradient(to bottom, #3F5EFB 40%, #FC466B 60%);

-webkit-linear-gradient(to left, #3F5EFB, #FC466B);

linear-gradient(to left, #3F5EFB, #FC466B);

background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(38,38,162,1) 60%, rgba(0,212,255,1)

100%);

radial-gradient(shape, color1, color2, …color-n)

radial-gradient(circle, rgb(131,58,180) 0%, rgb(29,166,65) 50%, rgb(252,176,69) 100%);

radial-gradient(circle, rgba(166,29,142,1) 57%, rgba(100,180,111,1) 78%, rgba(69,252,96,1) 100%);

Note: while applying gradient colors we have to use “background” property in place of
“background-color”.

20 | P a g e
working with list tags
these tags are used to display data/info in points wise.
html supports three types of list, those are
Ordered list numbering
Unorderedlist bulleting

ol tag
>ol stands for "Ordered List".
>it is used to display the text(names, colors, team names, course name...) with numbering.
>it supports 5types numbering, those are 1, A, a, i, I. by default it displaying in number.
>by using "ol" tag we can create ordered list
>ol is paired tag & block level element

li tag
> li stands for "list item"
> li is sub tag of ol tag
> li tag is used to print text/data in points wise
> li is paired tag & block level element
Syn:
<ol attributes>
<li> text </li>
<li> text </li>
<li> text </li>
...
</ol>

ol attributes:
type : which type numbering to display (Default is 1)
start : from where u want to start numbering (default is 1)
reversed : to displaying numbers in desc order

li attributes:
value : used for restarting numbering with specified value

ul tag
>ul stands for "Un-Ordered List".
>it is used to display the list of items(names, colors, team names, course name...) with bulleting.
>it supports 3types bulleting, those are dot, circle, square. by default, is dot.
>by using "ul" tag we can create un-ordered list items
> ul is paired tag
>"li" tag used for creating list items
Syn:
<ul type="dot/circle/square">
<li> text </li>
<li> text </li>
21 | P a g e
<li> text </li>
...
</ul>

dl tag
>dl stands for Definition list (since html5 description list)
>dl tag used for to display definitions/full forms (collection of definitions)
>its paired tag
> "dt" and "dd" are sub tags of "dl" tag
> "dt" stands for definition title, "dd" stands for definition data.
> dt & dd are paired

Syn:
<dl>
<dt>title/word</dt>
<dd>information</dd>
<dt>title/word</dt>
<dd>information</dd>
<dt>title/word</dt>
<dd>information</dd>
...
</dl>

fieldset tag
> this tag used for drawing a line/border around elements/tags.
> its paired tag and block level
> we can draw any no.of borders
Syn:<fieldset attributes>
<legend>text</legend>
Sub elements
</fieldtset>

attributes:
align : align of elements, it supports 3 alignments center, left, right
left is default align
border : style of line, thickness of line, color of line
width : width of box (size in % )

legend tag
>legend tag used for set title/heading for fieldset
>legend is sub tag of fieldset tag
>its paired tag
Syn:<legend attributes>Heading</legend>

attributes:
align :align of elements, it supports 3 alignments center, left, right
left is default align
22 | P a g e
color :

div tag
>div is a container, means its grouping elements/controls/components of html.
>inside div tag we can place any content like normal text or images.
>div tag is used to divide web page as no.of subpages/parts, each part is rep as div.
>for better maintained, effective design of web page and simplifying css code.
>its paired tag, and block level element
Syn: <div attributes>
contents
</div>
>one webpage may contains any no.of div tags.

display:flex; <== it displaying all elements side-by-side row wise or column wise
flex-wrap:wrap; <== it align element to next line
flex-direction <== it used to specifiy direction (order) of flex elements
flex-direction:row|row-reverse|column|cloumn-reverse;
flex-flow <== it combination of felx-wrap & flex-direction attributes.
flex-flow: direction wrap;

display:grid; <== it displaying all elements in rowsXcols

grid-template-columns <== no.of columns to display (width of columns)
grid-template-columns:col1 col2 col3....;

:autoautoautoauto; <== 4columns

:300px 400px 250px; <== 3columns

:30% 30%; <== 2columns

:30% auto 400px;

grid-column-gap: Npx; <== it provides a gap between column to column
grid-row-gap: Npx; <== it provides a gap between row to row
grid-gap:Xpx; <== it provides a gap between row-row & col-col with same size

Note: its applicable on nested tags, means outer tag only we can apply grid

table tag
>table tag is used to display the data in form rows & cols in the web page.
> a table is a collection of rows, each row is collection of cells/col/field.
> a table is represented as <table> tag, a row represented as <tr> tag, a colheading is represented as
<th> tag, data rep as <td> tag.
> table heading is represented as <caption> tag.
><thead> tag is rep of table head part, <tbody> tag is rep of table bodypart and <tfoot> tag Is rep of
table footer part.
table it just comb rows & cols
caption main heading of table
23 | P a g e
tr table row, used to draw a row
th table heading (col heading)
td table data (col data)
thead table head section
tbody table body section
tfoot table footer section

> all these 8tags are paired tags

table, tr, caption, thead, tbody & tfoot are block level tags
th & td are inline tags

Syn:
<table>
<tr>
<th>heading</th> <th>heading</th>
</tr>
<tr>
<td>data</td> <td>data</td>
</tr>
...
</table>

Note:
<th> and <td> are sub tags of <tr>
<tr> is sub tag of <table>

table attributes:
border : border of table (0 means no border, 1-n border req)
align : alignment of table
width : width of table (%)
...
th& td attributes:
colspan : specifies the no.of columns to merge/expend
rowspan : specifies the no.of rows to merge/expend
...

24 | P a g e
<h6>Hypertext Markup Language</h6>
<h1>Cascading Style Sheets</h1>
<h3>JavaScript</h3>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>No Cost EMI:</h2>
<p>In an attempt to make high-end products accessible to all, our No Cost EMI plan
enables you to shop with us under EMI, without shelling out any processing fee. Applicable on
select mobiles, laptops, large and small appliances, furniture, electronics and watches, you can now
shop without burning a hole in your pocket. If you've been eyeing a product for a long time, chances
are it may be up for a no cost EMI. Take a look ASAP! Terms and conditions apply.</p>

<h2>EMI on Debit Cards:</h2>

<p>Did you know debit card holders account for 79.38 crore in the country, while there
are only 3.14 crore credit card holders? After enabling EMI on Credit Cards, in another attempt to
make online shopping accessible to everyone, Flipkart introduces EMI on Debit Cards, empowering
you to shop confidently with us without having to worry about pauses in monthly cash flow. At
present, we have partnered with Axis Bank, HDFC Bank, State Bank of India and ICICI Bank for this
facility. More power to all our shoppers! Terms and conditions apply.</p>

<h2>Mobile Exchange Offers:</h2>

<p>Get an instant discount on the phone that you have been eyeing on. Exchange your old
mobile for a new one after the Flipkart experts calculate the value of your old phone, provided it is
in a working condition without damage to the screen. If a phone is applicable for an exchange offer,
you will see the 'Buy with Exchange' option on the product description of the phone. So, be smart,
always opt for an exchange wherever possible. Terms and conditions apply.</p>

</body>
</html>

25 | P a g e
« » <br>
±120 <br>
¾ <bR>
10÷3<br>
ß
</body>
</html>

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

</head>
<body>
<strong>HTML</strong>
<b>CSS</b>
<br>
<em>JavaScript</em> <i>BootStrap</i> <br>
<u>Ajax</u>
<strike>AngularJS</strike> <bR>

H<sub>2</sub>SO<sub>4</sub> <br>

(a+b)<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup> + 2ab

<br>
<h1><u><em>Siva Kumar Y</em></u></h1>

<h3>Samsung Galaxy S22</h3>

new price <strong>₹80000</strong>, old price <strike>₹100000</strike>,
discount <em>20%</em>
</body>
</html>

</body>
</html>

26 | P a g e

<!DOCTYPE html>
<html lang="en">
<head>
<title>My 2nd Webpage</title>
<link rel="icon" href="logo1.png"/>
</head>
<body>
<label>enter firstname</label>
<label>enter lastname</label>
<br>
<span>hello</span>
<span>invalid email id</span>
<br>
<p>EditPlus is <span style="background:yellow;">not free</span> software. You may use
this software for evaluation purposes without charge for a period of <span
style="background:yellow;">30 days</span>. If you use this software after the 30 day evaluation
period, you <span style="background:yellow;">must buy the license</span>.</p>
<br>

<h3>Login Form</h3>
<label>Username</label> <span style="color:red;">*</span> <br>
<input type="text"/> <br>
<label>Password</label> <span style="color:red;">*</span> <br>
<input type="password"/> <br>
<button>Log In</button>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>My 3rd Webpage</title>
<link rel="icon" href="logo.png"/>
</head>
<body>
<h2 align="center"><u>NO WARRANTY</u></h2>
<p align="justify">Editplus Is Sold "As Is" And Without Any Warranty As To Merchantability
Or Fitness For A Particular Purpose Or Any Other Warranties Either Expressed Or Implied. The
Author Will Not Be Liable For Data Loss, Damages, Loss Of Profits Or Any Other Kind Of Loss While
Using Or Misusing This Software.</p>

<h1 onclick="alert('Welcome')">Click here</h1>

<h2 ondblclick="window.document.write('Hello world')">dbl click here</h2>
</body>
</html>

27 | P a g e

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex8</title>
<link rel="icon" href="logo.png"/>
</head>
<body>
<h3>demo on displaying images</h3>
<img src="e:/html6pm/images/tree.jpg"/>

<img src="images/car.jpg" width="500px" height="260px"/>
<br>
<img src="images/pic.gif" width="100%" height="400px"/>
<br>
<img src="images/water.jpg" title="Waterfalls, Hyderabad"/>
<br>
<img src="images/flower.pn" alt="image not diasplayed try again"/>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex9</title>
<link rel="icon" href="logo1.png"/>
</head>
<body>
<h3>demo on hyperlinks</h3>
<a href="e:/html6pm/ex4.html">goto ex4</a>

<a href="e:/html6pm/ex6.html">goto ex6</a>
<br>
<a href="https://www.facebook.com/login.php">facebook</a>
<br>
<a
href="https://www.amazon.in/electronics/b/?ie=UTF8&node=976419031&ref_=nav_cs_electronics
">
<img src="images/ele.jpg" width="100px" height="100px"/>
<br>Electronics
</a>

</body>
</html>

28 | P a g e

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex10</title>
<link rel="icon" href="logo1.png"/>
</head>
<body>
<h3>demo on hyperlinks</h3>
<a href="files/Application.pdf" >Click here to Apply Job</a>
<br>
<a href="files/HTML YS-1.docx">html document</a>
<br>
<a href="files/npp.8.4.2.Installer.exe">download Notepad++</a>
<br>
<a href="files/[iSongs.info] 01 - Toofan.mp3" target="_blank">play audio</a>
<br>
<a href="files/Children _ Infobells.mp4">play video</a>
<br>
<a href="images/car.jpg">
<img src="images/car.jpg" width="200px" height="100px"/>
</a>
</body>
</html>

<!-- CSS
==> cascading style sheets 3.0
==> developed & maint by W3C org
==> used to change the look & feel of webpage
==> re-defining html tag/ overriding of html tags

tag ==> set of instr (predefine)

==> replace with porgramer instr
ways: > inline
> internal
> external

inline css:
html tag & css styles are defined with in the same line
used to define presonal styles for html tags
Syn:
<tag style="property:value;property:value;...">
-->

29 | P a g e
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex11</title>
<link rel="icon" href="logo1.png"/>
</head>
<body>
<h3>demo on inline styles</h3>
<h1 style="color:red;">HTML</h1>
<h1 style="color:red;">CSS</h1>
<h1 style="color:red;">JavaScript</h1>
<h1 style="color:blue;">BootStrap</h1>
<h1 style="color:green;">Angular</h1>

</body>
</html>

<!--
internal
html tags & css styles are defined with in the same program/page, but not in same line.
internal styles should be define in the <style> tag.
style is paired tag & it must be sub tag of <head> tag
used to define global styles for webpage
Syn:
<style>
tag-name{
property:value;
property:value;
...
}
tag-name{
property:value;
property:value;
...
}
</style>

-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex12</title>
<link rel="icon" href="logo1.png"/>
<style>
h1{
color:red;
}
label{
color:blue;

30 | P a g e
}
</style>
</head>
<body>
<h3>demo on internal styles</h3>
<h1>HTML</h1>
<h1>CSS</h1>
<h1>JavaScript</h1>
<label>Username</label> <br>
<label>Password</label>
</body>
</html>

<!--
external css:
html tags & css styles are defined in seperate files
used to define global styles for application

Syn: tag-name{
property:value;
property:value;
...
}
tag-name{
property:value;
property:value;
...
}
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex13</title>
<link rel="icon" href="logo1.png"/>
<link rel="stylesheet" href="mystyles.css"/> 
</head>
<body>
<h3>demo on internal styles</h3>
<h1>HTML</h1>
<h1>CSS</h1>
<h1>JavaScript</h1>
<h2>Angular</h2>
<h2>ReactJS</h2>
</body>
</html>

31 | P a g e

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex13</title>
<link rel="icon" href="logo1.png"/>
<link rel="stylesheet" href="mystyles.css"/> 
<style>
h3{
color:hotpink;
}
</style>
</head>
<body>
<h3>demo on internal styles</h3>
<h1>HTML</h1>
<h1>CSS</h1>
<h1>JavaScript</h1>
<h1 style="color:cyan;">Ajax</h1>
<h2>Angular</h2>
<h2 style="color:blue;">ReactJS</h2>
<h2>NodeJS</h2>
<h3>BottStrap</h3>
<h3>JQuery</h3>
</body>
</html>

/* example on creating external styles */

h1{
color:red;
}
h2{
color:green;
}

<!-- example on css properties

color => css prop, used to change color of text/elements (foreground color)
Syn: color:color-spe;

background-color => css prop, used to change background color of html elements
Syn: background-color:color-spe;

color specifications:
> named color
writing color name directly
ex: red green yellow

> rgb color

we can spe colors by using rgb() function

32 | P a g e
Syn: rgb(red,green,blue)
every color range should be bw 0 to 255
ex: rgb(12,45,89)

> hexadec color

base 16 ==> 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f
spe color const in the form hexadec
Syn:- #RRGGBB ex: #11bc67
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex16</title>
<link rel="icon" href="logo1.png"/>
</head>
<body style="background-color:#00ffff;">
<h3>demo on colors</h3>

<h1 style="color:red; background-color:yellow;">HTML</h1>

<h1 style="background-color:#71346e; color:#ccffff;">JavaScript</h1>

<label style="background-color:#3300ff; color:#ffff33;">Username</label>

<label style="background-color:#ff0000; color:white;">Password</label>

</body>
</html>

<!-- example on gradient colors

gradient colors => applying multiple colors shades
=> two type: linear, radial
=> "background-color" prop should replace with "background" prop

linear-gradient => applying multi colors in linear mode means either horizontally or vertically
Syn: linear-gradient(direction, color1, color2, ...)
direction => to left, to right, to top, to bottom
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex16</title>
<link rel="icon" href="logo1.png"/>
</head>
<body style="background:linear-gradient(to left, blue 40%, #ff00ff 60%);">
<h3>demo on gradient colors</h3>

33 | P a g e
<p style="background:linear-gradient(to right, #00cc00,#ffff00);">You may copy the
evaluation version of this software and documentation as you wish, and give exact copies of the
original evaluation version to anyone, and distribute the evaluation version of the software and
documentation in its unmodified form via electronic means. But you should not charge or
requesting donations for any such copies however made and from distributing the software and/or
documentation with other products without the author's written permission.</p>

<p style="background:linear-gradient(30deg, #ff0000, #33ffff);">You may copy the

</body>
</html>

<!-- example on gradient colors

radial-gradient => applying multi colors in either circle or ovel
Syn: radial-gradient(shape, color1, color2, ...)
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex17</title>
<link rel="icon" href="logo1.png"/>
</head>
<body style="background:radial-gradient(blue, #ff00ff);">
<h3>demo on gradient colors</h3>

<p style="background:radial-gradient(circle, #00cc00,#ff0000,cyan);">You may copy the

evaluation version of this software and documentation as you wish, and give exact copies of the
original evaluation version to anyone, and distribute the evaluation version of the software and
documentation in its unmodified form via electronic means. But you should not charge or
requesting donations for any such copies however made and from distributing the software and/or
documentation with other products without the author's written permission. <bR>You may copy
the evaluation version of this software and documentation as you wish, and give exact copies of the
original evaluation version to anyone, and distribute the evaluation version of the software and
documentation in its unmodified form via electronic means. But you should not charge or
requesting donations for any such copies however made and from distributing the software and/or
documentation with other products without the author's written permission.</p>
</body>
</html>

34 | P a g e
<!-- example on css borders
border => used to draw a line around html elements
Syn: border:thick style color;

border-radius => used to draw curved/rounded corner lines

Syn: border-radius:Npx; for 4
border-radius:Xpx Ypx;
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex18</title>
<link rel="icon" href="logo1.png"/>
</head>
<body>
<p style="border:3px solid red;">You may copy the evaluation version of this software and
documentation as you wish, and give exact copies of the original evaluation version to anyone, and
distribute the evaluation version of the software and documentation in its unmodified form via
electronic means.</p>

<h1 style="border:3px solid red;">You may copy the evaluation version</h1>

<h1 style="border:3px dotted red;">You may copy the evaluation version</h1>
<h1 style="border:3px dashed red;">You may copy the evaluation version</h1>
<h1 style="border:3px double red;">You may copy the evaluation version</h1>
<h1 style="border:3px inset red;">You may copy the evaluation version</h1>
<h1 style="border:3px outset red;">You may copy the evaluation version</h1>
<h1 style="border:3px groove red;">You may copy the evaluation version</h1>
<h1 style="border:3px ridge red;">You may copy the evaluation version</h1>

<img src="images/water.jpg" style="border:10px inset blue;"/>

<p style="border-radius:10px; background-color:#ff0066;">EDITPLUS IS SOLD "AS IS" AND

WITHOUT ANY WARRANTY AS TO MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE OR
ANY OTHER WARRANTIES EITHER EXPRESSED OR IMPLIED. THE AUTHOR WILL NOT BE LIABLE FOR
DATA LOSS, DAMAGES, LOSS OF PROFITS OR ANY OTHER KIND OF LOSS WHILE USING OR MISUSING
THIS SOFTWARE.</p>

<img src="images/car.jpg" width="400px" height="280px" style="border-radius:95px;"/>

<img src="images/tree.jpg" width="400px" height="280px" style="border-radius:45px 90px;"/>

<img src="images/tree.jpg" width="400px" height="400px" style="border-radius:50%; border:10px

solid red;"/>

</body>
</html>

35 | P a g e
<!-- example on css shadows
box-shadow => used to apply shadow for html elements, but shapes only
Syn: box-shadow:Xpx Ypx color;

text-shadow => used to apply shadow for html elements, but text/data only
Syn: text-shadow:Xpx Ypx color;
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex19</title>
<link rel="icon" href="logo1.png"/>
</head>
<body>
<p style="box-shadow:3px 3px; background:cyan;">You may copy the evaluation version
of this software and documentation as you wish, and give exact copies of the original evaluation
version to anyone, and distribute the evaluation version of the software and documentation in its
unmodified form via electronic means.</p>

<h1 style="box-shadow:5px -7px #0099ff; background:red;">unmodified form via

electronic means</h1>
<p align="center">
<img src="images/tree.jpg" style="box-shadow:1px 2px 4px 5px red;"
width="400px" height="400px"/>
</p>

<h1 style="text-shadow:2px 3px #ff33ff;">Siva Kumar Y</h1>

<br> <br> <bR>

</body>
</html>

36 | P a g e
</style>
</head>
<body>
<fieldset>
<h1>HTML</h1>
<h1>CSS</h1>
<h2>JavaScript</h2>
</fieldset>
<br>
<fieldset style="border:10px outset red; width:1000px;" align="center">
<legend>My Photos</legend>
<img src="images/pic1.jpg"/>
<img src="images/pic2.jpg"/>
<img src="images/pic3.jpg"/>
<img src="images/pic4.jpg"/>
<img src="images/pic5.jpg"/>
<img src="images/flower.png"/>
</fieldset>
</body>
</html>

<!--
html list tags
> ol
> ul

ol ==> ordered list

==> used to display data in points format with numbering
numbering styles: 1,2,3,.... (default)
A,B,C,....
a,b,c,....
i,ii,iii,....
I,II,III,....
==> paired tag & block level
==> ol is parent of li tag

li ==> list item

==> used to print data
==> paired tag & block level
==> li is chils of ol tag
Syn:- <ol>
<li>data</li>
<li>data</li>
...
</ol>

37 | P a g e
-->

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex21</title>
<link rel="icon" href="logo1.png"/>
</head>
<body>
<h3>demo on Ordered List</h3>
<h4>How do I make a payment using Flipkart's credit card EMI option?</h4>
<ol>
<li>Choose your credit-card issuing bank you wish to pay from</li>
<li>Select the EMI plan of your preference</li>
<li>Enter your credit card details</li>
<li>Click 'Save and Pay'</li>
</ol>
<hr>

<h4>Following products shall not be eligible for return or replacement:</h4>

<ol type="A" start="52" reversed>

<li>Damages due to misuse of product;</li>
<li>Incidental damage due to malfunctioning of product;</li>
<li>Any consumable item which has been used/installed;</li>
<li>Products with tampered or missing serial/UPC numbers;</li>
<li>Digital products/services (Flyte music downloads)</li>
<li>Jewellery which is 'made to order' on customer's reques</LI>
</ol>
<hr>
<ol style="color:#ff0066;"> 
<li>Tata Cars</li>
<ol type="i" style="color:#0000ff;"> 
<li>Tata Nexon ₹7.59 Lakh <img src="a.jpg"/></li>
<li>Tata Punch ₹5.83 Lakh</li>
<li>Tata Altroz0 ₹6.29 Lakh</li>
<li>Tata Harrier ₹14.69 Lakh</li>
</ol>
<li>Hyundai Cars</li>
<ol type="i" style="color:#0000ff;"> 
<li>Hyundai Tucson ₹26.00 Lakh</li>
<li>Hyundai Venue ₹7.53 Lakh</li>
<li>Hyundai Creta ₹10.44 Lakh</li>
<li>Hyundai Grand ₹i10 Nios 5.39 Lakh</li>
<li>Hyundai i20 ₹7.03 Lakh</li>
</ol>
</ol>
</body>
</html>

38 | P a g e
<!--ul ==> unordered list
==> used to display data in points format with bulletting style
bullet styles: disc/dot, circle, square
(default)
==> paired tag & block level
==> ul is parent of li tag

li ==> list item

==> used to print data
==> paired tag & block level
==> li is chils of ul tag
Syn:- <ul>
<li>data</li>
<li>data</li>
...
</ul>
-->

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex22</title>
<link rel="icon" href="logo1.png"/>
</head>
<body>
<h3>demo on UnOrdered List</h3>
<h4>realme 9i</h4>
<ul> 
<li>6 GB RAM | 128 GB ROM | Expandable Upto 1 TB</li>
<li>16.76 cm (6.6 inch) Full HD+ Display</li>
<li>50MP + 2MP + 2MP | 16MP Front Camera</li>
<li>5000 mAh Lithium ion Battery</li>
<li>Qualcomm Snapdragon 680 (SM6225) Processor</li>
</ul>
<hr>

<ul style="color:#ff0066;">

<li>Tata Cars</li>
<ul style="color:#0000ff;"> 
<li>Tata Nexon ₹7.59 Lakh <img src="a.jpg"/></li>
<li>Tata Punch ₹5.83 Lakh</li>
<li>Tata Altroz0 ₹6.29 Lakh</li>
<li>Tata Harrier ₹14.69 Lakh</li>
</ul>
<li>Hyundai Cars</li>
<ul style="color:#0000ff;"> 
<li>Hyundai Tucson ₹26.00 Lakh</li>
<li>Hyundai Venue ₹7.53 Lakh</li>

39 | P a g e
<li>Hyundai Creta ₹10.44 Lakh</li>
<li>Hyundai Grand ₹i10 Nios 5.39 Lakh</li>
<li>Hyundai i20 ₹7.03 Lakh</li>
</ul>
</ul>

</body>
</html>

<!-- example on css list

list-style-type ==> used to specify type of list (for both ol & ul)
Syn: list-style-type:decimal/upper-alpha/lower-alpha/lower-roman/upper-
roman/disc/circle/square/lower-greek/leading-zero-decimal/none;

list-style-image ==> used to images as a bullet 0style

Syn: list-style-image:url(filename);
-->

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex23</title>
<link rel="icon" href="logo1.png"/>
<style>
ol{
list-style-type:lower-greek;
}
</style>
</head>
<body>
<ol>
<li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>BootStrap</li>
</ol>

<ul style="list-style-image:url(images/b.webp);">
<li>Google</li> <li>Microsoft</li> <li>Oracle</li> <li>Apple</li>
<li>Intel</li>
</ul>
<hr>

<ul>
<li style="list-style-image:url(images/b1.png);">Google</li>
<li style="list-style-image:url(images/ms.png);">Microsoft</li>
<li style="list-style-image:url(images/or.png);">Oracle</li>
<li style="list-style-image:url(images/ap.png);">Apple</li>
<li style="list-style-image:url(images/in.png);">Intel</li>
</ul>

40 | P a g e
</body>
</html>

41 | P a g e
<body>
<div style="background-color:#0000ff;color:white;width:500px;text-align:center; float:left;">
<h1>Hypertext Markup Language</h1>
<h1>Cascading Style Sheets</h1>
<h1>JavaScript</h1>
<h1>BootStrap</h1>
<h1>AngularJS</h1>
</div>
<div style="background-color:#0000ff;color:white;width:300px;text-align:center;float:left;">
<h1>Servlet</h1>
<h1>ASP.Net</h1>
<h1>PHP</h1>
<h1>NodeJS</h1>
<h1>Flask</h1>
</div>
<div style="background-color:#0000ff;color:white;width:300px;text-align:center;float:left;">
<h1>Oracle</h1>
<h1>MySQL</h1>
<h1>SQL-Server</h1>
<h1>DB/2</h1>
<h1>Teradata</h1>
</div>

</body>
</html>

<!-- example on flex

flex ==> this option used to place/to display html elements either in row format or column format
Syn: display:flex;
-> def align in row
-> def no space between elements
-> def element size is auto
-> displaying elements w/o wrapping (1row)

flex-direction ==> used to change the order of elements

Syn: flex-direction:row/column/row-reverse/column-reverse;

flex-wrap ==> used to apply wraping on elements

Syn: flex-wrap:nowrap/wrap;

gap ==> used to provide space b/w elements

Syn: gap:Npx;

Note: flex option should be applyed on main/container level tags

42 | P a g e
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex26</title>
<link rel="icon" href="logo1.png"/>
<style>
span{
font-size:30px;
}
</style>
</head>
<body>
<div style="display:flex; flex-direction:row; flex-wrap:wrap; gap:20px;">
<span style="background:#ff99ff;">SivaKumar</span>
<span style="background:#ffff66;">Venkatesh</span>
<span style="background:#33ffff;">Ram</span>
<span style="background:#99ff00;">Sumera</span>
<span style="background:#ff99ff;">Pravallika</span>
<span style="background:#ffff66;">Nag</span>
<span style="background:#33ffff;">Nasim</span>
<span style="background:#99ff00;">Srikanth</span>
<span style="background:#ff99ff;">Sameer</span>
<span style="background:#ffff66;">Hemanth</span>
<span style="background:#33ffff;">Srinivas</span>
<span style="background:#99ff00;">Raushan</span>
<span style="background:#ff99ff;">ManikyaRaju</span>
<span style="background:#ffff66;">Swetha</span>
<span style="background:#33ffff;">Vikram</span>
</div>

</body>
</html>

<!-- example on grid

grid ==> this option used to display elements in rows & cols format (tabler)
Syn: display:grid;
-> def is N-rowsX1col
-> def no space
-> ele(column) size based on width container/browser

grid-template-columns ==> used to specify no.of columns & width of columns

Syn: grid-template-columns:col1 col2 col3...;
col1/2/3 => auto auto
main cont size/no.of cols => 30% 35% 30%
main cont size*30/100 => Xpx Ypx

43 | P a g e
grid-column-gap ==> used to provide space between columns only
Syn: grid-column-gap:Npx;

grid-row-gap ==> used to provide space between rows only

Syn: grid-row-gap:Npx;

grid-gap ==> used to provide space between rows & columns

Syn: grid-gap:Npx;

Note: grid option should be applyed on main/container level tags

-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex26</title>
<link rel="icon" href="logo1.png"/>
<style>
span{
font-size:30px;
}
</style>
</head>
<body>
<h3>demo on grid</h3>

<div style="display:grid; grid-template-columns:auto auto auto; grid-gap:30px 50px;
color:white;font-size:26px;">


<div style="background:#ff0000;">January</div>
<div style="background:#006600;">February</div>
<div style="background:#ff00cc;">March</div>
<div style="background:#3300ff;">April</div>
<div style="background:#ff0000;">May</div>
<div style="background:#006600;">June</div>
<div style="background:#ff00cc;">July</div>
<div style="background:#3300ff;">August</div>
<div style="background:#ff0000;">September</div>
<div style="background:#006600;">October</div>
<div style="background:#ff00cc;">November</div>
<div style="background:#3300ff;">December</div>
</div>

</body>
</html>

44 | P a g e
<!-- CSS selectors
==> selector is a group of css-properties
==> selectors are used to define style sheets for html elements
==> we can create any no.of selectors (style sheets)
types: > universal sel
> tag sel
> id sel
> class sel
> group sel
> child sel
> direct child sel
> attribute sel
> pseudo classes
> pseudo elements

universal sel ==> used to define common styles for all html elements
==> 1 universal
Syn:- *{
property:value;
property:value;
...
}

Note: selectors should be define in internal or external scope

-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex26</title>
<link rel="icon" href="logo1.png"/>
<style>
*{
color:red;
}
</style>
</head>
<body>
Hello world
<h1>Samsung</h1>
<h1>Sony</h1>
<h2>LG</h2>
<label>Username</label> <span>*</span>
<label>Password</label> <span>*</span>
</body>
</html>

45 | P a g e

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex30</title>
<link rel="icon" href="logo1.png"/>
<style>
h1{
color:red;
}
label{
color:blue;
}
</style>
</head>
<body>
<h1>Samsung</h1>
<h1>Sony</h1>
<h1>LG</h1>
<label>Username</label>
<label>Password</label>
</body>
</html>
<!-- CSS selectors
id sel ==> used to define styles for 1 instance of specific html element
==> its alternative for inline styles
==> unique style
Syn:- #id-name{
property:value;
property:value;
...
}

mapping => we have to map id selector to some html tag by using "id" attribute
<tag id="id-name">

46 | P a g e
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex31</title>
<link rel="icon" href="logo1.png"/>
<style>
#id1{
color:red;
}
#id2{
color:blue;
}
#id3{
color:green;
}
</style>
</head>
<body>
<h1 id="id1">Samsung</h1>
<h1 id="id2">Sony</h1>
<h1 id="id3">LG</h1>
<h1 id="id1">Onida</h1> 
</body>
</html>

<!-- CSS selectors

class sel ==> used to define common styles for group/multiple instances of specific html element
==> used to define common styles for group/multiple instances of multiple html elements
Syn:- .class-name{
property:value;
property:value;
...
}

mapping => we have to map class selector to some html tags by using "class" attribute
<tag class="class-name">
<tag class="class-name class-name class-name...">

-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex32</title>
<link rel="icon" href="logo1.png"/>
<style>
.c1{
color:red;
}

47 | P a g e
.c2{
color:blue;
}
</style>
</head>
<body>
<h1 class="c1">Samsung</h1>
<h1 class="c1">Sony</h1>
<h1 class="c2">LG</h1>
<h1 class="c2">Onida</h1>
<h1 class="c2">TCL</h1>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex33</title>
<link rel="icon" href="logo1.png"/>
<style>
.c1{
color:red;
}
.c2{
color:blue;
}
</style>
</head>
<body>
<h1 class="c1">Samsung</h1>
<h1 class="c1">Sony</h1>
<p class="c1">EditPlus is not free software. You may use this software for evaluation
purposes without charge for a period of 30 days. If you use this software after the 30 day evaluation
period, you must buy the license.</p>
<span class="c1">*</span>
<span class="c1">username</span> <br>

<h1 class="c2">LG</h1>
<h1 class="c2">Onida</h1>
<p class="c2">EDITPLUS IS SOLD "AS IS" AND WITHOUT ANY WARRANTY AS TO
MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE OR ANY OTHER WARRANTIES EITHER
EXPRESSED OR IMPLIED.</p>
<span class="c2">invalid user</span>
<span class="c2">invalid password</span>
</body>
</html>

48 | P a g e

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex33</title>
<link rel="icon" href="logo1.png"/>
<style>
.c1{
color:red;
}
.c2{
background-color:yellow;
text-align:justify;
}
</style>
</head>
<body>
<p class="c1 c2">EditPlus is not free software. You may use this software for evaluation
purposes without charge for a period of 30 days. If you use this software after the 30 day evaluation
period, you must buy the license.</p>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex33</title>
<link rel="icon" href="logo1.png"/>
<style>
h1{
color:white;
text-align:center;
}
.c2{
background-color:red;
}
.c3{
background-color:blue;
}
</style>
</head>
<body>
<h1 class="c2">Red Apple</h1>

49 | P a g e
<h1 class="c2">Yellow Mango</h1>
<h1 class="c3">Black Grape</h1>
<h1 class="c3">Green Banana</h1>
<h1 class="c3">Oranges</h1>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex36</title>
<link rel="icon" href="logo1.png"/>
<link rel="stylesheet" href="gridstyles.css"/>
</head>
<body>
<div id="main-container"> 
<div align="center"> 
<span id="span-id">Training <strong>Features</strong></span>
</div>
<div id="sub-container2"> 
<div class="content"> 
<img src="images/icon1.png"/>
<h2>Instructor-Led Training Sessions</h2>
<p>We believe to provide our students the Best interactive experience
as part of their learning</p>
</div>
<div class="content"> 
<img src="images/icon2.png"/>
<h2>IExpert Trainers</h2>
<p>We Constantly evaluate our trainers and only the ôBestö Provides
the Training</p>
</div>
<div class="content"> 
<img src="images/icon3.png"/>
<h2>Flexible Schedule</h2>

50 | P a g e
<p>Do not hesitate to asků because we will work according to your
calendar</p>
</div>
<div class="content"> 
<img src="images/icon4.png"/>
<h2>Industry Specific Scenarios</h2>
<p>Students are provided with all the Real-Time and Relevant
Scenarios</p>
</div>
<div class="content"> 
<img src="images/icon5.png"/>
<h2>e-Learning Sessions</h2>
<p>Online training sessions are held Live and we provide students with
the Training Videos</p>
</div>
<div class="content"> 
<img src="images/icon6.png"/>
<h2>24/7 Support</h2>
<p>No Problem@ allů!!! Your Question will be answered by Us at any
Hour of the time</p>
</div>
</div>

</body>
</html>

<!-- example inline & block options

inline ==> css option, used to display block level tags like as inline (side-by-side)
Syn: display:inline;

block ==> css option, used to display inline tags like as block level tags (line-by-line)
Syn: display:block;

51 | P a g e
<h2 style="background:yellow; display:inline;">Oracle</h2>
<hr>

<label style="background:cyan; display:block;">Google</label>
<label style="background:pink; display:block;">Microsoft</label>
<label style="background:yellow; display:block;">Oracle</label>
<hr>
<input type="radio" name="r"
onchange="document.getElementById('d').style.display='block'"/>Show   
<input type="radio" name="r"
onchange="document.getElementById('d').style.display='none'"/>Hide  
<br>

<div style="display:none;" id="d">

<h1>Google</h1>
<h1>Microsoft</h1>
<h2>Oracle</h2>
</div>
</body>
</html>

/* creating external styles for grid application (gridstyles.css) */

#span-id{
font-size:34px;
}
img{
width:50px;
height:50px;
}
#main-container{
width:80%;
margin:auto;
background:cyan;
}
#sub-container2{
text-align:center;
display:grid;
grid-template-columns:auto auto auto;
grid-gap:20px;
}
.content{
background:yellow;
border-radius:10px;
}

52 | P a g e
<!-- example on tables
table ==> used to draw a table/ used to comb rows
caption ==> used to set main heading of table
tr ==> table row, used to draw a row (comb columns => th or td)
th ==> table heading, used to column headings
td ==> table data, used to display data in columns

53 | P a g e

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex39</title>
<link rel="icon" href="logo1.png"/>
</head>
<body>
<table border="5" align="center" width="500px" style="background:cyan;color:red;">
<caption>List Of Students</caption>
<tr>
<th>Slno</th> <th>Name</th> <th>Contact no</th> <th>Course</th>
</tr>
<tr>
<td>1</td> <td>Ram</td> <td>9855098550</td> <td>C lang</td>
</tr>
<tr>
<td>2</td> <td>Sam</td> <td>9879898700</td> <td>Java</td>
</tr>
<tr>
<td>3</td> <td>Rahim</td> <td>7867867869</td> <td>HTML-
JavaScript</td>
</tr>
</table>
</body>
</html>

<!-- pseudo selectors

==> also called pseudo classes
==> predefine sel
==> : prefix
list ==> :first-child, :last-child, :nth-child, :hover, :active, :link, :visited

first-child ==> to apply some styles on 1st positioned child tag of some parent tag
Syn: tag/id/class:first-child{
......
}

last-child ==> to apply some styles on last positioned child tag of some parent tag
Syn: tag/id/class:last-child{
......
}

nth-child ==> to apply some styles on nth positioned child tag of some parent tag
Syn: tag/id/class:nth-child(POS/even/odd){
......
}

54 | P a g e
hover ==> hand over
==> applying some styles on html elements whenevere mouse enters on that tag
Syn tag/id/class:hover{
......
}
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex40</title>
<link rel="icon" href="logo1.png"/>
<style>
/* li:first-child{
color:red;
}
li:last-child{
color:red;
}
li:nth-child(2n+3){
color:red;
} */
li:hover{
color:blue;
}
</style>
</head>
<body>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li> <li>Five</li> <li>Six</li>
<li>apple</li>
</ol>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex41</title>
<link rel="icon" href="logo1.png"/>
<style>
img{
width:20px;
height:20px;

55 | P a g e
}
caption{
color:#3300ff;
text-align:left;
}
table{
width:80%;
font-size:16px;
font-weight:bold;
border-collapse:collapse;
box-shadow:1px 1px 2px 2px #ff00ff;
}
tr:nth-child(even){
background:#3300ff;
color:white;
}
tr:nth-child(odd){
background:#ff0033;
color:white;
}
tr:first-child{
background:#ffff00;
color:#3300cc;
font-size:18px;
}
tr:hover{
background:black;
color:#ccff00;
}
span{
display:inline-block;
width:20px;
height:20px;
color:black;
text-align:center;
}
.w{
background:#00ff00;
}
.l {
background:#ff9900;
}
</style>
</head>
<body>
<table align="center">
<caption>IPL 2022 Points Table</caption>
<tr>

56 | P a g e
<th>POS</th> <th>TEAM</th> <th>MATCHES</th> <th>WON</th>
<th>LOST</th> <th>PTS</th> <th>NRR</th> <th>Form</th>
</tr>
<tr>
<td>1</td> <td><img src="images/gt.png"/>Titans</td> <td>14</td>
<td>10</td> <td>4</td> <td>20</td> <td>+0.316</td>
<td> <span class="l">L</span> <span class="w">W</span> <span
class="w">W</span> <span class="w">W</span> </td>
</tr>
<tr>
<td>2</td> <td><img src="images/rr.png"/>Royals</td> <td>14</td> <td>9</td>
<td>5</td> <td>18</td> <td>+0.298</td>
</tr>
<tr>
<td>3</td> <td><img src="images/lsg.png"/>Super Giants</td> <td>14</td>
<td>9</td> <td>5</td> <td>18</td> <td>+0.251</td>
</tr>
<tr>
<td>4</td> <td><img src="images/rcb.png"/>Royal Challengers</td>
<td>14</td> <td>8</td> <td>6</td> <td>16</td> <td>-0.253</td>
</tr>
<tr>
<td>5</td> <td><img src="images/dc.png"/>Capitals</td> <td>14</td>
<td>7</td> <td>7</td> <td>14</td> <td>+0.204</td>
</tr>
<tr>
<td>6</td> <td><img src="images/pbks.png"/>Kings</td> <td>14</td>
<td>7</td> <td>7</td> <td>14</td> <td>+0.126</td>
</tr>
<tr>
<td>7</td> <td><img src="images/kkr.png"/>Knight Riders</td> <td>14</td>
<td>6</td> <td>8</td> <td>12</td> <td>+0.146</td>
</tr>
<tr>
<td>8</td> <td><img src="images/srh.png"/>Sunrisers</td> <td>14</td>
<td>6</td> <td>8</td> <td>12</td> <td>-0.379</td>
</tr>
<tr>
<td>9</td> <td><img src="images/csk.png"/>Super Kings</td> <td>14</td>
<td>4</td> <td>10</td> <td>8</td> <td>-0.203</td>
</tr>
<tr>
<td>10</td> <td><img src="images/mi.png"/>Indians</td> <td>14</td>
<td>4</td> <td>10</td> <td>8</td> <td>-0.506</td>
</tr>
</table>
</body>
</html>

57 | P a g e
<!-- example on tables
colspan ==> used to mearge multiple columns into single col
==> displaying common heading or common data for column
==> th or td

rowspan ==> used to mearge multiple rwos into single row

==> displaying common data for rows
==> tr
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex42</title>
<link rel="icon" href="logo1.png"/>
</head>
<body>
<table border>
<tr>
<th>State</th> <th>District</th> <th colspan="2">Population</th> <th>Increase</th>
</tr>
<tr>
<td rowspan="5">Andhra Pradesh</td> <td>East Godavari</td> <td>4,154,296</td>
<td>5,154,296</td> <td>5.16%</td>
</tr>
<tr>
<td>Guntur</td> <td colspan="2" align="center">4,887,813</td> <td>9.16%</td>
</tr>
<tr>
<td>Krishna</td> <td>3,517,398</td> <td>4,517,398</td> <td>7.87%</td>
</tr>
<tr>
<td>Visakhapatnam</td> <td>3,290,589</td> <td>4,290,589</td> <td>7.87%</td>
</tr>
<tr>
<td>Chittoor</td> <td>4,174,064</td> <td>4,174,064</td> <td>11.43%</td>
</tr>
<tr>
<td rowspan="3">Maharashtra</td> <td>Thane</td> <td>10,060,148</td>
<td>11,060,148</td> <td>36.43%</td>
</tr>
<tr>
<td>Pune</td> <td>8,429,408</td> <td>9,429,408</td> <td>30.37%</td>
</tr>
<tr>
<td>Nashik</td> <td>6,107,187</td> <td>6,107,187</td> <td>22.37%</td>
</tr>
</table>
</body>

58 | P a g e
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex43</title>
<link rel="icon" href="logo1.png"/>
</head>
<body>
<h3>demo on text fields</h3>

<input type="text" autofocus/>
<input type="text" maxlength="10"/>
<br>
<input type="text" size="5"/>
<br>
<input type="text" id="tb1" name="tf1"/>
<br>
<input type="text" id="tb2" name="tf2" placeholder="enter firstname"/>
<br>
<label>enter lastname</label>
<input type="text" id="tb3" name="tf3"/>
<br>
<input type="text" id="aa" name="aa" value="124"/>
<br>
<input type="text" id="bb" name="bb" value="apple" readonly/>
<br>
<input type="text" id="cc" name="c" required/>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex44</title>
<link rel="icon" href="logo1.png"/>
</head>
<body>

59 | P a g e
<h3>demo on password field</h3>
<label>enter password</label> <br>
<input type="password" id="pw" name="pw"/> <bR>
<label>enter cvv</label> <br>
<input type="password" id="cvv" name="cvv"/> <bR>
<label>enter pin</label> <br>
<input type="password" id="pin" name="pin"/> <bR>
</body>
</html>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex48</title>
<link rel="icon" href="logo1.png"/>
</head>
<body>
<h3>demo on submit button</h3>
<form>
<input type="text" name="tf1" id="tb1"/> <br>
<input type="text" name="tf2" id="tb2"/> <bR>
<input type="text" id="td3"/> <br>
<input type="submit" name="sb"/> <br>
OR
<input type="image" src="images/sb.png" name="sb"/> <br>
</form>
<input type="number" name="tf4" id="tb4"/>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex49</title>
<link rel="icon" href="logo1.png"/>
</head>

61 | P a g e
<body>
<h3>demo on form </h3>
<form id="f" action="test.jsp" method="post" autocomplete="on">
<input type="text" name="tf1"/> <bR>
<input type="text" name="tf2"/> <bR>
<input type="submit" name="sb"/> <br>
</form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Login Page</title>
<link rel="icon" href="logo1.png"/>
<link rel="stylesheet" href="loginstyles.css"/>
</head>
<body>
<div>
<h3>Login Form</h3>
<form id="f" action="login.jsp" method="post">
<p>
<label>Username</label> <span>*</span> <br>
<input type="text" id="una" class="text" name="una" required/>
</p>
<p>
<label>Password</label> <span>*</span> <br>
<input type="password" id="pwd" class="text" name="pwd" required
autocomplete="off"/>
</p>
<p>
<input id="button" type="submit" name="sb" value="Log In"/>
</p>
<hr>
<p>
<a href="newuser.html">Create new user</a> <br>
<a href="forgotpw.html">Forgotten password</a>
</p>
</form>
</div>
</body>
</html>

<!DOCTYPE html>

62 | P a g e
<html lang="en">
<head>
<title>Ex51</title>
<link rel="icon" href="logo1.png"/>
</head>
<body>
<h3>demo on checkbox field</h3>
<form id="frm1" action="test">
<label>RAM:</label> <bR>
<input type="checkbox" id="ram1" name="ram" value="12" checked/>
<label>12gb & Above</label> <br>
<input type="checkbox" id="ram2" name="ram" value="8"/>
<label>8gb</label> <br>
<input type="checkbox" id="ram3" name="ram" value="6"/>
<label>6gb</label> <br>
<input type="checkbox" id="ram4" name="ram" value="4"/>
<label>4gb</label> <br>
<input type="checkbox" id="ram5" name="ram" value="3"/>
<label>3gb</label> <br>
<input type="checkbox" id="ram6" name="ram" value="2"/>
<label>2gb & Below</label> <br>
<br>
<label>BRAND:</label> <br>
<input type="checkbox" id="brn1" name="brand" value="samsung" checked/>
<label>Samsung</label>   
<input type="checkbox" id="brn2" name="brand" value="nokia" checked/>
<label>Nokia</label>   
<input type="checkbox" id="brn3" name="brand" value="vivo" checked/>
<label>Vivo</label>   
<input type="checkbox" id="brn4" name="brand" value="one"/>
<label>OnePlus</label>   
<input type="checkbox" id="brn5" name="brand" value="mi"/>
<label>Redmi</label> <br>
<input type="checkbox" id="brn6" name="brand" value="oppo"/>
<label>Oppo</label>   
<input type="checkbox" id="brn7" name="brand" value="poco"/>
<label>Poco</label>   
<input type="checkbox" id="brn8" name="brand" value="apple"/>
<label>Apple</label>   
<input type="checkbox" id="brn9" name="brand" value="realme"/>
<label>Realme</label>   
<input type="checkbox" id="brn10" name="brand" value="moto"/>
<label>Moto</label> <br>

</body>
</html>

63 | P a g e

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex52</title>
<link rel="icon" href="logo1.png"/>
</head>
<body>
<h3>demo on radio buttons</h3>
<form id="frm1" action="test">
<label>Gender</label> <bR>
<input type="radio" id="gen1" name="gender" value="male" checked/>
<label>Male</label>   
<input type="radio" id="gen2" name="gender" value="female"/>
<label>FeMale</label>   
<input type="radio" id="gen3" name="gender" value="other"/>
<label>Others</label>
<br>
<label>Marital Status:</label> <bR>
<input type="radio" id="ms1" name="ms" value="single" checked/>
<label>Single</label>   
<input type="radio" id="ms2" name="ms" value="married"/>
<label>Married</label>   
<input type="radio" id="ms3" name="ms" value="divorced"/>
<label>Divorced</label>   
<input type="radio" id="ms4" name="ms" value="widowed"/>
<label>Widowed</label>   
<input type="radio" id="ms5" name="ms" value="nun"/>
<label>Never married</label>
<br>
<input type="submit"/>
</form>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex53</title>
<link rel="icon" href="logo1.png"/>
</head>

64 | P a g e
<body>
<h3>demo on email, url, date, time & datetime controls</h3>
<form id="frm1" action="test">
<label>enter email id</label>
<input type="email" id="mid" name="mid"/>
<br>
<label>enter url</label>
<input type="url" id="url" name="url"/>
<br>
<label>enter date</label>
<input type="date" id="d" name="d"/>
<br>
<label>date of birth</label>
<input type="date" id="dob" name="dob" min="1970-01-01" max="2022-08-03"/>
<br>
<label>time</label>
<input type="time" id="t" name="t"/>
<br>
<label>date & time</label>
<input type="datetime-local" id="dt" name="dt"/>
<br>

<button>Submit</button>
</form>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Reset Form</title>
</head>
<body>
<h1>Reset password page under construction, comming sooooooooon😕</h1>
<a href="ex50.html">Login</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>New USer</title>
</head>
<body>
<h1>new user page under construction, comming sooooooooon😕</h1>

65 | P a g e
<a href="ex50.html">Login</a>
</body>
</html>

/* creating styles for login page (loginstyles.css) */

body{
background-image:url(images/wall.webp);
background-size:cover;
}
div{
background:#ffff33;
width:220px;
height:310px;
margin:auto;
padding:25px;
border-radius:15px;
box-shadow:1px 1px 3px 3px red;
color:blue;
}
h3{
text-align:center;
}
span{
color:Red;
font-size:18px;
}
a{
text-decoration:none;
color:blue;
font-size:16px;
}
a:hover{
text-decoration:underline;
color:red;
}
#button{
width:225px;
height:30px;
font-size:22px;
background:linear-gradient(to top, red, blue);
color:white;
border:none;
border-radius:25px;
}
#button:hover{
background:linear-gradient(to bottom, red, blue);;
}
.text{
font-size:18px; }

66 | P a g e

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex54</title>
<link rel="icon" href="logo1.png"/>
</head>
<body>
<h3>demo on file control </h3>
<form id="frm1" action="test">
<input type="file" id="f1" name="f1"/> 
<br>
<input type="file" id="f2" name="f2" multiple/>
<br>
<input type="file" id="f3" name="f3" accept=".pdf,.docx"/>

<br>
<button>Upload</button>
</form>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex56</title>
<link rel="icon" href="logo1.png"/>

67 | P a g e
</head>
<body>
<h3>demo on dropdown control</h3>
<label>Mode of Training</label>
<select id="mot" name="mot">
<option value="">Select Training Type</option>
<option value="classroom">Classroom Training</option>
<option value="online">Online Training</option>
<option value="project">Project Training</option>
<option value="placement" selected>Placement Training</option>
<option value="internship">Internship</option>
<option value="weekend">Weekend Training</option>
</select>

<label>Course</label>
<select id="course" name="course">
<option value="">Select Course</option>
<option value="c">C</option>
<option value="cpp">C++</option>
<option value="cj">Corejava</option>
<option value="aj">AdvJava</option>
<option value="fsj">Full Stack Java</option>
<option value="spring">Spring</option>
<option value="asp">ASP.net</option>
<option value="c#">C#.net</option>
<option value="fsn">Full Stack .Net</option>
<option value="python">Python</option>
<option value="dj">Django</option>
<option value="html-js" selected>Html-JavaScript</option>
<option value="angular">Angular</option>
<option value="react">React</option>
<option value="node">NodeJS</option>
<option value="php">PHP</option>
<option value="xml-ws">XML/WebServices</option>
<option value="oracle">Oracle</option>
<option value="mysql">MySQL</option>
<option value="sql-server">SQL-Server</option>
<option value="db2">DB/2</option>
<option value="tera">Teradata</option>
</select>

</body>
</html>

68 | P a g e

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex57</title>
<link rel="icon" href="logo1.png"/>
</head>
<body>
<h3>demo on search box</h3>
<input type="text" list="menu"/>
<datalist id="menu">
<option>Alu 65</option>
<option>Veg. Spring Roll</option>
<option>Veg. Crispy</option>
<option>Gobi 65</option>
<option>Veg. Manchuria</option>
<option>Veg. Shangai Roll</option>
<option>Bhutan Veg.</option>
<option>Veg. Sheekh Kebab</option>
<option>Veg. Tabla Special Roll</option>
<option>Paneer 65</option>
<option>Baby Corn 65</option>
<option value="Chicken Spring Rolls"/>
<option value="Chicken Drumsticks"/>
<option value="Bhutan Chicken"/>
<option value="Chicken 65"/>
<option value="Chicken Manchuria"/>
<option value="Chicken Majestic"/>
<option value="Szechuan Chicken"/>
<option value="Chicken Roll"/>
<option value="Chicken">Chicken Fry</option>
</datalist>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex58</title>
<link rel="icon" href="logo1.png"/>
</head>
<body>

69 | P a g e
<details>
<summary>Colors</summary>
<ul>
<li>Red</li> <li>Green</li> <li>Blue</li> <li>Yellow</li>
</ul>
</details>
<br>
<details>
<summary>Login</summary>
<div>
<h3>Login Form</h3>
<form id="f" action="login.jsp" method="post">
<p>
<label>Username</label> <span>*</span> <br>
<input type="text" id="una" class="text" name="una" required/>
</p>
<p>
<label>Password</label> <span>*</span> <br>
<input type="password" id="pwd" class="text" name="pwd" required
autocomplete="off"/>
</p>
<p>
<input id="button" type="submit" name="sb" value="Log In"/>
</p>
<hr>
<p>
<a href="newuser.html">Create new user</a> <br>
<a href="forgotpw.html">Forgotten password</a>
</p>
</form>
</div>

</body>
</html>

70 | P a g e
<p>EDITPLUS IS SOLD "AS IS" AND <mark>WITHOUT ANY WARRANTY</mark> AS TO
MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE OR ANY OTHER WARRANTIES EITHER
EXPRESSED OR IMPLIED. THE <mark>AUTHOR WILL NOT BE LIABLE</mark> FOR DATA LOSS,
DAMAGES, LOSS OF PROFITS OR ANY OTHER KIND OF LOSS WHILE USING OR MISUSING THIS
SOFTWARE.</p>
<bdi>apples</bdi> <bdi>selppa</bdi>
<br>
200+
<img src="icon1.png"/>
<img src="icon2.png"/>
<img src="icon3.png"/>

</body>
</html>

<audio controls src="files/[iSongs.info] 01 - Bullet.mp3">audio format not supported ur

browser</audio>
<br>
<audio controls src="files/[iSongs.info] 01 - Bullet.mp3" autoplay muted loop></audio>

</body>
</html>

71 | P a g e
<video controls src="files/Cartoons.mp4" width="600px" height="400px">video format not
supported</video>
<video controls src="files/Beast.mp4" muted autoplay loop></video>
<video controls src="files/Beast.mp4" poster="images/b.webp"></video>

</body>
</html>

72 | P a g e
place here sub content, promos
</aside>
</main>
<footer>
place here contact info, emailid, sm links, terms & conditions...
</footer>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ex64</title>
<link rel="icon" href="logo.png"/>

<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<meta name="Keywords" content="vivo, samsung, mi, apple, moto, galaxy, iphone"/>
<meta name='description' content='News, Reviews, Prices, Questions & Expert Advice on
Mobile Phones, Laptops, TVs, Appliances, Cameras and Other Gadgets.' />

</head>
<body>
<h3>demo on meta</h3>
<h4>page refreshing automatically for every 5sec once</h4>
<script>
document.write( Math.random() +"<br>" );
document.write( new Date().toLocaleTimeString() );
</script>
</body>
</html>

73 | P a g e
</head>
<body id="b">
<h3>auto redirectig page</h3>
<h3>plz wait 10sec, we are flying to another page</h3>
<script>
let c = "#"+parseInt(Math.random()*1000000);
document.getElementById(`b`).style.backgroundColor=c;
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>C1</title>
<meta charset="UTF-8"/>
<style>
[height]{
color:red;
}
[width="200px"]{
color:blue;
}
input[type="text"]{
color:green;
}
input[type="password"]{
color:cyan;
}
</style>
</head>
<body>
<h1>HTML</h1>
<h1 height="40px">CSS</h1>
<h1 height="30px">JavaScript</h1>
<h2 height="40px">BootStrap</h2>
<h3 height="20px">Angular</h3>

74 | P a g e
<h1 width="100px">Apple</h1>
<h1 width="200px">Mango</h1>
<h2 width="200px">Orange</h2>
<h3 width="200px">Grape</h3>

<input type="text"/> <br>

<br> <bR> <br> <br> <bR> <br>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>C1</title>
<meta charset="UTF-8"/>
<style>
label,span{
color:red;
}
h1,h2,h3,h4,h5,h6{
color:blue;
}
</style>
</head>
<body>
<label>Username</label> <span>*</span><bR>
<label>Password</label> <span>*</span><bR>

<h1>HTML</h1>
<h1>CSS</h1>
<h2>JavaScript</h2>
<h2>BootStrap</h2>
<h3>Angular</h3>
<h4>Apple</h4>
<h5>Mango</h5>

75 | P a g e
<h6>Orange</h6>

<br> <bR> <br> <br> <bR> <br>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>C1</title>
<meta charset="UTF-8"/>
<style>
nav a{
color:red;
text-decoration:none;
}
footer a{
color:green;
text-decoration:none;
}
</style>
</head>
<body>
<a href="aa.html">goto AA</a> <bR>
<a href="bb.html">goto BB</a> <bR>
<nav>
<a href="h.html">Home</a> <bR>
<a href="s.html">Services</a> <bR>
<a href="a.html">About Us</a> <bR>
</nav>
<footer>
<div>
<a href="f.html">facebook</a> <bR>
<a href="y.html">youbute</a> <bR>
<a href="in.html">instagram</a> <bR>

76 | P a g e
</div>
</footer>

<br> <bR> <br> <br> <bR> <br>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>C1</title>
<meta charset="UTF-8"/>
<style>
nav > a{
color:red;
text-decoration:none;
}
footer > a{
color:green;
text-decoration:none;
}
</style>
</head>
<body>
<a href="aa.html">goto AA</a> <bR>
<a href="bb.html">goto BB</a> <bR>
<nav>
<a href="h.html">Home</a> <bR>
<a href="s.html">Services</a> <bR>
<a href="a.html">About Us</a> <bR>
</nav>
<footer>
<div>
<a href="f.html">facebook</a> <bR>
<a href="y.html">youbute</a> <bR>

77 | P a g e
<a href="in.html">instagram</a> <bR>
</div>
</footer>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>C5</title>
<meta charset="UTF-8"/>
<style>
h1::before{
content:"@ ";
}
h1::after{
content:url(images/s.png);
}
p::first-letter{
font-size:32px;
color:#3300ff;
background:#ffff00;
}
p::first-line{
color:#ff0000;
}
[type="text"]::placeholder{
color:#00ffff;
}
[type="password"]::placeholder{
color:#ff99ff;
}
ol,ul{
color:#009900;
}
::marker{
color:#cc00ff;
font-size:20px;

78 | P a g e
}
::selection{
background:black;
color:#ffff00;

}
</style>
</head>
<body>
<ol>
<li>One</li> <li>Two</li> <li>Three</li>
</ol>
<ul>
<li>One</li> <li>Two</li> <li>Three</li>
</ul>

<input type="text" placeholder="enter userid"/> <br>

<h1>Microsoft</h1>
<h1>Google</h1>
<h1>Oracle</h1>
<h2>SAP</h2>
<p>EDITPLUS IS SOLD "AS IS" AND WITHOUT ANY WARRANTY AS TO MERCHANTABILITY
OR FITNESS FOR A PARTICULAR PURPOSE OR ANY OTHER WARRANTIES EITHER EXPRESSED OR
IMPLIED. THE AUTHOR WILL NOT BE LIABLE FOR DATA LOSS, DAMAGES, LOSS OF PROFITS OR ANY
OTHER KIND OF LOSS WHILE USING OR MISUSING THIS SOFTWARE.</p>

<p>You may copy the evaluation version of this software and documentation as you wish,
and give exact copies of the original evaluation version to anyone, and distribute the evaluation
version of the software and documentation in its unmodified form via electronic means. But you
should not charge or requesting donations for any such copies however made and from distributing
the software and/or documentation with other products without the author's written
permission.</p>

</body>
</html>

<!--
pseudo elements:
before, after, first-letter, first-line, selection, marker,
placeholder
Syn:- selector::pseudo-ele{
prop:value;
prop:value;
...
}

79 | P a g e
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>C6</title>
<meta charset="UTF-8"/>
<style>
*{
margin:30px;
}
h1{
color:red;
}
.c{
background:yellow;
}
</style>
</head>
<body>
<h1 class="c">Microsoft</h1>
<h1>Google</h1>
<h2>Oracle</h2>

</body>
</html>

h1, #id, .c, [width], :hover, ::before {...}

80 | P a g e
</style>
</head>
<body>
<h1 class="c">Microsoft</h1>
<h1>Google</h1>
<h2>Oracle</h2>

</body>
</html>

<!--
pseudo elements:
before, after, first-letter, first-line, selection, marker,
placeholder
Syn:- selector::pseudo-ele{
prop:value;
prop:value;
...
}

css preferenace:
> default
> universal
> tag
> dir child
> child
> class
> attribute
> id
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>C8</title>
<meta charset="UTF-8"/>
<style>
h1{
background:#ff0033;
}
.c{
background:#ff00ff;
}
#i{
background:#006600;
}
div h1{
background:#3300ff;

81 | P a g e
}

</style>
</head>
<body style="color:white;">
<h1>Microsoft</h1>
<div>
<h1 id="i" class="c">Siva Kumar Y</h1>
</div>

</body>
</html>

82 | P a g e
JAVA SCRIPT
What is Scripting?
A script is program code that doesn’t need pre-processing (e.g. compiling) before being run. In the
context of a Web browser, scripting usually refers to program code written in JavaScript that is
executed by the browser when a page is loaded, or in response to an event triggered by the user.

Scripting can make Web pages more dynamic. For example, without reloading a new version of a
page it may allow modifications to the content of that page, or allow content to be added to or sent
from that page. The former has been called DHTML (Dynamic HTML), and the latter AJAX
(Asynchronous JavaScript and XML).

API lib predefine programs

What scripting interfaces are available?
The most basic scripting interface developed at W3C is the DOM, the Document Object Model
which allows programs and scripts todynamically access and updates the content, structure and
style of documents. DOM specifications form the core of DHTML.

Modifications of the content using the DOM by the user and by scripts trigger events that
developers can make use of to build rich user interfaces.

Types of script:Scripts are classified into the following two types.

 Client-side script
 Server-side script

Client-sidescript: These scripts are getting executed within the web Browser (client). Here we don’t
need any software. These scripts are used for client-side validations (data verification & data
validations)
Ex: JavaScript, VBScript, typescript, etc…

Server-side script: A script which executes in server machine with support of the web-server/app-
server software’s like IIS(Internet information services), Tomcat, JBOSS, etc.These scripts are used
for server-sidevalidations (authentication & authorization).
Ex:php, jsp, asp.net, nodeJS, cgi, perletc…

What are the differences between script and language?

Script Language
Weakly or loosely typed programming Strong or closely typed programming and HW
And lightweight
Easy to understand compare to PL Complex to understand compare to Script
External libraries not required Required
No special compiler required Special compiler mandatory
Client side validation Server/client side validation/verifications
Ex: JavaScript, VBScript,TypeScript, Perl, Shell etc. Ex: C, CPP, vb.net, Java etc.

83 | P a g e
JavaScript Introduction

 In 1995, JavaScript was created by a Netscape developer named “Brendan Eich”. First, it was
called Mocha. Later, it was renamed LiveScript.

 Netscape first introduced a JavaScript interpreter in Navigator2.

Mocha(1995) LiveScript JavaScript(1997)

Why is it called JavaScript?

When JavaScript was created, it initially had another name: “LiveScript”. But Java was very
popular at that time, so it was decided that positioning a new language as a “younger brother”
of Java would help.
But as it evolved, JavaScript became a fully independent language with its own specification
called ECMAScript, and now it has no relation to Java at all.
ECMAScript/ES JS
 Later JavaScript became an ECMA(European Computer Manufacturers AssociationScript)
(ES)standard in 1997. ECMAScript is the official name of the language.
 JavaScript is implementation of ES; ES is the specification of JavaScript. RBI SBI,
HDFC,ICICI customer
ES JS Programmer

 JavaScript is originally it’s not programming language.

AJAX

JQuery
JSON
Angular
NodeJS
ReactJS
These tech & frameworks using JavaScript as their PL
A=10
A=10.56
A=”ram”
 JavaScript is a Speed, light weight, Interoperability, Extended Functionality, dynamic, loosely
typed, single threaded, free ware and open-source.

 JavaScript is an object-based or prototype-based programming.

It’s not OOPS

 JavaScript is client-side (browser-side) programming. That means it executes on the browser.

 It can also be used in server-side by using NodeJS

84 | P a g e
 JavaScript Translator is responsible to translate the JavaScript code which is embedded in
browser.
Parser’s:
Html code (high) => html parser => machine code
Css code (high) =>css parser => machine code
JS code (high) =>js parser => machine code
Every browser they have own JS engine:
V8 Chrome and Opera.
SpiderMonkey Firefox.
Chakra IE
JavaScriptCore, and SquirrelFish Safari
V8 Edge

 JavaScript is “interpreter-based” programming, means the code will be converted into machine
language line-by-line. JavaScript interpreter is already embedded in Browsers.

 JavaScript is a case sensitive programme.

 To work with JavaScript, we don’t need to install any software.

Why we Use JavaScript?

Using HTML/CSS, we can only design a web page but it’s not supported to perform logical
operations such as calculations, decision making and repetitive tasks, dynamically displaying output,
reading inputs from the user, and updating content on webpage at client side. Hence to perform
these entire tasks at client side we need to use JavaScript.

Where it is used?
There are so many web applications running on the web that are using JavaScript like Google,
Facebook,twitter, amazon, YouTube etc.
It is used to create interactive websites. It is mainly used for:
1. Client-side verifications and validation
2. Dynamic drop-down menus
3. Displaying date and time
4. Build forms that respond to user input without accessing a server.
5. Displaying popup windows and dialog boxes (like alert dialog box, confirm dialog box and
prompt dialog box)
6. Manipulate HTML "layers" including hiding, moving, and allowing the user to drag them around
a browser window.
etc...

Limitations of JavaScript

Client-SideJavaScript have some limitations which are given below;

1. Client-side JavaScript does not allow reading and writing of files.

2. It cannot be used for networking applications.
3. It doesn't have any multithreading or multiprocessing capabilities.

85 | P a g e
4. it doesn't support db connections.

JavaScript Versions
Version Officeal Name Release Date
1 ECMAScript 1 June-1997

2 ECMAScript 2 June-1998

3 ECMAScript 3 Dec-1998

4 ECMAScript 4 2004 (not released)

5 ECMAScript 5 Dec-2009

5.1 ECMAScript 5.1 June-2011

6 ECMAScript June-2015

7 ECMAScript June-2016

8 ECMAScript June-2017

how many ways to imp js?

JS we can develop/imp in 3 ways, but in 4place.
those are:
 inline scripting
 internal scripting
 external scripting

> inline scripting

inline script nothing but writing code within the tag, by using event/dynamic attributes
for this we need tag & event attribute
onclick, onsubmit, onfocus, oninput, onload, etc..
Syn: <tag attributes event="js code" event=”js” event=”js”>

>internal scripting
Internal script is nothing but html code and javascript code both are placed in the same file, but
not in same line.
Internal script must be implemented inside <script> tag, <script> is a paired tag.
> scripting in head sec
head is first executed part of html, hence javascript is also executes first.
<head>
<script type="text/javascript”>
JS code
</script>
86 | P a g e
</head>
> scripting in body sec
body level script is executed after head section
<body>
<script type="text/javascript”>
JS code
</script>
</body>

> external scripting

> external script is nothing but html code and javascript code designed in separate files
>type js code in sep file and save that file with "filename.js"
>re-use
>while writing external script don’t use <script> tag and event attribute.

fun-name();

External file Syn:

function fun-name()

{
Steps
}
OR

Steps
}

Note: external file should be saved with an extension “.js”

>we
we canaccess external script by using <script> tag from html.
> from either head nor body section

Syn:
<script src="filename1.js"></script>

87 | P a g e
Comments in JavaScript
Comment is nothing but it is a statement which is not display on browser window. It is useful to
understand which code is written for what purpose.
Comments are useful in every programming language to deliver message. It is used to add
information about the code, warnings or suggestions so that the end user or other developer can
easily interpret the code.
Types of Comments:
There are two types
es of comments are in JavaScript
1. Single-line Comment ex: //comment

2. Multi-line Comment ex: /* comments */

Single-line Comment
It is represented by double forward slashes //. It can be used before any statement.
Example:
<script>
// It is single line comment
document.write("Hello Javascript");
</script>

Multi-line Comment
It can be used to add single as well as multi line comments.
It is represented by forward slash / with asterisk * then asterisk with forward slash.
Example:
<script>
/* It is multi line comment.
It will not be displayed */
88 | P a g e
document.write("Javascript multiline comment");
</script>

JS lib keyword/reserve words, operators, functions/methods, classes, objects

DOM => JS’s API

 Application Programming Interface
 It’s an interface between JS and webpage
 API is collection of predefine classes, and class is group properties & methods/functions
 For working with any class we need an object
 Dom class’s related objects are created by browser, @time of webpage loading or
opening.
Ex: window, document, console, location, cookie, history, body, head are
predefine/implicit objects

“window” is base object for all JS objects.

“window” object used for interacting with browser window to perform some
operations.

“document” is the sub object of window.

“document” object used for interacting with web page/web document to perform
some operations.
Syn: window.document or document

“console” is the sub object of window.

“console” object used for interacting with browser console to perform some
operations.
Syn: window.console or console

write() method: The write() method writes HTML expressions or javascript code to a document
without line breaking.
Syn: document.write(val1, val2, val3, ….);
document.write(exp1 + exp2 + exp3 + ...);

writeln() method: The writeln() method writes HTML expressions or javascript code to a document
with line breaking.
Syn: document.writeln(exp1,exp2,exp3, ...);
document.writeln(exp1 + exp2 + exp3 + ...);

log() method: The log() method writes HTML expressions or javascript code on browser’s console
(press F12) with line break.
Syn: console.log(exp1,exp2,exp3, ...);
console.log(exp1 + exp2 + exp3 + ...);

89 | P a g e
Example:
<html>
<head>
<script type='text/javascript'>
document.write("<h1>hello world!</h1><p> have a nice day ! </p>");
</script>
</head>
</html>

Can we use HTML tags in write() method?

Yes, we can use tags in write().

writeln() method: The writeln() method is similar to the write method, with the addition of writing a
newline character after each statement.
Syn:document.writeln(exp1,exp2,exp3 ...)

Example:
<!DOCTYPE html>
<html>
<body>
<pre>
<script type='text/javascript'>
document.writeln("Welcome to JS");
document.writeln("Welcome to JS");
</script>
</pre>
</head>
</html>

Note: You have to place writeln() in pre tag to see difference between write() and writeln().
Writeln() actually produces the output in new line (\n) but browser will not detect the \n as
linebreak, hence to show it correctly and keep format as it is we will use pre tag.

Example:
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
document.write("<h1 style='color:blue; font-size:30px; font-family:tahoma'>
Welcome To JS</h1>");
document.write("<font color='green' size='16px' face='Arial'> Welcome To
JS</font>");
</script>
</head>
<body>

90 | P a g e
</body>
</html>

Note:
 the above type of code is known as DHTML
 In JavaScript a string should be in single or double quotes.
 Double quotes inside using single quotes are valid, single quotes inside using double quotes
valid.

Example
<!DOCTYPE html>
<html>
<body>
<script>
document.write("JavaScript is client side script");
document.write("<br>");
document.write("JavScript is 'ECMA' Implementation<br>");
document.write('JavScript released by NetScape<br>');
document.write('NetScape release "Mocha"<br>');
//document.write('NetScape release 'Mocha'<br>'); Error
//document.write("NetScape release "Mocha"<br>"); Error
</script>
</body>
</html>

JavaScript string with escape sequences: An escape character is consisting of backslash "/" symbol
with an alphabet. The following are frequently using escape characters.
1. \n : inserts a new line
2. \t : inserts a tab space
3. \r : carriage return
4. \b : backspace
5. \f : form feed
6. \' : single quote
7. \”: double quote
8. \\ : Backslash

Difference between window.document.write&document.write:

There is no difference between these two statements,window is highest level object. It contains
child objects & their methods
child object/sub object
|
window.document.write();
| | |
browser page method

document.write();

91 | P a g e
| |
page method

browser is default object, master object, super object.

write() is a method related to document object

ex:
<head>
<script type='text/javascript'>
window.document.write("livescript is javascript");
document.write("<br>");
document.write('livescript is javascript');
</script>
</head>

JavaScript semicolon(;):
In javascript every statements ends with semicolon(;). It is an optional notation.

ex:
<head>
<script type='text/javascript'>
document.write=("livescript is javascript");
</script>
</head>

ex:
<head>
<script type='text/javascript'>
document.write("javascript");
document.write('livescript');
document.write('livescript is javascript');
</script>
</head>

Note:
1) In the above script semicolon(;) is mandatory.
2) It is a good programming practice to use the semicolon.

JavaScript place in HTML file:

There is a flexibility given to include javascript code any where in a html document but the follow
ways are most prefered in the live environment.
 script in <head>-----</head> section
 script in <body>-----</body> section
 script in <body>-----</body>&<head>-----</head> section
 script in & external file & then include in <head>-----</head> section.

ex:
<head>

92 | P a g e
<script type='text/javascript'>
document.write("welcome to head section");
</script>
</head>
<body>
<script language="javascript">
document.write("welcome to the body section");
</script>
</body>

External javascript:
Javascript can also be placed in a external files,these files contains javascript code. This code we can
apply on different webpages. External javascript files extensions is .js

Note:
1) External script cann't contain the <script></script> tags.
2) To use an external script,point to the .js file in the "src" attribute of the <script> tag.

how to run external js:

Creating javascript file:
document.write("<h1 style='color:blue'> welcome to external javascript....!</h1>");
document.write("<br/>");
document.write("thank u----");

save with example.js extension @any location.

creating html files:

<html>
<head>
<script type="text/javascript" src="example.js"></script>
</head>
<body>
</body>
</html>
save with .html or .htm extensions.
Javascript code: It is a sequence of javascript statements, each statement is executed by the
browser in the sequence they are returned.
<head>
<script type="text/javascript">
document.write("<p>This is paragraph</p>") //js code
</script>
</head>

Javascript blocks: JavaScript sentences can be group together in blocks. Blocks starts with a left curly
bracket { and end with a right curly bracket }. The purpose of your block is to make the sequence of
statement excute together.
<head>
<script type="text/javascript">
{

93 | P a g e
document.write(This is a block);
}
</script>
</head>

JS Naming Conventions

JS => mixed case

 Naming conventions means where we have to use uppercase and where we have to use
lowercase
 While working/using predefines items we must follow these guide lines.

class name TitleCase/Capitalilze case

ex: SimlaGreenApple, YellowMango

fun/method 1st word is lowercase, rest of words(2-n)

n) are TitleCase/Capitalilze
ex: write(), log(), indexOf(), lastIndexOf()

variables 1st word is lowercase, rest of words(2

words(2-n)
n) are TitleCase/Capitalilze
Ex: apple, simlaGreenApple

Constants total name in uppercase

Ex: SIMLAGREENAPPLE,
EENAPPLE, PI, EXP

Keywords/reserved words total name in lowercase

Ex: if, else, switch, var, let, const, for, new, this, ...

JavaScript Reserved Words:

The following are reserved words in JavaScript. They cannot be used as JavaScript variables,
functions, methods, loop labels, or any object names.

abstract, boolean, break, byte,, case, catch, char, class, const,, continue, debugger, default, delete,
do, double,, else, enum, export, extends, false, final, finally, float,, for, function, goto, if, implements,
imp
import, instanceof, int,, interface, let, long,, native, new, null, package, private, protected, public,
return, short,, static, super, switch, synchronized, this, throw, throws, transient, true, try, typeof,
var,, void, volatile, while, with. 59
working with Variables

variable is a reference name of a memory block.

variables are created or stored in RAM(stack area).
variables are used to store/to hold a value for reuse purpose and automatically substitute values in
steps.

Java script did not provide any data types for declaring variables and a variable in javascript can
store any type of value. Hence java script is loosely typed programme.

We can use a variable directly without declaring it in javascript, it’s called dynamic
dynam programming.

how to declare a variable?

94 | P a g e
we can define vars in JS Three ways, those are:
> by using "var" keyword
Syn: var varname; declaration
OR
var varname=value; initialization

> by using "let" keyword (since js6) ES6

Syn: let varname;
OR
let varname=value; init

> by using "const" keyword (since js6) ES6

Syn: const varname=value; initialization

Rules to declaring a variable

 Name should start with an alphabet (a to z or A to Z), underscore( _ ), or dollar($ ) sign.
 After first character we can use digits (0 to 9).
 variables are case sensitive. for example,a and A are different variables.
 space is not allowed, means name should be single word.
 special chars (symbols) are not allowed in name, except _ and $.
 keywords we can't use as a name.

for example:
var eid; var 1a;
var total; var a1;
var _b; var book id;
var a@; var studentid;
var #b; var case;
var book_id; var a$1

where do we declare variables?

We can declare variables in open script tag, with in function or with in block.

Var Let Const

We use in function or global scope We can in function scope We can in function scope
Block scope not supported Block scope supports Block scope supports
Re assigning value Re assigning value Not supports re assigning value
Re declaration of variable supported Not supports Not supports
Since JS1 Since JS6 Since JS6
It supports Hoisting Not supports Not Supports

Example of Variable declaration in JavaScript

 Local Variable
 Outer/Global Variable

Local Variable

A variable which is declared inside block or function is called local variable. It is accessible within the
function or block only.

For example:

Global Variable
var is declared with in script tag but outside function & block those are global variables.
these global variables are accessible from anywhere in program.
declared with window object is known as global variable.

For example:
<script>
var value=10;//global variable
function a()
{
alert(value);
}
function b()
{
alert(value);
}
</script>

Declaring global variable through window object

The best way to declare global variable in javascript is through the window object.
Syntax
96 | P a g e
window.var=value;
Now it can be declared inside any function and can be accessed from any function.

For example:
function m()
{
window.value=200; //declaring global variable by window object
}
function n()
{
alert(window.value); //accessing global variable from other function
}

In JS we can declare the variables the following two ways.

1. Implicit declaration
2. Explicit declaration

Implicit declaration:: In every scripting it is the default declaration.

ex: y=100;

Explicit declaration:: All programming languages default declaration

ex: int a=5;

Scripts are able to support implicit declaration but languages are only explicit declaration.
Note:: Explicit declaration is always recommended as a good programming practice.

Javascript datatypes:
In javascript data types are classified into the follow
following two cat.
1. Primitive datatypes
2. non-primitive datatypes

primitive data types:: Primitive datatypes allow to store data directly.

These datatypes allow us to store only 1 value @time.
These are popularly known as nonnon-reference
Javascript has a five primitive data types.
1. string Ex: "siva" 'apples123' `Dno: 1-2-3/1a`
2. number Ex: 10 -25 100.56 -3.7 988098009800
3. boolean Ex: true false
4. undefined Ex: value not assigned or datatype is not identified
5. object Ex: null { }
Non-primitive datatypes: Non-primitive
primitive datatypes allow to store reference(address) of data.
These datatypes allow us to store more than 1 value @time.
These are popularly known as reference or composite data types.
Ex: class, array

97 | P a g e
var st1 = new String();

Primitive data types:

Strings:: In javascript a String should be within a singleordouble quote.
var name="nit";
var name='nit';
Number:: Javascript has only one type of numbers,they can be return with or without decimals
var x1=34.00; with decimals
var x2=34 without decimals

Boolean:: It is used to represent a Boolean value,These are as follows.

var x = true //equivalent to true, yes or on
var y = false //equivalent to false, no or off

undefined:: It is a value of variable with no val

value.
var x; //now x is undefined

Null:: variables can be emptied by setting the value to null.

ex: var x=null; //now x is null

typeof
typeof is predefine function, and it's used to identify datatype of a variable or value.
Syn: typeof var-name
typeof value

Dynamic data types:: Javascript has dynamic types.This means that the same variable can be used as
different types.
ex:
var x; //now x is undefined
var x=5; // now x is a number
var x="ram"; // now x is a String

<!DOCTYPE html>
<html lang="en">
<head>
98 | P a g e
<title>JS Ex13</title>
</head>
<body>
<h1>Demo on difference between var and let</h1>
<script>
var a=10; //define
document.write(a +"<br>");
var a=20.56; //re-defination
document.write(a +"<br>");
var a="apple"; //re-defination
document.write(a +"<br>");

let n=101; //define

document.write(n +"<br>");
//let n=202; re-defination ==> Error: Identifier 'n' has already been declared
n=202; //changing value
document.write(n +"<br>");
</script>
</body>
</html>

Non-primitive data types: When a variable is declared with the keyword new, the variable is an
object.
new is used for dynamic memory allocations (for creating objectsand arrays).
these datatypes are also called as reference datatype.
Ex:
var st=newString();
var x=newNumber();
let y=newBoolean();
let a = [ ];
here LHS are reference variables, and RHS are objects.
reference variables are storing address of dynamic memory (object)

JavaScript operators
operator is a symbol (special char) and it is used to perform certain operation(task).
every operator is a symbol, but every symbol is not operator.
every operator requires some values, those are called as operands.
Ex:

Expression
Its combination of one operator and some operands

Cat:
99 | P a g e
 Unary it req one operand
 Binary it req two operands
 Arithmetic
 Relational
 Logical
 Bitwise
 Assignment
 Concatenation
Ternary it req three operands

Arithmetic operators: using these operators we can perform the basic math calculations.
Ope are + - * / % **

operators are:
operator Description example
+ addition j+12
- subtraction j-22
* multiplication j*7
/ division j/3
% modulus j%6
** power x**y xy

relational operators: these operators are used to provide comparison between two operands. these
are boolean operators (true/false).
Operators are: > < >= <= == != === !==

operator Description example

== is equal to j==42
!= is not equal to j!=17
> is greater than j>0
< is less than j<100
>= is greater than or equal to j>=23
<= is less than or equal to j<=13
=== a===b
!== a!==b

Logical operators: these operators are used to perform multiple comparisons @time. these are
boolean operators (true/false).
Operators are: && || !

operator Description example

&& And j==1 && k==2
|| OR j<100 || j>0
! Not !(j==k)

100 | P a g e
And Or Not
Cond1 Cond2 Result Cond1 Cond2 Result Cond Result
T T T T TT T F
T F F T F T F T
F T F F T T
F F F F FF

assignment operators: these operators are used to store/assign value to memory block
(var/array/objects...)
Operator is =
Shorthand/compound operator is a combination of assignment and arith/bitwise.
Operators are: += -= /= *= **= &= |= >>= <<= ...
Total=total+price total+=price

operator Description example

= store a=10
shorthand:
+= addition & assigna+=10
-= subtract & assign a-=5
*= product & assigna*=20
/= division & assign a/=7
%= modulus & assign a%=6

Concatenation operator: this operator is used to concatenation multiple strings then formed into a
single string. One operand should be string to perform concatenation. Resultant value comes in
string format.
Operator is +

Bitwise operators & | ~ ^ >> <<

Ex: "rama"+"rao” ==> "ramarao"

"mangos"+123 ==> "mangos123"
true+”siva” “truesiva”

unary operators: these operators are used to increment or to decrement a value. operators are ++
and --
++ (increment) ==> it adding 1 to an existing value Ex: a++ or ++a
-- (decrement) ==> it subtracting 1 from an existing value Ex: a-- or --a

101 | P a g e
ternary operator: this operator is used to decision making operation. operator is ?:, this operator
also called as conditional operator.
(condition) ? statement1 : statement2

Operator Precedence Table:

The operator precedence table can help one know the precedence of an operator relative to other
operators.

Precedence Operator Description Associativity

1 () Grouping –
2 . Member left to right
[] Member left to right obj[“func”]
new Create – new Date()
() Function call left to right func()
3 ++ Postfix increment –
-- Postfix decrement – i–
4 ++ Prefix increment right to left
— Prefix decrement –i
! Logical NOT !TRUE
typeof Type typeof a
5 ** Exponentiation right to left
6 * Multiplication left to right
/ Division 18/9
% Remainder 4%2
7 + Addition left to right
– Subtraction 4-2
8 << Left shift left to right
>> Right shift y>>2
>>> Unsigned Right shift y>>>2
9 < Less than left to right
<= Less than or equal 3<=4
> Greater than 4>3
>= Greater than or equal 4>=3
in In “PI” in MATH
instanceof Instance of A instanceof B
10 == Equality left to right
!= Inequality x!=y
=== Strictly equal x===y
!== Strictly unequal x!==y
11 & Bitwise AND left to right
12 ^ Bitwise XOR left to right
13 | Bitwise OR left to right
14 && Logical AND left to right
15 || Logical OR left to right
16 ?: Conditional right to left
17 Assignment right to left
102 | P a g e
+= x+=3
-= x-=3
*= x*=3
/= x/=3
%= x%=3
<<= x<<=2
>>= x>>=2
>>>= x>>>=2
&= x&=y
^= x^=y
|= x|=y
18 , Comma left to right

JavaScript dialog boxes: JavaScript has 3 kinds of dialog boxes.

1. Alert box
2. Confirm box
3. Prompt box

Alert box: An alert box is often used if you want to make sure information comes through the user.
When an alert box pops up, the user will have to click "ok" to proceed.
Syn: window.alert("message"/expr);
ex:
<body>
<script type='text/javascript'>
alert("invalid entry");
</script>
</body>
Note:html tags we can’t use in alert() function.

How to display multiple line on the alert:

We cann't the use <br> tag here because alert is a method of the windows object, that can’t be
interpret html tag. Instead, we use the new line escape character.
<head>
<script type="text/javascript">
- alert("javascript \n is\n a\n client-side \n programming \n language");
</script>
</head>

ex: Alert with functions

<head>
<script type='text/javascript'>
functionmyAlert(){
alert("javascript \n is \n a \n client-side \n programming \n language");
alert("1 \n \t 2 \n \t \t3");
}
</script>
103 | P a g e
</head>
<body>
<p> click the button to display alert messages ....</p>
<button onclick="myAlert()"> click me</button>
</body>

confirm box:
It is often used, if you want the user to verify and accept something. When a confirm box pops up,
the user will have to click either "ok" or "cancel" to proceed. If the user clicks "ok" the box returns
“true”. If the user clicks "cancel" the box returns "false".
Syntax: window.confirm("message");
ex:
<head>
<script type='text/javascript'>
confirm("click ok or cancel");
</script>
</head>

ex:
<head>
<script type='text/javascript'>
var x=confirm("click ok or cancel");
alert("user selected option is:"+x);
</script>
</head>

ex:
<head>
<script type='text/javascript'>
var x=confirm("click ok or cancle");
alert("user selected option is:"+x);
if(x==true) {
alert("user clicked on OK button");
}
else{
alert("user clicked on cancel button");
}
</script>
</head>

ex: confirm with function

<head>
<script type='text/javascript'>
functionmyConfirm(){
var x=confirm("click ok or cancel");
alert("user selected option is:"+x);
if(x==true) {
alert("user clicked on ok button");
}

104 | P a g e
}
</script>
</head>
<body>
<p> click the button to display the user selected result..</p>
<button onclick="myConfirm()">confirm</button>
</body>

Data static data

 While designing of program we are assigning values to vars
 This given by programmer
 This always same, means not changing the data execution to execution

Dynamic
 While execute of program(after webpage open) assigning values to vars
 This given by user
 This always changing, means data changing the data execution to execution
 We can take the data from user, in two ways:
 Html input elements (UI/html forms)
 Prompt dialog

Prompt Box: It is used to, if you want the user to input a value while entering a page. When a
prompt box pops up the user will have to click either "ok" or "cancel" to proceed after entering an
input value. If the user clicks "ok" the box returns the value/empty. If the user clicks "cancel" the
box returns "null".
Syntax: window.prompt("sometext", defaultvalue);
ex:
<head>
<script type='text/javascript'>
prompt("Enter Any Number:");
</script>
</head>

ex:
<head>
<script type='text/javascript'>
varMyVal=prompt("Enter Any Number:");
alert("User Entered value is:"+MyVal);
</script>
</head>

Note: these 3methods are provided by window object.

External JavaScript with popup boxes:

step1: Create a required js file
functionMyAlert(){
alert("welcome to externaljs");
}

105 | P a g e
functionMyConfirm(){
confirm("click ok or cancel");
}
functionMyPrompt(){
prompt("Enter Any Value");
}

Save with .js extension @ any location....!!

step2: preparing required html file.

<html>
<head>
<script type="text/javascript" src="myscript.js">
</script>
</head>
<body>
<p>Click the button to display alert message..</p>
<button onclick="MyAlert()">Alert</button>
<p>click the button to display confirm message...</p>
<button onclick="MyConfirm()">confirm</button>
<p>click the button to display prompt value..</p>
<button onclick="MyPrompt()">prompt</button>
</body>
</html>

parseInt()

predefine function => window

text based int converts into number format
"100" 100
"10.78" 10
"rama" NaN (Not a Number)
Syn:
window.parseInt("value")

parseFloat()
predefine function => window
text based float converts into number-based float
“100" 100.0
"10.78" 10.78
"rama" NaN (Not a Numeric)
Syn:
window.parseFloat("value")

Note: both are global functions

106 | P a g e
Control Statement
control statements are used to control(change) execution flow of program basedon user input data.
types:
> conditional statements (dm)
> loops (iterations)
> un-conditional
conditional (branching)

Conditional Statements:
If Statement
The if statement is used to perform decision making operations. means if condition is true, it
executes some statements. if condition is false, it executes some other statements.

There are three forms of if statement.

 simple if
 If else
 if else if (ladder if)

If statement
if is most basic statement of Decision
Decision-making statements.nts. It tells to program to execute a certain
part of code only if particular condition or test case is true.

Example
<script>
var a=10;
if(a>5)
{
107 | P a g e
document.write("value of a is greater than 5");
}
</script>

if-else statement
In general, it can be used to execute one block of statement among two blocks.

Example of ifelse statement

108 | P a g e
Syntax
if(expression1)
{
//content to be evaluated if expression1 is true
}
else
if(expression2)
{
//content to be evaluated if expression2 is true
}
else
{
//content to be evaluated if no expression is true
}
Example of if..else if statement
<script>
var a=40;
if(a==20)
{
document.write("a is equal to 20");
}
else if(a==5)
{
document.write("a is equal to 5");
}
else if(a==30)
{
document.write("a is equal to 30");
109 | P a g e
}
else
{
document.write("a is not equal to 20, 5 or 30");
}
</script>

switch statement
> switch is selection statement, but it's not decision making.
> its better performance.
Syn:
switch(var/expr)
{
case value: statements...
break;
case value: statements...
break;
case ...
default: statements...
}

Looping Statement
Set of instructions given to the interpreter to execute until condition becomes false is called loops.
The basic purpose of loop is min code repetition.
The way of the repetition will be forming a circle that's why repetition statements are called loops.
Some loops are available In JavaScript which are given below.
 while loop (top testing/entry level)
 for loop
 do-while (bottom testing/exit level)

while loop
When we are working with “while loop” always pre-checking process will be occurred. Pre-checking
process means before evolution of statement block condition part will be executed. “While loop”
will repeat in clock wise direction or anti-clock wise direction.

110 | P a g e
Example of while loop
<script>
var i=10;
while (i<=13)
{
document.write(i + "<br/>");
i++;
}
</script>

do-while loop
In implementation when we need to repeat the statement block at least 1 then go for do-while.
do In
do-while
while loop post checking of the statement block condition part will be executed.

111 | P a g e
Example of do-while loop
<script>
var i=11;
do{
document.write(i + "<br/>");
i++;
}while (i<=15);
</script>

for Loop
For loop is a simplest loop first we initialized the value then check condition and then increment and
decrements occurred.

Steps of for loop

112 | P a g e
Example of for loop
<script>
for (i=1; i<=5; i++)
{
document.write(i + "<br/>")
}
</script>
Unconditional statements
These are used to jump/skip statements execution
Types:
 break
 continue
 return

113 | P a g e

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>

<script type="text/javascript">
document.write("msg from head");
</script>
</head>
<body>

<h1 ondblclick="alert('button clicked')">click here</h1>
<button onclick="alert('button pressed')">press here</button>
<br>
<script type="text/javascript">
document.write("msg from body");
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
<script src="scritps.js"></script> 
</head>
<body>
<h3>demo on external script</h3>
<script>
fun2(); //calling
fun1();
</script>

</body>
</html>

114 | P a g e
<!-- example on JS
1. JS produces error, error msg are displaying in console
2. in JS string/text we can rep with either " " or ' ' or ` `

literals => string literals " " & ' '

=> template literal ` ` (since JS6)
3. case sen
4. ; is optional
5.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
</head>
<body>
<h3>Note point</h3>
<script>
document.write("Appple");
document.write('Mango')
document.write(`Orange`)
/* console.log("Simla
Black
Apples"); Error */
console.log(`Simla
Black
Apples`);
//Document.write("hi"); error
</script>
<br>
<script>
document.write("Samsung");
document.writ("LG");
document.write("Sony");
</script>
<br>
<script>
document.write("Red");
document.write("Green");
document.Write("Blue");
document.write("Yellow");
</script>
<h2>the end</h2>
</body>
</html>

115 | P a g e

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
</head>
<body>
<h3>demo on html in js</h3>
<script>
//<h2>Welcome</h2> error
document.write("<h2>Welcome</h2>");
document.write(`<h2>Hello</h2>`);
document.write("<h2 align='center'>JavaScript</h2>");
document.write(`<input type="text" id="t1" name="t1"/>`);
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
</head>
<body>
<h3>demo on variables</h3>
<script>
var a; //declaration
document.write(a,"<br>");
a=10; //assigning
var b=20; //init
document.write(a,"<br>");
document.write(b+"<br>");

let c; //dec
c=101;
let d=202; //init
document.write(c,'<br>');
document.write(d+'<br>');
</script>

</body>
</html>

116 | P a g e

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
</head>
<body>
<h3>demo on const</h3>
<script>
var a=10; //init
let b=20; //init
document.write(a,'<br>');
document.write(b+'<br>');
a=11; //modify -> valid
b=22;
document.write(a,'<br>');
document.write(b+'<br>');

const PI=3.14; //init

const EXP=2.718;
document.write(PI,'<br>');
document.write(EXP+'<br>');
//PI=5.6; error
//const N; error
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
</head>
<body>
<h3>demo on Primitive DT</h3>
<script>
var a=10;
var b=10.56;
let c="Siva";
let d='Y';
let e=true;
var f;
const g=null;

117 | P a g e
document.write(a,` => `,typeof a, `<br>`);
document.write(b + ` => `+ typeof b + `<br>`);
document.write(c,` => `,typeof c, `<br>`);
document.write(d,` => `,typeof d, `<br>`);
document.write(e,` => `,typeof e, `<br>`);
document.write(f,` => `,typeof f, `<br>`);
document.write(g,` => `,typeof g, `<br>`);
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
</head>
<body>
<h3>demo on Non-Primitive DT</h3>
<script>
//object creation & init with default values
let st = new String();
let n = new Number();
var b = new Boolean();
var d = new Date();
const a = [];
document.write(`st val `+st+`<br>`);
document.write(`n val `+n+`<br>`);
document.write(`b val `+b+`<br>`);
document.write(`d val `+d+`<br>`);
document.write(`a val `+a+`<br>`);

//object creation & init with user values

let st1 = new String("Siva Kumar");
let n1 = new Number(123);
var b1 = new Boolean(true);
var d1 = new Date("2022-08-30");
const a1 = [10,20,30,40,50];
document.write(`st1 val `+st1+`<br>`);
document.write(`n1 val `+n1+`<br>`);
document.write(`b1 val `+b1+`<br>`);
document.write(`d1 val `+d1+`<br>`);
document.write(`a1 val `+a1+`<br>`);
</script>

118 | P a g e
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
</head>
<body>
<h3>demo on dynamic & loosly typed</h3>
<script>
//JS did not provide any data types for declaring variables and a variable in javascript can
store any type of value. Hence java script is "loosely typed"
var n;
n=10;
document.write(n+`<br>`);
n="apple";
document.write(n+`<br>`);
n=true;
document.write(n+`<br>`);

//We can use a variable directly without declaring it in javascript, it’s called "dynamic"
programming.
x=100;
document.write( x,"<br>");
z="ram";
document.write( z,"<br>");
document.write( window.x, window.z, window.y );
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Nareshit</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>

<header id="header">
<div id="header-div">

119 | P a g e
<div class="header-left">India's No.1 Software Training Institute</div>
<div class="header-right">Hyderabad | Chennai | USA | Online Training</div>
</div>
<br>
<div>
<img src="images/nit.png"/>
<h1 class="nit-heading">Naresh i Tech</h1>
</div>
</header>
<br>

<nav id="menu-bar">
<a href="home.html" class="menu-item" target="myframe"> <img
src="images/home.png" width="15px" height="15px"/>Home</a>
<a href="service.html" target="myframe" class="menu-item">Services</a>
<a href="course.html" target="myframe" class="menu-item">Courses<a/>
<a href="batches.html" target="myframe" class="menu-item">New Batches<a/>
<a href="contact.html" target="myframe" class="menu-item">Contact Us<a/>
</nav>
<br>

<section id="section">
<iframe name="myframe" src="images/jfs.jpg" frameborder width="100%"
height="100%"> </iframe>
</section>

<footer id="footer">

</footer>
</body>
</html>

/* craeating style for login page (loginstyles.css) */

div{
background:#ffff99;
width:220px;
height:320px;
margin:auto;
border-radius:15px;
box-shadow:1px 1px 3px 3px;
padding:25px;
opacity:0.8;
}
h3{
text-align:center;
color:red;
}
span{

120 | P a g e
color:red;
font-size:18px;
}
a{
color:#3300cc;
text-decoration:none;
}
a:hover{
color:#cc0000;
text-decoration:underline;
}
#button{
background:linear-gradient(to top, red, blue);
color:white;
width:170px;
height:30px;
font-size:22px;
border:none;
border-radius:15px;
}
#button:hover{
background:linear-gradient(to bottom, red, blue);
}
body{
background-image:url(images/wall.webp);
background-size:100% auto;
}

<!DOCTYPE html>
<html lang="en">
<head>
<title>JS</title>
</head>
<body>
<h3>demo on JS operators</h3>
<script>
let x=20, y=8;
//arithmatic
document.write(x+y, `<br>`);
document.write(x-y, `<br>`);
document.write(x*y, `<br>`);
document.write(x/y, `<br>`);
document.write(x%y, `<br>`);
document.write(y**3, `<br>`);

//relational
document.write( x>=y,`<br>`);

121 | P a g e
let z="8";
document.write( y==z, `<br>`);
document.write( y===z, `<br>`);
document.write( y!=z, `<br>`);
document.write( y!==z, `<br>`);

//logical
document.write( y>=1 && y<=10, `<br>`);
document.write( x==20 || x==30, `<br>`);

//short hand arith+assign bitwise+assign

x+=15; //x=x+15;
y*=5; //y=y*5
document.write(x, `<br>`, y, `<br>`);

//concate
document.write("rama"+"rao"+"<br>");
document.write("X val is "+x+"<br>");

//unary
x++; //post incre
document.write(x+`<br>`);
++x; //pre incre
document.write(x+`<br>`);
y--; //post decre
document.write(y+`<br>`);
--y; //pre decre
document.write(y+`<br>`);

//conditional
document.write( y%2===0 ? "Even number" : "Odd number" );

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<title>JS</title>
</head>
<body>
<h3>demo on JS dialogs</h3>
<script>
window.alert("welcome");
alert("Product is "+ 15*30);
alert(`Apple\nMango\nOrange`);

122 | P a g e
let x = window.confirm('do you want to exit?');
document.write(x+`<br>`);

let n = window.prompt("enter name");

let a = prompt("enter age");
document.write(n+` `+a+` year(s) older`);
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
</head>
<body>
<h3>finding sum of 2numbers</h3>
<script>
let a = parseInt( prompt("enter first number") );
let b= parseInt( prompt("enter second number") );
let res = a+b;
document.write(`Sum is `+res);
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
</head>
<body>
<h3>finding sum of 2numbers</h3>
<label>First number</label> <br>
<input type="text" id="tf1"/> <br>
<label>Second number</label> <br>
<input type="text" id="tf2"/> <br>
<button onclick="addition()">Addition</button>

123 | P a g e
function addition()
{
let x = parseInt(tf1.value);
let y = parseInt(tf2.value);
let res = x+y;
//document.write(`Sum is `+res);
//console.log(`Sum is `+res);
alert(`Sum is `+res);
}

</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
</head>
<body>
<h3>Arith Calc</h3>
<input type="text" id="firstNum" placeholder="First Number"/> <br>
<input type="text" id="secondNum" placeholder="Second Number"/> <br>
<button onclick="alert(parseInt(firstNum.value)+parseInt(secondNum.value))"> +
</button>  
<button onclick="alert(firstNum.value-secondNum.value)"> - </button>  
<button onclick="alert(firstNum.value*secondNum.value)"> * </button>  
<button onclick="alert(firstNum.value/secondNum.value)"> / </button>  
<button onclick="alert(firstNum.value%secondNum.value)"> % </button>  
<button onclick="alert(firstNum.value**secondNum.value)"> ^ </button>  
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
<style>
div{
width:230px;
height:auto;
margin:auto;

124 | P a g e
background:#00ffff;
padding:20px;
}
input{
border:none;
outline:none;
background:#00ffff;
border-bottom:2px solid black;
}
</style>
</head>
<body>
<div>
<h3 align="center"><u>Simple Interest Calc</u></h3>
<p>
<label>Principal Amount</label> <br>
<input type="text" id="pamt"/> <span>₹</span>
</p>
<p>
<label>Rate of Interest</label> <br>
<input type="text" id="roi"/> <span>%</span>
</p>
<p>
<label>Time</label> <br>
<input type="text" id="time"/> <span>Year(s)</span>
</p>
<button onclick="compute()">Calculate</button>
<br>
<output id="res"></output>
</div>
<script>
function compute()
{
let p, r, t, si; //local vars
p = pamt.value;
r = roi.value;
t = time.value;
si = p*t*r/100;
//alert(`Simple Interest Amount :Rs`+si);
res.value = `Simple Interest Amount :Rs`+si;
}
</script>
</body>
</html>

<!--
DOM ==> API => lib => coll of classes

125 | P a g e
==> interface b/w html page & js
==> dynamic accessing data, updating data, changing structure and to change stlye of web
page
==> tree structure
==> dom objects are created by browser while loading web page

html tag dom class

<body> HTMLBodyElement ==> object
<head> HTMLHeadElement
<p> HTMLParagraphElement ==> object
<label> HTMLLabelElement
<button> HTMLButtonElement
<img> HTMLImageElement

window
document console nav

getElementById()
get instance of an Element By using Id attri

getElementsByName()
get instances of an Element By using Name attri

getElementsByTagName()
get instances of an Element By using Tag Name

querySelector()
get instance of an Element By using selector name

querySelectorAll()
get instances of an Element By using selector name

document object mehtods

-->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dom</title>
</head>
<body>
<h1 id="head1">Welcome</h1>
<h2 name="head2">Apple</h2>
<h2 name="head2">Mango</h2>
<h2 name="head2">Orange</h2>
<label>Firstname</label> <br>
<label>Lastname</label> <br>

126 | P a g e
<script>
let h = document.getElementById("head1");
document.write(h,"<br>");

let ob = document.getElementsByName("head2");
document.write(ob);

let ob2 = document.getElementsByTagName("label");

document.write(ob2);
</script>
</body>
</html>

<!--
DOM ==> API => lib => coll of classes
==> interface b/w html page & js
==> dynamic accessing data, updating data, changing structure and to change stlye of web
page
==> tree structure
==> dom objects are created by browser while loading web page

html tag dom class

<body> HTMLBodyElement ==> object
<head> HTMLHeadElement
<p> HTMLParagraphElement ==> object
<label> HTMLLabelElement
<button> HTMLButtonElement
<img> HTMLImageElement

window
document console nav

getElementById()
get instance of an Element By using Id attri

getElementsByName()
get instances of an Element By using Name attri

getElementsByTagName()
get instances of an Element By using Tag Name

querySelector()
get instance of an Element By using selector name

querySelectorAll()
get instances of an Element By using selector name

127 | P a g e
document object mehtods
-->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dom</title>
</head>
<body>
<h1 id="head1">Apple</h1>
<h1 id="head1">Banana</h1>
<h2 class="head2">Mango</h2>
<h3 class="head2">Orange</h3>
<script>
let ob1 = document.querySelector("#head1");
document.write(ob1,"<br>");

let ob2 = document.querySelectorAll(".head2");

document.write(ob2,"<br>");
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dom</title>
</head>
<body>

<h1 id="head1">Apple</h1>
<h2 id="head2">Hello</h2>
<script>
let h1 = document.getElementById("head1");
document.write( h1.innerText, `<br>`);
//h1.innerText="Mangos"; //modification
//h1.innerText=""; //data deleting
//h1.innerText="Red "+h1.innerText
//h1.innerText+=" 100₹"
h1.innerHTML+=" 100₹"

let h2 = document.getElementById("head2");
//h2.innerText+=" <u>World</u>"; OR

128 | P a g e
h2.innerHTML+=" <u>World</u>";
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dom</title>
</head>
<body>
<input type="text" id="tf1" value="100"/> <br>
<script>
const tb = document.querySelector("#tf1")
//document.write(tb);
document.write( tb.value );
//tb.value="1234";
//tb.value+="123";
tb.value="";
</script>
</body>
</html>

<!-- example on event handling

1st approch:
1 get element object
2. attach event to object
by using addEventListener() function
Syn: ele-obj.addEventListener("event-name1", task)
event-name => click, load, focus, blur ...
task => function expr or fun
function fun-name() function()
{ {
statements statements
} }

2nd approch:
1 get element object
2. attach event to object
Syn:- ele-obj.event-name = task;
event-name => onclick, onload, onfocus, onblur ...
task => function expr or fun

129 | P a g e
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dom</title>
<script>
function fun1()
{
alert("button clicked");
}
function fun2()
{
alert("button pressed");
}
</script>
</head>
<body>
<button id="bt1">Click here</button>
<button id="bt2">Press here</button>
<script>
//1st approch
const b1=document.getElementById("bt1");
b1.addEventListener("click", fun1 );
//OR
//document.getElementById("bt1").addEventListener("click", fun1);

//2nd approch
const b2=document.getElementById("bt2");
b2.onclick=fun2;
//OR
//document.getElementById("bt2").onclick=fun2;
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dom</title>
</head>
<body>
<input type="text" id="tb1" placeholder="First number"/> <bR>
<input type="text" id="tb2" placeholder="Second number"/> <bR>
<button id="bt">Add</button> <br>
<output id="result"></output>

130 | P a g e
<script>
document.getElementById("bt").onclick=function(){
let x=+document.getElementById("tb1").value;
let y=+document.getElementById("tb2").value;
let s=x+y;
document.querySelector("#result").innerText=`Sum is `+s;
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dom</title>
</head>
<body>
<h1 id="head1">Welcome</h1>
<button class="c1">Change text</button>
<button class="c2">Chnage style</button>
<script>
//changing data
document.querySelector(".c1").onclick=function(){
document.getElementById("head1").innerText="Hello";
//console.log("clicked");
};

//changin style
document.querySelector(".c2").onclick=function(){
const h=document.getElementById("head1");
//ele-obj.style.css-prop=value;
h.style.color="red";
h.style.backgroundColor="#ffff00";
};
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dom</title>
</head>

131 | P a g e
<body>
<h1 id="heading">Siva Kumar Y</h1>
<input type="radio" id="color1" name="color"/> <label>Red</label>
  
<input type="radio" id="color2" name="color"/> <label>Blue</label>
  
<input type="radio" id="color3" name="color"/><label>Green</label>
  
<input type="radio" id="color4" name="color"/> <label>Pink</label>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dom</title>
</head>
<body>
<h1 id="heading">Siva Kumar Y</h1>
<input type="color" id="col"/>

132 | P a g e
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dom</title>
<style>

img{
width:200px;
height:250px;
margin:50px;
}
</style>
</head>
<body>
<div align="center">
<img src="images/dress1_a.webp" id="img1"/>
<img src="images/dress2_a.webp" id="img2"/>
<img src="images/dress3_a.webp" id="img3"/>
</div>
<script>
//img1 object
const im1=document.getElementById("img1");
//mouse comes on to img1
im1.onmouseover=function(){im1.src="images/dress1_b.webp";};
//mouse comes out from img1
im1.onmouseout=function(){im1.src="images/dress1_a.webp";};

//img2 object
const im2=document.getElementById("img2");
//mouse comes on to img2
im2.onmouseover=function(){im2.src="images/dress2_b.webp";};
//mouse comes out from img2
im2.onmouseout=function(){im2.src="images/dress2_a.webp";};

//img3 object
const im3=document.getElementById("img3");
//mouse comes on to img3
im3.onmouseover=function(){im3.src="images/dress3_b.webp";};
//mouse comes out from img3
im3.onmouseout=function(){im3.src="images/dress3_a.webp";};
</script>
</body>

133 | P a g e
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
</head>
<body>
<h3>demo on simple if</h3>
<script>
//finding abs value
let n = +prompt("enter int value");
if(n<0) {
n=n*-1;
}

document.write("N val "+n);

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
</head>
<body>
<h3>demo on if else</h3>
<script>
//checking even or odd number
let n = +prompt("enter int value");
if(n%2===0)
document.write(n+" is Even Number");
else
document.write(n+" is Odd Number");

</script>
</body>
</html>

<!DOCTYPE html>

134 | P a g e
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
</head>
<body>
<h3>demo on if else </h3>
<script>
//finding biggest value of 2numbers
let x = +prompt("enter first number");
let y = +prompt("enter second number");

if(x>y)
document.write("First number is big");
else if(y>x)
document.write("Second number is big");
else
document.write("No one is big");

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
</head>
<body>
<h3>demo on switch</h3>
<script>
let n = +prompt("enter value b/w 1 to 7");
switch(n)
{
case 1: document.write("Monday");
break;
case 2: document.write("Tuesday");
break;
case 3: document.write("Wensday");
break;
case 4: document.write("Thrusday");
break;
case 5: document.write("Friday");
break;
case 6: document.write("Satday");
break;
case 7: document.write("Sunday");

135 | P a g e
break;
default: document.write("Invalid Day");
}

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
</head>
<body>
<h3>demo on loops</h3>
<script>
let i=1;
while(i<=10)
{
document.write(i+" ");
i++;
}

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
</head>
<body>
<h3>demo on loops</h3>
<script>
for(let i=1; i<=10; i++)
{
document.write(i+" ");
}

</script>
</body>
</html>

136 | P a g e

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
</head>
<body>
<h3>demo on loops</h3>
<script>
let i=1;
do
{
document.write(i+" ");
i++;
}while(i<=10);

</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
</head>
<body>
<h3>printing multiplication table</h3>
<label>Table number</label>
<input type="text" id="tn"/>
<button>Print Table</button>
<br>
<output id="result"></output>
<script>
document.querySelector("button").onclick=function(){
let r,i,n,st="";
n=document.querySelector("#tn").value;
for(i=1; i<=20; i++)
{
r=n*i;
//document.write(n+"*"+i+"="+r+"<br>");
st=st+(n+"*"+i+"="+r+"<br>");
}

137 | P a g e
document.getElementById("result").innerHTML=st;

};
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
</head>
<body>
<h3>demo on loop with html</h3>
<script>
for(let i=1; i<=50; i++)
document.write("<h3>Welcome</h3>");
</script>
</body>
</html>

<!--
Arrays
------
==> array is ref variable
==> arra is coll of elements
==> it allows same type of values & different types of values
==> storing no.of values with a same refname is called array
Adv ==> simple coding while working no.of values
==> data maintain
==> easy transporting data
==> JS arrays are dynamic
==> Heap area

=> we can create an array in two ways, those are

1st Approch:
by using array literal [ ]
Syn:- refvar = [];

2nd Approch:
by using new keyword
Syn:- refvar = new Array();

accessing:
refvar[index]

138 | P a g e
index => slno for memory block, index starts with 0

data assigning:
refvar[index]=value;

length: its predefine property of array

it returns size of array
Syn: refvar.length
refvar.length=N;
-->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
</head>
<body>
<h3>demo on arrays</h3>
<script>
//1st Approch
let a = []; //array declaration
document.write(`Size :`+ a.length +`<br>`);
document.write(`A :`+ a +`<br>`);
a[0]=10; //assigning
a[1]=22;
a[2]=34;
document.write(`Size :`+ a.length +`<br>`);
document.write(`A :`+ a +`<br>`);

let runs=[4,8,2,11,5,8]; //array init

//document.write(`Runs :`+ runs +`<br>`);
let tot=0;
for(let i=0; i<runs.length; i++)
{
document.write(`<br>Over`+(i+1)+` :`+ runs[i]);
tot=tot+runs[i];
}
document.write(`<br>Total Runs :`+tot);
document.write(`<br>Overs :`+runs.length);
</script>

</body>
</html>

<!DOCTYPE html>

139 | P a g e
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
</head>
<body>
<h3>demo on arrays</h3>
<script>
//2nd Approch
let a = new Array(); //array declaration
document.write(`Size :`+ a.length +`<br>`);
document.write(`A :`+ a +`<br>`);
a[0]=10; //assigning
a[1]=22;
a[2]=34;
document.write(`Size :`+ a.length +`<br>`);
document.write(`A :`+ a +`<br>`);

let names = new Array("Ram","Sam","Rahim");

document.write(`Names :`+ names +`<br>`);

</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
</head>
<body>
<h3>demo on arrays</h3>
<script>
let a = ["Siva", 41, 9885098500, 5.10, new Date("2022-08-30")];
document.write(`Data :`+ a +`<br>`);

//array with dynamic values

let b=[]; //dec
let n = +prompt("enter no.of values");
for(let i=0; i<n; i++) {
b[i]=prompt("enter array value");
}
document.write(`Array Eles : `+b+`<br>`);

140 | P a g e
//resizing array
let c=[11,22,33,44,55,66,77,88];
document.write(`<br>Size `+c.length);
document.write(`<br>Elements :`+c);
c.length=5; //reduced size
document.write(`<br>Size `+c.length);
document.write(`<br>Elements :`+c);
//c.length=7; optional
c[5]=10;
c[6]=20;
document.write(`<br>Size `+c.length);
document.write(`<br>Elements :`+c);

</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
</head>
<body>
<h3>finding max & min elements</h3>
<script>
let a=[];
let n=+prompt("enter no.of values");
for(let i=0; i<n; i++)
a[i]=+prompt("enter a["+i+"] value");

let max=a[0]; //let assume

let min=a[0]; //let assume
for(let i=1; i<n; i++)
{
if(a[i]>max)
max=a[i];

if(a[i]<min)
min=a[i];
}
document.write(`Elements :`+a+`<br>`);
document.write(`Max Ele :`+max+`<br>`);
document.write(`Min Ele :`+min+`<br>`);
</script>

141 | P a g e
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
</head>
<body>
<h3>demo on array of arrays</h3>
<script>
let a=[ [10,20,30], [11,22,33] ]; //nested array

document.write(a+"<br>");
document.write(a.length+"<br>");
document.write(a[0].length+"<br><br>");

for(let i=0; i<a.length; i++)

{
for(let j=0; j<a[i].length; j++) {
document.write(a[i][j]+" ");
}
document.write("<br>");
}

</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
</head>
<body>
<h3>demo on array of arrays</h3>
<script>
let a=[ [10,20], ["ram","sam","rahim"] ]; //nested array
document.write(a+"<br>");
document.write(a.length+"<br>");
document.write(a[0].length+"<br><br>");

142 | P a g e
for(let i=0; i<a.length; i++)
{
for(let j=0; j<a[i].length; j++) {
document.write(a[i][j]+" ");
}
document.write("<br>");
}

</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS</title>
<style>
button{
margin-left:100px;
background:#bfbfbf;
font-size:30px;
outline:none;
border:none;
}
</style>
</head>
<body>
<h3 align="center">Slide Show</h3>
<div width="100%" height="400px" align="center">
<img src="images/xuv.webp" width="70%" height="100%" id="image"/>
</div>
<div align="center">
<button id="pb">«</button>
<button id="nb">»</button>
</div>

143 | P a g e
document.getElementById("image").src="images/"+imgs[index];
index++;
};

document.getElementById("pb").onclick=function(){
if(index<0)
index=0;

document.getElementById("image").src="images/"+imgs[index];
index--;
};

</script>

</body>
</html>

144 | P a g e

Sudhakar Sharma UI Notes
100% (5)
Sudhakar Sharma UI Notes
495 pages
Architecting Splunk Enterprise Deployments Lab Exercises: Background
100% (1)
Architecting Splunk Enterprise Deployments Lab Exercises: Background
18 pages
HTML Tutorial W3schools
67% (3)
HTML Tutorial W3schools
59 pages
Css Notes PDF
87% (15)
Css Notes PDF
16 pages
Handwritten JavaScript Notes For Beginners
60% (5)
Handwritten JavaScript Notes For Beginners
50 pages
Fortinet Fortiweb Lab Guide For Fortiweb 64
No ratings yet
Fortinet Fortiweb Lab Guide For Fortiweb 64
103 pages
UI Full Stack by Sudhakar Sir
No ratings yet
UI Full Stack by Sudhakar Sir
12 pages
Javascript W3schools
100% (1)
Javascript W3schools
190 pages
HTML Question Paper
86% (44)
HTML Question Paper
14 pages
HTML Project
40% (15)
HTML Project
64 pages
HTML Assignment
50% (2)
HTML Assignment
8 pages
Complete Practical Exercises HTML, CSS & JS
80% (5)
Complete Practical Exercises HTML, CSS & JS
12 pages
IT430 Short Notes For Final Term Exam Preparation
43% (7)
IT430 Short Notes For Final Term Exam Preparation
44 pages
Refer To The Exhibit.: Ape3: Key Server - Customer 2 Ces: Group Members
No ratings yet
Refer To The Exhibit.: Ape3: Key Server - Customer 2 Ces: Group Members
57 pages
WEB PROGRAMMING Lab Manual
No ratings yet
WEB PROGRAMMING Lab Manual
16 pages
Web Programming Notes
100% (1)
Web Programming Notes
82 pages
0 - HTML Notes For BCA
80% (5)
0 - HTML Notes For BCA
22 pages
JavaScript Notes
50% (2)
JavaScript Notes
11 pages
HTML & JavaScript - Practice Questions PDF
100% (3)
HTML & JavaScript - Practice Questions PDF
103 pages
CSS Tutorial: W3schools
No ratings yet
CSS Tutorial: W3schools
12 pages
CSS, HTML, JavaScript LAB (Good Practical Programs)
83% (6)
CSS, HTML, JavaScript LAB (Good Practical Programs)
82 pages
HTML Notes by HEERA
No ratings yet
HTML Notes by HEERA
111 pages
HTML Full Notes
100% (4)
HTML Full Notes
19 pages
Web Designing Lab Manual
No ratings yet
Web Designing Lab Manual
50 pages
HTML Practical Questions List 14-5-13
100% (3)
HTML Practical Questions List 14-5-13
5 pages
Css Notes
100% (1)
Css Notes
27 pages
HTML Notes PDF
100% (2)
HTML Notes PDF
20 pages
HTML Practical Questions
No ratings yet
HTML Practical Questions
6 pages
Peoplesoft Hrms Technical MCQ Questions
100% (2)
Peoplesoft Hrms Technical MCQ Questions
38 pages
Css Practical File
No ratings yet
Css Practical File
7 pages
HTML Record PDF
No ratings yet
HTML Record PDF
41 pages
Important Questions: Subject: Web Design Class: - BCA-4nd Sem
100% (3)
Important Questions: Subject: Web Design Class: - BCA-4nd Sem
2 pages
Java Script W3schools
No ratings yet
Java Script W3schools
77 pages
Web Technologies Material For Degree Students
100% (2)
Web Technologies Material For Degree Students
42 pages
HTML Notes
100% (1)
HTML Notes
18 pages
Web Designing and Publishing Practical Questions
No ratings yet
Web Designing and Publishing Practical Questions
72 pages
DHTML Notes
100% (1)
DHTML Notes
16 pages
JavaScript Notes
50% (2)
JavaScript Notes
41 pages
HTML Questions
100% (1)
HTML Questions
2 pages
Web Technology - Lecture Notes, Study Material and Important Questions, Answers
No ratings yet
Web Technology - Lecture Notes, Study Material and Important Questions, Answers
5 pages
Javascript Exercise Answer
No ratings yet
Javascript Exercise Answer
10 pages
Javascript PPT For School
100% (2)
Javascript PPT For School
24 pages
Practical File HTML
No ratings yet
Practical File HTML
90 pages
HTML Notes
100% (4)
HTML Notes
36 pages
Web Designing Question Paper
100% (1)
Web Designing Question Paper
4 pages
CSS Notes
No ratings yet
CSS Notes
38 pages
CSS Notes by Vikas Kadakkal
100% (1)
CSS Notes by Vikas Kadakkal
119 pages
CSS and CSS3 Notes
100% (1)
CSS and CSS3 Notes
54 pages
WebTechnology Study Materials
100% (2)
WebTechnology Study Materials
143 pages
HTML Viva Questions
100% (2)
HTML Viva Questions
6 pages
HTML Exercise
No ratings yet
HTML Exercise
13 pages
Web Designing Lab File (KIT451) : Submitted By-Saumya Asawa Roll No: 1900970130108
67% (3)
Web Designing Lab File (KIT451) : Submitted By-Saumya Asawa Roll No: 1900970130108
32 pages
Write An HTML Program To Create The Table
80% (5)
Write An HTML Program To Create The Table
48 pages
Web Designing Workshop
0% (1)
Web Designing Workshop
2 pages
Write An HTML Code To Display Your CV On A Web Page? Code
100% (1)
Write An HTML Code To Display Your CV On A Web Page? Code
47 pages
Practicals Web Technology
No ratings yet
Practicals Web Technology
16 pages
HTML Basics Practicals
No ratings yet
HTML Basics Practicals
18 pages
PHP Handwritten Notes
0% (2)
PHP Handwritten Notes
88 pages
Web Dev Handwritten Notes
No ratings yet
Web Dev Handwritten Notes
20 pages
Ui Complete Notes
No ratings yet
Ui Complete Notes
320 pages
HTMLpart 1
No ratings yet
HTMLpart 1
30 pages
HTML 1
No ratings yet
HTML 1
22 pages
HTML Notes
No ratings yet
HTML Notes
44 pages
HTML Notes Part - 1
No ratings yet
HTML Notes Part - 1
28 pages
HTML Notes Part-1
No ratings yet
HTML Notes Part-1
32 pages
Digital Forensics Toolset
No ratings yet
Digital Forensics Toolset
26 pages
Kranthi Manikanta - Satyanarayana - Madala - Hyderabad - Secunderabad - 11.00 - Yrs
No ratings yet
Kranthi Manikanta - Satyanarayana - Madala - Hyderabad - Secunderabad - 11.00 - Yrs
10 pages
CN Mini Project 6members
No ratings yet
CN Mini Project 6members
30 pages
Lab 3 CCN
No ratings yet
Lab 3 CCN
4 pages
SpiraTestPlanTeam v2.3 Administration Guide
No ratings yet
SpiraTestPlanTeam v2.3 Administration Guide
67 pages
Authentication Security
100% (1)
Authentication Security
54 pages
Pcoweb Manual Preliminary
No ratings yet
Pcoweb Manual Preliminary
25 pages
Service Manual: Kodak Dryview 8150 Laser Imager
No ratings yet
Service Manual: Kodak Dryview 8150 Laser Imager
470 pages
Geo SCADA 2022 Update Sep 2023 (85.8650.1) Release Notes
No ratings yet
Geo SCADA 2022 Update Sep 2023 (85.8650.1) Release Notes
39 pages
EBSAPEXSimplified PDF
100% (1)
EBSAPEXSimplified PDF
105 pages
BS RTU32 Presentation BS Feb10 481
No ratings yet
BS RTU32 Presentation BS Feb10 481
24 pages
Bionano Access Installation Guide
No ratings yet
Bionano Access Installation Guide
13 pages
WCSysAdminGuide PDF
No ratings yet
WCSysAdminGuide PDF
319 pages
Paytm
100% (1)
Paytm
94 pages
Cismcissp Sheetcheet
No ratings yet
Cismcissp Sheetcheet
11 pages
CN-Module 5 Notes
No ratings yet
CN-Module 5 Notes
31 pages
What Is A Cookie?: Cookie: A Small Amount of Information Sent by A Web Server To A Web Browser, Saved by The Browser, and
No ratings yet
What Is A Cookie?: Cookie: A Small Amount of Information Sent by A Web Server To A Web Browser, Saved by The Browser, and
7 pages
Sample-Paper-cs311
No ratings yet
Sample-Paper-cs311
10 pages
System Administration Lab Manual
No ratings yet
System Administration Lab Manual
34 pages
Beijer BoX2 Image Manual MAEN205C PDF
No ratings yet
Beijer BoX2 Image Manual MAEN205C PDF
26 pages
Readme Wincc Professional v12 Sp1
No ratings yet
Readme Wincc Professional v12 Sp1
66 pages
PenTest Proposal
No ratings yet
PenTest Proposal
8 pages
Xmpp-Real Time Web
No ratings yet
Xmpp-Real Time Web
32 pages
Alpesh Mansata: Xoriant Solutions
No ratings yet
Alpesh Mansata: Xoriant Solutions
5 pages