[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>                <!-- 完结标记 -->

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

相关阅读:
Python语言简介以及特点
 计算机组成原理简述
 Python中的dict字典的用法
 Python3中IO文件操作的常见用法
 Python中的装饰器的使用及固定模式
 Python中的解决中文字符编码的问题
 Python中常见字符串去除空格的方法总结
 Python中print函数中中逗号和加号的区别
 当引用了Properties.Settings后,如果执行的时候,出现"配置系统无法初始化" 或者某某节点不正确
 修改IP的方法(C#)
原文地址：https://www.cnblogs.com/zjutlitao/p/4008936.html