UIJAVAKIT

Introduction:
 HTML stands for Hyper Text Markup Language.

 HTML is used to create webpages by using tags/elements which
is given by w3(world wide web).
 To create HTML page, just save that file with .html
extention
 All .html files can run only in web browsers like IE,
Chrome, Firefox,Opara,Safari etc.
Syntax:
 Tag: <Tagname></Tagname> : <script></script>

 Element: <Tagname> Content </Tagname> : <span>Sachin</span>
 Self closing Element: <Tagname /> : <input/>
Markup Language vs Programming Language

Markup Language(HTML):
 No compilation is required to run.

 No tags are mandatory, empty .html files also run in
browser.
 If no tags in .html file, then browser placed by default
three tags, html,head,body
Programming Language(C):
 First have to compile, after that only can run.

 Minimum lines of code is required, at least main() method.
Inline Elements:
 Inline elements takes content width as its own width.

 Inline elements are not starts in new line
 span,i,b,img,input,select etc.. are Inline elements
 By using display:block CSS property ,we can convert Inline
element into block level element.
Ex: Can you display three players names in the same line?
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<span>Sachin</span>
<span>Dhoni</span>
<span>Kohli</span>
</body>
</html>
Block Level Elements:
 Block level elements takes parent width as its own width.

 Block level elements always starts in new line
 p,div,h1..h6,ul,li etc.. are Block level elements
 By using display:inline CSS property ,we can convert Block
level element into inline element.
Ex: Can you display three players names in line by line?
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>Sachin</div>
<div>Dhoni</div>
<div>Kohli</div>
</body>
</html>
Attribute:
 An attribute is a key value pair, it tells the behavior of

an element.
 Attribute key is always unique.
 Then common attributes for all HTML elements are
id,name,class,style etc..
Ex:
<div id="div1" >Sachin </div>
 In this 'id' is an attribute.

 'Id' attribute value always unique(recomended).
Ex:
<div id="div1" id="id1" >Sachin </div>
 In this id attribute key used multiple times

 In this case browser always render unique attribute keys
only.
 So it looks like <div id="div1" >Sachin </div>
Input Controls:
Text Box:
 Using input tag we can create text box.

 The default attribute for input tag is type=text.
Ex:
<input/>
<input type="text" />
Password Box:
 Using input tag and type=password attribute we can create

password field.
Ex:
<input type="password" />
Radio button:
 If we select one option from multiple options, then go with

radio button.
 Using input tag and type=radio attribute we can create radio
button.
 To group radio buttons , we have to take same name attribute
values.
Ex:
<input type="radio" name='gen'/> Male

<input type="radio" name='gen'/> FeMale
checkbox:
 If we select multiple options from multiple options, then go

with checkbox.
 Using input tag and type=checkbox attribute we can create
checkbox.
Ex:
<input type="checkbox" /> Cricket

<input type="checkbox" /> Hockey
Dropdown:
 If we select single optio from multiple options, then go

with select box(dropdown).
 Using select, option tags, we can create checkbox.
Ex:
<select>
<option>India</option>
<option>Pak</option>
<option>China</option>
</select>
textarea:
 If you wants to write more content in multiple row, then go

with textarea
 Using textarea tag, we can create textarea.
Ex:
<textarea cols="30" rows="4"> </textarea>
File Upload:
 Using input tag and type=file attribute we can create File

Upload.
Ex:
<input type="file" />
HTML TAGS:
title:
 which is used to give title to your html page, which is

visible in brower tab.
script:
 which is used to load your .js file into html.

 By using 'src' attribute , we can give .js file path.
link:
We are using link tag in two ways:

1.
 to load your .css file into html.

 By using 'href' attribute , we can give .css file path.
 By using 'rel' attribute, we can tell like this is used for
stylesheet.
2.
 to add favicon to your html file,which is visible in brower

tab.
 By using 'href' attribute , we can give icon file path.
 By using 'rel' attribute, we can tell like this is used for
favicon.
Ex:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href=" href="your css
file path"" />
<script src=" href="your js file path""></script>
</head>
<body>
//content to show in browser
</body>
</html>
iframe:
 which is used to load external urls into your html.

 If you want's to load any you tube video or any other
