HTML, CSS, JAVASCRIPT, BOOTSTRAP

HTML 4 + HTML 5 + CSS 2 + CSS 3 + JavaScript 5 + JavaScript 6

+ JavaScript 7 + Bootstrap
 HTML, CSS, JavaScript, Bootstrap

Contents

HTML, CSS, JavaScript, Bootstrap ....................................................................17

Fundamentals .................................................... 17
Application .................................................................................................................................................. 17
Client ............................................................................................................................................................ 17
Browser ........................................................................................................................................................ 17
Web application .......................................................................................................................................... 18
Http .............................................................................................................................................................. 18
HTML 4 & 5 ...................................................... 19
HTML Basics ...................................................................................................................................... 19
Introduction to HTML ................................................................................................................................. 19
HTML Versions ............................................................................................................................................ 19
Tag ................................................................................................................................................................ 19
Syntax of HTML Program ........................................................................................................................... 20
Steps to Prepare First Example in HTML ...................................................................................... 20
1. Installing Visual Studio Code ................................................................................................................ 20
2. Create HTML Program ........................................................................................................................... 26
3. Execute the HTML Program .................................................................................................................. 31
HTML Syntax Tags....................................................................................................................................... 32
Attributes .................................................................................................................................................... 33
DOCTYPE ........................................................................................................................................... 33
Basic Elements in HTML .................................................................................................................. 34
Headings ...................................................................................................................................................... 34
Paragraphs ................................................................................................................................................... 35
<br> .............................................................................................................................................................. 36
Text Formatting Tags ...................................................................................................................... 37
<b> ................................................................................................................................................................ 37
<i> ................................................................................................................................................................. 37
<u> ................................................................................................................................................................ 38
<strike> ........................................................................................................................................................ 38
<strong> ....................................................................................................................................................... 39
<em> ............................................................................................................................................................. 39
<sup> ............................................................................................................................................................ 40
<sub> ............................................................................................................................................................ 40
Images................................................................................................................................................ 41

D. Harsha Vardhan (UI Expert) P a g e 2 | 499

 HTML, CSS, JavaScript, Bootstrap

<img> ............................................................................................................................................................ 41
Hyperlinks ......................................................................................................................................... 42
<a> ................................................................................................................................................................ 42
List tags ............................................................................................................................................. 46
<ul> ............................................................................................................................................................... 46
<ol> ............................................................................................................................................................... 47
<dl> ............................................................................................................................................................... 48
Table tags .......................................................................................................................................... 49
<table> ......................................................................................................................................................... 49
<iframe> ............................................................................................................................................ 52
Entities .............................................................................................................................................. 54
<meta>............................................................................................................................................... 55
Forms ................................................................................................................................................. 56
<form> .......................................................................................................................................................... 56
<input> ......................................................................................................................................................... 57
<button> ...................................................................................................................................................... 75
<fieldset> ..................................................................................................................................................... 76
<legend> ...................................................................................................................................................... 76
<label>.......................................................................................................................................................... 77
<select> ........................................................................................................................................................ 78
<textarea> ................................................................................................................................................... 81
<div> and <span>.............................................................................................................................. 81
<div> ............................................................................................................................................................. 81
<span> .......................................................................................................................................................... 82
Advanced Tags.................................................................................................................................. 82
<hr>............................................................................................................................................................... 82
<pre> ............................................................................................................................................................ 82
<abbr> .......................................................................................................................................................... 83
<bdo> ........................................................................................................................................................... 84
<audio> ........................................................................................................................................................ 84
<video>......................................................................................................................................................... 85
<details> and <summary> .......................................................................................................................... 86
<figure> and <figcaption> ......................................................................................................................... 86
<datalist> ..................................................................................................................................................... 87
<progress> ................................................................................................................................................... 89
<meter>........................................................................................................................................................ 89
<output> ...................................................................................................................................................... 90

D. Harsha Vardhan (UI Expert) P a g e 3 | 499

 HTML, CSS, JavaScript, Bootstrap

Semantic Tags ................................................................................................................................... 91

<article> ....................................................................................................................................................... 91
Template Tags ............................................................................................................................................. 91
Storage .............................................................................................................................................. 92
Local Storage ............................................................................................................................................... 92
Session Storage ........................................................................................................................................... 94
Geo Location ..................................................................................................................................... 95
Web Workers .................................................................................................................................... 97
Drag and Drop .................................................................................................................................. 99
Offline Apps .................................................................................................................................... 101
Server Sent Events ......................................................................................................................... 103
Canvas.............................................................................................................................................. 106
Creating Canvas Container ...................................................................................................................... 106
Get context of canvas .............................................................................................................................. 106
strokeStyle ................................................................................................................................................ 106
lineWidth ................................................................................................................................................... 106
strokeRect ................................................................................................................................................. 106
fillStyle ....................................................................................................................................................... 106
fillRect ........................................................................................................................................................ 106
Example on Canvas ................................................................................................................................... 106
SVG ................................................................................................................................................... 107
Syntax to create SVG container .............................................................................................................. 107
Example on SVG ........................................................................................................................................ 107
Deprecated / Removed Tags in HTML 5 ...................................................................................... 108
Deprecated / Removed Attributes in HTML 5 ........................................................................... 109
XHTML ............................................................................................................................................. 109
Introduction to XHTML ............................................................................................................................ 109
XHTML Rules ............................................................................................................................................. 109
XHTML – Online Validator ....................................................................................................................... 111
XHTML - Example ...................................................................................................................................... 111
CSS 2 & 3 ...................................................... 112
Fundamentals of CSS ..................................................................................................................... 112
Introduction to CSS .................................................................................................................................. 112
CSS Basic Selectors ................................................................................................................................... 112
First Example on CSS ................................................................................................................................ 113
Example on ID Selector ............................................................................................................................ 113
CSS - Properties ........................................................................................................................................ 113

D. Harsha Vardhan (UI Expert) P a g e 4 | 499

 HTML, CSS, JavaScript, Bootstrap

Colors ............................................................................................................................................... 114

color............................................................................................................................................................ 114
background-color...................................................................................................................................... 114
Types of colors .......................................................................................................................................... 115
Fonts ................................................................................................................................................ 117
font-family ................................................................................................................................................. 117
font-size ..................................................................................................................................................... 118
font-weight ................................................................................................................................................ 119
font-style ................................................................................................................................................... 120
Text .................................................................................................................................................. 120
letter-spacing ............................................................................................................................................ 120
word-spacing ............................................................................................................................................. 121
line-height ................................................................................................................................................. 122
text-decoration ......................................................................................................................................... 123
text-transform .......................................................................................................................................... 124
text-align ................................................................................................................................................... 125
text-indent................................................................................................................................................. 127
<span>.............................................................................................................................................. 128
Background Image ......................................................................................................................... 128
background-image .................................................................................................................................... 128
background-repeat ................................................................................................................................... 129
background-position ................................................................................................................................ 131
background-attachment .......................................................................................................................... 132
Lists .................................................................................................................................................. 133
list-style-type for <ul> ............................................................................................................................. 133
list-style-type for <ol> ............................................................................................................................. 135
list-style-image ......................................................................................................................................... 138
<div> tag .......................................................................................................................................... 138
“width” and “height” properties ............................................................................................................. 139
float ............................................................................................................................................................ 140
clear ............................................................................................................................................................ 142
Box Model ....................................................................................................................................... 143
border-style, border-width, border-color .............................................................................................. 143
border - shortcut ....................................................................................................................................... 145
border - sides ............................................................................................................................................. 146
margin ........................................................................................................................................................ 147
margin - sides ............................................................................................................................................ 148

D. Harsha Vardhan (UI Expert) P a g e 5 | 499

 HTML, CSS, JavaScript, Bootstrap

margin - shortcut ...................................................................................................................................... 150

padding ...................................................................................................................................................... 151
padding - sides .......................................................................................................................................... 152
padding - shortcut .................................................................................................................................... 153
Advanced CSS Properties.............................................................................................................. 153
“opacity” property .................................................................................................................................... 153
display ........................................................................................................................................................ 154
visibility ...................................................................................................................................................... 155
overflow ..................................................................................................................................................... 156
position............................................................................................................................................ 157
position: static........................................................................................................................................... 157
position: absolute ..................................................................................................................................... 158
z-index ........................................................................................................................................................ 159
position: relative ....................................................................................................................................... 160
position: fixed ........................................................................................................................................... 162
Types of Style Sheets .................................................................................................................... 162
1. Internal Style Sheet / Embedded Style Sheet ................................................................................... 163
2. External Style Sheet ............................................................................................................................. 163
3. Inline Style Sheet .................................................................................................................................. 164
CSS Selectors .................................................................................................................................. 164
Tag Selector............................................................................................................................................... 165
ID Selector ................................................................................................................................................. 166
Class Selector ............................................................................................................................................ 166
Compound Selector .................................................................................................................................. 167
Grouping Selector ..................................................................................................................................... 168
Child Selector ............................................................................................................................................ 168
Direct Child Selector ................................................................................................................................ 169
Adjacent Siblings Selector ....................................................................................................................... 170
Adjacent One Sibling Selector ................................................................................................................ 170
Attribute Selector .................................................................................................................................... 171
Hover Selector .......................................................................................................................................... 172
Focus Selector ........................................................................................................................................... 173
Universal Selector..................................................................................................................................... 173
First-child selector .................................................................................................................................... 174
Last-child selector .................................................................................................................................... 175
Nth-child selector ..................................................................................................................................... 176
Nth-child(even) selector .......................................................................................................................... 176
Nth-child(odd) selector ............................................................................................................................ 177

D. Harsha Vardhan (UI Expert) P a g e 6 | 499

 HTML, CSS, JavaScript, Bootstrap

Before selector ......................................................................................................................................... 178

After selector ............................................................................................................................................ 178
Selection selector ..................................................................................................................................... 179
CSS Style Precedence ............................................................................................................................... 180
CSS Realtime Examples ................................................................................................................. 181
Table Styles ............................................................................................................................................... 181
Hyperlink Styles ........................................................................................................................................ 182
Menubar ..................................................................................................................................................... 184
Header ........................................................................................................................................................ 185
Advanced CSS ................................................................................................................................. 187
Resize ......................................................................................................................................................... 187
Word Wrap ................................................................................................................................................. 188
RGBA .......................................................................................................................................................... 189
Border Radius ............................................................................................................................................ 190
Shadow ....................................................................................................................................................... 191
Transitions ................................................................................................................................................. 193
Transformations ....................................................................................................................................... 197
1. Rotate Transformation ........................................................................................................................ 197
2. Skew Transformation ........................................................................................................................... 198
3. Scale Transformation ........................................................................................................................... 199
4. Translate Transformation .................................................................................................................... 200
Multiple Transformations ........................................................................................................................ 200
transform-origin ....................................................................................................................................... 201
Animations................................................................................................................................................. 204
Gradient Colors .............................................................................................................................. 205
Font Face ......................................................................................................................................... 206
Example on Font Face .............................................................................................................................. 207
Static Page Template .................................................................................................................... 208
Example on Static Page Template .......................................................................................................... 209
Example on Page Navigation using Static Page Template .................................................................. 211
Example on Static Page Template with DIV .......................................................................................... 214
Responsive Web Design ................................................................................................................ 217
Media Queries ........................................................................................................................................... 217
View port meta tag ................................................................................................................................... 218
Example on Responsive Web Design ..................................................................................................... 219
Bootstrap ...................................................... 229
Fundamentals of Bootstrap.......................................................................................................... 229

D. Harsha Vardhan (UI Expert) P a g e 7 | 499

 HTML, CSS, JavaScript, Bootstrap

Introduction to Bootstrap ....................................................................................................................... 229

Preparing Environment for Bootstrap ................................................................................................... 229
“container” class ....................................................................................................................................... 231
“container-fluid” class .............................................................................................................................. 231
Colors ............................................................................................................................................... 232
Text Colors ................................................................................................................................................ 232
Background Colors ................................................................................................................................... 234
Text .................................................................................................................................................. 236
Display Headings ...................................................................................................................................... 236
Text Alignment ......................................................................................................................................... 237
Text Styles ................................................................................................................................................. 239
Lead ............................................................................................................................................................ 240
Visibility ..................................................................................................................................................... 242
Grid System ..................................................................................................................................... 243
Understanding the Columns ................................................................................................................... 243
Types of Devices ....................................................................................................................................... 247
Jumbotron ...................................................................................................................................... 251
Jumbotron ................................................................................................................................................. 251
Images.............................................................................................................................................. 252
Image Shapes ............................................................................................................................................ 252
Image Alignment ...................................................................................................................................... 253
Image Fluid ................................................................................................................................................ 254
Tables............................................................................................................................................... 255
Basic Table ................................................................................................................................................. 255
Borderless Table ....................................................................................................................................... 257
Bordered Table ......................................................................................................................................... 259
Striped Table ............................................................................................................................................. 261
Hover Table ............................................................................................................................................... 263
Table Background Colors ......................................................................................................................... 265
Table Header Background Colors ........................................................................................................... 267
Table Small ................................................................................................................................................ 270
Table Responsive ...................................................................................................................................... 272
Alerts ............................................................................................................................................... 274
Alerts .......................................................................................................................................................... 274
Buttons ............................................................................................................................................ 276
Button Colors ............................................................................................................................................ 276
Button Outline .......................................................................................................................................... 277

D. Harsha Vardhan (UI Expert) P a g e 8 | 499

 HTML, CSS, JavaScript, Bootstrap

Button Sizes............................................................................................................................................... 279

Button Groups ........................................................................................................................................... 279
Button Vertical Groups ............................................................................................................................ 280
Button DropDown .................................................................................................................................... 281
Badges ............................................................................................................................................. 282
Basic Badges .............................................................................................................................................. 282
Badge Colors ............................................................................................................................................. 283
Pill Badges ................................................................................................................................................. 285
Progress Bar.................................................................................................................................... 286
Basic Progress Bar .................................................................................................................................... 286
Progress Bar Colors .................................................................................................................................. 287
Pagination ....................................................................................................................................... 289
Basic Pagination ........................................................................................................................................ 289
Pagination Size .......................................................................................................................................... 290
Pagination Alignment .............................................................................................................................. 291
Breadcrumbs ................................................................................................................................... 292
Breadcrumbs ............................................................................................................................................. 292
List Groups ...................................................................................................................................... 293
Basic List Groups ....................................................................................................................................... 293
List Group Colors ...................................................................................................................................... 294
Cards ................................................................................................................................................ 296
Basic Cards ................................................................................................................................................. 296
Card Colors ................................................................................................................................................ 297
Card Images ............................................................................................................................................... 299
Card Groups ............................................................................................................................................... 300
Tooltip ............................................................................................................................................. 302
Tooltip ........................................................................................................................................................ 302
Popover ........................................................................................................................................... 303
Popover ...................................................................................................................................................... 303
Collapsible ...................................................................................................................................... 304
Basic Collapsible ....................................................................................................................................... 304
Link Collapsible ......................................................................................................................................... 305
Accordion ................................................................................................................................................... 306
Forms ............................................................................................................................................... 308
Inline Form ................................................................................................................................................. 308
Stacked Form ............................................................................................................................................. 310
Form Grid ................................................................................................................................................... 312

D. Harsha Vardhan (UI Expert) P a g e 9 | 499

 HTML, CSS, JavaScript, Bootstrap

Horizontal Form Grid ................................................................................................................................ 314

Input Groups .............................................................................................................................................. 317
Form Validation ........................................................................................................................................ 318
Navigation ....................................................................................................................................... 321
Basic Navigation ....................................................................................................................................... 321
Navigation Alignment .............................................................................................................................. 322
Vertical Navigation ................................................................................................................................... 324
Tabs ............................................................................................................................................................ 325
Pills ............................................................................................................................................................. 326
Tabs with DropDown ................................................................................................................................ 328
Navigation Bar ................................................................................................................................ 330
Basic Navigation Bar ................................................................................................................................ 330
NavBar Collapsible ................................................................................................................................... 333
NavBar DropDown .................................................................................................................................... 334
NavBar Search ........................................................................................................................................... 336
NavBar FixedTop....................................................................................................................................... 338
NavBar Sticky Top ..................................................................................................................................... 339
Scrollspy ..................................................................................................................................................... 342
Carousel........................................................................................................................................... 344
Carousel ..................................................................................................................................................... 344
Modal ............................................................................................................................................... 346
Modal.......................................................................................................................................................... 346
LESS ........................................................... 349
Fundamentals of LESS ................................................................................................................... 349
Introduction to LESS ................................................................................................................................. 349
Steps to Prepare First Example in LESS ...................................................................................... 349
1. Downloading and Installing WinLess ................................................................................................. 349
2. Creating LESS File ................................................................................................................................. 352
3. Compile LESS File into CSS File ........................................................................................................... 356
4. Import the CSS File into HTML File..................................................................................................... 359
5. Run the HTML File ................................................................................................................................ 362
Basic LESS ........................................................................................................................................ 362
Variables .................................................................................................................................................... 362
Mixins ......................................................................................................................................................... 362
Example on Mixins .................................................................................................................................... 363
Mixins With Parameters ........................................................................................................................... 364
Nested Rules ............................................................................................................................................. 365

D. Harsha Vardhan (UI Expert) P a g e 10 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Nested Rules ........................................................................................................................ 366

Advanced LESS ............................................................................................................................... 367
Operators................................................................................................................................................... 367
Example on Operators ............................................................................................................................. 367
Color Functions ......................................................................................................................................... 368
Example on Operators ............................................................................................................................. 368
JavaScript 5, 6 & 7 ............................................ 370
Fundamentals ................................................................................................................................. 370
Introduction to JavaScript ....................................................................................................................... 370
Syntax of JavaScript ................................................................................................................................. 370
console.log() .............................................................................................................................................. 370
Steps to Prepare First Example in JavaScript ............................................................................ 371
1. Installing Visual Studio Code .............................................................................................................. 371
2. Create JavaScript Program ................................................................................................................. 376
3. Execute the JavaScript Program ........................................................................................................ 381
Variables.......................................................................................................................................... 382
Operators ........................................................................................................................................ 383
Arithmetical Operators ............................................................................................................................ 383
Assignment Operators ............................................................................................................................. 384
Increment and Decrement Operators .................................................................................................... 385
Relational Operators ................................................................................................................................ 385
Logical Operators ..................................................................................................................................... 386
Concatenation Operator .......................................................................................................................... 387
Control Statements ....................................................................................................................... 387
if .................................................................................................................................................................. 388
Switch-case ................................................................................................................................................ 392
While .......................................................................................................................................................... 392
Do-While .................................................................................................................................................... 393
For ............................................................................................................................................................... 394
Functions ......................................................................................................................................... 395
Arguments and Return ............................................................................................................................. 397
Recursion ................................................................................................................................................... 398
Arrays ............................................................................................................................................... 399
Steps for development of arrays ............................................................................................................ 399
Object Oriented Programming in JavaScript ............................................................................. 401
Introduction to Objects ........................................................................................................................... 401
Types of Object Oriented Programming (OOP) languages ................................................................. 402

D. Harsha Vardhan (UI Expert) P a g e 11 | 499

 HTML, CSS, JavaScript, Bootstrap

Creating Objects ....................................................................................................................................... 402

Object Literals ........................................................................................................................................... 402
Constructor Function ............................................................................................................................... 403
Object.Keys ............................................................................................................................................... 404
JSON ........................................................................................................................................................... 405
Stringify ..................................................................................................................................................... 405
Parse ........................................................................................................................................................... 406
Object Array Literal .................................................................................................................................. 407
Object Array .............................................................................................................................................. 409
Prototype ................................................................................................................................................... 409
Inheritance................................................................................................................................................. 410
Data Types ...................................................................................................................................... 411
String .......................................................................................................................................................... 412
typeof ......................................................................................................................................................... 412
undefined vs null ...................................................................................................................................... 413
== and ===.................................................................................................................................................. 414
String Function .......................................................................................................................................... 414
ToString Function ..................................................................................................................................... 415
Number Function ...................................................................................................................................... 415
ParseInt Function...................................................................................................................................... 416
ParseFloat Function ................................................................................................................................. 418
+ Unary Operator ...................................................................................................................................... 419
toFixed() function ..................................................................................................................................... 419
String Functions ............................................................................................................................. 420
toUpperCase( ) .......................................................................................................................................... 420
toLowerCase( ) .......................................................................................................................................... 421
length ......................................................................................................................................................... 421
charAt( ) ..................................................................................................................................................... 421
charCodeAt( ) ............................................................................................................................................ 422
substr( ) ...................................................................................................................................................... 422
indexOf( ) ................................................................................................................................................... 423
replace( ) .................................................................................................................................................... 424
split( ) ......................................................................................................................................................... 425
trim( ) .......................................................................................................................................................... 425
concat( ) ..................................................................................................................................................... 426
Date Functions ............................................................................................................................... 426
new Date( ) ................................................................................................................................................ 426
toLocaleDateString( ) ............................................................................................................................... 427

D. Harsha Vardhan (UI Expert) P a g e 12 | 499

 HTML, CSS, JavaScript, Bootstrap

toLocaleTimeString( ) ............................................................................................................................... 427

getTime( ) .................................................................................................................................................. 427
getDay( ) .................................................................................................................................................... 428
getDate( ) ................................................................................................................................................... 428
getMonth( )................................................................................................................................................ 429
getFullYear( )............................................................................................................................................. 429
getHours( ) ................................................................................................................................................. 430
getMinutes( ) ............................................................................................................................................. 430
getSeconds( ) ............................................................................................................................................. 431
getMilliseconds( ) ..................................................................................................................................... 431
Creating a Custom Date: .......................................................................................................................... 431
Advanced ......................................................................................................................................... 432
NoScript ..................................................................................................................................................... 432
Clousers ..................................................................................................................................................... 432
Hoisting ...................................................................................................................................................... 434
DOM ................................................................................................................................................. 434
I) Window ........................................................................................................................................ 435
1. location.href .......................................................................................................................................... 436
2. navigator.userAgent ............................................................................................................................ 436
3. navigator.screenX................................................................................................................................. 436
4. navigator.screenY ................................................................................................................................. 436
5. alert()...................................................................................................................................................... 437
6. confirm() ................................................................................................................................................ 437
7. print() ..................................................................................................................................................... 438
8. setTimeout() .......................................................................................................................................... 438
9. setInterval() ........................................................................................................................................... 439
10. scrollTo() .............................................................................................................................................. 439
11. open() ................................................................................................................................................... 440
II) Document ................................................................................................................................... 440
1. title ......................................................................................................................................................... 441
2. head ........................................................................................................................................................ 441
3. body ........................................................................................................................................................ 441
4. images .................................................................................................................................................... 441
5. links ........................................................................................................................................................ 441
6. URL ......................................................................................................................................................... 441
document.write() ...................................................................................................................................... 442
document.getElementsByName() .......................................................................................................... 442
document.getElementsByTagName() .................................................................................................... 443

D. Harsha Vardhan (UI Expert) P a g e 13 | 499

 HTML, CSS, JavaScript, Bootstrap

document.getElementsByClassName() ................................................................................................. 443

document.querySelectorAll() .................................................................................................................. 444
document.querySelector() ...................................................................................................................... 444
III) Element ...................................................................................................................................... 445
tagName .................................................................................................................................................... 445
id ................................................................................................................................................................. 445
innerHTML ................................................................................................................................................. 446
innerText ................................................................................................................................................... 446
style ............................................................................................................................................................ 446
parentElement .......................................................................................................................................... 447
children ...................................................................................................................................................... 447
scrollTop .................................................................................................................................................... 448
setAttribute() ............................................................................................................................................ 449
getAttribute() ........................................................................................................................................... 449
removeAttribute() .................................................................................................................................... 449
attributes ................................................................................................................................................... 450
hasAttribute() ........................................................................................................................................... 450
focus() ........................................................................................................................................................ 451
click() .......................................................................................................................................................... 451
remove() ..................................................................................................................................................... 452
document.createElement() ..................................................................................................................... 452
appendChild() ............................................................................................................................................ 452
addEventListener() ........................................................................................................................ 453
List of Events ............................................................................................................................................. 453
“Click” event .............................................................................................................................................. 454
“Dblclick” event ........................................................................................................................................ 454
“Mouseover” and “Mouseout” events ................................................................................................... 455
“Mousemove” event ................................................................................................................................. 456
“Keyup” event ........................................................................................................................................... 457
“Keypress” event ...................................................................................................................................... 458
“Focus” and “Blur” events ....................................................................................................................... 460
“Change” event ......................................................................................................................................... 461
“Contextmenu” event .............................................................................................................................. 464
“Cut”, “Copy”, “Paste” events ................................................................................................................. 465
“this” keyword .......................................................................................................................................... 466
Login - Example ......................................................................................................................................... 466
Add, Subtract, Multiply, Divide Example ............................................................................................... 467
Validations ...................................................................................................................................... 468

D. Harsha Vardhan (UI Expert) P a g e 14 | 499

 HTML, CSS, JavaScript, Bootstrap

Regular Expressions ................................................................................................................................. 470

Types of JavaScript ........................................................................................................................ 472
1. Internal JavaScript ............................................................................................................................... 472
2. External JavaScript ............................................................................................................................... 472
AJAX ................................................................................................................................................ 473
Advantages of AJAX ................................................................................................................................. 474
Types of AJAX request ............................................................................................................................. 474
The “XMLHttpRequest” class .................................................................................................................. 474
AJAX – NodeJS – Simple - Example ........................................................................................................ 476
AJAX – NodeJS – Json Object - Example ............................................................................................... 477
AJAX – NodeJS – Json Array - Example ................................................................................................. 478
JavaScript - New Features ............................................................................................................ 481
Introduction to JavaScript 6 .................................................................................................................... 481
Class-based OOP ............................................................................................................................ 481
Classes ........................................................................................................................................................ 481
Classes ........................................................................................................................................................ 482
Constructors .............................................................................................................................................. 483
Methods ..................................................................................................................................................... 485
Inheritance................................................................................................................................................. 486
Method Overriding ................................................................................................................................... 487
Misc. Concepts ................................................................................................................................ 489
Set and Get Methods ................................................................................................................................ 489
Default Arguments ................................................................................................................................... 490
Arrow Functions ........................................................................................................................................ 491
Let ............................................................................................................................................................... 492
Const .......................................................................................................................................................... 492
Rest (...) Operator ..................................................................................................................................... 493
Destructuring ............................................................................................................................................ 494
Multiline Strings ....................................................................................................................................... 495
String Interpolation .................................................................................................................................. 496
Reading Elements from Array ................................................................................................................. 496

D. Harsha Vardhan (UI Expert) P a g e 15 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 16 | 499

 HTML, CSS, JavaScript, Bootstrap

HTML, CSS, JavaScript, Bootstrap

Fundamentals
Application
• It is a program that runs based on the operating system.
• Program is a collection of statements (instructions) to the system.
• For example, a statement instructs the computer to store a value. Another statement instructs the
computer to do addition of numbers.
• Examples: Notepad, MS Word, Google, Facebook, Flipkart etc.

Client
• It is a machine or device (desktop, laptop, tablet, phone or Smart TV), which can access the data
from server.
• The device which is used by the user is called as "client".

Browser
• It is software (tool) installed on the client, to see the output of the web page. User gives input in the
browser and gets the output in the browser.
• The browser sends a request to server to get web page.
• Browser provides navigation among web pages.
• Browser executes the html, css, javascript programs and displays corresponding output to the
user.
• Browsers are developed by different companies. For example, "Chrome" browser was developed
by "Google" company.
Important browsers:
▪ Google Chrome
▪ Mozilla Firefox
▪ Microsoft Internet Explorer
▪ Microsoft Edge
▪ Apple Safari

