Java SCRIPT

<!
DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>html</h1>
<h1>css</h1>
eg:-----
<h1>node js</h1>
<button>Change color</button>
</body>
<script>
var tag=document.getElementsByTagName("*")//it is used for how many tag present
in html
console.log(tag)
</script>
</html>
The above code targets all the elements present inside the Dom Tree.
2nd selector:------
.document.getElementByid:-
getElementbyid by id function targets and returns only one particular specified

element based on id value.
-----------------------------------------------------------------------------------
------------------------------------
eg:-1
<body>
<h1 id="heading ">Html</h1>
<h1 id="heading1">Css</h1>
<h1 id="heading2">React Js</h1>
<script>
var heading = document.getElementById("heading")
console.log(heading)
</script>
</body>
eg2:---
<body>
<h1 id="heading ">Html</h1>
<button oneclick="display()">clickme</button>
<script>
var heading = document.getElementById("heading1")//targeting the perticular id
console.log(heading)
alert(heading)
</script>
</body>
eg3:------
<body>
<h1 id="heading">Html</h1>
<button onclick="display()">clickme</button>
<script>
function display()
{
var x=document.getElementById("heading").innerHTML
alert(x)
}
</script>
</body>
eg4:------ we will get two button one for color change and one for change
<body>
<h1 id="heading">Html</h1>
<h1 id="heading1">js</h1>
<h1 id="heading2">R Js</h1>
<button onclick="display()">clickme</button>
<button onclick="change1()">changestyle</button>
<script>
function display()
{
document.getElementById("heading").innerHTML="hyper text language"
document.getElementById("heading1").innerHTML="java script"
document.getElementById("heading2").innerHTML="React js"
}
function change1(){
var x1=document.getElementById("heading")
x1.style.color="orange"
var x2 =document.getElementById("heading1")
x2.style.color="green"
var x3=document.getElementById("heading2")
x3.style.color="blue"
}
</script>
</body>
eg:-5-----------
<body>
<h1>Select scripting language</h1><br>
<input type="radio" name="s1" value="java" id="input1">java <br><br>
<input type="radio" name="s1" value="java script" id="input2">javascript
<br><br>
<input type="radio" name="s1" value="python" id="input3">python <br><br>
<input type="radio" name="s1" value="html" id="input4">html <br><br>
<br><br>
<button onclick="x()">submit</button>
<script>
function x(){
var input1=document.getElementById("input1")
if(input1.checked==true){
alert(`selected answer is ${input1.value}`)
}
else if(input2.checked==true){
}
}
}
else{
alert(`no ans selected`)
}
}
</script>
=====> with respect to above code both the heading contains the same id value.
so,hence the function targets the first occuring element with the matching id
value.
===================================================================================
=============================
</body>
eg6:-
<body>
<script>
var ul= document.createElement("ul")
var li1=document.createElement("li")
//add text content to craeted element
li1.textContent="java"
li2.textContent="react js"
li3.textContent="node js"
li4.textContent="java script"
//add one element to the another element as a last child

ul.append(li1)
ul.append(li2)
ul.append(li3)
ul.append(li4)
console.log(ul)
//add one element to the another element as a last child
document.body.append(ul)
</script>
</body>
Parent- child relation ship-:

eg:-1
<body>
<div id="d1">
<h1 id="heading">html</h1>
<h1>Css</h1>
<h1>js</h1>
<h1>React</h1>
</div>
<script>
var div=document.getElementById("d1")
var h1=document.getElementById("heading")
console.log(div.parentElement);
console.log(div.lastElementChild);
console.log(div.firstElementChild);
console.log(h1.children);
console.log(div.previousElementSibling);
console.log(div.nextElementSibling);
</script>
</body>
INSERTADJACENTELEMENT:-
<head>
<style>
h1{
border: 2px solid red;
}
</style>
</head>
<body>
<h1 id="heading">Hello</h1>
<script>
//target the data
var h1=document.getElementById("heading")
//create element
var h2=document.createElement("h2")
h2.textContent="java script";
console.log(h2)
//syntax: insertAdajacent("position","element")
//insertadjacent()is used tp add the data the element in all the 4
direction
h1.insertAdjacentElement("beforebegin",h2)//up
// h1.insertAdjacentElement("beforeend",h2)//right
//h1.insertAdjacentElement("afterbegin",h2)//left
// h1.insertAdjacentElement("afterend",h2)//down
</script>
</body>
eg:-2
/head>
<body>
<ul id="ul">
<li>java</li>
<li>java-script</li>
<li id="li">React-js</li>
<li>hibernet</li>
<li>spring</li>
</ul>
<script>
//Target the element by dom selector
var ul=document.getElementById("ul")
var li=document.getElementById("li")
//create element
var ele=document.createElement("li");
ele.textContent="web-technology";
//Syntax: insertBefore("element","targeted position")