website in your html
<iframe src="http://www.uijavakit.com"></iframe>
<iframe width="420" height="345"
src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
image:
 which is used to load image into your html.

 If you want's to load any image, first take that image path,
and give that path to src attribute of image tag
<img src="your image path"></img>
Table:
 If you wants to display the data in the form of rows and

columns, then go with table tag.
 The table contains rows.
 The rows contains heading or data..
 table is representing by 'table' tag, row is representing by
'tr' tag, heading is representing by 'th' and data is
representing by 'td' tag..
<table border='1px'>
<tr>
<th>Name</th>
<th>Runs</th>
</tr>
<tr>
<td>Sachin</td>
<td>20000</td>
</tr>
<tr>
<td>Dhoni</td>
<td>18000</td>
</tr>
</table>
ul:
 which is used to create unordered list.

 we can represent unordered list by using 'ul' tag and the
items in the list can represent 'li' tag.
 By default unordered list items are displayed with dot(.)
<ul>
<li>Sachin</li>
<li>Dhoni</li>
<li>Kohli</li>
<li>UV</li>
</ul>
ol:
 which is used to create ordered list.

 we can represent ordered list by using 'ol' tag and the
items in the list can represent 'li' tag.
 By default ordered list items are displayed with
numbers(1,2,3...)
<ol>
<li>Sachin</li>
<li>Dhoni</li>
<li>Kohli</li>
<li>UV</li>
</ol>
a(anchor):
 which is used to navigate from one page to another page.

 First take the path,where you wants to navigate, and then
give that path to 'href' attribute of 'a' tag.
<a href="http://www.google.com" >Click Here </a>
CSS
Introduction:
 CSS stands for Cascading Style Sheets.
 Using CSS, we can control the way of display HTML elements
in browser.
 If you wants to see the applied styles to the element, open
developer window(by inspect or click on f12), click on
elements tab, click one of element and see the styles in the
right side to that element.
 We can apply the styles to elements, in the form of
properties, like key value pairs.
 CSS always tells the behavior of elements.
 Browser always reads your CSS and format your elements
accordingly
 We can apply styles in three ways.
1. Inline
2. Internal
3. External
Inline Styling:
 We can apply inline styling, by 'style' attribute.
Ex:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<span style="color:red">Sachin</span>
<span style="color:red">Dhoni</span>
</body>
</html>
Drawbacks:
 We are using duplicate code at element level, If you observe

in the above example, we are using "color:red" multiple
times.
 Making changes are very costly. For example if we have 100
span elemets with red color. If you wants to change that
color red to blue, we have to go to that element and change
color red to blue.
Internal Styling:
 We can apply internal styling, by 'style' tag.

 We wrote internal styling at page level
syntax:
selector }
property key:value;
property key:value
}
Ex:
1.html
<!DOCTYPE html>
<html>
<head>
span {
color:red
}
</head>
<body>
<span>Sachin</span>
<span>Dhoni</span>
</body>
</html>
2.html
<!DOCTYPE html>
<html>
<head>
span {
color:red
}
</head>
<body>
<span>Sachin</span>
<span>Dhoni</span>
</body>
</html>
Drawbacks:
 We are using duplicate code at page level, If you observe in

the above example, we are using "color:red" multiple times.
 Making changes are very costly. For example if we have 100
html pages in your application, all pages having color red
to span. If you wants to change that color red to blue, we
have to go to that page and change color red to blue.
External Styling:
 So Inline styling and internal is not recomended.

 To apply external styling, first create one .css file, keep
your css poperties in that file.
 Load that .css file into your .html file using link tag.
syntax:
styels.css
selector }
property key:value;
property key:value
}
Ex:
styles.css
span{
color:red
}
1.html
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href="styles.css" >
</head>
<body>
<span>Sachin</span>
<span>Dhoni</span>
</body>
</html>
2.html
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href="styles.css" >
</head>
<body>
<span>Sachin</span>
<span>Dhoni</span>
</body>
</html>
Box Model:
 Boxmodel tells about, the element structure.

 Each element having 4 parts, content, padding, border,