D. Harsha Vardhan (UI Expert) P a g e 17 | 499

 HTML, CSS, JavaScript, Bootstrap

▪ Android Browser
▪ Opera

Web application
• It is a set of programs that are running on the browser to interact with the user.
• It is responsible to store information temporarily.
• It is responsible to interact with server i.e. sending request to server and get response from server.

Http
• Http stands for “Hypertext Transfer Protocol”.
• It is a protocol, which provides a set of rules to send request to server and get response from server.
• Http protocol defines "request format" and "response format".
• Http protocol defines HTTP status codes, Http Content Types etc.

D. Harsha Vardhan (UI Expert) P a g e 18 | 499

 HTML, CSS, JavaScript, Bootstrap

HTML 4 & 5

Introduction to HTML
• HTML stands for “Hypertext Markup Language”.
• “Hypertext” means “the text that can be transferred from internet server to internet client”.
• HTML is a markup language. The markup language is a language, which syntax will be in the form
of tags.
• HTML is used to design web pages. That means HTML is used to create elements (such as headings,
paragraphs, icons, menus, logos, images, textboxes, buttons etc.) in the web pages.
• HTML is easy language to understand.
• HTML is “client side language”. That means the html code executes on the client (browser).
• HTML is supported by all the browsers such as Google Chrome, Mozilla Firefox, Microsoft Internet
Explorer, Safari, Opera and other browsers.
• HTML is used developed by “Tim Berners-Lee” and maintained by “W3C” (World Wide Web).
• HTML is used in all real web sites today.
• The file extension should be “.html”.
• HTML is the interpreter-based language. That means the HTML code will be converted into
machine language in line-by-line manner. Browser interprets HTML code.
• HTML is not a case sensitive language. That means you can write the html code in either upper case
or lower case.

HTML Versions
• HTML 1.0 : Nov 1991
• HTML 2.0 : Mar 1995
• HTML 3.0 : Jan 1997
• HTML 4.0 : Dec 1997
• HTML 5.0 : Oct 2014
• HTML 5.1 : Nov 2016
• HTML 5.2 : Dec 2017

Tag
• A tag is a keyword, enclosed within “<” and “>” in HTML language.
• Tag is instruction / command to browser.
• Tag is used to display some specific output in the web page.
• Syntax: <tag>

D. Harsha Vardhan (UI Expert) P a g e 19 | 499

 HTML, CSS, JavaScript, Bootstrap

Types of tags
• Tags are two types:
1. Paired tags: Contains opening tag and ending tag. The opening tag specifies starting point of
the output. The closing tag specifies end point of the output. Ex: <h1> hello </h1>
2. Unpaired tags: Contains single tag only (no separate ending tag). Ex: <hr>

Syntax of HTML Program

• Every html program should have the following syntax:

• The <html> tag represents starting and ending point of the HTML program. The <html> tag contains
two child tags, those are <head> and <body>
• The <head> tag represents non-content information of the web page. The information that doesn't
appear in the web page is called as "non-content".
• The <body> tag represents content information of the web page. The information that appears in
the web page is called as "content".

1. Installing Visual Studio Code

2. Creating HTML Program
3. Executing HTML Program

1. Installing Visual Studio Code

“Visual Studio Code” is the recommended editor for html, css, javascript and many other languages /
frameworks.
Go to https://code.visualstudio.com

D. Harsha Vardhan (UI Expert) P a g e 20 | 499

 HTML, CSS, JavaScript, Bootstrap

Click on “Download for Windows”.

Note: The version number may be different at your practice time.
Go to “Downloads” folder; you can find “VSCodeSetup-x64-1.19.2.exe” file.

Double click on “VSCodeSetup-x64-1.19.2.exe” file.

Click on “Yes”.

D. Harsha Vardhan (UI Expert) P a g e 21 | 499

 HTML, CSS, JavaScript, Bootstrap

Click on “Next”.

Click on “I accept the agreement”.

Click on “Next”.

D. Harsha Vardhan (UI Expert) P a g e 22 | 499

 HTML, CSS, JavaScript, Bootstrap

Click on “Next”.

Click on “Next”.

D. Harsha Vardhan (UI Expert) P a g e 23 | 499

 HTML, CSS, JavaScript, Bootstrap

Check the checkbox “Add Open with Code action to Windows Explorer file context menu”.
Check the checkbox “Add Open with Code action to Windows Explorer directory context menu”.
Click on “Next”.

Click on “Install”.

D. Harsha Vardhan (UI Expert) P a g e 24 | 499

 HTML, CSS, JavaScript, Bootstrap

Installation is going on….

Click on “Finish”.

D. Harsha Vardhan (UI Expert) P a g e 25 | 499

 HTML, CSS, JavaScript, Bootstrap

2. Create HTML Program

• Open “Visual Studio Code”, by clicking on “Start” – “Visual Studio Code”.

• Visual Studio Code opened.

D. Harsha Vardhan (UI Expert) P a g e 26 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 27 | 499

 HTML, CSS, JavaScript, Bootstrap

• Go to “File” – “New File”.

D. Harsha Vardhan (UI Expert) P a g e 28 | 499

 HTML, CSS, JavaScript, Bootstrap

• Type the program as follows:

D. Harsha Vardhan (UI Expert) P a g e 29 | 499

 HTML, CSS, JavaScript, Bootstrap

• Go to “File” menu – “Save” (or) Press Ctrl+S.

D. Harsha Vardhan (UI Expert) P a g e 30 | 499

 HTML, CSS, JavaScript, Bootstrap

• Go to "c:\" and click on "New folder". Enter the new folder name as "html".
• Select “c:\html” folder and enter the filename as “first.html”.
• Click on “Save”.
• Now the html file (c:\html\first.html) is ready.

3. Execute the HTML Program

• Go to “Computer” or “This PC” and go to “c:\html” folder.

D. Harsha Vardhan (UI Expert) P a g e 31 | 499

 HTML, CSS, JavaScript, Bootstrap

• Double click on “first.html” (or) Right click on “first.html” and click on “Open With” – “Google
Chrome”.

Output: Hello World

HTML Syntax Tags

<html>
• <html> tag represents starting and ending point of the html program. The <html> tag contains two
child tags, those are <head> and <body>.
Syntax:
<html> </html>
Example:
<html> </html>

D. Harsha Vardhan (UI Expert) P a g e 32 | 499

 HTML, CSS, JavaScript, Bootstrap

<head>
• <head> tag represents non content information of the page. The information that doesn't appear
in the web page is called as "non content".
Syntax:
<head> </head>
Example:
<head> </head>

<body>
• <body> tag represents content information of the page. The information that appears inside the
web page is called as "content".
Syntax:
<body> </body>
Example:
<body> </body>

<title>
• <title> tag is used to specify the title of the web page that appears in the browser’s title bar.
• <title> tag should be used in <head> tag only.
• <title> is a paired tag.
Syntax:
<title>Title here</title>
Example:
<title>My title</title>

Attributes
• Attributes are the details about the tag (command).
• Every tag has its own set of attributes.
• Attribute contains a value; The value should be written inside the double quotes.
Syntax: <tag attribute=”value”></tag>

• DOCTYPE is a directive in HTML, which tells the browser about the version of html that you are
using in the web page.
• Various versions of html have various DOCTYPE’s.

1. HTML 4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

D. Harsha Vardhan (UI Expert) P a g e 33 | 499

 HTML, CSS, JavaScript, Bootstrap

2. XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3. HTML 5
<!DOCTYPE html>

Headings
<h1>
• It is used to create first level heading (main heading). The headings are displayed in very large size
in the output. Every browser assigns a specific size for each level of heading. The size of heading is
decided by the browsers, not fixed.
• It is a paired tag.
Syntax:
<h1>heading here</h1>
Example:
<h1>Heading 1 here</h1>

<h2>
• It is used to create second level heading (sub heading).
• It is a paired tag.
Syntax:
<h2>heading here</h2>
Example:
<h2>Heading 2 here</h2>

<h3>
• It is used to create third level heading (sub heading).
• It is a paired tag.
Syntax:
<h3>heading here</h3>
Example:
<h3>Heading 3 here</h3>

<h4>
• It is used to create third level heading (sub heading).
• It is a paired tag.
Syntax:

D. Harsha Vardhan (UI Expert) P a g e 34 | 499

 HTML, CSS, JavaScript, Bootstrap

<h4>heading here</h4>
Example:
<h4>Heading 4 here</h4>

<h5>
• It is used to create third level heading (sub heading).
• It is a paired tag.
Syntax:
<h5>heading here</h5>
Example:
<h5>Heading 5 here</h5>

<h6>
• It is used to create third level heading (sub heading).
• It is a paired tag.
Syntax:
<h6>heading here</h6>
Example:
<h6>Heading 6 here</h6>

Example on Headings:

Paragraphs
• <p> tag is used to create a paragraph.
• Browsers display a line break, before and after each paragraph.
• Browsers display an empty line between paragraphs.
• It is a paired tag.

D. Harsha Vardhan (UI Expert) P a g e 35 | 499

 HTML, CSS, JavaScript, Bootstrap

Syntax:
<p>paragraph here</p>
Example:
<p>Hello</p>

Example on <p>

<br>
• It is used to moves the cursor to the next line.
• The content next to the <br> will be display in the next line.
• It is an unpaired tag.
Syntax:
<br>
Example:
<br>

D. Harsha Vardhan (UI Expert) P a g e 36 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on <br>

<b>
• It is used to display the text in bold.
• The text enclosed within the <b> tag will be display as bold.
• Use <b> tag to display important text that you want to highlight.
• It is a paired tag.
Syntax:
<b>bold text</b>
Example:
<b>Hello</b>

Example of <b>

<i>
• It is used to display the text in italic.
• The text enclosed within the <i> tag will be display as italic.
• It is a paired tag.
Syntax:
<i>italic text</i>
Example:
<i>Hello</i>

D. Harsha Vardhan (UI Expert) P a g e 37 | 499

 HTML, CSS, JavaScript, Bootstrap

Example of <i>

<u>
• It is used to display the text in underline.
• The text enclosed within the <u> tag will be underlined.
• Use <u> tag display important text.
• It is a paired tag.
Syntax:
<u>underline text</u>
Example:
<u>Hello</u>

Example on <u>

<strike>
• It is used to display the text in strikeout.
• The <strike> tag to display un-important text.
• It is a paired tag.
Syntax:
<strike>strikeout text</strike>
Example:
<strike>Hello</strike>

D. Harsha Vardhan (UI Expert) P a g e 38 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on <strike>

<strong>
• It is used to display the text in strong.
• <strong> and <b> tags are visually same.
• The strong tag content will be pronounced "strongly" (stressfully) by the screen readers for the
blind people.
• It is a paired tag.
Syntax:
<strong>strong text</strong>
Example:
<strong>Hello</strong>

Example on <strong>

<em>
• It is used to display the text in emphasis (special status).
• <em> and <i> tags visually same.
• The strong tag content will be pronounced stylishly by the screen readers for the blind people.
• It is a paired tag.
Syntax:
<em>emphasis text</em>
Example:
<em>Hello</em>

D. Harsha Vardhan (UI Expert) P a g e 39 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on <em>

<sup>
• It is used to display the text in superscript (The text appears a bit upper side of normal line).
• Use <sup> tag to display square or cube etc.
• It is a paired tag.
Syntax:
^{superscript text}
Example:
^Hello

Example on <sup>

<sub>
• It is used to display the text in subscript (The text appears a bit bottom side of normal line).
• It is a paired tag.
Syntax:
_{subscript text}
Example:
_Hello

Example on <sub>

D. Harsha Vardhan (UI Expert) P a g e 40 | 499

 HTML, CSS, JavaScript, Bootstrap

<img>
• It is used to display an image in the web page.
• It is strongly recommended to place the image file in the same folder, where the html file is present.
For example, if the html file is present within "c:\html" folder, we have to place the image file either
in the "c:\html" folder itself or in any subfolder of the "c:\html" folder.
• It is an unpaired tag.
Syntax:
<img src="image path here">
Example:
<img src="img1.jpg" width="200px" height="130px" title="this is tooltip">
Attributes:
1. src:
• It is used to specify path of the image file. If the image file and html file both are in
the same folder, no need to specify the full path of the image.
2. width:
• It is used to specify width (horizontal size) of the image. It represents the value in
the form of pixels. A pixel is a small "dot" (.) on the screen.
3. height
• It is used to specify height (vertical size) of the image.
4. title
• It is used to specify the tooltip (that appears when the user places mouse pointer on
the image).
5. alt
• It is used to specify the alternate text (that appears when the image is not loaded in
the browser at run time). It is strongly recommended to use "alt" for every <img>
tag in real-time, because, if the image is not loaded, at least the "alt" text appears
to the user.

Example on <img>

D. Harsha Vardhan (UI Expert) P a g e 41 | 499

 HTML, CSS, JavaScript, Bootstrap

<a>
• It is used to create a hyperlink. When the user clicks on the hyperlink, the specified web page or
web site will be opened.
• The web basically contains links to other pages, so it is very common to use <a> tag in real-time.
• By default, every browser provides built-in style for each hyperlink, i.e. blue color + hand symbol
for mouse cursor + underline. We can customize this style by using CSS.
• It is a paired tag.
Syntax:
<a href="target url here">link text here</a>
Example:
<a href="http://www.google.com">Google</a>
Attributes:
6. href:
• It is used to specify the address of web page or web site that is to be opened when
the user clicks on the hyperlink. It can contain address of an internet web site, local
html file, local other type of file such as pdf or word document, image file etc.
7. target="_blank":
• It is used to open the target web page or web site in a separate browser tab.

Example on <a>

Page1.html

Page2.html

D. Harsha Vardhan (UI Expert) P a g e 42 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on internet links

Example on target

Example on file links

Note: Place “vodafone.jpg”, “document1.docx”, “sample.pdf”, “rain.mp3”, “trailer.mp4” in

“c:\html” folder.

D. Harsha Vardhan (UI Expert) P a g e 43 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on <a> with <img>

Example on <a> with internal links

D. Harsha Vardhan (UI Expert) P a g e 44 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on <a> with page navigation

Countries.html

india.html

uk.html

D. Harsha Vardhan (UI Expert) P a g e 45 | 499

 HTML, CSS, JavaScript, Bootstrap

us.html

<ul>
• UL stands for “Un-Ordered List”.
• It is used to display the list of items with bullets.
• Inside <ul> tag, you should place one or more <li> tags.
• Use <ul> tag if you want to display any names such as person names, country names, city names
etc.
• It is a paired tag.
Syntax:
<ul>
<li>text here</li>
<li>text here</li>
…
</ul>

Example:
<ul>
<li>India</li>
<li>UK</li>
<li>US</li>
</ul>

D. Harsha Vardhan (UI Expert) P a g e 46 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on <ul>

<ol>
• OL stands for “Ordered List”.
• It is used to display the list of items with numbers.
• Inside <ol> tag, you should place one or more <li> tags.
• Use <ol> tag if you want to display names with numbers. For example, list of academic subjects (in
order).
• It is a paired tag.
Syntax:
<ol>
<li>text here</li>
<li>text here</li>
…
</ol>

Example:
<ol>
<li>India</li>
<li>UK</li>
<li>US</li>
</ol>

Example on <ol>

D. Harsha Vardhan (UI Expert) P a g e 47 | 499

 HTML, CSS, JavaScript, Bootstrap

<dl>
• DL stands for “Definition List”.
• It is used to display a collection of definitions.
• Inside <dl> tag, you should place one or more <dt> and <dd> tags.
• It is a paired tag.
• <dt> and <dd> tags are also paired tags.
• <dt> is used to specify definition title.
• <dd> is used to specify definition data. That means it represents actual definition.
Syntax:
<dl>
<dt>title here</dt>
<dd>definition here</dd>
<dt>title here</dt>
<dd>definition here</dd>
…
</dl>

Example:
<dl>
<dt>HTML</dt>
<dd>HTML is used to design web pages.</dd>
<dt>CSS</dt>
<dd>CSS is used to apply styles.</dd>
<dt>JavaScript</dt>
<dd>JavaScript is used to create functionality.</dd>
</dl>

Example on <dl>

D. Harsha Vardhan (UI Expert) P a g e 48 | 499

 HTML, CSS, JavaScript, Bootstrap

<table>
• <table> tag is used to display table type of data in the web page.
• A table is a collection of rows. Each row is a collection of cells.
• A table is represented as <table> tag; A row is represented as <tr>; A cell is represented as <td>.
• Inside the <table> tag, we have to use <tr>; Inside the <tr> tag, we have to use <td>.
• If the cell is representing the column heading, you can use <th> tag, instead of <td> tag.
• <caption> tag is used to specify a title for the table.
• “tr” stands for “Table row”.
• “td” stands for “Table data”.
• “th” stands for “Table header”.
• <table>, <tr>, <th>, <td> and <caption> tags are paired tags.

Syntax:
<table>
<tr>
<td>data here</td>
<td>data here</td>
…
</tr>
…
</table>

Example:

<table border="1">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>

D. Harsha Vardhan (UI Expert) P a g e 49 | 499

 HTML, CSS, JavaScript, Bootstrap

<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
</table>

Attributes of <table> tag:

1. border
• “0”: No border
• “1”: with border

• Attributes of <td> or <th> tag:

1. rowspan
• “n”: Specifies the no. of rows to merge. The current cell occupies the space of ‘n’
no. of cells.
2. colspan
• “n px”: Specifies the no. of pixels distance between cell border and cell content.

Example on simple table

Realtime Example on table

D. Harsha Vardhan (UI Expert) P a g e 50 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on colspan attribute

D. Harsha Vardhan (UI Expert) P a g e 51 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on rowspan attribute:

• <iframe> tag is used to display another web page or web site within the current web page.
• Iframe stands for “inline frame”.
• <iframe> is a paired tag.
Syntax:
<iframe src="web site address here" width="n px" height="n px">
</iframe>
Example:
<iframe src="http://www.airtel.in" width="400px" height="300px">
</iframe>
Attributes of <iframe> tag:
3. src

D. Harsha Vardhan (UI Expert) P a g e 52 | 499

 HTML, CSS, JavaScript, Bootstrap

• “web site path”: Specifies the web site or web page path that is to be displayed in
the iframe.
4. width
• “n px”: Specifies the horizontal size of the iframe.
5. height
• “n px”: Specifies the vertical size of the iframe.
6. frameborder
• “n px”: Specifies border of the iframe.

Example on <iframe>

Example on Youtube <iframe>

Example on navigation with <iframe>

Index.html

D. Harsha Vardhan (UI Expert) P a g e 53 | 499

 HTML, CSS, JavaScript, Bootstrap

home.html

about.html

contact.html

• HTML Entities are pre-defined codes for displaying special symbols within the web page.
• HTML Entities are case sensitive. These must be used in lower case only.
Result Description Entity Name Entity Number
[space] non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;

D. Harsha Vardhan (UI Expert) P a g e 54 | 499

 HTML, CSS, JavaScript, Bootstrap

€ euro &euro; &#8364;

§ section &sect; &#167;
© copyright &copy; &#169;
® registered trademark &reg; &#174;
™ trademark &trade; &#8482;

Example on HTML Entities

• <meta> tag is used to specify meta data (additional details) about the web page.
• <meta> tag provides information about the web page. Google like search engines will display your
web page in the google search results, whenever one or more keywords are matching. You must
upload your web page in the internet server to really use this.
• <meta> tag is an unpaired tag.
Example:
<meta name="keywords" content="Sony, Television, Price, Hyderabad">
<meta name="description" content="Sony LED BRAVIA Prices">
<meta name="author" content="Harsha">

Example on <meta> tag

D. Harsha Vardhan (UI Expert) P a g e 55 | 499

 HTML, CSS, JavaScript, Bootstrap

<form>
• <form> tag is used to group-up the input elements; so that we can submit the entire form to the
server.
• A form is a collection of form elements such as <input>, <textarea> and <select>.
• Forms are used to collect information from the user. For example, registration for collects user
details such as username, email, password, mobile number etc.
• <form> is a paired tag.
Syntax:
<form action="server page address here" method="get">
form elements here
</form>

Example:
<form action="http://localhost/serverpage.aspx" method="get">
</form>

Attributes of <form> tag:

7. action: Used to specify the server page address to which the form is to be submitted.
8. method:
 get:
▪ Displays the parameter names and values in the browser’s address bar.
▪ Useful for searching and retrieving the data from database.
 post
▪ Hides the parameter names and values in the browser’s address bar and allows
you to pass the data in hidden format.
▪ Useful for insert, update, delete, registration and login operations.
▪ The "get" and "post" can be explained in server side courses like Java, .NET,
PHP, NodeJS etc.

D. Harsha Vardhan (UI Expert) P a g e 56 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on <form> tag

<input>
• <input> tag is used to create a form control (form element).
• <input> tag can create form elements such as Textbox, Checkbox, Radio button, Browser button,
submit button etc.
• <input> is an unpaired tag.
Syntax:
<input type="option here">
Example:
<input type="text">

Attributes of <input> tag:

1. type
• “text”: Creates textbox. Textbox is used to accept a string value from the user.
Textbox can accept email, mobile etc. The user can enter any no. of characters in
the textbox.
• “password”: Creates password textbox. Password textbox is used to accept a
password from the user. Each character in the password textbox will be displayed
as "." (dot).

• “submit”: Creates a submit button. Submit button is used to submit the form to the
server page. While submitting the form, all the input parameters and their values
will be sent to the server program as "query string". Ex:
?param1=value&param2=value. The server program receives the submitted values
and do some process such as storing the data into database. For every form, it is
recommended to create a submit button. But the <input type="submit"> creates a
normal (simple submit button).
• “image”: Creates a “image submit” button. Submit button is used to submit the
form to the server page. When the user clicks on the image submit button, it also

D. Harsha Vardhan (UI Expert) P a g e 57 | 499

 HTML, CSS, JavaScript, Bootstrap

submits the clicked position (X and Y co-ordinates) will be submitted to the server,
along with the values of other form elements.

• “button”: Creates a normal button. When the user clicks on the general button,
nothing happens by default, but you can call “JavaScript Click event” when the user
clicks on the button.
• “checkbox”: Creates a check box. Checkbox is used to display Yes/No type of
option to the user. If the checkbox is checked, it means "yes". If the checkbox is
unchecked, it means "no".
• “radio”: Creates a radio button. Radio button is used to display two or more
options to the user and allow the user to select any one of them. The “name” of radio
buttons should be same to group-up them.
• “hidden”: Creates a hidden field. Hidden field will not be appear in the web page;
but will be submitted to the server. Hidden values are useful for the programmer to
send browser / client details to server. Use hidden field when you want to submit
some fixed value to server; that you don't want to accept from the user.
• “file”: Creates a file browse button. Browse button is used for “attachment” option.
For example, you can upload image files / documents in gmail or facebook.
• “reset”: Creates a reset button. Reset button clears all fields (textboxes and others)
within the current form. The reset button must be a part of the <form> tag; then only
it can recognize the elements that are present inside the same form.

• "color": Used to create a color box, where the user can select a color.
• "date": Used to create a date box (date picker / popup calendar), where the user
can select a date.
• "time": Used to create a time box, where the user can enter a time.

• "datetime-local": Used to create a date-cum-time box, where the user can select a
date and time also.
• "month": Used to create a month box, where the user can select a month.

• "week": Used to create a week box, where the user can select a week.

• "search": Used to create a search box, where the user can enter some search text.
It also displays clear button (X) to clear the text inside the search box.

• "number": Used to create a numerical textbox, where the user can enter some
number. It either prevents typing alphabets and special symbols, or shows error
message when alphabets / special symbols are entered. Some browsers also display
increase / decrease buttons for the number textbox.

D. Harsha Vardhan (UI Expert) P a g e 58 | 499

 HTML, CSS, JavaScript, Bootstrap

• "range": Used to create a slider, based on the specific range (minimum to

maximum). Ex: price range, volume.

• "email": Used to create an email textbox, where the user can enter a valid email
address. It displays error message automatically, if the given email address is
invalid.
• "url": Used to create a url textbox, where the user can enter a valid website url. Ex:
http://www.google.com

2. maxlength
• Specifies the maximum no. of characters that can be typed in the textbox. By
default, the user can enter unlimited no. of characters in the textbox. Use
"Maxlength" if you want to limit to specific no. of characters./
3. readonly="readonly"
• Makes the textbox as readonly; so that the user can see the value but can’t type
anything the textbox. In the readonly textbox, the user can see, select, copy the text
value. Cursor can be placed inside the readonly textbox.
4. tabindex
• Specifies tab order. It defines tab sequence. When the user presses TAB key on the
keyboard, the cursor jumps to the next form element which is having next higher
Tabindex.
5. value
• Represents the current value of the input element. In case of checkbox and radio
button, the "value" must be set by the developer; in other type of inputs, the user
enters the value.
6. name
• Represents programmatic name of the input element that will be submitted to the
server. Based on the “name”, we can get the value of the element in the server side
program.
7. id
• Represents identification name of the input element that can be used in html, css,
and javascript to get the element programmatically.
8. src

• Used to specify the path of the image in case of <input type="image">. It by default,
refers to the same folder. It is recommended to place the image file in the same
folder, where the html file is present.

D. Harsha Vardhan (UI Expert) P a g e 59 | 499

 HTML, CSS, JavaScript, Bootstrap

9. width
• Used to specify the width of the image in case of <input type="image">. It represents
the value in the form of pixels.
10. height

• Used to specify the height of the image in case of <input type="image">. It

represents the value in the form of pixels.
11. checked=”checked”
• Used to check the checkbox or radio button by default, in case of <input
type=”checkbox”> or <input type=”radio”>.
12. disabled=”disabled”
• Used to disable the element. If the element (button, textbox, checkbox, radio
button) is disabled, the user can't modify or touch the value of the element. The
disabled element will be out of TAB sequence. That means cursor will not stop at
the disabled element.

13. placeholder
o Used to display watermark text in the textbox.
o Syntax: <input type=”text” placeholder=”any text”>

14. autofocus
o Used to display the cursor directly in the specific textbox, when the web page
opened in the browser.
o Syntax: <input type=”text” autofocus=”autofocus”>

15. required
o Used to make the field (textbox) as mandatory. If the textbox is empty, it shows
error message automatically and the form will not be submitted to server.
o Syntax: <input type=”text” required=”required”>

16. pattern
o Used to apply a regular expression for the textbox for validation purpose.
o Regular expression represents “pattern” of the value.
o Ex: Alphabets only allowed, numbers only allowed etc.
o Syntax: <input type=”text” pattern=”regular expression here”>

17. min
o Specifies the minimum value.

D. Harsha Vardhan (UI Expert) P a g e 60 | 499

 HTML, CSS, JavaScript, Bootstrap

o Applicable only for <input type=”number”>, <input type=”range”> and <input

type=”date”>.
o Syntax: <input type=”number | range | date” min=”minimum”>

18. max
o Specifies the maximum value.
o Applicable only for <input type=”number”>, <input type=”range”> and <input
type=”date”>.
o Syntax: <input type=”number | range | date” max=”maximum”>

19. step
o Specifies increment / decrement value for <input type=”number”>
o Syntax: <input type=”number” step=”value”>

20. novalidate
o Disables the built-in HTML 5 validations, such as required, min, max, email, date,
number etc.
o Syntax: <form novalidate=”novalidate”></form>
o Syntax: <input type=”submit” formnovalidate=”formnovalidate”>

21. formaction
o Specifies server url, to which you want to submit the form.
o Syntax: <input type=”submit” formaction=”url”>

22. formmethod
o Specifies type of submission: GET | POST
o Syntax: <input type=”submit” formmethod=”get | post”>

