Java script:

*Java script is the world most popular programming language introduce by Brendan
Eich.
*Java Script(JS) is a light weight object oriented programming language which is
used by several websites for scripting the webpage.
*Java script was initially created to "make web page alive".
*Java script is the most popular and widely used client-side scripting language.
*Java Script is a programming language that runs in web browsers. and makes
websites dynamic and interactive.

Output:

The console.log() is a function in java script that is used to print any kind of
variables defined before in it or to just print any message that needs to be
displayed to the user.

It mainly supports to achieve these functionalities:

Parameters: It accepts a parameter that can be an array, an object, or any message.

Return value: It returns the value of the parameter given.

*you can use console.log() to write or log messages.

*you can log messages to inform what the code is doing or alert that there an
issue.

Syntax:
console.log("Text to show");

Ex:

console.log('hello world');

Comments:

*The JS comments are meaningful way to deliver message.

*It is used to add information about the code, warnings or suggestions so that end
user can easily interpret the code.
*The JS comment is ignored by the JS engine i.e. embedded in the browser.

JS comments ------>1. Single line comment

2. Multi line comment

1.JS single line comment: Is represented by double forward slashes (//). It can be
used before and after the statement.

Ex:// It is single line comment

console.log("hello JS");

2.JS multi line comment: Can be used to add single as well as multi line comments.
so, it is more convenient. It can be used before, after and middle of the
statement.

It is represented by forward slash with asterisk with forward slash.

ex: /*your code here*/

There are mainly two advantages of JS comments.

1. To make code easy to understand it can be used to elaborate the code so that end
user can easily understand the code.
2. To avoid the unnecessary code it can also be used to avoid the code being
executed. Sometimes, We add the code to perform some action. But after sometimes,
there may be need to disable the code. In such case, it id better to use comments.

Data types:

*The term data type refers to the types of values a program can work with.

*JS provides different data types to hold different types of values.

*JS is a dynamic type languages, means you don't need to specific type of the
variables because it is dynamically used by JS engine.

*You need to use **var** here to specify the data types. It can hold any type of
values such as numbers, strings etc.

Ex: var a=56;

  var b="java";

In JS there is 2 types of data types, they are

1.Primitive data type

2.Non primitive (reference)data type

1.Primitive data type:

Data type Description

String Represent of character "hello"

Number Represent of numeric 100

Boolean Represent of Boolean value and either f/t

Number: It stores integer and floating/decimal values.

syntax: var a=10;

string: A string can be any text that wrapped in single/double quotes ("/").

syntax: var b="hello";

Boolean: It will have two values either true or false.

syntax: var d=true;

2.Non Primitive data type:

Data type Description

object Represent instance through which

we can access members
Array Represent group of similar value
RegExp Represent regular expression

Identifiers:

All JS variables, functions, methods must be identified with unique names. These
unique names are called identifiers.

*Names can contain letters, digits, underscores, and dollar signs.

*Names must begin with a letter.
*Names can also begin with $ and _(Not recommend)
*Names are case sensitivity
*Reserved words (keywords) cannot be used as names.

DO's: DONOT's:

*Score *8thplayer
*$player1 *Team*
*player_2

JIT:

*They are 2 types of compiling techniques.

1.JIT (Just in time)

2.AOT (Ahead of time)

*JIT compiles logic in browser.

*AOT compiles logic at app level.

Java script supports various programming techniques.

1.Functional programming
2.Structural programming
3.Imperative programming
4.Object oriented programing etc..

Java script with HTML (Client side)

*Java script is used to client side in order to reduce burden on server.

*Java script can reduce burden on server by
*Handling validations client side
*Handling interactions client side
*DOM Manipulations
1.Adding elements
2.Removing Elements
3.Rendering new data into elements
4.Update data in elements etc..

Integrating Java script into page:

1.Inline
2.Embedded
3.External file
Ex:

Inline

<DOCTYPE html>
<html>
<head>
<title> Java Script-Inline </title>
<script type="text/javascript">
function.printpage(){
window.print();
}
</script>
</head>
<body>
<h1> Click print button to print page</h1>
<button onclick="printpage()">print</button>
</body>
</html>

EX:

External

<DOCTYPE html>
<html>
<head>
<title> Java script-Inline </title>
<script src="../scripts/printing.js"></script>
</head>
<body>
<h1> Click print button to print page </h1>
<button onclick="printpage()"> Print </button>
</body>
</html>

1.Create a new file

"printing.js"
function Printpage()
{
window.print();
}

2.Link to HTML page

<script src="printing.js"></script>
<button onclick="printpage()"> Print</button>

Note:

Always use "Minified" script file in "production".

Java Script refers HTML:

<!DOCTYPE html>
<html>
<head>
<title> Java script-Inline </title>
</head>

<body>
<img width="100" height="100">

<div>
<form>
<h2>Register</h2>
User name: <input type="text"> <input type="button">
</form>
</div>

<div>
<form>
<h2>Login</h2>
Email:<input type="email"><input type="button">
</form>
</div>

</body>
</html>

Types of Technical Term of JS:

1.Propeties
2.Methods/Functions
3.Events

1.Properties:

width=200px;
height=40px;
value=print;
bgcolor=red;
border=2px solid black;

2.Methods:

Open()
Close()
Save()
Print()
Cancel()

3.Events:

Onclick
Onmouseover
Onmousedown
Ondoubleclick
oncontextmenu

1.JS can refer HTML element by using DOM hierarchy.

<!DOCTYPE html>
<html>
<head>
<title> Java Script-Inline </title>
<script>
function bodyload()
{
window.document.images[0].scr="../public/images/laptop.png";
window.document.forms[0].element[1].value="Register";
window.document.forms[1].element[1].value="login";
}
</script>
</head>
<body onload="bodyload()">
<img width="100" height="100" border="1">

<div>
<form>
<h2> Register </h2>
user name:<input type="text"> <input type="button">
</form>
</div>

<div>
<form>
<h2> Login </h2>
login:<input type="text"> <input type="button">
</form>
</div>
</body>
</html>

*If you change the position of any element in page, then every time you have to
update its position in code.
*It is faster in rending.

2.Java Script can refer elements by using "name".

<!DOCTYPE html>
<html>
<head>
<title> Java script Inline </title>
<script>
function.bodyload()
{
pic.scr="../public/images/neckband.png";
frmRegister.btnRegister.value="Register";
frmoLogin.btnLogin.value="Login";
}
</script>
</head>

<body onload="bodyload()">
<img width="100" height="100" name="pic" border="1">
<div>
<form name="frmRegister>
<h2> Register </h2>
User Name:<input type="text" name="txtName"><input name="btnRegister"
type="button">
</form>
</div>

<div>
<form name="frmLogin">
<h2> Login </h2>
Email:<input type="email" name="txtEmail"> <input name="btnLogin type="button">
</form>
</div>
</body>
</html>

*you can access any element directly by using its reference name.
*you cant access child elements directly.
*you have to refer both parent and child hierarchy.

3.You can refer by using "ID"

document.getElementById()

<!DOCTYPE html>
<html>
<head>
<title> Java script Inline </title>
<script>
function.bodyload()
{
document.getElementById("pic").scr="../public/images/mobile.png";
document.getElementById("btnRegister").value="Register";
document.getElementById("btnLogin").value="Login";
}
</script>
<head>
<body onload="bodyload()">
<img width="100" name="pic" height="100" border="1">
<div>
<form name="frmRegister">
<h2> Register </h2>
User Name:<input type="text" name="txtName">
<input id="btnRegister" name="btnRegister" type="button">
</form>
</div>

<div>
<form name="frmLogin">
<h2> Login </h2>
Email:<input type="email" name="txtEmail">
<input id="btnLogin" name="btnLogin" type="button">
</form>
</div>
</body>
</html>

*Every element can be configured with only one ID.

*ID have conflict with CSS reference.
*ID is not required if you are accessing any direct document element.

4.Java Script can refer any element by using CSS selectors.

document.querySelector();

<!DOCTYPE html>
<html>
<head>
<title> Java Script-Inline </title>
<script>
function bodyload()
{
document.queryselector("#pic").src="../public/images/laptop.png";
document.queryselector(".btn-register").value="Register";
document.queryselector(".btn-login").value="Login";
}
</script>
</head>

<body onload="bodyload()">
<img width="100" id="pic" name="pic" height="100" border="1">
<div>
<form name="frmRegister">
<h2> Register </h2>
User Name: <input type="text" name="txtName"> <input id="btnRegister"
name="btnRegister" class="btn-register" type="button">
</form>
</div>

<div>
<form name="frmLogin">
<h2> Login </h2>
Email: <input name="txtEmail" type="email"> <input id="btnlogin" name="btnLogin"
class="btn-login" type="button">
</form>
</div>
</html>

*Query selector can apply effects only to the first element.

*How ever it can handle data for multiple elements.
*It can also handle styles for multiple elements.

Syntax:

document.querySelector("h2") //type selector

document.querySelector("#pic") //id selector
document.querySelector(".pic") //class selector

5.Java script can refer all elements having common name

document.getElementsByName()

<!DOCTYPE html>
<html>
<head>
<title> Java Script-Inline </title>
<script>
function bodyload()
{
result =document.getElementByName("pay");
alert("Total number of payment methods:"+ result.length);
}
</script>
</head>
<body onload="bodyload()">
<fieldset>
<legend> payment method </legend>
<input type="radio" name="pay"> Cash
<input type="radio" name="pay"> UPI
<input type="radio" name="pay"> Credit Card
</fieldset>
</body>
</html>

6.Java Script can refer all elements having common class Name

document.getElementsByClassName()

<!DOCTYPE html>
<html>
<head>
<title> Java Script-Inline </title>
<script>
function bodyload()
{
result= document.getElementByClassName("form-check-input");
alert("Radios with input class :" +result.length);
}
</script>
</head>

<body onload="bodyload()">
<fieldset>
<legend> Payment Method </legend>
<input type="radio" class="form-check-input" name="pay"> Cash
<input type="radio" class="form-check-input" name="pay"> UPI
<input type="radio" name="pay"> Credit Card
</fieldset>
</body>
</html>

7.Java Script can refer all elements by using Tag Name

document.getElementByTagName()

<!DOCTYPE html>
<html>
<head>
<title> Java Script-Inline </title>
<script>
function bodyload()
{
result = document.getElementByTagName("h2");
alert("Total no of heading: " + result.length);
}
</script>
</head>

<body onload="bodyload()">
<h2> Register </h2>
<fieldset>
<legend> Payment Method </Legend>
<input type="radio" class="form-check-input" name="pay">Cash
<input type="radio" class="form-check-input" name="pay"> UPI
<input type="radio" name="pay"> Credit Card
</fieldset>
<h2> Login </h2>
</body>
</html>

Java script Output Techniques:

*alert()
*confirm()
*console.log(),warn(),success(),error(),debug(),info() etc
*Innertext
*innerHTML
*outerHTML
*document.write()

<!DOCTYPE html>
<html>
<head>
<title> Java Script-Inline </title>
<script>
function Deleteclick()
{
if(confirm("Are you sure want to delete?")==true)
{
alert("Record Deleted")
}
else
{
alert("You canceled")
}
}
</script>
</head>

<body>
<h2> Click delete button to remove record. </h2>
<button onclick="DeleteClick()"> Delete </button>
</body>
</html>

Java Script Input Techniques:

*Prompt()
*form input elements

Prompt:

*It is alert with input.

Syntax:

Prompt("your message", "Default value");

*Prompt returns

null on Cancel
--------------------------
""[empty] on ok without value
value on ok with value

<!DOCTYPE html>
<html>
<head>
<title> JavaScript -Inline </title>
<script>

function CreateClick(){
foldername= prompt("Enter Folder Name", "New_folder");
if(foldername==null)
{
document.write("you canceled");
}
else if (foldername=="")
{
document.write("Please Provide Folder name...");
}
else
{
document.queryselector("p").innerHTML+="Folder Created:" + foldername+ "<br>";

</script>
</head>

<body>
<button onclick="CreateClick()"> Create Folder </button>
<p></p>
</body>
</html>

Form Input Elements:

*You can use form input elements like textbox, password, Number, Email, Radio,
Checkbox, List box, Dropdown etc.