margin.
Content:
 Text, which is visible in the browser.

 Text between open and closing element.
Ex:
<div>Sachin</div>
Border:
 To represent the bounds of your element.
Ex:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border:1px solid red ;
}
</style>
</head>
<body>
<div>Sachin</div>
</body>
</html>
Padding:
 The gap between content to border.

 We can give padding to element in four
directions(left,right,top,bottom)
 By using padding-left, padding-right,padding-top, padding-
bottom css propertes, we can apply padding to element.
 By using padding css property , we can apply padding
left,right,top, bottom.
 Padding property values always take in clock wise direction.
 Ex: padding:30px means padding top, right, bottom, left values
are 30px;
 Ex: padding:30px 20px means padding top is 30px,rigth is 20px,
bottom is 30px and left is 20px.
 Ex: padding:30px 20px 40px means padding top is 30px,rigth is
20px, bottom is 40px and left is 20px.
 Ex: padding:30px 20px 40px 50px means padding top is 30px,rigth
is 20px, bottom is 40px and left is 50px.
Ex:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border:1px solid red
padding:10px 20px 30px
}
</style>
</head>
<body>
<div>Sachin</div>
</body>
</html>
Margin:
 The gap between one element border to another element

border.
 We can give margin to element in four
directions(left,right,top,bottom)
 By using margin-left, margin-right,margin-top, margin-bottom
css propertes, we can apply margin to element.
 By using margin css property also , we can apply margin
left,right,top, bottom.
 margin property values always take in clock wise direction.
 Ex: margin:30px means margin top, right, bottom, left values
are 30px;
 Ex: margin:30px 20px means margin top is 30px,rigth is 20px,
bottom is 30px and left is 20px.
 Ex: margin:30px 20px 40px means margin top is 30px,rigth is
 Ex: margin:30px 20px 40px 50px means margin top is 30px,rigth is
Ex:
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
margin-bottom:10px
}
#div2 {
margin-top:10px
}
</style>
</head>
<body>
<div id="div1">Sachin</div>
<div id="div2">Dhoni</div>
</body>
</html>
Positions:
 Using position css property, we can specify type of position

to the element.
 We have 5 positions in CSS.
1. static
2. absolute
3. fixed
4. relative
5. sticky
static:
 The default position for all HTML elements are static.

 If the element has static position, that time we are not
able to apply 4 css properties top,right,left,bottom.
absolute:
 If the element position is absolute, then we can apply

top,right, left, bottom CSS properties.
 Absolute position element always take its parent element as
reference(The parent element should have one of this
position(absolute,relative,fixed,sticky)), then only it
takes parent as reference.
 If no parent element has any one of this
position(absolute,relative,fixed,sticket), at last it take
body element as a reference.
 Absolute position, removes element space from DOM.
 Absolute position, changes the behavior of element, like if
the elemet is block level element, then it converts into
inline.
relative:
 If the element position is relative, then we can apply

 Relative position element always take its current position
as reference. From there it move top,right,left,bottom.
 Relative position,doesn't removes element space from DOM.
 Relative position, doesn't changes the behavior of element,
like if the elemet is block level element, it doesn't
convert into inline element.
fixed:
 If the element position is fixed, then we can apply

 Fixed position element take viewport as reference, from
there it moves top,right,left,bottom.
 Fixed position element, always fixed to that position,
irrespective of page scroll.
 Fixed position, removes element space from DOM.
 Fixed position, changes the behavior of element, like if the
elemet is block level element, then it converts into inline.
sticky:
 If the element position is sticky, then we can apply

 Sticky position is used to stick the element dynamically to
that particular position.
 Sticky position, doesn't removes element space from DOM.
 Sticky position, doesn't changes the behavior of element,
like if the elemet is block level element, then it doesn't
converts into inline.
Selectors:
 Using selectors we can get the reference of element, and

then we can apply styles.
Star(*):
 It selects all the elements in body.
Ex:
<!DOCTYPE html>
<html>
<head>
<style>
* {
color: red
}
</style>
</head>
<body>
<span>Sachin</span>
<div>Dhoni</div>
</body>
</html>
Result: both span and div into red color.
TagName:
 It selects all the elements which is having the same tag