// insertbefore() is used to add one element just before the targeted element
ul.insertBefore(ele,li);
</script>
</body>
===================================================================================
===================================
CLONE NODE FUNCTION:-
Clone node of true:
this function is basically used to create a copy of an element its along with
children.
Clone node of false:

this function is basically used to create a copy of an element its igonres the
child tag.
eg:-
body>
<div>
<ul id="ul">
<li>java</li>
<li>React-js</li>
<li>hibernet</li>
<li>Spring</li>
</ul>
</div>
<div>
</div>
<script>
var ul=document.getElementById("ul");
var div=document.getElementsByTagName("div")
var cloneUl=ul.cloneNode(true);
div[1].appendChild(cloneUl);
console.log(cloneUl)
</script>
===================================================================================
======================================
removeChild:-
remove child function is used to remove child element of particular element.
eg:-body>
<ul id="ul">
<li>java</li>
<li id="li">React-js</li>
<li>hibernet</li>
<li>Spring</li>
</ul>
<script>
var ul=document.getElementById("ul");
var li=document.getElementById("li");
ul.removeChild
</script>
===================================================================================
===========================================
events:
events is basically an action perform.
for respective event handler should be attached.
eg:-
<body>
<h1>Document object model</h1>
<button id="btm">Clickme</button>
<script>
var b1=document.getElementById("btm")
b1.onclick=display;
function display(){
alert("Events using java-script")
}
</script>
</body>
===================================================================================
=================================================
TO Store the data inside local storage:-

<head>
<style>
input,button{
padding: 10px;
height: 30px;
}
fieldset{
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>Local storage java-script</h1>
<fieldset>
<legend>insert data</legend>
<input type="text" placeholder="enter key" id="inputkey">
<input type="text" placeholder="enter value" id="inputvalue">
<button type="button" id="btm">submit</button>
</fieldset>
<fieldset>
<legend>local storage</legend>
<div id="output">
</div>
</fieldset>
<script>
const inputkey=document.getElementById("inputkey");
const inputvalue=document.getElementById("inputvalue");
const btm=document.getElementById("btm");
const output=document.getElementById("output");
btm.onclick=function(){
const key=inputkey.value;
const value=inputvalue.value;
if(key&&value){
localStorage.setItem(key,value)
location.reload();
}
}
for(i=0;i<localStorage.length;i++){
const key=localStorage.key(i);
const value=localStorage.getItem(key);
output.innerHTML+=`${key}:${value} <br>`
}
</script>
</body>
===================================================================================
=====
for calculate the perc of student in the form:-
head>
<style>
div{
border: 2px solid black;
padding: 20px;
width: 60%;
height: auto;
margin: auto;
}
input{
float:right;
}
form{
margin: auto;
}
</style>
</head>
<body>
<div>
<form>
<label for="phy">Physics</label>
<input type="number" id="phy" name="phy">
<br><br>
<label for="che">chimestry</label>
<input type="number" id="che" name="che">
<br><br>
<label for="bio">biology</label>
<input type="number" id="bio" name="bio">
<br><br>
<label for="math">Maths</label>
<input type="number" id="math" name="math">
<br><br>
<button id="btn">Calculator</button>
</form>
<h1 id="res"></h1>
</div>
<script>
var btn=document.getElementById("btn");
btn.addEventListener("click",
function(e){
var input1=document.getElementById("phy").value;
var input2=document.getElementById("che").value;
var input3=document.getElementById("bio").value;
var input4=document.getElementById("math").value;
//logic to calculate perc
var
total=parseInt(input1)+parseInt(input2)+parseInt(input3)+parseInt(input4);
perc=total/400.0*100;
//to prevent default form loading

e.preventDefault();
//logic to store the output

var h1=document.getElementById("res");
h1.textContent="percentage = "+perc;
}
)
</script>
</body>

Java SCRIPT

Uploaded by

Document Information

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

Java SCRIPT

Uploaded by

Copyright:

Available Formats

<!

getElementbyid by id function targets and returns only one particular specified

//add one element to the another element as a last child

Parent- child relation ship-:

//Syntax: insertBefore("element","targeted position")

Clone node of false:

TO Store the data inside local storage:-

//logic to calculate perc

//to prevent default form loading

//logic to store the output

You might also like