|
|
<html>
<head>
<title>Document Write Example</title>
<script>
function showMyHr() {
document.write('<hr size="4" width="80%" color="#FF0000">');
}
showMyHr();
</script>
</head>
<body>
<SCRIPT>
<!-- Begin to hide script contents from old browsers.
var imgWidth=300;
showMyHr();
document.write("<center>");
document.write("<img src='icon.jpg' width="+imgWidth+" height=70>");
document.write("</center>");
showMyHr();
// End the hiding here. -->
</SCRIPT>
</body>
</html>
Show
Result
|
Note:
|
Displaying Output
- Web browser
interprets the HTML source
with scripts sequentially (top-down). The HTML display is shown from the top page down.
- Once the display is shown, its layout cannot be changed. The only
way to make changes is just reloading the page.
- Therefore, further document.write()
operations will not take effect in the original
HTML page.
- However,
you can perform document.write() on other pages,
e.g. pages in another frame or window. When the
document.write() operations on other pages are
performed, the pages will be entirely updated
according to the output of document.write().
|
|
|
Validating Form Input
<html>
<head>
<script>
function InputCheck(userInput) {
if (userInput != "" && isNaN(userInput)) {
alert("The input should be a number!");
document.myForm.userAge.value="";
}
return true;
}
function finalCheck() {
var age=document.myForm.userAge.value;
var userName=document.myForm.uName.value;
if (age == "" || userName=="")
alert("Input Not Completed!\nPlease Check Your Input Again.");
else document.myForm.submit();
return true;
}
</script>
</head>
<body>
<form name="myForm" method="post" action="../formTest.cgi">
User Name: <input type=text name="uName"><br>
Age: <input type=text name="userAge" onChange="InputCheck(this.value)"><br>
<input type="button" onClick="finalCheck()" value="O.K.">
</form>
</body>
</html>
Show Result
|
|
|
Control the Behavior of
Window/Document
1. Open or Close a Window
<script>
function openWin(url) {
win1=window.open(url, "window1",
"width=300,height=300,menubar=no,status=no,location=no,scrollbars=no");
return true;
}
</script>
...
<input type="button" onClick="openWin('http://www.mcu.edu.tw')"
value="Open a Window!">
<input type="button" onClick="win1.close()" value="Close the Window!">
...
2. Change the status text of a window
<script>
function changeStatus(textinput) {
window.status=textinput;
}
function clearStatus() {
window.status="";
}
</script>
...
<input type="button" onClick="changeStatus('Welcome to My Home Page')"
value="Change Window Status!">
<input type="button" onClick="clearStatus()" value="Clear Window Status">
3. Change the background color of a document
<script>
function changebgColor() {
bgC=document.aForm.bgC.selectedIndex;
if (bgC == -1) colorName=document.bgColor;
if (bgC == 0) colorName="yellow";
if (bgC == 1) colorName="red";
if (bgC == 2) colorName="blue";
document.bgColor=colorName;
}
</script>
...
<form name="aForm">
<select name="bgC">
<option selected>Yellow
<option>Red
<option>Blue
</select>
<input type="button" value="Change Background Color!"
onClick="changebgColor()">
</form>
...
Show Result
|
|
|
Dialog Box
- Alert
- Displays an
Alert dialog box with a message and an OK button.
<body onLoad="alert('Welcome to Dialog Box Example!')">
- Confirm
- Displays a
Confirm dialog box with the specified message and
OK and Cancel buttons.
If button OK is clicked, the returned value is
"true".
If button Cancel is clicked, the returned value
will be "false".
<script>
function delConfirm() {
var yn=confirm("Are you sure to delete the item?");
if (yn) {
document.delForm.submit();
return true;
}
else {return false;}
}
</script>
- Prompt
- Displays a
Prompt dialog box with a message and an input
field.
-
<script>
function askInput() {
var num=prompt("What is your lucky number?", "7");
alert("Your lucky number is: "+num);
}
</script>
Show Result
|