文章目录

1 JavaScript基础语法

1.1 简介
1.2 输出
1.3 定义变量
1.4 定义函数

2 JavaScript事件处理

2.1 基础事件
2.2 鼠标事件
2.3 动态绑定事件

3 JavaScript与表单交互

3.1 数据检验
3.2 表单验证模型
3.3 密码验证
3.4 单选钮
3.5 复选框
3.6 下拉列表框
3.7 文本域

4 window对象
5 表单验证

5.1 定义表单
5.2 基础验证

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 myPricefunction 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;}}

随后需要为每一个组件绑定验证的操作事件。

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

Spark核心编程(RDD转换算子)之聚合算子
文章目录RDD转换算子之聚合算子reduceByKey说明案例groupByKey说明案例aggregateByKey说明案例foldByKey说明案例combineByKey说明案例聚合算子小结有预聚合reduceByKeyaggregateByKeyfoldByKeycombineByKey无预聚合groupByKey RDD转换算子之聚合算子聚合算子可以说是Spark…...
2024/5/10 9:17:44
Java:简单介绍方法的覆盖
1.方法的覆盖（重写）：就是在子类中重写了与父类中有相同名字的方法。 2、方法的覆盖原则：（1）覆盖方法的返回类型、方法名称、参数列表必须与原方法相同。（2）覆盖方法不能比原方法访问性差（即访问权限不允许缩小）（3）覆盖方法不能比原方法抛出更多的异常。（4）被…...
2024/4/15 5:09:36
留言板连接数据库删除功能及时间功能
1.时间利用时间戳载入时间在views目录下的ejs页面（html页面）写入在schema下的j文档模型js文件写入timestamps:true2.删除reff 在views目录下的ejs页面（html页面）写入<a href=’’ /a>在routes目录下的api.js 一级路由页面写入二级路由删除方法...
2024/5/10 4:29:05
C语言二分法函数实现过程中可能遇到的问题。
Position BinarySearch( List L, ElementType X ) {int left = 1;//习惯上初始化为一，方便理解。前提是在数组中就从1开始储存。int right = L->Last;int mid=(left+right)/2;while (left<=right) {if(X<L->Data[mid]){right = mid-1;//此处忘记减一，因为此算法是…...
2024/5/7 0:26:48
[Errno13] Permission denied
环境 ubuntu18.04(vmware) 问题描述执行pip3 install tensorflow出现问题问题分析权限不够解决方法 sudo pip3 install tensorflow或者 python3 -m pip install --user tensorflow...
2024/4/24 11:23:50
JAVA1.8新特性-函数式接口
JDK1.8中引入了用于函数式编程的支持。java中的函数式接口指：有且只有一个方法的接口。函数式接口是适用于函数式编程场景的接口。而java中的函数式编程指的就是Lamda,所以函数式接口就是可以适用于Lamda使用的接口。只要确保接口中有且仅有一个抽象方法，java中的Lamda才能顺…...
2024/5/10 5:06:16
高效解决PPA软件源安装失败的问题
问题背景使用apt或者apt-get命令，会遇到部分软件仅在PPA提供，而出现下载更新失败的情况 PPA软件源简介网站部署国家以下为nslookup的查询结果，通过地址查询可以得知该IP位于英国 > ppa.launchpad.net Server: 127.0.0.53 Address: 127.0.0.53#53Non-authoritative an…...
2024/4/24 11:23:51
关于打开glssfish服务器域管理控制台Status：The Admin Console application is loaded问题解决办法
因为glassfish4.1.1版本存在一个致命漏洞，创建数据库连接池有个大坑，所以我换了glassfish的旧版本4.0，但是在进入服务器的域管理控制台时却发现一直在转圈圈，等了好久也没能进入主页。一直显示Status：The Admin Console application is loaded解决这个转圈圈其实很简单，…...
2024/5/6 4:08:17
mysql多表查询，事务，DCL
##多表查询： * 查询语法： select 列名列表 from 表名列表 where… * 准备sql # 创建部门表 CREATE TABLE dept( id INT PRIMARY KEY AUTO_INCREMENT, NAME VARCHAR(20) ); INSERT INTO dept (NAME) VALUES (‘开发部’),(‘市场部’),(‘财务部’); # 创建员工表 CREATE TABL…...
2024/5/9 6:51:03
HQChart使用教程62-品种小数位数设置
HQChart使用教程62-品种小数位数设置品种小数位数品种小数位置类例子特殊品种HQChart代码地址如果教程或hqchart对你有帮助，请在git上star，教程点下赞。谢谢~~ 品种小数位数不同的品种，它的最小交易单位是不一样的， hqchart内置简单的做了对不通品种设置了默认的小数位…...
2024/4/24 11:23:45
编译原理学习笔记（二十二）~习题：声明语句的翻译
...
2024/4/24 11:23:47
疯狂SpringCloud微服务架构实战 (Eureka -- 服务注册中心)
一、Eureka介绍Eureka 提供了基于 REST 的服务，在集群中主要用于服务管理。Eureka提供了基于Java语言的客户端组件，客户端组件实现了负载均衡的功能，为业务组件的集群部署创造了条件。使用该框架，可以将业务组件注册到 Eureka 容器中，这些组件可以进行集群部署，Eureka 主…...
2024/5/2 21:05:28
js中的设计模式
一，单例模式使用同一个构造函数生成的实例化对象，就算属性和方法相同，生成的也都是不同的实例化对象解决难点就是同一个构造函数生成同一个实例化对象，防止重复实例化原理，判断这个构造函数是否使用过，，使用过就返回之前的对象，如果没有那就生成一个实例化对象解决…...
2024/5/3 11:37:37
docker 阿里云镜像加速
使用阿里云镜像加速器登陆阿里云点击跳转# 手动复制地址 https://cr.console.aliyun.com/cn-hangzhou/instances/mirrors找到镜像加速器配置使用，要用自己的！每个人的registry-mirrors是不同的sudo mkdir -p /etc/docker sudo tee /etc/docker/daemon.json <<-EOF {&q…...
2024/4/15 5:09:42
Redis学习之路-入门3-jedis
Jedis是一个java操作redis数据库的类库，我们来简单看下jedis操作redis的具体功能实现 #jedis连接redis// 连接测试private static void test1(){// 如果使用空参构造，默认值 "localhost",6379端口Jedis jedis = new Jedis("127.0.0.1",6379);jedis.set(&…...
2024/4/29 1:37:34
2020.6.6课堂小结
我认为在上网课前对Java充满了期待，但是线上的教学方式让我不太适应，很多问题都不能当面请教老师以至于拖欠了很多知识点，上网课的日子里感觉也没有好好学。后来在教室上课了，有时候一上午的课都是一科的就学起很累，很没有精神，日常犯困呢点。对于初学者的我，完全还没有…...
2024/5/1 11:16:13
每周总结 el-form表单验证、vue.$set
前端 el-form 不能验证嵌套的对象，需要进行表单验证的数据要放在对象的第一层 vue.$set 有一个数组如下 data = [{age:18,name:小明},{age:20,name:小红}]这时用vue.$set()设置age的属性值视图层是检测不到age变化的解决方法重设数组元素的值 item = {age:1010,name:test};…...
2024/5/1 9:55:44
图形图像处理技术
画笔和画布画笔：Paint类画布：Canvas类绘制一个矩形实例：（颜色使用的都是16进制的）布局文件中设置帧布局管理器，id为framelayout，MainActivity中： package com.example.huabihehuabu;import androidx.appcompat.app.AppCompatActivity;import android.os.Bundle; im…...
2024/5/6 18:43:54
排序—插入排序
许久没有写点东西了，答辩之后人也变得松懈。今天看到简书又有人点赞之前记录的冒泡排序，点进去一看，居然有4w+的阅读量，心生疑问，咋会有这么高的阅读量，打开百度搜索冒泡排序，结果第3条就是我的。点开认真看了看，其实写得不好，还改了两个错别字(狗头)，这个阅读量或许…...
2024/5/6 17:50:45
Guava 学习笔记：EventBus
EventBus是Guava的事件处理机制，是设计模式中的观察者模式（生产/消费者编程模型）的优雅实现。对于事件监听和发布订阅模式，EventBus是一个非常优雅和简单解决方案，我们不用创建复杂的类和接口层次结构。Observer模式是比较常用的设计模式之一，虽然有时候在具体代码里，它…...
2024/4/24 11:23:41

02 00JavaScript编程入门