name.
Ex:
<!DOCTYPE html>
<html>
<head>
<style>
span {
color: red
}
</style>
</head>
<body>
<span>Sachin</span>
<div>Dhoni</div>
</body>
</html>
Result: span into red color.
ID(#):
 It selects all the elements, which is having same id.
Ex:
<!DOCTYPE html>
<html>
<head>
<style>
#span1{
color: red
}
</style>
</head>
<body>
<span id="span1" >Sachin</span>
<div>Dhoni</div>
</body>
</html>
Result: span into red color.
Class(.):
 It selects all the elements,which are having same class.
Ex:
<!DOCTYPE html>
<html>
<head>
<style>
.div1{
color: red
}
</style>
</head>
<body>
<span id="span1" >Sachin</span>
<div class="div1" >Dhoni</div>
</body>
</html>
Result: div into red color.

:first-child
 It selects all the first childrens of all parents.
Ex:
<!DOCTYPE html>
<html>
<head>
<style>
span:first-child{
color:red
}
</style>
</head>
<body>
<div>
<span>Sachin</span>
<div>Dhoni</div>
</div>
<div>
<span>Kohli</span>
<span>Dravid</span>
<div>UV</div>
</div>
<div>
<div>Rayudu</div>
<span>Laxman</span>
</div>
</body>
</html>
Result: Sachin and Kohli span elements into red color.
:last-child
 It selects all the last childrens of all parents.
Ex:
<!DOCTYPE html>
<html>
<head>
<style>
span:last-child{
color:red
}
</style>
</head>
<body>
<div>
<span>Sachin</span>
<div>Dhoni</div>
</div>
<div>
<span>Kohli</span>
<span>Dravid</span>
<div>UV</div>
</div>
<div>
<div>Rayudu</div>
<span>Laxman</span>
</div>
</body>
</html>
Result: Laxman span element into red color.
:first-of-type
 It selects the elements, of first occurance from top to

bottom.
Ex:
<!DOCTYPE html>
<html>
<head>
<style>
p:first-of-type{
color:red
}
</style>
</head>
<body>
<div>
<span>Sachin</span>
<p>Dhoni</p>
<div>Ganguly</div>
<h1>Dravid</p>
<p>Rayudu</p>
</div>
</body>
</html>
Result: Dhoni p element into red color.
:last-of-type
 It selects the elements, of first occurance from bottom to

top.
Ex:
<!DOCTYPE html>
<html>
<head>
<style>
p:last-of-type{
color:red
}
</style>
</head>
<body>
<div>
<span>Sachin</span>
<p>Dhoni</p>
<p>Ganguly</p>
<h1>Dravid</p>
<div>Rayudu</div>
</div>
</body>
</html>
Result: Ganguly p element into red color.
Grater than (>)
 It selects all direct childrens
Ex:
<!DOCTYPE html>
<html>
<head>
<style>
div>h1{
color:red
}
</style>
</head>
<body>
<div>
<span>Sachin</span>
<h1>Dhoni</h1>
<p>Ganguly</p>
<h1>Dravid</h1>
<p>Rayudu
<h1>Laxman</h1>
</p>
</div>
</body>
</html>
Result: Dhoni and Dravid h1 elements into red color.
Space( )
 It selects all direct and indirect childrens
Ex:
<!DOCTYPE html>
<html>
<head>
<style>
div h1{
color:red
}
</style>
</head>
<body>
<div>
<span>Sachin</span>
<h1>Dhoni</h1>
<p>Ganguly</p>
<h1>Dravid</h1>
<p>Rayudu
<h1>Laxman</h1>
</p>
</div>
</body>
</html>
Result: Dhoni,Laxman,Dravid h1 elements into red color.
Plus (+)
 It selects the first sibling of element.
Ex:
<!DOCTYPE html>
<html>
<head>
<style>
h1+p{
color:red
}
</style>
</head>
<body>
<div>
<span>Sachin</span>
<h1>Dhoni</h1>
<p>Ganguly</p>
<p>Laxman</p>
<h1>Dravid</h1>
<span>Rayudu</span>
</div>
</body>
</html>
Result: Ganguly p element into red color.
Tilde (~)
 It selects all siblings of element.

