JavaScript学习总结
JavaScript是由NetScape发明的；语法和Java非常类似；但是注意的一点是：Java和JavaScript没有任何关系。
JavaScript中有许多内置对象，不需要用户创建；
HTML使用小技巧：
(1)如果想要输出一个空的表格，则需要<td> </td>
(2)在Editplus中支持快速浏览制作的网页，快捷键是CTRL+B;
一、使用JavaScript
如果要在HTML中引入JavaScript，则有两种方式：
（1）内部引入：JS代码直接在HTML中编写；
导入的结构如下：
<script language="JavaScript">
....
</script>
一般JS代码都放在head标签中；
（2）外部引入：JS代码在外部编写后导入到HTML中；
<script language="JavaScript" src="1.js"> .... </script>
二、JavaScript语法
1.跳出提示框 alert
在JavaScript中，使用的最多的就是alert，此语句会使得浏览器弹出一个提示框；
alert("Hello world!!!" );就能弹出一个Hello world!!!的提示框；
<html>
<head>
<title></title>
<script language="JavaScript">
alert("欢迎光临！");
alert("谢谢！");
</script>
</head>
</html>2.页面输出内容 document.write()
此语句也是非常常用的，可以直接向页面输出内容；比如：
document.write("<h3>Hello world!!!</h3>"); 就可以在页面中显示Hello world!!!
此语句和JSP中的out.println()非常类似；
<html>
<head>
<title></title>
<script language="JavaScript">
document.write("<h3>Hello world!!!</h3>");
</script>
</head>
</html>3.定义变量 var
这个特性和python是很类似的，Java中，有许多特定的数据类型，但是在JS中，只需要将任何类型的值赋予var即可；
例如：
(1)var num1 = 5; num1的类型就是整数；
(2)var str1 = "Hello world!!!"; str1的类型就是字符串；
<html> <head> <title></title> <script language="JavaScript"> var num1 = 5; var str1 = "Hello world!!!"; alert(num1); alert(str1); </script> </head> </html>
4.字符串比较
在JavaScript中，比较字符串是否相等只需要通过==即可；而不需要equals();
5.函数声明
在JavaScript中，函数声明非常简单，形式如下：
function(参数...){
[返回值;]
}
注意：
(1)参数也不能声明类型，只需要写明参数的名称即可；
(2)函数声明并看不出是否有返回值，在实现中，如果有返回值，则return；
<html>
<head>
<title></title>
<script language="JavaScript">
function fun(i){
alert("欢迎"+i);
}
fun("xiazdong");
</script>
</head>
</html>6.数组 Array
这里的数组也是没有类型的；只需要var arr = new Array(...);即可；数组的初始化有两种方式：
（1）静态初始化：var arr = new Array("1","2","3"); 直接赋值；
（2）动态初始化：var arr = new Array(length); 只声明长度；后来在赋值；
如果是动态初始化，一开始数组的元素内容是“undefined”；
输出数组内容：注意：arr.length返回数组长度；
for(i=0;i<arr.length;i++){
arr[i] ....
}
<html>
<head>
<title></title>
<script language="JavaScript">
var arr = new Array(3);
var str = "";
for(i=0;i<arr.length;i++){
arr[i]=i;
}
for(i=0;i<arr.length;i++){
str=str+arr[i]+"、";
}
alert(str);
</script>
</head>
</html>
三、JavaScript事件
1.body包含的事件
2.表单提交事件 onSubmit
当点击表单的submit按钮时，就会除触发onSubmit事件，并调用某函数，通常此事件用于验证操作；
补充：
在JavaScript中获得表单控件的值:可以通过层层递进的方式获得；
document是文档的根节点；
比如：
<form action="" method="post" onSubmit="fun(this)" name="f"> <input type="text" name="name"/><br /> <input type="radio" name="radiobutton"/>男<br /> <input type="radio" name="radiobutton"/>女<br /> <input type="button" value="显示" onClick="show()"/> </form>
（1）获得文本控件的值：document.f.name.value即可获得；
（2）获得单选按钮中的“男”按钮的值：document.f.radiobutton[0].value;
（3）获得单选按钮中的“女”按钮的值：document.f.radiobutton[1].value;
（4）判断单选按钮中的“男”按钮是否选中：document.f.radiobutton[0].checked;
3.单击事件 onClick
当单击某个控件，则触发该事件；
(1)在<a href>中触发onClick;
(2)在button中触发onClick;
4.下拉列表事件 onChange
<html>
<head>
<title></title>
<script language="JavaScript">
function fun(v){
alert(v);
}
</script>
<form action="" method="post" name="f">
EMAIL:<input type="text" name="name"/><br />
<select name="favor" onChange="fun(this.value)">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
<input type="submit" value="提交"/>
</form>
</head>
<body >
</body>
</html>5.失去焦点事件 onblur
四、JavaScript中的正则表达式
在JavaScript中也支持正则，但是使用语法与Java稍微不同；
/正则/.test(字符串);
比如email的验证：
/^\w+@\w+.\w+$/.test(value);
<html>
<head>
<title></title>
<script language="JavaScript">
function validate(f){
var email = f.name.value;
if(/^\w+@\w+.\w+$/.test(email)){
return true;
}
else{
return false;
}
}
</script>
<form action="" method="post" onSubmit="return validate(this)" name="f">
EMAIL:<input type="text" name="name"/><br />
<input type="submit" value="提交"/>
</form>
</head>
<body >
</body>
</html>以上完成了一个简单的验证操作；注意：
观察onSubmit事件，如果需要让返回值有用，需要return；
f.name.focus();可以使文本框获得焦点；
f.name.select();可以选中文本框中的文本；
五、window对象
1.打开新窗口：window.open函数
比如：
window.open("http://www.google.com","width=500,height=500,resizable=no"); 打开谷歌网页，并且控制网页大小、尺寸；
window.open("http://www.google.com");普通方法打开网页；
<html>
<head>
<title></title>
<script language="JavaScript">
function fun(url){
window.open(url,"页面标题","width=500,height=500,resizable=no");
}
</script>
</head>
<body >
<form action="" method="post">
<select name="favor" onChange="fun(this.value)">
<option value="#">====请选择====</option>
<option value="http://www.baidu.com">百度</option>
<option value="http://www.google.com">谷歌</option>
</select>
</form>
</body>
</html>2.确认窗口:window.confirm()
比如：
var flag = window.confirm("确认？"); 如果选是，则返回true；否则返回false；
<html>
<head>
<title></title>
<script language="JavaScript">
function fun(){
if(window.confirm("确认")){
alert("是");
}
else{
alert("否");
}
}
fun();
</script>
</head>
<body >
</body>
</html>3.页面重定向
通过window.location属性能够完成页面的转换；
只需要window.location="http://www.google.com"就能够将当前网页跳转到谷歌;
<html>
<head>
<title></title>
<script language="JavaScript">
function fun(url){
window.location=url; //将当前的网页的地址变换
}
</script>
</head>
<body >
<form action="" method="post">
<select name="favor" onChange="fun(this.value)">
<option value="#">====请选择====</option>
<option value="http://www.baidu.com">百度</option>
<option value="http://www.google.com">谷歌</option>
</select>
</form>
</body>
</html>
4.在子窗口中操作父窗口 opener
通过window.opener.document可以获得父窗口的文档对象；
window.opener.location可以获得父窗口地址；
window.opener.location.reload();重新加载父窗口；
父窗口：
<html>
<head>
<title></title>
<script language="JavaScript">
function fun(){
window.open("demo03.html","页面标题","width=500,height=500,resizable=no");
}
</script>
</head>
<body >
<form action="" method="post">
<input type="button" value="打开子窗口" onClick="fun()"/>
</form>
</body>
</html>子窗口:
<html>
<head>
<title></title>
<script language="JavaScript">
function fun(){
window.opener.location="http://www.baidu.com";
}
</script>
</head>
<body >
<input type="button" value="跳转到百度" onClick="fun()"/>
</body>
</html>
