02 00JavaScript编程入门

最新推荐文章于 2021-09-16 14:11:57 发布

布布灵

最新推荐文章于 2021-09-16 14:11:57 发布

阅读量151

点赞数

分类专栏： JavaWeb 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43762330/article/details/106362067

版权

JavaWeb 专栏收录该内容

57 篇文章 0 订阅

订阅专栏

1 JavaScript基础语法

1.1 简介

JavaScript是一种基于对象的编程语言，Java属于面向对象，在面向对象的编程语言之中，强调的是类的设计、对象的调用，但是如果是基于对象指的是所有的对象已经由浏览器提供好了。用户直接使用就可以了。

JavaScript和Java没有本质的关系，JavaScript是由网景公司开发的，而Java最早是由SUN开发的。JavaScript的前身称为LiveScript，后来由于Java在浏览器技术端的发展（Applet程序），那么后来网景公司将其更名为JavaScript，而最新的叫法称为EcmaScript。

可是后来的发展已经超过了JavaScript的预期（甚至连开发者本人也没想到JavaScript可以这么强大），他开始后期的模拟面向对象编程，可以进行服务器端编程（Node.JS）。

但是幸运的是：JavaScript的基本语法和Java是很相似的，但是又幸运的是，从道理上来讲JavaScript应该属于页面美工的工作，但是现在基本上都属于程序员了。

JavaScript是嵌入在HTML语法之中的编程语言，可以使用<script>标记进行标注，这样就可以实现一系列的动态页面的操作效果（前台页面）。

<html>
    <head>
        <title>JavaScript</title>
        <script type="text/javascript">
        	alert('Hello World!');
        </script>
    </head>
    <body>
    </body>
</html>

此时就已经实现了一个基础的JavaScript的调用，但是对于此处的标记：本次使用的是type="text/javascript"，表示当前应用的为JavaScript，但也可以更换为VBScript。

使用了JavaScript的确可以在前台实现一些列华丽的操作，但是有一个问题，在实际的工作里面JavaScript的代码时非常多的。如果将所有的JavaScript程序定义在了一个HTML页面里面，那么会对于整个的页面代码非常的难以维护。

那么为了解决这样的问题，往往会单独建立一个*.js的文件，而后在需要时候导入JavaScript内容。
范例：在js目录下demo.js文件

alert('Hello World!');

随后在需要的地方使用src属性导入此文件。

<html>
    <head>
        <title>JavaScript</title>
        <script type="text/javascript" src="js/demo.js"></script>
    </head>
    <body>
    </body>
</html>

所有的动态的操作效果都将利用JavaScript完成。

1.2 输出

JavaScript的语法和Java语法是非常相似的。除了一些关键字不同之外几乎没有什么区别，而且JavaScript的使用也更加的容易，例如：在Java程序里卖弄如果要输出使用：System.out.println()语句，而在JavaScript里面也可以使用document.write()向页面输出HTML代码。
范例：JavaScript的输出

<html>
    <head>
        <title>JavaScript</title>
        <script type="text/javascript">
            document.write('<h1>Hello World!</h1>');
            document.write('<h1>Hello World!</h1>');
            document.write('<h1>Hello World!</h1>');
        </script>
    </head>
    <body>

    </body>
</html>

通过以上代码可以发现，虽然JavaScript定义在HTML页面里面，但是却可以控制HTML代码的输出。但是document.write()函数输出的HTML代码是不可控制元素顺序的，所以我们在开发之中是不会利用此类的函数实现内容输出的。之所以使用Chrome浏览器，主要是因为它有后台的代码调试功能，而且从另一方面强调的是，这个输出看起来很方便，使用console.log()实现信息的后台输出。

<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <script type="text/javascript">
            console.log('这是后台输出');
        </script>
    </head>
    <body>
        <div>Hello, World!</div>
    </body>
</html>

1.3 定义变量

程序的基本组成就是数据类型以及变量，那么在JavaScript里面也可以定义变量，JavaScript中变量的定义格式没有这么严格的要求，所有的变量只需要一个var关键字定义即可，至于说变量的具体类型是根据为其夫hi的结果来确定的。

<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <script type="text/javascript">
            var num = 10 ;  //定义整型变量
            // console.log(typeof num);
            document.write("<h1>" + (typeof num) + "</h1>");
        </script>
    </head>
    <body>
        <div>Hello, World!</div>
    </body>
</html>

那么如果现在说不赋值给变量，那么变量的类型就属于未知的状态。其对应的类型就是undefined，可以利用if语句进行判断。

<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <script type="text/javascript">
            var num ;  //定义变量
            // console.log(typeof num);
            document.write("<h1>" + (typeof num) + "</h1>");
            if(num == undefined){
                alert("此变量还没有设置类型");
            }
        </script>
    </head>
    <body>
        <div>Hello, World!</div>
    </body>
