鼠标单击事件(onclick)
JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。
比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。
onclick是鼠标单击事件，当在网页上单击鼠标时，就会发生该事件。同时onclick事件调用的程序块就会被执行，通常与按钮一起使用。
比如，我们单击按钮时，触发 onclick 事件，并调用两个数和的函数add2()。代码如下：
<html>
<head>
<script type="text/javascript">
function add2(){
var numa,numb,sum;
numa=6;
numb=8;
sum=numa+numb;
document.write("两数和为:"+sum); }
</script>
</head>
<body>
<form>
<input name="button" type="button" value="点击提交" onclick="add2()" />
</form>
</body>
</html>
注意: 在网页中，如使用事件，就在该元素中设置事件属性。
innerHTML
innerHTML在JavaScript中是双向功能：获取对象的内容 或 向对象插入内容；
如：<div id="aa">这是内容</div> ，
我们可以通过 document.getElementById(‘aa’).innerHTML 来获取id为aa的对象的内嵌内容；
也可以对某对象插入内容，如 document.getElementById(‘abc’).innerHTML=’这是被插入的内容’;
这样就能向id为abc的对象插入内容。
定义和用法
innerHTML 属性用于设置或返回指定标签之间的 HTML 内容。
语法
Object.innerHTML = "HTML";// 设置
var html = Object.innerHTML;// 获取
例子
获取段落p的 innerHTML（html内容）
<html>
<head>
<script type="text/javascript">
function getInnerHTML(){ alert(document.getElementById("test").innerHTML);
}
</script>
</head><body>
<p id="test"><font color="#000">嗨豆壳 www.hi-docs.com</font></p>
<input type="button" nclick="getInnerHTML()" value="点击" />
</body>
</html>
String 字符串对象
在之前的学习中已经使用字符串对象了，定义字符串的方法就是直接赋值。比如：
var mystr = "I love JavaScript!"
定义mystr字符串后，我们就可以访问它的属性和方法。
访问字符串对象的属性length:
stringObject.length; 返回该字符串的长度。
var mystr="Hello World!"; var myl=mystr.length;
以上代码执行后，myl 的值将是：12
访问字符串对象的方法：
使用 String 对象的 toUpperCase() 方法来将字符串小写字母转换为大写：
var mystr="Hello world!"; var mynum=mystr.toUpperCase();
以上代码执行后，mynum 的值是：HELLO WORLD!
JavaScript split() 方法
把一个字符串分割成字符串数组:
var str="How are you doing today?";
var n=str.split(" ");
n 输出一个数组的值:
How,are,you,doing,today?
定义和用法
split() 方法用于把一个字符串分割成字符串数组。
提示： 如果把空字符串 (“”) 用作 separator，那么 stringObject 中的每个字符之间都会被分割。
注意： split() 方法不改变原始字符串。
所有主要浏览器都支持 split() 方法
语法
*string*.split(*separator*,*limit*)
参数值
| 参数 | 描述 |
|---|---|
| separator | 可选。字符串或正则表达式，从该参数指定的地方分割 string Object。 |
| limit | 可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。 |
返回值
| 类型 | 描述 |
|---|---|
| Array | 一个字符串数组。该数组是通过在 separator 指定的边界处将字符串 string Object 分割成子串创建的。返回的数组中的字串不包括 separator 自身。 |
省略分割参数：
var str="How are you doing today?";
var n=str.split();
n 输出数组值得结果:
How are you doing today?
分割每个字符，包括空格:
var str="How are you doing today?";
var n=str.split("");
n 输出数组值得结果:
H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
使用 limit 参数:
var str="How are you doing today?";
var n=str.split(" ",3);
n 将输出3个数组的值:
How,are,you
使用一个字符作为分隔符:
var str="How are you doing today?";
var n=str.split("o");
n 输出数组值得结果:
H,w are y,u d,ing t,day?
JavaScript substring() 方法
定义和用法
substring() 方法用于提取字符串中介于两个指定下标之间的字符。
substring() 方法返回的子串包括 开始 处的字符，但不包括 结束 处的字符。
语法
*string*.substring(from, to)
| 参数 | 描述 |
|---|---|
| from | 必需。一个非负的整数，规定要提取的子串的第一个字符在 string Object 中的位置。 |
| to | 可选。一个非负的整数，比要提取的子串的最后一个字符在 string Object 中的位置多 1。 如果省略该参数，那么返回的子串会一直到字符串的结尾。 |
所有主要浏览器都支持 substring() 方法
实例
在本例中，我们将使用 substring() 从字符串中提取一些字符：:
以上代码输出结果:
lo world!
lo w
JavaScript substr() 方法
定义和用法
substr() 方法可在字符串中抽取从 开始 下标开始的指定数目的字符。
提示： substr() 的参数指定的是子串的开始位置和长度，因此它可以替代 substring() 和 slice() 来使用。
注意： substr() 方法不会改变源字符串。
所有主要浏览器都支持 substr() 方法
语法
string.substr(start,length)
参数值
| 参数 | 描述 |
|---|---|
| start | 必需。要抽取的子串的起始下标。必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。 |
| length | 可选。子串中的字符数。必须是数值。如果省略了该参数，那么返回从 stringObject 的开始位置到结尾的字串。 |
返回值
| 类型 | 描述 |
|---|---|
| String | A new string containing the extracted part of the text |
实例
在本例中，我们将使用 substr() 从字符串第二个位置中提取一些字符：
var str="Hello world!";
var n=str.substr(2)
n 输出结果:
llo world!
form(表单)
form(表单)对于每个Web开发人员来说，应该是再熟悉不过的东西了，它是页面与Web服务器交互过程中最重要的信息来源。表单form的常用属性和常用的控件input如下：
1.form action属性
action 属性规定当提交表单时，向何处发送表单数据。当提交表单时，发送表单数据到名为”a.php “的文件（处理输入）：
2.form method属性
method属性可设置或者返回表单method属性值。制订了如何发送表单数据 (表单数据提交地址在action属性中指定)。
method 属性可以是get，在 URL 中添加表单数据，也可以使用使用post方法提交表单数据。
<form action="a.php " method="get" >
学号: <input type="text" name="stuId">
<input type="submit" value="查询">
</form>
表单控件
input控件
input表示form表单中的一种输入对象，其又随type类型的不同而分为文本输入框，type=”password”为密码输入框，type=”radio”/type=”checkbox”为单选/复选框，type=”button”为普通按钮等。其中type=”text”，表示输入类型是文本框,输入单行文本，这是我们见的最多也是使用最多的，比如登陆输入用户名，注册输入电话号码，电子邮件，家庭住址等等。当然这也是input的默认类型。input控件的常用属性如下：
name：同样是表示的该文本输入框名称。
size：输入框的长度大小。
maxlength：输入框中允许输入字符的最大数。
value：输入框中的默认值，根据表单name属性值和文本框name属性值可以访问到文本框对象，再访问文本框value的属性就可以得到文本框中的值。这种方式同样使用于密码框，和下拉列表框。如下:
表单名称.控件名称.value 或 表单名称.elements[下标] .value
readonly：表示该框中只能显示，不能添加修改。
placeholder：是指文本框或处于未输入状态并且未获得光标焦点时，降低显示输入提示文字不透明度，如搜索框效果：，由于placeholder是html5的新属性，仅支持html5的浏览器才支持placeholder。
实现form表单提交的onclick和onsubmit：
type= "submit" and type="reset"，分别是“提交”和“重置”两按钮。submit主要功能是将form中所有内容进行提交action页处理，reset则起快速清空所有填写内容的功能。在表单中加上onsubmit="return false;"可以阻止表单提交。
onsubmit只能表单上使用,提交表单前会触发, onclick是普通按钮等控件使用, 用来触发点击事件。在提交表单前，一般都会进行数据验证，可以选择在按钮上的onclick中验证,也可以在表单上的onsubmit中验证。
下表列出了表单对象的常用属性、方法。示例中myForm是一个表单对象。
表单对象常用方法
| 方法 | 意义 | 示例 |
|---|---|---|
| reset() | 将表单中各元素恢复到缺省值，与单击重置按钮（reset）的效果是一样的 | myForm.reset() |
| submit() | 提交表单，与单击提交按钮（submit）效果是一样的 | myForm.submit() |
表单控件元素对象的常用方法
| 方法 | 意义 |
|---|---|
| blur() | 让光标离开当前元素 |
| focus() | 让光标落到当前元素上 |
| select() | 用于种类为text，textarea，password的元素，选择用户输入的内容 |
| click() | 模仿鼠标单击当前元素 |
表单对象常用事件：onfocus：在表单元素收到输入焦点时触发；onblur：在表单元素失去输入焦点时触发。如：文本框失去焦点时，以下代码将调用myfun()函数。
<input type="text" value="" name="txtName" onblur ="myfun( )" >
input 控件常用方法
表单控件元素对象的常用方法
| 方法 | 意义 |
|---|---|
| blur() | 让光标离开当前元素 |
| focus() | 让光标落到当前元素上 |
| select() | 用于种类为text，textarea，password的元素，选择用户输入的内容 |
| click() | 模仿鼠标单击当前元素 |
表单对象常用事件：onfocus：在表单元素收到输入焦点时触发；onblur：在表单元素失去输入焦点时触发。如：文本框失去焦点时，以下代码将调用myfun()函数。
<input type="text" value="" name="txtName" onblur ="myfun( )" >
Select 对象
Select 对象代表 HTML 表单中的一个下拉列表。
在 HTML 表单中，
您可通过遍历表单的 elements[] 数组来访问某个 Select 对象，或者使用 document.getElementById()。
Select 对象集合
| 集合 | 描述 |
|---|---|
| [options] | 返回包含下拉列表中的所有选项的一个数组。 |
Select 对象属性
| 属性 | 描述 |
|---|---|
| disabled | 设置或返回是否应禁用下拉列表。 |
| form | 返回对包含下拉列表的表单的引用。 |
| id | 设置或返回下拉列表的 id。 |
| length | 返回下拉列表中的选项数目。 |
| multiple | 设置或返回是否选择多个项目。 |
| name | 设置或返回下拉列表的名称。 |
| selectedIndex | 设置或返回下拉列表中被选项目的索引号。 |
| size | 设置或返回下拉列表中的可见行数。 |
| tabIndex | 设置或返回下拉列表的 tab 键控制次序。 |
| type | 返回下拉列表的表单类型。 |
Select 对象方法
方法描述add()向下拉列表添加一个选项。blur()从下拉列表移开焦点。focus()在下拉列表上设置焦点。remove()从下拉列表中删除一个选项。
Select 对象事件句柄
| 事件句柄 | 描述 |
|---|---|
| onchange | 当改变选择时调用的事件句柄。 |
数据验证
数据验证用于确保用户输入的数据是有效的。
典型的数据验证有：
- 必需字段是否有输入?
- 用户是否输入了合法的数据?
- 在数字字段是否输入了文本?
大多数情况下，数据验证用于确保用户正确输入数据。
数据验证可以使用不同方法来定义，并通过多种方式来调用。
服务端数据验证是在数据提交到服务器上后再验证。
客户端数据验证 side validation是在数据发送到服务器前，在浏览器上完成验证。
HTML 约束验证
HTML5 新增了 HTML 表单的验证方式：约束验证（constraint validation）。
约束验证是表单被提交时浏览器用来实现验证的一种算法。
约束验证 HTML 输入属性
| 属性 | 描述 |
|---|---|
| disabled | 规定输入的元素不可用 |
| max | 规定输入元素的最大值 |
| min | 规定输入元素的最小值 |
| pattern | 规定输入元素值的模式 |
| required | 规定输入元素字段是必需的 |
| type | 规定输入元素的类型 |
