javascript笔记大全_javascript typeof function

Javascript

1. JS简介

JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：

• HTML 定义了网页的内容
• CSS 描述了网页的布局
• JavaScript 网页的行为

JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言。
JavaScript特点：

• 向HTML页面中添加交互行为
• 脚本语言，语法和Java类似
• 解释性语言，边执行边解释

JavaScript组成：ECMAScript（es5-es6）、DOM、BOM

2. 网页中如何使用javascript

• 使用

2.1 使用script标签

<script type="text/javascript">
    <!--
          JavaScript 语句;
    -->
</script >
1
2
3
4
5

2.2 外部js文件

alert('嘿嘿嘿');
<script src="index.js"></script>
1
2

2.3 直接在HTML标签中

<input name="btn" type="button" value="弹出消息框"   
   onclick="javascript:alert('欢迎你');"/>
1
2

3. javascript基本语法

3.1 输出(alter、console)

window.alert('嘿嘿嘿');  // 用于界面弹框
console.log('嘿嘿嘿');  // 通常用于调试
1
2

3.2 变量

var x=5;
var y=6;
var z=x+y;
1
2
3

命名规则：

• 变量必须以字母开头
• 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
• 变量名称对大小写敏感（y 和 Y 是不同的变量）
• 不能以特殊字符#，！/,@，+，-，*数字开头

3.3 字面量

字面量分为字符串字面量(string literal )、数组字面量(array literal)和对象字面量(object literal)，函数字面量(function literal)：

var word = 'hello';
var person = {
    name:'小王',
    age:18,
    gender:'男'
};　
1
2
3
4
5
6

3.3 JavaScript 数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空值（Null）、未定义（Undefined）、Symbol。

引用数据类型：对象(Object)、数组(Array)、函数(Function)。

PS: Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：

var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串
1
2
3

3.3.1 JavaScript 字符串

字符串是存储字符（比如 “Bill Gates”）的变量。

字符串可以是引号中的任意文本。可以使用单引号或双引号：

var carname="嘿嘿嘿";
var carname='呵呵呵';
1
2

3.3.2 JavaScript 数字

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：

var x1=34.00;   //使用小数点来写
var x2=34;     //不使用小数点来写
1
2

3.3.3 JavaScript 布尔

布尔（逻辑）只能有两个值：true 或 false。

var x=true;
var y=false;

3.3.4 javascript 数组

下面的代码创建名为 cars 的数组：

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
1
2
3
4

var cars=new Array("Saab","Volvo","BMW");
1

var cars=["Saab","Volvo","BMW"];
1

3.4 运算符

3.4.1算数运算符

字符串拼凑

var str1 = "Hello ";
var Str2 = "javascript";
var str3 = str1+str2; // Hello javascript
var str4 = str1+404;  // Hello 404
1
2
3
4

3.4.2 比较运算符

3.4.3 逻辑运算符

3.4.4 条件运算符(三目运算符)

//如果变量 age 中的值小于 18，则向变量 result 赋值 "年龄太小"，否则赋值 "年龄已达到"。
var result = (age<18)?"年龄太小":"年龄已达到";
1
2

3.5 类型转换

3.5.1 typeof 操作符

typeof 操作符: 用于查看 JavaScript 变量的数据类型。

typeof "John"                 // 返回 string
typeof 3.14                   // 返回 number
typeof NaN                    // 返回 number
typeof false                  // 返回 boolean
typeof [1,2,3,4]              // 返回 object
typeof {name:'John', age:34}  // 返回 object
typeof new Date()             // 返回 object
typeof function () {}         // 返回 function
typeof myCar                  // 返回 undefined (如果 myCar 没有声明)
typeof null  				  // 返回 object
1
2
3
4
5
6
7
8
9
10

3.5.2 constructor 属性

constructor 属性: 返回所有 JavaScript 变量的构造函数。

"John".constructor                 // 返回函数 String()  { [native code] }
(3.14).constructor                 // 返回函数 Number()  { [native code] }
false.constructor                  // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor              // 返回函数 Array()   { [native code] }
{name:'John', age:34}.constructor  // 返回函数 Object()  { [native code] }
new Date().constructor             // 返回函数 Date()    { [native code] }
function () {}.constructor         // 返回函数 Function(){ [native code] }
1
2
3
4
5
6
7

示例1：使用 constructor 属性来查看对象是否为数组 (包含字符串 “Array”)

function isArray(myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;
}
1
2
3

