JavaScript

web Server : Web-Server is a software which provide

enviroment to run web application!
: The main function of web-server is to handle the http requests to
the client
end sent the reponse to client.
Features of JS:
-----------------------------
1. JS provides client side validation.
2. Interpreter Based.
3. Dom(Document object Model).
4. Accessing and Maniplation.
5. Event Handling.
6. Object Orient Scripting Language.
7. Js is simple and easy to learn.

Why Study JavaScript?

JavaScript is one of the 3 languages all web developers must learn:
1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web pages
Type of JavaScript :
Internal JavaScript
External JavaScript

Alert box is used to display o/p on run time.

It located it window Object.

Window
--------
Window is the predefine primary object of javaScript.
It provides some methods(functions) and property(variables).

Object
-------
Object Properties
The name:values pairs in JavaScript objects are called properties:
objectName.propertyName
or
objectName["propertyName"]
Methods are actions that can be performed on objects.
A method is a function stored as a property.
What is this?
INJavaScript, the this keyword refers to an object .
Accessing Object Methods
You access an object method with the following syntax:

objectName.methodName()
Example
name = person.fullName();
x = new String(); // Declares x as a String object
y = new Number(); // Declares y as a Number object
z = new Boolean(); // Declares z as a Boolean object

prompt:
---------
=>prompt function is used to take input form the user at RunTime.
=> return type is string
 => OK means True
=> Cancel mean False

Syntax
--------
Var variable = prompt("FielsName", "placeholder")
var name = prompt("Name", "Enter your name")

Type Casting
----------------
Convertion of one DataType value into Another Datatype call type casting
1. parseInt()
2. parseFloat()
3. Number()
4. String()
5. toString()

Conform():
--------------
Is use to Take conformation with the user.
: It has Two button(Ok, Cancel)

getElementById():
------------------
=> getElementById() function is used to select html element on the basis on Id.
=> It is defined inside the Document Object.
=> return type of getElementById is Current Object.

Syntax
--------
=> document.getElementById("IdOf HtmlElement")
let varName = document.getElementById("x");
Steps to Apply CSS with JS.
--------------------------------
Object.style.propertyName = "Value"

<h1 id="x" OnClick="demo()"> Hello World </h1>

<button> set </ button>

Value (make own text Box)

------
value property is used to set/get value of selected HTML Form-Control/element.
EX:(input,select,textarea,button).
=> Return Type of the Value will be String
<input type="text" id="txt" />

get
------
var X = parseInt(document.getElementById("txt").value);
function demo1() {
let x = document.getElementById("num").value;
console.log(parseInt(x));
}

Set
-------
var x1 = document.getElementById("txt").value;
var x2 = document.getElementById("idOfFormControl").value;
x1.value = x2;
write
------
=> write function is used to display o/p on the html document
=> it is define inside the document object.

Syntax
--------
document.write(message);

innerText
-----------
innerText is used to set/get normal text of selected HTML element.
<div id="dv"> </div>

get/set
----------
let var = document.getElementById("dv").innerText
let var = document.getElmentById("dv").innerText="SetValue"
------------------------------------------------------------
Location (Variable) :
=> location property is used to redirect one page to another page.
Syntax
--------
window.location ="URL"

Src property
-----------------
=> Src property is used to set/get the value of Src Attribute

Syntax
--------
<img src="a.jpg" id="img1" />

get
------
var x = document.getElementById("img1").src;

set
-----
document.getElementById("img1").src=" image Url";

SetInterval :
--------------
window.setInterval(function,ML Second);
when
setInterval(demo,1000);
setInterval("demo()", 2000);
1 second => 10000 ml second

querySelector :
-----------------

document.getElementById("Id")
{
#IdNAme
.ClassName
TagName
}
document.querySelector("#ID")
document.querySelector(".ClassName")
document.querySelector();

setTimeOut
-----------
=> setTimeout function is used to Execute a once group of statement after
given time interval.
=> Function will call one specific time
Syntax :
----------
window.setTimeout("functionName()", time in ML )

innerHTML
----------
innerHTML is used to Set/get text with Tag of selected HTML element.