</html>

从Java开发而言，所有的if语句必须跟上完整的布尔表达式才可以正常执行，但是在JavaScript里面，发现可以直接在if语句之中使用变量直接判断，如果此变量属于undefined表示false、否则表示true。

if(!num){ //此变量类型不确定
	alert("此变量还没有设置类型");
}else{
	document.write(typeof num);
	alert("此变量有内容");
}

在JavaScript里面使用'或"表示的都是字符串，而且字符串的操作函数与Java是类似的。

<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <script type="text/javascript">
            var num = "Hello world ni hao";  //定义变量
            var result = num.split(" ");
            document.write("<h1>" + (typeof result) + "</h1>");
            for( var i = 0; i < result.length; i++ ){
                document.write("<h1>" + result[i] + "</h1>");
            }
            
        </script>
    </head>
    <body>
        <div>Hello, World!</div>
    </body>
</html>

JavaScript没有像Java那样操作很复杂，它的操作还是很能够考虑用户的直接感受的。

在Java里面经常讨论一个问题，字符串的比较有两种方式：==和equals()，JavaScript没有这么复杂，只提供了==这一种操作。

<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <script type="text/javascript">
           var stra = 'hello';
           var strb = "hello";
           alert(stra == strb);
        </script>
    </head>
    <body>
        <div>Hello, World!</div>
    </body>
</html>

在Java里面所使用的各种String类的操作方法，几乎都可以在JavaScript里面更简单的操作。
范例：使用JavaScript输出乘法口诀（使用表格控制）。

<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <script type="text/javascript">
            document.write("<table border='1'>");
            for(var i = 1; i <= 9; i++){
                document.write("<tr>");
                for(var j = 1; j <= i; j++){
                document.write("<td>" + i + " * " + j + " = " + (i * j) + "</td>");
                }
                for(var j = 1; j <= 9 - i; j++){
                document.write("<td>&nbsp;</td>");
                }
               document.write("</tr>");
            }
           document.write("</table>");
        </script>
    </head>
    <body>
        <div>Hello, World!</div>
    </body>
</html>

在使用JavaScript操作的过程之中，一定要注意生成的HTML代码的完整性。

在JavaScript之中支持的while循环、switch等操作与Java的结构很类似。

在JavaScript里面数组本身是一个对象的形式出现的，所以数组的创建需要使用关键字new完成。
范例：定义数组

<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <script type="text/javascript">
            var result = new Array();
            result[0] = "hello";
            result[1] = 100;
            result[2] = true;
            for( var i = 0; i < result.length ; i++ ){
                document.write("<h1>" + result[i] + (typeof result[i]) + "</h1>");
            }
        </script>
    </head>
    <body>
        <div>Hello, World!</div>
    </body>
</html>

本操作没有任何的严格之处。但是也不得否认它有一个最大的好处在于，是没有长度限制的，也就是说，JavaScript天生提供的就是动态数组。

以上的数组属于动态初始化，也可以进行静态初始化。

<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <script type="text/javascript">
            var result = new Array("hello", "world", "nihao");
            for( var i = 0; i < result.length ; i++ ){
                document.write("<h1>" + result[i] + "-->" + (typeof result[i]) + "</h1>");
            }
        </script>
    </head>
    <body>
        <div>Hello, World!</div>
    </body>
</html>

从数组的本质上来讲，虽然和Java类似，但是要比Java的数组功能强大，只不过很少会出现这种让你直接定义数组的操作。

实际上为了方便开发，在定义JavaScript变量的时候也可以不使用var进行定义，这样定义的变量从JavaScript的语法上来讲属于全局变量（几乎没用）。

1.4 定义函数

在Java中如果要定义一个方法格式如下：

[public|protected|private] [static] [final] [synchronized] 返回值类型 方法名称(参数列表 | 可变参数) [异常]{
	[return [返回值];]
}

JavaScript中定义函数的操作语法很容易：

function 函数名称(参数){ //此处不需要声明返回值类型，如果有需要直接写return
	[return [返回值];]
}

范例：定义函数

<script type="text/javascript">
	function myfun(){
		return 'hello, world!';
	}
	alert(myfun());
</script>

范例：实现加法操作

<script type="text/javascript">
   function myfun(x, y){
       return x + y;
   }
   alert(myfun(10, 20));
</script>

从Java的学习之后应该知道，方法里面定义多少个参数，那么就需要传递多少个，可是JavaScript没有这样的限制。

<script type="text/javascript">
    function myfun(x, y){
        return x + y;
    }
    alert(myfun(10, 20, 30, 40));
</script>

所以为了方便用户的操作，提供有一个功能：函数名称.arguments表示取得函数的参数的内容，返回的是一个数组，数组可以使用length判断长度。