23. formtarget
o Opens the server page in a new browser tab, while submitting.
o Syntax: <input type=”submit” formtarget=”_target”>

24. form
o Used to make the the element as a member of the form; so that the element also
will be submitted along with other elements, while submitting the form.
o Syntax: <input type=”text” form=”id of form here”>

25. multiple
o Allows the user to select multiple files in <input type=”file”>
o Syntax: <input type=”file” multiple=”multiple”>

26. autocomplete

D. Harsha Vardhan (UI Expert) P a g e 61 | 499

 HTML, CSS, JavaScript, Bootstrap

o Browser automatically stores the history of textbox values and display the same in
the textbox that has same name.
o The “autocomplete” attribute disables this feature.
o Syntax: <input type=”text” autocomplete=”off”>
o Syntax: <form autocomplete=”off”></form>

Example on Textboxes

Example on Password TextBox

Example on CheckBox

Example on CheckBox - Checked

D. Harsha Vardhan (UI Expert) P a g e 62 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Radio Buttons

Example on Radio Button - Checked

Example on File Browse Button

Example on reset button

D. Harsha Vardhan (UI Expert) P a g e 63 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Submit button

Example on Login Form

D. Harsha Vardhan (UI Expert) P a g e 64 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Registration Form

D. Harsha Vardhan (UI Expert) P a g e 65 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Post Submit Button

Example on Image Submit Button

Note: Copy and paste “ok.png” into “c:\html” folder.

Example on general button

Example on hidden field

D. Harsha Vardhan (UI Expert) P a g e 66 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on New Input Types - Color

Example on New Input Types - Date

Example on New Input Types - Time

D. Harsha Vardhan (UI Expert) P a g e 67 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on New Input Types – Datetime-local

Example on New Input Types – Month

Example on New Input Types – Week

Example on New Input Types – Search

D. Harsha Vardhan (UI Expert) P a g e 68 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on New Input Types – Number

Example on New Input Types – Range

Example on New Input Types – Email

D. Harsha Vardhan (UI Expert) P a g e 69 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on New Input Types – Url

Example on readonly

Example on TextBox disabled

Example on Button disabled

D. Harsha Vardhan (UI Expert) P a g e 70 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Maxlength

Example on Tabindex

Example on Placeholder

Example on Autofocus

D. Harsha Vardhan (UI Expert) P a g e 71 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Required

Example on Pattern

Example on Min and Max

D. Harsha Vardhan (UI Expert) P a g e 72 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Step

Example on Novalidate

D. Harsha Vardhan (UI Expert) P a g e 73 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Formaction Formmethod Formtarget

Example on Form

Example on Multiple

D. Harsha Vardhan (UI Expert) P a g e 74 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Autocomplete

<button>
• <button> tag is used to display a submit button with image and text.
• The <button> tag is a contain, inside which you can place any content text or other html tags.
• <button> is a paired tag.
Syntax:
<button>
<img src="image file path here">
Text here
</button>

Example:
<button>
<img src="ok.png"><br>OK
</button>

Example on <button> tag

D. Harsha Vardhan (UI Expert) P a g e 75 | 499

 HTML, CSS, JavaScript, Bootstrap

<fieldset>
• <fieldset> tag is used to display a box around a set of fields.
• <fieldset> tag is a paired tag.
• Fieldset if used to group-up the set of form elements. For example, all the personal details of the
user such as Firstname, Lastname, Email, Mobile etc., can be placed inside the fieldset.
• Inside a <form> tag, we can place any no. of <fieldset> tags.
Syntax:
<fieldset>
Your textboxes here
</fieldset>

Example:
<fieldset>
<input type=”text”><br>
<input type=”text”>
</fieldset>

Example on Fieldset

<legend>
• <legend> tag is used to display a title for the fieldset.
• <legend> tag is a paired tag.
• <legend> tag can be used only inside the <fieldset>.

D. Harsha Vardhan (UI Expert) P a g e 76 | 499

 HTML, CSS, JavaScript, Bootstrap

Syntax:
<fieldset>
<legend>title here</legend>
Your textboxes here
</fieldset>

Example:
<fieldset>
<legend>User details</legend>
<input type=”text”><br>
<input type=”text”>
</fieldset>

Example on Legend

<label>
• <label> tag is used to create field heading.
• The label provides description for the textbox, what value should be entered in the textbox.
• When the user clicks on the label, cursor will be appeared in the associated textbox automatically.
• <label> is a paired tag.
Syntax:
<label for="id of textbox here">label text here</label>

Example:
<label for="TextBox1">Username</label>

Attributes of <label> tag:

1. for: Used to specify the id of the textbox that is associated with the textbox.

D. Harsha Vardhan (UI Expert) P a g e 77 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on <label> tag

<select>
• <select> tag is used to create a dropdownlist or listbox.
• DropDownList is used to display few options to the user and allow the user to select any one of
them.
• ListBox is used to display few options to the user and allow the user to select one or more of them.
• Inside <select> tag, you should use <option> tags. Each <option> tag represents an option in the
dropdownlist.
• Optionally, <optgroup> tag can be used to group-up the <option> tags.
• <select>, <option> and <optgroup> tags are paired tags.
Syntax:
<select name="name here">
<option value="short name here">Full name here</option>
<option value="short name here">Full name here</option>
…
</select>

Example:
<select name="PaymentMode">
<option value="Select">Select</option>
<option value="DC">Debit Card</option>
<option value="CC">Credit Card</option>
<option value="NB">Net Banking</option>
</select>

Attributes of <select> tag:

1. multiple="multiple": Used to convert the dropdownlist as listbox.

D. Harsha Vardhan (UI Expert) P a g e 78 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Dropdownlist

Example on Optgroup

D. Harsha Vardhan (UI Expert) P a g e 79 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on ListBox

Example on Dropdownlist - Selected

D. Harsha Vardhan (UI Expert) P a g e 80 | 499

 HTML, CSS, JavaScript, Bootstrap

<textarea>
• <textarea> tag is used to create a multi-line textbox.
• Ex: Comments, Description etc.
• <textarea> tag is a paired tag.
Syntax:
<textarea name="name here" rows="no. of rows" cols="no. of columns">
</textarea>

Example:
<textarea name="comments" rows="5" cols="25"></textarea>

Example on Textarea

<div>
• <div> is a container.
• Inside <div> tag you can place any content like normal text or any other html tags.
• When you want to divide your web page as no. of parts, each part is represented as <div> tag.
• <div> is a paired tag.
Syntax:
<div>
Your content here
</div>

Example:
<div>
Hello
</div>

D. Harsha Vardhan (UI Expert) P a g e 81 | 499

 HTML, CSS, JavaScript, Bootstrap

<span>
• <span> represents a small amount of text, for which you can apply some special formatting.
• <span> tag doesn't provide any style by default, but we can apply style to the span tag, by using
CSS.
• <span> is a paired tag.
Syntax:
<span>Your content here</span>
Example:
<span>Hello</span>

<hr>
• It is used to display a horizontal line (horizontal ruler).
• It acts as separation between two parts of the web page
• It is an unpaired tag.
Syntax:
<hr>
Example:
<hr>

Example on <hr>

<pre>
• It is used to display the text as-it-is, along with the spaces and line breaks.
• It is a paired tag.
• Generally, <pre> tag is meant for displaying computer programs (for example, "for" loop syntax)
as-it-is.
• It is rare to use <pre> tag in real-time.
Syntax:
<pre>your text here</pre>
Example:

D. Harsha Vardhan (UI Expert) P a g e 82 | 499

 HTML, CSS, JavaScript, Bootstrap

<pre>
one two
three four five
</pre>

Example on <pre>

<abbr>
• It is used to display full-form of a short-form when the user places mouse pointer on it.
• HTML / Browser doesn't provides any built-in abbreviations. We have to set both short form and
full form in the code itself.
• It is a paired tag.
• The "title" tag represents the tooltip (full form), which appears when the user places mouse pointer
on the content. The <title> can be applicable for any html tag (not only for <abbr> tag).
Syntax:
<abbr title="full form here">short form here</abbr>
Example:
<abbr title="as soon as possible">ASAP</abbr>

Example on <abbr>

D. Harsha Vardhan (UI Expert) P a g e 83 | 499

 HTML, CSS, JavaScript, Bootstrap

<bdo>
• It is used to display the text in reverse (right-to-left) order.
• The default is "left-to-right" (LTR).
• The "dir" (direction) attribute decides whether the text should be "left to right" or "right to left".
• The text enclosed within the <bdo> tag will be display in the specific direction.
• It is a paired tag.
Syntax:
<bdo dir="rtl">your text here</bdo>
Example:
<bdo dir="rtl">Hai how are you</bdo>
Attributes:
1. dir:
• ltr: It displays the text in left-to-right.
• rtl: It displays the text in right-to-left.

Example on <bdo>

<audio>
• The <audio> tag plays an audio file in the web page.
• We have to maintain the audio file in the following formats, because different browsers support
different audio formats:
• .mp3 : IE, Chrome, Firefox, Safari, Opera
• .ogg : Chrome, Firefox, Opera
• The autoplay="autoplay" attribute starts playing the audio file as soon as web page is loaded in
the browser.
• The controls="controls" attribute displays audio player skin in the web page.
Syntax:
<audio autoplay=”autoplay” controls=”controls”>
<source src=”filename.mp3” type=”audio/mp3”>

D. Harsha Vardhan (UI Expert) P a g e 84 | 499

 HTML, CSS, JavaScript, Bootstrap

<source src=”filename.ogg” type=”audio/ogg”>

</audio>

Note: The browsers play the first possible file.

Example on <audio>

Note: Copy “rain.mp3” and “rain.ogg” files into current folder.

<video>
• The <video> tag plays a video file in the web page.
• We have to maintain the video file in the following formats, because different browsers support
different video formats:
o .mp4 : IE, Chrome, Firefox, Safari, Opera
o .webm : Chrome, Firefox, Opera
o .ogg : Chrome, Firefox, Opera
• The autoplay="autoplay" attribute starts playing the video file as soon as web page is loaded in the
browser.
• The controls="controls" attribute displays video player skin in the web page.
Syntax:
<video autoplay=”autoplay” controls=”controls” width=”pixels” height=”pixels”>
<source src=”filename.mp4” type=”video/mp4”>
<source src=”filename.ogg” type=”video/ogg”>
<source src=”filename.webm” type=”video/webm”>
</video>

Note: The browsers play the first possible file.

D. Harsha Vardhan (UI Expert) P a g e 85 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on <video>

Note: Copy “trailer.mp4”, “trailer.ogg” and “trailer.webm” files into current folder.

<details> and <summary>

• <details> and <summary> tags are used to allow the user expand / collapse some information,
when the user clicks on the heading.
Syntax:
<details>
<summary>heading</summary>
content
</details>

Example on <details> and <summary>

<figure> and <figcaption>

• <figure> and <figcaption> tags are used to represent an image along with its description.

D. Harsha Vardhan (UI Expert) P a g e 86 | 499

 HTML, CSS, JavaScript, Bootstrap

• Search engines like google can identify the image based on its description.

Syntax:
<figure>
<img src=”filename.extension”>
<figcaption>description here</figcaption>
</figure>

Example on <figure> and <figcaption>

Note: Copy and paste “pulpit.jpg” into current folder.

<datalist>
• It is used to display search suggestions in the textbox.

Syntax:
<datalist id=”id here”>
<option value=”value 1”>text</option>
<option value=”value 1”>text</option>
…
</datalist>
<input type=”text” list=”id here”>

Example on <datalist>

D. Harsha Vardhan (UI Expert) P a g e 87 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 88 | 499

 HTML, CSS, JavaScript, Bootstrap

<progress>
• It is used to display the progress of a task.
• Ex: Downloading progress, Uploading progress.

Syntax:
<progress min=”minimum” max=”maximum”>
</progress>

Example on <progress>

<meter>
• It is used to display percentage of utilization.
• Ex: Disk usage.

Syntax:
<meter min=”minimum” max=”maximum”>
</meter>

Example on <meter>

D. Harsha Vardhan (UI Expert) P a g e 89 | 499

 HTML, CSS, JavaScript, Bootstrap

<output>
• It is used to display the result of some calculation.
• Ex: Displaying “tax” based on “amount”.

Syntax:
<output id=”id here” >
</output>

Example on <output>

D. Harsha Vardhan (UI Expert) P a g e 90 | 499

 HTML, CSS, JavaScript, Bootstrap

<article>
• The <article> tag represents “heading” and “one or more paragraphs”.
Syntax:
<article>
Content here
</article>

Example on <article>

Template Tags
• The following semantic tags are recommended in HTML 5.
• These are used to make the outline of the web page easy to understand.

HTML 4 HTML 5

<div id=”header”> <header>

</div> </header>

<div id=”nav”> <nav>

</div> </nav>

<div id=”leftcol”> <section id=”leftcol”>

</div> </section>

<div id=”pagecontent”> <section id=”pagecontent”>

</div> </section>

D. Harsha Vardhan (UI Expert) P a g e 91 | 499

 HTML, CSS, JavaScript, Bootstrap

<div id=”footer”> <footer>

</div> </footer>

<div id=”rightcol”> <aside>

</div> </aside>

Example on Template Tags

Local Storage
• “Local Storage” is used to store some data in the browser memory permanently, until you manually
delete the data (or) clear the browser history.
• Local storage is used to store only string data.
• Local storage can store unlimited data.
• Local storage data is visible in the browser's developer tools (Inspect Element) option.
• If you clear the browser history, the local storage will be deleted.
• Ex: Google login page automatically stores your name, email and photo on successful login.

D. Harsha Vardhan (UI Expert) P a g e 92 | 499

 HTML, CSS, JavaScript, Bootstrap

Setting data into Local Storage

localStorage.property = value;
(or)
localStorage.setItem(“property”, “value”);

Getting data from Local Storage

localStorage.property
(or)
localStorage.getItem(“property”);

Example on Local Storage

D. Harsha Vardhan (UI Expert) P a g e 93 | 499

 HTML, CSS, JavaScript, Bootstrap

Session Storage
• “Session Storage” is used to store some data in the browser memory temporarily, until the browser
gets closed.
• Session storage also can store string data only, much like local storage.
• Session storage data is also visible in the browser's developer tools (Inspect Element option).
Ex: Facebook stores your email and password after login.

Setting data into Session Storage

sessionStorage.property = value;
(or)
sessionStorage.setItem(“property”, “value”);

Getting data from Session Storage

sessionStorage.property
(or)
sessionStorage.getItem(“property”);

Example on Session Storage

D. Harsha Vardhan (UI Expert) P a g e 94 | 499

 HTML, CSS, JavaScript, Bootstrap

• “Geo Location” concept is used to identify the current location of the client device.
• Geo Location returns latitude, longitude values of the client device location, based on which you
can display maps, driving directions, traffic, address etc.

Steps for development of Geo Location

• Send request to server to get geo location:
navigator.geolocation.getCurrentPosition(successcallback, failurecallback, { timeout: milli
seconds } );

• Receive the latitude, longitude values:

function successcallback(event)
{
event.coords.latitude
event.coords.longitude
}

Example on Geo Location

D. Harsha Vardhan (UI Expert) P a g e 95 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Geo Location – with area name

D. Harsha Vardhan (UI Expert) P a g e 96 | 499

 HTML, CSS, JavaScript, Bootstrap

• “Web Workers” concept is used to execute a javascript file in background, without effecting the
actual performance of the page.
• It is mainly used to do some background process, such as uploading the file, processing some
records etc.
• The specified javascript file executes asynchronously; the code present within the javascript file
can't access the DOM; but it can use postMessage( ) function to pass value from the javascript to
regular script of the web page; then the script present within the web page can receive the value
and do some process for it.

Steps for development of Web Workers

• Create a javascript file (for async execution):
filename.js

Any js code here

postMessage(value);

Note: We can’t access DOM in the async javascript file. We have to use postMessage() function to pass
data from the javascript file to the web page.

D. Harsha Vardhan (UI Expert) P a g e 97 | 499

 HTML, CSS, JavaScript, Bootstrap

• Create an object for “Worker” class:

var w = new Worker(“filename.js”);
The “Worker” class represents an async javascript file.

• Receive message (data) from async javascript file:

w.onmessage = functionname;
function functionname(event)
{
event.data
}

Example on Web Workers

webworkers.html

script.js

D. Harsha Vardhan (UI Expert) P a g e 98 | 499

 HTML, CSS, JavaScript, Bootstrap

• “Drag and Drop” concept allows the user to drag an element and drop into another element.
• We can drag any element and drop into another element.
• When we start dragging the source element, it executes "dragstart" event.
• When we hover on the droppable element, it executes "dragover" event.
• When we release the mouse pointer on the droppable element, it executes "drop" event.

Steps for development of Drag and Drop

• Create a draggable element:
<div id=”div1” draggable=”true”>
</div>

• Create a droppable element:

<div id=”div2”>
</div>

• Handle “dragstart” event of draggable element:

document.getElementById(“div1”).addEventListener(“dragstart”, fun1);
function fun1(event)
{
event.dataTransfer.setData(“variablename”, event.target.id);
}

Note: The “dragstart” event executes when the user starts dragging the draggable
element.

• Handle “dragover” event of droppable element:

D. Harsha Vardhan (UI Expert) P a g e 99 | 499

 HTML, CSS, JavaScript, Bootstrap

document.getElementById(“div2”).addEventListener(“dragover”, fun2);
function fun2(event)
{
event.preventDefault( );
}
Note: The “dragover” event executes when the user drags the draggable element and
places it on the top of droppable element.

• Handle “drop” event of droppable element:

document.getElementById(“div2”).addEventListener(“drop”, fun3);
function fun3(event)
{
var id = event.dataTransfer.getData(“variablename”);
document.getElementById(“div2”).appendChild(document.getElementById(id”));
}
Note: The “drop” event executes when the user drops the draggable element on the
droppable element.

Example on Drag and Drop

D. Harsha Vardhan (UI Expert) P a g e 100 | 499

 HTML, CSS, JavaScript, Bootstrap

• “Offline Apps” concept enables the browser to load the web page from the server for the first time
and store it in the browser memory; but second time onwards, it loads the page from the browser
memory directly, instead of loading it from the server.
• Advantage: The user can view the web page, even without network connection.

D. Harsha Vardhan (UI Expert) P a g e 101 | 499

 HTML, CSS, JavaScript, Bootstrap

Steps for development of Offline Apps

• Create a “manifest” file:
filename.appcache

CACHE MANIFEST
#id
filename.jpg
filename.css
filename.js

• Set the “manifest” file to the html file:

<html manifest=”filename.appcache”>

Example on Offline Apps

c:\html\StyleSheet1.css

c:\html\JavaScript.js

c:\html\sample.appcache

c:\html\index.html

D. Harsha Vardhan (UI Expert) P a g e 102 | 499

 HTML, CSS, JavaScript, Bootstrap

Note: Place “img1.jpg” in the current folder.

Execution
• Download and install “nodejs” from “https://nodejs.org”. Click here to find steps to install NodeJS.
• Open “Command Prompt” and run the following commands:
npm install http-server -g
cd c:\html
http-server

• Open browser and enter the url: http://localhost:8080/index.html

• Browser send continuous requests to server, for every "n" seconds. Ex: 5 seconds.
• This concept is used to get continuous updated information (live information) from server.
• Ex: Cricket score board, election results, share market etc.
• The "EventSource" constructor function is used to start sending continuous requests to server.
• Every time when we get response (update) from server, the ""message" event executes for
"EventSource".
• The "server url" represents the address of server side program, to which you want to send request.
• The "event.data" property represents the actual data that is received from the browser.

Steps for development of Offline Apps

• Create a server side program:

- Set the response content type as “text/event-stream”

- Write data to response object
- Flush the response

D. Harsha Vardhan (UI Expert) P a g e 103 | 499

 HTML, CSS, JavaScript, Bootstrap

• Create a html page and call the server program:

var variablename = new EventSource(“server url”);
variablename.addEventListener("message", functionname);
function functionname(event)
{
//event.data = response from server
}

Example on Server Sent Events

c:\html\httpserver.js

D. Harsha Vardhan (UI Expert) P a g e 104 | 499

 HTML, CSS, JavaScript, Bootstrap

c:\html\index.html

Execution:
• Download and install “nodejs” from “https://nodejs.org”. Click here to find steps to install
NodeJS.

• Open “Command Prompt” and run the following commands:

cd c:\html

node httpserver.js

• Open browser and enter the url: http://localhost:8080/index.html

D. Harsha Vardhan (UI Expert) P a g e 105 | 499

 HTML, CSS, JavaScript, Bootstrap

• Canvas concept is used to create graphics in the web page programmatically.

Creating Canvas Container

<canvas id=”canvas1” style=”border:4px solid black” width=”pixels” height=”pixels”>
</canvas>

Get context of canvas

Context = It is an object, which is used to write graphics on the canvas.
var ctx = document.getElementById(“id”).getContext(“2d”);

strokeStyle
It specifies color of the stroke (line).
ctx.strokeStyle = “color name”;

lineWidth
It specifies thickness of the stroke (line).
ctx.lineWidth = pixels;

strokeRect
It draws a rectangle, with a line.
ctx.strokeRect(x, y, width, height);

fillStyle
It specifies fill color.
ctx.fillStyle = “color name”;

fillRect
It draws a filled rectangle.
ctx.fillRect(x, y, width, height);

Example on Canvas

D. Harsha Vardhan (UI Expert) P a g e 106 | 499

 HTML, CSS, JavaScript, Bootstrap

• SVG stands for Scalable Vector Graphics.

• Both Canvas and SVG are used to create graphics in the web page.
• Canvas losses its quality, if zoom is increased; but SVG is not.
• Canvas is “JavaScript-based”; SVG is “CSS-based”.

Syntax to create SVG container

<svg xmlns=”http://www.w3.org/2000/svg” version=”1.1” style=”border:4px solid black”
width=”pixels” height=”pixels”>
Graphic elements here
</svg>

Example on SVG

D. Harsha Vardhan (UI Expert) P a g e 107 | 499

 HTML, CSS, JavaScript, Bootstrap

• The following tags have been removed in HTML 5.

1. <acronym>
o Use <abbr> tag instead.

2. <applet>
o Java applets is out-dated concept.

3. <basefont>
o Use CSS to set the default font.

4. <big>
o Use CSS to increase text size.

5. <center>
o Use CSS to set center alignment.

6. <dir>
o Use <ul> or <ol> to display list of items.

7. <font>
o Use CSS to set font.

8. <frame>
o Use <iframe>.

9. <frameset>
o Use <iframe>

10. <noframes>
o Use <iframe>

11. <strike>
o Use CSS to set strikeout.

12. <tt>
o Use CSS to change font.

13. <bgsound>
o Use <audio> tag to play audio.

D. Harsha Vardhan (UI Expert) P a g e 108 | 499

 HTML, CSS, JavaScript, Bootstrap

14. <marquee>
o Use CSS / jQuery for animations.

15. <u>
o Use CSS to set underline.

• The following attributes have been removed in HTML 5.

Sl. Tag Attribute Description

No

1 <body> background, bgcolor, link, alink, vlink, text Use CSS instead.

2 <h1> to <h6> align Use CSS instead.

3 <p> align Use CSS instead.

4 <hr> align, noshade, size, width Use CSS instead.

5 <input> align Use CSS instead.

6 <img> align, border Use CSS instead.

7 <table> align, bgcolor, cellpadding, cellspacing, Use CSS instead.

width

8 <td>, <th> align, valign, bgcolor, width, height Use CSS instead.

9 <div> align Use CSS instead.

Introduction to XHTML
• XHTML is “HTML” + “set of rules to maintain good quality and standards” in the html code.
• XHTML is the strict and cleaner version of HTML, recommended by W3C (World Wide Web
Consortium).
• XHTML was released in 2000.
• In realtime, XHTML is recommended.

XHTML Rules
1. <!DOCTYPE> is must.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

D. Harsha Vardhan (UI Expert) P a g e 109 | 499

 HTML, CSS, JavaScript, Bootstrap

2. <html>, <head>, <title>, <body> tags are must.

3. A <meta> tag with “content-type” is mandatory.

<meta http-equiv="Content-type" content="text/html;charset=UTF-8">

That means the html file has the content of “text/html” type; and the character encoding format is
“UTF” (Unicode Transformation Format), which supports all worldwide language characters.

4. “xmlns” attribute is must for <html> tag.

<html xmlns="http://www.w3.org/1999/xhtml">

An “xmlns” (XML namespace) contains all the pre-defined html tags.

5. XHTML tags and attributes must be in lower case only.

Ex: <h1>hello</h1>

6. Attribute’s values should be in double quotes.

Ex: <img src=”img1.jpg”>

7. All the paired tags must be closed.

Ex: <p>Hello</p>

8. All the unpaired tags must be end with “/”.

Ex: <br />

9. The inner-most tags should be closed first.

Ex: <p><b><i>Hello</i></b></p>

10. Attribute minification not allowed. We must write both attribute and value.
Ex: readonly=”readonly”

11. The following tags are only allowed in <body> tag directly. All other tags must be used only inside
any of the following tags.
o <p>
o <table>
o <div>
o <ul>
o <ol>
o <h1> to <h6>

12. “alt” attribute is must for <img> tag.

D. Harsha Vardhan (UI Expert) P a g e 110 | 499

 HTML, CSS, JavaScript, Bootstrap

XHTML – Online Validator

• Open browser: Ex: Mozilla Firefox
• Go to https://validator.w3.org.
• Click on “Validate by File Upload”.
• Click on “Browse”.
• Select the html file. Ex: xhtml.html
• Click on “Check”.
• It shows the list of errors or “Passed” message.

XHTML - Example
xhtml.html

D. Harsha Vardhan (UI Expert) P a g e 111 | 499

 HTML, CSS, JavaScript, Bootstrap

CSS 2 & 3

Introduction to CSS
• CSS stands for “Cascading Style Sheet”.
• CSS is a “styling language”, which is used to apply styles to the html elements in the web page.
• CSS styles include with backgrounds, colors, margins, borders, paddings, alignments etc.
• A CSS style can overlap other CSS style; that's why it is called as "cascading" style sheets.
Syntax of CSS:

Syntax of CSS Style Definition:

CSS Basic Selectors

• “Select” is a syntax to select the desired elements.
• CSS supports many selectors. The most important css selectors are:
1. Tag Selector
2. ID Selector

1. Tag Selector
• The “tag selector” selects all the instances of specific tag.
• Use tag selector to select multiple elemens.
Syntax: tagname
Example: p

2. ID Selector
• The “id selector” selects a single tag, based on the “id”.
• “ID” is the “identification name”; it must be unique.
• Use ID selector to select a exact single element.
• "#" is the symbol of "ID".

D. Harsha Vardhan (UI Expert) P a g e 112 | 499

 HTML, CSS, JavaScript, Bootstrap

Syntax: #id
Example: #p1

First Example on CSS

Example on ID Selector

CSS - Properties
• “Properties” are “details” or “settings” of html tag.
• Every property contains a value.

D. Harsha Vardhan (UI Expert) P a g e 113 | 499

 HTML, CSS, JavaScript, Bootstrap

Syntax: property: value;

Example: color: green;

color
• This property specifies text color (font color) of the element.
• You can specify any color of your choice.
Syntax: color: colorname;
Example: color: green;

Example of “color” property

background-color
• This property specifies background color of the element.
• You can set any color as background color.
Syntax: background-color: colorname;

D. Harsha Vardhan (UI Expert) P a g e 114 | 499

 HTML, CSS, JavaScript, Bootstrap

Example: background-color: green;

Example of “background-color” property

