JavaScript就这么回事 (JS基础知识整理)
1 创建脚本块
引用内容
2 隐藏脚本代码
引用内容
在不支持JavaScript的浏览器中将不执行相关代码
3 浏览器不支持的时候显示
引用内容
4 链接外部脚本文件
引用内容
5 注释脚本
引用内容
6 输出到浏览器
引用内容
7 定义变量
引用内容
8 字符串相加
引用内容
9 字符串搜索
引用内容
10 字符串替换
引用内容
11 格式化字串
引用内容
12 创建数组
引用内容
13 数组排序
引用内容
14 分割字符串
引用内容
15 弹出警告信息
引用内容
16 弹出确认框
引用内容
17 自定义函数
引用内容
18 调用JS函数
引用内容
19 在页面加载完成后执行函数
引用内容
20 条件判断
引用内容
21 指定次数循环
引用内容
22 设定将来执行
引用内容
23 定时执行函数
引用内容
24 取消定时执行
引用内容
25 在页面卸载时候执行函数
引用内容
JavaScript就这么回事2：浏览器输出
26 访问document对象
引用内容
27 动态输出HTML
引用内容
28 输出换行
引用内容
29 输出日期
引用内容
30 指定日期的时区
引用内容
31 设置日期输出格式
引用内容
32 读取URL参数
引用内容
你还以为HTML是无状态的么？
33 打开一个新的document对象
引用内容
34 页面跳转
引用内容
35 添加网页加载进度窗口
引用内容
JavaScript就这么回事3：图像
36 读取图像属性
引用内容
37 动态加载图像
引用内容
38 简单的图像替换
引用内容
39 随机显示图像
引用内容
40 函数实现的图像替换
引用内容
41 创建幻灯片
引用内容
42 随机广告图片
引用内容
JavaScript就这么回事4：表单
43 表单构成
引用内容
44 访问表单中的文本框内容
引用内容
45 动态复制文本框内容
引用内容
46 侦测文本框的变化
引用内容
47 访问选中的Select
引用内容
48 动态增加Select项
引用内容
49 验证表单字段
引用内容
50 验证Select项
引用内容
51 动态改变表单的action
引用内容
52 使用图像按钮
引用内容
53 表单数据的加密
引用内容
JavaScript就这么回事5：窗口和框架
54 改变浏览器状态栏文字提示
引用内容
55 弹出确认提示框
引用内容
56 提示输入
引用内容
57 打开一个新窗口
引用内容
58 设置新窗口的大小
引用内容
59 设置新窗口的位置
引用内容
60 是否显示工具栏和滚动栏
引用内容
61 是否可以缩放新窗口的大小
引用内容
62 加载一个新的文档到当前窗口
引用内容
63 设置页面的滚动位置
引用内容
64 在IE中打开全屏窗口
引用内容
65 新窗口和父窗口的操作
引用内容
66 往新窗口中写内容
引用内容
67 加载页面到框架页面
引用内容
68 在框架页面之间共享脚本
引用内容
69 数据公用
引用内容
70 框架代码库
引用内容
引用内容程序代码
<script language=”JavaScript”>
JavaScript 代码写在这里面
</script>
<script language=”JavaScript”>
JavaScript 代码写在这里面
</script>
2 隐藏脚本代码
引用内容程序代码
<script language=”JavaScript”>
<!--
document.write(“Hello”);
// -->
</script>
<script language=”JavaScript”>
<!--
document.write(“Hello”);
// -->
</script>
在不支持JavaScript的浏览器中将不执行相关代码
3 浏览器不支持的时候显示
引用内容程序代码
<noscript>
Hello to the non-JavaScript browser.
</noscript>
<noscript>
Hello to the non-JavaScript browser.
</noscript>
4 链接外部脚本文件
引用内容程序代码
<script language=”JavaScript” src="/”filename.js"”></script>
<script language=”JavaScript” src="/”filename.js"”></script>
5 注释脚本
引用内容程序代码
// This is a comment
document.write(“Hello”); // This is a comment
/*
All of this
is a comment
*/
// This is a comment
document.write(“Hello”); // This is a comment
/*
All of this
is a comment
*/
6 输出到浏览器
引用内容程序代码
document.write(“<strong>Hello</strong>”);
document.write(“<strong>Hello</strong>”);
7 定义变量
引用内容程序代码
var myVariable = “some value”;
var myVariable = “some value”;
8 字符串相加
引用内容程序代码
var myString = “String1” + “String2”;
var myString = “String1” + “String2”;
9 字符串搜索
引用内容程序代码
<script language=”JavaScript”>
<!--
var myVariable = “Hello there”;
var therePlace = myVariable.search(“there”);
document.write(therePlace);
// -->
</script>
<script language=”JavaScript”>
<!--
var myVariable = “Hello there”;
var therePlace = myVariable.search(“there”);
document.write(therePlace);
// -->
</script>
10 字符串替换
引用内容程序代码
thisVar.replace(“Monday”,”Friday”);
thisVar.replace(“Monday”,”Friday”);
11 格式化字串
引用内容程序代码
<script language=”JavaScript”>
<!--
var myVariable = “Hello there”;
document.write(myVariable.big() + “<br>”);
document.write(myVariable.blink() + “<br>”);
document.write(myVariable.bold() + “<br>”);
document.write(myVariable.fixed() + “<br>”);
document.write(myVariable.fontcolor(“red”) + “<br>”);
document.write(myVariable.fontsize(“18pt”) + “<br>”);
document.write(myVariable.italics() + “<br>”);
document.write(myVariable.small() + “<br>”);
document.write(myVariable.strike() + “<br>”);
document.write(myVariable.sub() + “<br>”);
document.write(myVariable.sup() + “<br>”);
document.write(myVariable.toLowerCase() + “<br>”);
document.write(myVariable.toUpperCase() + “<br>”);
var firstString = “My String”;
var finalString = firstString.bold().toLowerCase().fontcolor(“red”);
// -->
</script>
<script language=”JavaScript”>
<!--
var myVariable = “Hello there”;
document.write(myVariable.big() + “<br>”);
document.write(myVariable.blink() + “<br>”);
document.write(myVariable.bold() + “<br>”);
document.write(myVariable.fixed() + “<br>”);
document.write(myVariable.fontcolor(“red”) + “<br>”);
document.write(myVariable.fontsize(“18pt”) + “<br>”);
document.write(myVariable.italics() + “<br>”);
document.write(myVariable.small() + “<br>”);
document.write(myVariable.strike() + “<br>”);
document.write(myVariable.sub() + “<br>”);
document.write(myVariable.sup() + “<br>”);
document.write(myVariable.toLowerCase() + “<br>”);
document.write(myVariable.toUpperCase() + “<br>”);
var firstString = “My String”;
var finalString = firstString.bold().toLowerCase().fontcolor(“red”);
// -->
</script>
12 创建数组
引用内容程序代码
<script language=”JavaScript”>
<!--
var myArray = new Array(5);
myArray[0] = “First Entry”;
myArray[1] = “Second Entry”;
myArray[2] = “Third Entry”;
myArray[3] = “Fourth Entry”;
myArray[4] = “Fifth Entry”;
var anotherArray = new Array(“First Entry”,”Second Entry”,”Third Entry”,”Fourth Entry”,”Fifth Entry”);
// -->
</script>
<script language=”JavaScript”>
<!--
var myArray = new Array(5);
myArray[0] = “First Entry”;
myArray[1] = “Second Entry”;
myArray[2] = “Third Entry”;
myArray[3] = “Fourth Entry”;
myArray[4] = “Fifth Entry”;
var anotherArray = new Array(“First Entry”,”Second Entry”,”Third Entry”,”Fourth Entry”,”Fifth Entry”);
// -->
</script>
13 数组排序
引用内容程序代码
<script language=”JavaScript”>
<!--
var myArray = new Array(5);
myArray[0] = “z”;
myArray[1] = “c”;
myArray[2] = “d”;
myArray[3] = “a”;
myArray[4] = “q”;
document.write(myArray.sort());
// -->
</script>
<script language=”JavaScript”>
<!--
var myArray = new Array(5);
myArray[0] = “z”;
myArray[1] = “c”;
myArray[2] = “d”;
myArray[3] = “a”;
myArray[4] = “q”;
document.write(myArray.sort());
// -->
</script>
14 分割字符串
引用内容程序代码
<script language=”JavaScript”>
<!--
var myVariable = “a,b,c,d”;
var stringArray = myVariable.split(“,”);
document.write(stringArray[0]);
document.write(stringArray[1]);
document.write(stringArray[2]);
document.write(stringArray[3]);
// -->
</script>
<script language=”JavaScript”>
<!--
var myVariable = “a,b,c,d”;
var stringArray = myVariable.split(“,”);
document.write(stringArray[0]);
document.write(stringArray[1]);
document.write(stringArray[2]);
document.write(stringArray[3]);
// -->
</script>
15 弹出警告信息
引用内容程序代码
<script language=”JavaScript”>
<!--
window.alert(“Hello”);
// -->
</script>
<script language=”JavaScript”>
<!--
window.alert(“Hello”);
// -->
</script>
16 弹出确认框
引用内容程序代码
<script language=”JavaScript”>
<!--
var result = window.confirm(“Click OK to continue”);
// -->
</script>
<script language=”JavaScript”>
<!--
var result = window.confirm(“Click OK to continue”);
// -->
</script>
17 自定义函数
引用内容程序代码
<script language=”JavaScript”>
<!--
function multiple(number1,number2) {
var result = number1 * number2;
return result;
}
// -->
</script>
<script language=”JavaScript”>
<!--
function multiple(number1,number2) {
var result = number1 * number2;
return result;
}
// -->
</script>
18 调用JS函数
引用内容程序代码
<a href=”#” onClick=”functionName()”>Link text</a>
<a href="/”javascript:functionName"()”>Link text</a>
<a href=”#” onClick=”functionName()”>Link text</a>
<a href="/”javascript:functionName"()”>Link text</a>
19 在页面加载完成后执行函数
引用内容程序代码
<body onLoad=”functionName();”>
Body of the page
</body>
<body onLoad=”functionName();”>
Body of the page
</body>
20 条件判断
引用内容程序代码
<script>
<!--
var userChoice = window.confirm(“Choose OK or Cancel”);
var result = (userChoice == true) ? “OK” : “Cancel”;
document.write(result);
// -->
</script>
<script>
<!--
var userChoice = window.confirm(“Choose OK or Cancel”);
var result = (userChoice == true) ? “OK” : “Cancel”;
document.write(result);
// -->
</script>
21 指定次数循环
引用内容程序代码
<script>
<!--
var myArray = new Array(3);
myArray[0] = “Item 0”;
myArray[1] = “Item 1”;
myArray[2] = “Item 2”;
for (i = 0; i < myArray.length; i++) {
document.write(myArray[i] + “<br>”);
}
// -->
</script>
<script>
<!--
var myArray = new Array(3);
myArray[0] = “Item 0”;
myArray[1] = “Item 1”;
myArray[2] = “Item 2”;
for (i = 0; i < myArray.length; i++) {
document.write(myArray[i] + “<br>”);
}
// -->
</script>
22 设定将来执行
引用内容程序代码
<script>
<!--
function hello() {
window.alert(“Hello”);
}
window.setTimeout(“hello()”,5000);
// -->
</script>
<script>
<!--
function hello() {
window.alert(“Hello”);
}
window.setTimeout(“hello()”,5000);
// -->
</script>
23 定时执行函数
引用内容程序代码
<script>
<!--
function hello() {
window.alert(“Hello”);
window.setTimeout(“hello()”,5000);
}
window.setTimeout(“hello()”,5000);
// -->
</script>
<script>
<!--
function hello() {
window.alert(“Hello”);
window.setTimeout(“hello()”,5000);
}
window.setTimeout(“hello()”,5000);
// -->
</script>
24 取消定时执行
引用内容程序代码
<script>
<!--
function hello() {
window.alert(“Hello”);
}
var myTimeout = window.setTimeout(“hello()”,5000);
window.clearTimeout(myTimeout);
// -->
</script>
<script>
<!--
function hello() {
window.alert(“Hello”);
}
var myTimeout = window.setTimeout(“hello()”,5000);
window.clearTimeout(myTimeout);
// -->
</script>
25 在页面卸载时候执行函数
引用内容程序代码
<body onUnload=”functionName();”>
Body of the page
</body>
<body onUnload=”functionName();”>
Body of the page
</body>
JavaScript就这么回事2：浏览器输出
26 访问document对象
引用内容程序代码
<script language=”JavaScript”>
var myURL = document.URL;
window.alert(myURL);
</script>
<script language=”JavaScript”>
var myURL = document.URL;
window.alert(myURL);
</script>
27 动态输出HTML
引用内容程序代码
<script language=”JavaScript”>
document.write(“<p>Here’s some information about this document:</p>”);
document.write(“<ul>”);
document.write(“<li>Referring Document: “ + document.referrer + “</li>”);
document.write(“<li>Domain: “ + document.domain + “</li>”);
document.write(“<li>URL: “ + document.URL + “</li>”);
document.write(“</ul>”);
</script>
<script language=”JavaScript”>
document.write(“<p>Here’s some information about this document:</p>”);
document.write(“<ul>”);
document.write(“<li>Referring Document: “ + document.referrer + “</li>”);
document.write(“<li>Domain: “ + document.domain + “</li>”);
document.write(“<li>URL: “ + document.URL + “</li>”);
document.write(“</ul>”);
</script>
28 输出换行
引用内容程序代码
document.writeln(“<strong>a</strong>”);
document.writeln(“b”);
document.writeln(“<strong>a</strong>”);
document.writeln(“b”);
29 输出日期
引用内容程序代码
<script language=”JavaScript”>
var thisDate = new Date();
document.write(thisDate.toString());
</script>
<script language=”JavaScript”>
var thisDate = new Date();
document.write(thisDate.toString());
</script>
30 指定日期的时区
引用内容程序代码
<script language=”JavaScript”>
var myOffset = -2;
var currentDate = new Date();
var userOffset = currentDate.getTimezoneOffset()/60;
var timeZoneDifference = userOffset - myOffset;
currentDate.setHours(currentDate.getHours() + timeZoneDifference);
document.write(“The time and date in Central Europe is: “ + currentDate.toLocaleString());
</script>
<script language=”JavaScript”>
var myOffset = -2;
var currentDate = new Date();
var userOffset = currentDate.getTimezoneOffset()/60;
var timeZoneDifference = userOffset - myOffset;
currentDate.setHours(currentDate.getHours() + timeZoneDifference);
document.write(“The time and date in Central Europe is: “ + currentDate.toLocaleString());
</script>
31 设置日期输出格式
引用内容程序代码
<script language=”JavaScript”>
var thisDate = new Date();
var thisTimeString = thisDate.getHours() + “:” + thisDate.getMinutes();
var thisDateString = thisDate.getFullYear() + “/” + thisDate.getMonth() + “/” + thisDate.getDate();
document.write(thisTimeString + “ on “ + thisDateString);
</script>
<script language=”JavaScript”>
var thisDate = new Date();
var thisTimeString = thisDate.getHours() + “:” + thisDate.getMinutes();
var thisDateString = thisDate.getFullYear() + “/” + thisDate.getMonth() + “/” + thisDate.getDate();
document.write(thisTimeString + “ on “ + thisDateString);
</script>
32 读取URL参数
引用内容程序代码
<script language=”JavaScript”>
var urlParts = document.URL.split(“?”);
var parameterParts = urlParts[1].split(“&”);
for (i = 0; i < parameterParts.length; i++) {
var pairParts = parameterParts[i].split(“=”);
var pairName = pairParts[0];
var pairValue = pairParts[1];
document.write(pairName + “ ：“ +pairValue );
}
</script>
<script language=”JavaScript”>
var urlParts = document.URL.split(“?”);
var parameterParts = urlParts[1].split(“&”);
for (i = 0; i < parameterParts.length; i++) {
var pairParts = parameterParts[i].split(“=”);
var pairName = pairParts[0];
var pairValue = pairParts[1];
document.write(pairName + “ ：“ +pairValue );
}
</script>
你还以为HTML是无状态的么？
33 打开一个新的document对象
引用内容程序代码
<script language=”JavaScript”>
function newDocument() {
document.open();
document.write(“<p>This is a New Document.</p>”);
document.close();
}
</script>
<script language=”JavaScript”>
function newDocument() {
document.open();
document.write(“<p>This is a New Document.</p>”);
document.close();
}
</script>
34 页面跳转
引用内容35 添加网页加载进度窗口
引用内容程序代码
<html>
<head>
<script language='javaScript'>
var placeHolder = window.open('holder.html','placeholder','width=200,height=200');
</script>
<title>The Main Page</title>
</head>
<body onLoad='placeHolder.close()'>
<p>This is the main page</p>
</body>
</html>
<html>
<head>
<script language='javaScript'>
var placeHolder = window.open('holder.html','placeholder','width=200,height=200');
</script>
<title>The Main Page</title>
</head>
<body onLoad='placeHolder.close()'>
<p>This is the main page</p>
</body>
</html>
JavaScript就这么回事3：图像
36 读取图像属性
引用内容程序代码
<img src="/”image1.jpg"” name=”myImage”>
<a href=”# ” onClick=”window.alert(document.myImage.width)”>Width</a>
<img src="/”image1.jpg"” name=”myImage”>
<a href=”# ” onClick=”window.alert(document.myImage.width)”>Width</a>
37 动态加载图像
引用内容程序代码
<script language=”JavaScript”>
myImage = new Image;
myImage.src = “Tellers1.jpg”;
</script>
<script language=”JavaScript”>
myImage = new Image;
myImage.src = “Tellers1.jpg”;
</script>
38 简单的图像替换
引用内容程序代码
<script language=”JavaScript”>
rollImage = new Image;
rollImage.src = “rollImage1.jpg”;
defaultImage = new Image;
defaultImage.src = “image1.jpg”;
</script>
<a href="/”myUrl"” onMouseOver=”document.myImage.src = rollImage.src;”
onMouseOut=”document.myImage.src = defaultImage.src;”>
<img src="/”image1.jpg"” name=”myImage” width=100 height=100 border=0>
<script language=”JavaScript”>
rollImage = new Image;
rollImage.src = “rollImage1.jpg”;
defaultImage = new Image;
defaultImage.src = “image1.jpg”;
</script>
<a href="/”myUrl"” onMouseOver=”document.myImage.src = rollImage.src;”
onMouseOut=”document.myImage.src = defaultImage.src;”>
<img src="/”image1.jpg"” name=”myImage” width=100 height=100 border=0>
39 随机显示图像
引用内容程序代码
<script language=”JavaScript”>
var imageList = new Array;
imageList[0] = “image1.jpg”;
imageList[1] = “image2.jpg”;
imageList[2] = “image3.jpg”;
imageList[3] = “image4.jpg”;
var imageChoice = Math.floor(Math.random() * imageList.length);
document.write(‘<img src=”’ + imageList[imageChoice] + ‘“>’);
</script>
<script language=”JavaScript”>
var imageList = new Array;
imageList[0] = “image1.jpg”;
imageList[1] = “image2.jpg”;
imageList[2] = “image3.jpg”;
imageList[3] = “image4.jpg”;
var imageChoice = Math.floor(Math.random() * imageList.length);
document.write(‘<img src=”’ + imageList[imageChoice] + ‘“>’);
</script>
40 函数实现的图像替换
引用内容程序代码
<script language=”JavaScript”>
var source = 0;
var replacement = 1;
function createRollOver(originalImage,replacementImage) {
var imageArray = new Array;
imageArray[source] = new Image;
imageArray[source].src = originalImage;
imageArray[replacement] = new Image;
imageArray[replacement].src = replacementImage;
return imageArray;
}
var rollImage = createRollOver(“image1.jpg”,”rollImage1.jpg”);
</script>
<a href=”#” onMouseOver=”document.myImage1.src = rollImage1[replacement].src;”
onMouseOut=”document.myImage1.src = rollImage1[source].src;”>
<img src="/”image1.jpg"” width=100 name=”myImage1” border=0>
</a>
<script language=”JavaScript”>
var source = 0;
var replacement = 1;
function createRollOver(originalImage,replacementImage) {
var imageArray = new Array;
imageArray[source] = new Image;
imageArray[source].src = originalImage;
imageArray[replacement] = new Image;
imageArray[replacement].src = replacementImage;
return imageArray;
}
var rollImage = createRollOver(“image1.jpg”,”rollImage1.jpg”);
</script>
<a href=”#” onMouseOver=”document.myImage1.src = rollImage1[replacement].src;”
onMouseOut=”document.myImage1.src = rollImage1[source].src;”>
<img src="/”image1.jpg"” width=100 name=”myImage1” border=0>
</a>
41 创建幻灯片
引用内容程序代码
<script language=”JavaScript”>
var imageList = new Array;
imageList[0] = new Image;
imageList[0].src = “image1.jpg”;
imageList[1] = new Image;
imageList[1].src = “image2.jpg”;
imageList[2] = new Image;
imageList[2].src = “image3.jpg”;
imageList[3] = new Image;
imageList[3].src = “image4.jpg”;
function slideShow(imageNumber) {
document.slideShow.src = imageList[imageNumber].src;
imageNumber += 1;
if (imageNumber < imageList.length) {
window.setTimeout(“slideShow(“ + imageNumber + “)”,3000);
}
}
</script>
</head>
<body onLoad=”slideShow(0)”>
<img src="/”image1.jpg"” width=100 name=”slideShow”>
<script language=”JavaScript”>
var imageList = new Array;
imageList[0] = new Image;
imageList[0].src = “image1.jpg”;
imageList[1] = new Image;
imageList[1].src = “image2.jpg”;
imageList[2] = new Image;
imageList[2].src = “image3.jpg”;
imageList[3] = new Image;
imageList[3].src = “image4.jpg”;
function slideShow(imageNumber) {
document.slideShow.src = imageList[imageNumber].src;
imageNumber += 1;
if (imageNumber < imageList.length) {
window.setTimeout(“slideShow(“ + imageNumber + “)”,3000);
}
}
</script>
</head>
<body onLoad=”slideShow(0)”>
<img src="/”image1.jpg"” width=100 name=”slideShow”>
42 随机广告图片
引用内容程序代码
<script language=”JavaScript”>
var imageList = new Array;
imageList[0] = “image1.jpg”;
imageList[1] = “image2.jpg”;
imageList[2] = “image3.jpg”;
imageList[3] = “image4.jpg”;
var urlList = new Array;
urlList[0] = “http://some.host/”;
urlList[1] = “http://another.host/”;
urlList[2] = “http://somewh/ere.else/”;
urlList[3] = “http://right.here/”;
var imageChoice = Math.floor(Math.random() * imageList.length);
document.write(‘<a href=”’ + urlList[imageChoice] + ‘“><img src=”’ + imageList[imageChoice] + ‘“></a>’);
</script>
<script language=”JavaScript”>
var imageList = new Array;
imageList[0] = “image1.jpg”;
imageList[1] = “image2.jpg”;
imageList[2] = “image3.jpg”;
imageList[3] = “image4.jpg”;
var urlList = new Array;
urlList[0] = “http://some.host/”;
urlList[1] = “http://another.host/”;
urlList[2] = “http://somewh/ere.else/”;
urlList[3] = “http://right.here/”;
var imageChoice = Math.floor(Math.random() * imageList.length);
document.write(‘<a href=”’ + urlList[imageChoice] + ‘“><img src=”’ + imageList[imageChoice] + ‘“></a>’);
</script>
JavaScript就这么回事4：表单
43 表单构成
引用内容程序代码
<form method=”post” action=”target.html” name=”thisForm”>
<input type=”text” name=”myText”>
<select name=”mySelect”>
<option value=”1”>First Choice</option>
<option value=”2”>Second Choice</option>
</select>
<br>
<input type=”submit” value=”Submit Me”>
</form>
<form method=”post” action=”target.html” name=”thisForm”>
<input type=”text” name=”myText”>
<select name=”mySelect”>
<option value=”1”>First Choice</option>
<option value=”2”>Second Choice</option>
</select>
<br>
<input type=”submit” value=”Submit Me”>
</form>
44 访问表单中的文本框内容
引用内容程序代码
<form name=”myForm”>
<input type=”text” name=”myText”>
</form>
<a href='#' onClick='window.alert(document.myForm.myText.value);'>Check Text Field</a>
<form name=”myForm”>
<input type=”text” name=”myText”>
</form>
<a href='#' onClick='window.alert(document.myForm.myText.value);'>Check Text Field</a>
45 动态复制文本框内容
引用内容程序代码
<form name=”myForm”>
Enter some Text: <input type=”text” name=”myText”><br>
Copy Text: <input type=”text” name=”copyText”>
</form>
<a href=”#” onClick=”document.myForm.copyText.value =
document.myForm.myText.value;”>Copy Text Field</a>
<form name=”myForm”>
Enter some Text: <input type=”text” name=”myText”><br>
Copy Text: <input type=”text” name=”copyText”>
</form>
<a href=”#” onClick=”document.myForm.copyText.value =
document.myForm.myText.value;”>Copy Text Field</a>
46 侦测文本框的变化
引用内容程序代码
<form name=”myForm”>
Enter some Text: <input type=”text” name=”myText” onChange=”alert(this.value);”>
</form>
<form name=”myForm”>
Enter some Text: <input type=”text” name=”myText” onChange=”alert(this.value);”>
</form>
47 访问选中的Select
引用内容程序代码
<form name=”myForm”>
<select name=”mySelect”>
<option value=”First Choice”>1</option>
<option value=”Second Choice”>2</option>
<option value=”Third Choice”>3</option>
</select>
</form>
<a href='#' onClick='alert(document.myForm.mySelect.value);'>Check Selection List</a>
<form name=”myForm”>
<select name=”mySelect”>
<option value=”First Choice”>1</option>
<option value=”Second Choice”>2</option>
<option value=”Third Choice”>3</option>
</select>
</form>
<a href='#' onClick='alert(document.myForm.mySelect.value);'>Check Selection List</a>
48 动态增加Select项
引用内容程序代码
<form name=”myForm”>
<select name=”mySelect”>
<option value=”First Choice”>1</option>
<option value=”Second Choice”>2</option>
</select>
</form>
<script language=”JavaScript”>
document.myForm.mySelect.length++;
document.myForm.mySelect.options[document.myForm.mySelect.length - 1].text = “3”;
document.myForm.mySelect.options[document.myForm.mySelect.length - 1].value = “Third Choice”;
</script>
<form name=”myForm”>
<select name=”mySelect”>
<option value=”First Choice”>1</option>
<option value=”Second Choice”>2</option>
</select>
</form>
<script language=”JavaScript”>
document.myForm.mySelect.length++;
document.myForm.mySelect.options[document.myForm.mySelect.length - 1].text = “3”;
document.myForm.mySelect.options[document.myForm.mySelect.length - 1].value = “Third Choice”;
</script>
49 验证表单字段
引用内容程序代码
<script language=”JavaScript”>
function checkField(field) {
if (field.value == “”) {
window.alert(“You must enter a value in the field”);
field.focus();
}
}
</script>
<form name=”myForm” action=”target.html”>
Text Field: <input type=”text” name=”myField”onBlur=”checkField(this)”>
<br><input type=”submit”>
</form>
<script language=”JavaScript”>
function checkField(field) {
if (field.value == “”) {
window.alert(“You must enter a value in the field”);
field.focus();
}
}
</script>
<form name=”myForm” action=”target.html”>
Text Field: <input type=”text” name=”myField”onBlur=”checkField(this)”>
<br><input type=”submit”>
</form>
50 验证Select项
引用内容程序代码
function checkList(selection) {
if (selection.length == 0) {
window.alert(“You must make a selection from the list.”);
return false;
}
return true;
}
function checkList(selection) {
if (selection.length == 0) {
window.alert(“You must make a selection from the list.”);
return false;
}
return true;
}
51 动态改变表单的action
引用内容程序代码
<form name=”myForm” action=”login.html”>
Username: <input type=”text” name=”username”><br>
Password: <input type=”password” name=”password”><br>
<input type=”button” value=”Login” onClick=”this.form.submit();”>
<input type=”button” value=”Register” onClick=”this.form.action = ‘register.html’; this.form.submit();”>
<input type=”button” value=”Retrieve Password” onClick=”this.form.action = ‘password.html’; this.form.submit();”>
</form>
<form name=”myForm” action=”login.html”>
Username: <input type=”text” name=”username”><br>
Password: <input type=”password” name=”password”><br>
<input type=”button” value=”Login” onClick=”this.form.submit();”>
<input type=”button” value=”Register” onClick=”this.form.action = ‘register.html’; this.form.submit();”>
<input type=”button” value=”Retrieve Password” onClick=”this.form.action = ‘password.html’; this.form.submit();”>
</form>
52 使用图像按钮
引用内容程序代码
<form name=”myForm” action=”login.html”>
Username: <input type=”text” name=”username”><br>
Password: <input type=”password”name=”password”><br>
<input type=”image” src="/”login.gif"” value=”Login”>
</form>
<form name=”myForm” action=”login.html”>
Username: <input type=”text” name=”username”><br>
Password: <input type=”password”name=”password”><br>
<input type=”image” src="/”login.gif"” value=”Login”>
</form>
53 表单数据的加密
引用内容程序代码
<SCRIPT LANGUAGE='JavaScript'>
<!--
function encrypt(item) {
var newItem = '';
for (i=0; i < item.length; i++) {
newItem += item.charCodeAt(i) + '.';
}
return newItem;
}
function encryptForm(myForm) {
for (i=0; i < myForm.elements.length; i++) {
myForm.elements[i].value = encrypt(myForm.elements[i].value);
}
}
//-->
</SCRIPT>
<form name='myForm' onSubmit='encryptForm(this); window.alert(this.myField.value);'>
Enter Some Text: <input type=text name=myField><input type=submit>
</form>
<SCRIPT LANGUAGE='JavaScript'>
<!--
function encrypt(item) {
var newItem = '';
for (i=0; i < item.length; i++) {
newItem += item.charCodeAt(i) + '.';
}
return newItem;
}
function encryptForm(myForm) {
for (i=0; i < myForm.elements.length; i++) {
myForm.elements[i].value = encrypt(myForm.elements[i].value);
}
}
//-->
</SCRIPT>
<form name='myForm' onSubmit='encryptForm(this); window.alert(this.myField.value);'>
Enter Some Text: <input type=text name=myField><input type=submit>
</form>
JavaScript就这么回事5：窗口和框架
54 改变浏览器状态栏文字提示
引用内容程序代码
<script language=”JavaScript”>
window.status = “A new status message”;
</script>
<script language=”JavaScript”>
window.status = “A new status message”;
</script>
55 弹出确认提示框
引用内容程序代码
<script language=”JavaScript”>
var userChoice = window.confirm(“Click OK or Cancel”);
if (userChoice) {
document.write(“You chose OK”);
} else {
document.write(“You chose Cancel”);
}
</script>
<script language=”JavaScript”>
var userChoice = window.confirm(“Click OK or Cancel”);
if (userChoice) {
document.write(“You chose OK”);
} else {
document.write(“You chose Cancel”);
}
</script>
56 提示输入
引用内容程序代码
<script language=”JavaScript”>
var userName = window.prompt(“Please Enter Your Name”,”Enter Your Name Here”);
document.write(“Your Name is “ + userName);
</script>
<script language=”JavaScript”>
var userName = window.prompt(“Please Enter Your Name”,”Enter Your Name Here”);
document.write(“Your Name is “ + userName);
</script>
57 打开一个新窗口
引用内容//打开一个名称为myNewWindow的浏览器新窗口
程序代码
<script language=”JavaScript”>
window.open(“http://www.liu21st.com/”,”myNewWindow”);
</script>
程序代码
<script language=”JavaScript”>
window.open(“http://www.liu21st.com/”,”myNewWindow”);
</script>
58 设置新窗口的大小
引用内容程序代码
<script language=”JavaScript”>
window.open(“http://www.liu21st.com/”,”myNewWindow”,'height=300,width=300');
</script>
<script language=”JavaScript”>
window.open(“http://www.liu21st.com/”,”myNewWindow”,'height=300,width=300');
</script>
59 设置新窗口的位置
引用内容程序代码
<script language=”JavaScript”>
window.open(“http://www.liu21st.com/”,”myNewWindow”,'height=300,width=300,left=200,screenX=200,top=100,screenY=100');
</script>
<script language=”JavaScript”>
window.open(“http://www.liu21st.com/”,”myNewWindow”,'height=300,width=300,left=200,screenX=200,top=100,screenY=100');
</script>
60 是否显示工具栏和滚动栏
引用内容程序代码
<script language=”JavaScript”>
window.open(“http://www.x-force.cn/",toolbar=no, menubar=no);
</script>
<script language=”JavaScript”>
window.open(“http://www.x-force.cn/",toolbar=no, menubar=no);
</script>
61 是否可以缩放新窗口的大小
引用内容程序代码
<script language=”JavaScript”>
window.open('http://www.x-force.cn/' , 'myNewWindow', 'resizable=yes' );</script>
<script language=”JavaScript”>
window.open('http://www.x-force.cn/' , 'myNewWindow', 'resizable=yes' );</script>
62 加载一个新的文档到当前窗口
引用内容程序代码
<a href='#' onClick='document.location = '125a.html';' >Open New Document</a>
<a href='#' onClick='document.location = '125a.html';' >Open New Document</a>
63 设置页面的滚动位置
引用内容程序代码
<script language=”JavaScript”>
if (document.all) { //如果是IE浏览器则使用scrollTop属性
document.body.scrollTop = 200;
} else { //如果是NetScape浏览器则使用pageYOffset属性
window.pageYOffset = 200;
}</script>
<script language=”JavaScript”>
if (document.all) { //如果是IE浏览器则使用scrollTop属性
document.body.scrollTop = 200;
} else { //如果是NetScape浏览器则使用pageYOffset属性
window.pageYOffset = 200;
}</script>
64 在IE中打开全屏窗口
引用内容程序代码
<a href='#' onClick=”window.open('http://www.juxta.com/','newWindow','fullScreen=yes');”>Open a full-screen window</a>
<a href='#' onClick=”window.open('http://www.juxta.com/','newWindow','fullScreen=yes');”>Open a full-screen window</a>
65 新窗口和父窗口的操作
引用内容程序代码
<script language=”JavaScript”>
//定义新窗口
var newWindow = window.open(“128a.html”,”newWindow”);
newWindow.close(); //在父窗口中关闭打开的新窗口
</script>在新窗口中关闭父窗口
程序代码
window.opener.close()
<script language=”JavaScript”>
//定义新窗口
var newWindow = window.open(“128a.html”,”newWindow”);
newWindow.close(); //在父窗口中关闭打开的新窗口
</script>在新窗口中关闭父窗口
程序代码
window.opener.close()
66 往新窗口中写内容
引用内容程序代码
<script language=”JavaScript”>
var newWindow = window.open(“”,”newWindow”);
newWindow.document.open();
newWindow.document.write(“This is a new window”);
newWIndow.document.close();
</script>
<script language=”JavaScript”>
var newWindow = window.open(“”,”newWindow”);
newWindow.document.open();
newWindow.document.write(“This is a new window”);
newWIndow.document.close();
</script>
67 加载页面到框架页面
引用内容程序代码
<frameset cols=”50%,*”>
<frame name=”frame1” src="/”135a.html"”>
<frame name=”frame2” src="/”about:blank"”>
</frameset>
在frame1中加载frame2中的页面
parent.frame2.document.location = “135b.html”;
<frameset cols=”50%,*”>
<frame name=”frame1” src="/”135a.html"”>
<frame name=”frame2” src="/”about:blank"”>
</frameset>
在frame1中加载frame2中的页面
parent.frame2.document.location = “135b.html”;
68 在框架页面之间共享脚本
引用内容如果在frame1中html文件中有个脚本
程序代码
function doAlert() {
window.alert(“Frame 1 is loaded”);
}
那么在frame2中可以如此调用该方法
程序代码
<body onLoad=”parent.frame1.doAlert();”>
This is frame 2.
</body>
程序代码
function doAlert() {
window.alert(“Frame 1 is loaded”);
}
那么在frame2中可以如此调用该方法
程序代码
<body onLoad=”parent.frame1.doAlert();”>
This is frame 2.
</body>
69 数据公用
引用内容可以在框架页面定义数据项，使得该数据可以被多个框架中的页面公用
程序代码
<script language=”JavaScript”>
var persistentVariable = “This is a persistent value”;
</script>
<frameset cols=”50%,*”>
<frame name=”frame1” src="/”138a.html"”>
<frame name=”frame2” src="/”138b.html"”>
</frameset>
这样在frame1和frame2中都可以使用变量persistentVariable
程序代码
<script language=”JavaScript”>
var persistentVariable = “This is a persistent value”;
</script>
<frameset cols=”50%,*”>
<frame name=”frame1” src="/”138a.html"”>
<frame name=”frame2” src="/”138b.html"”>
</frameset>
这样在frame1和frame2中都可以使用变量persistentVariable
70 框架代码库
引用内容根据以上的一些思路，我们可以使用一个隐藏的框架页面来作为整个框架集的代码库
程序代码
<frameset cols=”0,50%,*”>
<frame name=”codeFrame” src="/”140code.html"”>
<frame name=”frame1” src="/”140a.html"”>
<frame name=”frame2” src="/”140b.html"”>
</frameset>
程序代码
<frameset cols=”0,50%,*”>
<frame name=”codeFrame” src="/”140code.html"”>
<frame name=”frame1” src="/”140a.html"”>
<frame name=”frame2” src="/”140b.html"”>
</frameset>