<script type="text/javascript">
    function myfun(x, y){
        var args = myfun.arguments;
        switch(args.length){
            case 0:{
                return 0;
            }
            case 1:{
                return x;
            }
            case 2:{
                return x + y;
            }
            default:{
                return 'What fuck do you input!!!'
            }
        }
        return x + y;
    }
    alert(myfun());
 </script>

在以后编写JavaScript的时候还是强烈建议要求语法严格，函数里面定义多少格参数，那么调用的时候就传递多少个参数，不要有变化。

JavaScript原本属于基于对象编程语言，但是后期出现了一些问题，有些人认为面向对象的编程是非常重要的，所以也希望JavaScript中支持面向对象的编程，但是JavaScript天生不是面向对象编程，所以就利用函数来模拟面向对象编程。
范例：观察类与对象的定义

class Book{
   getInfo(){
        return 'This is a book!';
    }
}
var book = new Book();
alert(book.getInfo());

//***********************************************
<script type="text/javascript">
  function Book(){

   }
   //prototype属于对原生的操作拓展
   Book.prototype.getInfo = function(){
       return 'This is a Book!';
   }
   var  book = new Book(); //构造函数
   alert(book.getInfo());
</script>

范例：类中定义属性

<script type="text/javascript">
   class Book{
       constructor(name, price){
           this.name = name;
           this.price = price;
       }
       getInfo(){
           return 'Name: ' + this.name + ', Price: ' + this.price;
       }
   }
   var book = new Book('Java', 45.5);
   alert(book.getInfo());
</script>

但是在整个面向对象里面有一点特别需要引起注意。

<script type="text/javascript">
    var myTitle;
    var myPrice
   function Book(title, price){ //定义一个类
       myTitle = title;
       myPrice = price;
       function getInfo(){
           return 'Title: ' + myTitle + ', Price: ' + myPrice;
       }
       return getInfo; //返回的是一个函数
   }
   //book就表示接收了Book类返回的函数
   var  book = new Book('Java', 45.3); //构造函数
   alert(book());  //函数引用
</script>

对于以上出现的面向对象的概念，只是一些了解就行了，现在使用的意义不大。

2 JavaScript事件处理

事件处理是整个JavaScript核心操作

2.1 基础事件

在页面上任何的操作都可能被称为事件源，而对每一个事件就可以进行自定义的处理方式。例如，页面加载，或者是鼠标移动，或者是键盘按下等等都可以称它为事件源。

所有的事件源并不需要去过多的记住。所有的事件在JavaScript里面都是以onXxx的形式命名，例如，观察两个事件（这两个事件只能够在<body>元素里面进行处理）：
（1）页面加载事件：onload；
（2）页面的卸载事件：onunload；
范例：观察事件

<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <script type="text/javascript">
            function startHandle(){
                alert('Welcome!!!');
            }

            function endHandle(){
                alert('Bye-Bye!!!');
            }
        </script>
    </head>
    <body onload="startHandle();" onunload="endhandle()">
        
    </body>
</html>

//***********************************

<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <script type="text/javascript">
            function startHandle(){
                alert('Welcome!!!');
            }

            function endHandle(){
                alert('Bye-Bye!!!');
            }

            window.onload = startHandle();
        </script>
    </head>
    <body onunload="endHandle()">
        <h1>heelo</h1>
    </body>
</html>

在事件处理之中还包含有鼠标的操作事件：
（1）onmousedown：鼠标按下时触发；
（2）onmouseup：鼠标按下松开时触发；
（3）onmousemove：鼠标移动时触发；
（4）onmouseover：鼠标进入时触发；
（5）onmouseout：鼠标离开时触发；
范例：在按钮上绑定事件

<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <script type="text/javascript">
            function handle(){
                alert('action!');
            }
        </script>
    </head>
    <body>
        <span id="info">
            <img src="mypic.jpg" id="mypic" height="60%" onmousedown="handle()">
        </span>
    </body>
</html>

如果要是想使用双击操作使用ondbclick事件。

2.2 鼠标事件

范例：观察一个事件操作

<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <script type="text/javascript">
            function changeColor(obj, color){
                obj.bgColor = color;
            }
        </script>
    </head>
    <body>
        <table border="1" bgcolor="#f2f2f2">
            <tr>
                <th>No.</th>
                <th>Name</th>
                <th>Location</th>
            </tr>
            <tr onmousemove="changeColor(this,'white')" onmouseout="changeColor(this, '#f2f2f2')">
                <td>1</td>
                <td>lks</td>
                <td>henan</td>
            </tr>
            <tr onmousemove="changeColor(this,'white')" onmouseout="changeColor(this, '#f2f2f2')">
                <td>2</td>
                <td>hhy</td>
                <td>putian</td>
            </tr>
        </table>
    </body>
</html>

JavaScript是一个基于对象的编程语言，所有的对象都在元素上，也就是说每一个元素，例如<tr>、<td>都属于一个JavaScript对象。

2.3 动态绑定事件

需要注意的是，所有的事件除了采用以上的方式定义之外也可以动态设置，这种形式在开发之中使用的是最多的。那么可以使用addEventListener(事件类型, 处理函数名称, 触发时机)进行动态设置。

对于整个JavaScript事件的处理分为两个部分：
（1）事件的冒泡过程；
（2）事件的触发过程。
触发时机都会设置为false，表示在事件的触发过程进行处理。阻止事件的冒泡。
范例：观察动态设置

<script type="text/javascript">
   function changeColor(obj, color){
        obj.bgColor = color;
    }
    window.onload = function(){
        var trs = document.getElementsByTagName('tr');
        for(i = 0; i < trs.length; i++){
            trs[i].addEventListener('mousemove',  function(){
                changeColor(this, 'white');
            }, false);
            trs[i].addEventListener('mouseout',  function(){
                changeColor(this, '#f2f2f2');
            }, false);
        }
    }
</script>

所有的动态设置的事件都可以在onload里面进行动态的配置。但是如果要配置，那么必须能够取得一个明确的元素对象。可以使用document.getElementById(元素 ID)的操作方式取得元素对象。

<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <script type="text/javascript">
            function handle(){  //修改当前行元素
                alert('action!');
            }
            //以下表示是在页面加载的时候进行加载事件的处理
            window.onload = function(){  //匿名函数
                var imgElement = document.getElementById('mypic'); //取得img元素对象
                imgElement.addEventListener('click', function(){
                    handle();
                }, false);
            }
        </script>
    </head>
    <body>
        <img src="mypic.jpg" id="mypic" height="60%">
    </body>
</html>

这种动态设置操作事件的最大好处在于，HTML代码不会和JavaScript混合在一起。
范例：动态操作

<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <script type="text/javascript">
            //以下表示是在页面加载的时候进行加载事件的处理
            window.onload = function(){
                var myBut = document.getElementById('setBtu');
                myBut.addEventListener('click', function(){
                    var info = document.getElementById('info');
                    info.innerHTML = "<img src='mypic.jpg' height='50%'>";
                }, false);
            }
        </script>
    </head>
    <body>
        <span id='info'></span>
        <button id="setBtu">show image</button>
    </body>
</html>

下面可以继续做一个小功能的扩充，实现一个图片的浏览器。

<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <script type="text/javascript">
            var arr = new Array('pica.jpg', 'picb.jpg', 'picc.jpg', 'picd.jpg', 'pice.jpg');
            //以下表示是在页面加载的时候进行加载事件的处理
            window.onload = function(){
               var prevBut = document.getElementById('previousImage');
               var nextBut = document.getElementById('nextImage');
               var imgNumber = 0;
               prevBut.addEventListener('click', function(){
                   var showImage = document.getElementById('showImg');
                   if(imgNumber < 1){
                       imgNumber = 5;
                   }
                   showImage.src = arr[--imgNumber];
               },false);
               nextBut.addEventListener('click', function(){
                   var showImage = document.getElementById('showImg');
                   if(imgNumber > 3){
                       imgNumber = -1;
                   }
                   showImage.src = arr[++imgNumber];
               },false);
            }
        </script>
    </head>
    <body>
        <span id='info'>
            <img id="showImg" src="pica.jpg" height="60%">
        </span><br>
        <button id="previousImage">Previous</button>
        <button id="nextImage">Next</button>
    </body>
</html>

在JavaScript里面提供有一个setTimeOut(函数, 时间-毫秒)，利用此函数可以实现定期的操作调用。
范例：观察setTimeOut函数使用

<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <script type="text/javascript">
            function time(){
                var date = new Date();
                var info = document.getElementById('info');
                info.innerHTML = "<h1>当前时间：" + date + "</h1>";
                setTimeout(time, 1000);
            };
            
            window.onload = function(){
                time();
            }
        </script>
    </head>
    <body>
        <span id='info'></span>
    </body>
</html>

随后利用此函数实现自动的图片滚片的操作功能。

<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <script type="text/javascript">
            var arr = new Array('pica.jpg', 'picb.jpg', 'picc.jpg', 'picd.jpg', 'pice.jpg');
            var i = 0;
            function time(){
                var info = document.getElementById('info');
                if(i > 4){
                    i = 0;
                }
                info.innerHTML = "<img src=" + arr[i++]+" height='60%'>";
                setTimeout(time, 2000);
            };
            
            window.onload = function(){
                time();
            }
        </script>
    </head>
    <body>
        <span id='info'></span>
    </body>
</html>

3 JavaScript与表单交互

3.1 数据检验

对于表单数据的取得以及验证是在整个JavaScript里面使用最重要的一个场景。

所有的JavaScript中事件一定要与函数捆绑在一起使用，那么下面就利用这些事件来进行表单元素的操作。
范例：取得输入的文本信息

<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <script type="text/javascript">
            function fun(){
                var elem = document.getElementById("info");
                alert(elem.value);
            }
        </script>
    </head>
    <body>
        <div class="a">
            <form>
                Please input your info: <input type="text" id="info" name="info">
                <button id="but" onclick="fun()" type="button">Click</button>
            </form>
        </div>
    </body>
</html>

在表单控件里面name和id的内容一定要保持一致。

以上是利用了getElementById()的函数取得了指定对象，但是除了以上的操作之外，还有另外一种取得方式（不用）。

<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <script type="text/javascript">
            function fun(){
                alert(info.value);
            }
        </script>
    </head>
    <body>
        <div class="a">
            <form>
                Please input your info: <input type="text" id="info" name="info">
                <button id="but" onclick="fun()" type="button">Click</button>
            </form>
        </div>
    </body>
</html>

表示根据元素的id进行的查询。

在取得了输入的内容之后，更多的是希望进行一下数据的验证，因为只有合法的email才应该进行正常的显示。要想使用数据验证使用正则表达式是最方便的，而JavaScript也支持正则，但是需要记住的是，一定要定义正则的开始与结束标记。而且所有的正则符号不再需要进行转义，语法/^正则$/.test(要检测的数据)。

<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <script type="text/javascript">
            function fun(){
                var myinfo = document.getElementById("info");
                if(/^\w+@\w+.\w+$/.test(myinfo.value)){
                    alert("right!")
                }else{
                    alert("wrong");
                }
            }
        </script>
    </head>
    <body>
        <div class="a">
            <form>
                Please input your email: <input type="text" id="info" name="info">
                <button id="but" onclick="fun()" type="button">Click</button>
            </form>
        </div>
    </body>
</html>

此时已经成功的实现了数据的取出以及验证的操作。

3.2 表单验证模型

虽然表面看起来功能已经完成了，但是严格来讲以上的操作无法使用。

一个正常的表单验证操作过程之中，其基本流程：由用户输入表单内容，如果输入的数据合法则允许提交，如果不合法则不允许提交，但是此时的代码即使输入的内容不合法，也能够进行表单提交。

<script type="text/javascript">
   function fun(){
        var myinfo = document.getElementById("info");
        if(/^\w+@\w+.\w+$/.test(myinfo.value)){
            alert("right!")
            return true;
        }else{
            alert("wrong");
            return false;
        }
    }
</script>

如果要想针对于表单验证进行拦截，则必须使用onsubmit事件，这个事件是在<form>元素上定义的，表示进行表单提交时触发，如果需要对表单进行拦截，那么就在onsubmit处理函数上返回false，如果要正常执行，则返回true。
范例：定义一个main.css样式文件

.init{
    color: black;
    padding: 1px;
    font-weight: bold;
    border: 1px solid #f2f2f2;
}

.wrong{
    padding: 1px;
    font-weight: bold;
    border: 1px solid red;
}

.right{
    padding: 1px;
    font-weight: bold;
    border: 1px solid green;
}

在每一个表单初始状态的时候使用.init的样式完成，而如果验证失败使用.wrong样式完成，反之使用.right样式完成。最好的验证验证方式还是在文本框失去焦点之后进行验证。

获得焦点的事件为onfocus、失去焦点的事件为onblur。

<form action="show.html" method="POST" onsubmit="return fun()">
   Please input your email: <input class="init" type="text" id="info" name="info" onblur="fun()">
    <button id="but" type="submit">Click</button>
</form>

以后表单的验证的基础结构都使用上面的方式进行控制。

3.3 密码验证

在进行密码验证的时候最为常见的功能是比较两次输入的密码是否相同。

<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <link type="text/css" rel="stylesheet" href="css/main.css">
        <script type="text/javascript">
            function fun(){
                var password = document.getElementById("password");
                var confirmpassword = document.getElementById("confirmpassword");
                if(password.value == confirmpassword.value){
                    confirmpassword.className = "right";
                    msg.innerHTML = "";
                    return true;
                }else{
                    msg.innerHTML = "<font color='red'>前后密码不一致</font>";
                    return false;
                }
            }
        </script>
    </head>
    <body>
        <div class="a">
            <form action="show.html" method="POST" onsubmit="return fun()">
                Password: <input type="password" id="password" name="password"/><br>
                Confirm Password: <input type="password" id="confirmpassword" name="confirmpassword" onblur="fun()"/><span id="msg"></span><br>
                <button id="but" type="submit">Click</button>
            </form>
        </div>
    </body>
</html>

最好的代码就是互不干涉，每个文件只独立存在。

3.4 单选钮

单选钮的操作特点是多个元素的id和name相同，下面首先来确定如何取得单选钮的内容。

在日后（尤其是单选钮和复选框中）如果出现了多个id和name名称相同的元素时，那么JavaScript会认为它属于一个对象数组，但是如果此时你只是使用document.getElementById()进行取得的话，那么最终可以取得的只是这些对象数组里的第一个元素而已。

如果要想去的一组全部的对象，则可以使用document.all()来完成。它返回的是对象数组。

<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <link type="text/css" rel="stylesheet" href="css/main.css">
        <script type="text/javascript">
            function fun(){
                var hobbys = document.all("hobby");
                alert(hobbys);
            }
        </script>
    </head>
    <body>
        <form>
            兴趣:&nbsp;&nbsp;
            <input type="radio" value="游泳" name="hobby" id="hobby"/>游泳
            <input type="radio" value="篮球" name="hobby" id="hobby"/>篮球
            <input type="radio" value="足球" name="hobby" id="hobby"/>足球
            <input type="radio" value="羽毛球" name="hobby" id="hobby"/>羽毛球
            <button type="button" id="btu" onclick="fun()">提交</button>
        </form>
    </body>
</html>

而如果要判断某个选项被选中，则只能够通过checked实现判断。
范例：实现正确数据的显示

<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <link type="text/css" rel="stylesheet" href="css/main.css">
        <script type="text/javascript">
            function fun(){
                var hobbys = document.all("hobby");
                for(var i = 0; i < hobbys.length; i++){
                    if(hobbys[i].checked){
                        alert(hobbys[i].value)
                    }
                }
            }
        </script>
    </head>
    <body>
        <form>
            兴趣:&nbsp;&nbsp;
            <input type="radio" value="游泳" name="hobby" id="hobby"/>游泳
            <input type="radio" value="篮球" name="hobby" id="hobby"/>篮球
            <input type="radio" value="足球" name="hobby" id="hobby"/>足球
            <input type="radio" value="羽毛球" name="hobby" id="hobby"/>羽毛球
            <button type="button" id="btu" onclick="fun()">提交</button>
        </form>
    </body>
</html>

checked是HTML元素里面定义的属性，所有的元素对象都可以直接调用属性。

3.5 复选框

实际上复选框与单选钮的操作形式是类似的，因为复选框也需要一组同名的元素，所以如果要想取出内容，也需要使用document.all()的方式来完成。
范例：复选框选择

<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <link type="text/css" rel="stylesheet" href="css/main.css">
        <script type="text/javascript">
            function fun(){
                var hobbys = document.all("hobby");
                var userhobbys = '';
                for(var i = 0; i < hobbys.length; i++){
                    if(hobbys[i].checked){
                        userhobbys += hobbys[i].value + ",";
                    }
                }
                alert(userhobbys);
            }
        </script>
    </head>
    <body>
        <form>
            兴趣:&nbsp;&nbsp;
            <input type="checkbox" value="游泳" name="hobby" id="hobby"/>游泳
            <input type="checkbox" value="篮球" name="hobby" id="hobby"/>篮球
            <input type="checkbox" value="足球" name="hobby" id="hobby"/>足球
            <input type="checkbox" value="羽毛球" name="hobby" id="hobby"/>羽毛球
            <button type="button" id="btu" onclick="fun()">提交</button>
        </form>
    </body>
</html>

此时的操作与单选钮的功能是类似的，但是这个时候有人提出了应该具备全选功能。

全选功能的设计主要是操作复选框中的checked属性的内容，如果此内容是true，表示选中，如果内容是false，表示没有选中。

<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <link type="text/css" rel="stylesheet" href="css/main.css">
        <script type="text/javascript">
            function fun(){
                var hobbys = document.all("hobby");
                var userhobbys = '';
                for(var i = 0; i < hobbys.length; i++){
                    if(hobbys[i].checked){
                        userhobbys += hobbys[i].value + ",";
                    }
                }
                alert(userhobbys);
            }

            function selectAllFun(obj){
                var hobbys = document.all("hobby");
                var userhobbys = '';
                for(var i = 0; i < hobbys.length; i++){
                    hobbys[i].checked = obj.checked;
                }
            }
        </script>
    </head>
    <body>
        <form>
            兴趣:&nbsp;&nbsp;<br>
            <input type="checkbox" value="游泳" name="hobby" id="hobby"/>游泳<br>
            <input type="checkbox" value="篮球" name="hobby" id="hobby"/>篮球<br>
            <input type="checkbox" value="足球" name="hobby" id="hobby"/>足球<br>
            <input type="checkbox" value="羽毛球" name="hobby" id="hobby"/>羽毛球<br><br><br>
            <input type="checkbox" name="selectAll" id="selectAll" onclick="selectAllFun(this)"/>全选
            <button type="button" id="btu" onclick="fun()">提交</button>
        </form>
    </body>