Ex:
<!DOCTYPE html>
<html>
<head>
<style>
h1 ~ p{
color:red
}
</style>
</head>
<body>
<div>
<span>Sachin</span>
<h1>Dhoni</h1>
<p>Ganguly</p>
<p>Laxman</p>
<h1>Dravid</h1>
<span>Rayudu</span>
</div>
</body>
</html>
Result: Ganguly, Laxman p elements into red color.
:nth-child()
 It selects the element based on child count.
Ex:
<!DOCTYPE html>
<html>
<head>
<style>
p:nth-child(4){
color:red
}
</style>
</head>
<body>
<div>
<span>Sachin</span>
<h1>Dhoni</h1>
<p>Ganguly</p>
<p>Laxman</p>
<h1>Dravid</h1>
<span>Rayudu</span>
</div>
</body>
</html>
Result: Laxman p element into red color.
Attribute[]
 It selects all the elements with matching attribute.
Ex:
<!DOCTYPE html>
<html>
<head>
<style>
[name=n1]{
color:red
}
</style>
</head>
<body>
<div>
<span name="n1">Sachin</span>
<h1 name="n1">Dhoni</h1>
<p name="n1">Ganguly</p>
<p>Laxman</p>
<h1>Dravid</h1>
<span>Rayudu</span>
</div>
</body>
</html>
Result: Sachin, Dhoni, Ganguly text elements into red color.
Media Queries:
 Media Queries are used to design responsive web pages.

 Using @media we can apply CSS properties for particualr
resolution to elements..
 We have multiple media types like screen, print etc.
Ex 1:
<!DOCTYPE html>
<html>
<head>
<style>
@media screen and (max-width:700px){
span{
color:red
}
}
</style>
</head>
<body>
<div>
<span>Sachin</span>
<h1>Dhoni</h1>
<p>Ganguly</p>
<span>Rayudu</span>
</div>
</body>
</html>
Result: Red color applied for Sachin and Rayudu span elements at the time of the
screen width is less than 700px.
Ex 2:
<!DOCTYPE html>
<html>
<head>
<style>
@media screen and (min-width:700px) and (max-width:1000px){
span{
color:green
}
}
</style>
</head>
<body>
<div>
<span>Sachin</span>
<h1>Dhoni</h1>
<p>Ganguly</p>
<span>Rayudu</span>
</div>
</body>
</html>
Result: Green color applied for Sachin and Rayudu span elements at the time of the
screen width is grater than 700px and less than 1000px.
Ex 3:
<!DOCTYPE html>
<html>
<head>
<style>
@media screen and (min-width:1000px){
span{
color:yellow
}
}
</style>
</head>
<body>
<div>
<span>Sachin</span>
<h1>Dhoni</h1>
<p>Ganguly</p>
<span>Rayudu</span>
</div>
</body>
</html>
Result: yellow color applied for Sachin and Rayudu span elements at the time of the
screen width is grater than 1000px.
CSS Properties:
Box sizing:
box-sizing:border-box
(width + padding + border = width of element, height + padding + border = normal
height of an element)
Text Align:
text-align:left;
text-align:right;
text-aligh:center
Fonts:
font-weight:bold;
font-size:30px;
font-family:arial
Display:
display:inline;
display:block;
display:inline-block
Overflow:
overflow:hidden;
overflow:scrool;
Float:
float:left;
float:right;
float:clear;
Opacity:
opacty:o.5(value always in between 0 to 1)
z-index:
z-index:999999(value always number positive or nagetive)
JavaScript
Introduction:
 It's client side scripting languare, which is runnng in
browsers.
 Using Java Script we can do dynamic oparations on HTML
elements.
 Using Java Script, we can write client side validations
also.
 If you wants to write some scripting in your html page, we
should have to write that code with in script tag only.
 To write scripting out of html, crate one .js file and place
your code there, and load that .js file into html file using
script tag like
 <script src="your js file path"></script>
