Java Script

When text input inside the textbox it will display on thye body of webpage…….
<html>
<head>
<script>
function abc()
a=document.getElementById("abc").value;
document.getElementById("xyz").innerHTML=a;
</script>
</head>
<input type=input maxlength=40 onkeyup="abc()" value="text" id="abc">
<p id="xyz"></p>
</html>
…………………………
Click on the button text color is changed…….
<html>
<head>
<script>
function abc()
x=document.getElementById("demo");
x.style.color="red";
</script>
</head>
<body>
<p id="demo">hi</p>
<button type=button onClick="abc()">ok</button>
</body>
</html>
……………………
<!DOCTYPE html>
<html>
<head>
<script>
function getValue()
{
var x=document.getElementById("myHeader");
alert(x.innerHTML);
}
</script>
</head>
<body>
<h1 id="myHeader" onclick="getValue()">Click me!</h1>
</body>
</html>
…………………….
<!DOCTYPE html>
<html>
<body>
<p id="p1">
This is a text.
This is a text.
This is a text.
</p>
<input type="button" value="Hide text"
onclick="document.getElementById('p1').style.visibility='hidden'">
<input type="button" value="Show text"
onclick="document.getElementById('p1').style.visibility='visible'">
</body>
</html>
…………………………..
<!DOCTYPE html>
<html>
<body>
This document was last modified on:
<script>
document.write(document.lastModified);
</script>
</body>
</html>
……………………
<!DOCTYPE html>
<html>
<head>
<script>
function removeOption()
var x=document.getElementById("mySelect");
x.remove(x.selectedIndex);
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
<input type="button" onclick="removeOption()" value="Remove selected option">
</form>
</body>
</html>
…………………………
<!DOCTYPE html>
<html>
<body>
<h1 id="id1">My Heading 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color='red'">
Click Me!</button>
</body>
</html>
…………………….
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>

</body>
</html>
……………………
<!DOCTYPE html>
<html>
<body>
</body>
</html>
……………………..
<!DOCTYPE html>
<html>
<body>
<form>
Buttons:
<input type="button" id="btn01" value="OK">
</form>
<p>Click the button below to disable the button above.</p>
<button onclick="disableElement()">Disable button</button>

<script>
function disableElement()
document.getElementById("btn01").disabled=true;
</script>
</body>
</html>
………………………….
<html>
<head>
<script>
function validate()
x=document.myForm
at=x.email.value.indexOf("@")
if (at == -1)
alert("Not a valid e-mail")
return false
</script>
</head>
<body>
<form name="myForm" action="1.html" onsubmit="return validate()">
Enter your E-mail:
<input type="text" name="email" size="20">
<input type="submit" value="Submit">
</form>
</body>
</html>
………………………….
<html>
<head>
<script>
function validate()
x=document.myForm
input=x.myInput.value
if (input.length>5)
alert("The field cannot contain more than 5 characters!")
return false
else
{
return true
</script>
</head>
<body>
<input type="text" name="myInput" size="20">
</form>
</body>
</html>
………………………………………………
<html>
<head>
<script>
function getText()
alert(x.options[x.selectedIndex].text);
</script>
</head>
<body>
<form>
Select your favorite fruit:
<option>Pineapple</option>
</select>
<br /><br />
<input type="button" onclick="getText()" value="Show text of selected
fruit">
</form>
</body>
</html>
………………………..
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to change the text in this paragraph.</p>
<button onclick="myFunction()">Click</button>
<script>
function myFunction()
document.getElementById("demo").innerHTML="Hello World";
};
</script>
</body>
</html>
………………….
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to display todays day of the month.</p>
<button onclick="myFunction()">click</button>
<script>
var d = new Date();

