JavaScript的一些总结(转)
2011-03-12 21:26
316 查看
1、JavaScript代码出现的位置：
* html页面的主题（<body>元素）如：
<body>
<script language = "javascript">
document.write("Hello,你好");
</script>
</body>
* html 页面的头部（<head元素> 上面的代码可以放在这，但通常是定义函数，可以在body中调用）
* 单独的外边文件中<script language = “javascript” src = “外边脚本的url”></script>（便于多个页面的重用
2、Javascript的关键字大小写不敏感，但是变量名是敏感的（A和a是不同的）。上面的document.write相当于jsp中的out.prient
2、基本数据类型：整形、浮点型、字符型、布尔
对象类型：内置对象（String、Math、Date）
浏览器对象（Window、Document、History、Forms……）
3、javascript是弱类型语言，变量声明时不指定数据类型，其数据类型根据所赋值类型决定，声明通常使用var，也可以不声明，但必须先赋值
4、pre：原样输出（html）"：双引号，如果没有pre的话，里面的一些/n、/t等都会被过滤，===（全等号类型，值都一样）==（只是值相等）
5、var sex = window.prompt("请输入您的性别（男/女）","")；whindow是一个浏览器对象，prompt弹出一个文本框，后面是默认值
6、javascript中swhitch可以是string类型。
7、for—in循环：
<script language = "javascript">
document.write("for--in循环");
var a = new Array(3);
a[0] = "ding";
a[2] = "yuan";
a[3] = "pu";
for(var s in a) {
document.write("<li>" + a[s] + "</li>");
}
</script>
8、javascript中数组的长度可变，你声明的长度是3，但你可以放5个元素
9、 <html>
<head>
<script type="text/javascript">
function sayHello() {
alert("欢迎光临");
}
function sayBye() {
alert("再见");
}
</script>
</head>
<body onload="sayHello()" onunload="sayBye()">
</body>
</html>
加载onload卸载onunload
10、<script type="text/javascript">
function clear1() {
document.myform1.uname.value = "";
}
function show() {
alert("你输入的姓名是：" + document.myform1.uname.value);
}
</script>
<input type = "text" name = "uname" value = "请输入姓名" onfocus = "clear1()" onBlur = "show()">
文本框获得焦点，失去焦点
11、鼠标跟随：
<html>
<head>
<style>
.mystyle {
position:absolute;
left:12;
top:222;
}
</style>
<script language="javascript">
function move(x, y) {
mypic.style.left=x;
mypic.style.top=y;
}
</script>
</head>
<body onMousemove="move(event.x, event.y)">
太好玩了！！！
<div class="mystyle" id="mypic">
<img src="fish.gif">
</div>
</body>
</html>
12、输出日期：
<body>
<script language = "JavaScript">
var cur = new Date();
document.write(cur);
document.write("<br>");
document.write(cur.getYear() + " 年 " + cur.getMonth()
+ " 月 " + cur.getDay() + " 日 " + cur.getHours() + " : "
+ cur.getMinutes() + " : " + cur.getSeconds());
</script>
</body>
13、表：
<html>
<head>
<script language = "JavaScript">
function showTime() {
var now = new Date();
var year = now.getYear();
var month = now.getMonth() + 1;
var date = now.getDate();
var day = now.getDay();
day = day == 0? "天":day;
var hours = now.getHours();
var mins = now.getMinutes();
var secs = now.getSeconds();
var timeVal2 = "现在时间：";
timeVal1 = "今天是：" + year + "年" + ((month < 10)? "0" : "")
+ month + "月" + date + "日 星期 " + day;
if(hours < 12)
timeVal2 += "上午";
else
timeVal2 += "下午";
timeVal2 += ((hours <= 12) ? hours : hours - 12);
timeVal2 += ((mins < 10) ? ":0" : ":") + mins;
timeVal2 += ((secs < 10) ? ":0" : ":") + secs;
document.clockForm.clock1.value = timeVal1;
document.clockForm.clock2.value = timeVal2;
}
function startClock() {
showTime();
window.setInterval("showTime()",1000);
}
</script>
</head>
<body onLoad = "startClock()">
<form name = "clockForm">
<input type = "text" name = "clock1" size = 30 readonly><br>
<input type = "text" name = "clock2" size = 30 readonly>
</form>
</body>
</html>
14、经典表单验证：
<html>
<head>
<title></title>
<script language="javascript">
function check() {
var valid = true;
var n = document.myform1.uname.value;
var p = document.myform1.psw.value;
var e = document.myform1.email.value;
if(n == "") {
window.alert("用户名不能为空");
valid = false;
}else if(p.length < 4) {
window.alert("密码不能为空且长度不能小于4个字符");
valid = false;
}else {
var idx = e.indexOf('@');
if(idx <= 0 || idx == e.length -1) {
alert("Email地址格式不合法！");
valid = false;
}
}
if(valid) {
document.myform1.submit();
}
}
</script>
</head>
<body>
请输入注册信息：
<form name="myform1" action="http://www.baidu.com" method="post">
姓名：<input type="text" name="uname" /><br />
密码：<input type="password" name="psw" /><br />
邮箱：<input type="text" name="email" /><br />
<input type="button" value="提交信息" onclick="check()" />
<input type="reset" />
</body>
</html>
15、常用的系统函数：
Eval(str)：计算字符串形式给出的表达式的值
ParseInt(str),parseInt(str,radix)：将字符串形式的数值解析为整数，如果解析到字符串中遇到非法字符则返回已解析的内容、不是出错；如果第一位即非法字符，返回NaN
paseFloat(str)：将字符串的数值解析为浮点数
16、javascript 使用的是DOM模型（Document Object Model，文档对象模型）document.form.username.value
逐层定位
17、常用浏览器对象（红色）：
18、Window对象：表示的是浏览器窗口，是其他浏览器对象的共同祖先，可以省略不写，浏览器打开heml文档时，通常会创建一个window对象。常用方法有：
* alert()
* open(URL,windowName, parameterList) 打开一个窗口
* close() 关闭一个窗口
* promt(text, Defaulttext) 弹出一个文本输入框
* confirm(text) 弹出一个确认窗口，返回布尔类型
* setInterval(func, timer) / clearInterval(timer) 知定时间间隔和任务 / 知道时间间隔
例：adv.html
<html>
<head>
</head>
<body>
<h1>欢迎访问！</h1>
<hr />
<input align="center" type="button" value="关闭窗口" onclick="window.close()"/>
</body>
</html>
Test.html
<html>
<head>
<script language="javascript">
function advertise() {
window.open("adv.html","myadvWindow","toolbar = no,left = 300,top = 200,menubar = no,width = 250,height = 200");
}
function f1() {
var flag = window.confirm("确定要删除此条记录吗？");
if(flag) {
document.form1.submit();
}
}
</script>
</head>
<body onload="advertise()">
<form name="form1" action="http://www.baidu.com">
记录1<input type="text" /><input type="button" name="ic1" value="删除" onclick="f1()" /><br />
记录2<input type="text"/><input type="button" name="ic2" value="删除" onclick="f1()" /><br />
</form>
<hr />
<input type="button" value="关闭窗口" onclick="window.close()" />
</body>
</html>
19、document：指当前的文档，主要方法是：write()
20、location对象：
主要方法 ：window.location = “targetUrl” 转到新页面
reload（）刷新
例：<html>
<head>
<script language="javascript">
function redirect() {
var flag = window.confirm("确定要转到搜索页面吗？");
if(flag) {
window.location = "http://www.xiaonei.com"
}
}
</script>
</head>
<body>
<script language="javascript">
document.write(new Date());
</script>
<input type="button" value="刷新页面" onclick="location.reload()" />
<input type="button" value="搜索功能" onclick="redirect()" />
</body>
</html>
21、History对象，封装了当前浏览器曾经访问过的网页url信息，并提供了相应的访问和页面跳转功能。
主要的属性方法：go(index) back() forward()
例：<html>
<head>
<script language="javascript">
function f1() {
location = "http://www.v512.com";
}
</script>
</head>
<body>
<input type="button" value="返回back()" onclick="history.back()" />
<input type="button" value="返回go(-1)" onclick="history.go(-1)" />
<input type="button" value="返回go(-2)" onclick="history.go(-2)" />
<input type="button" value="前进go(1)" onclick="history.go(1)" />
<input type="button" value="前进forward()" onclick="history.forward()" />
<input type="button" value="转到v512" onclick="f1()" />
</body>
</html>
22、navigator对象：封装了当前浏览器的相关信息（可以直接输出）
主要属性：appName appVersion language platform
* html页面的主题（<body>元素）如：
<body>
<script language = "javascript">
document.write("Hello,你好");
</script>
</body>
* html 页面的头部（<head元素> 上面的代码可以放在这，但通常是定义函数，可以在body中调用）
* 单独的外边文件中<script language = “javascript” src = “外边脚本的url”></script>（便于多个页面的重用
2、Javascript的关键字大小写不敏感，但是变量名是敏感的（A和a是不同的）。上面的document.write相当于jsp中的out.prient
2、基本数据类型：整形、浮点型、字符型、布尔
对象类型：内置对象（String、Math、Date）
浏览器对象（Window、Document、History、Forms……）
3、javascript是弱类型语言，变量声明时不指定数据类型，其数据类型根据所赋值类型决定，声明通常使用var，也可以不声明，但必须先赋值
4、pre：原样输出（html）"：双引号，如果没有pre的话，里面的一些/n、/t等都会被过滤，===（全等号类型，值都一样）==（只是值相等）
5、var sex = window.prompt("请输入您的性别（男/女）","")；whindow是一个浏览器对象，prompt弹出一个文本框，后面是默认值
6、javascript中swhitch可以是string类型。
7、for—in循环：
<script language = "javascript">
document.write("for--in循环");
var a = new Array(3);
a[0] = "ding";
a[2] = "yuan";
a[3] = "pu";
for(var s in a) {
document.write("<li>" + a[s] + "</li>");
}
</script>
8、javascript中数组的长度可变，你声明的长度是3，但你可以放5个元素
9、 <html>
<head>
<script type="text/javascript">
function sayHello() {
alert("欢迎光临");
}
function sayBye() {
alert("再见");
}
</script>
</head>
<body onload="sayHello()" onunload="sayBye()">
</body>
</html>
加载onload卸载onunload
10、<script type="text/javascript">
function clear1() {
document.myform1.uname.value = "";
}
function show() {
alert("你输入的姓名是：" + document.myform1.uname.value);
}
</script>
<input type = "text" name = "uname" value = "请输入姓名" onfocus = "clear1()" onBlur = "show()">
文本框获得焦点，失去焦点
11、鼠标跟随：
<html>
<head>
<style>
.mystyle {
position:absolute;
left:12;
top:222;
}
</style>
<script language="javascript">
function move(x, y) {
mypic.style.left=x;
mypic.style.top=y;
}
</script>
</head>
<body onMousemove="move(event.x, event.y)">
太好玩了！！！
<div class="mystyle" id="mypic">
<img src="fish.gif">
</div>
</body>
</html>
12、输出日期：
<body>
<script language = "JavaScript">
var cur = new Date();
document.write(cur);
document.write("<br>");
document.write(cur.getYear() + " 年 " + cur.getMonth()
+ " 月 " + cur.getDay() + " 日 " + cur.getHours() + " : "
+ cur.getMinutes() + " : " + cur.getSeconds());
</script>
</body>
13、表：
<html>
<head>
<script language = "JavaScript">
function showTime() {
var now = new Date();
var year = now.getYear();
var month = now.getMonth() + 1;
var date = now.getDate();
var day = now.getDay();
day = day == 0? "天":day;
var hours = now.getHours();
var mins = now.getMinutes();
var secs = now.getSeconds();
var timeVal2 = "现在时间：";
timeVal1 = "今天是：" + year + "年" + ((month < 10)? "0" : "")
+ month + "月" + date + "日 星期 " + day;
if(hours < 12)
timeVal2 += "上午";
else
timeVal2 += "下午";
timeVal2 += ((hours <= 12) ? hours : hours - 12);
timeVal2 += ((mins < 10) ? ":0" : ":") + mins;
timeVal2 += ((secs < 10) ? ":0" : ":") + secs;
document.clockForm.clock1.value = timeVal1;
document.clockForm.clock2.value = timeVal2;
}
function startClock() {
showTime();
window.setInterval("showTime()",1000);
}
</script>
</head>
<body onLoad = "startClock()">
<form name = "clockForm">
<input type = "text" name = "clock1" size = 30 readonly><br>
<input type = "text" name = "clock2" size = 30 readonly>
</form>
</body>
</html>
14、经典表单验证：
<html>
<head>
<title></title>
<script language="javascript">
function check() {
var valid = true;
var n = document.myform1.uname.value;
var p = document.myform1.psw.value;
var e = document.myform1.email.value;
if(n == "") {
window.alert("用户名不能为空");
valid = false;
}else if(p.length < 4) {
window.alert("密码不能为空且长度不能小于4个字符");
valid = false;
}else {
var idx = e.indexOf('@');
if(idx <= 0 || idx == e.length -1) {
alert("Email地址格式不合法！");
valid = false;
}
}
if(valid) {
document.myform1.submit();
}
}
</script>
</head>
<body>
请输入注册信息：
<form name="myform1" action="http://www.baidu.com" method="post">
姓名：<input type="text" name="uname" /><br />
密码：<input type="password" name="psw" /><br />
邮箱：<input type="text" name="email" /><br />
<input type="button" value="提交信息" onclick="check()" />
<input type="reset" />
</body>
</html>
15、常用的系统函数：
Eval(str)：计算字符串形式给出的表达式的值
ParseInt(str),parseInt(str,radix)：将字符串形式的数值解析为整数，如果解析到字符串中遇到非法字符则返回已解析的内容、不是出错；如果第一位即非法字符，返回NaN
paseFloat(str)：将字符串的数值解析为浮点数
16、javascript 使用的是DOM模型（Document Object Model，文档对象模型）document.form.username.value
逐层定位
17、常用浏览器对象（红色）：
18、Window对象：表示的是浏览器窗口，是其他浏览器对象的共同祖先，可以省略不写，浏览器打开heml文档时，通常会创建一个window对象。常用方法有：
* alert()
* open(URL,windowName, parameterList) 打开一个窗口
* close() 关闭一个窗口
* promt(text, Defaulttext) 弹出一个文本输入框
* confirm(text) 弹出一个确认窗口，返回布尔类型
* setInterval(func, timer) / clearInterval(timer) 知定时间间隔和任务 / 知道时间间隔
例：adv.html
<html>
<head>
</head>
<body>
<h1>欢迎访问！</h1>
<hr />
<input align="center" type="button" value="关闭窗口" onclick="window.close()"/>
</body>
</html>
Test.html
<html>
<head>
<script language="javascript">
function advertise() {
window.open("adv.html","myadvWindow","toolbar = no,left = 300,top = 200,menubar = no,width = 250,height = 200");
}
function f1() {
var flag = window.confirm("确定要删除此条记录吗？");
if(flag) {
document.form1.submit();
}
}
</script>
</head>
<body onload="advertise()">
<form name="form1" action="http://www.baidu.com">
记录1<input type="text" /><input type="button" name="ic1" value="删除" onclick="f1()" /><br />
记录2<input type="text"/><input type="button" name="ic2" value="删除" onclick="f1()" /><br />
</form>
<hr />
<input type="button" value="关闭窗口" onclick="window.close()" />
</body>
</html>
19、document：指当前的文档，主要方法是：write()
20、location对象：
主要方法 ：window.location = “targetUrl” 转到新页面
reload（）刷新
例：<html>
<head>
<script language="javascript">
function redirect() {
var flag = window.confirm("确定要转到搜索页面吗？");
if(flag) {
window.location = "http://www.xiaonei.com"
}
}
</script>
</head>
<body>
<script language="javascript">
document.write(new Date());
</script>
<input type="button" value="刷新页面" onclick="location.reload()" />
<input type="button" value="搜索功能" onclick="redirect()" />
</body>
</html>
21、History对象，封装了当前浏览器曾经访问过的网页url信息，并提供了相应的访问和页面跳转功能。
主要的属性方法：go(index) back() forward()
例：<html>
<head>
<script language="javascript">
function f1() {
location = "http://www.v512.com";
}
</script>
</head>
<body>
<input type="button" value="返回back()" onclick="history.back()" />
<input type="button" value="返回go(-1)" onclick="history.go(-1)" />
<input type="button" value="返回go(-2)" onclick="history.go(-2)" />
<input type="button" value="前进go(1)" onclick="history.go(1)" />
<input type="button" value="前进forward()" onclick="history.forward()" />
<input type="button" value="转到v512" onclick="f1()" />
</body>
</html>
22、navigator对象：封装了当前浏览器的相关信息（可以直接输出）
主要属性：appName appVersion language platform
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 近期学习javascript和jquery遇到一些问题的技巧知识总结
- JavaScript 日期选择器 Pikaday 的一些总结
- JavaScript实现设计模式中的单例模式的一些技巧总结
- javascript创建页面蒙板的一些知识技巧总结第1/3页
- Javascript this 的一些学习总结
- 重新认识Javascript的一些误区总结
- QML中使用JavaScript的一些总结
- 关于javascript数组的定义与其一些常用方法总结
- 一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
- 总结一些更多的针对webkit的HTML, CSS和Javascript方面的特性.
- 近期学习javascript和jquery遇到一些问题的技巧知识总结
- 总结两个Javascript的哈稀对象的一些编程技巧
- 总结一些更多的针对webkit的HTML, CSS和Javascript方面的特性.
- 总结两个Javascript的哈稀对象的一些编程技巧
- Javascript一些语法总结
- 近期学习javascript和jquery遇到一些问题的技巧知识总结
- 对于CDHtmlDialog和JavaScript、HTML配合使用的一些技术总结
- JavaScript学习总结之正则的元字符和一些简单的应用
- Javascript一些概念研究总结
- 关于块级元素，行级元素和javascript的一些总结