首页 > 代码库 > [Java Web] 4\JavaScript 简单例子(高手略过)

[Java Web] 4\JavaScript 简单例子(高手略过)

2024-07-25 21:45:30   227人阅读

 

内容概览：

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

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

 

[Java Web] 4\JavaScript 简单例子(高手略过)


联系
我们