示例2：使用 constructor 属性来查看对象是否为日期 (包含字符串 “Date”)

function isDate(myDate) {
    return myDate.constructor.toString().indexOf("Date") > -1;
}
1
2
3

3.5.3 类型转换

• 通过使用 JavaScript 函数进行转换
• 通过 JavaScript 自身自动转换

3.5.3.1 将数字转换为字符串

全局方法 String() 可以将数字转换为字符串。

该方法可用于任何类型的数字，字母，变量，表达式：

String(x)     // 将变量 x 转换为字符串并返回
String(123)    // 将数字 123 转换为字符串并返回
String(100 + 23) // 将数字表达式转换为字符串并返回
1
2
3

Number 方法 toString() 也是有同样的效果

x.toString()
(123).toString()
(100 + 23).toString()
1
2
3

3.5.3.2 将布尔值转换为字符串

全局方法 String() 可以将布尔值转换为字符串。

String(false)     // 返回 "false"
String(true)     // 返回 "true"
1
2

Boolean 方法 toString() 也有相同的效果。

false.toString()   // 返回 "false"
true.toString()   // 返回 "true"
1
2

3.5.3.3 将日期转换为字符串

全局方法 String() 可以将日期对象转换为字符串。

// 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
String(new Date());   
1
2

Date 方法 toString() 也有相同的效果。

var obj = new Date();
// 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
obj.toString()  
1
2
3

3.5.3.4 将字符串转换为数字

Number("3.14")    // 返回 3.14
Number(" ")       // 返回 0
Number("")        // 返回 0
Number("99 88")   // 返回 NaN,不是数字
1
2
3
4

3.5.3.5 一元运算符 +

var y = "5";      // y 是一个字符串
var x = + y;      // x 是一个数字
1
2

var y = "John";   // y 是一个字符串
var x = + y;      // x 不是一个数字 (NaN)
1
2

3.5.3.6 将布尔值转换为数字

全局方法 Number() 可将布尔值转换为数字。

Number(false)   // 返回 0
Number(true)   // 返回 1
1
2

3.5.3.7 将日期转换为数字

全局方法 Number() 可将日期转换为数字。

d = new Date();
Number(d)     // 返回 1404568027739, 1970 年 1 月 1 日至今的毫秒数。
1
2

日期方法 getTime() 也有相同的效果。

d = new Date();
d.getTime()    // 返回 1404568027739, 1970 年 1 月 1 日至今的毫秒数。 n
1
2

3.5.3.8 自动转换类型

当 JavaScript 尝试操作一个 “错误” 的数据类型时，会自动转换为 “正确” 的数据类型。

5 + null  // 返回 5     null 转换为 0
"5" + null // 返回"5null"  null 转换为 "null"
"5" + 1   // 返回 "51"   1 转换为 "1" 
"5" - 1   // 返回 4     "5" 转换为 5
1
2
3
4

3.6 流程控制

3.6.1 条件语句

• if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
• if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
• if…else if…else 语句- 使用该语句来选择多个代码块之一来执行
• switch 语句 - 使用该语句来选择多个代码块之一来执行

if (20>10) {
    console.log("yes");
}
1
2
3

if (20>10) {
    console.log("yes");
}else{
	console.log("no");
}
1
2
3
4
5

var score=65;
if (score>=90) {
    console.log("A");
}else if(score>=80){
	console.log("B");
}else if(score>=70){
	console.log("C");
}else if(score>=60){
	console.log("D");
}else{
	console.log("E");
}
1
2
3
4
5
6
7
8
9
10
11
12

var d=new Date().getDay(); 
switch (d){ 
  case 0:x="今天是星期日"; 
  break; 
  case 1:x="今天是星期一"; 
  break; 
  case 2:x="今天是星期二"; 
  break; 
  case 3:x="今天是星期三"; 
  break; 
  case 4:x="今天是星期四"; 
  break; 
  case 5:x="今天是星期五"; 
  break; 
  case 6:x="今天是星期六"; 
  break; 
  default:x="期待周末";
}
console.log(x);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3.6.2 循环语句

• for - 循环代码块指定的次数
• for/in - 循环遍历对象的属性
• while - 当指定的条件为 true 时循环指定的代码块
• do/while - 同样当指定的条件为 true 时循环指定的代码块

for (var i=0; i<5; i++){
	alert(i);
}
1
2
3

var person={id:"001",name:"Gates",age:56}; 
// x 为属性名
var txt = "";
for (x in person) {
    txt=txt + person[x];
}
1
2
3
4
5
6

var i=0;
while (i<10){
    alert(i)
    i++;
}
1
2
3
4
5

var i=0;
do{
	alert(i)
    i++;
}while (i<10)
1
2
3
4
5

3.6.3 break 和 continue 语句

for (var i=0;i<10;i++){
    if (i==3){
        break;
    }
   	alert(i);
}
1
2
3
4
5
6

for (var i=0;i<10;i++){
    if (i==3){
        continue; // 退出本次循环，继续下一轮的循环
    }
   	alert(i);
}
1
2
3
4
5
6

4.函数

4.1 函数声明

语法 :

function functionName(parameters) {
  执行的代码
}
1
2
3

函数声明后不会立即执行，会在我们需要的时候调用到。

function myFunction(a, b) {
  return a * b;
}
1
2
3

4.2 函数表达式

JavaScript 函数可以通过一个表达式定义。

函数表达式可以存储在变量中：

var x = function (a, b) {
	return a * b;
};
1
2
3

函数表达式存储在变量中，该变量也可作为一个函数使用（结尾处要带分号）：

var x = function (a, b) {return a * b};
var z = x(4, 3);
alert(z);
1
2
3

以上函数实际上是一个 匿名函数 (函数没有名称)。

函数存储在变量中，不需要函数名称，通过变量名来调用。

4.3 自调用函数

函数表达式可以 “自调用”，即表达式会自动调用。

(function () {
  var x = "Hello!!";   // 我将调用自己
})();
1
2
3

PS: 通过添加括号，来说明它是一个函数表达式, 不能自调用声明的函数。

4.4 函数也是对象

在 JavaScript 中使用 typeof 操作符判断函数类型将返回 “function” 。

所以把JavaScript 函数描述为一个对象更加准确。

JavaScript 函数有 属性 和 方法。

arguments.length 属性返回函数调用过程接收到的参数个数：

function myFunction(a, b) {
  	return arguments.length;
}
1
2
3

toString() 方法将函数作为一个字符串返回:

function myFunction(a, b) {
	return a * b;
}
var txt = myFunction.toString();
1
2
3
4

4.5 箭头函数

ES6 新增了箭头函数。箭头函数表达式的语法比普通函数表达式更简洁。

(参数1, 参数2, …, 参数N) => { 函数声明 } //无返回值

(参数1, 参数2, …, 参数N) => 表达式(单一)  
// 相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }
1
2
3
4

//只有一个参数时，圆括号是可选的
(单一参数) => {函数声明}
单一参数 => {函数声明}

// 没有参数的函数,写成一对圆括号
() => {函数声明}
1
2
3
4
5
6

// ES5
var x = function(x, y) {
     return x * y;
}
 
// ES6 使用 const 比使用 var 更安全，因为函数表达式始终是一个常量。
const x = (x, y) => x * y;
1
2
3
4
5
6
7

4.6 函数参数

4.6.1 参数设置默认值

ES6 支持对函数参数设置默认值

function myFunction(x, y = 10) {
    return x + y;
}
 
myFunction(0, 2) // 输出 2
myFunction(5); // 输出 15, y参数使用默认值
1
2
3
4
5
6

4.6.2 判断参数值为空

在调用带参数的函数时，若要判断是否传入了参数值，可以使用以下方式：

function myFunction(x, y) {
	// 判断是否传入了参数值
    if (y === undefined) {
          y = 0;
    } 
    return x*y;
}

// 简单写法
function myFunction(x, y) {
    y = y || 0;
    return x*y;
}

// 执行
var res = myFunction(4); //0
var res1 = myFunction(4,5); //20

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

5. 闭包

变量作用域

var num=10; //全局变量
function myFun(){
	alert(num);
	var num1 = 20; //局部变量
}
alert(num1); // 无法访问
1
2
3
4
5
6

计数器困境

假设想实现一个计数器：

var counter = 0;
function add(){
	counter++;
	return counter;
}

add(); //1
add(); //2
add(); //3
1
2
3
4
5
6
7
8
9

上述代码，基本没问题。但是，全局变量counter，除了能被add()方法修改，还可以被其他代码或函数修改。

若希望计数器，只能被add()方法修改，上述代码是无法实现的。

若我们把代码修改为以下形式：

function add(){
	var counter = 0;
	counter++;
	return counter;
}
add();
add();
add();
1
2
3
4
5
6
7
8