</html>

用一个复选框的选中状态来决定其它复选框的选中状态。

3.6 下拉列表框

下拉列表框如果要进行表单交互使用的事件是onchange事件，表示下拉内容发生改变。
范例：观察下拉列表框

<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <link type="text/css" rel="stylesheet" href="css/main.css">
        <script type="text/javascript">
            function fun(){
                alert(selectcity.value);
            }
        </script>
    </head>
    <body>
        <form>
            City:&nbsp;&nbsp;
            <select id="selectcity" name="selectcity" onchange="fun()">
                <option value="河南-HN">河南</option>
                <option value="湖北-HB">湖北</option>
                <option value="福建-FJ">福建</option>
                <option value="广东-GD">广东</option>
            </select>
        </form>
    </body>
</html>

如果觉得以上的操作不舒服，也可以按照传统方法取得下拉列表框内容。

<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <link type="text/css" rel="stylesheet" href="css/main.css">
        <script type="text/javascript">
            function fun(){
                alert(document.getElementById("selectcity").value)
            }
        </script>
    </head>
    <body>
        <form>
            City:&nbsp;&nbsp;
            <select id="selectcity" name="selectcity" onchange="fun()">
                <option value="河南-HN">河南</option>
                <option value="湖北-HB">湖北</option>
                <option value="福建-FJ">福建</option>
                <option value="广东-GD">广东</option>
            </select>
        </form>
    </body>
</html>

下拉列表框里面用的最主要事件就是onchange事件，你可以传递当前元素对象的内容，也可以按照传统方式取得。

3.7 文本域

文本域主要是进行大文本信息的输入操作使用的，但是在文本域上也同样可以使用一系列操作事件。
范例：文本操作检查

<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <link type="text/css" rel="stylesheet" href="css/main.css">
        <script type="text/javascript">
            function fun(){
                var note = document.getElementById("note");
                var notemsg = document.getElementById("noteMsg");
                if(note.value.length > 20){
                    notemsg.innerHTML = "<font color='red'>" + note.value.length + "/20</font>";
                    return false;
                }else{
                    notemsg.innerHTML = "<font color='green'>" + note.value.length + "/20</font>";
                    return true;
                }
            }
        </script>
    </head>
    <body>
        <form>
            <textarea name="note" id="note" cols="30" rows="10" onkeyup="fun()">Hello</textarea><span id="noteMsg"></span>
            <button type="submit" id="btn" name="but" onclick="return fun()">提交</button>
        </form>
    </body>
</html>

这种检查的操作同样属于常见的功能。

4 window对象

在之前调用onload的时候曾今使用过：window.onload=function(){}，这就属于window对象。例如：在之前进行过警告框的弹出。

<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <link type="text/css" rel="stylesheet" href="css/main.css">
        <script type="text/javascript">
            window.onload = function(){
                alert("Hello!");
            }
        </script>
    </head>
    <body>
    </body>
</html>

在window对象里面有一个confirm()操作函数，这个函数的主要功能是提供一个确认框。
范例：观察确认框

<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <link type="text/css" rel="stylesheet" href="css/main.css">
        <script type="text/javascript">
            window.onload = function(){
                window.confirm("确认删除？");
            }
        </script>
    </head>
    <body>
    </body>
</html>

还有一个prompt()函数，此函数可以由用户输入数据。
范例：输入数据

<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <link type="text/css" rel="stylesheet" href="css/main.css">
        <script type="text/javascript">
            window.onload = function(){
                var str = window.prompt("你是谁？","");
                document.getElementById("info").innerHTML = str;
            }
        </script>
    </head>
    <body>
        <h1 id="info"></h1>
    </body>
</html>

还可以在一个页面里面打开另外一个页面。使用window.open()函数。

<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <link type="text/css" rel="stylesheet" href="css/main.css">
        <script type="text/javascript">
            window.onload = function(){
                window.open('show.html');
            }
        </script>
    </head>
    <body>
        <h1 id="info"></h1>
    </body>
</html>

在弹窗的时候也可以设置一些显示属性。

<html>
    <head>
        <meta charset="UTF-8">
        <title>JavaScript</title>
        <link type="text/css" rel="stylesheet" href="css/main.css">
        <script type="text/javascript">
            window.onload = function(){
                window.open('show.html',"JavaScriptBull","top=50,left=50,width=500,height=300");
            }
        </script>
    </head>
    <body>
        <h1 id="info"></h1>
    </body>