Variables:
 Using variables we can store data, for future useage.

 The data may be a number, string, boolean, function, object,
array.
 If you wants to represetns type of data in Java Script, we
are using var keyword.var data type can store any type of
data.
 Variable declaraton: var a; here 'var' is the data type and
'a' is the variable name.
 In var a; declaraton, value of 'a' is 'undefined',
 In var a=10; initilization, value of 'a' is 10,
 Note: variable value type may be a number, string, boolean, array,
function.
Functions/Methods:
 Functions are used to provide services, for that we have to

write some block of statements.
 Using Functions we can reuse the functionality.
 syntax:
function function_name}
//block of statements
}
 Function creation is no use. To get the services from
function, we have to call that function.
 Ex:
function f1()}
console.log('Hello...world')
}
//call function:
f1();
Result: Hello...world
 If you wants to pass some data to the function dynamically,
we should have to pass that data, through
arguments/parameters only.
 Ex:
function f1(n)}
console.log(n)
}
//call function:
f1(10);
Result: 10
f1(20);
Result: 20
 We have 4 types of functions
o Function with no arguments and no return type
o Function with arguments and no return type
o Function with no arguments and with return type
o Function with arguments and return type
Function with no arguments and no return type:
Ex:
function f1()}
console.log('Hello...world')
}
//call function:
f1();
Result: Hello...world
Function with arguments and no return type:
Ex:
function f1(n)}
console.log(n)
}
//call function:
f1(10);
Result:10
Function with no arguments and with return type:
Ex:
function f1()}
return "sachin";
}
//call function:
var name=f1();
Result: console.log(name)
Sachin
Note: function can return a number, string, boolean, array, object or one more
function.
Function with arguments and return type:
Ex:
function f1(n1,n2)}
var c=n1+n2
returu c;
}
//call function:
var res=f1(10,20);
Result:console.log(res)
30
Anonymous functions:
 The function which is not having any name, that type of

functions are called as anonymous functions.
 These functions are not having any name, so we are not able
to call these functions directly.
 So these functions should have to call indirectly, so that
all anonymous functions are callback functions.
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function f1(f){
f();
}
//If you want to call that function we have to pass on argument, whose type
is function
f1(function(){
alert('done');
});
//If you observe above am calling f1 by passing one function, that function
is not having any name, so that ie anonymous function.
//It was called indirectly, by call f().
// so that the output is done in alert box.
</script>
</head>
<body>
</body>
</html>
Higher Order functions:
 The function which takes one function as an argument.
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function f1(f){
f();
}
//If you want to call that function we have to pass on argument, whose type
is function
//So that we can call f1 function as Higher order function.
</script>
</head>
<body>
</body>
</html>
Array Methods:
 If we wants to represents multiple elements in a single variable, then we can

go with an array.
 var a=[10,20,30,10]
 In array we can insert duplicate elements.
 Through indexes, we can retrive an elements from array.
 Array index, always starts with 0.
Ex:
var array=[10,20,30];
console.log(array[0]);
Result: 10
console.log(array[2]);
Result: 30
length
 length property is used to get the length of an array.
Ex:
var array=[10,20,30];
console.log(array.length);
Result: 3
push(---)
 push(---) is used to insert an element(s) in the last index.
Ex:
var array=[10,20,30];
array.push(40);
Result: [10,20,30,40]
array.push(50,60,70);
Result: [10,20,30,40,50,60,70]
Return type: number(new length of array);
pop()
 pop() used to remove an element from last index.
Ex:
var array=[10,20,30];
array.pop()
Result: 30
Return last element.
unshift(---)
 unshift(---) is used to insert an element(s) in the first index.
Ex:
var array=[10,20,30];
array.unshift(40);
Result: [40,10,20,30]
array.unshift(50,60,70);
Result: [50,60,70,40,50,60,70]
Return type: number(new length of array);
shift()
 shift() used to remove an element from first index.
Ex:
var array=[10,20,30];
array.shift()
Result: 10
Return first element.
indexOf(-)
 indexOf(-) , it gives an index of element in the array.

 It take one arguement.
 Using indexOf(), we can check one element is there or not in the array. If there
