![[Java Web] 4、JavaScript 简单例子(高手略过)](https://image.shishitao.com:8440/aHR0cHM6Ly9ia3FzaW1nLmlrYWZhbi5jb20vdXBsb2FkL2NoYXRncHQtcy5wbmc%2FIQ%3D%3D.png?!?w=700&webp=1 "[Java Web] 4、JavaScript 简单例子(高手略过)")
内容概览：
- JavaScript简介
- JavaScript的基本语法
- JavaScript的基本应用
- JavaScript的事件处理
- window对象的使用
JavaScript简介：
- JavaScript（Java脚本）是一种基于对象（Object）和事件驱动（Event Driven）并具有安全性能的脚本语言；
- 是由Netscape公司的LiveScript发展而来的；
- 使用JavaScript可以轻松的实现和HTML的互操作，并且完成丰富的页面交互效果；
- 它是通过嵌入或调入在标准的HTML语言中实现的，它的出现弥补了HTML语言的缺陷，它是Java与HTML折衷的选择。
JavaScript的基本语法：
- JavaScript的语法本身非常的简单，就是包含了一些变量及函数的声明操作，所有的JavaScript代码是在HTML代码之中编写的，使用<script>标记完成。
- 一般而言，<script>标记都是出现在<head>标记之中的，当然，也可以在任意的位置上编写，但是最好在调用其操作之前进行编写。
JavaScript的基本应用：
- 弹出警告框
- 多个script元素
- document.write()
- *.js文件
- 变量
- 条件语句
- 循环语句
- 返回值+带参数的JS函数
- 数组相关
<html> <!-- HTML开始标记 -->
<head> <!-- 头标记 -->
<title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 -->
<script language="JavaScript"> <!-- 使用JavaScript语言 -->
alert("Hello World!!!") ; // 弹出一个警告框
alert("Hello Beautifulzzzz!!!") ; // 弹出一个警告框
</script>
</head> <!-- 完结标记 -->
<body> <!-- 网页主体 -->
</body> <!-- 完结标记 -->
</html> <!-- 完结标记 -->
>_<" 在<script>元素之中编写了两条JavaScript语句，弹出两个警告框。
<html> <!-- HTML开始标记 -->
<head> <!-- 头标记 -->
<title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 -->
<script language="JavaScript"> <!-- 使用JavaScript语言 -->
alert("Hello World!!!") ; // 弹出一个警告框
</script>
</head> <!-- 完结标记 -->
<body> <!-- 网页主体 -->
<script language="JavaScript">
alert("Hello Beautifulzzzz!!!") ; // 弹出一个警告框
</script>
</body> <!-- 完结标记 -->
</html> <!-- 完结标记 -->
>_<" 在一个HTML中也可以定义多个<script>元素，执行时将采用顺序执行。
<html> <!-- HTML开始标记 -->
<head> <!-- 头标记 -->
<title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 -->
<script language="JavaScript"> <!-- 使用JavaScript语言 -->
document.write("<h1>Hello World!!!</h1>") ; // 页面输出
document.write("<h5>Hello Beautifulzzzz!!!</h5>") ; // 页面输出
</script>
</head> <!-- 完结标记 -->
<body> <!-- 网页主体 -->
</body> <!-- 完结标记 -->
</html> <!-- 完结标记 -->
>_<" 调用document.write()语句向一个页面输出内容。（使用该方法就如同在<body>元素中编写内容一样，可以直接进行显示）
document.write("<h1>Hello World!!!</h1>") ; // 页面输出
document.write("<h5>Hello Beautifulzzzz!!!</h5>") ; // 页面输出
hello.js
<html> <!-- HTML开始标记 -->
<head> <!-- 头标记 -->
<title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 -->
<script language="JavaScript" src="hello.js"> <!-- 使用JavaScript语言 -->
</script>
</head> <!-- 完结标记 -->
<body> <!-- 网页主体 -->
</body> <!-- 完结标记 -->
</html> <!-- 完结标记 -->
>_<" 如果在一个HTML文件中定义太多JavaScript代码，则整个代码就会显得臃肿，那么就可以考虑将一些JavaScript代码定义成一个*.js文件，然后在需要的页面中导入即可。
<html> <!-- HTML开始标记 -->
<head> <!-- 头标记 -->
<title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 -->
<script language="JavaScript"> <!-- 使用JavaScript语言 -->
var num = 30 ; // 定义数字
var info = "http://www.cnblogs.com/zjutlitao/" ; // 定义字符串
alert("数字：" + num + "；字符串：" + info) ;
</script>
</head> <!-- 完结标记 -->
<body> <!-- 网页主体 -->
</body> <!-- 完结标记 -->
</html> <!-- 完结标记 -->
>_<" 在JavaScript定义变量直接利用var定义变量即可，但是其类型会根据所赋的具体值来决定，由于都是采用var声明变量，所以也可以省略，但是在某些低版本的浏览器上可能不支持。
<html> <!-- HTML开始标记 -->
<head> <!-- 头标记 -->
<title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 -->
<script language="JavaScript"> <!-- 使用JavaScript语言 -->
str = "Beautifulzzzz" ; // 定义字符串
if(str == "Beautifulzzzz"){ // 直接判断
alert("内容符合判断！") ; // 弹出警告框
}else{
alert("内容不符合判断！") ; // 弹出警告框
}
</script>
</head> <!-- 完结标记 -->
<body> <!-- 网页主体 -->
</body> <!-- 完结标记 -->
</html> <!-- 完结标记 -->
>_<" 条件语句。
<html> <!-- HTML开始标记 -->
<head> <!-- 头标记 -->
<title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 -->
<script language="JavaScript"> <!-- 使用JavaScript语言 -->
var rows = 5 ; // 定义输出行数
var cols = 10 ; // 定义输出列数
document.write("<table border=\"1\">") ;// 输出表格
for(i=0 ; i<rows ; i++){ // 循环输出
document.write("<tr>") ;
for(j=0; j<cols; j++){ // 循环输出
document.write("<td>" + i*j + "</td>") ;
}
document.write("</tr>") ;
}
document.write("</table>") ;
</script>
</head> <!-- 完结标记 -->
<body> <!-- 网页主体 -->
</body> <!-- 完结标记 -->
</html> <!-- 完结标记 -->
>_<" 循环语句。
<html> <!-- HTML开始标记 -->
<head> <!-- 头标记 -->
<title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 -->
<script language="JavaScript"> <!-- 使用JavaScript语言 -->
function add(i, j, k){ // 定义了三个参数的函数
return i + j + k ; // 返回数据
}
alert("数字相加结果：" + add(10,20,30)) ;// 调用函数
</script>
</head> <!-- 完结标记 -->
<body> <!-- 网页主体 -->
</body> <!-- 完结标记 -->
</html> <!-- 完结标记 -->
>_<" 返回值+带参数的JS函数。
<html> <!-- HTML开始标记 -->
<head> <!-- 头标记 -->
<title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 -->
<script language="JavaScript"> <!-- 使用JavaScript语言 -->
function fun(){ // 定义函数
var arr = new Array(3); // 创建一个包含3个元素的数组
for(i=0;i<arr.length;i++){ // 循环操作数组
arr[i] = i ; // 为每一个元素赋值
}
var str = "数组的内容：" ; // 定义返回值
for(i=0;i<arr.length;i++){ // 循环输出数组
str += arr[i] + "、" ; // 修改返回内容
}
return str ; // 返回结果
}
alert(fun()) ;
</script>
</head> <!-- 完结标记 -->
<body> <!-- 网页主体 -->
</body> <!-- 完结标记 -->
</html> <!-- 完结标记 -->
数组-动态初始化
<html> <!-- HTML开始标记 -->
<head> <!-- 头标记 -->
<title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 -->
<script language="JavaScript"> <!-- 使用JavaScript语言 -->
function fun(){ // 定义函数
// 静态初始化数组，里面的每一个元素都是字符串类型
var arr = new Array("LiTao","beautifulzzzz","ZJUT");
var str = "数组的内容：" ; // 定义返回值
for(i=0;i<arr.length;i++){ // 循环输出数组
str += arr[i] + "、" ; // 修改返回内容
}
return str ; // 返回结果
}
alert(fun()) ;
</script>
</head> <!-- 完结标记 -->
<body> <!-- 网页主体 -->
</body> <!-- 完结标记 -->
</html> <!-- 完结标记 -->
数组-静态数组
>_<" 数组相关。
JavaScript的事件处理：
- 两个事件
- 点击事件
- 文本框交互
- 正则表达式
- 单选、复选按钮
- 下拉框
<html> <!-- HTML开始标记 -->
<head> <!-- 头标记 -->
<title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 -->
<script language="JavaScript"> <!-- 使用JavaScript语言 -->
function hello(){ // 定义函数
alert("欢迎您的光临！") ; // 打印欢迎信息
}
function byebye(){ // 定义函数
alert("您要走了？下次别来了！") ;
}
</script>
</head> <!-- 完结标记 -->
<body> <!-- 网页主体 -->
<body onLoad="hello()" onUnLoad="byebye()"> <!-- 网页主体 -->
</body> <!-- 完结标记 -->
</html> <!-- 完结标记 -->
>_<" 本程序在<body>元素中增加了一下两个事件：
- onLoad:表示网页加载时要触发的事件，一旦触发事件后就调用hello函数
- onUnLoad:表示关闭页面时要触发的事件，一旦触发事件后就调用byebye函数
<html> <!-- HTML开始标记 -->
<head> <!-- 头标记 -->
<title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 -->
<script language="JavaScript"> <!-- 使用JavaScript语言 -->
function fun(){ // 定义函数
alert("Hello World!!!") ; // 打印欢迎信息
}
</script>
</head> <!-- 完结标记 -->
<body> <!-- 网页主体 -->
<h3><a href="#" onClick="fun()">按我吧！</a></h3> <!-- 增加单击事件 -->
</body> <!-- 完结标记 -->
</html> <!-- 完结标记 -->
>_<" 本程序在超链接上增加一个点击事件，页面运行通过单击此超链接即可触发onLick事件。
<html> <!-- HTML开始标记 -->
<head> <!-- 头标记 -->
<title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 -->
<script language="JavaScript"> <!-- 使用JavaScript语言 -->
function show(){ // 定义函数
var value = document.myform.name.value ;// 取得输入的内容
alert("输入的内容是：" + value) ; // 打印欢迎信息
}
</script>
</head> <!-- 完结标记 -->
<body> <!-- 网页主体 -->
<form action="" method="post" name="myform"> <!-- 表单开始标记 -->
请输入内容：<input type="text" name="name"> <!-- 定义文本框 -->
<input type="button" value="显示" onclick="show()"><!-- 显示内容 -->
</form> <!-- 表单结束标记 -->
</body> <!-- 完结标记 -->
</html> <!-- 完结标记 -->
>_<" JS与文本框交互的例子，先使用form定义一个表单，在表单中定义一个普通的文本框和按钮，在按钮上增加一个点击事件。
<html> <!-- HTML开始标记 -->
<head> <!-- 头标记 -->
<title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 -->
<script language="JavaScript"> <!-- 使用JavaScript语言 -->
function validate(f){ // 定义函数，此时f就表示myform
var value = f.email.value ; // 取得输入的内容
if(!/^\w+@\w+.\w+$/.test(value)){ // 对输入内容验证
alert("EMAIL输入格式不正确！") ; // 弹出警告框
f.email.focus() ; // 让焦点定位到email框
f.email.select() ; // 选择全部内容
return false; // 返回false，表单不提交
}
return true ; // 返回true，表单提交
}
</script>
</head> <!-- 完结标记 -->
<body> <!-- 网页主体 -->
<!-- 表单开始标记，调用validate()函数进行验证，其中的this表示的是当前元素，即：此表单 -->
<form action="" method="post" name="myform" onSubmit="return validate(this)">
EMAIL：<input type="text" name="email"> <!-- 定义文本框 -->
<input type="submit" value="提交"> <!-- 显示内容 -->
</form> <!-- 表单结束标记 -->
</body> <!-- 完结标记 -->
</html> <!-- 完结标记 -->
>_<" 正则表达式~ /正则表达式/.test(验证的内容)
<html> <!-- HTML开始标记 -->
<head> <!-- 头标记 -->
<title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 -->
<script language="JavaScript"> <!-- 使用JavaScript语言 -->
function show(){ // 定义函数
var name = document.myform.name.value ;// 取得name的输入内容
alert("姓名：" + name) ;
var sex ; // 保存性别
if(document.myform.sex[0].checked){ // 如果第一个元素被选中
sex = document.myform.sex[0].value ;
}else{
sex = document.myform.sex[1].value ;
}
alert("性别：" + sex) ;
var inst = "" ; // 保存兴趣
for(i=0;i<document.myform.inst.length;i++){
if(document.myform.inst[i].checked){// 判断是否被选中
inst += document.myform.inst[i].value + "、" ;
}
}
alert("兴趣：" + inst) ;
}
</script>
</head> <!-- 完结标记 -->
<body> <!-- 完结标记 -->
<form action="" method="post" name="myform"> <!-- 表单开始标记 -->
姓名： <input type="text" name="name"><br>
性别： <input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女<br>
兴趣： <input type="checkbox" name="inst" value="唱歌">唱歌
<input type="checkbox" name="inst" value="游泳">游泳
<input type="checkbox" name="inst" value="跳舞">跳舞
<input type="checkbox" name="inst" value="编程" checked>编程
<input type="checkbox" name="inst" value="上网">上网<br>
<input type="button" value="显示" onClick="show()">
</form> <!-- 表单结束标记 -->
</body> <!-- 完结标记 -->
</html> <!-- 完结标记 -->
>_<" 获取单选、复选按钮的信息。
<html> <!-- HTML开始标记 -->
<head> <!-- 头标记 -->
<title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 -->
<script language="JavaScript"> <!-- 使用JavaScript语言 -->
function show(val){ // 定义函数
document.myform.result.value = val ;// 修改文本框的显示
}
</script>
</head> <!-- 完结标记 -->
<body> <!-- 网页主体 -->
<form action="" method="post" name="myform"> <!-- 表单开始标记 -->
部门： <select name="dept" onChange="show(this.value)">
<option value="技术部">技术部</option>
<option value="销售部">销售部</option>
<option value="财务部">财务部</option>
</select>
结果： <input type="text" name="result" value="">
</form> <!-- 表单结束标记 -->
</body> <!-- 完结标记 -->
</html> <!-- 完结标记 -->
>_<" 下拉框~
JavaScript的window对象的应用：
- window.open()
- window.confirm()
- window.location 重定向
- 设置父窗口
- 子窗口和父窗口之间交互信息
<html> <!-- HTML开始标记 -->
<head> <!-- 头标记 -->
<title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 -->
<script language="JavaScript"> <!-- 使用JavaScript语言 -->
function fun(thisurl){ // 定义函数
window.open(thisurl,"页面标题","width=470,height=150,scrollbars=yes,resizable=no");
}
</script>
</head> <!-- 完结标记 -->
<body> <!-- 网页主体 -->
<form action="" method="post" name="myform"> <!-- 表单开始标记 -->
网址： <SELECT name="url" onChange="fun(this.value)">
<OPTION value="script_eventform_01.htm">EVENT-01</OPTION>
<OPTION value="script_eventform_02.htm">EVENT-02</OPTION>
<OPTION value="script_eventform_03.htm">EVENT-03</OPTION>
</SELECT>
</form> <!-- 表单结束标记 -->
</body> <!-- 完结标记 -->
</html> <!-- 完结标记 -->
>_<" window.open()
<html> <!-- HTML开始标记 -->
<head> <!-- 头标记 -->
<title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 -->
<script language="JavaScript"> <!-- 使用JavaScript语言 -->
function fun(){ // 定义函数
if(window.confirm("确认删除？")){ // 判断
alert("您选择的“是”！") ; // 弹出警告框
}else{
alert("您选择的“否”！") ; // 弹出警告框
}
}
</script>
</head> <!-- 完结标记 -->
<body> <!-- 网页主体 -->
<a href="#" onClick="fun()">删除邮件</a> <!-- 超链接 -->
</body> <!-- 完结标记 -->
</html> <!-- 完结标记 -->
>_<" window.confirm()
<html> <!-- HTML开始标记 -->
<head> <!-- 头标记 -->
<title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 -->
<script language="JavaScript"> <!-- 使用JavaScript语言 -->
function fun(thisurl){ // 定义函数
window.location = thisurl ;// 跳转
}
</script>
</head> <!-- 完结标记 -->
<body> <!-- 网页主体 -->
网站：<select name="url" onChange="fun(this.value)">
<option value="#">==请选择要浏览的站点==</option>
<option value="http://www.cnblogs.com/zjutlitao/">我的主页</option>
<option value="http://www.baidu.com">百度</option> </select>
</body> <!-- 完结标记 -->
</html> <!-- 完结标记 -->
>_<" window.location 重定向
<html> <!-- HTML开始标记 -->
<head> <!-- 头标记 -->
<title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 -->
<script language="JavaScript"> <!-- 使用JavaScript语言 -->
function fun(thisurl){ // 定义函数
window.open(thisurl,"弹出页面","width=470,height=150,scrollbars=yes,resizable=no");
}
</script>
</head> <!-- 完结标记 -->
<body> <!-- 网页主体 -->
<input type="button" value="打开" onClick="fun('openerdemo.htm')">
</body> <!-- 完结标记 -->
</html> <!-- 完结标记 -->
<html> <!-- HTML开始标记 -->
<head> <!-- 头标记 -->
<title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 -->
<script language="JavaScript"> <!-- 使用JavaScript语言 -->
function closeWin(){ // 定义函数
window.close() ;
}
window.opener.location.reload() ;// 刷新父窗口页面
</script>
</head> <!-- 完结标记 -->
<body> <!-- 网页主体 -->
<h3><a href="#" onClick="closeWin()">关闭窗口</a></h3>
</body> <!-- 完结标记 -->
</html> <!-- 完结标记 -->
>_<" 设置父窗口
<html> <!-- HTML开始标记 -->
<head> <!-- 头标记 -->
<title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 -->
<script language="JavaScript"> <!-- 使用JavaScript语言 -->
function shownewpage(thisurl){ // 定义函数
window.open(thisurl,"弹出页面","width=200,height=60,scrollbars=yes,resizable=no");
}
</script>
</head> <!-- 完结标记 -->
<body> <!-- 网页主体 -->
<form name="parentform">
<input type="button" value="选择信息" onclick="shownewpage('openerdemo.htm');">
<br>选择的结果：<input type="text" name="result">
</form>
</body> <!-- 完结标记 -->
</html> <!-- 完结标记 -->
<html> <!-- HTML开始标记 -->
<head> <!-- 头标记 -->
<title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 -->
<script language="javascript">
function returnValue() {
var city = document.myform.city.value;
// 取得打开该页面的页面的document对象（script_windowdemo_05.htm中的document对象）
var doc = window.opener.document;
// 将取得的信息赋值给上一个页面上的result文本框
doc.parentform.result.value = city;
window.close() ; // 关闭当前窗口
}
</script>
</head> <!-- 完结标记 -->
<body> <!-- 网页主体 -->
<form name="myform">
选择： <select name="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
<option value="广州">广州</option>
<option value="天津">天津</option>
</select>
<input type="button" value="返回" onclick="returnValue();">
</form>
</body> <!-- 完结标记 -->
</html> <!-- 完结标记 -->
>_<" 子窗口和父窗口之间交互信息