</html>

也可以使用window.close()关闭窗口。

<html>

<head>
    <meta charset="UTF-8">
    <script type="text/javascript">
        function closeWin() {
            myWindow.close()
        }
    </script>
</head>

<body>

    <script type="text/javascript">
        myWindow = window.open('', '', 'width=200,height=100')
        myWindow.document.write("This is 'myWindow'")
    </script>

    <input type="button" value="Close 'myWindow'" onclick="closeWin()" />

</body>

</html>

在这里面还有一个重要的操作，称为重定向：window.location。
范例：重定向

<html>

<head>
    <meta charset="UTF-8">
    <script type="text/javascript">
        window.location = 'show.html';
    </script>
</head>

<body>
</body>

</html>

此时的跳转类似于超链接功能，地址栏会发生改变。

5 表单验证

每个HTML元素对JavaScript而言都属于一个对象，取得元素对象：document.getElementById()。

要求：要求定义一个雇员信息的增加页面，例如页面名称为：emp_insert.html，而后在此页面中要提供有输入表单，此表单定义要求如下：
（1）雇员编号：必须是4位数字，按照正则进行验证；
（2）雇员姓名：不能为空；
（3）雇员职位：不能为空；
（4）雇佣日期：按照yyyy-mm-dd的格式编写，按照正则进行验证；
（5）工资：按照小数编写，小数位最多两位，按照正则进行验证。
范例：样式文件——main.css

.init{
    color: black;
    padding: 1px;
    font-weight: bold;
    border: 1px solid #f2f2f2;
}

.wrong{
    padding: 1px;
    font-weight: bold;
    border: 1px solid red;
}

.right{
    padding: 1px;
    font-weight: bold;
    border: 1px solid green;
}

并且此样式保存在css文件目录下。

5.1 定义表单

基础的布局是使用表格的方式实现布局。

<html>

<head>
    <meta charset="UTF-8">
    <title>雇员信息</title>
    <link type="text/css" rel="stylesheet" href="css/main.css">
</head>

<body>
    <form>
        <table class="mytable">
            <tr>
                <td colspan="3" class="title">雇员注册</td>
            </tr>
            <tr>
                <td width="20%"><strong>编&emsp;&emsp;号:</strong></td>
                <td width="40%"><input type="text" id="empid" name="empid"/></td>
                <td width="40%"><span id="empidmsg"></span></td>
            </tr>
            <tr>
                <td><strong>姓&emsp;&emsp;名:</strong></td>
                <td><input type="text" id="empname" name="empname"/></td>
                <td><span id="empnamemsg"></span></td>
            </tr>
            <tr>
                <td><strong>职&emsp;&emsp;位:</strong></td>
                <td><input type="text" id="empjog" name="empjob"/></td>
                <td><span id="empjobmsg"></span></td>
            </tr>
            <tr>
                <td><strong>雇佣日期:</strong></td>
                <td><input type="text" id="emphiredate" name="emphiredate"/></td>
                <td><span id="emphiredatemsg"></span></td>
            </tr>
            <tr>
                <td><strong>工&emsp;&emsp;资:</strong></td>
                <td><input type="text" id="empsalary" name="empsalary"/></td>
                <td><span id="empsalarymsg"></span></td>
            </tr>
            <tr>
                <td colspan="3">
                    <button type="submit" id="submitbtu">提交</button>
                    <button type="reset" id="resetbtu">重置</button>
                </td>
            </tr>
        </table>
    </form>
</body>

</html>

表单的操作几乎都是固定的，最简单的就是利用表格布局。

5.2 基础验证

只要是编写JavaScript程序，那么都需要在js目录下保存所有的*.js文件，那么本次保存一个emp.js文件。
1、编写验证empno的操作

function validateEmpid(empid){
            var empidmsg = document.getElementById('empidmsg');
            if(/^\d{4}$/.test(empid)){
                empidmsg.innerHTML = "<font color='green'>Right!<font>";
                return true;
            }else{
                empidmsg.innerHTML = "<font color='red'>Wrong!<font>";
                return false;
            }
        }

随后需要在验证的部分上调用此函数，使用onblur事件完成。

<input type="text" id="empid" name="empid" onblur="validateEmpid(this.value)" onkeyup="validateEmpid(this.value)"/>

2、随后就按照第一个验证的操作形式复制出操作代码，并且进行简单的修改

function validateEmpname(empname){
            var empnamemsg = document.getElementById('empnamemsg');
            if(empname){
                empnamemsg.innerHTML = "<font color='green'>Right!<font>";
                return true;
            }else{
                empnamemsg.innerHTML = "<font color='red'>Wrong!<font>";
                return false;
            }
        }