Types of colors
• Colors can be represented in 3 formats.
1. Named colors
2. RGB
3. Hexadecimal number
1. Named colors:
▪ We can write name of the color directly.
▪ These are limited.
▪ We can’t get exact shade of the color.
▪ Ex: white, black, red, green, orange, pink etc.
▪ It is not recommended in real-time.
2. RGB:
▪ RGB formula specifies that the composition of 3 basic colors (red, green, blue), generates 16
million colors.

D. Harsha Vardhan (UI Expert) P a g e 115 | 499

 HTML, CSS, JavaScript, Bootstrap

▪ Syntax: rgb(red, green, blue)

▪ Red = 0 to 255
▪ Green = 0 to 255
▪ Blue = 0 to 255
▪ Example:
▪ rgb(0, 0, 0) = black
▪ rgb(255, 0, 0) = red
▪ rgb(0, 255, 0) = green
▪ rgb(0, 0, 255) = blue
▪ rgb(255, 255, 0) = yellow
▪ rgb(255, 255, 255) = white

3. Hexadecimal format:
▪ “Hexadecimal format” is the shortcut for “RGB”.
▪ Hexadecimal number system supports 16 symbols as 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f.
▪ Hexadecimal number should be 6 symbols long, with “#” prefix. First two symbols represent
red; Second two symbols represent green; Third two symbols represent blue.
▪ Syntax: #redgreenblue
▪ Example:
▪ #ffffff = white
▪ #000000 = black
▪ #ff0000 = red
▪ “Hexadecimal format” is recommended in realtime.

Named colors - Example

D. Harsha Vardhan (UI Expert) P a g e 116 | 499

 HTML, CSS, JavaScript, Bootstrap

RGB - Example

Hexadecimal colors - Example

font-family
• This property specifies name of the font. You refer the font family names from notepad.
• It is recommended to specify multiple font family names; if specified browser tries the subsequent
font if the previous font is not found / not supported in the browser.
Syntax: font-family: “fontname”;
Example: font-family: “Arial”;

Example of “font-family” property

D. Harsha Vardhan (UI Expert) P a g e 117 | 499

 HTML, CSS, JavaScript, Bootstrap

font-size
• This property specifies size of the font.
• You can specify the font size in the form of pixels / percentage / "EM" size.
Syntax: font-size: pixels;
Example: font-size: 30px;

Example of “font-size” property

D. Harsha Vardhan (UI Expert) P a g e 118 | 499

 HTML, CSS, JavaScript, Bootstrap

font-weight
• This property applies bold.
• The default value is "normal".
• If the value is "normal", the text appears normally.
• If the value is "bold", the text appears thick (bold).
Syntax: font-weight: normal | bold;
Example: font-weight: bold;

Example of “font-weight” property

D. Harsha Vardhan (UI Expert) P a g e 119 | 499

 HTML, CSS, JavaScript, Bootstrap

font-style
• This property applies italic.
• The default value is "normal".
• If the value is "normal", the text appears normally.
• If the value is "italic", the text appears italic.
Syntax: font-style: normal | italic;
Example: font-style: italic;

Example of “font-style” property

letter-spacing
• This property specifies gap between letters. For example, in "ABC", the letter-spacing specifies gap
between "A" and "B"; and also gap between "B" and "C".
Syntax: letter-spacing: pixels;
Example: letter-spacing: 10px;

Example of “letter-spacing” property

D. Harsha Vardhan (UI Expert) P a g e 120 | 499

 HTML, CSS, JavaScript, Bootstrap

word-spacing
• This property specifies gap between words.
• Words are identified with spaces. Space is the separator of words.
Syntax: word-spacing: pixels;
Example: word-spacing: 10px;

Example of “word-spacing” property

D. Harsha Vardhan (UI Expert) P a g e 121 | 499

 HTML, CSS, JavaScript, Bootstrap

line-height
• This property specifies height of the line of text.
• You can specify the value in the form of pixels or percentage.
Syntax: line-height: pixels;
Example: line-height: 10px;

Example of “line-height” property

D. Harsha Vardhan (UI Expert) P a g e 122 | 499

 HTML, CSS, JavaScript, Bootstrap

text-decoration
• This property specifies underline / overline / strikeout for the text.
• The default value is "none".
Syntax: text-decoration: none | underline | overline | line-through;
Example: text-decoration: underline;

Example of “text-decoration” property

D. Harsha Vardhan (UI Expert) P a g e 123 | 499

 HTML, CSS, JavaScript, Bootstrap

text-transform
• This property specifies uppercase / lowercase / title case for the text.
• The default value is "none".
• If the value is "none", the text appears normally.
• If the value is "uppercase", the text appears UPPER CASE.
• If the value is "lowercase", the text appears lower case.
• If the value is "capitalize", the first letter of each word will be Capital.
Syntax: text-transform: none | uppercase | lowercase | capitalize;
Example: text-transform: underline;

Example of “text-transform” property

D. Harsha Vardhan (UI Expert) P a g e 124 | 499

 HTML, CSS, JavaScript, Bootstrap

text-align
• This property specifies alignment for the text.
• The default value is "left".
Syntax: text-align: left | right | center | justify;
Example: text-align: left;

D. Harsha Vardhan (UI Expert) P a g e 125 | 499

 HTML, CSS, JavaScript, Bootstrap

Example of “text-align” property

D. Harsha Vardhan (UI Expert) P a g e 126 | 499

 HTML, CSS, JavaScript, Bootstrap

text-indent
• This property specifies left margin for the first line of the paragraph.
• It is rare to use in real-time.
• Use text-indent if you want to start first line of the paragraph from right side.
Syntax: text-indent: pixels;
Example: text-indent: 10px;

Example of “text-indent” property

D. Harsha Vardhan (UI Expert) P a g e 127 | 499

 HTML, CSS, JavaScript, Bootstrap

• <span> represents a small amount of text, for which you can apply some special formatting.
• <span> is a paired tag.
• <span> tag doesn't apply any style by default; but we can apply any style for it.
Syntax:
<span>Your content here</span>
Example:
<span>Hello</span>

Example of span

background-image
• This property specifies background image of the element.
• It is recommended to place the background image file in the current folder.
Syntax: background-image: url(“filename.extension”);
Example: background-image: url(“sample.png”);

D. Harsha Vardhan (UI Expert) P a g e 128 | 499

 HTML, CSS, JavaScript, Bootstrap

Example of “background-image” property

background-repeat
• This property specifies repeat mode of the background image.
• The default value is "repeat".
• If the value is "repeat", the background image repeats horizontally and vertically within the image.
• If the value is "no-repeat", the background image will not be repeated; will be displayed only once
at top left corner.

D. Harsha Vardhan (UI Expert) P a g e 129 | 499

 HTML, CSS, JavaScript, Bootstrap

• If the value is "repeat-x", the background image will be repeated horizontally.

• If the value is "repeat-y", the background image will be repeated vertically.
Syntax: background-repeat: repeat | no-repeat | repeat-x | repeat-y;
Example: background-repeat: no-repeat;

Example of “background-repeat” – “no-repeat”:

Example of “background-repeat” – “repeat-x”:

D. Harsha Vardhan (UI Expert) P a g e 130 | 499

 HTML, CSS, JavaScript, Bootstrap

Example of “background-repeat” – “repeat-y”:

background-position
• This property specifies position of the background image.
• The default value is "top left".
Syntax: background-position: top left | top center | top right |
center left | center center | center right | bottom left |
bottom center | bottom right;
Example: background-position: top center;
• The “background-position” property will be useful only when “background-repeat” is set to “no-
repeat”.

Example of “background-position” property

D. Harsha Vardhan (UI Expert) P a g e 131 | 499

 HTML, CSS, JavaScript, Bootstrap

background-attachment
• This property specifies whether the background image should be scrolled along with the text, when
the user uses the scrollbars of the web page.
• If the value is "scroll", the background image will be scrolled along with the text.
• If the value is "fixed", the background image will not be scrolled along with the text; Only the text
will be scrolled; background image will be constantly appears.
Syntax: background-attachment: scroll | fixed;
Example: background-attachment: scroll;

D. Harsha Vardhan (UI Expert) P a g e 132 | 499

 HTML, CSS, JavaScript, Bootstrap

Example of “background-attachment” property

list-style-type for <ul>

• This property specifies type of the bullet for the <ul> tag.
• <ul> tag is used to display a list of names. <li> tag represents an item in the <ul>
• The default value is "disc", in case of <ul> tag.
Syntax: list-style-type: none | disc | square | circle;
Example: list-style-type: disc;

D. Harsha Vardhan (UI Expert) P a g e 133 | 499

 HTML, CSS, JavaScript, Bootstrap

Example of “list-style-type” property for <ul>

D. Harsha Vardhan (UI Expert) P a g e 134 | 499

 HTML, CSS, JavaScript, Bootstrap

list-style-type for <ol>

• This property specifies type of numbering for the <ol> tag.
• If the value is "none", no numbering will be displayed.
• If the value is "decimal", the numbers will be "1, 2, 3 …".
• If the value is "decimal-leading-zero", the numbers will be "01, 02, 03, …".
• If the value is "lower-alpha", the numbers will be "a, b, c, …".
• If the value is "upper-alpha", the numbers will be "A, B, C, …".
• If the value is "lower-roman", the numbers will be "i, ii, iii, …".
• If the value is "upper-roman", the numbers will be "I, II, III, …".
• If the value is "lower-greek", the numbers will be Greek letters.
Syntax: list-style-type: none | decimal | decimal-leading-zero |
lower-alpha | upper-alpha | lower-roman | upper-roman | lower-greek;

Example: list-style-type: decimal;

Example of “list-style-type” property for <ol>:

D. Harsha Vardhan (UI Expert) P a g e 135 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 136 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 137 | 499

 HTML, CSS, JavaScript, Bootstrap

list-style-image
• This property specifies bullet image file path for the list.
• It is recommended to place the image file in the same folder, where the html file is present.
Syntax: list-style-image: url(“filename.extension”);
Example: list-style-image: url(“tick.gif”);

Example of “list-style-image” property:

• <div> is the most important tag of html.

• <div> tag represents a division (part) of the page.
• <div> is a container, in which you can place any other elements.
• A web page can have any no. of <div> tags.
• A <div> tag can be placed in another <div> tag also.
• <div> is a paired tag.

D. Harsha Vardhan (UI Expert) P a g e 138 | 499

 HTML, CSS, JavaScript, Bootstrap

• <div> is a block level element. That means it occupies 100% of the width, by default. So the content
next to the <div> tag, appears in the next line.
• Syntax: <div> any content </div>
• Example: <div> Hello </div>

Example of <div> tag

“width” and “height” properties

“width” property
• This property specifies horizontal size of the element.
• You can specify the value in the form of pixels or percentages.
Syntax: width: pixels;
Example: width: 200px;

“height” property
• This property specifies vertical size of the element.
• You can specify the value in the form of pixels or percentages.
Syntax: height: pixels;
Example: height: 100px;

D. Harsha Vardhan (UI Expert) P a g e 139 | 499

 HTML, CSS, JavaScript, Bootstrap

Example of “width” and “height” properties

float
• This property displays the elements side-by-side.
• If the value is "left", the elements will be displayed side-by-side, starting from "left", towards
"right".
• If the value is "right", the elements will be displayed side-by-side, staring from "right", towards
"left".
Syntax: float: left | right;
Example: float: left;

Example of “float – left”

D. Harsha Vardhan (UI Expert) P a g e 140 | 499

 HTML, CSS, JavaScript, Bootstrap

Example of “float – right”

D. Harsha Vardhan (UI Expert) P a g e 141 | 499

 HTML, CSS, JavaScript, Bootstrap

clear
• This property cancels the effect of “float” and push the current element to next line.
• It stops the sequence of “float”.
• Top stop “float:left” sequence, we use “clear:left”.
• Top stop “float:right” sequence, we use “clear:right”.
Syntax: clear: left | right;
Example: clear: left;

Example of “clear – left”

D. Harsha Vardhan (UI Expert) P a g e 142 | 499

 HTML, CSS, JavaScript, Bootstrap

• Event element has border, margin and padding as follows:

border-style, border-width, border-color

“border-style” property
• This property specifies type of the border, around the element.

• The default value is "none".

• "Solid" is recommended.

• Depending on the requirement, you can use any of the other borders.
Syntax: border-style: none | solid | dotted | dashed | double | inset | outset | ridge | groove;
Example: border-style: solid;

“border-width” property
• This property specifies thickness of the border.

• You can specify the border width in the form of pixels.

Syntax: border-width: pixels;
Example: border-width: 5px;

“border-color” property
• This property specifies color of the border.

D. Harsha Vardhan (UI Expert) P a g e 143 | 499

 HTML, CSS, JavaScript, Bootstrap

• You can specify any color.

Syntax: border-color: any color;
Example: border-color: red;

Example of “border-style”, “border-width”, “border-color”

D. Harsha Vardhan (UI Expert) P a g e 144 | 499

 HTML, CSS, JavaScript, Bootstrap

border - shortcut
• This property specifies border width, border style and border color, at-a-time, in shortcut way.
Syntax: border: borderwidth borderstyle borderColor;
Example: border: 5px solid red;

Example of “border” property

D. Harsha Vardhan (UI Expert) P a g e 145 | 499

 HTML, CSS, JavaScript, Bootstrap

border - sides
“border-top” property
• This property specifies border width, border style and border color for top side only.
Syntax: border-top: borderwidth borderstyle bordercolor;
Example: border-top: 5px solid red;

“border-right” property
• This property specifies border width, border style and border color for right side only.
Syntax: border-right: borderwidth borderstyle bordercolor;
Example: border-right: 5px solid red;

“border-bottom” property
• This property specifies border width, border style and border color for bottom side only.
Syntax: border-bottom: borderwidth borderstyle bordercolor;
Example: border-bottom: 5px solid red;

“border-left” property
• This property specifies border width, border style and border color for left side only.
Syntax: border-left: borderwidth borderstyle bordercolor;
Example: border-left: 5px solid red;

Example of “border - sides” property

D. Harsha Vardhan (UI Expert) P a g e 146 | 499

 HTML, CSS, JavaScript, Bootstrap

margin
• This property specifies the margin (gap) between element to element, surrounding the element.
• For example, if two <div> tags are display side-by-side, the gap between them is called as "margin".

• You can specify the value in the form of pixels.

Syntax: margin: pixels;
Example: margin: 10px;

Example of “margin” property

D. Harsha Vardhan (UI Expert) P a g e 147 | 499

 HTML, CSS, JavaScript, Bootstrap

margin - sides
“margin-top” property
• This property specifies the top margin (gap) between element to element.
Syntax: margin-top: pixels;
Example: margin-top: 10px;

“margin-right” property
• This property specifies the right margin (gap) between element to element.
Syntax: margin-right: pixels;
Example: margin-right: 10px;

“margin-bottom” property
• This property specifies the bottom margin (gap) between element to element.
Syntax: margin-bottom: pixels;
Example: margin-bottom: 10px;

“margin-left” property
• This property specifies the left margin (gap) between element to element.
Syntax: margin-left: pixels;

D. Harsha Vardhan (UI Expert) P a g e 148 | 499

 HTML, CSS, JavaScript, Bootstrap

Example: margin-left: 10px;

Example of “margin” property - sides

D. Harsha Vardhan (UI Expert) P a g e 149 | 499

 HTML, CSS, JavaScript, Bootstrap

margin - shortcut
• This property specifies the margin (gap) between element to element, all sides independently at-a-
time.
Syntax: margin: topmargin rightmargin bottommargin leftmargin;
Example: margin: 10px 5px 15px 30px;

Example of “margin” property - shortcut

D. Harsha Vardhan (UI Expert) P a g e 150 | 499

 HTML, CSS, JavaScript, Bootstrap

padding
• This property specifies the padding (gap) between border and content of the element.

• You can specify the value in the form of pixels.

• Inner margin is called as "padding".

• Outer margin is called as "margin".

Syntax: padding: pixels;
Example: padding: 10px;

Example of “padding” property

D. Harsha Vardhan (UI Expert) P a g e 151 | 499

 HTML, CSS, JavaScript, Bootstrap

padding - sides
“padding-top” property
• This property specifies the top padding.
Syntax: padding-top: pixels;
Example: padding-top: 10px;

“padding-right” property
• This property specifies the right padding.
Syntax: padding-right: pixels;
Example: padding-right: 10px;

D. Harsha Vardhan (UI Expert) P a g e 152 | 499

 HTML, CSS, JavaScript, Bootstrap

“padding-bottom” property
• This property specifies the bottom padding.
Syntax: padding-bottom: pixels;
Example: padding-bottom: 10px;

“padding-left” property
• This property specifies the left padding.
Syntax: padding-left: pixels;
Example: padding-left: 10px;

padding - shortcut
“padding” property - shortcut
• This property specifies the padding for all sides independently at-a-time.
Syntax: padding: toppadding rightpadding bottompadding leftpadding;
Example: padding: 10px 5px 15px 30px;

“opacity” property
• This property makes the element transparent (background information is visible through the
element).
• You can specify any number between 0 to 1.
• Any middle number between 0 and 1 is recommended. For example, "0.6".
Syntax: opacity: 0 to 1;
Example: opacity: 0.6;
1 : fully visible
0.9, …, 0.1 : transparent
0 : fully transparent / invisible

Example of “opacity” property:

D. Harsha Vardhan (UI Expert) P a g e 153 | 499

 HTML, CSS, JavaScript, Bootstrap

display
• This property specifies display mode of the element.
Syntax: display: block | inline | none;
Example: display: none;

• “display: block” is default for all the block level elements.

• “display: inline” is default for all the inline elements.

• “display: none” hides the element and its space will be reclaimed by other elements automatically.

Example of “display” property

D. Harsha Vardhan (UI Expert) P a g e 154 | 499

 HTML, CSS, JavaScript, Bootstrap

visibility
• This property specifies whether the element is visible or invisible in the web page.
Syntax: visibility: visible | hidden;
Example: visibility: hidden;
• “visibility: visible” shows the element.

• “visibility: visible” hides the element and its space will be reserved as-it-is.

Example of “visibility” property

D. Harsha Vardhan (UI Expert) P a g e 155 | 499

 HTML, CSS, JavaScript, Bootstrap

overflow
• This property specifies how the text should be appear, which is outside the boundaries of the
element.
Syntax: overflow: visible | hidden | auto;
Example: overflow: auto;
• “overflow: visible” shows the additional content outside the element, which doesn’t fit within the
element.
• “overflow: hidden” hides the additional content, which doesn’t fit within the element.

• “overflow: auto” shows scrollbars automatically if necessary.

Example of “overflow:visible” property

Example of “overflow:hidden” property

D. Harsha Vardhan (UI Expert) P a g e 156 | 499

 HTML, CSS, JavaScript, Bootstrap

Example of “overflow:auto” property

• This property specifies position of the element in the web page.

• It specifies where exactly the element has to be appear.
• By default, all the elements appear in sequence, how they have written in the program.
Syntax: position: static | absolute | relative | fixed;
Example: position: absolute;

position: static
• The block level elements appear line-by-line; inline elements appear side-by-side.
• It is the default.

D. Harsha Vardhan (UI Expert) P a g e 157 | 499

 HTML, CSS, JavaScript, Bootstrap

Syntax: position: static;

Example: position: static;

Example of “position:static”

position: absolute
• It displays the element exactly in the specified position.
• It requires “left” and “top” properties.
Syntax: position: absolute; left: x: top: y;
Example: position: absolute; left:50px; top:50px;

D. Harsha Vardhan (UI Expert) P a g e 158 | 499

 HTML, CSS, JavaScript, Bootstrap

Example of “position:absolute”

z-index
• This property specifies the display order (front / back side) of the element. If the z-index value is
higher, it appears to the front to the user. If the z-index value is lower, it appears at backside to the
user.
Syntax: z-index: n;
Example: z-index: 1;

Example of “z-index”

D. Harsha Vardhan (UI Expert) P a g e 159 | 499

 HTML, CSS, JavaScript, Bootstrap

position: relative
• It also displays the element based on “x” and “y” co-ordinates (just like absolute).
• Absolute: x and y co-ordinates will be calculated from the browser.
• Relative: x and y co-ordinates will be calculated from the previous element.
Syntax: position: relative; left: x: top: y;
Example: position: relative; left: 50px; top: 50px;

D. Harsha Vardhan (UI Expert) P a g e 160 | 499

 HTML, CSS, JavaScript, Bootstrap

Example of “position:relative”

D. Harsha Vardhan (UI Expert) P a g e 161 | 499

 HTML, CSS, JavaScript, Bootstrap

position: fixed
• It is same as “absolute”. That means the “x” and “y” co-ordinates will be calculated from the
browser.
• When we scroll the web page, the fixed element will not be scrolled; appears in the fixed position.
Syntax: position: fixed; left: x: top: y;
Example: position: fixed; left: 50px; top: 50px;

Example of “position:fixed”

• CSS style sheets are 3 types:

1. Internal Style Sheet / Embedded Style Sheet
2. External Style Sheet

D. Harsha Vardhan (UI Expert) P a g e 162 | 499

 HTML, CSS, JavaScript, Bootstrap

3. Inline Style Sheet

1. Internal Style Sheet / Embedded Style Sheet

• The css styles are defined inside the “.html” file itself.
• Advantage: Easy-to-understand.
• Disadvantage: No re-usability. That means, the styles defined in one html file, can’t be accessed in
another html file.
Syntax:
<style type=”text/css”>
css code
</style>

2. External Style Sheet

• The css styles are defined in a separate “.css” file and html tags are defined in the “.html” file.
• We can link (connect) the css file with html file.
• Advantage: It supports re-usability. That means, the css file can be called in many html files.
Syntax to import css file:
<link href=”filename.css” rel=”stylesheet”>

Example of External Style Sheet

StyleSheet.css

Page1.html

D. Harsha Vardhan (UI Expert) P a g e 163 | 499

 HTML, CSS, JavaScript, Bootstrap

Page2.html

3. Inline Style Sheet

• The css styles will be defined inside the html tag itself.
• This is NOT recommended in realtime.
Drawbacks:.
a) HTML code will be cumbersome (confusing).
b) No style re-usability.

Syntax:
<tag style=”property:value; property:value; …”>
</tag>

Example of Inline Style Sheet

• First we have to select the element / elements, and then only we can apply some styles to it.
• “Selector” is a “syntax to select”. It is used to select the desired elements in the web page.
• When we use a selector, the browser searches the entire web page for the matching elements and
returns the matching elements; and we apply styles only for those matching elements.
• List of CSS Selectors
1. Tag Selector
2. ID Selector

D. Harsha Vardhan (UI Expert) P a g e 164 | 499

 HTML, CSS, JavaScript, Bootstrap

3. Class Selector
4. Compound Selector
5. Grouping Selector
6. Child Selector
7. Direct Child Selector
8. Adjacent Siblings Selector
9. Adjacent One Sibling Selector
10. Attribute Selector
11. Hover Selector
12. Focus Selector
13. Universal Selector
14. First-Child Selector
15. Last-Child Selector
16. Nth-Child Selector
17. Nth-Child Even Selector
18. Nth-Child Odd Selector
19. Before Selector
20. After Selector
21. Selection Selector

Tag Selector
• It selects all the instances of the specified tag.
• You can specify any tag name.
Syntax: tag
Example: p

Example on Tag Selector

D. Harsha Vardhan (UI Expert) P a g e 165 | 499

 HTML, CSS, JavaScript, Bootstrap

ID Selector
• It selects a single instance of the tag, based on the id.
• “ID” is “identification name”.
• “ID” should be unique (can’t be duplicate) in the web page.
• # is symbol of ID selector.
Syntax: #id
Example: #p1

Example on ID Selector

Class Selector
• It selects one or more elements, based on the class name.
• We use same class for similar elements.
• "." is the symbol of class selector.
Syntax: .class
Example: .c1

Example on Class Selector

D. Harsha Vardhan (UI Expert) P a g e 166 | 499

 HTML, CSS, JavaScript, Bootstrap

Compound Selector
• It selects the instances of specific tag, which have specified class.
Syntax: tag.class
Example: p.c1

Example on Compound Selector

D. Harsha Vardhan (UI Expert) P a g e 167 | 499

 HTML, CSS, JavaScript, Bootstrap

Grouping Selector
• It selects the specified group of tags.
• "," is the symbol of grouping selector.

Syntax: tag1,tag2,tag3,…
Example: div,p,h2

Example on Grouping Selector

Child Selector
• It selects all the child tags (including grand children) of the specified parent tag.
• "space" is the symbol of child selector.
Syntax: parenttag childtag
Example: div p

Example on Child Selector

D. Harsha Vardhan (UI Expert) P a g e 168 | 499

 HTML, CSS, JavaScript, Bootstrap

Direct Child Selector

• It selects only the direct child tags (excluding the grand children) of the specified parent tag.
• ">" is the symbol of direct child selector.
• Syntax: parenttag>childtag
• Example: div>p

Example on Direct Child Selector

D. Harsha Vardhan (UI Expert) P a g e 169 | 499

 HTML, CSS, JavaScript, Bootstrap

Adjacent Siblings Selector

• It selects all the adjacent (next) sibling tags of current tag.
• Siblings are the elements that have a common parent.
• "~" is the symbol of adjacent siblings selector.
Syntax: parenttag~childtag
Example: #p2~p

Example on Adjacent Siblings Selector

Adjacent One Sibling Selector

• It selects the immediate next sibling tag of current tag.
• "+" is the symbol of adjacent one sibling selector.
Syntax: currenttag+siblingtag
Example: div+p

D. Harsha Vardhan (UI Expert) P a g e 170 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Adjacent One Sibling Selector

Attribute Selector
• It selects all the tags that are having specified attribute.
• "[ ]" are the symbols of attribute selector.
• We can use any attribute of any html tag.
Syntax: tag[attribute=”value”]
Example: img[width=”120px”]

Example on Attribute Selector

D. Harsha Vardhan (UI Expert) P a g e 171 | 499

 HTML, CSS, JavaScript, Bootstrap

Hover Selector
• It applies the style only when the user places the mouse pointer on the element, at run time.
• It automatically removes the style, if the mouse pointer is moved outside the element.
• It is also called as “pseudo class”. Whenever the selector starts with “:”, it is called as “pseudo class”.
• Pseudo = unrealistic
Syntax: tag:hover
Example: p:hover

Example on Hover Selector

D. Harsha Vardhan (UI Expert) P a g e 172 | 499

 HTML, CSS, JavaScript, Bootstrap

Focus Selector
• It applies the style only when the focus (cursor) is inside the element.
• It automatically removes the style when the cursor gets out of the element.
• It is also called as “pseudo class”.
Syntax: tag:focus
Example: input:focus

Example on Focus Selector

Universal Selector
• It selects all the tags in the web page (including <html>, <head>, <body> etc.).
• It is used to apply global styles.
Syntax: *
Example: *

Example on Universal Selector

D. Harsha Vardhan (UI Expert) P a g e 173 | 499

 HTML, CSS, JavaScript, Bootstrap

First-child selector
• It selects the child tag, which is the first child of its parent tag.
• It is also called as “pseudo class”.
Note: Index starts from “1”.
Syntax: childtag:first-child
Example: p:first-child

Example on First-child selector

D. Harsha Vardhan (UI Expert) P a g e 174 | 499

 HTML, CSS, JavaScript, Bootstrap

Last-child selector
• It selects the child tag, which is the last child of its parent tag.
• It is also called as “pseudo class”.
Note: Index starts from “1”.
Syntax: childtag:last-child
Example: p:last-child

Example on Last-child selector

D. Harsha Vardhan (UI Expert) P a g e 175 | 499

 HTML, CSS, JavaScript, Bootstrap

