<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Calculation additon and average for 4 number</title> | |
<p><u>This calculate total and average</u></p> | |
<script language="javascript"> | |
function calc() | |
{ | |
var bttntotal = document.getElementById("B1"); | |
var bttnaverage = document.getElementById("B2"); | |
var mark1 = parseFloat(document.Marks.mark1.value); | |
var mark2 = parseFloat(document.Marks.mark2.value); | |
var mark3 = parseFloat(document.Marks.mark3.value); | |
var mark4 = parseFloat(document.Marks.mark4.value); | |
if (bttntotal.checked){ | |
document.Marks.result.value = mark1+mark2+mark3+mark4; | |
}else if (bttnaverage.checked) { | |
document.Marks.result.value = ( mark1+mark2+mark3+mark4)/4; | |
} | |
} | |
</script> | |
</head> | |
<body> | |
<form name="Marks"> | |
<ul style type=none> | |
Marks: <input type="text" name="mark1" min="0" max="100"><br><br> | |
Marks: <input type="text" name="mark2" min="0" max="100"><br><br> | |
Marks: <input type="text" name="mark3" min="0" max="100"><br><br> | |
Marks: <input type="text" name="mark4" min="0" max="100"><br><br> | |
</ul> | |
<ul> | |
<input type="radio" name="calculate" value="bttntotal" id="B1">Find Total   | |
<input type="radio" name="calculate" value="bttnaverage" id="B2">Find Average<br></br> | |
<input type="button" value="Submit" onclick="calc()">         | |
<input type="reset" value="Clear"/> | |
<br></br>Result: <input type="text" name="result"><br> | |
</ul> | |
</form> | |
</body> | |
</html> |
Monday, 29 February 2016
Addition operation
GPA CALCULATOR
<html> | |
<head> | |
<title> This is GPA calculator </title> | |
<script type="text/javascript"> | |
function cgpa() | |
{ | |
var point1 = parseFloat(document.gpaForm.point1.value); | |
var point2 = parseFloat(document.gpaForm.point2.value); | |
var point3 = parseFloat(document.gpaForm.point3.value); | |
var point4 = parseFloat(document.gpaForm.point4.value); | |
var crhr1 = parseFloat(document.gpaForm.cr1.value) ; | |
var crhr2 = parseFloat(document.gpaForm.cr2.value) ; | |
var crhr3 = parseFloat(document.gpaForm.cr3.value) ; | |
var crhr4 = parseFloat(document.gpaForm.cr4.value) ; | |
var pointsub1 = point1 * crhr1; | |
var pointsub2 = point2 * crhr2; | |
var pointsub3 = point3 * crhr3; | |
var pointsub4 = point4 * crhr4; | |
var totcredithour = crhr1 + crhr2 + crhr3 + crhr4; | |
var totgpa = (pointsub1 + pointsub2 + pointsub3 + pointsub4) / totcredithour; | |
document.getElementById('gpa').value = parseFloat(totgpa).toFixed(2); | |
document.getElementById('semuahour').value = parseFloat(totcredithour).toFixed(2); | |
} | |
</script> | |
</head> | |
<body> | |
<center><h><font size="5" color="blue">This is a program to calculate GPA </font> <h2> </center> | |
<form name="gpaForm"> | |
<table align = "center" width= "800" height="700" border="1" style="border-collapse:collapse"> | |
<tr> | |
<td align= "center" colspan = 3 > | |
<h1><u><font face="verdana" >GPA CALCULATOR </u></h1> | |
</tr> | |
<tr> | |
<th>Course Code</th> | |
<th>Credit Hour</th> | |
<th>Grade</th> | |
</tr> | |
<tr> | |
<td align= "center" width= "200"> | |
<input type="text" > | |
</td> | |
<td align= "center" width= "200"> | |
<select id="cr1"> | |
<option value="1">1</option> | |
<option value="2">2</option> | |
<option value="3">3</option> | |
<option value="4">4</option> | |
</select> | |
</td> | |
<td align= "center" width= "200"> | |
<select id="point1" > | |
<option value="4.00">A</option> | |
<option value="3.75">A-</option> | |
<option value="3.50">B+</option> | |
<option value="3.00">B</option> | |
<option value="2.50">C+</option> | |
<option value="2.00">C</option> | |
<option value="1.50">D+</option> | |
<option value="1.00">D</option> | |
<option value="0.00">F</option> | |
</select> | |
</td> | |
</tr> | |
<td align= "center" width= "200"> | |
<input type="text" > | |
</td> | |
<td align= "center" width= "200"> | |
<select id="cr2" > | |
<option value="1">1</option> | |
<option value="2">2</option> | |
<option value="3">3</option> | |
<option value="4">4</option> | |
</select> | |
</td> | |
<td align= "center" width= "200"> | |
<select id="point2" > | |
<option value="4.00">A</option> | |
<option value="3.75">A-</option> | |
<option value="3.50">B+</option> | |
<option value="3.00">B</option> | |
<option value="2.50">C+</option> | |
<option value="2.00">C</option> | |
<option value="1.50">D+</option> | |
<option value="1.00">D</option> | |
<option value="0.00">F</option> | |
</select> | |
</td> | |
<tr> | |
<td align= "center" width= "200"> | |
<input id="text"> | |
</td> | |
<td align= "center" width= "200"> | |
<select id="cr3" > | |
<option value="1">1</option> | |
<option value="2">2</option> | |
<option value="3">3</option> | |
<option value="4">4</option> | |
</select> | |
</td> | |
<td align= "center" width= "200"> | |
<select id="point3" > | |
<option value="4.00">A</option> | |
<option value="3.75">A-</option> | |
<option value="3.50">B+</option> | |
<option value="3.00">B</option> | |
<option value="2.50">C+</option> | |
<option value="2.00">C</option> | |
<option value="1.50">D+</option> | |
<option value="1.00">D</option> | |
<option value="0.00">F</option> | |
</select> | |
</td> | |
</tr> | |
<tr> | |
<td align= "center" width= "200"> | |
<input type="text" > | |
</td> | |
<td align= "center" width= "200"> | |
<select id="cr4" > | |
<option value="1">1</option> | |
<option value="2">2</option> | |
<option value="3">3</option> | |
<option value="4">4</option> | |
</select> | |
</td> | |
<td align= "center" width= "200"> | |
<select id="point4" > | |
<option value="4.00">A</option> | |
<option value="3.75">A-</option> | |
<option value="3.50">B+</option> | |
<option value="3.00">B</option> | |
<option value="2.50">C+</option> | |
<option value="2.00">C</option> | |
<option value="1.50">D+</option> | |
<option value="1.00">D</option> | |
<option value="0.00">F</option> | |
</select> | |
</td> | |
</tr> | |
<tr> | |
<td colspan = 2> | |
<center><pre>Total Credit Hours : </pre></center> | |
</td> | |
<td align= "center" width= "200"> | |
<input type="text" id="semuahour" name="result2" disabled="disabled" > | |
</td> | |
</tr> | |
<tr> | |
<td colspan = 2> | |
<center><strong><pre>GPA :</pre></center> | |
</td> | |
<td align= "center" width= "200"> | |
<input type="text" id="gpa" name="result" disabled="disabled"> | |
</td> | |
</tr> | |
<tr> | |
<td align= "center" colspan= 3> | |
<INPUT TYPE="button" NAME="button" Value="Calculate" onClick="cgpa()"/> | |
<button type="buttonre">Reset</button> | |
</td> | |
</tr> | |
</table> | |
</form> | |
</body> | |
</html> |
Saturday, 27 February 2016
Nk tambah tpi dalam table
melakukan operasi tambah dan terpisah oleh garisan table
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
<!--
function init() {
document.formInput.num1.focus();
document.formInput.num1.value=0;
document.formInput.num2.value=0;
document.formInput.total.value=0;
}
function c() {
var total="";
var num1;
var num2;
num1= parseInt(document.formInput.num1.value);
num2= parseInt(document.formInput.num2.value);
total= num1+num2;
document.formInput.total.value= total;
}
-->
</script>
</head>
<body onload="init();">
<form name="formInput" action="">
<table border=1>
<caption><ins>Simple Addition calculator</ins></caption></br>
<tr>
<th>Number1</th>
<th>Number2</th>
<th>Total</th>
</tr>
<tr>
<td><input type="text" size="10" name="num1" onchange="c();"></td>
<td><input type="text" size="10" name="num2" onchange="c();"></td>
<td><input type="text" size="10" name="total" disabled="disabled"></td>
</tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
<!--
function init() {
document.formInput.num1.focus();
document.formInput.num1.value=0;
document.formInput.num2.value=0;
document.formInput.total.value=0;
}
function c() {
var total="";
var num1;
var num2;
num1= parseInt(document.formInput.num1.value);
num2= parseInt(document.formInput.num2.value);
total= num1+num2;
document.formInput.total.value= total;
}
-->
</script>
</head>
<body onload="init();">
<form name="formInput" action="">
<table border=1>
<caption><ins>Simple Addition calculator</ins></caption></br>
<tr>
<th>Number1</th>
<th>Number2</th>
<th>Total</th>
</tr>
<tr>
<td><input type="text" size="10" name="num1" onchange="c();"></td>
<td><input type="text" size="10" name="num2" onchange="c();"></td>
<td><input type="text" size="10" name="total" disabled="disabled"></td>
</tr>
</table>
</form>
</body>
</html>
Thursday, 25 February 2016
cara nak kira guna dropdown
  kod ni untuk bagi jarak sahaja,,tak letak pun takpe
