上节课的内容例子比较少，主要是讲解一些基础语法概念。
这节课开始将用更多的实例来进行说明JavaScript的常用方法。
设计一个注册页面
来做一个注册页面，可以输入注册手机号，密码，重复密码，用户名称，性别，兴趣爱好，签名。
然后每个输入项目的右侧可以显示输入检查的结果。
大概是这个样子的：
3-4-1.jpg
通过这个注册页面，可以学习到常用的JavaScript方法来检查输入。
首先来创建3个文件，一个是regist.html，一个是regist.css，一个是regist.js。
首先将网页基本内容输入，然后创建一个table，table总共3列，先做第一行注册手机号。
使用CSS样式将文字和输入框做的好看一些，然后js文件里面暂时没有任何内容。
regist.css内容如下：
3-4-2.jpg
regist.html内容如下：
3-4-3.jpg
浏览器打开网页，查看效果：
3-4-4.jpg
检查输入结果提示到网页元素内容上
当用户输入好了手机号，点击注册按钮的时候，检查输入的值必须都是数字，并且长度为11位，如果不符合要求，则将提示信息显示在输入框的右侧的td里面的 div内容当中。
因此首先在html的table的td里面增加一个div，设置其CSS样式名为checkmsg，注意先随意放一些内容，用于测试CSS样式，待样式满意了，再将内容删除。同时增加一个注册按钮和对应的样式。
regist.html内容如下：
3-4-5.jpg
然后，编写css文件，调整测试内容的显示样式，直到符合要求。
regist.css内容如下：
3-4-6.jpg
刷新网页：
3-4-7.jpg
可以看到显示了红色的文字，字体大小略小。
然后在js文件中增加检查函数和相应的检查代码，检查长度必须等于11，然后用for循环检查每个字符都必须是数字字符。
regist.js内容如下：
3-4-8.jpg
这里有几点说明：
document.getElementsByName函数是用来根据表单元素的name属性来获取元素数组，这里注意返回的是元素数组。
要通过下标来获得对应的元素。这里因为只有一个元素的name是phone，所以取第一个就可以了。
substr函数是用于截取字符串的一部分，第一个参数是要从第几个位置开始，第二个参数是要截取的长度。
其它的内容都是之前学习过的。
然后修改html文件，在注册按钮上增加onclick事件，调用registCheck事件，然后删除掉错误提示信息div里面的测试内容，并且给div设置好id属性。
regist.html内容如下：
3-4-9.jpg
刷新网页，输入一个长度只有8位，点击按钮后提示错误信息：
3-4-10.jpg
刷新网页，输入一个含有字符的内容，点击按钮后提示错误信息：
3-4-11.jpg
if判断语句
刚刚的代码里面使用到了if判断语句。
if判断语句的格式如下：
if (条件判断语句结果为true) {
满足条件执行的代码
} else {
不满足条件执行的代码
}其中的条件判断语句结果应该是一个布尔类型数据。
可以通过逻辑运算符来进行组合条件判断。
例如：
if (a>b) {
console.log(a);
} else {
console.log(b);
}这个if判断的作用是输入2个变量较大的那一个的值。
例如：
if (week==6 || week==7) {
console.log("周末");
} else {
console.log("工作日");
}这个if判断的作用是根据是周几来输出是周末还是工作日。
例如，前面输入手机号，根据字符串长度判断是否符合长度为11的要求，不符合要求，则将错误信息显示在网页上。
网页中常见的事件onclick
onclick事件，大家之前也见过2次了，应该不太陌生了。
onclick事件是属于表单元素的属性，用于提交表单时触发事件。
onclick事件是当鼠标点击元素的时候会触发，一般是结合JavaScript函数来进行表单元素处理。
前面在按钮上设置了onclick事件，还可以在输入框元素上也设置onclick事件，当用户点击输入框的时候，可以将右侧的错误信息清除。
regist.js修改内容如下：
3-4-12.jpg
regist.html修改内容如下：
3-4-13.jpg
刷新网页，先输入一个错误的号码，点击注册按钮让提示信息出现：
3-4-14.jpg
然后，鼠标光标移动到手机号输入框里面单击，可以看到右侧的提示信息消失了：
3-4-15.jpg
HTML表单标签input
这个网页，用到了2次HTML表单标签input。那么来详细讲解什么什么是表单标签，因为这个在后面会用到非常多，是衔接静态网页和动态网页的最重要的枢纽。
HTML表单用于收集用户输入数据。
一般使用form标签来包含各种输入标签元素，并用于提交给后台程序。
form标签内部可以使用不同类型的表单元素来输入不同类型的数据。
例如输入元素、复选元素、单选元素、下拉框选择元素、提交按钮等等。
input是最重要的表单元素。给input设置不同的type属性，网页上可以呈现不同的输入形式。
可以在网页上显示一个文本输入框。
可以在网页上显示一个单选按钮。
可以在网页上显示一个多选按钮。
可以在网页上显示一个密码输入框，输入的内容都显示为*号。
可以在网页上显示一个按钮。
同样可以在网页上显示一个按钮。
使用select元素可以显示一个下拉框。
选项1
选项2
以上代码可以在网页中显示一个下拉框选项，里面有2个选择项目。
使用textarea可以在网页上显示一个多行文本输入框。
可以在网页上显示一个高5个文字宽30个文字的一个多行的文本输入框。
可以给表单元素设置name属性，用于在JavaScript获取该元素，或者用于提交给后台程序时进行区分。
例如，前面的手机号输入元素的name="phone"，然后在JavaScript里面就可以通过document.getElementsByName函数来获取这个元素的内容。
修改testjs.html，将上面的提到的表单元素都显示出来。
testjs.html修改如下：
3-4-16.jpg
浏览器打开这个网页：
3-4-17.jpg
可以看到不同的元素在网页上呈现的样子。后面还会详细说明每个元素的具体用法。
增加多个输入项目
根据前面的知识，来给注册页面增加剩余的输入项目。
密码和重复密码使用来输入。
用户名称也是使用来输入。
性别可以使用下拉框来输入。
兴趣爱好可以使用多个可以多选输入。
签名可以使用来多行输入。
注意每个元素都加上name属性，后面做JavaScript检查需要用到。
修改regist.html代码如下：
3-4-18.jpg
3-4-19.jpg
修改regist.css代码如下，将网页元素美化一下：
3-4-20.jpg
3-4-21.jpg
刷新网页，可以看到表单元素。
3-4-22.jpg
表单元素的value属性
可以通过给表单元素设置value属性来设置元素中的输入内容。
这样在需要显示默认输入内容的时候有用。
给前面2个元素都加上value属性。
修改regist.html代码：
3-4-23.jpg
刷新网页就看到了元素的初始值了。
3-4-24.jpg
然后也可以将鼠标光标点击输入元素，修改这些初始的输入值。
试验过后，将value属性删除，后面检查功能不需要给初始值。
完成注册页面检查输入功能
来增加几个检查项目：
密码输入长度要大于等于8位长度
重复密码输入长度要大于等于8位长度
密码和重复密码的值要相等
用户名称的长度要小于等于10位长度
签名的长度要小于等于100位长度
修改js代码如下：
3-4-25.jpg
故意输入错误的值，测试看看：
3-4-26.jpg
可以看到每个检查项目都正确了。
onfocus和onblur事件
是否可以在用户每输入一个项目，就能立刻检查呢，这样好处是可以更快提醒用户。
可以通过设置在每个项目设置onfocus事件和onblur事件来完成。
onfocus事件是当输入光标焦点进入输入元素内部时产生。
onblur事件是当输入光标焦点离开输入元素内部时产生。
来验证一下：
修改js文件增加2个函数：
3-4-27.jpg
删除掉手机号输入框元素的onclick事件，并添加onfocus和onblur事件。
regist.html修改如下：
3-4-28.jpg
刷新网页，鼠标单击手机号输入框：
3-4-29.jpg
可以看到右侧提示信息显示了内容，说明触发了onfocus事件。
然后鼠标单击密码输入框：
3-4-30.jpg
可以看到右侧提示信息显示了内容，说明触发了onblur事件。
给每个输入元素都增加onfocus函数和onblur函数。
当焦点离开的时候检查内容是否正确，当焦点进入的时候清除提示信息。
regist.js修改如下：
3-4-31.jpg
3-4-32.jpg
regist.html修改如下：
3-4-33.jpg
3-4-34.jpg
刷新网页，进行测试：
3-4-35.jpg
可以看到焦点离开时提示了信息。
焦点回到输入框时，一个控件清除提示信息，另一个提示信息。
3-4-36.jpg
整理代码重复使用函数
可以看到JavaScript里面有一些代码时重复的。
点击注册按钮时的检查每个元素输入的代码，和单个元素失去焦点时检查输入的代码时相同的。
这时候，可以整理代码，让注册按钮检查代码调用焦点失去函数，这样可以减少重复代码。
regist.js修改如下：
3-4-37.jpg
刷新网页，重新测试，可以看到效果不变。
