[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>") ;                // 页面输出
hello.js
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>                <!-- 完结标记 -->

>_<" 子窗口和父窗口之间交互信息

 

posted @ 2014-10-07 19:02  beautifulzzzz  阅读(1338)  评论(0编辑  收藏  举报