Nth-child selector
• It selects the child tag, which is the nth child tag of its parent tag.
Note: Index starts from “1”.
Syntax: childtag:nth-child(n)
Example: p:nth-child(2)

Example on Nth-child selector

Nth-child(even) selector
• It selects all the even child tags. Ex: 2, 4, 6, …
Note: Index starts from “1”.

D. Harsha Vardhan (UI Expert) P a g e 176 | 499

 HTML, CSS, JavaScript, Bootstrap

Syntax: childtag:nth-child(even)
Example: p:nth-child(even)

Example on Nth-child(even) selector

Nth-child(odd) selector
• It selects all the odd child tags. Ex: 1, 3, 5, …
Note: Index starts from “1”.
Syntax: childtag:nth-child(odd)
Example: p:nth-child(odd)

Example on Nth-child(odd) selector

D. Harsha Vardhan (UI Expert) P a g e 177 | 499

 HTML, CSS, JavaScript, Bootstrap

Before selector
• It inserts an image before (at left side of) the current element.
• It is also called as “pseudo element”.
Syntax: tag::before
Example: h1::before

Example on Before selector

After selector
• It inserts an image after (at right side of) the current element.

D. Harsha Vardhan (UI Expert) P a g e 178 | 499

 HTML, CSS, JavaScript, Bootstrap

• It is also called as “pseudo element”.

Syntax: tag::after
Example: h1::after

Example on After selector

Selection selector
• It applies the style for the selected text of the web page.
• It is also called as “pseudo element”.
• "moz" stands for "Mozilla Firefox".
Syntax for Mozilla Firefox: ::-moz-selection
Syntax for Other Browsers: ::selection

Example on Selection selector

D. Harsha Vardhan (UI Expert) P a g e 179 | 499

 HTML, CSS, JavaScript, Bootstrap

CSS Style Precedence

• The css styles are applied in the following order (lowest priority to highest priority).
• The higher priority style overrides the same property’s value of the lower priority.
1. Browser default style
2. Tag Selector
3. Direct Child Selector
4. Adjacent Sibling Selector
5. Child Selector
6. Class Selector
7. Attribute Selector
8. ID Selector

Note: “!important” is used to override the “style precedence”.

Example on Style Precedence

D. Harsha Vardhan (UI Expert) P a g e 180 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on !important:

Table Styles

D. Harsha Vardhan (UI Expert) P a g e 181 | 499

 HTML, CSS, JavaScript, Bootstrap

Hyperlink Styles
• It is used to apply styles to hyperlinks.
a:link: Applies styles to unvisited hyperlinks.

D. Harsha Vardhan (UI Expert) P a g e 182 | 499

 HTML, CSS, JavaScript, Bootstrap

a:hover: Applies styles to hyperlinks, when we place mouse pointer on it.

a:active: Applies styles to hyperlinks, when we click and hold it.
a:hover: Applies styles to visited hyperlinks.

Example on Hyperlink Styles

D. Harsha Vardhan (UI Expert) P a g e 183 | 499

 HTML, CSS, JavaScript, Bootstrap

Menubar
• Menubar is a collection of hyperlinks arranged vertically / horizontally.

D. Harsha Vardhan (UI Expert) P a g e 184 | 499

 HTML, CSS, JavaScript, Bootstrap

Header
• Header is the top content of the web page, which includes website logo, website name, main
options for navigation.

D. Harsha Vardhan (UI Expert) P a g e 185 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 186 | 499

 HTML, CSS, JavaScript, Bootstrap

Resize
• It is used to make an html element, resizable in the browser.
• Syntax: resize: horizontal | vertical | both;
• Example: resize: both;

D. Harsha Vardhan (UI Expert) P a g e 187 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Resize

Word Wrap
• It is used to split the long words into next line.
• Syntax: word-wrap: break-word;
• Example: word-wrap: break-word;

Example on Word Wrap

D. Harsha Vardhan (UI Expert) P a g e 188 | 499

 HTML, CSS, JavaScript, Bootstrap

RGBA
• It is used to apply transparency to the background color only, instead of applying transparency for
the content.
• Syntax: rgba(red, green, blue, alpha)

Red = 0 to 255
Green = 0 to 255
Blue = 0 to 255
Alpha = 0 to 1

Example on RGBA

D. Harsha Vardhan (UI Expert) P a g e 189 | 499

 HTML, CSS, JavaScript, Bootstrap

Border Radius
• It is used to apply rounded corners for any html element.
• Syntax: border-radius: pixels;
• Example: border-radius: 10px;

Border Radius – Cornerwise

• Syntax: border-radius: topleft topright bottomright bottomleft;
• Example: border-radius: 10px 20px 15px 5px;

Example on Border Radius

Example 2 on Border Radius

D. Harsha Vardhan (UI Expert) P a g e 190 | 499

 HTML, CSS, JavaScript, Bootstrap

Example 3 on Border Radius

Shadow
Box-Shadow
• It is used to apply shadow for the element.
• Syntax: box-shadow: HorizontalPosition VerticalPosition BlurRadius Spread
ShadowColor;
• Example: box-shadow: 5px 5px 5px 2px red;

Text-Shadow
• It is used to apply shadow for the text of the element.

D. Harsha Vardhan (UI Expert) P a g e 191 | 499

 HTML, CSS, JavaScript, Bootstrap

• Syntax: text-shadow: HorizontalPosition VerticalPosition BlurRadius ShadowColor;

• Example: text-shadow: 2px 2px 5px 1px red;

Example on Shadow

Multiple Columns
• It is used to divide the text of the element into multiple columns.
• Set no. of columns:
column-count: no. of columns;
-moz-column-count: no. of columns;
-webkit-column-count: no. of columns;

• Set column gap – distance between columns:

Column-gap: pixels;
-moz-column-gap: pixels;
-webkit-column-gap: pixels;

D. Harsha Vardhan (UI Expert) P a g e 192 | 499

 HTML, CSS, JavaScript, Bootstrap

• Set column rule – divider line between the columns:

column-rule: width style color;
-moz-column-rule: width style color;
-webkit-column-rule: width style color;

-moz- : Mozilla Firefox

-webkit- : Chrome and Safari

Example on Multiple Columns

Transitions
• Transition is a process of changing a CSS property’s value gradually, based on the specified no.
of seconds.

D. Harsha Vardhan (UI Expert) P a g e 193 | 499

 HTML, CSS, JavaScript, Bootstrap

• Transitions support only pixels based color based properties. Ex: width, height, opacity, font-
size, border-width, background-color, color, border-color etc.
• Syntax:
selector
{
property: startvalue;
transition: property seconds;
}
selector:hover
{
property: endvalue;
}

Example:

Example on Transitions - Width

D. Harsha Vardhan (UI Expert) P a g e 194 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Transitions - Height

Example on Transitions – Font-size

D. Harsha Vardhan (UI Expert) P a g e 195 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Transitions – Multiple Properties

Example on Transitions – Opacity

D. Harsha Vardhan (UI Expert) P a g e 196 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Transitions – Position

Transformations
• Transformations are used to display the element in a different visual dimension.
• Types of transformations:
1. Rotate Transformation
2. Skew Transformation
3. Scale Transformation
4. Translate Transformation

1. Rotate Transformation
• It is used to rotate the element, based on the specifies no. of degrees. Ex: 45deg.
Syntax: transform: rotate(degrees);

D. Harsha Vardhan (UI Expert) P a g e 197 | 499

 HTML, CSS, JavaScript, Bootstrap

Example: transform: rotate(45deg);

Example on Rotate Transformation

2. Skew Transformation
• It wrists the element.
Syntax: transform: skew(degrees);
Example: transform: skew(30deg);

Example on Skew Transformation

D. Harsha Vardhan (UI Expert) P a g e 198 | 499

 HTML, CSS, JavaScript, Bootstrap

3. Scale Transformation
• It shows the element in large size / small size, visually.
Syntax: transform: scale(number);
Example: transform: scale(2);

1 = 100% size
2 = 200% size
0.5 = 50% size
1.5 = 150% size
…

Example on Scale Transformation

D. Harsha Vardhan (UI Expert) P a g e 199 | 499

 HTML, CSS, JavaScript, Bootstrap

4. Translate Transformation
• It changes the visual position of the element.
Syntax: transform: translate(x, y);
Example: transform: translate(30px, 30px);

Example on Translate Transformation

Multiple Transformations
• We can apply more than one transformation at-a-time.
Syntax: transform: rotate(degrees) scale(n) translate(x, y) skew(degrees);
Example: transform: rotate(40deg) scale(1.5) translate(30px, 30px) skew(20deg);

Example on Multiple Transformations

D. Harsha Vardhan (UI Expert) P a g e 200 | 499

 HTML, CSS, JavaScript, Bootstrap

transform-origin
• This property specifies the fixed point for rotate transformation and sale transformation etc.
• Syntax: transform-origin: top left | top center | top right | center left |
center center | center right | bottom left | bottom center | bottom right;
• Example: transform-origin: top left;

Example on Transform Origin

D. Harsha Vardhan (UI Expert) P a g e 201 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Transformation with Transition

Example on Image Gallery

D. Harsha Vardhan (UI Expert) P a g e 202 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 203 | 499

 HTML, CSS, JavaScript, Bootstrap

Animations
• Animations are “group of transitions”, which will be performed one after another.
• Transition contains two points only (starting point + ending point).
• Animation contains multiple points of milestones.
• Syntax:
selector
{
animation: animationname seconds;
}
@keyframes animationname
{
0% { property:value; property:value; … },
25% { property:value; property:value; … },
50% { property:value; property:value; … },
75% { property:value; property:value; … },
100% { property:value; property:value; … }
}

Example:

Example on Animations

D. Harsha Vardhan (UI Expert) P a g e 204 | 499

 HTML, CSS, JavaScript, Bootstrap

• It is used to apply multiple colors to the element.

• Go to http://www.colorzilla.com/gradient-editor
• Generate the colors.
• Copy and paste the code into the program.

Example on Gradient Colors

D. Harsha Vardhan (UI Expert) P a g e 205 | 499

 HTML, CSS, JavaScript, Bootstrap

• It is used to apply third party fonts in the web page.

• Steps:
o Go to “https://www.fontsquirrel.com”.
o Click on “Web Font” in “Licenses”.
o Click on the desired font.
o Click on “Webfont Kit”.
o Select all the checkboxes (TTF, EOT, WOFF, SVG).
▪ TTF: Works in most browsers except IE and iPhone
▪ EOT: IE only
▪ WOFF: Compressed, emerging standard
▪ SVG: iPhone/iPad.
o Click on “Download @Fontface Kit”.
o Download the font zip file.
o After downloading, extract the zip file. It creates a folder and extractes the files into it. Go to
the extracted folder.
o Copy and paste the following files from the “extracted folder” into “application folder
(c:\css)”.
o Copy and paste the following files fom the “extracted folder” into “application folder
(c:\css)”.
o Extracted folder:
▪ fontname.eot
▪ fontname.sv
▪ fontname.ttf
▪ fontname.woff
▪ fontname.css
o Application folder (c:\css):
▪ fontname.eot
▪ fontname.sv
▪ fontname.ttf

D. Harsha Vardhan (UI Expert) P a g e 206 | 499

 HTML, CSS, JavaScript, Bootstrap

▪ fontname.woff
▪ fontname.css
▪ filename.html

Step 1: Import the css file into the web page:

<link href=”filename.css” rel=”stylsheet”>

Step 2: Create @font-face rule:

@font-face
{
font-family: “fontname”;
src: url(“filename.eot”);
src: url(“filename.eot?#iefix”) format(“embedded-opentype”),
url(“filename.woff”) format(“woff”),
url(“filename.ttf”) format(“truetype”),
url(“filename.svg@fontname”) format(“svg”);
font-weight: normal;
font-style: normal;
}

Step 3: Set the font-family:

selector
{
font-family: “fontname”;
}

Example on Font Face

c:\css\Stylesheet.css

D. Harsha Vardhan (UI Expert) P a g e 207 | 499

 HTML, CSS, JavaScript, Bootstrap

c:\css\Fontexample.html

• It is used to create page template (layout).

• Header: Contains company logo, website name, login, logout, search etc.
• Nav: Contains menubar.
• Container: Contains left column and page content.
• Leftcol: Contains left side menu.
• PageContent: Contains actual content of the page.
• Footer: Contains bottom information and links for other related sites.

D. Harsha Vardhan (UI Expert) P a g e 208 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Static Page Template

home.html

D. Harsha Vardhan (UI Expert) P a g e 209 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 210 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Page Navigation using Static Page Template

home.html

D. Harsha Vardhan (UI Expert) P a g e 211 | 499

 HTML, CSS, JavaScript, Bootstrap

about.html

contact.html

D. Harsha Vardhan (UI Expert) P a g e 212 | 499

 HTML, CSS, JavaScript, Bootstrap

StyleSheet.css

D. Harsha Vardhan (UI Expert) P a g e 213 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Static Page Template with DIV

index.html

D. Harsha Vardhan (UI Expert) P a g e 214 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 215 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 216 | 499

 HTML, CSS, JavaScript, Bootstrap

• “Responsive Web Design” (RWD) is used to make the web page automatically fit based on the
current device resolution.
• We divide the devices into 4 types, based on the browser width:
1. Large devices: 1200px to unlimited
2. Medium devices: 1024px to 1199px
3. Small devices: 768px to 1023px
4. Extra Small devices: 300px to 767px

Media Queries
• We use “Media Queries” to create responsive web design. The media queries apply the styles based
on the specified resolution.
1. Large devices (1200px to unlimited):
@media (min-width: 1200px)
{
}

2. Medium devices (1024px to 1199px):

@media (min-width: 1024px) and (max-width: 1199px)
{
}

3. Small devices (68px to 1023px):

@media (min-width: 768px) and (max-width: 1023px)
{
}

4. Extra Small devices (300px to 767px):

@media (min-width: 300px) and (max-width: 767px)
{

D. Harsha Vardhan (UI Expert) P a g e 217 | 499

 HTML, CSS, JavaScript, Bootstrap

View port meta tag

• This tag tells to the mobile browsers that we are using “responsive web design”, and don’t treat it
as pc-based web page.
• Without viewport meta tag, the mobile browsers treat the web page as pc-based web page and
apply the pc-based media query.
• With viewport meta tag, the mobile browsers apply the appropriate “mobile-based media query” to
the web page.

D. Harsha Vardhan (UI Expert) P a g e 218 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Responsive Web Design

home.html

D. Harsha Vardhan (UI Expert) P a g e 219 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 220 | 499

 HTML, CSS, JavaScript, Bootstrap

StyleSheet.css

D. Harsha Vardhan (UI Expert) P a g e 221 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 222 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 223 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 224 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 225 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 226 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 227 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 228 | 499

 HTML, CSS, JavaScript, Bootstrap

Bootstrap

Introduction to Bootstrap
• “Bootstrap” is a “CSS framework”, developed by “Twitter” company, which is a collection of ready-
made “css classes”, which can be used in web pages to apply styles to the elements easily.
• Bootstrap can be used without css knowledge also. To customize the bootstrap styles, CSS
knowledge is required.
• Bootstrap provides responsive web design by default.
• Bootstrap was developed based on “jQuery” and "Popper".
• jQuery is a JavaScript library, which provides a set of functions to perform DOM manipulations
easily.
• Popper is a JavaScript library, which provides a set of functions to display popup messages.

Preparing Environment for Bootstrap

Downloading Bootstrap
• Go to “http://getbootstrap.com”.
• Select the latest version in the dropdownlist (Ex: v4.1). It by default, selects the latest version.
• Click on “Download”.
• Click on “Download” again under "Compiled CSS and JS".
• Download the file “bootstrap-4.1.1.zip”.
• Go to the downloaded location, right click on the “bootstrap-4.1.1.zip” file and click on “Extract
All”.
• After extracting, you will get extracted folder.
• Copy the following files from “extracted folder (bootstrap-4.1.1)”, into “application folder
(c:\bootstrap)”.
▪ css\bootstrap.css
▪ js\bootstrap.js

Downloading jQuery
• Go to “http://jquery.com”.
• Click on “Download jQuery 3.3.1” (version number may vary).
• Click on “Download the uncompressed, development jQuery 3.3.1”.
• If required, press "Ctrl+S" to save the file. You will get a file “jquery-3.3.1.js”.
• Copy and paste “jquery-3.3.1.js” file from Downloaded location into “c:\bootstrap” folder.

D. Harsha Vardhan (UI Expert) P a g e 229 | 499

 HTML, CSS, JavaScript, Bootstrap

Downloading Popper
• Go to “https://unpkg.com/popper.js”.
• If required, press "Ctrl+S" to save the file. You will get a file “popper.js”.
• Copy and paste “popper.js” file from Downloaded location into “c:\bootstrap” folder.

Importing Bootstrap

Importing Bootstrap

• The "viewport meta tag" is used to set the actual width of the device as width of the web page.
• It is must to make the web page responsive.
• It also sets the initial zoom to "1" (actual size).

First Example on Bootstrap (c:\bootstrap\first.html)

D. Harsha Vardhan (UI Expert) P a g e 230 | 499

 HTML, CSS, JavaScript, Bootstrap

“container” class
• It acts as “outer container” for the entire page.
• It makes the web page responsive.
• The entire content of the page should be inside the “container”.
• It provides margin left and margin right for the page.

Syntax:
<div class=”container”>
any content
</div>

Example on Container

“container-fluid” class
• It also acts as “outer container” for the entire page.
• It also makes the web page responsive.

D. Harsha Vardhan (UI Expert) P a g e 231 | 499

 HTML, CSS, JavaScript, Bootstrap

• The entire content of the page should be inside the “container-fluid”.

• It remove margin left and margin right for the page. It makes the content occupy the full available
width of the web page.

Syntax:
<div class=”container”>
any content
</div>

Example on Container-Fluid

Text Colors
• It is used to set colors of the text.
• Based on the requirement, the developer can use any of the available colors.

D. Harsha Vardhan (UI Expert) P a g e 232 | 499

 HTML, CSS, JavaScript, Bootstrap

• If you want other color, you can use CSS.

List of Classes
• text-primary
• text-success
• text-info
• text-warning
• text-danger
• text-muted
• text-secondary
• text-dark
• text-light

Example on Text Colors

D. Harsha Vardhan (UI Expert) P a g e 233 | 499

 HTML, CSS, JavaScript, Bootstrap

Background Colors
• It is used to set background colors of the element.
• Based on the requirement, the developer can use any of the available colors.
• If you want other color, you can use CSS.

List of Classes
• bg-primary
• bg-success
• bg-info
• bg-warning
• bg-danger
• bg-secondary
• bg-dark
• bg-light

D. Harsha Vardhan (UI Expert) P a g e 234 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Background Colors

D. Harsha Vardhan (UI Expert) P a g e 235 | 499

 HTML, CSS, JavaScript, Bootstrap

Display Headings
• It is used to display headings with thin text and larger font size.

List of Classes
• display-1
• display-2
• display-3
• display-4

Example on Display Headings

D. Harsha Vardhan (UI Expert) P a g e 236 | 499

 HTML, CSS, JavaScript, Bootstrap

Text Alignment
• We can apply text alignment, by using the following bootstrap css classes.
• Default is "left alignment".

List of Classes
• text-left
• text-center
• text-right
• text-justify

Example on Text Alignment

D. Harsha Vardhan (UI Expert) P a g e 237 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 238 | 499

 HTML, CSS, JavaScript, Bootstrap

Text Styles
• The following set of bootstrap classes are used to set text styles such as bold, italic, uppercase etc.

List of Classes
• font-weight-bold
• font-weight-light
• font-italic
• text-lowercase
• text-uppercase
• text-capitalize

Example on Text Styles

D. Harsha Vardhan (UI Expert) P a g e 239 | 499

 HTML, CSS, JavaScript, Bootstrap

Lead
• It is used to display a leading paragraph (in larger font size and more line height).

List of Classes
• lead

D. Harsha Vardhan (UI Expert) P a g e 240 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Lead

D. Harsha Vardhan (UI Expert) P a g e 241 | 499

 HTML, CSS, JavaScript, Bootstrap

Visibility
• It is used to show / hide the element in the web page.

List of Classes
• visible
• invisible

Example on Visibility

D. Harsha Vardhan (UI Expert) P a g e 242 | 499

 HTML, CSS, JavaScript, Bootstrap

Understanding the Columns

• It is used to divide the web page as rows.
• Each row contains 12 equal blocks / columns.
• A <div> tag can occupy one or more blocks.
• A row can have maximum 12 <div> tags.

List of Classes
• .col-n

Example on Grid System - 12

D. Harsha Vardhan (UI Expert) P a g e 243 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Grid System - 4+4+4

D. Harsha Vardhan (UI Expert) P a g e 244 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Grid System - 6+6

D. Harsha Vardhan (UI Expert) P a g e 245 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Grid System - 4+8

Example on Grid System - Automatic

D. Harsha Vardhan (UI Expert) P a g e 246 | 499

 HTML, CSS, JavaScript, Bootstrap

Types of Devices
Extra Small Devices:
• Very-Low-range Phones: Screens less than 1px to 575px width.
• Ex: iPhone 2G, 3G (320px width / 480px height)
<div class=”col -n”>…</div>
<div class=”col -n”>…</div>
…

Small Devices:
• Low-range phones & Tablets: Screens less than 576px to 767px width.
• Ex: iPhone 4, 4s (640px width / 960px height)
• Ex: iPhone 5, 5s, 5C, SE (640px width / 1136px height)
• Ex: iPhone 6, 6s, 7, 8 (750px width / 1334px height)
<div class=”col-sm-n”>…</div>

D. Harsha Vardhan (UI Expert) P a g e 247 | 499

 HTML, CSS, JavaScript, Bootstrap

<div class=”col-sm-n”>…</div>
…

Medium Devices:
• Lower-mid range phones & Small laptops: Screens less than 768px to 991px width.
• Ex: Samsung Note 1 (800px width / 1280px height)
<div class=”col-md-n”>…</div>
<div class=”col-md-n”>…</div>
…

Large Devices:
• Mid-range phones & Small laptops: Screens less than 992px to 1199px width.
• Ex: iPhone 6 Plus (1080px width / 1920px height)
• Ex: iPhone 10 (1125px width / 2436px height)
<div class=”col-lg-n”>…</div>
<div class=”col-lg-n”>…</div>
…

Extra Large Devices:

• High-end phones & Most used laptops: Screens less than 1200px to unlimited width.
• Ex: iPhone 7+, 8+ (1242px width / 2208px height)
• Ex: iPad (all types)
<div class=”col-lg-n”>…</div>
<div class=”col-lg-n”>…</div>
…

Example on Grid System - Responsive

D. Harsha Vardhan (UI Expert) P a g e 248 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Grid System - Responsive - With Content

D. Harsha Vardhan (UI Expert) P a g e 249 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 250 | 499

 HTML, CSS, JavaScript, Bootstrap

Jumbotron
• It is used to display heading and paragraph in large size with a special box to highlight its content.

List of Classes
• jumbotron

D. Harsha Vardhan (UI Expert) P a g e 251 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Jumbotron

Image Shapes
• It is used to display images with rounded corners.

List of Classes
• rounded
• rounded-circle
• img-thumbnail

D. Harsha Vardhan (UI Expert) P a g e 252 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Image Shapes

Image Alignment
• It is used to display horizontal alignment of the image.

List of Classes
• float-left
• float-right
• mx-auto
• d-block

Example on Image Alignment

D. Harsha Vardhan (UI Expert) P a g e 253 | 499

 HTML, CSS, JavaScript, Bootstrap

Image Fluid
• It is used to display reduce the size of the image automatically, if the page width is reduced.

List of Classes
• img-fluid

Example on Image Fluid

D. Harsha Vardhan (UI Expert) P a g e 254 | 499

 HTML, CSS, JavaScript, Bootstrap

Basic Table
• It is used to display table with expand width and padding, horizontal borders.

List of Classes
• table

Example on Basic Table

D. Harsha Vardhan (UI Expert) P a g e 255 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 256 | 499

 HTML, CSS, JavaScript, Bootstrap

Borderless Table
• It is used to display table without borders.

List of Classes
• table-borderless

Example on Borderless Table

D. Harsha Vardhan (UI Expert) P a g e 257 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 258 | 499

 HTML, CSS, JavaScript, Bootstrap

Bordered Table
• It is used to display table with both horizontal & vertical borders.

List of Classes
• table-bordered

Example on Bordered Table

D. Harsha Vardhan (UI Expert) P a g e 259 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 260 | 499

 HTML, CSS, JavaScript, Bootstrap

Striped Table
• It is used to display table with alternate row background

List of Classes
• table-striped

Example on Striped Table

D. Harsha Vardhan (UI Expert) P a g e 261 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 262 | 499

 HTML, CSS, JavaScript, Bootstrap

Hover Table
• It is used to display table with background color change on row hover.

List of Classes
• table-hover

Example on Hover Table

D. Harsha Vardhan (UI Expert) P a g e 263 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 264 | 499

 HTML, CSS, JavaScript, Bootstrap

Table Background Colors

• It is used to display table / rows with different background colors.
• These classes can be applicable for <table>, <tr> or <td> tags.

List of Classes
• table-primary
• table-success
• table-danger
• table-info
• table-warning
• table-warning
• table-active
• table-secondary
• table-light
• table-dark

Example on Table Background Colors

D. Harsha Vardhan (UI Expert) P a g e 265 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 266 | 499

 HTML, CSS, JavaScript, Bootstrap

Table Header Background Colors

• It is used to display table header row with dark / light colors.

D. Harsha Vardhan (UI Expert) P a g e 267 | 499

 HTML, CSS, JavaScript, Bootstrap

• These classes can be applicable only for <thead> tag.

List of Classes
• thead-dark
• thead-light

Example on Table Header Background Colors

D. Harsha Vardhan (UI Expert) P a g e 268 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 269 | 499

 HTML, CSS, JavaScript, Bootstrap

Table Small
• It is used to display table with small size (less padding).

List of Classes
• table-sm

Example on Table Small

D. Harsha Vardhan (UI Expert) P a g e 270 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 271 | 499

 HTML, CSS, JavaScript, Bootstrap

Table Responsive
• It is used to display scrollbar for the table automatically, when the web page is resized.
• This class can be applicable only for <div> tag that contains <table> tag.

List of Classes
• table-responsive

Example on Table Responsive

D. Harsha Vardhan (UI Expert) P a g e 272 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 273 | 499

 HTML, CSS, JavaScript, Bootstrap

Alerts
• It is used to display alert message (short message) at the top of the web page.

List of Classes
• alert
• fade
• show
• close
• alert-primary
• alert-success
• alert-info
• alert-warning
• alert-danger
• alert-secondary
• alert-light

D. Harsha Vardhan (UI Expert) P a g e 274 | 499

 HTML, CSS, JavaScript, Bootstrap

• alert-dark

Example on Alerts

D. Harsha Vardhan (UI Expert) P a g e 275 | 499

 HTML, CSS, JavaScript, Bootstrap

Button Colors
• It is used to display buttons with different colors.

List of Classes
• btn
• btn-primary
• btn-secondary
• btn-success
• btn-info
• btn-warning
• btn-danger
• btn-dark

D. Harsha Vardhan (UI Expert) P a g e 276 | 499

 HTML, CSS, JavaScript, Bootstrap

• btn-light
• btn-link

Example on Button Colors

Button Outline
• It is used to display buttons with only border (white background).

List of Classes
• btn-outline-primary

D. Harsha Vardhan (UI Expert) P a g e 277 | 499

 HTML, CSS, JavaScript, Bootstrap

• btn-outline-secondary
• btn-outline-success
• btn-outline-info
• btn-outline-warning
• btn-outline-danger
• btn-outline-dark
• btn-outline-light

Example on Button Outline

D. Harsha Vardhan (UI Expert) P a g e 278 | 499

 HTML, CSS, JavaScript, Bootstrap

Button Sizes
• It is used to display large / small buttons.

List of Classes
• btn-block
• btn-lg
• btn-sm

Example on Button Sizes

Button Groups
• It is used to display grouped buttons.
• It reduces margin between buttons.

D. Harsha Vardhan (UI Expert) P a g e 279 | 499

 HTML, CSS, JavaScript, Bootstrap

List of Classes
• btn-group

Example on Button Groups

Button Vertical Groups

• It is used to display vertically grouped buttons.
• It reduces margin between buttons.

List of Classes
• btn-group-vertical

Example on Button Vertical Groups

D. Harsha Vardhan (UI Expert) P a g e 280 | 499

 HTML, CSS, JavaScript, Bootstrap

Button DropDown
• It is used to display dropdownlist for the button.

List of Classes
• dropdown-toggle
• dropdown-toggle-split
• caret
• dropdown-menu
• dropdown-item

Example on Button DropDown

D. Harsha Vardhan (UI Expert) P a g e 281 | 499

 HTML, CSS, JavaScript, Bootstrap

Basic Badges
• It is used to indication near heading / button.

List of Classes
• badge

D. Harsha Vardhan (UI Expert) P a g e 282 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Badges

Badge Colors
• It is used to set background colors for the badges

D. Harsha Vardhan (UI Expert) P a g e 283 | 499

 HTML, CSS, JavaScript, Bootstrap

List of Classes
• badge
• badge-primary
• badge-secondary
• badge-success
• badge-info
• badge-warning
• badge-danger
• badge-dark
• badge-light

Example on Badge Colors

D. Harsha Vardhan (UI Expert) P a g e 284 | 499

 HTML, CSS, JavaScript, Bootstrap

Pill Badges
• It is used to display more rounded badges.

List of Classes
• badge-pill

Example on Pill Badges

D. Harsha Vardhan (UI Expert) P a g e 285 | 499

 HTML, CSS, JavaScript, Bootstrap

Basic Progress Bar

• It is used to display progress bar, based on the given width and height.

List of Classes
• progress
• progress-bar
• mx-auto

Example on Basic Progress Bar

D. Harsha Vardhan (UI Expert) P a g e 286 | 499

 HTML, CSS, JavaScript, Bootstrap

Progress Bar Colors

• It is used to display progress bar with different colors..

List of Classes
• bg-success
• bg-info
• bg-warning
• bg-danger
• bg-secondary
• bg-light
• bg-dark
• progress-bar-striped
• progress-bar-animated

Example on Progress Bar Colors

D. Harsha Vardhan (UI Expert) P a g e 287 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 288 | 499

 HTML, CSS, JavaScript, Bootstrap

Basic Pagination
• It is used to display page numbers.

List of Classes
• pagination
• page-item
• page-link
• active

Example on Basic Pagination

D. Harsha Vardhan (UI Expert) P a g e 289 | 499

 HTML, CSS, JavaScript, Bootstrap

Pagination Size
• It is used to display pagination in large / small size.

List of Classes
• pagination-lg
• pagination-sm

Example on Pagination Size

D. Harsha Vardhan (UI Expert) P a g e 290 | 499

 HTML, CSS, JavaScript, Bootstrap

Pagination Alignment
• It is used to display pagination left / center / right side of the page.

List of Classes
• justify-content-center
• justify-content-end

Example on Pagination Alignment

D. Harsha Vardhan (UI Expert) P a g e 291 | 499

 HTML, CSS, JavaScript, Bootstrap

Breadcrumbs
• It is used to display location (navigation path) of the current web page in the website.

List of Classes
• breadcrumb
• breadcrumb-item

D. Harsha Vardhan (UI Expert) P a g e 292 | 499

 HTML, CSS, JavaScript, Bootstrap

• active

Example on Breadcrumbs

Basic List Groups

• It is used to display items (text / hyperlinks) as a list.

List of Classes
• list-group
• list-group-flush
• list-group-item

D. Harsha Vardhan (UI Expert) P a g e 293 | 499

 HTML, CSS, JavaScript, Bootstrap

• list-group-item-action

Example on Basic List Groups

List Group Colors

• It is used to display list group with different background colors.

List of Classes
• list-group-item-success
• list-group-item-secondary
• list-group-item-info

D. Harsha Vardhan (UI Expert) P a g e 294 | 499

 HTML, CSS, JavaScript, Bootstrap

• list-group-item-warning
• list-group-item-danger
• list-group-item-dark
• list-group-item-light

Example on List Group Colors

D. Harsha Vardhan (UI Expert) P a g e 295 | 499

 HTML, CSS, JavaScript, Bootstrap

Basic Cards
• It is used to display some content (box) with header and footer.

List of Classes
• card
• card-header
• card-body
• card-footer

Example on Basic Cards

D. Harsha Vardhan (UI Expert) P a g e 296 | 499

 HTML, CSS, JavaScript, Bootstrap

Card Colors
• It is used to display some content (box) with header and footer.

List of Classes
• bg-primary
• bg-success
• bg-info
• bg-warning
• bg-danger
• bg-secondary
• bg-dark
• bg-danger

Example on Card Colors

D. Harsha Vardhan (UI Expert) P a g e 297 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 298 | 499

 HTML, CSS, JavaScript, Bootstrap

Card Images
• It is used to display cards with images.

List of Classes
• card-img-top
• card-title
• card-text

Example on Card Images

D. Harsha Vardhan (UI Expert) P a g e 299 | 499

 HTML, CSS, JavaScript, Bootstrap

Card Groups
• It is used to display group of cards side by side.

List of Classes
• card-group

Example on Card Groups

D. Harsha Vardhan (UI Expert) P a g e 300 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 301 | 499

 HTML, CSS, JavaScript, Bootstrap

Tooltip
• It is used to display tooltip message when the user places mouse pointer on it.

List of Classes
• data-toggle="tooltip"
• data-placement="top | bottom | left | right"
• title

Example on Tooltip

D. Harsha Vardhan (UI Expert) P a g e 302 | 499

 HTML, CSS, JavaScript, Bootstrap

Popover
• It is used to display message (some text) when the user clicks an element.
• The popover can show when the cursor focuses the element.
• The popover can have title and content also.

List of Classes
• data-toggle="popover"
• title
• data-content="some text"
• data-placement="top | bottom | left | right"
• data-trigger="focus"

Example on Popover

D. Harsha Vardhan (UI Expert) P a g e 303 | 499

 HTML, CSS, JavaScript, Bootstrap

Basic Collapsible
• It is used to display expandable / collapsible content.
• The content will be shown when the user clicks on the button / link.

List of Classes
• collapse
• data-toggle="collapse"
• data-target="#id"

Example on Basic Collapsible

D. Harsha Vardhan (UI Expert) P a g e 304 | 499

 HTML, CSS, JavaScript, Bootstrap

Link Collapsible
• It is used to display expandable / collapsible content, based on the link.
• The content will be shown when the user clicks on the link.

List of Classes
• show

Example on Link Collapsible

D. Harsha Vardhan (UI Expert) P a g e 305 | 499

 HTML, CSS, JavaScript, Bootstrap

Accordion
• It is used to display a group of collapsible items and show any one of them, when the user clicks it.
• Out of few collapsible items, only one is visible to the user.

List of Classes
• show

Example on Accordion

D. Harsha Vardhan (UI Expert) P a g e 306 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 307 | 499

 HTML, CSS, JavaScript, Bootstrap

Inline Form
• It is used to create a simple form (with limited no. of elements), where the elements appear side-
by-side.

List of Classes
• form-inline
• form-group

D. Harsha Vardhan (UI Expert) P a g e 308 | 499

 HTML, CSS, JavaScript, Bootstrap

• form-control
• mr-n
• form-check
• form-check-label
• form-check-input

Example on Inline Form

D. Harsha Vardhan (UI Expert) P a g e 309 | 499

 HTML, CSS, JavaScript, Bootstrap

Stacked Form
• It is used to create a form, where the form elements appear line-by-line.

List of Classes
• form-text
• form-control-file

Example on Stacked Form

D. Harsha Vardhan (UI Expert) P a g e 310 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 311 | 499

 HTML, CSS, JavaScript, Bootstrap

Form Grid
• It is used to create a form, where the desired form elements appear side-by-side.

List of Classes
• form-row

Example on Form Grid

D. Harsha Vardhan (UI Expert) P a g e 312 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 313 | 499

 HTML, CSS, JavaScript, Bootstrap

Horizontal Form Grid

• It is used to create a form, where the labels and form elements appear side-by-side.

List of Classes
• form-row
• col-sm-n
• col-form-label
• offset-sm-n

Example on Horizontal Form Grid

D. Harsha Vardhan (UI Expert) P a g e 314 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 315 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 316 | 499

 HTML, CSS, JavaScript, Bootstrap

Input Groups
• It is used to create a form element, with some text inside it.

List of Classes
• input-group
• input-group-prepend
• input-group-append
• input-group-text

Example on Input Groups

D. Harsha Vardhan (UI Expert) P a g e 317 | 499

 HTML, CSS, JavaScript, Bootstrap

Form Validation
• It is used to display success message / error message, based on the value that is entered by the
user.

D. Harsha Vardhan (UI Expert) P a g e 318 | 499

 HTML, CSS, JavaScript, Bootstrap

List of Classes
• needs-validation
• novalidate="novalidate"
• valid-feedback
• invalid-feedback
• valid-tooltip
• invalid-tooltip
• required="required"
• pattern="reg exp"

Example on Form Validation

D. Harsha Vardhan (UI Expert) P a g e 319 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 320 | 499

 HTML, CSS, JavaScript, Bootstrap

Basic Navigation
• It is used to display a simple navigation bar with few hyperlinks
• When the user clicks on any hyperlink, the corresponding web page (html file) will be opened.

List of Classes
• nav
• nav-item
• nav-link

Example on Basic Navigation

D. Harsha Vardhan (UI Expert) P a g e 321 | 499

 HTML, CSS, JavaScript, Bootstrap

Navigation Alignment
• It is used to set alignment for the simple navigation bar.
• Default is left alignment.
• You can set center / right alignment.

List of Classes
• justify-content-center
• justify-content-end

Example on Navigation Alignment

D. Harsha Vardhan (UI Expert) P a g e 322 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 323 | 499

 HTML, CSS, JavaScript, Bootstrap

Vertical Navigation
• It is used to display the simple navigation bar in vertical mode.

List of Classes
• flex-column

Example on Vertical Navigation

D. Harsha Vardhan (UI Expert) P a g e 324 | 499

 HTML, CSS, JavaScript, Bootstrap

Tabs
• It is used to display a set of tabs and show the corresponding content below, when the user clicks
on any one tab.

List of Classes
• nav-tabs
• data-toggle="tab"
• tab-content
• tab-pane
• container
• active
• fade

Example on Tabs

D. Harsha Vardhan (UI Expert) P a g e 325 | 499

 HTML, CSS, JavaScript, Bootstrap

Pills
• It is used to display a set of tabs with more rounded corners and background color.

D. Harsha Vardhan (UI Expert) P a g e 326 | 499

 HTML, CSS, JavaScript, Bootstrap

List of Classes
• nav-pills
• data-toggle="pill"

Example on Pills

D. Harsha Vardhan (UI Expert) P a g e 327 | 499

 HTML, CSS, JavaScript, Bootstrap

Tabs with DropDown

• It is used to display dropdown menu in the tabs.

List of Classes
• dropdown
• dropdown-toggle
• data-toggle="dropdown"
• dropdown-menu
• dropdown-item

Example on DropDown

D. Harsha Vardhan (UI Expert) P a g e 328 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 329 | 499

 HTML, CSS, JavaScript, Bootstrap

Basic Navigation Bar

• It is used to display a complex navigation bar (NavBar) with few hyperlinks.
• When the user clicks on any hyperlink, the corresponding web page (html file) will be opened.
• NavBar can shrink when we reduce the width of the browser / in mobile devices, automatically.
• NavBar supports to display website logo (text / image).
• NavBar supports to display form elements such as textboxes etc.

List of Classes
• navbar
• navbar-expand-sm
• navbar-dark
• navbar-nav
• nav-item
• nav-link
• active

Example on Basic Navigation Bar

home.html

D. Harsha Vardhan (UI Expert) P a g e 330 | 499

 HTML, CSS, JavaScript, Bootstrap

about.html

D. Harsha Vardhan (UI Expert) P a g e 331 | 499

 HTML, CSS, JavaScript, Bootstrap

contact.html

D. Harsha Vardhan (UI Expert) P a g e 332 | 499

 HTML, CSS, JavaScript, Bootstrap

NavBar Collapsible
• It is used to display a collapsible navbar. That means when the web page has been opened in small
devices, the menu will be automatically converted into "=" icon. When the user clicks on this icon,
the menu gets opened.

List of Classes
• navbar-expand-sm
• navbar-brand
• navbar-toggler
• data-toggle="collapse"
• data-target="#id"
• collapse
• navbar-collapse

Example on NavBar Collapsible

D. Harsha Vardhan (UI Expert) P a g e 333 | 499

 HTML, CSS, JavaScript, Bootstrap

NavBar DropDown
• It is used to display a dropdown menu for the navigation bar item.

List of Classes
• dropdown
• dropdown-toggle
• data-toggle="dropdown"
• dropdown-menu
• dropdown-item

Example on NavBar DropDown

D. Harsha Vardhan (UI Expert) P a g e 334 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 335 | 499

 HTML, CSS, JavaScript, Bootstrap

NavBar Search
• It is used to display a search box for the navigation bar.

List of Classes
• form-inline
• form-control
• mr-sm-n

Example on NavBar Search

D. Harsha Vardhan (UI Expert) P a g e 336 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 337 | 499

 HTML, CSS, JavaScript, Bootstrap

NavBar FixedTop
• It is used to display a navbar always at the top of the page, even though the user has scrolled the
page up / down.

List of Classes
• fixed-top

Example on NavBar FixedTop

D. Harsha Vardhan (UI Expert) P a g e 338 | 499

 HTML, CSS, JavaScript, Bootstrap

NavBar Sticky Top

• By default, the navbar appears in the middle of the page; and the navbar will be displayed always
at the top of the page, only when the user has scrolled the page up / down.

D. Harsha Vardhan (UI Expert) P a g e 339 | 499

 HTML, CSS, JavaScript, Bootstrap

List of Classes
• sticky-top

Example on NavBar Sticky-Top

D. Harsha Vardhan (UI Expert) P a g e 340 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 341 | 499

 HTML, CSS, JavaScript, Bootstrap

Scrollspy
• It is used to change the "active" class to the current menu item, when the web page is scrolled
vertically.

List of Classes
• data-spy="scroll"
• data-target=".navbar"
• data-offset="pixels"

Example on ScrollSpy

D. Harsha Vardhan (UI Expert) P a g e 342 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 343 | 499

 HTML, CSS, JavaScript, Bootstrap

Carousel
• It is used to display image slide show with / without text.

List of Classes
• carousel
• slide
• data-ride="carousel"
• data-interval="milli seconds"
• carousel-indicators
• data-target="#id"
• data-slide-to="n"
• active
• carousel-inner
• carousel-item
• carousel-caption
• carousel-control-prev
• carousel-control-prev-icon
• data-slide="prev"
• data-slide="next"

D. Harsha Vardhan (UI Expert) P a g e 344 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Carousel

D. Harsha Vardhan (UI Expert) P a g e 345 | 499

 HTML, CSS, JavaScript, Bootstrap

Modal
• It is used to display modal popup box with desired content.

D. Harsha Vardhan (UI Expert) P a g e 346 | 499

 HTML, CSS, JavaScript, Bootstrap

List of Classes
• data-toggle="modal"
• data-target="#id"
• modal
• fade
• modal-dialog
• modal-lg
• modal-dialog-centered
• modal-content
• modal-header
• modal-body
• modal-footer
• close
• data-dismiss="modal"

Example on Modal

D. Harsha Vardhan (UI Expert) P a g e 347 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 348 | 499

 HTML, CSS, JavaScript, Bootstrap

LESS

Introduction to LESS
• LESS stands for "LEAN CSS".
• "LESS" makes it easy to modify the CSS file. If you make the change in one place, the same will be
automatically effected in multiple places.
• The LESS code is written in ".less" files and will be converted into "css" files, as the browser
supports only CSS, but not LESS.
• If you modify the the LESS file and compile it into CSS file, the change will be effected in multiple
places in CSS.
• Additionally, LESS supports some additional features such as variables, operators, mixins, color
functions etc., which are not supported by CSS. LESS is the superset of CSS, which supports all
concepts of CSS along with the specified additional features.

1. Download and Install WinLess

2. Create LESS file
3. Compile LESS file to CSS file
4. Import CSS file into HTML file
5. Run the HTML file

1. Downloading and Installing WinLess

• Go to "http://winless.org".

D. Harsha Vardhan (UI Expert) P a g e 349 | 499

 HTML, CSS, JavaScript, Bootstrap

• Click on "Download".
• You will get a file called "WinLess-1.9.1.msi".

• Double click on "WinLess-1.9.1.msi".

D. Harsha Vardhan (UI Expert) P a g e 350 | 499

 HTML, CSS, JavaScript, Bootstrap

• Check the checkbox "I accept the terms in the License Agreement".
• Click on "Install".

D. Harsha Vardhan (UI Expert) P a g e 351 | 499

 HTML, CSS, JavaScript, Bootstrap

• Click on "Finish".

2. Creating LESS File

• Open Visual Studio Code.
• Go to "File" > "New File".
• Write the following program:

D. Harsha Vardhan (UI Expert) P a g e 352 | 499

 HTML, CSS, JavaScript, Bootstrap

• Go to "File" menu – "Save".

D. Harsha Vardhan (UI Expert) P a g e 353 | 499

 HTML, CSS, JavaScript, Bootstrap

• Enter filename as "StyleSheet.less".

• Select the folder "c:\ui".
• Click on "Save".

D. Harsha Vardhan (UI Expert) P a g e 354 | 499

 HTML, CSS, JavaScript, Bootstrap

• Now the "c:\ui\StyleSheet.less" file is ready.

D. Harsha Vardhan (UI Expert) P a g e 355 | 499

 HTML, CSS, JavaScript, Bootstrap

3. Compile LESS File into CSS File

• Go to "Start" > "WinLess" > "WinLess".

• WinLess opened.

D. Harsha Vardhan (UI Expert) P a g e 356 | 499

 HTML, CSS, JavaScript, Bootstrap

• Click on "Add folder".

• Select "c:\ui". Click on "Select Folder".

D. Harsha Vardhan (UI Expert) P a g e 357 | 499

 HTML, CSS, JavaScript, Bootstrap

• It shows the list of LESS files automatically. It also generates CSS filename automatically.
• Click on "Compile".

• It compiles the LESS file and generates CSS file automatically.

• The compiled CSS code (automatically generated):

D. Harsha Vardhan (UI Expert) P a g e 358 | 499

 HTML, CSS, JavaScript, Bootstrap

4. Import the CSS File into HTML File

• Open Visual Studio Code.
• Go to "File" > "New File".
• Write the following program:

• Go to "File" menu – "Save".

D. Harsha Vardhan (UI Expert) P a g e 359 | 499

 HTML, CSS, JavaScript, Bootstrap

• Enter filename as "Page1.html".

• Select the folder "c:\ui".
• Click on "Save".

D. Harsha Vardhan (UI Expert) P a g e 360 | 499

 HTML, CSS, JavaScript, Bootstrap

• Now the "c:\ui\Page1.html" file is ready.

D. Harsha Vardhan (UI Expert) P a g e 361 | 499

 HTML, CSS, JavaScript, Bootstrap

5. Run the HTML File

• Go to "c:\ui" folder and double click on "Page1.html".

Output:

Variables
• In LESS, variables are used to store a value.
• The variable create once, can be used many times within the same less file. While converting into
CSS, the variables will be replaced with actual value.
• Variable names must be started with "@".

Mixins
• Mixins are used to mix a CSS class with another style.

Syntax (LESS File):

.classname
{
property1: value;

D. Harsha Vardhan (UI Expert) P a g e 362 | 499

 HTML, CSS, JavaScript, Bootstrap

property2: value;
}
selector
{
.classname;
property3: value;
property3: value;
}

Result (CSS File):

.classname
{
property1: value;
property2: value;
}
selector
{
property1: value;
property2: value;
property3: value;
property3: value;
}

Example on Mixins
c:\ui\StyleSheet.less

D. Harsha Vardhan (UI Expert) P a g e 363 | 499

 HTML, CSS, JavaScript, Bootstrap

c:\ui\Page1.html

Mixins With Parameters

• Mixins can receive one or more parameters (arguments), and utlize those values into the styles.
Everytime when you call the mixin, you can pass different values to the mixin.

Syntax (LESS File):

.classname(@parameter1, @parameter2, …)
{
property1: value;
property2: value;
}

Example on Mixins with Parameters

c:\ui\StyleSheet.less

D. Harsha Vardhan (UI Expert) P a g e 364 | 499

 HTML, CSS, JavaScript, Bootstrap

c:\ui\Page1.html

Nested Rules
• These are used to apply CSS styles for the child elements of a specific parent tag.

Syntax (LESS File):

parenttag
{
child1
{
styles here
}
child2

D. Harsha Vardhan (UI Expert) P a g e 365 | 499

 HTML, CSS, JavaScript, Bootstrap

{
styles here
}
}

Result (CSS File):

parenttag child1
{
}

parenttag child2
{
}

Example on Nested Rules

c:\ui\StyleSheet.less

c:\ui\Page1.html

D. Harsha Vardhan (UI Expert) P a g e 366 | 499

 HTML, CSS, JavaScript, Bootstrap

Operators
• In LESS, we can use all the arithmetical operators such as +, -, *, / etc.
• The LESS compiler calculates the operators and generates the result.

Syntax (LESS File):

selector
{
property: a+b;
}

Result (CSS File):

selector
{
property: sum;
}

Example on Operators
c:\ui\StyleSheet.less

D. Harsha Vardhan (UI Expert) P a g e 367 | 499

 HTML, CSS, JavaScript, Bootstrap

c:\ui\Page1.html

Color Functions
• These are used to make the color darker / lighter.

Syntax (LESS File):

darken(color, percentage);
lighten(color, percentage);

Result (CSS File):

#ffffff
#000000

Example on Operators
c:\ui\StyleSheet.less

D. Harsha Vardhan (UI Expert) P a g e 368 | 499

 HTML, CSS, JavaScript, Bootstrap

c:\ui\Page1.html

D. Harsha Vardhan (UI Expert) P a g e 369 | 499

 HTML, CSS, JavaScript, Bootstrap

JavaScript 5, 6 & 7

Introduction to JavaScript
• JavaScript is a programming language, which is used to create functionality in the web page.
Functionality means, “receiving inputs from the user and providing output to the user”.
• It can perform tasks such as calculations, decision making, repetitive tasks, dynamically displaying
the output, reading inputs from the user dynamically, updating content on the web page based on
the inputs, interacting with server, validations etc.
• It’s operators and control statements are similar to “C” language.
• JavaScript is client-side (browser-side) language. That means it executes on the browser. It can also
be used in server by using NodeJS.
• JavaScript is a case sensitive language.
• JavaScript is “interpreter-based” language. That means the code will be converted into machine
language, line-by-line.
• JavaScript was developed by “Netscape Corporation” in 1996.
• JavaScript is the implementation of "EcmaScript". "EcmaScript" is the specification of "JavaScript".
• "EcmaScript" is designed by "Ecma International".

Syntax of JavaScript

• Note: You can write the <script> tag either in <head> tag or <body> tag also; however, writing
<script> tag at the end of <body> tag is a best practice.
• The type="text/javascript" attribute specifies that you are using javascript language; It is optional.

console.log()
• The console.log() statement is used to display value in the browser console.
• To see console, first run the program in the browser and press "F12" or right click and choose
"Inspect Element" – "Console" option in the browser.
Syntax: console.log(value);

D. Harsha Vardhan (UI Expert) P a g e 370 | 499

 HTML, CSS, JavaScript, Bootstrap

1. Installing Visual Studio Code

2. Creating JavaScript Program
3. Executing JavaScript Program

1. Installing Visual Studio Code

“Visual Studio Code” is the recommended editor for html, css, javascript and many other languages /
frameworks.
Go to https://code.visualstudio.com

Click on “Download for Windows”.

Note: The version number may be different at your practice time.
Go to “Downloads” folder; you can find “VSCodeSetup-x64-1.19.2.exe” file.

D. Harsha Vardhan (UI Expert) P a g e 371 | 499

 HTML, CSS, JavaScript, Bootstrap

Double click on “VSCodeSetup-x64-1.19.2.exe” file.

Click on “Yes”.

Click on “Next”.

D. Harsha Vardhan (UI Expert) P a g e 372 | 499

 HTML, CSS, JavaScript, Bootstrap

Click on “I accept the agreement”.

Click on “Next”.

Click on “Next”.

D. Harsha Vardhan (UI Expert) P a g e 373 | 499

 HTML, CSS, JavaScript, Bootstrap

Click on “Next”.

Check the checkbox “Add Open with Code action to Windows Explorer file context menu”.
Check the checkbox “Add Open with Code action to Windows Explorer directory context menu”.

D. Harsha Vardhan (UI Expert) P a g e 374 | 499

 HTML, CSS, JavaScript, Bootstrap

Click on “Next”.

Click on “Install”.

Installation is going on….

D. Harsha Vardhan (UI Expert) P a g e 375 | 499

 HTML, CSS, JavaScript, Bootstrap

Click on “Finish”.

2. Create JavaScript Program

• Open “Visual Studio Code”, by clicking on “Start” – “Visual Studio Code”.

D. Harsha Vardhan (UI Expert) P a g e 376 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 377 | 499

 HTML, CSS, JavaScript, Bootstrap

• Visual Studio Code opened.

D. Harsha Vardhan (UI Expert) P a g e 378 | 499

 HTML, CSS, JavaScript, Bootstrap

• Go to “File” – “New File”.

D. Harsha Vardhan (UI Expert) P a g e 379 | 499

 HTML, CSS, JavaScript, Bootstrap

Type the program as follows:

D. Harsha Vardhan (UI Expert) P a g e 380 | 499

 HTML, CSS, JavaScript, Bootstrap

• Go to “File” menu – “Save” (or) Press Ctrl+S.

• Go to "c:\" and click on "New folder". Enter the new folder name as "ui".
• Select “c:\ui” folder and enter the filename as “first.html”.
• Click on “Save”.
• Now the typescript file (c:\ui\first.html) is ready.

3. Execute the JavaScript Program

• Go to “Computer” or “This PC” and go to “c:\ui” folder.

D. Harsha Vardhan (UI Expert) P a g e 381 | 499

 HTML, CSS, JavaScript, Bootstrap

• Double click on “first.html” (or) Right click on “first.html” and click on “Open With” – “Mozilla
Firefox” / "Open With" – "Google Chrome".
• In the browser, right click in the web page and click on "Inspect Element" (or) press "F12" function
key to open console.

Output: Hello World

• Variable is a “named memory location” in RAM, to store a value temporarily, while executing the
program.
• In JavaScript, the variables will be persisted (stored), while the web page is running in the browser.
• The value of variable can be changed any no. of times during the web page execution.
• The data type of the variable can be changed any no. of times during the web page execution, in
JavaScript.

Steps for development of variables

▪ Declare (create) the variable - optional: var variablename;

D. Harsha Vardhan (UI Expert) P a g e 382 | 499

 HTML, CSS, JavaScript, Bootstrap

▪ Set value into the variable: variablename = value;

▪ Get value from the variable: variablename

Example on Variables

• Operator is a symbol, which represents an operation.

• JavaScript supports the following types of operators.
1. Arithmetical Operators
2. Assignment Operators
3. Increment and Decrement Operators
4. Relational Operators
5. Logical Operators
6. Concatenation Operator

Arithmetical Operators
+ Addition
- Subtraction
* Multiplication
/ Division
% Remainder

Example on Arithmetical Operators

D. Harsha Vardhan (UI Expert) P a g e 383 | 499

 HTML, CSS, JavaScript, Bootstrap

Assignment Operators
= Assigns to
+= Add and assigns to
-= Subtract and assigns to
*= Multiply and assigns to
/= Divide and assigns to
%= Remainder and assigns to

Example on Assignment Operators

D. Harsha Vardhan (UI Expert) P a g e 384 | 499

 HTML, CSS, JavaScript, Bootstrap

Increment and Decrement Operators

++ Increment (+=1)
-- Decrement (-=1)

Example on Increment and Decrement Operators

Relational Operators
== Equal to
!= Not Equal to
< Less than
> Greater than
<= Less than or equal to
>= Greater than or equal to

Example on Relational Operators

D. Harsha Vardhan (UI Expert) P a g e 385 | 499

 HTML, CSS, JavaScript, Bootstrap

Logical Operators
&& And (both conditions should be true)
|| Or (At least any one condition should be true)
! Not (given condition will be reverse)

Example on Logical Operators

D. Harsha Vardhan (UI Expert) P a g e 386 | 499

 HTML, CSS, JavaScript, Bootstrap

Concatenation Operator
+ Attaches two strings and returns a single string.
Ex: “new” + “delhi” = “newdelhi”

Number + Number = addition

String + String = concatenation
String + Number = concatenation
Number + String = concatenation

Example on Concatenation Operator

• Control statements are used to control (change) the program execution flow.
• These are used to make the execution flow jump forward / jump backward.
• JavaScript supports two types of control statements:
1. Conditional Control Statements: Used to jump forward.
2. Looping Control Statements: Used to jump backward.

1.Conditional Control Statements

• If
• Switch-case

2.Looping Control Statements

• While
• Do-while
• For

D. Harsha Vardhan (UI Expert) P a g e 387 | 499

 HTML, CSS, JavaScript, Bootstrap

if
• “If” statement is used to check a condition, and execute the code only if the condition is TRUE.
• Types of “if”
1. If
2. If-else
3. Else-if
4. Nested if

Simple If

Example of “Simple if”

D. Harsha Vardhan (UI Expert) P a g e 388 | 499

 HTML, CSS, JavaScript, Bootstrap

If Else

Example of “if-else”

D. Harsha Vardhan (UI Expert) P a g e 389 | 499

 HTML, CSS, JavaScript, Bootstrap

Else if

Example of “else-if”

D. Harsha Vardhan (UI Expert) P a g e 390 | 499

 HTML, CSS, JavaScript, Bootstrap

Nested If

Example of “nested if”

D. Harsha Vardhan (UI Expert) P a g e 391 | 499

 HTML, CSS, JavaScript, Bootstrap

Switch-case
• It is used to check a variable’s value, whether it matches with any one of the set of cases, and execute
the code of the matched case.
• Syntax:

Example on Switch-case

While
• “While” statement is used to execute the code repeatedly, while the condition is TRUE.

D. Harsha Vardhan (UI Expert) P a g e 392 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on While

Do-While
• “Do-while” loop is mostly same as “while” loop.
• The difference is: “while” loop checks the condition for the first time also; but “do-while” loop
doesn’t check the condition for the first time.

D. Harsha Vardhan (UI Expert) P a g e 393 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Do-While

For
• “For” loop is mostly same as “while” loop.
• The difference is: “While” loop has the initialization, condition and iteration in three different places,
so that it will be difficult to understand, if the code increases. But “for” loop has the initialization,
condition and iteration in the same line, so that it will be easy to understand.

D. Harsha Vardhan (UI Expert) P a g e 394 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on For

• Function is a re-usable “block” of the program, which is a set of statements with a name.
• The large program can be divided into many parts; each individual part is called as “function”.
• Functions are re-usable. That means functions can be called anywhere and any no. of times within
the program. Every time when we call the function, the execution flow jumps to the function
definition; executes the function and comes back to the calling portion.

D. Harsha Vardhan (UI Expert) P a g e 395 | 499

 HTML, CSS, JavaScript, Bootstrap

Steps for development of functions

• Create the function:

Parameters: The values that are passed from “calling portion” to the “function definition” are called as
“arguments” and “parameters”.
Return: The value that is passed from “function definition” to the “calling portion” is called as “return”.

• Call the function:

• Access the list of arguments

Note: Every function has a property called "arguments", which represents the list of arguments that
are passed to the function. arguments = { 0: argument1, 1: argument1, … }

Simple Example on Functions

D. Harsha Vardhan (UI Expert) P a g e 396 | 499

 HTML, CSS, JavaScript, Bootstrap

Calling Function in Another Function - Example

Arguments and Return

D. Harsha Vardhan (UI Expert) P a g e 397 | 499

 HTML, CSS, JavaScript, Bootstrap

Arguments - Example

Recursion
• Recursion is a technique of calling a function inside itself.
• Whenever a function calls itself, it is said to be "recursion".
• We should check the condition inside the function and call the same function, only if the condition
is TRUE.
Example: Factorial of number = n * n-1 * n-2 * n-3 … * 0
Factorial of 5 = 5 * 4 * 3 * 2 * 1 = 120

Syntax:
function functionname()
{
samefunctionname();
}

Recursion - Example

D. Harsha Vardhan (UI Expert) P a g e 398 | 499

 HTML, CSS, JavaScript, Bootstrap

• Array is a collection of multiple values.

• The no. of elements of the array is called as “array size” or “array length”.
• Index (starts from 0) will be maintained for each element automatically.
• For example, you can store list of friends inside an array.
• In JavaScript, there is no rule of maintain "same type" of values in the array. JavaScript array can
store the value of ANY data type. For example, you can store numbers, strings, objects in the same
array.

Steps for development of arrays

• Create an array: var variablename = [ value1, value2, … ];
• Set value into the array element: variablename[index] = value;
• Get value from the array element: variablename[index]
• Get size of the array: variablename.length
• Add new element into the array: variablename.push(newvalue);
• Remove an existing element: variablename.splice(index, no. of elements to remove);
• Insert new element in the middle: variablename.splice(index, 0, newvalue);

D. Harsha Vardhan (UI Expert) P a g e 399 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Arrays

Example on Push

Example on Splice

D. Harsha Vardhan (UI Expert) P a g e 400 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Insert

Introduction to Objects
• Object Oriented Programming (OOP) is a programming paradigm (programming style), which is
based on the concept of “objects”.
• Object represents a physical item / entity.
• Object is a collection of two types of members:
1. Properties / Fields
2. Methods
• Properties / Fields: Details about the object. Properties are the variables stored inside the object.
Properties are used to store data about specific person, product or thing.
• Methods: Manipulations on the properties. Methods are the functions stored inside the object.
Functions read values from properties and/or write values into properties.
Example:
“Car” object
- Properties
▪ carModel: Honda City
▪ carColor: Black
▪ colorNo: 1234
- Methods
▪ start( )
▪ changeGear( )
▪ stop( )
• In the above example, the "Car" object has three properties called "carModel", "carColor",
"colorNo", which have respective values. The

D. Harsha Vardhan (UI Expert) P a g e 401 | 499

 HTML, CSS, JavaScript, Bootstrap

Types of Object Oriented Programming (OOP) languages

• We have two types of OOP languages:
1. Class-based Object Oriented Programming Language
2. Prototype-based Object Oriented Programming Language

Creating Objects
• We can create object in 2 ways:
1. Object Literals
2. Constructor Function

Object Literals
• Object literals are represented as curly braces { }, which can include properties and methods.
• The property and value are separated with : symbol.
• Syntax: { “property”: value, “method”: function( ) { … } }

Example 1 on Object Literals

Example 2 on Object Literals

D. Harsha Vardhan (UI Expert) P a g e 402 | 499

 HTML, CSS, JavaScript, Bootstrap

Constructor Function
• Constructor function is a function that receives an empty (new) object, initializes properties and
methods to the object.
• The "this" keyword inside the constructor function represents the current working object. For
example, if it is called for the first time, the "this" keyword represents the first object; if it is called
second time, the "this" keyword represents the second object.
• The constructor function can receive one or more parameters and initializes the same values into
the respective properties.
• The "reference variable" stores the reference (address) of the object and used to access its members
(properties and methods), outside the object literal / constructor function.

Syntax of Constructor Function

function functionname(arguments)
{
this.property = value;
this.method = function( ) { … };
}
var variablename = new functionname( );

Example on Constructor Function

D. Harsha Vardhan (UI Expert) P a g e 403 | 499

 HTML, CSS, JavaScript, Bootstrap

Object.Keys
• The “Object.keys” method is used to retrieve the list of properties of an object as an array.
• Sometimes, you will get data from server / browser storage. Then you don't know what properties /
methods are present inside the object. Then you have to use Object.keys() are used to properties /
methods of the object and also read its values programmatically.
Syntax: Object.keys(reference variable);
Example: Object.keys(stu);
• This is useful if you don’t know what properties are exist in the object.

Example on Object.Keys

D. Harsha Vardhan (UI Expert) P a g e 404 | 499

 HTML, CSS, JavaScript, Bootstrap

JSON
• "JSON" stands for "JavaScript Object Notation".
• JSON is similar to "Object Literal", but having the following differences.
▪ In "Object Literal", double quotes are optional for the properties; In "JSON", double quotes are must
for properties.
▪ In "Object Literal", methods are allowed; In "JSON", methods are not allowed.
• JSON is mainly used as data exchange format; it can be transferred from browser to server; and vice
versa; and also it is can be stored in the local storage and session storage.
Syntax:
{ "property" : value, "property" : value, … }

Stringify
• The “JSON.stringify” is used to convert “Object Literal” to “JSON” format. JSON is a text format
which follows “JavaScript Object Literal” syntax. JSON is mainly used for store or exchange data
between browser and server.
Syntax: JSON.stringify(reference variable)
Example: JSON.stringify(stu)

D. Harsha Vardhan (UI Expert) P a g e 405 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on JSON.stringify

Parse
• The “JSON.parse” is used to convert “JSON” to “Object Literal” format.
Syntax: JSON.parse(json data)
Example: JSON.parse(‘ { “a”:10, “b”: 20 } ’)

Example on JSON.parse

D. Harsha Vardhan (UI Expert) P a g e 406 | 499

 HTML, CSS, JavaScript, Bootstrap

Object Array Literal

• “Object Array Literal” is a collection of “object literals”, stored as an array.
• It is used to represent group of records, for example list of students.
• Each object inside the object array represents one single record; for example "one student".
Syntax:
[
{ property : value, property : value, … },
{ property : value, property : value, … },
{ property : value, property : value, … },
…
]

Example on Object Array Literal

Example on Object Array Literal - UL

D. Harsha Vardhan (UI Expert) P a g e 407 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Object Array Literal - Table

D. Harsha Vardhan (UI Expert) P a g e 408 | 499

 HTML, CSS, JavaScript, Bootstrap

Object Array
• “Object Array Literal” is a collection of “objects created using constructor function”, stored as an
array.
Syntax:
[
new constructorfunction(argument1, argument2, …),
new constructorfunction(argument1, argument2, …),
new constructorfunction(argument1, argument2, …),
…
]

Example on Object Array

Prototype
• The "prototype" generally represents model of the object, which contains list of properties and
methods of the object.

D. Harsha Vardhan (UI Expert) P a g e 409 | 499

 HTML, CSS, JavaScript, Bootstrap

• Every Constructor Function has a property called "prototype".

• Any properties or methods added to "prototype", will be automatically added to every object that
is created based on the same constructor function.

Example on Prototype

Inheritance
• The process of creating an object based on another object is called as “inheritance”.
• So all the properties and methods of the parent object is inherited into the child object.
Syntax:
function parentconstructorfunction(arguments)
{
…
}

function childconstructorfunction(arguments)
{

D. Harsha Vardhan (UI Expert) P a g e 410 | 499

 HTML, CSS, JavaScript, Bootstrap

parentconstructorfunction.call(this, arguments);
…
}

Example on Inheritance

• "Data type" specifies type of data that you want to store in the variable or property.
• JavaScript supports the following data types:
1. number : Any numbers
2. string : Collection of characters
3. Boolean : true, false
4. undefined : undefined
5. object : { }, new
6. function : function() { }

Example on Data Types

D. Harsha Vardhan (UI Expert) P a g e 411 | 499

 HTML, CSS, JavaScript, Bootstrap

String
• “String” is a collection of characters. The characters include with the following:
1. Uppercase alphabets : A-Z
2. Lowercase alphabets : a-z
3. Digits : 0-9
4. Symbols : $ # @ & * etc.
5. Spaces
• JavaScript string literals should be in either single quotes or double quotes.
Ex: ‘hello123’
“hello123”

typeof
• The "typeof" keyword is used to get the data type of given value.
Syntax: typeof value
Example: typeof 10

D. Harsha Vardhan (UI Expert) P a g e 412 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on typeof

undefined vs null
• "undefined" represents "empty value", which is by default to assigned to every uninitialized
variables. The developer is not supposed to assign "undefined" manually.
• "null" represents "empty value", which can be assigned by the developer.
• The datatype of "undefined" is "undefined".
• The datatype of "null" is "object".
Syntax of undefined: undefined
Syntax of null: null

Example on undefined vs null

D. Harsha Vardhan (UI Expert) P a g e 413 | 499

 HTML, CSS, JavaScript, Bootstrap

== and ===
• == operator checks only value; === operator checks value and data type also.
• == operator internally first converts the right side value in the data type of left side and checks the
value. === operator will not perform any automatic conversion and directly checks the value.
• Use == operator to check only value. Use === operator check value and data type
Syntax of ==: value1 == value2
Syntax of ===: value1 === value2

Example on == vs ===

String Function
• The "String()" is a pre-defined function, which is used to convert a number into string.
Syntax: String(number value)

Example on String Function

D. Harsha Vardhan (UI Expert) P a g e 414 | 499

 HTML, CSS, JavaScript, Bootstrap

ToString Function
• The "toString()" is a pre-defined function, which is used to convert a number into string.
• The difference between String() and toString() function is:
• The String() function is a global function; The toString() function is available inside number data
type.
Syntax: numbervalue.toString()

Example on ToString Function

Number Function
• The "Number()" is a pre-defined function, which is used to convert string to number.
• It returns "NaN", if the string is alphanumerical / alphabetic. "Nan" stands for "Not A Number",
which indicates the value is not a number. The datatype of "NaN" is "number".
• It returns "0", if the string is empty / space.
Syntax: Number(string value)

D. Harsha Vardhan (UI Expert) P a g e 415 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Number Function

ParseInt Function
• The "parseInt()" is a pre-defined function, which is used to convert string to number.
• parseInt() doesn't supports decimal places.

D. Harsha Vardhan (UI Expert) P a g e 416 | 499

 HTML, CSS, JavaScript, Bootstrap

• It returns number, if the string is alphanumerical that starts with number.

• It returns "NaN", if the string is alphanumerical that starts with alphabet.
• It returns "NaN", if the string is alphabetic.
• It returns "Nan", if the string is empty / space.
Syntax: parseInt(string value)

Example on parseInt Function

D. Harsha Vardhan (UI Expert) P a g e 417 | 499

 HTML, CSS, JavaScript, Bootstrap

ParseFloat Function
• The "parseFloat()" is a pre-defined function, which is used to convert string to number.
• It is same as parseInt(); but it accepts decimal places.
• It returns number, if the string is alphanumerical that starts with number.
• It returns "NaN", if the string is alphanumerical that starts with alphabet.
• It returns "NaN", if the string is alphabetic.
• It returns "Nan", if the string is empty / space.
Syntax: parseFloat(string value)

Example on parseFloat Function

D. Harsha Vardhan (UI Expert) P a g e 418 | 499

 HTML, CSS, JavaScript, Bootstrap

+ Unary Operator
• It is same as "Number()" function, but it supports only numbers.
Syntax: +

Example on + Unary Operator

toFixed() function
• It converts the number into string and adds the specified no. of decimal places.
• It also rounds the number.
Syntax: numbervalue.toFixed(no. of decimals)

Example on toFixed()

D. Harsha Vardhan (UI Expert) P a g e 419 | 499

 HTML, CSS, JavaScript, Bootstrap

• String functions are used to perform manipulations on strings

Ex: Converting into uppercase.

toUpperCase( )
• This function converts the string value into uppercase and returns it.
Syntax: string.toUpperCase( )
Example: “hello”.toUpperCase( ) → “HELLO”

Example toUpperCase()

D. Harsha Vardhan (UI Expert) P a g e 420 | 499

 HTML, CSS, JavaScript, Bootstrap

toLowerCase( )
• This function converts the string value into lowercase and returns it.
Syntax: string.toLowerCase( )
Example: “HELLO”.toLowerCase( ) → “hello”

Example on toLowerCase()

length
• This property returns the no. of characters in the string.
Syntax: string.length
Example: “hello”.length →5

Example on length

charAt( )
• This function returns the single character present at the specified index.
• Index starts from 0 (zero).
Syntax: string.charAt( )

D. Harsha Vardhan (UI Expert) P a g e 421 | 499

 HTML, CSS, JavaScript, Bootstrap

Example: “hello”.charAt(1) →e

Example on charAt()

charCodeAt( )
• This function returns the ASCII value of the single character present at the specified index.
Syntax: string.charCodeAt( )
Example: “hello”.charCodeAt(1) → 101

Example on charCodeAt()

substr( )
• This function returns a part of the string, starting from specified index, upto the specified length of
the string.
Syntax: string.substr(index, length)
Example: “hyderabad”.substr(2, 4) → dera

Example on substr()

D. Harsha Vardhan (UI Expert) P a g e 422 | 499

 HTML, CSS, JavaScript, Bootstrap

indexOf( )
• This function searches for the given sub string in the string, and returns the index of the first
character in the given string if it is found; it returns -1, if the character is not found.
• In case if you specify the start index, searching starts from the specified startindex.
Syntax: string.indexOf(“character”, startindex)
Example: “hyderabad”.indexOf(“a”) →5
Example: “hyderabad”.indexOf(“era”) →3
Example: “hyderabad”.indexOf(“z”) → -1
• This function always considers the first occurrence only.

Example on indexOf()

Example on indexOf() – second occurrence

D. Harsha Vardhan (UI Expert) P a g e 423 | 499

 HTML, CSS, JavaScript, Bootstrap

Example indexOf() with -1

replace( )
• It replaces a “word” with “another word”.
Syntax: string.replace(“old word”, “new word”)
Example: “MS Office”.replace(“Office”, “Windows”) → MS Windows

Example on replace()

D. Harsha Vardhan (UI Expert) P a g e 424 | 499

 HTML, CSS, JavaScript, Bootstrap

split( )
• This function converts a string into an array of many small strings and returns the array, based on
the separator character.
Syntax: string.split(“separator character”)
Example: “how are you”.split(“”) → [ “how”, “are”, “you” ]

Example on split()

trim( )
• This function removes the unnecessary spaces at left side and right side of the string.
Syntax: string.trim( )
Example: “ abc def ”.trim( ) → “abc def”

Example on trim()

D. Harsha Vardhan (UI Expert) P a g e 425 | 499

 HTML, CSS, JavaScript, Bootstrap

concat( )
• This function attaches two strings and make then as a sinle string.
Syntax: string.concat( “another string” )
Example: “united”.concat(“states”) → “unitedstates”

Example on concat()

• Date functions are used to manipulate date and time.

new Date( )
• This is used to get the current system date and time.
Syntax: new Date( )
Example: new Date( ) → Thu Aug 10 2017 11:04:51 GMT+0530 (India Standard Time)

Example on new Date()

D. Harsha Vardhan (UI Expert) P a g e 426 | 499

 HTML, CSS, JavaScript, Bootstrap

toLocaleDateString( )
• This function returns the date in the following format: M/d/yyyy
Syntax: new Date( ).toLocaleDateString( )
Example: new Date( ).toLocaleDateString( ) → 8/10/2017

Example on toLocaleDateString()

toLocaleTimeString( )
• This function returns the time in the following format: hh:mi:ss am/pm
Syntax: new Date( ).toLocaleTimeString( )
Example: new Date( ).toLocaleTimeString( ) → 11:04:51 AM

Example on toLocaleTimeString()

getTime( )
• This function returns the no. of milli seconds since “1/1/1970 12:00:00 AM”.
Syntax: new Date( ).getTime( )
Example: new Date( ).getTime( ) → 1502343291481

D. Harsha Vardhan (UI Expert) P a g e 427 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on getTime()

getDay( )
• This function returns the no. of the day of the week.
0 = Sunday
1 = Monday
2 = Tuesday
3 = Wednesday
4 = Thursday
5 = Friday
6 = Saturday
Syntax: new Date( ).getDay( )
Example: new Date( ).getDay( ) →4

Example on getDay()

getDate( )
• This function returns only the date.

D. Harsha Vardhan (UI Expert) P a g e 428 | 499

 HTML, CSS, JavaScript, Bootstrap

Syntax: new Date( ).getDate( )

Example: new Date( ).getDate( ) → 10

Example on getDate()

getMonth( )
• This function returns only the month (0 to 11).
Syntax: new Date( ).getMonth( )
Example: new Date( ).getMonth( ) →7

Example on getMonth()

getFullYear( )
• This function returns only the year.
Syntax: new Date( ).getFullYear( )
Example: new Date( ).getFullYear( ) → 2017

Example on getFullYear()

D. Harsha Vardhan (UI Expert) P a g e 429 | 499

 HTML, CSS, JavaScript, Bootstrap

getHours( )
• This function returns only the hours (in 24 hours format).
Syntax: new Date( ).getHours( )
Example: new Date( ).getHours( ) → 11

Example on getHours()

getMinutes( )
• This function returns only the minutes.
Syntax: new Date( ).getMinutes( )
Example: new Date( ).getMinutes( ) →4

Example on getMinutes()

D. Harsha Vardhan (UI Expert) P a g e 430 | 499

 HTML, CSS, JavaScript, Bootstrap

getSeconds( )
• This function returns only the seconds.
Syntax: new Date( ).getSeconds( )
Example: new Date( ).getSeconds( ) → 51

Example on getSeconds()

getMilliseconds( )
• This function returns only the milli seconds.
Syntax: new Date( ).getMiliseconds( )
Example: new Date( ).getMilliseconds( ) → 481

Example on getMilliseconds()

Creating a Custom Date:

• We can create custom (user-defined) date using the following steps:
• Create a date object and variable: var variable = new Date( );
• Set year: variable.setFullYear(year);

D. Harsha Vardhan (UI Expert) P a g e 431 | 499

 HTML, CSS, JavaScript, Bootstrap

• Set month: variable.setMonth(month);

Note: month is 0 to 11
• Set date: variable.setDate(date);

Example on Custom Date

NoScript
• It is used to display a message to the user, when the user has disabled JavaScript in the browser.
Syntax:
<noscript>message</noscript>

Examples on NoScript

Clousers
• “Clousers” are used to create private variables that are accessible to only a set of methods.

D. Harsha Vardhan (UI Expert) P a g e 432 | 499

 HTML, CSS, JavaScript, Bootstrap

• Create a function; Create private variables in the same function with "var" keyword; Return an
object from this function; If you call the function, the private variables of this function are not
accessible outside the function.
Syntax:
var functionname = function( )
{
var variablename = value;
return
{
method: function( )
{
code
},
method: function( )
{
code
}
};
};

var x = new functionname( );

//Private variables are not accessible using "x".

Examples on Clousers

D. Harsha Vardhan (UI Expert) P a g e 433 | 499

 HTML, CSS, JavaScript, Bootstrap

Hoisting
• JavaScript automatically lifts-up the variable declarations (that are created using "var" keyword)
to top of the program or top of the function. This is called as “Hoisting”.
Note: Variable declarations cum initializations are not lifted-up.

Example on Hoisting

• DOM (Document Object Model) is the tree structure of html elements (tags) that are present within
the web page.
• When the web page has been opened in the browser, DOM will be automatically created by the
browser.
• The changes made to DOM are called as “DOM manipulations”. DOM manipulations are performed
using JavaScript.

D. Harsha Vardhan (UI Expert) P a g e 434 | 499

 HTML, CSS, JavaScript, Bootstrap

• The entire browser window is called as "window". The webpage running on the browser is called as
"document". It has only one main element called <html>. It has two children <head> and <body>.
There are many children for both <head> and <body>.

Example:

Objects inside DOM

I. Window
II. Document
III. Element

• "window" object represents the entire browser window.

D. Harsha Vardhan (UI Expert) P a g e 435 | 499

 HTML, CSS, JavaScript, Bootstrap

• It has the following properties and methods:

1. location.href
2. navigator.userAgent
3. screen
4. screen
5. alert()
6. confirm()
7. print()
8. setTimeout()
9. setInterval()
10. scrollTo
11. open()

1. location.href
• This property represents url of the current web page running in the browser window.
• Syntax: window.location.href

2. navigator.userAgent
• This property represents the name of current browser.
• Syntax: window.navigator.userAgent

3. navigator.screenX
• This property represents X value of current browser position on the screen.
• Syntax: window.navigator.screenX

4. navigator.screenY
• This property represents Y value of current browser position on the screen.
• Syntax: window.navigator.screenY

Example on Window Properties

D. Harsha Vardhan (UI Expert) P a g e 436 | 499

 HTML, CSS, JavaScript, Bootstrap

5. alert()
• This method displays an information dialogbox (message dialogbox) to the user.
• It contains only OK button.
Syntax: window.alert("message")
Example: window.alert("Hello");

Example on alert()

6. confirm()
• This method displays an confirmation dialogbox to the user.
• It contains OK and Cancel buttons.
• It returns "true", if the user clicks on "OK" button; It returns "false", if the user clicks on "Cancel"
button.
Syntax: window.confirm("message")

Example on confirm()

D. Harsha Vardhan (UI Expert) P a g e 437 | 499

 HTML, CSS, JavaScript, Bootstrap

7. print()
• This method displays print dialogbox, which is used to print the current webpage through selected
printer.
• In Google Chrome, it shows "Print Preview" also.
Syntax: window.print()

Example on print()

8. setTimeout()
• This method calls the specified function, after completion of specified no. of milli seconds.
• Note: 1000 milli seconds = 1 second
Syntax: window.setTimeout(function, milli seconds)

Example on setTimeout()

D. Harsha Vardhan (UI Expert) P a g e 438 | 499

 HTML, CSS, JavaScript, Bootstrap

9. setInterval()
• This method calls the specified function repeatedly, for every completion of specified no. of milli
seconds.
• Note: 1000 milli seconds = 1 second
Syntax: window.setInterval(function, milli seconds)

Example on setInterval()

10. scrollTo()
• This method scrolls the web page horizontally / vertically to the specified X and Y co-ordinates.
• The X and Y co-ordinates are calculated in the form of pixels.
Syntax: window.scrollTo(x, y)

Example on scrollTo()

D. Harsha Vardhan (UI Expert) P a g e 439 | 499

 HTML, CSS, JavaScript, Bootstrap

11. open()
• This method opens a browser child window / popup window.
• It is mainly useful for opening ads.
Syntax: window.open("url", "logical name", "width=pixels, height=pixels");

Example on open()

open.html

mypage.html

• The "document" object represents the current working web page.

D. Harsha Vardhan (UI Expert) P a g e 440 | 499

 HTML, CSS, JavaScript, Bootstrap

• It has properties and methods to manipulate web page.

1. title
• This property represents title of the web page.
• Syntax: document.title

2. head
• This property represents <head> tag of the web page.
Syntax: document.head

3. body
• This property represents <body> of the web page.
Syntax: document.body

4. images
• This property represents all images of the web page, as an array.
Syntax: document.images

5. links
• This property represents all hyperlinks (<a> tags) of the web page, as an array.
Syntax: document.links

6. URL
• This property represents url of the web page.
Syntax: document.URL

Example on Document Properties

D. Harsha Vardhan (UI Expert) P a g e 441 | 499

 HTML, CSS, JavaScript, Bootstrap

document.write()
• This method displays the given message in the web page.
Syntax: document.write("message")

Example on document.write()

document.getElementById()
• This method retrieves the single element that has specified ID.
Syntax: document.getElementById("id")

Example on document.getElementById()

document.getElementsByName()
• This method retrieves the array of elements that have specified name.
Syntax: document.getElementsByName("name")

D. Harsha Vardhan (UI Expert) P a g e 442 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on document.getElementsByName()

document.getElementsByTagName()
• This method retrieves the array of elements that have specified tag name.
Syntax: document.getElementsByTagName("tag name")

Example on document.getElementsByTagName()

document.getElementsByClassName()
• This method retrieves the array of elements that have specified class name.
Syntax: document.getElementsByClassName("class name")

Example on document.getElementsByClassName()

D. Harsha Vardhan (UI Expert) P a g e 443 | 499

 HTML, CSS, JavaScript, Bootstrap

document.querySelectorAll()
• This method retrieves the array of elements that are matching with specified selector.
• You can use any CSS selectors:
1. Tag Selector : tag
2. ID Selector : #id
3. Class Selector : .classname
4. Grouping Selector : tag1,tag2,…
5. Child Selector : parent child
Syntax: document.querySelectorAll("selector")

Example on document.querySelectorAll()

document.querySelector()
• This method retrieves the first element that matches with specified selector.
Syntax: document.querySelector("selector")

Example on document.querySelector()

D. Harsha Vardhan (UI Expert) P a g e 444 | 499

 HTML, CSS, JavaScript, Bootstrap

• The "element" object represents a single tag.

• It has properties and methods to manipulate the element.

tagName
• This property represents name of the tag.
• Syntax: document.getElementById("id").tagName

Example on tagName

id
• This property represents id of the tag.
Syntax: document.getElementById("id").id

Example on id

D. Harsha Vardhan (UI Expert) P a g e 445 | 499

 HTML, CSS, JavaScript, Bootstrap

innerHTML
• This property represents content of the tag.
Syntax: document.getElementById("id").innerHTML

Example on innerHTML

innerText
• This property represents content of the tag, without tags.
Syntax: document.getElementById("id").innerText

Example on innerText

style
• This property represents css style of the tag.
Syntax: document.getElementById("id").style.property

Example on style

D. Harsha Vardhan (UI Expert) P a g e 446 | 499

 HTML, CSS, JavaScript, Bootstrap

parentElement
• This property represents parent element of the tag.
• Syntax: document.getElementById("id").parentElement

Example on parentElement

children
• This property represents child elements of the tag.
Syntax: document.getElementById("id").children

Example on children

D. Harsha Vardhan (UI Expert) P a g e 447 | 499

 HTML, CSS, JavaScript, Bootstrap

scrollTop
• This property moves vertical scrollbar, based on the specified no. of pixels.
Syntax: document.getElementById("id").scrollTop

Example on scrollTop

D. Harsha Vardhan (UI Expert) P a g e 448 | 499

 HTML, CSS, JavaScript, Bootstrap

setAttribute()
• This method sets an attribute to the tag.
Syntax: document.getElementById("id").setAttribute("attribute name", "value")

Example on setAttribute()

getAttribute()
• This method gets the value of specified attribute of the tag.
• Syntax: document.getElementById("id").getAttribute("attribute name")

Example on getAttribute()

removeAttribute()
• This method removes the specified attribute of the tag.
Syntax: document.getElementById("id").removeAttribute("attribute name")

D. Harsha Vardhan (UI Expert) P a g e 449 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on removeAttribute()

attributes
• This property retrieves all the attributes of the tag, along with values.
Syntax: document.getElementById("id").attributes

Example on attributes

hasAttribute()
• This method checks whether the element has specified attribute or not; returns "true" if it contains;
returns "false" if it doesn't contain.
Syntax: document.getElementById("id").hasAttribute("attribute name");

D. Harsha Vardhan (UI Expert) P a g e 450 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on hasAttribute()

focus()
• This method places the cursor inside the element.
Syntax: document.getElementById("id").focus()

Example on focus()

click()
• This method clicks the specified element (equal to manual mouse click).
• Syntax: document.getElementById("id").click()

Example on click()

D. Harsha Vardhan (UI Expert) P a g e 451 | 499

 HTML, CSS, JavaScript, Bootstrap

remove()
• This method removes the current element.
Syntax: document.getElementById("id").remove()

Example on remove()

document.createElement()
• This method creates a new element for the specified tag.
Syntax: document.createElement("tag name")

appendChild()
• This method adds new child element to the current element.
Syntax: document.appendChild(newelement)

Example on appendChild()

D. Harsha Vardhan (UI Expert) P a g e 452 | 499

 HTML, CSS, JavaScript, Bootstrap

• “Event” is a keyboard / mouse action, that is performed by the user, at run time.
• “Event Handling” is a concept of attaching the event with a function.
• Whenever the user performs an action, automatically the element raises the event; then we can
call a function.

• Syntax: addEventListener(“event name”, functionname)

• Example: addEventListener(“click”, fun1)

List of Events
1. click
2. dblclick
3. mouseover
4. mouseout
5. mousemove
6. keyup
7. keypress
8. focus
9. blur
10. change
11. contextmenu
12. cut
13. copy
14. paste

D. Harsha Vardhan (UI Expert) P a g e 453 | 499

 HTML, CSS, JavaScript, Bootstrap

“Click” event
• The “click” event executes when the user clicks on the element.
Syntax:
addEventListener(“click”, functionname);
function functionname( )
{
}

Example on “Click” event

“Dblclick” event
• The “dblclick” event executes when the user double clicks on the element.
Syntax:
addEventListener(“dblclick”, functionname);
function functionname( )
{
}

Example on “Dblclick” event

D. Harsha Vardhan (UI Expert) P a g e 454 | 499

 HTML, CSS, JavaScript, Bootstrap

“Mouseover” and “Mouseout” events

“Mouseover” event
• The “mouseover” event executes when the user moves the mouse pointer from outside to inside the
element.
Syntax:
addEventListener(“mouseover”, functionname);
function functionname( )
{
}

“Mouseout” event
• The “mouseout” event executes when the user moves the mouse pointer from inside to outside the
element.
• Syntax:
addEventListener(“mouseout”, functionname);
function functionname( )
{
}

D. Harsha Vardhan (UI Expert) P a g e 455 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on “Mouseover” and “Mouseout” events

“Mousemove” event
• The “mousemove” event executes when the user moves the mouse pointer across the element.
Syntax:
addEventListener(“mousemove”, functionname);
function functionname( )
{
}

event
Represents the information, given by the browser. Whenever the user performs an action, the browser
collects some information, and it passes the same information to the function automatically. This is
called “event”.
event.pageX: Represents “X” co-ordinate of mouse pointer position.

D. Harsha Vardhan (UI Expert) P a g e 456 | 499

 HTML, CSS, JavaScript, Bootstrap

event.pageY: Represents “Y” co-ordinate of mouse pointer position.

Example on “Mousemove” event

“Keyup” event
• The “keyup” event executes when the user presses any key on the keyboard, while the cursor is inside
the element.
Syntax:
addEventListener(“keyup”, functionname);
function functionname( )
{

D. Harsha Vardhan (UI Expert) P a g e 457 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on “Keyup” event

“Keypress” event
• The “keypress” event executes when the user presses any key on the keyboard, while the cursor is
inside the element.
• “Keypress” event is very similar to “keyup” event.
• When you press any key on the keyboard, the following process happens:
1. “Keypress” event executes.
2. The character will be added in the textbox.
3. “Keyup” event executes.
• “Keypress” event executes before accepting the currently pressed character into the element.
“Keyup” event executes after accepting the currently pressed character into the element.
• In “keypress” event, we can accept / reject the currently pressed character, because it executes
“before accepting” the character.
• In “keyup” event, we can’t reject the currently pressed character, because it executes “after
accepting” the character.
Syntax:
addEventListener(“keypress”, functionname);
function functionname( )
{
}

D. Harsha Vardhan (UI Expert) P a g e 458 | 499

 HTML, CSS, JavaScript, Bootstrap

• event.which: Represents the ASCII value of currently pressed character. That means when the user
presses a character, the browser automatically identifies its ASCII value and passes the same to the
function, as “event.which”.
• ASCII = American Standard Code for Information Interchange
• As per ASCII, every character has a number.
▪ 65 to 90 : A-Z
▪ 97 to 122 : a-z
▪ 48 to 57 : 0-9
▪ 32 : Space
▪8 : Backspace
▪9 : TAB
▪ 13 : Enter

• event.preventDefault( ): It stops the default functionality. That means it rejects the currently
pressed character. If this method is not used, by default it accepts the currently pressed character.

Example on “Keypress” event

Example on “Keypress” event – Alphabets only

D. Harsha Vardhan (UI Expert) P a g e 459 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on “Keypress” event – Numbers only

“Focus” and “Blur” events

“Focus” event
• The “focus” event executes when the cursor enters into the element.
Syntax:
addEventListener(“focus”, functionname);
function functionname( )
{
}

“Blur” event
• The “blur” event executes when the cursor goes out of the element.

D. Harsha Vardhan (UI Expert) P a g e 460 | 499

 HTML, CSS, JavaScript, Bootstrap

• Syntax:
addEventListener(“blur”, functionname);
function functionname( )
{
}

Example on “Focus” and “Blur” events

“Change” event
• The “change” event executes when the value of the element has been changed.
• That means it executes in following cases:
1. When the user modifies the value of textbox and presses TAB key.
2. When the user checks / unchecks the checkbox.
3. When the user selects the radio button.
4. When the user selects an item in the dropdownlist.
Syntax:
addEventListener(“change”, functionname);
function functionname( )
{

D. Harsha Vardhan (UI Expert) P a g e 461 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on “Change” event with TextBox

Example on “Change” event with CheckBox

D. Harsha Vardhan (UI Expert) P a g e 462 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on “Change” event with RadioButton

Example on “Change” event with DropDownList

D. Harsha Vardhan (UI Expert) P a g e 463 | 499

 HTML, CSS, JavaScript, Bootstrap

“Contextmenu” event
• The “contextmenu” event executes when the user right clicks on an element.
Syntax:
addEventListener(“contextmenu”, functionname);
function functionname( )
{
}

event.preventDefault(): It disables the right click menu (context menu).

Example on “Contextmenu” event

D. Harsha Vardhan (UI Expert) P a g e 464 | 499

 HTML, CSS, JavaScript, Bootstrap

“Cut”, “Copy”, “Paste” events

“Cut” event
• The “cut” event executes when the user selects “cut” option with keyboard / mouse.
Syntax:
addEventListener(“cut”, functionname);
function functionname( )
{
}

• event.preventDefault( ): It disables the cut operation.

“Copy” event
• The “copy” event executes when the user selects “copy” option with keyboard / mouse.
Syntax:
addEventListener(“copy”, functionname);
function functionname( )
{
}

• event.preventDefault( ): It disables the copy operation.

“Paste” event
• The “paste” event executes when the user selects “paste” option with keyboard / mouse.
Syntax:
addEventListener(“paste”, functionname);
function functionname( )
{
}

event.preventDefault( ): It disables the paste operation.

Example on “Cut”, “Copy”, “Paste” events

D. Harsha Vardhan (UI Expert) P a g e 465 | 499

 HTML, CSS, JavaScript, Bootstrap

“this” keyword
• The “this” keyword represents the “current element”, which has raised the event.

Example on “this” keyword

Login - Example

D. Harsha Vardhan (UI Expert) P a g e 466 | 499

 HTML, CSS, JavaScript, Bootstrap

Add, Subtract, Multiply, Divide Example

D. Harsha Vardhan (UI Expert) P a g e 467 | 499

 HTML, CSS, JavaScript, Bootstrap

• Validation is a process of checking the form input values, whether those are correct or not.
• If all the form input values are correct, then we will allow the form to be submitted to the server.

D. Harsha Vardhan (UI Expert) P a g e 468 | 499

 HTML, CSS, JavaScript, Bootstrap

• If any one of the form input values are incorrect, then we will stop submitting the form and display
appropriate error message to the user.
• Validations are done using JavaScript.
• Common Examples of Validations:
1. The value can’t be blank.
2. The value should be in the proper format. Ex: phone number, email etc.
3. The value should be within the given range (minimum and maximum).
Ex: Amount should be in between 1000 and 10000 etc.

Syntax for Validations

document.getElementById(“form id”).addEventListener(“submit”, functionname);

function functionname(event)
{
if (condition)
{
//show error message
event.preventDefault( );
}
else
{
//hide error message
}
}

Example on Validations

D. Harsha Vardhan (UI Expert) P a g e 469 | 499

 HTML, CSS, JavaScript, Bootstrap

Regular Expressions
• Regular expression represents “pattern” of the value.
• Regular expressions are useful in validations, to check whether it is matching with the specified
pattern or not.

List of Important Regular Expressions

Sl. Description Regular Expression
No
1 Digits only ^[0-9]*$
2 Alphabets only ^[a-zA-Z ]*$
3 Indian Mobile Number ^[789]\d{9}$
4 Email \w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*

D. Harsha Vardhan (UI Expert) P a g e 470 | 499

 HTML, CSS, JavaScript, Bootstrap

5 Usernames: Alphabets, Digits and ([A-Za-z0-9-]+)

Hyphens only
6 Passwords: 6 to 15 characters; at least ((?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,15})
one upper case letter, one lower case
letter and one digit

Syntax to check Regular Expressions in JavaScript:

Example on Regular Expressions

D. Harsha Vardhan (UI Expert) P a g e 471 | 499

 HTML, CSS, JavaScript, Bootstrap

• JavaScript program can be created in two ways:

1. Internal JavaScript / Embedded JavaScript
2. External JavaScript

1. Internal JavaScript
• Both “html code” and “javascript code” will be written in the same “.html” file.
• Advantage: Easy to understand.
• Disadvantage: The javascript code that is written in “.html” file can’t be used in another html file.
• All the previous programs are the examples of “Internal JavaScript”.

2. External JavaScript
• The javascript code will be written in “.js” file and will be called in one or more “.html” files.
• Advantage: We can call the same “.js” file from many html files (re-usability).
• In realtime, external JavaScript is recommended.

D. Harsha Vardhan (UI Expert) P a g e 472 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on External JavaScript

JavaScript.js

Page1.html

Page2.html

• AJAX is not a language, but it is a “concept”, which is used to “send a background request from
browser to server” and also “get background response from server to browser”, without refreshing
the web page in the browser.
• AJAX allows us to interact with the server and get some data from server, without refreshing the
full web page.
• Ex: Google search, IRCTC search trains.

D. Harsha Vardhan (UI Expert) P a g e 473 | 499

 HTML, CSS, JavaScript, Bootstrap

Advantages of AJAX
• Executes faster.
• Less burden on browser (client) and server.
• User experience is better.

Types of AJAX request

• In AJAX, the browser can send the following four types of requests:
1. GET : Used to retrieve / search data from server.
2. POST : Used to insert data to server.
3. PUT : Used to update data on server.
4. DELETE : Used to delete data from server.

The “XMLHttpRequest” class

• We can send ajax request to server and get ajax response from server by using a pre-defined class
called “XMLHttpRequest”.
• This class is supported by all the modern browsers (except IE 6, 7 and 8).

Members of XMLHttpRequest
• XMLHttpRequest class
1. “readyState” property
2. “onreadystatechange” property
3. “responseText” property
4. “open( )” method
5. “send( )” method

D. Harsha Vardhan (UI Expert) P a g e 474 | 499

 HTML, CSS, JavaScript, Bootstrap

open( ) method:
• This method is used to specify the request details such as server url (address), type of the request
(GET / POST).
▪ Server url: The address (url) of server program, to which you want to send request.
▪ Type: Represents type of the request.
Options: GET | POST | PUT | DELETE

GET : Retrieving data from server

POST : Inserting data
PUT : Updating data
DELETE : Deleting data
Syntax: open(“type of request”, “url”)
Example: open(“get”, “http://localhost:7070”)

send( ) method
o This method sends an asynchronous request (background request) to server.
Syntax: send( )
Example: send( )

readyState
o It represents a number, that represents current status of the request.
Syntax: readyState
Example: readyState

0 : Request not initialized.

1 : Request opened (open( ) method is called).
2 : Request sent to server (send( ) method called).
3 : Server started processing the request.
4 : Response received from server.

onreadystatechange
o This property stores a callback function, which executes automatically, when the “readyState”
property gets changed.
Syntax: onreadystatechange = functionname;
Example: onreadystatechange = fun1;

D. Harsha Vardhan (UI Expert) P a g e 475 | 499

 HTML, CSS, JavaScript, Bootstrap

responseText
o This property stores the actual response sent from the server to the browser.
o It represents the data in string format.
Syntax: responseText
Example: responseText

AJAX – NodeJS – Simple - Example

Creating the application
• Create “c:\ajax” folder.
• Create “index.html” and “index.html” files in the “c:\ajax” folder.

c:\ajax
- message.txt
- index.html

c:\ajax\message.txt

c:\ajax\index.html

D. Harsha Vardhan (UI Expert) P a g e 476 | 499

 HTML, CSS, JavaScript, Bootstrap

Execution
• Download and install “nodejs” from “https://nodejs.org”
• Open “Command Prompt” and run the following commands:
cd c:\ajax
npm install http-server -c-0
http-server
• Open browser and enter the url: http://localhost:8080/index.html

AJAX – NodeJS – Json Object - Example

Creating the application
• Create “c:\ajax” folder.
• Create “employee.json” and “index.html” files in the “c:\ajax” folder.

c:\ajax
- employee.json
- index.html

c:\ajax\employee.json

c:\ajax\index.html

D. Harsha Vardhan (UI Expert) P a g e 477 | 499

 HTML, CSS, JavaScript, Bootstrap

Execution
• Download and install “nodejs” from “https://nodejs.org”
• Open “Command Prompt” and run the following commands:
cd c:\ajax
npm install http-server -c-0
http-server
• Open browser and enter the url: http://localhost:8080/index.html

AJAX – NodeJS – Json Array - Example

Creating the application
• Create “c:\ajax” folder.
• Create “employees.json” and “index.html” files in the “c:\ajax” folder.

c:\ajax
- employees.json
- index.html

c:\ajax\employees.json

D. Harsha Vardhan (UI Expert) P a g e 478 | 499

 HTML, CSS, JavaScript, Bootstrap

c:\ajax\index.html

Execution
• Download and install “nodejs” from “https://nodejs.org”
• Open “Command Prompt” and run the following commands:
cd c:\ajax
npm install http-server -c-0

D. Harsha Vardhan (UI Expert) P a g e 479 | 499

 HTML, CSS, JavaScript, Bootstrap

http-server
• Open browser and enter the url: http://localhost:8080/index.html

D. Harsha Vardhan (UI Expert) P a g e 480 | 499

 HTML, CSS, JavaScript, Bootstrap

Introduction to JavaScript 6
• "JavaScript 6" version in released in 2015, which is also called as "EcmaScript 6 or ES 6".
• JavaScript 6 is the superset of JavaScript 5, which contains the following new features:
1. Classes
2. Constructors
3. Inheritance
4. Method Overriding
5. Set and Get Methods
6. Default Arguments
7. Arrow Functions
8. Let
9. Const
10. Rest
11. Destructuring
12. Multiline Strings
13. String Interpolation
14. Reading Elements from Array

Classes
• "Object" is a "physical item", which is a collection of properties (details) and methods (manipulations).
• "Class" is a "model" of objects, which defines the list of properties and methods of the objects.

D. Harsha Vardhan (UI Expert) P a g e 481 | 499

 HTML, CSS, JavaScript, Bootstrap

Steps for working with Classes and Objects

Create a class
class classname
{
}

Create an object
new classname();

Example on Classes and Objects

Classes
• "Object" is a "physical item", which is a collection of properties (details) and methods (manipulations).
• "Class" is a "model" of objects, which defines the list of properties and methods of the objects.

D. Harsha Vardhan (UI Expert) P a g e 482 | 499

 HTML, CSS, JavaScript, Bootstrap

Steps for working with Classes and Objects

Create a class
class classname
{
}

Create an object
new classname();

Example on Classes and Objects

Constructors
• Constructor is a special method in the class, that executes every time when we created an object for
the class.
• Constructor's name should be "constructor".
• Constructor can receive arguments; but can't return any value.
• It is not possible to call the constructor without creating an object.
• Constructors are mainly used to create an initialize properties in the class.
• Parameterized Constructor is a constructor that receives one or more arguments (parameters) and
initializes the same to the respective properties.

Syntax of Constructor
class classname
{
constructor(arguments)
{

D. Harsha Vardhan (UI Expert) P a g e 483 | 499

 HTML, CSS, JavaScript, Bootstrap

}
}

Example on Constructors

Example on Parameterized Constructors

D. Harsha Vardhan (UI Expert) P a g e 484 | 499

 HTML, CSS, JavaScript, Bootstrap

Methods
• Method is a function that manipulates data of the object.

Syntax of Method
class classname
{
methodname(arguments)
{

}
}

Example on Methods

D. Harsha Vardhan (UI Expert) P a g e 485 | 499

 HTML, CSS, JavaScript, Bootstrap

Inheritance
• Inheritance is a concept of extending the parent class, by creating the child class.
• When you create an object of child class, all the members of parent class will be automatically added to
the child class's object.

Syntax of Inheritance
class parentclassname
{
constructor(arguments)
{
}
}

class childclassname extends parentclassname

{
constructor(arguments)
{
super(arguments);
}
}

Example on Inheritance

D. Harsha Vardhan (UI Expert) P a g e 486 | 499

 HTML, CSS, JavaScript, Bootstrap

Method Overriding
• Method Overriding is a concept of extending the "parent class method", by creating similar method in
the "child class", with same signature (name and arguments).

Syntax of Method Overriding

class parentclassname
{
method(arguments)
{
}
}

class childclassname extends parentclassname

{
method(arguments)
{
super.method(arguments);
}
}

Example on Method Overriding

D. Harsha Vardhan (UI Expert) P a g e 487 | 499

 HTML, CSS, JavaScript, Bootstrap

D. Harsha Vardhan (UI Expert) P a g e 488 | 499

 HTML, CSS, JavaScript, Bootstrap

Set and Get Methods

• The "set" method executes automatically when we assign a value into the accessor. It performs
validation and assigns the value into the property, if it is valid.
• The "get" method executes automatically when we retrieve the value from the accessor. It returns the
current value of the property.

Steps for working with Set Method and Get Method

Create Set Method
set accessorname(argumentname)
{
this.property = argumentname;
}

Create Get Method

get accessorname(argumentname)
{
return this.property;
}

Call Set Method

accessorname = actualvalue;

Create Get Method

accessorname

Example on Set and Get Methods

D. Harsha Vardhan (UI Expert) P a g e 489 | 499

 HTML, CSS, JavaScript, Bootstrap

Default Arguments
• Default Arguments are used to provide a default value for the method of a parameter.
• When we call the method and don’t supply a value for the parameter, the specified default value will be
assigned to the parameter automatically.

Steps for working with Default Arguments

method(argument = defaultvalue)
{
}

Example on Default Arguments

D. Harsha Vardhan (UI Expert) P a g e 490 | 499

 HTML, CSS, JavaScript, Bootstrap

Arrow Functions
• "Arrow Functions" are the functions created using "=>" (arrow) operator.
• Arrow Function's "this" keyword reflects the current object; it will not be changed by the caller.

Steps for working with Arrow Functions

this.method = (arguments) =>
{
}

Example on Arrow Functions

D. Harsha Vardhan (UI Expert) P a g e 491 | 499

 HTML, CSS, JavaScript, Bootstrap

Let
• The "let" keyword can be used as alternative for "var" keyword, to create variables.
• The "var" keyword always creates "local variables" or "block level variables"; but "let" keyword creates
"block level variables".

Steps for working with Let

let variablename = value;

Example on Let

Const
• The "const" keyword is used to create constants.
• We can't change the value of the constant.
• If you try to change the value of constant, it shows error.

Steps for working with Const

const constantname = value;

D. Harsha Vardhan (UI Expert) P a g e 492 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Const

Rest (...) Operator

• The rest (...) operator (should three dots) represents all remaining values.
• It can be used with methods / arrays.

Steps for working with Rest Operator with Methods

method(…argumentname)
{
}
Steps for working with Rest Operator with Arrays
var arrayvariable = [ …array1, …array2 ];

Example on Rest Operator With Methods

D. Harsha Vardhan (UI Expert) P a g e 493 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on Rest Operator With Arrays

Destructuring
• Destructuring is used to retrieve each value of an array into respective variables.

Steps for working with Destructuring

var [ variable1, variable2, …] = arrayname;

Example 1 on Destructuring

Example 2 on Destructuring

D. Harsha Vardhan (UI Expert) P a g e 494 | 499

 HTML, CSS, JavaScript, Bootstrap

Example 3 on Destructuring

Multiline Strings
• This concept is used to create a string with multiple lines of text.
• The multiline string should be enclosed within backticks ( ` ` ).

Steps for working with Multiline Strings

`
line 1
line 2
line 3
…
`

Example on Multiline Strings

D. Harsha Vardhan (UI Expert) P a g e 495 | 499

 HTML, CSS, JavaScript, Bootstrap

String Interpolation
• "String Interpolation" replaces the expressions in the strin with actual values of the respective variables.
• These strings must be enclosed within backticks ( ` ` ), instead of single quotes ( ' ' ) or double quotes
( " " ).

Steps for working with String Interpolation

` text here ${variable} text here`

Example on String Interpolation

Reading Elements from Array

• The most common task of the developer is reading data from an array and displaying the same.
• This can be done in several ways:
1. For Loop
2. ForEach Loop
3. ForOf Loop
4. ForIn Loop

Steps for working with For Loop

for (i = 0; i < array.length; i++)

D. Harsha Vardhan (UI Expert) P a g e 496 | 499

 HTML, CSS, JavaScript, Bootstrap

{
array[i]
}

• For loop is index based.

• Forward / backward iterations are possible.
• We can start the loop from the middle also.

Steps for working with ForEach Loop

array.forEach( function(variable)
{
variable
} );
• For loop is value based. The variable contains "value" directly; but not index.
• Forward iterations are only possible. Backward iterations are not possible.
• We can't start the loop from the middle.

Steps for working with ForOf Loop

for (variable of array)
{
variable
}
• For loop is value based. The variable contains "value" directly; but not index.
• Forward iterations are only possible. Backward iterations are not possible.
• We can't start the loop from the middle.

Steps for working with ForIn Loop

for (variable in array)
{
array[variable]
}
• For loop is index based. The variable contains "index".
• Forward iterations are only possible. Backward iterations are not possible.
• We can't start the loop from the middle.

D. Harsha Vardhan (UI Expert) P a g e 497 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on For Loop

Example on ForEach Loop

Example on ForOf Loop

D. Harsha Vardhan (UI Expert) P a g e 498 | 499

 HTML, CSS, JavaScript, Bootstrap

Example on ForIn Loop

D. Harsha Vardhan (UI Expert) P a g e 499 | 499