[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                         
        2                         
        3     http://www.cnblogs.com/zjutlitao/
        4      8                         
        9                         
       10                         
       11

>_<" 在<script>元素之中编写了两条JavaScript语句，弹出两个警告框。

1                         
        2                         
        3     http://www.cnblogs.com/zjutlitao/
        4      7                         
        8                         
        9     12                         
       13

>_<" 在一个HTML中也可以定义多个<script>元素，执行时将采用顺序执行。

1                         
        2                         
        3     http://www.cnblogs.com/zjutlitao/
        4      8                         
        9                         
       10                         
       11

>_<" 调用document.write()语句向一个页面输出内容。（使用该方法就如同在<body>元素中编写内容一样，可以直接进行显示）

hello.js

1                         
       2                         
       3     http://www.cnblogs.com/zjutlitao/
       4     6                         
       7                         
       8                         
       9

>_<" 如果在一个HTML文件中定义太多JavaScript代码，则整个代码就会显得臃肿，那么就可以考虑将一些JavaScript代码定义成一个*.js文件，然后在需要的页面中导入即可。

1                         
        2                         
        3     http://www.cnblogs.com/zjutlitao/
        4      9                         
       10                         
       11                         
       12

>_<" 在JavaScript定义变量直接利用var定义变量即可，但是其类型会根据所赋的具体值来决定，由于都是采用var声明变量，所以也可以省略，但是在某些低版本的浏览器上可能不支持。

1                         
        2                         
        3     http://www.cnblogs.com/zjutlitao/
        4     12                         
       13                         
       14                         
       15

>_<" 条件语句。

1                         
        2                         
        3     http://www.cnblogs.com/zjutlitao/
        4     17                         
       18                         
       19                         
       20

>_<" 循环语句。

1                         
        2                         
        3     http://www.cnblogs.com/zjutlitao/
        4     10                         
       11                         
       12                         
       13

>_<" 返回值+带参数的JS函数。

数组-动态初始化

数组-静态数组

>_<" 数组相关。

JavaScript的事件处理：

两个事件

点击事件

文本框交互

正则表达式

单选、复选按钮

下拉框

1                         
        2                         
        3     http://www.cnblogs.com/zjutlitao/
        4     12                         
       13                         
       14         
       15                         
       16

>_<" 本程序在<body>元素中增加了一下两个事件：

　　onLoad:表示网页加载时要触发的事件，一旦触发事件后就调用hello函数

　　onUnLoad:表示关闭页面时要触发的事件，一旦触发事件后就调用byebye函数

1                         
        2                         
        3     http://www.cnblogs.com/zjutlitao/
        4      9                         
       10                         
       11     按我吧！
        
       12                         
       13

>_<" 本程序在超链接上增加一个点击事件，页面运行通过单击此超链接即可触发onLick事件。

1                     
        2                     
        3     http://www.cnblogs.com/zjutlitao/
        4     10                     
       11                     
       12 
           
        13 请输入内容：
            
        14 
        
        15 
       
                    
       16                     
       17

>_<" JS与文本框交互的例子，先使用form定义一个表单，在表单中定义一个普通的文本框和按钮，在按钮上增加一个点击事件。

                    
                           
           http://www.cnblogs.com/zjutlitao/
                                       
                           
       
       
       
            EMAIL：

>_<" 正则表达式~ /正则表达式/.test(验证的内容)

1                     
        2                     
        3     http://www.cnblogs.com/zjutlitao/
        4     24                     
       25             
       26 
               
        27     姓名：    
        
        
28     性别：    
        男29             
        女
        
30     兴趣：    
        唱歌31             
        游泳32             
        跳舞33             
        编程34             
        上网
        
35     
        36 
       
                    
       37                     
       38

>_<" 获取单选、复选按钮的信息。

1                     
        2                     
        3     http://www.cnblogs.com/zjutlitao/
        4          9                     
       10                                                     
       11 
               
        12     部门：    
        17     结果：    
        18 
       
                    
       19                     
       20

>_<" 下拉框~

JavaScript的window对象的应用：

window.open()

window.confirm()

window.location 重定向

设置父窗口

子窗口和父窗口之间交互信息

1                     
        2                     
        3     http://www.cnblogs.com/zjutlitao/
        4          9                         
       10                         
       11 
               
        12     网址：    
        17 
       
                        
       18                         
       19

>_<" window.open()

1                     
        2                     
        3     http://www.cnblogs.com/zjutlitao/
        4     13                         
       14                         
       15 删除邮件            
       16                         
       17

>_<" window.confirm()

1                     
        2                     
        3     http://www.cnblogs.com/zjutlitao/
        4      9                     
       10                     
       11 网站：15                     
       16

>_<" window.location 重定向

1                     
        2                     
        3     http://www.cnblogs.com/zjutlitao/
        4      9                     
       10                     
       11 12                     
       13

1                     
        2                     
        3     http://www.cnblogs.com/zjutlitao/
        4     10                     
       11                     
       12 关闭窗口
13                     
       14

>_<" 设置父窗口

1                     
        2                     
        3     http://www.cnblogs.com/zjutlitao/
        4      9                 
       10                     
       11 
       
        12     
         13 
        
选择的结果：
        14 
       
15                 
       16

1                     
        2                     
        3     http://www.cnblogs.com/zjutlitao/
        4     14                 
       15                 
       16 
       
        17     选择：    
        24     
        25 
       
26                 
       27

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

本文转自beautifulzzzz博客园博客，原文链接：http://www.cnblogs.com/zjutlitao/p/4008936.html，如需转载请自行联系原作者