[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函数
- 数组相关
1 <html> <!-- HTML开始标记 --> 2 <head> <!-- 头标记 --> 3 <title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 --> 4 <script language="JavaScript"> <!-- 使用JavaScript语言 --> 5 alert("Hello World!!!") ; // 弹出一个警告框 6 alert("Hello Beautifulzzzz!!!") ; // 弹出一个警告框 7 </script> 8 </head> <!-- 完结标记 --> 9 <body> <!-- 网页主体 --> 10 </body> <!-- 完结标记 --> 11 </html> <!-- 完结标记 -->
>_<" 在<script>元素之中编写了两条JavaScript语句，弹出两个警告框。
1 <html> <!-- HTML开始标记 --> 2 <head> <!-- 头标记 --> 3 <title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 --> 4 <script language="JavaScript"> <!-- 使用JavaScript语言 --> 5 alert("Hello World!!!") ; // 弹出一个警告框 6 </script> 7 </head> <!-- 完结标记 --> 8 <body> <!-- 网页主体 --> 9 <script language="JavaScript"> 10 alert("Hello Beautifulzzzz!!!") ; // 弹出一个警告框 11 </script> 12 </body> <!-- 完结标记 --> 13 </html> <!-- 完结标记 -->
>_<" 在一个HTML中也可以定义多个<script>元素，执行时将采用顺序执行。
1 <html> <!-- HTML开始标记 --> 2 <head> <!-- 头标记 --> 3 <title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 --> 4 <script language="JavaScript"> <!-- 使用JavaScript语言 --> 5 document.write("<h1>Hello World!!!</h1>") ; // 页面输出 6 document.write("<h5>Hello Beautifulzzzz!!!</h5>") ; // 页面输出 7 </script> 8 </head> <!-- 完结标记 --> 9 <body> <!-- 网页主体 --> 10 </body> <!-- 完结标记 --> 11 </html> <!-- 完结标记 -->
>_<" 调用document.write()语句向一个页面输出内容。（使用该方法就如同在<body>元素中编写内容一样，可以直接进行显示）
1 document.write("<h1>Hello World!!!</h1>") ; // 页面输出 2 document.write("<h5>Hello Beautifulzzzz!!!</h5>") ; // 页面输出
1 <html> <!-- HTML开始标记 --> 2 <head> <!-- 头标记 --> 3 <title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 --> 4 <script language="JavaScript" src="hello.js"> <!-- 使用JavaScript语言 --> 5 </script> 6 </head> <!-- 完结标记 --> 7 <body> <!-- 网页主体 --> 8 </body> <!-- 完结标记 --> 9 </html> <!-- 完结标记 -->
>_<" 如果在一个HTML文件中定义太多JavaScript代码，则整个代码就会显得臃肿，那么就可以考虑将一些JavaScript代码定义成一个*.js文件，然后在需要的页面中导入即可。
1 <html> <!-- HTML开始标记 --> 2 <head> <!-- 头标记 --> 3 <title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 --> 4 <script language="JavaScript"> <!-- 使用JavaScript语言 --> 5 var num = 30 ; // 定义数字 6 var info = "http://www.cnblogs.com/zjutlitao/" ; // 定义字符串 7 alert("数字：" + num + "；字符串：" + info) ; 8 </script> 9 </head> <!-- 完结标记 --> 10 <body> <!-- 网页主体 --> 11 </body> <!-- 完结标记 --> 12 </html> <!-- 完结标记 -->
>_<" 在JavaScript定义变量直接利用var定义变量即可，但是其类型会根据所赋的具体值来决定，由于都是采用var声明变量，所以也可以省略，但是在某些低版本的浏览器上可能不支持。
1 <html> <!-- HTML开始标记 --> 2 <head> <!-- 头标记 --> 3 <title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 --> 4 <script language="JavaScript"> <!-- 使用JavaScript语言 --> 5 str = "Beautifulzzzz" ; // 定义字符串 6 if(str == "Beautifulzzzz"){ // 直接判断 7 alert("内容符合判断！") ; // 弹出警告框 8 }else{ 9 alert("内容不符合判断！") ; // 弹出警告框 10 } 11 </script> 12 </head> <!-- 完结标记 --> 13 <body> <!-- 网页主体 --> 14 </body> <!-- 完结标记 --> 15 </html> <!-- 完结标记 -->
>_<" 条件语句。
1 <html> <!-- HTML开始标记 --> 2 <head> <!-- 头标记 --> 3 <title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 --> 4 <script language="JavaScript"> <!-- 使用JavaScript语言 --> 5 var rows = 5 ; // 定义输出行数 6 var cols = 10 ; // 定义输出列数 7 document.write("<table border=\"1\">") ;// 输出表格 8 for(i=0 ; i<rows ; i++){ // 循环输出 9 document.write("<tr>") ; 10 for(j=0; j<cols; j++){ // 循环输出 11 document.write("<td>" + i*j + "</td>") ; 12 } 13 document.write("</tr>") ; 14 } 15 document.write("</table>") ; 16 </script> 17 </head> <!-- 完结标记 --> 18 <body> <!-- 网页主体 --> 19 </body> <!-- 完结标记 --> 20 </html> <!-- 完结标记 -->
>_<" 循环语句。
1 <html> <!-- HTML开始标记 --> 2 <head> <!-- 头标记 --> 3 <title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 --> 4 <script language="JavaScript"> <!-- 使用JavaScript语言 --> 5 function add(i, j, k){ // 定义了三个参数的函数 6 return i + j + k ; // 返回数据 7 } 8 alert("数字相加结果：" + add(10,20,30)) ;// 调用函数 9 </script> 10 </head> <!-- 完结标记 --> 11 <body> <!-- 网页主体 --> 12 </body> <!-- 完结标记 --> 13 </html> <!-- 完结标记 -->
>_<" 返回值+带参数的JS函数。
1 <html> <!-- HTML开始标记 --> 2 <head> <!-- 头标记 --> 3 <title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 --> 4 <script language="JavaScript"> <!-- 使用JavaScript语言 --> 5 function fun(){ // 定义函数 6 var arr = new Array(3); // 创建一个包含3个元素的数组 7 for(i=0;i<arr.length;i++){ // 循环操作数组 8 arr[i] = i ; // 为每一个元素赋值 9 } 10 var str = "数组的内容：" ; // 定义返回值 11 for(i=0;i<arr.length;i++){ // 循环输出数组 12 str += arr[i] + "、" ; // 修改返回内容 13 } 14 return str ; // 返回结果 15 } 16 alert(fun()) ; 17 </script> 18 </head> <!-- 完结标记 --> 19 <body> <!-- 网页主体 --> 20 </body> <!-- 完结标记 --> 21 </html> <!-- 完结标记 -->
1 <html> <!-- HTML开始标记 --> 2 <head> <!-- 头标记 --> 3 <title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 --> 4 <script language="JavaScript"> <!-- 使用JavaScript语言 --> 5 function fun(){ // 定义函数 6 // 静态初始化数组，里面的每一个元素都是字符串类型 7 var arr = new Array("LiTao","beautifulzzzz","ZJUT"); 8 var str = "数组的内容：" ; // 定义返回值 9 for(i=0;i<arr.length;i++){ // 循环输出数组 10 str += arr[i] + "、" ; // 修改返回内容 11 } 12 return str ; // 返回结果 13 } 14 alert(fun()) ; 15 </script> 16 </head> <!-- 完结标记 --> 17 <body> <!-- 网页主体 --> 18 </body> <!-- 完结标记 --> 19 </html> <!-- 完结标记 -->
>_<" 数组相关。
JavaScript的事件处理：
- 两个事件
- 点击事件
- 文本框交互
- 正则表达式
- 单选、复选按钮
- 下拉框
1 <html> <!-- HTML开始标记 --> 2 <head> <!-- 头标记 --> 3 <title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 --> 4 <script language="JavaScript"> <!-- 使用JavaScript语言 --> 5 function hello(){ // 定义函数 6 alert("欢迎您的光临！") ; // 打印欢迎信息 7 } 8 function byebye(){ // 定义函数 9 alert("您要走了？下次别来了！") ; 10 } 11 </script> 12 </head> <!-- 完结标记 --> 13 <body> <!-- 网页主体 --> 14 <body onLoad="hello()" onUnLoad="byebye()"> <!-- 网页主体 --> 15 </body> <!-- 完结标记 --> 16 </html> <!-- 完结标记 -->
>_<" 本程序在<body>元素中增加了一下两个事件：
- onLoad:表示网页加载时要触发的事件，一旦触发事件后就调用hello函数
- onUnLoad:表示关闭页面时要触发的事件，一旦触发事件后就调用byebye函数
1 <html> <!-- HTML开始标记 --> 2 <head> <!-- 头标记 --> 3 <title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 --> 4 <script language="JavaScript"> <!-- 使用JavaScript语言 --> 5 function fun(){ // 定义函数 6 alert("Hello World!!!") ; // 打印欢迎信息 7 } 8 </script> 9 </head> <!-- 完结标记 --> 10 <body> <!-- 网页主体 --> 11 <h3><a href="#" onClick="fun()">按我吧！</a></h3> <!-- 增加单击事件 --> 12 </body> <!-- 完结标记 --> 13 </html> <!-- 完结标记 -->
>_<" 本程序在超链接上增加一个点击事件，页面运行通过单击此超链接即可触发onLick事件。
1 <html> <!-- HTML开始标记 --> 2 <head> <!-- 头标记 --> 3 <title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 --> 4 <script language="JavaScript"> <!-- 使用JavaScript语言 --> 5 function show(){ // 定义函数 6 var value = document.myform.name.value ;// 取得输入的内容 7 alert("输入的内容是：" + value) ; // 打印欢迎信息 8 } 9 </script> 10 </head> <!-- 完结标记 --> 11 <body> <!-- 网页主体 --> 12 <form action="" method="post" name="myform"> <!-- 表单开始标记 --> 13 请输入内容：<input type="text" name="name"> <!-- 定义文本框 --> 14 <input type="button" value="显示" onclick="show()"><!-- 显示内容 --> 15 </form> <!-- 表单结束标记 --> 16 </body> <!-- 完结标记 --> 17 </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(验证的内容)
1 <html> <!-- HTML开始标记 --> 2 <head> <!-- 头标记 --> 3 <title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 --> 4 <script language="JavaScript"> <!-- 使用JavaScript语言 --> 5 function show(){ // 定义函数 6 var name = document.myform.name.value ;// 取得name的输入内容 7 alert("姓名：" + name) ; 8 var sex ; // 保存性别 9 if(document.myform.sex[0].checked){ // 如果第一个元素被选中 10 sex = document.myform.sex[0].value ; 11 }else{ 12 sex = document.myform.sex[1].value ; 13 } 14 alert("性别：" + sex) ; 15 var inst = "" ; // 保存兴趣 16 for(i=0;i<document.myform.inst.length;i++){ 17 if(document.myform.inst[i].checked){// 判断是否被选中 18 inst += document.myform.inst[i].value + "、" ; 19 } 20 } 21 alert("兴趣：" + inst) ; 22 } 23 </script> 24 </head> <!-- 完结标记 --> 25 <body> <!-- 完结标记 --> 26 <form action="" method="post" name="myform"> <!-- 表单开始标记 --> 27 姓名： <input type="text" name="name"><br> 28 性别： <input type="radio" name="sex" value="男" checked>男 29 <input type="radio" name="sex" value="女">女<br> 30 兴趣： <input type="checkbox" name="inst" value="唱歌">唱歌 31 <input type="checkbox" name="inst" value="游泳">游泳 32 <input type="checkbox" name="inst" value="跳舞">跳舞 33 <input type="checkbox" name="inst" value="编程" checked>编程 34 <input type="checkbox" name="inst" value="上网">上网<br> 35 <input type="button" value="显示" onClick="show()"> 36 </form> <!-- 表单结束标记 --> 37 </body> <!-- 完结标记 --> 38 </html> <!-- 完结标记 -->
>_<" 获取单选、复选按钮的信息。
1 <html> <!-- HTML开始标记 --> 2 <head> <!-- 头标记 --> 3 <title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 --> 4 <script language="JavaScript"> <!-- 使用JavaScript语言 --> 5 function show(val){ // 定义函数 6 document.myform.result.value = val ;// 修改文本框的显示 7 } 8 </script> 9 </head> <!-- 完结标记 --> 10 <body> <!-- 网页主体 --> 11 <form action="" method="post" name="myform"> <!-- 表单开始标记 --> 12 部门： <select name="dept" onChange="show(this.value)"> 13 <option value="技术部">技术部</option> 14 <option value="销售部">销售部</option> 15 <option value="财务部">财务部</option> 16 </select> 17 结果： <input type="text" name="result" value=""> 18 </form> <!-- 表单结束标记 --> 19 </body> <!-- 完结标记 --> 20 </html> <!-- 完结标记 -->
>_<" 下拉框~
JavaScript的window对象的应用：
- window.open()
- window.confirm()
- window.location 重定向
- 设置父窗口
- 子窗口和父窗口之间交互信息
1 <html> <!-- HTML开始标记 --> 2 <head> <!-- 头标记 --> 3 <title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 --> 4 <script language="JavaScript"> <!-- 使用JavaScript语言 --> 5 function fun(thisurl){ // 定义函数 6 window.open(thisurl,"页面标题","width=470,height=150,scrollbars=yes,resizable=no"); 7 } 8 </script> 9 </head> <!-- 完结标记 --> 10 <body> <!-- 网页主体 --> 11 <form action="" method="post" name="myform"> <!-- 表单开始标记 --> 12 网址： <SELECT name="url" onChange="fun(this.value)"> 13 <OPTION value="script_eventform_01.htm">EVENT-01</OPTION> 14 <OPTION value="script_eventform_02.htm">EVENT-02</OPTION> 15 <OPTION value="script_eventform_03.htm">EVENT-03</OPTION> 16 </SELECT> 17 </form> <!-- 表单结束标记 --> 18 </body> <!-- 完结标记 --> 19 </html> <!-- 完结标记 -->
>_<" window.open()
1 <html> <!-- HTML开始标记 --> 2 <head> <!-- 头标记 --> 3 <title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 --> 4 <script language="JavaScript"> <!-- 使用JavaScript语言 --> 5 function fun(){ // 定义函数 6 if(window.confirm("确认删除？")){ // 判断 7 alert("您选择的“是”！") ; // 弹出警告框 8 }else{ 9 alert("您选择的“否”！") ; // 弹出警告框 10 } 11 } 12 </script> 13 </head> <!-- 完结标记 --> 14 <body> <!-- 网页主体 --> 15 <a href="#" onClick="fun()">删除邮件</a> <!-- 超链接 --> 16 </body> <!-- 完结标记 --> 17 </html> <!-- 完结标记 -->
>_<" window.confirm()
1 <html> <!-- HTML开始标记 --> 2 <head> <!-- 头标记 --> 3 <title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 --> 4 <script language="JavaScript"> <!-- 使用JavaScript语言 --> 5 function fun(thisurl){ // 定义函数 6 window.location = thisurl ;// 跳转 7 } 8 </script> 9 </head> <!-- 完结标记 --> 10 <body> <!-- 网页主体 --> 11 网站：<select name="url" onChange="fun(this.value)"> 12 <option value="#">==请选择要浏览的站点==</option> 13 <option value="http://www.cnblogs.com/zjutlitao/">我的主页</option> 14 <option value="http://www.baidu.com">百度</option> </select> 15 </body> <!-- 完结标记 --> 16 </html> <!-- 完结标记 -->
>_<" window.location 重定向
1 <html> <!-- HTML开始标记 --> 2 <head> <!-- 头标记 --> 3 <title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 --> 4 <script language="JavaScript"> <!-- 使用JavaScript语言 --> 5 function fun(thisurl){ // 定义函数 6 window.open(thisurl,"弹出页面","width=470,height=150,scrollbars=yes,resizable=no"); 7 } 8 </script> 9 </head> <!-- 完结标记 --> 10 <body> <!-- 网页主体 --> 11 <input type="button" value="打开" onClick="fun('openerdemo.htm')"> 12 </body> <!-- 完结标记 --> 13 </html> <!-- 完结标记 -->
1 <html> <!-- HTML开始标记 --> 2 <head> <!-- 头标记 --> 3 <title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 --> 4 <script language="JavaScript"> <!-- 使用JavaScript语言 --> 5 function closeWin(){ // 定义函数 6 window.close() ; 7 } 8 window.opener.location.reload() ;// 刷新父窗口页面 9 </script> 10 </head> <!-- 完结标记 --> 11 <body> <!-- 网页主体 --> 12 <h3><a href="#" onClick="closeWin()">关闭窗口</a></h3> 13 </body> <!-- 完结标记 --> 14 </html> <!-- 完结标记 -->
>_<" 设置父窗口
1 <html> <!-- HTML开始标记 --> 2 <head> <!-- 头标记 --> 3 <title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 --> 4 <script language="JavaScript"> <!-- 使用JavaScript语言 --> 5 function shownewpage(thisurl){ // 定义函数 6 window.open(thisurl,"弹出页面","width=200,height=60,scrollbars=yes,resizable=no"); 7 } 8 </script> 9 </head> <!-- 完结标记 --> 10 <body> <!-- 网页主体 --> 11 <form name="parentform"> 12 <input type="button" value="选择信息" onclick="shownewpage('openerdemo.htm');"> 13 <br>选择的结果：<input type="text" name="result"> 14 </form> 15 </body> <!-- 完结标记 --> 16 </html> <!-- 完结标记 -->
1 <html> <!-- HTML开始标记 --> 2 <head> <!-- 头标记 --> 3 <title>http://www.cnblogs.com/zjutlitao/</title><!-- 文档标题信息 --> 4 <script language="javascript"> 5 function returnValue() { 6 var city = document.myform.city.value; 7 // 取得打开该页面的页面的document对象（script_windowdemo_05.htm中的document对象） 8 var doc = window.opener.document; 9 // 将取得的信息赋值给上一个页面上的result文本框 10 doc.parentform.result.value = city; 11 window.close() ; // 关闭当前窗口 12 } 13 </script> 14 </head> <!-- 完结标记 --> 15 <body> <!-- 网页主体 --> 16 <form name="myform"> 17 选择： <select name="city"> 18 <option value="北京">北京</option> 19 <option value="上海">上海</option> 20 <option value="深圳">深圳</option> 21 <option value="广州">广州</option> 22 <option value="天津">天津</option> 23 </select> 24 <input type="button" value="返回" onclick="returnValue();"> 25 </form> 26 </body> <!-- 完结标记 --> 27 </html> <!-- 完结标记 -->
>_<" 子窗口和父窗口之间交互信息