var x = document.getElementById("demo");
x.innerHTML=d.getDate();
</script>
</body>
</html>
……………………………
<!DOCTYPE html>
<html>
<head>
<script>
var myWindow;
function openWin()
myWindow = window.open("","myWindow","width=400,height=200");
function closeWin()
if (myWindow)
myWindow.close();
}
function checkWin()
if (!myWindow)
document.getElementById("msg").innerHTML="'myWindow' has never been opened!";
else
if (myWindow.closed)
document.getElementById("msg").innerHTML="'myWindow' has been closed!";
else
document.getElementById("msg").innerHTML="'myWindow' has not been closed!";
</script>
</head>
<body>
<button onclick="openWin()">Open "myWindow"</button>
<button onclick="closeWin()">Close "myWindow"</button>
<br><br>
<button onclick="checkWin()">Has "myWindow" been closed?</button>
<br><br>
<div id="msg"></div>
</body>
</html>
………………………….
<script type="text/javascript">
function changeColor(){
var newColor = document.getElementById('colorPicker').value;
document.getElementById('colorMsg').style.background = newColor;
</script>
<div id="colorMsg" style="font-size:18px;width:150px;height:100px;padding:5px;">Choose a
background color...</div>
<select id="colorPicker" onchange="JavaScript:changeColor()">
<option value="transparent">None</option>
<option value="yellow">Yellow</option>
<option value="salmon">Salmon</option>
<option value="lightblue">Light Blue</option>
<option value="limegreen">Lime Green</option>
</select>
………………………………………..
function showMsg(){
var userInput = document.getElementById('userInput').value;
document.getElementById('userMsg').innerHTML = userInput;
</script>
<input type="input" maxlength="40" id="userInput" onkeyup="showMsg()" value="Enter text here..." />
<p id="userMsg"></p>
……………………………..
When text input inside the textbox it will display on thye body of webpage…….
<html>
<head>
<script>
function abc()
a=document.getElementById("abc").value;
document.getElementById("xyz").innerHTML=a;
</script>
</head>
<input type=input maxlength=40 onkeyup="abc()" value="text" id="abc">
<p id="xyz"></p>
</html>
…………………………
Click on the button text color is changed…….
<html>
<head>
<script>
function abc()
x=document.getElementById("demo");
x.style.color="red";
</script>
</head>
<body>
<p id="demo">hi</p>
<button type=button onClick="abc()">ok</button>
</body>
</html>
………………
<!DOCTYPE html>
<html>
<head>
<script>
function getValue()
{
var x=document.getElementById("myHeader");
alert(x.innerHTML);
}
</script>
</head>
<body>
<h1 id="myHeader" onclick="getValue()">Click me!</h1>
</body>
</html>
…………………….
<!DOCTYPE html>
<html>
<body>
<p id="p1">
This is a text.
This is a text.
This is a text.
</p>
<input type="button" value="Hide text"
onclick="document.getElementById('p1').style.visibility='hidden'">
<input type="button" value="Show text"
onclick="document.getElementById('p1').style.visibility='visible'">
</body>
</html>
…………………………..
<!DOCTYPE html>
<html>
<body>
This document was last modified on:
<script>
document.write(document.lastModified);
</script>
</body>
</html>
……………………
<!DOCTYPE html>
<html>
<head>
<script>
function removeOption()
x.remove(x.selectedIndex);
</script>
</head>
<body>
<form>
<option>Pear</option>
</select>
<input type="button" onclick="removeOption()" value="Remove selected option">
</form>
</body>
</html>
…………………………
<!DOCTYPE html>
<html>
<body>
<h1 id="id1">My Heading 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color='red'">
Click Me!</button>
</body>
</html>
…………………….
<!DOCTYPE html>
<html>
<body>
</body>
</html>
……………………
<!DOCTYPE html>
<html>
<body>
</body>
</html>
……………………..
<!DOCTYPE html>
<html>
<body>
<form>
Buttons:
<input type="button" id="btn01" value="OK">
</form>
<p>Click the button below to disable the button above.</p>
<button onclick="disableElement()">Disable button</button>
<script>
function disableElement()
document.getElementById("btn01").disabled=true;
}
</script>
</body>
</html>
………………………….
<html>
<head>
<script>
function validate()
x=document.myForm
at=x.email.value.indexOf("@")
if (at == -1)
alert("Not a valid e-mail")
return false
</script>
</head>
<body>
Enter your E-mail:
<input type="text" name="email" size="20">
</form>
</body>
</html>
………………………….
<html>
<head>
<script>
function validate()
x=document.myForm
input=x.myInput.value
if (input.length>5)
alert("The field cannot contain more than 5 characters!")
return false
else
return true
</script>
</head>
<body>
<input type="text" name="myInput" size="20">
</form>
</body>
</html>
………………………………………………
<html>
<head>
<script>
function getText()
alert(x.options[x.selectedIndex].text);
</script>
</head>
<body>
<form>
</select>
<br /><br />
<input type="button" onclick="getText()" value="Show text of selected
fruit">
</form>
</body>
</html>
………………………
<html>
<head>
<script>
function padding()
document.getElementById('mytable').cellPadding="15";
function spacing()
document.getElementById('mytable').cellSpacing="15";
</script>
</head>
<body>
<table id=mytable border=1>
<tbody>
<tr>
<td>100</td>
<td>200</td></tr>
<tr>
<td>300</td>
<td>400</td></tr></tbody></table>
<form>
<input onclick=padding() type=button value="Change Cellpadding">
<input onclick=spacing() type=button value="Change Cellspacing">
</form></body></html>
…………………….
<html>
<head>
<script>
function formSubmit()
document.forms.myForm.submit()
</script>
</head>
<body>
<form name="myForm" action="savita.html" method="get">
Firstname: <input type="text" name="firstname" size="20"><br>

Lastname: <input type="text" name="lastname" size="20"><br><br>
<input type="button" onclick="formSubmit()" value="Submit">
</form>
</body>
</html>
……………………
<html>
<head>
<script>
function formAction()
x.multiple=true;
</script>
</head>
<body>
<form>
<select name="mySelect" size="3">
</select>
<input type="button" onclick="formAction()" value="Select multiple">
</form>
</body>
</html>
……………………
<html>
<head>
<script>
alert(x.form.name);
</script>
</head>
<body>
<form name="ashish">
</select>
<input type="button" onclick="formAction()" value="Show">

</form>
</body>
</html>
………………………..
<html>
<body>
document.write("<p>Browser: ")
document.write(navigator.appName + "</p>")
document.write("<p>Browserversion: ")
document.write(navigator.appVersion + "</p>")
document.write("<p>Code: ")
document.write(navigator.appCodeName + "</p>")
document.write("<p>Platform: ")
document.write(navigator.platform + "</p>")
document.write("<p>Cookies enabled: ")
document.write(navigator.cookieEnabled + "</p>")
document.write("<p>Browser's user agent header: ")

document.write(navigator.userAgent + "</p>")
</script>
</body>
</html>
……………………….
<html>
<head>
var x=document.getElementById("mySelect")
x.size="3"
</script>
</head>
<body>
<form>
<select name="mySelect">
<option>Melon</option>
</select>
<input type="button" onclick="formAction()" value="Change size of list">

</form>
</body>
</html>
………………………
<html>
<head>
x.remove(x.selectedIndex)
</script>
</head>
<body>
<form>
<select name="mySelect">
</select>
<input type="button" onclick="formAction()" value="Remove option">
</form>
</body>
</html>
……………………..
<html>
<head>
function changeText()
x.options[x.selectedIndex].text="Melon"
</script>
</head>
<body>
<form>
</select>
<br /><br />

<input type="button" onclick="changeText()" value="Change text of selected fruit">
</form>
</body>
</html>
…………………………..
<html>
<head>
function getIndex()
alert(x.selectedIndex)
</script>
</head>
<body>
<form>
</select>
<br /><br />
<input type="button" onclick="getIndex()" value="Show index of selected fruit">
</form>
</body>
</html>
………………..
<html>
<body>
hi everybody.hi everybody.hi everybody.hi everybody.hi everybody.hi everybody.hi everybody.hi

everybody.hi everybody.hi everybody.hi everybody.hi everybody.hi everybody.hi everybody.hi
everybody.hi everybody.
<script>
if (window.print) {
document.write('<form><input type=button name=print value="Print"

onClick="window.print()"></form>');
</script>
</body>
</html>
…………………………………
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to change the text in this paragraph.</p>
<button onclick="myFunction()">Click</button>
<script>
document.getElementById("demo").innerHTML="Hello World";
};
</script>
</body>
</html>
………………….
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to display todays day of the month.</p>
<button onclick="myFunction()">click</button>
<script>
var d = new Date();
var x = document.getElementById("demo");
x.innerHTML=d.getDate();
</script>
</body>
</html>
……………………………
<!DOCTYPE html>
<html>
<head>
<script>
var myWindow;
function openWin()
myWindow = window.open("","myWindow","width=400,height=200");
function closeWin()
{
if (myWindow)
myWindow.close();
function checkWin()
if (!myWindow)
document.getElementById("msg").innerHTML="'myWindow' has never been opened!";
else
if (myWindow.closed)
document.getElementById("msg").innerHTML="'myWindow' has been closed!";
else
document.getElementById("msg").innerHTML="'myWindow' has not been closed!";
}
</script>
</head>
<body>
<button onclick="openWin()">Open "myWindow"</button>
<button onclick="closeWin()">Close "myWindow"</button>
<br><br>
<button onclick="checkWin()">Has "myWindow" been closed?</button>
<br><br>
<div id="msg"></div>
</body>
</html>
………………………….
<html>
<head>
function specifyRow()
var x=document.getElementById('myTable').rows
x[2].height="100"
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
<tr>
<td>Row4 cell1</td>
<td>Row4 cell2</td>
</tr>
<tr>
<td>Row5 cell1</td>
<td>Row5 cell2</td>
</tr>
</table>
<form>
<input type="button" onclick="specifyRow()" value="Change height of third row">
</form>
</body>
</html>
…………………………
<html>
<head>
function getText()
alert(x.options[x.selectedIndex].text)
</script>
</head>
<body>
<form>
</select>
<br /><br />
<input type="button" onclick="getText()" value="Show text of selected fruit">
</form>
</body>
</html>
…………………
<html>
<head>
function changeText()
x.options[x.selectedIndex].text="Melon"
</script>
</head>
<body>
<form>
</select>
<br /><br />
<input type="button" onclick="changeText()" value="Change text of selected fruit">
</form>
</body>
</html>
………………………
<html>
<head>
function makeDisable()
x.disabled=true
function makeEnable()
x.disabled=false
</script>
</head>
<body>
<form>
</select>
<input type="button" onclick="makeDisable()" value="Disable list">
<input type="button" onclick="makeEnable()" value="Enable list">
</form>
</body>
</html>
…………………..
<html>
<head>
x.multiple=true
</script>
</head>
<body>
<p>
Before you click on the "Select multiple" button, try to select more than one option (by holding down
the shift or Ctrl key). Click on the "Select multiple" button and try again.
</p>
<form>
<select name="mySelect" size="3">
</select>
<input type="button" onclick="formAction()" value="Select multiple">
</form>
</body>
</html>
………………………
<html>
<head>
<script>
function show() {
var elem = document.getElementById("BeatleList");
alert(elem.innerHTML);
</script>
</head>
<body onload="show();">
<h1>Rockbands</h1>
<h2>Beatles</h2>
<ol id="BeatleList">
<li>Paul</li>
<li>John</li>
<li>George</li>
<li>Ringo</li>
</ol>
<h2>Rolling Stones</h2>
<ol id="StonesList">
<li>Mick</li>
<li>Keith</li>
<li>Charlie</li>
<li>Bill</li>
</ol>
</body>
</html>
……………………
<html>
<body>
<p>This example calls a function which performs a calculation,and returns the result:</p>
<p id="demo"></p>
<script>
function myFunction(a,b)
return a*b;
document.getElementById("demo").innerHTML=myFunction(5,5);
</script>
</body>
</html>
…………………….

Java Script

Uploaded by

Document Information

Original Title

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

When text input inside the textbox it will display on thye body of webpage…….

<input type=input maxlength=40 onkeyup="abc()" value="text" id="abc">

Click on the button text color is changed…….

<button type=button onClick="abc()">ok</button>

<h1 id="myHeader" onclick="getValue()">Click me!</h1>

<input type="button" value="Hide text"

<input type="button" value="Show text"

This document was last modified on:

<input type="button" onclick="removeOption()" value="Remove selected option">

<h1 id="id1">My Heading 1</h1>

<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>

<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>

<input type="button" id="btn01" value="OK">

<p>Click the button below to disable the button above.</p>

<button onclick="disableElement()">Disable button</button>

alert("Not a valid e-mail")

<form name="myForm" action="1.html" onsubmit="return validate()">

Enter your E-mail:

<input type="text" name="email" size="20">

<input type="submit" value="Submit">

alert("The field cannot contain more than 5 characters!")

<form name="myForm" action="1.html" onsubmit="return validate()">

<input type="text" name="myInput" size="20">

<input type="submit" value="Submit">

Select your favorite fruit:

<br /><br />

<input type="button" onclick="getText()" value="Show text of selected

<p id="demo">Click the button to change the text in this paragraph.</p>

<p id="demo">Click the button to display todays day of the month.</p>

var d = new Date();

document.getElementById("msg").innerHTML="'myWindow' has never been opened!";

document.getElementById("msg").innerHTML="'myWindow' has been closed!";

document.getElementById("msg").innerHTML="'myWindow' has not been closed!";

<button onclick="closeWin()">Close "myWindow"</button>

<button onclick="checkWin()">Has "myWindow" been closed?</button>

var newColor = document.getElementById('colorPicker').value;

<div id="colorMsg" style="font-size:18px;width:150px;height:100px;padding:5px;">Choose a

<select id="colorPicker" onchange="JavaScript:changeColor()">

<option value="limegreen">Lime Green</option>

var userInput = document.getElementById('userInput').value;

<input type="input" maxlength="40" id="userInput" onkeyup="showMsg()" value="Enter text here..." />

<input type=input maxlength=40 onkeyup="abc()" value="text" id="abc">

Click on the button text color is changed…….

<button type=button onClick="abc()">ok</button>

<h1 id="myHeader" onclick="getValue()">Click me!</h1>

<input type="button" value="Hide text"

<input type="button" value="Show text"

This document was last modified on:

<input type="button" onclick="removeOption()" value="Remove selected option">

<h1 id="id1">My Heading 1</h1>

<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>

<input type="button" id="btn01" value="OK">

<p>Click the button below to disable the button above.</p>

<button onclick="disableElement()">Disable button</button>

alert("Not a valid e-mail")

<form name="myForm" action="1.html" onsubmit="return validate()">

Enter your E-mail:

<input type="text" name="email" size="20">

<input type="submit" value="Submit">

alert("The field cannot contain more than 5 characters!")

<input type="text" name="myInput" size="20">

<input type="submit" value="Submit">

Select your favorite fruit: