Wednesday, 10 May 2017

js in head

<html>
<head>
<script>
function myFunction()
{
document.getElementById("para").innerHTML="this is not para";
}
</script>
</head>
<body>
<p id='para'> hai this is para </p>
<button type="button" onClick="myFunction()">click on me </button>
</body>
</html>

js as external file

<!DOCTYPE html>
<html>
<body>

<h2>External JavaScript</h2>

<p id="para">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

<p>(myFunction is stored in an external file called "myScript.js")</p>

<script src="xjs.js"></script>

</body>
</html>
v

js in body tag

<html>

<body>
<p id=para> hai this is para </p>
<button type="button" onClick="myFunction()">click on me </button>


<script>
function myFunction()
{
document.getElementById("para").innerHTML="this is not para";
}
</script>


</body>
</html>

js event

<html>
<body>
<p id='para'>no will display here</p>
<button onClick="document.getElementById('para').innerHTML=Date()">click here to c the time below line</button>

<br>
<br>
<p> In the bellow button it seld display the time by clicking it<br><br>that is button contain time</p>
<button onClick="this.innerHTML=Date()">time is?</button>


<p>here <b>onclick</b> is the event to know more about event
<a href='https://www.w3schools.com/jsref/dom_obj_event.asp'>click here to know about events</a></p>

</body>
</html>

image colour change

<html>

<title>colour change </title>

<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change HTML content.</p>


<button  onclick="document.getElementById('myimage').src='C:/Users/abc/Documents/js/image/pic_bulboff.gif'">trun off</button>


<img id="myimage" src='C:/Users/abc/Documents/js/image/pic_bulboff.gif' style="width:200px">

<button  onclick="document.getElementById('myimage').src='C:/Users/abc/Documents/js/image/pic_bulbon.gif'">trun on</button>


</body>
</html>

functions

<html>
<body>
<p id='demo'></p>
<script>


document.getElementById('demo').innerHTML = addtion(1,2);

function addtion(add1,add2)
{
return add1+add2;
}
</script>


</body>
</html>

different output methode

<!DOCTYPE html>
<html>
<body>

<script>
window.alert(5+6,"this is alert window");
console.log(5 + 6);
document.write("this is document wite",9+9);

</script>

<p id="para"> this is para</p>
<button type="button" onClick='document.getElementById("para").innerHTML="hai changed"'>click here</button>

<p id="paraDoc">this text is replace by document write</p>
<button type="button" onClick='document.write("it will delete all html elements that can be know by inpecting the page") '>click here document write button</button>


</body>
</html>