kod ni sebenarnya rentetan drp posting simple kod je,,cheers hihi
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<form onsubmit="return false" oninput="o.value = parseInt(a.value) * parseInt(b.value)">
<select name="a" id="num" type="number" step="any"> <option value="20">20</option><option value="2">a</option></select>     *
    <select name="b" id="num2" type="number" step="any"><option value="10">10</option><option value="3">3</option> </select>   =
<output name="o" for="a b"> </output>
</form>
</body>
</html
kod ni sebenarnya rentetan drp posting simple kod je,,cheers hihi
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<form onsubmit="return false" oninput="o.value = parseInt(a.value) * parseInt(b.value)">
<select name="a" id="num" type="number" step="any"> <option value="20">20</option><option value="2">a</option></select>     *
    <select name="b" id="num2" type="number" step="any"><option value="10">10</option><option value="3">3</option> </select>   =
<output name="o" for="a b"> </output>
</form>
</body>
</html
output based user input simple
simple code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<form onsubmit="return false" oninput="o.value = parseInt(a.value) + parseInt(b.value)">
<input name="a" id="a" type="number" step="any"> +
<input name="b" id="b" type="number" step="any"> =
<output name="o" for="a b"></output>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<form onsubmit="return false" oninput="o.value = parseInt(a.value) + parseInt(b.value)">
<input name="a" id="a" type="number" step="any"> +
<input name="b" id="b" type="number" step="any"> =
<output name="o" for="a b"></output>
</form>
</body>
</html>
Wednesday, 24 February 2016
create child window
<?xml version = "1.0" encoding = "utf-8"?> | |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" | |
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
<!-- Fig. 11.13: window.html --> | |
<!-- Using the window object to create and modify child windows. --> | |
<html xmlns = "http://www.w3.org/1999/xhtml"> | |
<head> | |
<title>Using the Window Object</title> | |
<script type = "text/javascript"> | |
<!-- | |
var childWindow; // variable to control the child window | |
function createChildWindow() | |
{ | |
// these variables all contain either "yes" or "no" | |
// to enable or disable a feature in the child window | |
var toolBar; | |
var menuBar; | |
var scrollBars; | |
// determine whether the Tool Bar checkbox is checked | |
if ( document.getElementById( "toolBarCheckBox" ).checked ) | |
toolBar = "yes"; | |
else | |
toolBar = "no"; | |
// determine whether the Menu Bar checkbox is checked | |
if ( document.getElementById( "menuBarCheckBox" ).checked ) | |
menuBar = "yes"; | |
else | |
menuBar = "no"; | |
// determine whether the Scroll Bar checkbox is checked | |
if ( document.getElementById( "scrollBarsCheckBox" ).checked ) | |
scrollBars = "yes"; | |
else | |
scrollBars = "no"; | |
//display window with selected features | |
childWindow = window.open( "", "", | |
",toolbar = " + toolBar + | |
",menubar = " + menuBar + | |
",scrollbars = " + scrollBars ); | |
// disable buttons | |
document.getElementById( "closeButton" ).disabled = false; | |
document.getElementById( "modifyButton" ).disabled = false; | |
document.getElementById( "setURLButton" ).disabled = false; | |
} // end function createChildWindow | |
// insert text from the textbox in the child window | |
function modifyChildWindow() | |
{ | |
if ( childWindow.closed ) | |
alert( "You attempted to interact with a closed window" ); | |
else | |
childWindow.document.write( | |
document.getElementById( "textForChild" ).value ); | |
} // end function modifyChildWindow | |
// close the child window | |
function closeChildWindow() | |
{ | |
if ( childWindow.closed ) | |
alert( "You attempted to interact with a closed window" ); | |
else | |
childWindow.close(); | |
document.getElementById( "closeButton" ).disabled = true; | |
document.getElementById( "modifyButton" ).disabled = true; | |
document.getElementById( "setURLButton" ).disabled = true; | |
} // end function closeChildWindow | |
// set the URL of the child window to the URL | |
// in the parent window's myChildURL | |
function setChildWindowURL() | |
{ | |
if ( childWindow.closed ) | |
alert( "You attempted to interact with a closed window" ); | |
else | |
childWindow.location = | |
document.getElementById( "myChildURL" ).value; | |
} // end function setChildWindowURL | |
//--> | |
</script> | |
</head> | |
<body> | |
<h1>Hello, this is the main window</h1> | |
<p>Please check the features to enable for the child window<br/> | |
<input id = "toolBarCheckBox" type = "checkbox" value = "" | |
checked = "checked" /> | |
<label>Tool Bar</label> | |
<input id = "menuBarCheckBox" type = "checkbox" value = "" | |
checked = "checked" /> | |
<label>Menu Bar</label> | |
<input id = "scrollBarsCheckBox" type = "checkbox" value = "" | |
checked = "checked" /> | |
<label>Scroll Bars</label></p> | |
<p>Please enter the text that you would like to display | |
in the child window<br/> | |
<input id = "textForChild" type = "text" | |
value = "<h1>Hello, I am a child window.</h1> " /> | |
<input id = "createButton" type = "button" | |
value = "Create Child Window" onclick = "createChildWindow()" /> | |
<input id= "modifyButton" type = "button" value = "Modify Child Window" | |
onclick = "modifyChildWindow()" disabled = "disabled" /> | |
<input id = "closeButton" type = "button" value = "Close Child Window" | |
onclick = "closeChildWindow()" disabled = "disabled" /></p> | |
<p>The other window's URL is: <br/> | |
<input id = "myChildURL" type = "text" value = "./" /> | |
<input id = "setURLButton" type = "button" value = "Set Child URL" | |
onclick = "setChildWindowURL()" disabled = "disabled" /></p> | |
</body> | |
</html>
key in title desired in the url tab then click ceate child window button. when already child window pop out, click the set child url button. the adrress of the window will change
|
Monday, 22 February 2016
Nak compile kod html
pergi ke link ini
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_default
boleh compile secara online dan dapat tengok output di sebelah sahaja
untuk yang internet slow, boleh save kt notepad dan namakan dia sebagai .html (cth aiah.html) option bawah lpas rename tu pilih save all files.
SAVE
lpas tu open with dgn google chrome atau apa2 browser.
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_default
boleh compile secara online dan dapat tengok output di sebelah sahaja
untuk yang internet slow, boleh save kt notepad dan namakan dia sebagai .html (cth aiah.html) option bawah lpas rename tu pilih save all files.
SAVE
lpas tu open with dgn google chrome atau apa2 browser.
kode untuk nombor rawak setiap kali refresh
<html xmlns = "http://www.w3.org/1999/xhtml"> | |
<head> | |
<title>Random Number</title> | |
<style type="text/css" rel="stylesheet"> | |
body { | |
text-align: center; | |
font-size:200px; | |
} | |
</style> | |
<script type = "text/javascript"> | |
<!-- | |
var luckyNumber; | |
// generate a random number ranging from 0 ... 10 inclusive | |
luckyNumber = Math.floor(Math.random() * 11); | |
document.write(luckyNumber); | |
//--> | |
</script> | |
<body></body> | |
</html> |
html kod untuk shuffle nombor rawak
dapat nombor rawak <html xmlns = "http://www.w3.org/1999/xhtml"> | |
<head> | |
<title>Random Number</title> | |
<style type="text/css" rel="stylesheet"> | |
body { text-align:center } | |
div { | |
text-align: center; | |
font-size:40px; | |
} | |
</style> | |
<script type = "text/javascript"> | |
<!-- | |
function lucky() { | |
var message, start, end, output, luckyNumber; | |
start = parseInt(document.getElementById("start").value); | |
end = parseInt(document.getElementById("end").value); | |
output = document.getElementById("display"); | |
luckyNumber = Math.floor(Math.random() * (end - start + 1)) + start; | |
output.innerHTML = luckyNumber; | |
} | |
//--> | |
</script> | |
<body> | |
<form action="javascript:lucky()"> | |
<label>Starting Number </label> | |
<input type = "text" id= "start" size="3" value="100" /> | |
<label>Ending Number</label> | |
<input type = "text" id= "end" size="3" value="200"/> | |
<input type="submit" value="LUCKY NUMBER" /> | |
</form> | |
<div id="display">Lucky Draw!!!</div> | |
</body> | |
</html> | |
table utk buat resume
<html> | |
<?xml version="1.0" encoding="UTF-8"?> | |
<!DOCTYPE html | |
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> | |
<body> | |
<title> HERE IS MY RESUME </title> | |
<body> | |
<hr style="height:1500px; width:10px; background:blue; size:50; position:absolute; left: 1100px;"/> | |
<table border='1' width='1000px' height='300px'> <br> | |
<tr><td><img src='https://scontent-kul1-1.xx.fbcdn.net/hphotos-xap1/t31.0-8/s960x960/12764370_518201225018297_5536007354250044589_o.jpg' align=right width='300px' height='450px'</td></tr> | |
</table> | |
<hr style=width:870px; position:fixed; left:100px;> </hr> | |
<center><pre><b style="color:red;"><font size="5"> Siti Aisyah Binti Azman</b> </pre><font><br> </center> | |
<hr style=width:870px; position:absolute; right:1500px;> </hr> | |
<style> | |
ol.a {list-style-type: none;} | |
</style> | |
<table border width="1000"> | |
<tr> <td width='400px'> Universiti Teknologi Petronas <p>Bandar Seri Iskandar </p> <p>31750 Tronoh </p> | |
Perak. </td> | |
<td colspan="6" width='1000px'><p><i> No telefon : 017- 4383269 </i> </p>Email: <a href="https://mail.google.com/mail/u/0/#inbox"> sitiaisyahazman96@gmail.com </a></td> | |
</tr> | |
</td> </tr> | |
<tr> | |
<td colspan="7" align="center" width="150%"><font size="7"><u> Description about myself</u><font><br> | |
<font size="3">Higly self-motivated and goal-oriented professional committed to | |
pursuing a long term career in computer network and Web design. Offer | |
years of record demonstrating strong analytical and problem solving skills, | |
computer profiency and ability to follow through with projects | |
from initial untill mission accomplish.</font></td> | |
</tr> | |
<tr> | |
<td colspan="2">Education and Training</td> | |
<td><font size="4"><ol class="a"> | |
<li>Basic foundation in computer science</li> | |
<li>Certificate in Solidwork 2015 </li> | |
<li> Computer language in Visual Basic, C and Java </li> | |
<li> Aware with database language in MySql </li> | |
</ol></font></td> | |
</tr> | |
<tr> | |
<td colspan="2">Technical and skill</td> | |
<td><font size="4"><ol class="a"> | |
<li>Skilled with Microsoft</li> | |
<li>Skilled in handling technical</li> | |
</ol></font></td> | |
</tr> | |
</table> | |
<style> | |
table, th, td { | |
border: 3px solid black; | |
border-collapse: collapse; | |
} | |
</style> | |
</body> | |
</html> |
kode
kod utk child window
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Fig. 11.13: window.html -->
<!-- Using the window object to create and modify child windows. -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Using the Window Object</title>
<script type = "text/javascript">
<!--
var childWindow; // variable to control the child window
function createChildWindow()
{
// these variables all contain either "yes" or "no"
// to enable or disable a feature in the child window
var toolBar;
var menuBar;
var scrollBars;
// determine whether the Tool Bar checkbox is checked
if ( document.getElementById( "toolBarCheckBox" ).checked )
toolBar = "yes";
else
toolBar = "no";
// determine whether the Menu Bar checkbox is checked
if ( document.getElementById( "menuBarCheckBox" ).checked )
menuBar = "yes";
else
menuBar = "no";
// determine whether the Scroll Bar checkbox is checked
if ( document.getElementById( "scrollBarsCheckBox" ).checked )
scrollBars = "yes";
else
scrollBars = "no";
//display window with selected features
childWindow = window.open( "", "",
",toolbar = " + toolBar +
",menubar = " + menuBar +
",scrollbars = " + scrollBars );
// disable buttons
document.getElementById( "closeButton" ).disabled = false;
document.getElementById( "modifyButton" ).disabled = false;
document.getElementById( "setURLButton" ).disabled = false;
} // end function createChildWindow
// insert text from the textbox in the child window
function modifyChildWindow()
{
if ( childWindow.closed )
alert( "You attempted to interact with a closed window" );
else
childWindow.document.write(
document.getElementById( "textForChild" ).value );
} // end function modifyChildWindow
// close the child window
function closeChildWindow()
{
if ( childWindow.closed )
alert( "You attempted to interact with a closed window" );
else
childWindow.close();
document.getElementById( "closeButton" ).disabled = true;
document.getElementById( "modifyButton" ).disabled = true;
document.getElementById( "setURLButton" ).disabled = true;
} // end function closeChildWindow
// set the URL of the child window to the URL
// in the parent window's myChildURL
function setChildWindowURL()
{
if ( childWindow.closed )
alert( "You attempted to interact with a closed window" );
else
childWindow.location =
document.getElementById( "myChildURL" ).value;
} // end function setChildWindowURL
//-->
</script>
</head>
<body>
<h1>Hello, this is the main window</h1>
<p>Please check the features to enable for the child window<br/>
<input id = "toolBarCheckBox" type = "checkbox" value = ""
checked = "checked" />
<label>Tool Bar</label>
<input id = "menuBarCheckBox" type = "checkbox" value = ""
checked = "checked" />
<label>Menu Bar</label>
<input id = "scrollBarsCheckBox" type = "checkbox" value = ""
checked = "checked" />
<label>Scroll Bars</label></p>
<p>Please enter the text that you would like to display
in the child window<br/>
<input id = "textForChild" type = "text"
value = "<h1>Hello, I am a child window.</h1> " />
<input id = "createButton" type = "button"
value = "Create Child Window" onclick = "createChildWindow()" />
<input id= "modifyButton" type = "button" value = "Modify Child Window"
onclick = "modifyChildWindow()" disabled = "disabled" />
<input id = "closeButton" type = "button" value = "Close Child Window"
onclick = "closeChildWindow()" disabled = "disabled" /></p>
<p>The other window's URL is: <br/>
<input id = "myChildURL" type = "text" value = "./" />
<input id = "setURLButton" type = "button" value = "Set Child URL"
onclick = "setChildWindowURL()" disabled = "disabled" /></p>
</body>
</html>
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Fig. 11.13: window.html -->
<!-- Using the window object to create and modify child windows. -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Using the Window Object</title>
<script type = "text/javascript">
<!--
var childWindow; // variable to control the child window
function createChildWindow()
{
// these variables all contain either "yes" or "no"
// to enable or disable a feature in the child window
var toolBar;
var menuBar;
var scrollBars;
// determine whether the Tool Bar checkbox is checked
if ( document.getElementById( "toolBarCheckBox" ).checked )
toolBar = "yes";
else
toolBar = "no";
// determine whether the Menu Bar checkbox is checked
if ( document.getElementById( "menuBarCheckBox" ).checked )
menuBar = "yes";
else
menuBar = "no";
// determine whether the Scroll Bar checkbox is checked
if ( document.getElementById( "scrollBarsCheckBox" ).checked )
scrollBars = "yes";
else
scrollBars = "no";
//display window with selected features
childWindow = window.open( "", "",
",toolbar = " + toolBar +
",menubar = " + menuBar +
",scrollbars = " + scrollBars );
// disable buttons
document.getElementById( "closeButton" ).disabled = false;
document.getElementById( "modifyButton" ).disabled = false;
document.getElementById( "setURLButton" ).disabled = false;
} // end function createChildWindow
// insert text from the textbox in the child window
function modifyChildWindow()
{
if ( childWindow.closed )
alert( "You attempted to interact with a closed window" );
else
childWindow.document.write(
document.getElementById( "textForChild" ).value );
} // end function modifyChildWindow
// close the child window
function closeChildWindow()
{
if ( childWindow.closed )
alert( "You attempted to interact with a closed window" );
else
childWindow.close();
document.getElementById( "closeButton" ).disabled = true;
document.getElementById( "modifyButton" ).disabled = true;
document.getElementById( "setURLButton" ).disabled = true;
} // end function closeChildWindow
// set the URL of the child window to the URL
// in the parent window's myChildURL
function setChildWindowURL()
{
if ( childWindow.closed )
alert( "You attempted to interact with a closed window" );
else
childWindow.location =
document.getElementById( "myChildURL" ).value;
} // end function setChildWindowURL
//-->
</script>
</head>
<body>
<h1>Hello, this is the main window</h1>
<p>Please check the features to enable for the child window<br/>
<input id = "toolBarCheckBox" type = "checkbox" value = ""
checked = "checked" />
<label>Tool Bar</label>
<input id = "menuBarCheckBox" type = "checkbox" value = ""
checked = "checked" />
<label>Menu Bar</label>
<input id = "scrollBarsCheckBox" type = "checkbox" value = ""
checked = "checked" />
<label>Scroll Bars</label></p>
<p>Please enter the text that you would like to display
in the child window<br/>
<input id = "textForChild" type = "text"
value = "<h1>Hello, I am a child window.</h1> " />
<input id = "createButton" type = "button"
value = "Create Child Window" onclick = "createChildWindow()" />
<input id= "modifyButton" type = "button" value = "Modify Child Window"
onclick = "modifyChildWindow()" disabled = "disabled" />
<input id = "closeButton" type = "button" value = "Close Child Window"
onclick = "closeChildWindow()" disabled = "disabled" /></p>
<p>The other window's URL is: <br/>
<input id = "myChildURL" type = "text" value = "./" />
<input id = "setURLButton" type = "button" value = "Set Child URL"
onclick = "setChildWindowURL()" disabled = "disabled" /></p>
</body>
</html>
Subscribe to:
Posts (Atom)