it return that element index, if not it returns -1.
Ex:
var array=[10,20,30];
array.indexOf(20)
Result: 1
array.indexOf(200)
Result: -1
array.indexOf(30)
Result: 2
array.indexOf(120)
Result: -1
Note: If you observe above one, if the element is there it return the index of the
element, if not there, it always returns -1.
Return type: number.
lastIndexOf(-)
 lastIndexOf(-) , it gives last matching element index, in the array.

Ex:
var array=[10,20,30,20,10,20];
array.lastIndexOf(20)
Result: 5
Result: -1
Result: 2
Return type: number.
includes(-)
 Using includes(), we can check one element is there or not in the array. If there
it return true, if not it returns false.
Ex:
var array=[10,20,30];
array.includes(20)
Result: true
array.includes(200)
Result: false
array.includes(30)
Result: true
array.includes(120)
Result: false
Note: If you observe above one, if the element is there it returns true, if not it
returns false.
Return type: boolean.
join(-)
 join(-) , which is used to convert array into string with some delemeter.
 Default delemeter is ','.
Ex:
var array=[10,20,30];
array.join()
Result:"10,20,30"
array.join('_')
Result: "10_20_30"
Return type: string.
reverse()
 reverse() , which is used print an array in the reverse order.
Ex:
var array=[10,20,30];
array.reverse()
Result:[30,20,10]
Return type: array.
concat(---)
 concat(---), which is used to combine two arrays.

 It creates new result array.It's not effect the original array.
Ex:
var array=[10,20,30];
array.concat(40,50)
Result: new Array create with this data[10,20,30,40,50]
Return type: array.
forEach(-)
 forEach(-), which is used to retrive data from array.

 Which take one callback function as an arguement.
 The call back function has two arguements, value ,index.
Ex:
var array=[10,20,30];
array.forEach(function(value,index)}
console.log(value);
})
every(-)
 every(-), which is used to check array elements based on condition, which
return boolean value.
 If all elements in the array,satisfied your condtion then returns true.
 If minimum one element in the array, is not satisfied your condtion then
returns false.
Ex:
var array=[10,20,30];
array.every(function(value,index)}
return value > 5
})
Result: true
array.every(function(value,index)}
return value > 15
})
Result: false
some(-)
 some(-), which is used to check array elements based on condition, which

return boolean value.
 If minimum one element in the array, is satisfied your condtion then returns
true.
 If no element in the array, is not satisfied your condtion then returns false.
Ex:
var array=[10,20,30];
array.some(function(value,index)}
return value > 15
})
Result: true
array.some(function(value,index)}
return value > 50
})
Result: false
filter(-)
 filter(-), which is used to filter the elements in the array based on condition,
which return array.
Ex:
var array=[10,20,30];
array.filter(function(value,index)}
return value > 15
})
Result: [20,30]
array.filter(function(value,index)}
return value > 25
})
Result: [30]
find(-)
 filter(-), which is used to find an element in the array, based on condition.

 If condition satisfied, it returns an element.
 If condition not satisfied,it returns null.
Ex:
var array=[10,20,30];
array.find(function(value,index)}
return value == 20
})
Result: 20
array.find(function(value,index)}
return value == 25
})
Result: undefined
findIndex(-)
 findIndex(-), which is used to find an element index in the array, based on

condition.
 If condition satisfied, it returns an element index.
 If condition not satisfied,it returns -1.
Ex:
var array=[10,20,30];
array.findIndex(function(value,index)}
return value == 20
})
Result:1
array.findIndex(function(value,index)}
return value == 25
})
Result: -1
sort(-)
 sort() with out arguments, which is used to sort an elements in the array based
on dictionary sorting, suitable for alphabets.
 sort(-) with arguments, which is used to sort an elements in the array by return
number(+ve,-ve,0),suitable for numbers.
Ex:
var array=["Sachin","Dravid","Kohli"];
array.sort()
Result:['Dravid','Kohli','Sachin']
var array=[1,10,11,2,22,3,5]; array.sort()
Result:[1,10,11,2,22,3,5] //wrong out put
array.sort(function(value1,value2)}
return value1-value2
})
Result:[1,2,3,5,10,11,22]
slice(-,-)
 slice(-,-), which is used to get the part of an array

 slice(-,-), take 2 arguements, whose types are number.
 First arguement represents your starting index, from there we can take