counter变量，现在定义在add()内部后，在外部是无法访问，且只能在add()内部被修改，但是，每次调用add()后，其实是无法实现计数的效果。

继续对上述方法进行改造…

在 JavaScript 中，所有函数都能访问它们上一层的作用域。

JavaScript 支持嵌套函数。嵌套函数可以访问上一层的函数变量。

function add(){
	var counter=0；
    function plus(){
        counter++;
    }
    plus(); // 调用函数
    plus();
    plus();
    return counter;
}
1
2
3
4
5
6
7
8
9
10

现在，在add()的内部，调用plus(), 是可以实现我们想要的效果。但是，我们是无法在外部调用plus()的。

故，如果解决了目前不能在外部调用plus()的问题，我们最终的问题就解决了。这个解决的办法，就是闭包。

如何解决？

思路：函数的自我调用

var add = (function(){
	var counter = 0;
	return function(){
		return counter++;	
	}
})();

add();//1
add();//2
add();//3
1
2
3
4
5
6
7
8
9
10

分析：

• 自我调用函数，执行一次，设置计数器初始值为0，并且把匿名方法返回出去，保存在add变量中。
• add变量此时就可以当作函数使用，里面保存的就是function(){return counter++;}
• 每次调用add时，就相当于调用function(){return counter++;}, 实现对计数器的值的修改操作。
• 上述的操作，就是闭包的操作。

闭包：是一种保护私有变量的机制，在函数执行时，形成私有的作用域，保护其内部的私有变量不受外界干扰，从而形成了一个不销毁的栈环境。

6.this

javascript中this的作用：

• 在方法中，this 表示该方法所属的对象。
• 如果单独使用，this 表示全局对象。
• 在函数中，this 表示全局对象。
• 在事件中，this 表示接收事件的元素。

// 在方法中，this 表示该方法所属的对象。
var person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
1
2
3
4
5
6
7
8
9

// 在函数中，this 表示全局对象
function myFunction() {
  return this;
}
1
2
3
4

// 在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素
<button onclick="this.style.display='none'">
点我后我就消失了
</button>
1
2
3
4

7. let与const

ECMAScript2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。

7.1 let

let 声明的变量只在 let 命令所在的代码块内有效。

var num=10;
{
	var num=20;
}
alert(num); //20
1
2
3
4
5

上述代码有什么问题？

块内的变量申明会影响到块外的变量

如何解决呢？

var num=10;
{
	// let 声明的变量只在 let 命令所在的代码块内有效。
	let num=20;
}
alert(num); //10
1
2
3
4
5
6

浏览器的支持：

循环作用域:

// 使用 var 关键字
var i = 5;
for (var i = 0; i < 10; i++) {
    // 一些代码...
}
alert(i); // i 为 10

// 使用 let 关键字
let i = 5;
for (let i = 0; i < 10; i++) {
    // 一些代码...
}
alert(i); // i 为 5
1
2
3
4
5
6
7
8
9
10
11
12
13

HTML 代码中使用全局变量:

var carName = "Volvo"; // 可以使用 window.carName 访问变量
let carName = "Volvo"; // 不能使用 window.carName 访问变量
1
2

重置变量:

// 使用 var 关键字声明的变量在任何地方都可以修改实例
var x = 2;  
var x = 3; 
alert(x); // 现在 x 为 3
1
2
3
4

// 在相同的作用域或块级作用域中，
// 不能使用 let 关键字来重置 var 关键字声明的变量
var x = 2;       // 合法
let x = 3;       // 不合法
{
    var x = 4;   // 合法
    let x = 5   // 不合法
}
1
2
3
4
5
6
7
8

// 在相同的作用域或块级作用域中
// 不能使用 let 关键字来重置 let 关键字声明的变量:
let x = 2;       // 合法
let x = 3;       // 不合法
{
    let x = 4;   // 合法
    let x = 5;   // 不合法
}
1
2
3
4
5
6
7
8

// 在相同的作用域或块级作用域中
// 不能使用 var 关键字来重置 let 关键字声明的变量
let x = 2;       // 合法
var x = 3;       // 不合法
{
    let x = 4;   // 合法
    var x = 5;   // 不合法
}
1
2
3
4
5
6
7
8

// let 关键字在不同作用域
// 或不同块级作用域中是可以重新声明赋值的
let x = 2;       // 合法
{
    let x = 3;   // 合法
}
{
    let x = 4;   // 合法
}
1
2
3
4
5
6
7
8
9

变量提升:

// var 关键字定义的变量,可以先使用再声明
carName = "Volvo";
alert(carName); // 此处可以直接使用
var carName;

 let 关键字定义的变量，需要先声明再使用
carName = "BMW";// 在这里不可以使用 carName 变量
let carName;
1
2
3
4
5
6
7
8

7.2 const

const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改

const PI = 3.141592653589793;
PI = 3.14;      // 报错
PI = PI + 10;   // 报错
1
2
3

const定义常量与使用let 定义的变量相似：

• 二者都是块级作用域
• 都不能和它所在作用域内的其他变量或函数拥有相同的名称

两者还有以下两点区别：

• const声明的常量必须初始化，而let声明的变量不用
• const 定义常量的值不能通过再赋值修改，也不能再次声明。而 let 定义的变量值可以修改。

var x = 10;
{ 
    const x = 2;
    alert(x)// 这里输出 x 为 2
}
alert(x);// 这里输出 x 为 10
1
2
3
4
5
6

// const 声明的常量必须初始化

// 错误写法
const PI;
PI = 3.14159265359;

// 正确写法
const PI = 3.14159265359;
1
2
3
4
5
6
7
8

8.JSON

• JSON 英文全称 JavaScript Object Notation
• JSON 是一种轻量级的数据交换格式。
• JSON 是用于存储和传输数据的格式。
• JSON 通常用于服务端向网页传递数据 。

8.1 JSON 语法规则

• 数据为 键/值 对。
• 数据由逗号分隔。
• 大括号保存对象
• 方括号保存数组

// json对象
var jsonObj = {"sites":[
    {"name":"iweb", "url":"www.iweb-edu.com"}, 
    {"name":"jd", "url":"www.jd.com"},
    {"name":"bing", "url":"cn.bing.com"}
]}
// js对象
var person1={name:"tom", age:20, gender:"男"}
//JSON对象
var person2={"name":"tom", "age":20, "gender":"男"}
1
2
3
4
5
6
7
8
9
10

JSON 格式在语法上与创建 JavaScript 对象代码是相同的。

由于它们很相似，所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象。

JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。故，通常我们从服务器中读取 JSON 文本数据，转为对象后，并在网页中显示数据。

// 从服务器获取到的json字符串
var jsonStr='{"name":"tom", "age":20, "gender":"男"}';
var obj = JSON.parse(jsonStr); // 转为js对象
for (const key in obj) {
    alert(obj[key]);
}
1
2
3
4
5
6

// 对象转字符串
var jsonObj={"name":"tom", "age":20, "gender":"男"}
var str = JSON.stringify(jsonObj); // 转为json字符串
alert(str);
1
2
3
4

9.DOM操作

9.1 什么是DOM

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树：

9.2 查找html元素

• 通过 id 找到 HTML 元素
• 通过标签名找到 HTML 元素
• 通过类名找到 HTML 元素

var a=document.getElementById("intro");
var b=document.getElementsByClassName("intro");
var c=x.getElementsByTagName("p");
1
2
3

9.3 改变 HTML 输出流

<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
1
2
3
4
5
6
7
8

PS: 绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。

9.4 改变 HTML 内容

<body>
    <p id="p1">这是个段落</p>

    <script type="text/javascript">
        document.getElementById("p1").innerHTML='<a href="#">test</a>';
        //document.getElementById("p1").innerText='<a href="#">test</a>';
    </script >
</body>
1
2
3
4
5
6
7
8

9.5 改变 HTML 属性

<body>
    <a id="a1" href="www.baidu.com">test</a>

    <script>
        document.getElementById("a1").href='http://cn.bing.com';
    </script >
</body>
1
2
3
4
5
6
7

9.6 改变 HTML 样式

语法：

document.getElementById(id).style.property=新样式
1

<body>
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>

<script>
    document.getElementById("p2").style.color = "blue";
    document.getElementById("p2").style.fontFamily = "Arial";
    document.getElementById("p2").style.fontSize = "40px";
</script>
</body>
1
2
3
4
5
6
7
8
9
10

9.7 DOM事件

• 当用户点击鼠标时
• 当网页已加载时
• 当图像已加载时
• 当鼠标移动到元素上时
• 当输入字段被改变时
• 当提交 HTML 表单时
• 当用户触发按键时

我们可以在以上事件发生时执行 JavaScript。

<h1 onclick="this.innerHTML='变为小弟'">我是老大</h1>
1