<p id="p1"> <b> Welcome to js </b> </p>

var x = document.querySelector("#p1").innerText;
let a = document.querySelector("#a").innerHTML;
document.write(a);

Type Property :
----------------
Type property is used to set/get value of type attribute
of selected form control.

Syntax: get/set
--------
let x = document.querySelector(".password").type;
let y = document.querySelector(".password").type="text";

Auto password Hide :

------------------------
<script>
var demo = ()=>
{
let x = document.querySelector("#x1").type = "text";
let y = document.querySelector("#btn").innerText="Hide";
window.setTimeout(timeout,3000);
}
var timeout = ()=>
{
document.querySelector("#x1").type="password";
document.querySelector("#btn").innerText="Show";
}
</script>

Strick Equal === It will check type and value == it will check value only
---------------------------------------------------------------------------

SetAttribute Function used to Set Attribute Value :

------------------------------------------------------
let fun = () =>
{
document.querySelector("input"//Tag name).setAttribute("type","text");
}
<input type="password" />
<input type="password" onmouseover="demo()" onmouseleave ="leave()" value="kittu g"
/>
var demo = ()=>
{
document.querySelector("input").setAttribute("type","text");
}
var leave = ()=>
{
document.querySelector("input").setAttribute("type","password");
}

setAttribute("AtrributeName","value")
-------------------------------------
document.querySelector("Element name").setAttribute("attributeName","value");
let demo= ()=>
{
document.querySelector("img").setAttribute("src","images/a.jpg");
}
<img onclick="demo()" src="images/b.jpg" class="m1" />
var x = document.querySelector("img").getAttribute("src");

RemoveAttribute :
-----------------
Syntax
---------
let x = document.querySelector("img").hasAttribute("class")

Print :
------------
<div id="bx">
<img src= "url" />
</div>
const x = document.querySelector("#bx").innerHTML;
document.body.innerHTML = x;
window.print(x);7

Array in JavaScript :
----------------------
var arr = [10,20,30,40,'kittu', 'true'];

for loop:
----------
for(int i=0; i<=10; i++){}

getElementByTagName()
------------------------
=> Used to select all matches element(Tags) in form the array.
=>
Syntax :
----------
let x = document.getElementByTagName("Tag").innerText
=> Return object collection of array of similar tag.

for..in and for..of loop :

---------------------------
=> for in will return index.
=> for..of will return item.

Date Class :
---------------
let obj = new Date();
Date Class Methods :
--------------------
=> getDate()
=> getTime()
=> getWeek()
=> getDay()
=> getMonth()
=> getFullYear()
=> getHours()
=> getMinutes()
=> getSeconds()
=> getMiliseconds()

Anonymoush function
---------------------
we used anonymous function inside other function

normal :
--------
function ()
{
}
Arrow anonoymous function function:
-----------------------------------
We used call back function to call anonymous function
()=>
{

Keyword Events :
-----------------
1. onkeypress : It will call before enter any value in input box. Before Typing
2. onkeyup : It will call after enter some value in input box. After Typing
3. onFocus : It will call when cursur enter in Input Box. Call When Enter input
box.
4. onBlur : It will call when Cursur leave the Input Box. Call When Leave Input
box.

pinCode Vaidation :
--------------------
find the lenth of Input value apply if else apply Text red Color

GetElementsByClassName :
-------------------------
It is used to return by HTMLCollection with specificd ClassName.
by useing get all tags collection where one class call tags inside.

Syntax :
--------

<h1 class="h"< HTML </h1>

<h1 class="h"< JavaScript </h1>
<h1 class="h"< Python</h1>
<h1 class="h"< JAva </h1>

let var = document.getElementByClassName("");

x.length
var i = x.item(Index).innerText;

namedItem(IDOFHtmlElement) // tag will select

ForEach()
----------
if we want to execute of function for every elment present in collection.
EX : (ARRAY, NodeList)

let arr = [1,4,3,5,3,5];

arr.forEach((CurrentValue, Index, Array)=>{

alert(x);
alert(y);
alert(z);
})

AddEventListner

If we want to add Events at selected tag for that we use addEventListner()