n(difference of first and second arguement) elements.
Ex:
var array=[1,10,11,2,22,3,5];
array.slice(1,3)
Result:[10,11]
splice(-,-,-)
 splice(-,-,-), which is used to modify an array(insert,delete,update).

 splice(-,-,-), takes minimum 2 arguements, whose types are number.
 First arguement represents, from where we have to start.
 Second arguement represents, How many elements you want me to delete.
 From third arguement onwards inserted elements
 It modifies the original array.
Ex:
var array=[1,10,11,2,22,3,5]; array.splice(1,1)

Result:console.log(array) -->[1,11,2,22,3,5]
var array=[1,10,11,2,22,3,5]; array.splice(1,3,100,200)
Result:console.log(array) -->[1,100,200,22,3,5]
var array=[1,10,11,2,22,3,5]; array.splice(1,0,100,200)
Result:console.log(array) -->[1,100,200,10,11,2,22,3,5]
map(-)
 map(-), if you wants to perform same oparaton on each and every element in
the array , then go with map.
Ex:
var array=[1,2,3,4,5];
array.map(function(value,index)}
return value+1
})
Result:[2,3,4,5,6]
reduce(-)
 reduce(-), if you wants to convert multiple elements into a single variable.
Ex:
var array=[1,2,3,4,5];
array.map(function(initVal,value)}
initVal=initVal+value
return initVal
})
Result:15

UIJAVAKIT

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

UIJAVAKIT

Uploaded by

Copyright:

Available Formats

Introduction:

 HTML stands for Hyper Text Markup Language.

 Tag: <Tagname></Tagname> : <script></script>

Markup Language vs Programming Language

 No compilation is required to run.

 First have to compile, after that only can run.

 Inline elements takes content width as its own width.

 Block level elements takes parent width as its own width.

Ex: Can you display three players names in line by line?

 An attribute is a key value pair, it tells the behavior of

<div id="div1" >Sachin </div>

 In this 'id' is an attribute.

<div id="div1" id="id1" >Sachin </div>

 In this id attribute key used multiple times

 Using input tag we can create text box.

 Using input tag and type=password attribute we can create

<input type="password" />

 If we select one option from multiple options, then go with

<input type="radio" name='gen'/> Male

 If we select multiple options from multiple options, then go

<input type="checkbox" /> Cricket

 If we select single optio from multiple options, then go

 If you wants to write more content in multiple row, then go

<textarea cols="30" rows="4"> </textarea>

 Using input tag and type=file attribute we can create File

<input type="file" />

 which is used to give title to your html page, which is

 which is used to load your .js file into html.

We are using link tag in two ways:

 to load your .css file into html.

 to add favicon to your html file,which is visible in brower

 which is used to load external urls into your html.

 which is used to load image into your html.

<img src="your image path"></img>

 If you wants to display the data in the form of rows and

 which is used to create unordered list.

 which is used to create ordered list.

 which is used to navigate from one page to another page.

<a href="http://www.google.com" >Click Here </a>

 We can apply inline styling, by 'style' attribute.

 We are using duplicate code at element level, If you observe

 We can apply internal styling, by 'style' tag.

 We are using duplicate code at page level, If you observe in

 So Inline styling and internal is not recomended.

 Boxmodel tells about, the element structure.

 Text, which is visible in the browser.

 The gap between content to border.

 The gap between one element border to another element

 Using position css property, we can specify type of position

 The default position for all HTML elements are static.

 If the element position is absolute, then we can apply

 If the element position is relative, then we can apply

 If the element position is fixed, then we can apply

 If the element position is sticky, then we can apply

 Using selectors we can get the reference of element, and

 It selects all the elements in body.

Result: both span and div into red color.

 It selects all the elements which is having the same tag

Result: span into red color.

 It selects all the elements, which is having same id.

Result: span into red color.

 It selects all the elements,which are having same class.

Result: div into red color.