JavaScript

1、课程名称：JavaScript

2、知识点

2.1、上次课程的主要知识点

HTML静态网页中必须掌握的：

1）表单的使用

a) <form>：用来提交表单中的数据。

i. action：设置提交路径

ii. method：提交的方式，get和post

b) 表单中的各种元素

i. <input>：各种表单输入元素，根据type类型来区分，默认是text

text：文本框，输入单行文字
password：密码框
radio：单选
checkbox：多选
hidden：隐藏域

ii. <textarea>：多行文本

iii. <select>：下拉列表

<option>：一个选项
<optgroup>：分组选项

c) 元素常用的属性

i. name：表单元素的名称，允许重复

ii. id：所有表单元素的唯一标识，不允许重复，在javascript中使用，css中也可以用到id。

iii. radio和checkbox专用的属性，默认选中：checked

iv. textarea中设置行数和列数：rows，cols

v. option设置默认选中：selected

2）表格的使用

a) <table>

b) <tr>

c) <td>

i. 属性注意单元格的合并

colspan
rowspan

d) 其他

i. <th>

ii. <thead>

iii. <tbody>

iv. <tfoot>

3） div和span

a) div：层，主要用来实现一些特效或漂亮的页面。

b) span：块，主要用在错误信息的提示上。

样式表要求掌握：

1）导入样式文件：<link>

2）会使用css中设置好的样式

a) class

3）行内直接编写样式

a) style

4）样式中，需要了解display属性的作用

a) 通过该属性可以控制元素显示还是隐藏，默认为显示

i. none：隐藏

ii. block：显示

2.2、本次预计讲解的知识点

3、具体内容

3.1、动态网页技术概述

最早的静态网页技术主要由：HTML + image组成，用户只能查看网页中的内容，而无法改变或与网页进行交互。

之后，为了能与用户进行简单的交互，让用户访问时可以支持一些特效，加入了javascript。

为了能与数据库交互，之后出现了各种动态网页技术。

最先出现的是Applet。但这种方式最大的问题是访问速度和安全性。

为了解决这些问题，出现了以下各种动态网页技术：

1） asp

2） php

3） jsp

4） aspx

通过动态网页技术，可以让服务器支持连接数据库，以及进行程序判断和处理。

对于这种服务器，需要单独进行安装和配置，服务器一般使用Tomcat，JBoss，GlassFish，WebLogic，WebSphere等。

3.2、JavaScript基本语法

JavaScript的前身是LiveScript，与Java语言没有任何关系。由NetScape（网景）公司最早开发完成的页面脚本语言，可以嵌入到HTML网页中执行一些程序代码。

现在，为了统一规范，W3C将JavaScript规定为HTML官方脚本语言，并规范了其开发语法，使现在所有浏览器都必须支持javascript语法。

如果想在HTML中加入一段JavaScript代码，必须使用<script>标签来完成。

alert("Hell World");

</script>

这里可以通过type或language来设置使用的语法格式为javascript

alert()表示js提供的一个方法，用来弹出提示窗，可以显示一段文字。

alert在开发中一般用来调试代码，不会给用户提示。

3.2.1、JavaScript中的数据类型

JavaScript是一门基于对象的语言，但并不面向对象，因为没有面向对象的特征。

但现在有人专门为JavaScript开发了一些扩展支持库，这些库都加入了面向对象的特点。

JavaScript显示只支持一种数据类型，通过关键字var表示。

其具体类型需要根据所设置的值来决定，主要有以下几种类型：

1）数字型

a) 整型

b) 浮点型

2）字符型（字符串）

3） boolean型

4）数组，在js中，建立数组使用new Array()来建立，其长度不固定，可以改变，根据设置的最后一个值的下标来决定。

5）对象，类似java中的对象，每一个页面元素都可以在js中表示成为一个对象。

a) 对象中会包含其属性和方法

6） undefined：就是null，当没有设置值时，就是该类型。

数字类型与字符串直接可以进行转换，主要通过以下方式：

1）数字 à 字符串：

var a = 10 + "";

alert(a + a);

只需要加入一个空白字符串即可。

2）字符串 à 数字

a) 整型

var a = "10";

var num = parseInt(a);

alert(num + num);

b) 浮点型

var a = "10.5";

var num = parseFloat(a);

alert(num + num);

如果字符串不合法，会出现以下两种情况：

1）如果字符串以数字开头，则会自动截取出数字部分

2）如果字符串非数字开头，则会提示NaN（Not a Number）

3.2.2、JavaScript中的循环和判断

在JavaScript里也支持循环和判断语句。

判断同样使用if…else或switch令中方式来完成。

这里的if…else判断时，判断条件中可以不放入boolean类型的数据。

如果加入的数据是null（undefined）或””或0，则按照false来处理。

如果加入的是其他数据，则按true来处理。

var a = "adsf";

if (a) {

alert("真");

} else {

alert("假");

}

循环也与java语言没有区别，也支持while循环和for循环。

注意for循环使用时，需要定义的数据类型。

for (var i = 1; i <= 10 ;i++ )

{

alert(i);

}

3.2.3、JavaScript中方法的声明和使用

在使用方法前，先要声明一个方法。

声明方法的语法为：function 方法名

方法中可以传入参数，因此声明方法时，可以设置传入的参数，但不需要设置参数类型（因为设置也只能是var，因此就不设置了）

function add(a,b) {

var sum = a + b;

return sum;

}

声明好方法后，可以通过方法名，以及传入参数来调用。

function add(a,b) {

var sum = a + b;

return sum;

}

alert(add(3,5));

如果声明了多个重名的方法，则只会调用最后一个。

如果非要实现重载的功能，可以动态读取参数个数，来判断要怎样处理。

function add() {

// 通过此属性，可以取得方法传入的所有参数，结果为数组

var args = add.arguments ;

var sum = 0;

if (args.length == 2) {

// 2个参数

sum = args[0] + args[1];

} else if (args.length == 3) {

// 3个参数

sum = args[0] + args[1] + args[2];

} else {

// 其他情况

sum = "参数错误";

}

return sum;

}

alert(add(1,2,6,10));

方法声明的主要目的是重用，js中如果想让方法重用，必须将其声明到一个单独的js文件中，想使用时再导入。

</script>

alert(add(3,5));

</script>

注意，如果一个<script>标签通过src导入了某个js文件，则无法再在里面编写javascript代码，必须单独定义一个<script>编写其他的代码。

3.3、JavaScript的事件驱动模型

JavaScript如果想与页面的HTML进行交互，必须通过事件来完成，因此js属于事件驱动模式的开发。

事件指的是用户对页面上某些元素进行的一些操作，例如：点按钮，在文本框中输入内容，鼠标悬停到某个元素上，鼠标拖放。

开发中会将事件与某个或某些js方法绑定，当用户进行操作时，自动执行对应的js方法，从而与用户进行交互。

3.3.1、页面事件onload、onunload

onload：当页面加载完成时自动执行的事件。

function welcome() {

alert("欢迎光临");

}

</script>

</HEAD>

</BODY>

onunload：当关闭或离开页面时，自动执行的事件

function welcome() {

alert("欢迎光临");

}

function exit() {

alert("下次再来");

}

</script>

</HEAD>

</BODY>

3.3.2、点击事件onclick

该事件一般是加入到按钮或一些可以点击的页面元素上。

例如：配合按钮和div，完成一个层的显示和隐藏。

function showDiv() {

// 根据id，取得页面上的某个元素

var mydiv = document.getElementById("mydiv");

// 修改取得到的div的style里的display值

mydiv.style.display = "";

}

function closeDiv() {

var mydiv = document.getElementById("mydiv");

// 改为隐藏

mydiv.style.display = "none";

}

</script>

</HEAD>

<BODY>

</center>

</div>

</BODY>

注意document.getElementById的使用。

在使用javascript开发时，为了能更好的与页面元素交互，document对象提供了以下几个方法，来取得页面上的元素。

1） document.getElementById()：根据id取得元素，只能取得一个元素。如果有多个id相同的元素，则只处理第一个元素。

2） document.getElementsByName()：根据name取得元素，一般用在单选或多选框中。

a) 例如：完成全选功能。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