// 事件发生时，调用函数
<h1 onclick="change(this)">我是老大</h1>

function change(obj){
	obj.innerText = "变为小弟";
}
1
2
3
4
5
6

9.7.1 HTML 事件属性

如需向 HTML 元素分配 事件，您可以使用事件属性。

<button onclick="displayDate()">点这里</button>
1

也可以使用 HTML DOM 来分配事件：

document.getElementById("myBtn").onclick=function(){displayDate()};
1

9.7.2 onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

<body onload="javascript:alert('加载onload事件')">
1

9.7.3 onchange 事件

onchange 事件常结合对输入字段的验证来使用。

<input type="text" id="username" onchange="upperCase(this)">

function upperCase(obj){
    obj.value = obj.value.toUpperCase();
}
1
2
3
4
5

9.7.4 onSubmit

onSubmit 用于在提交表单之前验证所有的表单域。

下面是一个使用 onSubmit 事件的例子。当用户单击表单中的确认按钮时，checkForm() 函数就会被调用。假若域的值无效，此次提交就会被取消。checkForm() 函数的返回值是 true 或者 false。如果返回值为true，则提交表单，反之取消提交。

<form method="post" action="xxx.htm" onsubmit="return checkForm()">

function checkForm(){
	// 检查表单元素的值, 结合正则表达式进行复杂规则验证
	
	return true;
	//return false;
}
1
2
3
4
5
6
7
8

10.JS正则表达式RegExp

正则表达式描述了字符的模式对象。

当检索某个文本时，可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。

简单的模式可以是一个单独的字符。

更复杂的模式包括了更多的字符，并可用于解析、格式检查、替换等等。

语法：

var patt=new RegExp(pattern,modifiers);
var patt=/pattern/modifiers; //简写
1
2

• 模式描述了一个表达式模型。
• 修饰符(modifiers)描述了检索是否是全局，区分大小写等。
  • i - 修饰符是用来执行不区分大小写的匹配。
  • g - 修饰符是用于执行全文的搜索（而不是在找到第一个就停止查找,而是找到所有的匹配）。

var str = "Hello Javascript!";
var pattern = /i/i;
var pattern2 = /z/i;
alert(str.match(pattern)); // null
alert(str.match(pattern2)); //i
alert(pattern.test(str)); // true
alert(pattern2.test(str)); // false

var pattern3 = new RegExp("w",g);
alert(pattern3.test(str)); // null
1
2
3
4
5
6
7
8
9
10

PS：带领学生阅读js开发手册，学习匹配规则

如: 匹配国内座机号码，带领学生阅读一下的匹配规则：

var telNo = "025-83403836";
var pattern = /\d{3}-\d{8}|\d{4}-\{7,8}/;
1
2

参考网站：常用的正则表达式

11.定时任务

• window.setInterval() - 间隔指定的毫秒数重复执行指定的代码
• window.setTimeout() - 在指定的毫秒数后执行一次指定代码

setTimeout(function(){alert("哈哈")}, 3000); // 3秒后执行一次
// 每三秒执行一次，注意不同的写法
setInterval(test, 3000);
    function test(){
    alert("haha");
}
1
2
3
4
5
6

<body>
<p>在页面显示一个时钟</p>
<p id="demo"></p>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
	var d=new Date();
	var t=d.toLocaleTimeString();
	document.getElementById("demo").innerHTML=t;
}
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12

如何停止定时任务？

• clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。
• clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

<body>
<p>在页面显示一个时钟</p>
<p id="demo"></p>
<button onclick="stop()">停止</button>
<button onclick="start()">开始</button>
<script>
    var myVar = setInterval(function () {
        myTimer();
    }, 1000);
    function myTimer() {
        var d = new Date();
        var t = d.toLocaleTimeString();
        document.getElementById("demo").innerHTML = t;
    }
    function stop() {
        clearInterval(myVar);
    }
    function start() {
    	// 注意不需要再定义一个定时器变量，直接使用之前定义好的
        myVar = setInterval(function () {
            myTimer();
        }, 1000);
    }
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

12.全局函数

以eval()为例，讲解全局函数的使用方法:

eval() 函数计算 JavaScript 字符串，并把它作为脚本代码来执行。

如果参数是一个表达式，eval() 函数将执行表达式。如果参数是Javascript语句，eval()将执行 Javascript 语句。

eval('alert("aaa")');
eval(“mytest()”);//执行mytest()函数。

1
2
3