function checkedAll() {

// 取得全选框的选中状态

var allboxChecked = document.getElementById("allbox").checked;

// 返回的是所有多选框的数组

var allMail = document.getElementsByName("mail");

// 循环设置每一个多选框的选中状态

for (var i = 0;i < allMail.length;i++) {

allMail[i].checked = allboxChecked;

}

</script>

</HEAD>

<BODY>

</center>

</BODY>

</HTML>

以上操作中，取得全选的选中状态还需要调用getElementById，比较复杂。

开发中还有以下的写法。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

// 接收到的就是全选框的选中状态

function checkedAll(allboxChecked) {

// 返回的是所有多选框的数组

var allMail = document.getElementsByName("mail");

// 循环设置每一个多选框的选中状态

for (var i = 0;i < allMail.length;i++) {

allMail[i].checked = allboxChecked;

}

</script>

</HEAD>

<BODY>

</center>

</BODY>

</HTML>

这里的this表示当前对象，也就是全选框的<input>元素，.checked表示取得该元素的选中状态，并在调用方法时，传入到方法中。

3） document.getElementsByTagName()：根据标签名称取得元素，返回的也是多个元素。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

// 接收到的就是全选框的选中状态

function checkedAll(allboxChecked) {

// 返回的是所有多选框的数组

var allMail = document.getElementsByTagName("input");

// 循环设置每一个多选框的选中状态

for (var i = 0;i < allMail.length;i++) {

allMail[i].checked = allboxChecked;

}

</script>

</HEAD>

<BODY>

<input type="radio" name="sex" value="男" > 男

<input type="radio" name="sex" value="女" > 女

</center>

</BODY>

</HTML>

注意，使用时容易出现问题，因此开发中尽量不要用或少用。

3.3.3、验证时最常用的事件onkeyup，onblur（重点事件）

onblur是当页面元素失去焦点时调用方法。

onkeyup则是当输入的按键抬起时调用事件。

这两个事件都可以在表单输入时，完成输入的验证。

新版本的项目基本都是onkeyup。

例如：

完成长度不少于6位的输入验证。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

function checkUserid() {

// 取得这个userid

var userid = document.getElementById("userid");

// 判断其文字长度

if (userid.value.length < 6) {

// 输入不合法

// 取得span，并加入提示内容

document.getElementById("useridMessage").innerHTML = "<font color='red'>长度不能少于6位！</font>";

} else {

// 输入合法

document.getElementById("useridMessage").innerHTML = "<font color='green'>输入合法！</font>";

}

</script>

</HEAD>

<BODY>

用户名：<input type="text" id="userid" name="userid" onkeyup="checkUserid();">

<span id="useridMessage">请输入6位以上的文字</span>

<br>

</center>

</BODY>

</HTML>

也可以改为显示图片的形式。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

function checkUserid() {

// 取得这个userid

var userid = document.getElementById("userid");

// 判断其文字长度

if (userid.value.length < 6) {

// 输入不合法

// 取得span，并加入提示内容

document.getElementById("useridMessage").innerHTML = "<img src='false.png'>";

} else {

// 输入合法

document.getElementById("useridMessage").innerHTML = "<img src='true.png'>";

}

</script>

</HEAD>

<BODY>

用户名：<input type="text" id="userid" name="userid" onkeyup="checkUserid();">

<span id="useridMessage">请输入6位以上的文字</span>

<br>

</center>

</BODY>

</HTML>

注意，提前准备好图片。

通过这种事件，配合正则表达式，可以完成各种数据格式的验证。

例如：

验证邮件地址是否合法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

function checkUserid() {

// 取得这个userid

var userid = document.getElementById("userid");

// 判断其文字长度

if (userid.value.length < 6) {

// 输入不合法

// 取得span，并加入提示内容

document.getElementById("useridMessage").innerHTML = "<img src='false.png'>";

} else {

// 输入合法

document.getElementById("useridMessage").innerHTML = "<img src='true.png'>";

}

function checkEmail() {

// 取得邮件地址的值

var email = document.getElementById("email").value;

// 声明要验证的表达式规则

var regex = /^\w+@\w+(\.\w+)+$/;

// 调用验证

if (regex.test(email)) {

document.getElementById("emailMessage").innerHTML = "<img src='true.png'>";

} else {

document.getElementById("emailMessage").innerHTML = "<img src='false.png'>";

}

</script>

</HEAD>

<BODY>

用户名：<input type="text" id="userid" name="userid" onkeyup="checkUserid();">

<span id="useridMessage">请输入6位以上的文字</span>

<br>

邮件地址：<input type="text" id="email" name="email" onkeyup="checkEmail();">

<br>

</center>

</BODY>

</HTML>

通过类似的验证规则，可以完成其他的各种验证功能，例如：身份证号，电话号码，金额等。

还可以通过onkeyup，完成文本域输入时的字数统计功能。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

function checkUserid() {

// 取得这个userid

var userid = document.getElementById("userid");

// 判断其文字长度

if (userid.value.length < 6) {

// 输入不合法

// 取得span，并加入提示内容

document.getElementById("useridMessage").innerHTML = "<img src='false.png'>";

} else {

// 输入合法

document.getElementById("useridMessage").innerHTML = "<img src='true.png'>";

}

function checkEmail() {

// 取得邮件地址的值

var email = document.getElementById("email").value;

// 声明要验证的表达式规则

var regex = /^\w+@\w+(\.\w+)+$/;

// 调用验证

if (regex.test(email)) {

document.getElementById("emailMessage").innerHTML = "<img src='true.png'>";

} else {

document.getElementById("emailMessage").innerHTML = "<img src='false.png'>";

}

function countWords() {

// 取得文本域

var content= document.getElementById("content")

// 取得文本域中文字的数量

var count = content.value.length;

// 将剩余可输入的文字数量计算出来。

var lastCount = 255 - count;

// 判断是否为大于等于0的数字

if (lastCount >= 0) {

// 显示到span中

document.getElementById("contentMessage").innerHTML = "剩余 " + lastCount + " 字可以输入";

} else {

document.getElementById("contentMessage").innerHTML = "超过了 <font color='red'>" + (-lastCount) + "</font> 字";

}

</script>

</HEAD>

<BODY>

用户名：<input type="text" id="userid" name="userid" onkeyup="checkUserid();">

<span id="useridMessage">请输入6位以上的文字</span>

<br>

邮件地址：<input type="text" id="email" name="email" onkeyup="checkEmail();">

<br>

自我介绍：<textarea cols="30" rows="5" id="content" name="content" onkeyup="countWords();"></textarea>

<span id="contentMessage">剩余 255 字可以输入</span>

<br>

</center>

</BODY>

</HTML>

3.3.4、验证拦截事件onsubmit（重点事件）

之前的表单验证只能将错误提示给用户，但无法限制用户的提交操作，即便输入错误，用户点提交按钮时，也一样可以提交通过表单，进入其他页面。

这时需要加入<form>的onsubmit事件，通过该事件在提交表单时，拦截提交操作，判断是否允许通过。

该事件中必须返回一个boolean类型的值，默认为true，如果为false，则表示不允许提交通过。

一般开发中，都编写一个单独的表单提交时的验证方法，通过该方法，返回验证结果。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

function checkUserid() {

// 取得这个userid

var userid = document.getElementById("userid");

// 判断其文字长度

if (userid.value.length < 6) {

// 输入不合法

// 取得span，并加入提示内容

document.getElementById("useridMessage").innerHTML = "<img src='false.png'>";

return false;

} else {

// 输入合法

document.getElementById("useridMessage").innerHTML = "<img src='true.png'>";

return true;

}

function checkEmail() {

// 取得邮件地址的值

var email = document.getElementById("email").value;

// 声明要验证的表达式规则

var regex = /^\w+@\w+(\.\w+)+$/;

// 调用验证

if (regex.test(email)) {

document.getElementById("emailMessage").innerHTML = "<img src='true.png'>";

return true;

} else {

document.getElementById("emailMessage").innerHTML = "<img src='false.png'>";

return false;

}

function countWords() {

// 取得文本域

var content= document.getElementById("content")

// 取得文本域中文字的数量

var count = content.value.length;

// 将剩余可输入的文字数量计算出来。

var lastCount = 255 - count;

// 判断是否为大于等于0的数字

if (lastCount >= 0) {

// 显示到span中

document.getElementById("contentMessage").innerHTML = "剩余 " + lastCount + " 字可以输入";

return true;

} else {

document.getElementById("contentMessage").innerHTML = "超过了 <font color='red'>" + (-lastCount) + "</font> 字";

return false;

}

function check() {

var flag1 = checkUserid();

var flag2 = checkEmail();

var flag3 = countWords();

return flag1 && flag2 && flag3;

}

</script>

</HEAD>

<BODY>

用户名：<input type="text" id="userid" name="userid" onkeyup="checkUserid();">

<span id="useridMessage">请输入6位以上的文字</span>

<br>

邮件地址：<input type="text" id="email" name="email" onkeyup="checkEmail();">

<br>

自我介绍：<textarea cols="30" rows="5" id="content" name="content" onkeyup="countWords();"></textarea>

<span id="contentMessage">剩余 255 字可以输入</span>

<br>

</form>

</center>

</BODY>

</HTML>

3.3.5、鼠标悬停事件onmouseover，onmouseout

一般用来完成按钮图片切换以及行变色功能。

例如：行变色

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

</script>

</HEAD>

<BODY>

</TR>

</TR>

</TR>

</TR>

</TABLE>

</center>

</BODY>

</HTML>

按钮改变图片

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

function changeToFalse() {

// 取得要改变的<img>

var img = document.getElementById("buttonImg");

// 改变其src属性

img.src = "false.png";

}

function changeToTrue() {

// 取得要改变的<img>

var img = document.getElementById("buttonImg");

// 改变其src属性

img.src = "true.png";

}

</script>

</HEAD>

<BODY>

</TR>

</TR>

</TR>

</TR>

</TABLE>

<BR>

<br>

</center>

</BODY>

</HTML>

3.3.6、鼠标拖放事件onmousedown，onmousemove，onmouseup

在官方的称呼中，拖放操作称为DD。

通过程序，可以对可浮动的div实现拖放操作。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

// 加入一个是否拖动的标志位

var flag = false;

function startDrag() {

flag = true;

document.getElementById("message").innerHTML = "开始拖动";

}

function startDrop() {

flag = false;

document.getElementById("message").innerHTML = "结束拖动，放下DIV";

}

function moving(e) {

// 必须判断当前是否处在拖动状态

if (flag) {

// 移动div，需要取得鼠标当前的坐标位置

var x = e.clientX ;

var y = e.clientY ;

document.getElementById("message").innerHTML = "x：" + x + "， y：" + y;

// 根据鼠标坐标，改变div的left和top值

// 取得div

var mydiv = document.getElementById("mydiv");

// 修改横坐标

mydiv.style.left = x - 50 + "px";

// 修改纵坐标

mydiv.style.top = y - 25 + "px";

}

</script>

</HEAD>

</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</div>

<br>

<span id="message">未进行操作</span>

</center>

</BODY>

</HTML>

3.3.7、下拉列表的处理事件onchange

onchange事件是值改变时自动调用的事件，一般都用在下拉列表的选项改变上，当完成AJAX联动菜单时会用到。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

</script>

</HEAD>

请选择所在地：<select onchange="alert(this.value);">

</select>

</center>

</BODY>

</HTML>

3.4、JavaScript中的内置对象

在javascript中，包含一些不需要声明就可以直接使用的对象，例如：document。

常用的对象有：

1） window：浏览器窗口对象，该对象的所有方法，在调用时可以不需要对象名.方法名，而直接通过方法名调用，例如：alert()

2） document：用来取得页面元素的

3） event：事件专用对象，只有当发生事件时，才会取得并使用。

4） location：地址栏对象，可以取得当前地址栏的值或改变地址栏的值（相当于切换到了其他的页面，因此可以通过改变此值实现自动进入其他页面的功能。）

5） history：历史记录对象，用来操作返回，前进和刷新按钮的。

3.4.1、window对象

window对象可以实现打开新窗口，关闭当前窗口的功能，方法为：open，close（开发中基本不用。）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

function openNewPage() {

window.open("suc.html","新窗口","location:no");

window.close();

}

</script>

</HEAD>

请选择所在地：<select onchange="alert(this.value);">

</select>

</center>

</BODY>

</HTML>

除了以上方法外，window对象还可以实现弹出对话框或确认框的功能。

对话框使用alert()，确认框使用confirm()。

开发中，在删除操作时，一般都使用确认框进行确认。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

function check() {

// 可以接收选择结果

var result = window.confirm('确定要删除该数据吗？');

// 将结果返回，并根据结果是true还是false决定是否跳转到其他页面。

return result;

}

</script>

</HEAD>

<BODY>

</center>

</BODY>

</HTML>

也可以简化为以下形式

</center>

window对象还有一个可以完成定时任务的方法，主要用来实现一些特效，以及计时功能的。

例如：

倒计时

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

var time = 5;

function startCountdown() {

// 可以根据时间进行自减操作

time--;

var str = time;

// 补0操作

if (str < 10) {

str = "0" + str;

}

document.getElementById("time").innerHTML = "00:" + str;

// 可以加入判断

if (time > 0) {

// 开始定时调用

window.setTimeout("startCountdown();",1000);

} else {

// 提示已经到点

alert("到点收菜了");

}

function startCountdownAd() {

// 取得div，并取得里面的top值

var div = document.getElementById("addiv");

var top = div.style.top;

top = parseInt(top.substring(0,top.length - 2));

// 让top值增加

top += 5;

div.style.top = top + "px";

if (top < 0) {

window.setTimeout("startCountdownAd();",20);

}

function closeDivAd() {

// 取得div，并取得里面的top值

var div = document.getElementById("addiv");

var top = div.style.top;

top = parseInt(top.substring(0,top.length - 2));

// 让top值减少

top -= 5;

div.style.top = top + "px";

if (top > -150) {

window.setTimeout("closeDivAd();",20);

}

</script>

</HEAD>

我是广告！

<br>

</div>

</center>

</BODY>

</HTML>

3.4.2、location对象

可以实现改变地址栏，从而切换到别的页面的功能。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

function changePage() {

location = "suc.html";

}

</script>

</HEAD>

</BODY>

</HTML>

3.4.5、history对象

history对象可以通过go方法来完成后退，前进，刷新的功能。

<BODY>

第二页的页面！<br>

</BODY>

参数中如果传入负数表示返回某页，正数表示前进某页，0表示刷新当前页。

4、总结

1、掌握JavaScript声明方法的代码，以及将方法放到js中并导入的代码。

2、了解JavaScript中的常用数据类型以及类型间的转换。

3、掌握重点事件：onkeyup，onsubmit的使用，并可以通过正则表达式，完成各种表单验证。

4、了解几个基本的内置对象和常用的方法（confirm()，go()）

5、预习任务

1、Tomcat服务器

2、JSP基本语法

6、作业

No.

表达式

描述

完成表单验证功能

要求：

用户名必须为6 – 16位

姓名必须输入，且不能超过10位

密码必须6 – 16位

两次密码必须一致。

邮件地址必须合法

电话必须为：手机号（11位数字）或座机号（3-4位数字 – 7-8位数字）

所有多选框中至少要选中一个，如果哪个都没有选中，则不允许提交

posted @ 2022-07-31 09:19 思江阅读(47) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· JavaScript学习

· JavaScript学习2

· JavaScript

· JavaScript知识点总结

阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？

公告

昵称：思江
园龄： 7年7个月
粉丝： 47
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

思江

JavaScript

1、课程名称：JavaScript

2、知识点

2.1、上次课程的主要知识点

2.2、本次预计讲解的知识点

3、具体内容

3.1、动态网页技术概述

3.2、JavaScript基本语法

3.2.1、JavaScript中的数据类型

3.2.2、JavaScript中的循环和判断

3.2.3、JavaScript中方法的声明和使用

3.3、JavaScript的事件驱动模型

3.3.1、页面事件onload、onunload

3.3.2、点击事件onclick

3.3.3、验证时最常用的事件onkeyup，onblur（重点事件）

3.3.4、验证拦截事件onsubmit（重点事件）

3.3.5、鼠标悬停事件onmouseover，onmouseout

3.3.6、鼠标拖放事件onmousedown，onmousemove，onmouseup

3.3.7、下拉列表的处理事件onchange

3.4、JavaScript中的内置对象

3.4.1、window对象

3.4.2、location对象

3.4.5、history对象

4、总结

5、预习任务

6、作业

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论