阿炫coding

# JavaScript 基础语法

# 第一章 JavaScript 的使用

# 标签引用




 


alert:控制价浏览器弹出一个警告框
document.write() //可以向body中输出内容
在页面中输出一个内容
控制台输出内容：
console.log（）

<script>
  console.log('输出一条日志') //最常用
  console.info('输出一条信息')
  console.warn('输出一条警告')
  console.error('输出一条错误')
</script>

可以将 js 代码编写到标签的 onclick 属性中

ppOa0sK.png (opens new window)

可以将 js 代码编写到超链接标签的 href 属性中

ppOaBqO.png (opens new window)

会出现耦合，不方便维护

可以写在 script 标签中

外部 js 文件 通过 script 标签




 



<script type="" src="">


</script>

# JavaScript 的注释

  • 单行注释：// 注释内容
  • 多行注释：/* 注释内容 */

# 第二章 JavaScript 基础语法

# 2.1 标识符

  • 第一个字符必须是一个字母、下划线（ _ ）或一个美元符号（ $ ）。
  • 其它字符可以是字母、下划线、美元符号或数字。
  • 按照惯例，ECMAScript 标识符采用驼峰命名法。
  • 标识符不能是关键字和保留字符。

关键字： ppOaaxx.png (opens new window)

保留字符： ppOaNGR.png (opens new window)

# 2.2、字面量和变量

# 2.2.1、字面量

字面量不可改变

# 2.2.2、变量

js 中经常使用的是变量

例：var a=123;

# 2.3、数据类型

# 2.3.1、类型分类

JavaScript 中一共有 5 种基本数据类型：

  • 字符串型（String）
  • 数值型（Number）
  • 布尔型（Boolean）
  • undefined 型（Undefined）
  • null 型（Null)

这 5 种之外的类型都称为 Object，所以总的来看 JavaScript 中共有六种数据类型。

# 2.3.2、typeof 运算符

-----用来查看当前变量的数据类型




 


例如：console.log(typeof 123);

运行结果为：number

# 2.3.3、String

String 用于表示一个字符序列，即字符串。字符串需要使用 单引号 或 双引号 括起来。

转义字符： ppOati9.png (opens new window)

# 2.3.4、Number

- 最大值：+1.7976931348623157e+308 - 最小值：-1.7976931348623157e+308 - 0以上的最小值：5e-324

特殊的数字：




 

- Infinity：正无穷
- -Infinity：负无穷
- NaN：非法数字（Not A Number）
注意：使用typeof检查一个Number类型的数据时（包括NaN 和 Infinity），会返回"number"。

# 2.3.5、Boolean

# 2.3.6、Undefined

注意：使用 typeof 对没有初始化和没有声明的变量，会返回“undefined”。

# 2.3.7、Null

Null 类型是第二个只有一个值的数据类型，这个特殊的值是 null。

undefined 值实际上是由 null 值衍生出来的，所以如果比较 undefined 和 null 是否相等，会返回 true。

注意：从语义上看 null 表示的是一个空的对象，所以使用 typeof 检查 null 会返回一个 Object。

# 2.4、强制类型转换

一般是指，将其它的数据类型转换为 String、Number、Boolean。

# 2.4.1、转换为 String 类型

将其它数值转换为字符串有三种方式：toString()、String()、 拼串。

示例：




 












- 方式一：调用被转换数据类型的toString()方法，该方法不会影响到原变量，它会将转换的结果返回，但是注意：null和undefined这两个值没有toString()方法，如果调用它们的方法，会报错。

  **var** a=123;

​    a=a.toString();

​    console.log(a)

​    console.log(typeof a)

输出结果：

123

string



 























- 方式二：调用String()函数，并将被转换的数据作为参数传递给函数，使用String()函数做强制类型转换时，对于Number和Boolean实际上就是调用的toString()方法，**但是对于null和undefined，就不会调用toString()方法，它会将 null 直接转换为 “null”，将 undefined 直接转换为 “undefined”。**

var a = 123;
a = String(a);
console.log(a);
console.log(typeof a);

var b = undefined;
b = String(b);
console.log(b);
console.log(typeof b);

var c = null;
c = String(c);
console.log(c);
console.log(typeof c);

运行结果：
123
string
---
undefined
string
----
null
string
  • 方式三：为任意的数据类型 +""
var a = 123
a = a + ''
console.log(a)
console.log(typeof a)

# 2.4.2、转换为 Number 类型

有三个函数可以把非数值转换为数值：Number()、parseInt() 和 parseFloat()。Number()可以用来转换任意类型的数据，而后两者只能用于转换字符串。parseInt()只会将字符串转换为整数，而 parseFloat()可以将字符串转换为浮点数。

  • 方式一：使用 Number()函数

    字符串 --> 数字 如果是纯数字的字符串，则直接将其转换为数字 如果字符串中有非数字的内容，则转换为 NaN 如果字符串是一个空串或者是一个全是空格的字符串，则转换为 0 布尔 --> 数字 true 转成 1 false 转成 0 null --> 数字 null 转成 0 undefined --> 数字 undefined 转成 NaN

  • 方式二 这种方式专门用来对付字符串，选择 parseInt（）把一个字符串转换为一个整数

    var a = '123'
a = parseInt(a)
console.log(a)
console.log(typeof a)

  • 方式三：这种方式专门用来对付字符串，parseFloat() 把一个字符串转换为一个浮点数

var a = '123.456'
a = parseFloat(a)
console.log(a)
console.log(typeof a)

注意：如果对非 String 使用 parseInt()或 parseFloat()，它会先将其转换为 String 然后在操作

# 2.4.3、转换为 Boolean 类型

只能用 Boolean（）函数

  • 使用 Boolean()函数

  • 数字 —> 布尔

    • 除了 0 和 NaN，其余的都是 true

  • 字符串 —> 布尔

    • 除了空串，其余的都是 true

  • null 和 undefined 都会转换为 false

  • 对象也会转换为 true

# 2.5、运算符

typeof 也是一种运算符 ppOaUR1.png (opens new window)

# 2.5.2、关系运算符

ppOawM6.png (opens new window)

# 2.5.3、赋值运算符

ppOarZD.png (opens new window)

# 2.5.4、逻辑运算符

ppOasde.png (opens new window)

# 2.5.5、比较运算符

使用 == 来做相等运算

当使用==来比较两个值时，如果值的类型不同，则会自动进行类型转换，将其转换为相同的类型，然后在比较

使用 != 来做不相等运算

不相等用来判断两个值是否不相等，如果不相等返回true，否则返回false，不相等也会对变量进行自动的类型转换，如果转换后相等它也会返回false

使用 === 来做全等运算

用来判断两个值是否全等，它和相等类似，不同的是它不会做自动的类型转换，如果两个值的类型不同，直接返回false

使用 !== 来做不全等运算

用来判断两个值是否不全等，它和不等类似，不同的是它不会做自动的类型转换，如果两个值的类型不同，直接返回true

# 2.5.6、条件运算符


语法：`variablename=(condition)?value1:value2;`

举例：`result=(age<18)?"年龄太小":"年龄合适";`

执行流程：如果condition为true，则执行语句1，并返回执行结果，如果为false，则执行语句2，并返回执行结果。

# 2.5.7、逗号运算符

比如：var num1=1, num2=2, num3=3;

# 2.6、运算符优先级

查表就行

# 2.7、代码块

# 2.7.1、语句

JavaScript 的程序就是由一条一条语句构成的，每一条语句使用;结尾。

# 2.7.2、代码块

{
  var a = 123
  a++
  alert(a)
}

# 2.8、条件语句

最基本的条件语句：

  • if…else
  • switch…case

# 2.8.1、if…else




 










- 形式一

**var** a=18;

​    if(a<18)

​    console.log("未成年")

​    else

​    console.log("已成年")
  • 形式二



 







  var age = 18;
  if (age < 18) {
      console.log("小于18岁了");
  } else if (age == 18) {
      console.log("已经18岁了");
  } else {
      console.log("大于18岁了")
  }

# 2.8.2、switch…case




 























var today = 1;
switch (today) {
    case 1:
        console.log("星期一");
        break;
    case 2:
        console.log("星期二");
        break;
    case 3:
        console.log("星期三");
        break;
    case 4:
        console.log("星期四");
        break;
    case 5:
        console.log("星期五");
        break;
    case 6:
        console.log("星期六");
        break;
    case 7:
        console.log("星期日");
        break;
    default:
        console.log("输入错误");
}

# 2.9、循环语句

最基本的循环语句：

  • while
  • do…while
  • for

# 2.9.1、while

var i = 1
while (i <= 10) {
  console.log(i)
  i++
}

# 2.9.2、do…while-----至少执行一次。

var i = 1
do {
  console.log(i)
  i++
} while (i <= 10)

# 2.9.3、for

for (var i = 1; i <= 10; i++) {
  console.log(i)
}

# 2.9.4、跳转控制




 










- break：结束最近的一次循环，可以在循环和switch语句中使用。
- continue：结束本次循环，执行下一次循环，只能在循环中使用。

**outer**: for (var i = 0; i < 10; i++) {
    for (var j = 0; j < 10; j++) {
        if (j == 5) {
            break **outer**;
        }
        console.log(j);
    }
}

# 2.10、对象基础

# 2.10.2、创建对象

  • 方式一
var person = new Object()
person.name = '孙悟空'
person.age = 18
console.log(person)

  • 方式二

    var person = {
  name: '孙悟空',
  age: 18
}
console.log(person)

# 2.10.3、访问属性

对象.属性名

# 2.10.4、删除属性

delete 对象.属性名



 








 var person=new  Object()

​    person.name="孙悟空";

​    person.age=18;

​    console.log(person);

​    delete person.name;

​    console.log(person)

# 2.10.5、遍历对象

枚举遍历对象中的属性，可以使用 for … in 语句循环，对象中有几个属性，循环体就会执行几次。




 












 **var** person =new Object()

​      person.name="张无忌";

​      person.age=18;

​      person.address="武当山"

​      for(**var** personNum in person){

​        **var** personAb=person[personNum];

​        console.log(personAb)

​      }

# 2.10.6、数据类型梳理

# 2.10.6.1、基本数据类型

基本数据类型的比较是值的比较，也就是只要两个变量的值相等，我们就认为这两个变量相等。

# 2.10.6.2、引用数据类型

当从一个变量向另一个变量复制引用类型的值时，会将对象的引用复制到变量中，并不是创建一个新的对象。

这时，两个变量指向的是同一个对象。因此，改变其中一个变量会影响另一个。（即引用传递）

# 2.10.7、栈和堆梳理

简单来说栈内存用来保存变量和基本类型，堆内存是用来保存对象。跟 java 一样

# 2.11、函数

# 2.11.1、概述

如果只是对函数进行了声明，其中的代码并不会执行，只有在调用函数时才会执行函数体内部的代码。

这里要注意的是 JavaScript 中的函数也是一个对象，使用 typeof 检查一个函数对象时，会返回 function。

# 2.11.2、函数创建

  • 使用 函数声明 来创建一个函数（比较常用）

示例代码：

function fun() {
  console.log('这是我的第二个函数')
}

  • 使用 函数表达式 来创建一个函数（比较常用）

    var fun = function () {
  console.log('这是我的第三个函数')
}

# 2.11.3、函数调用

  • 对于无参函数调用：

    // 函数声明
var fun = function () {
  console.log('哈哈，我执行啦！')
}

// 函数调用
fun()

  • 对于有参函数调用：

// 函数声明
var sum = function (num1, num2) {
  var result = num1 + num2
  console.log('num1 + num2 = ' + result)
}

// 函数调用
sum(10, 20)

# 2.11.4、函数参数

  • JS 中的所有的参数传递都是按值传递的，也就是说把函数外部的值赋值给函数内部的参数，就和把值从一个变量赋值给另一个变量是一样的，在调用函数时，可以在()中指定实参（实际参数），实参将会赋值给函数中对应的形参
  • 调用函数时，解析器不会检查实参的类型，所以要注意，是否有可能会接收到非法的参数，如果有可能，则需要对参数进行类型的检查，函数的实参可以是任意的数据类型
  • 调用函数时，解析器也不会检查实参的数量，多余实参不会被赋值，如果实参的数量少于形参的数量，则没有对应实参的形参将是 undefined

# 2.11.5、函数返回值

注意：在函数中 return 后的语句都不会执行，如果 return 语句后不跟任何值就相当于返回一个 undefined，如果函数中不写 return，则也会返回 undefined，return 后可以跟任意类型的值

function sum(num1, num2) {
  return num1 + num2
}

var result = sum(10, 20)
console.log(result)

# 2.11.6、嵌套函数

嵌套函数只能在当前函数中可以访问，在当前函数外无法访问。

function fu() {
  function zi() {
    console.log('我是儿子')
  }

  zi()
}

fu()

# 2.11.7、匿名函数

var fun = function () {
  alert('我是一个匿名函数')
}

fun()

匿名函数：没有名字的函数就是匿名函数，它可以让一个变量来接收，也就是用 “函数表达式” 方式创建和接收。

# 2.11.8、立即执行函数

立即执行函数：函数定义完，立即被调用，这种函数叫做立即执行函数，立即执行函数往往只会执行一次。

;(function () {
  alert('我是一个匿名函数')
})()

# 2.11.9、对象中的函数




 








对象的属性值可以是任何的数据类型，也可以是个函数。

var person = {
    name: "zhangsan",
    age: 18,
    sayHello: function () {
        console.log(name + " hello")
    }
}

person.sayHello();

# 2.11.10、this 对象




 













//创建一个全局变量name
var name = "全局变量name";

//创建一个函数
function fun() {
    console.log(this.name);
}

//创建一个对象
var obj = {
    name: "孙悟空",
    sayName: fun
};

//我们希望调用obj.sayName()时可以输出obj的名字而不是全局变量name的名字
obj.sayName();

# 2.12、对象进阶

# 2.12.1、用工厂方法创建对象----同时创建多个对象




 











// 使用工厂模式创建对象
function createPerson(name, age) {
    // 创建新的对象
    var obj = new Object();
    // 设置对象属性
    obj.name = name;
    obj.age = age;
    // 设置对象方法
    obj.sayName = function () {
        console.log(this.name);
    };
    //返回新的对象
    return obj;
}

利用循环造多个对象

for (var i = 1; i <= 1000; i++) {
  var person = createPerson('person' + i, 18)
  console.log(person)
}

# 2.12.2、用构造函数创建对象

  • 每一个构造函数你都可以理解为一个类别，用构造函数所创建的对象我们也成为类的实例
  • 普通函数是直接调用，而构造函数需要使用 new 关键字来调用。
  • 创建方式和普通函数没有区别
  • 但是它创建对象和返回对象都给我们隐藏了，使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个类。



 















// 使用构造函数来创建对象
function Person(name, age) {
    // 设置对象的属性
    this.name = name;
    this.age = age;
    // 设置对象的方法
    this.sayName = function () {
        console.log(this.name);
    };
}

var person1 = new Person("孙悟空", 18);
var person2 = new Person("猪八戒", 19);
var person3 = new Person("沙和尚", 20);

console.log(person1);
console.log(person2);
console.log(person3);

# this 的注意点

  • 当以函数的形式调用时，this 是 window
  • 当以方法的形式调用时，谁调用方法 this 就是谁
  • 当以构造函数的形式调用时，this 就是新创建的那个对象

我们可以使用 instanceof 运算符检查一个对象是否是一个类的实例 返回值是布尔类型

# 2.12.3、原型




 












































每个对象的方法是一样的，可以抽取出来，作为全局函数

// 使用构造函数来创建对象
function Person(name, age) {
    // 设置对象的属性
    this.name = name;
    this.age = age;
    // 设置对象的方法
    this.sayName = sayName
}

// 抽取方法为全局函数
function sayName() {
    console.log(this.name);
}

var person1 = new Person("孙悟空", 18);
var person2 = new Person("猪八戒", 19);
var person3 = new Person("沙和尚", 20);

person1.sayName();
person2.sayName();
person3.sayName();

**如果要是涉及到多人协作开发一个项目，别人也有可能叫sayName这个方法，这样在工程合并的时候就会导致一系列的问题，污染全局作用域**

**-------------------解决方法：这就需要原型对象了**

// 使用构造函数来创建对象
function Person(name, age) {
    // 设置对象的属性
    this.name = name;
    this.age = age;
}

// 在Person类的原型对象中添加方法
Person.prototype.sayName = function() {
    console.log(this.name);
};

var person1 = new Person("孙悟空", 18);
var person2 = new Person("猪八戒", 19);
var person3 = new Person("沙和尚", 20);

person1.sayName();
person2.sayName();
person3.sayName();

# 那原型（prototype）到底是什么呢？

我们所创建的每一个函数，解析器都会向函数中添加一个属性 prototype，这个属性对应着一个对象，这个对象就是我们所谓的原型对象

原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，我们可以将对象中共有的内容，统一设置到原型对象中。

创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，这样不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法了。

# 2.12.4、原型链

它的作用就是查找对象的属性(方法)。

注意：Object 对象是所有对象的祖宗，Object 的原型对象指向为 null，也就是没有原型对象

# 2.13.3、作用域链

多个上下级关系的作用域形成的链，它的方向是从下向上的(从内到外)，查找变量时就是沿着作用域链来查找的。

查找一个变量的查找规则：

在当前作用域下的执行上下文中查找对应的属性，如果有直接返回，否则进入2
在上一级作用域的执行上下文中查找对应的属性，如果有直接返回，否则进入3
再次执行2的相同操作，直到全局作用域，如果还找不到就抛出找不到的ReferenceError异常

# 3.2.1、call()和 apply()

call()和 apply()这两个方法都是函数对象的方法，需要通过函数对象来调用，当对函数调用 call()和 apply()都会调用函数执行，在调用 call()和 apply()可以将一个对象指定为第一个参数，此时这个对象将会成为函数执行时的 this，call()方法可以将实参在对象之后依次传递，apply()方法需要将实参封装到一个数组中统一传递，如下演示：




 













function fun(a, b) {
    console.log("a = " + a);
    console.log("b = " + b);
    console.log("fun = " + this);
}

var obj = {
    name: "obj",
    sayName: function () {
        console.log(this.name);
    }
};

fun(2, 3);
console.log("===============");
fun.call(obj, 2, 3);

# 3.2.2、this 指向

  • 以函数形式调用时，this 永远都是 window

  • 以方法的形式调用时，this 是调用方法的对象

  • 以构造函数的形式调用时，this 是新创建的那个对象

  • 使用 call 和 apply 调用时，this 是传入的那个指定对象

    #

# 3.6、RegExp 对象

# 3.6.1、概述

正则表达式用于定义一些字符串的规则，计算机可以根据正则表达式，来检查一个字符串是否符合规则，获取将字符串中符合规则的内容提取出来。

使用 typeof 检查正则对象，会返回 object。

# 3.6.2、创建正则对象

# 3.6.2.1、使用对象创建

语法格式：

var 变量名 = new RegExp('正则表达式', '匹配模式')

匹配模式：

  • i：忽略大小写
  • g：全局匹配模式
  • ig：忽略大小写且全局匹配模式

# 3.6.2.2、使用字面量创建

var 变量名 = /正则表达式/匹配模式;

匹配模式：

  • i：忽略大小写
  • g：全局匹配模式
  • m：执行多行匹配

注意：可以为一个正则表达式设置多个匹配模式，且顺序无所谓

# 3.6.3、正则进阶

需求信息：创建一个正则表达式，检查一个字符串中是否有 a 或 b

语法格式：使用 | 表示或者的意思

// 这个正则表达式可以来检查一个字符串中是否含有a
var reg = /a|b|c/
var str = 'Abc'
var result = reg.test(str)
console.log(result)

试想一下，如果我们现在要是想要检查一个字符串是否含有小写字母，那我们是不是可以reg = /a|b|c|d|e|f|g ... /;这么写，但是你会发现，好啰嗦啊，怎么这么麻烦呢，有没有一种更简单的方式，答案是肯定的。

需求信息：创建一个正则表达式，检查一个字符串中是否有字母

语法格式：[ ] 里的内容也是或的关系

// 这个正则表达式可以来检查一个字符串中是否含有字母
var reg = /[A-z]/
var str = 'Abc'
var result = reg.test(str)
console.log(result)

常见组合：

  • [a-z]：任意小写字母
  • [A-Z]：任意大写字母
  • [A-z]：任意字母
  • [0-9]：任意数字

需求信息：创建一个正则表达式，检查一个字符串中是否含有 abc 或 adc 或 aec

// 这个正则表达式可以来检查一个字符串中是否含有abc或adc或aec
var reg = /a[bde]c/
var str = 'abc123'
var result = reg.test(str)
console.log(result)

那现在我们已经学会了判断是否包含，那要是判断除了某些字符序列该咋整，只需要这么写[^字符序列]

常见组合：

  • [^a-z]：除了任意小写字母
  • [^A-Z]：除了任意大写字母
  • [^A-z]：除了任意字母
  • [^0-9]：除了任意数字

需求信息：创建一个正则表达式，检查一个字符串中是否除了数字还有其它字母

// 这个正则表达式可以来检查一个字符串中是否除了数字还有其它字母
var reg = /[^0-9]/
var str = '0123456789'
var result = reg.test(str)
console.log(result)

# 3.6.4、正则方法

这些正则方法其实都是字符串的方法，但是它的参数需要传递正则表达式，在这里，我就先称为正则方法。

split()方法演示：该方法可以将一个字符串拆分为一个数组，方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串，这个方法即使不指定全局匹配，也会全都插分

var str = '1a2b3c4d5e6f7'
var result = str.split(/[A-z]/)
console.log(result)

search()方法演示：该方法可以搜索字符串中是否含有指定内容，如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回-1，它可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串，serach()只会查找第一个，即使设置全局匹配也没用

var str = 'hello abc hello aec afc'
var result = str.search(/a[bef]c/)
console.log(result)

match()方法演示：该方法可以根据正则表达式，从一个字符串中将符合条件的内容提取出来，默认情况下我们的 match()只会找到第一个符合要求的内容，找到以后就停止检索，我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容，可以为一个正则表达式设置多个匹配模式，且顺序无所谓，match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果

var str = '1a2a3a4a5e6f7A8B9C'
var result = str.match(/[a-z]/gi)
console.log(result)

replace()方法演示：该方法可以将字符串中指定内容替换为新的内容，默认只会替换第一个，但是可以设置全局匹配替换全部

参数：

  • 第一个参数：被替换的内容，可以接受一个正则表达式作为参数

  • 第二个参数：新的内容

var str = '1a2a3a4a5e6f7A8B9C'
var result = str.replace(/[a-z]/gi, '@_@')
console.log(result)

3.6.5、正则量词

通过量词可以设置一个内容出现的次数，量词只对它前边的一个内容起作用，如果有多个内容可以使用 () 括起来，常见量词如下：

{n} ：正好出现n次
{m,} ：出现m次及以上
{m,n} ：出现m-n次
+ ：至少一个，相当于{1,}
* ：0个或多个，相当于{0,}
? ：0个或1个，相当于{0,1}

# 3.6.6、正则高阶

如果我们要检查或者说判断是否以某个字符或者字符序列开头或者结尾就会使用^和$。

  • ^ ：表示开头，注意它在[^字符序列]表达的意思不一样

  • $ ：表示结尾

  • 那如果我们想要检查一个字符串中是否含有.和\就会使用转义字符

    • \. ：表示.
    • \\ ：表示\

    注意：使用构造函数时，由于它的参数是一个字符串，而\是字符串中转义字符，如果要使用\则需要使用\\来代替

除了以上两种特殊的字符，其实还有很多如下所示：

\w ：任意字母、数字、_，相当于[A-z0-9_]
\W ：除了字母、数字、_，相当于[^A-z0-9_]
\d ：任意的数字，相当于[0-9]
\D ：除了任意的数字，相当于[^0-9]
\s ：空格
\S ：除了空格
\b ：单词边界
\B ：除了单词边界

# 3.6.7、正则案例

# 3.6.7.1、检查手机号

var phoneStr = '15131494600'
var phoneReg = /^1[3-9][0-9]{9}$/
console.log(phoneReg.test(phoneStr))

# 3.6.7.2、检查邮箱号

var emailStr = 'abc.def@163.com'
var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/
console.log(emailReg.test(emailStr))

# 6.0 数组

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>各省的信息</title>
</head>
<body>
  <table cellpadding="1" bgcolor="#CC00FF">
    <tr height="30" bgcolor="#FFF">
      <td align="center" width="50">序号</td>
      <td align="center" width="100">省份</td>
      <td align="center" width="100">省会</td>
      <td align="center" width="260">旅游景点</td>
    </tr>
      <script type="text/javascript">
          var province=new Array("广东省","湖南省","福建省");
          var city=new Array("广州","长沙","福州");
          var tourist=new Array("广州塔，广州博物馆","橘子洲，长沙一条街","福建山水甲天下，福州美食")
          for (var i=0;i<province.length;i++){
              document.write("<tr height=26 bgcolor='#FFFFFF'>")
              document.write("<td align='center'>"+(i+1)+"</td>")
              document.write("<td align='center'>"+province[i]+"</td>")
              document.write("<td align='center'>"+city[i]+"</td>")
              document.write("<td align='center'>"+tourist[i]+"</td>")
              document.write("</tr>")
          }
      </script>
  </table>

</body>
</html>

# 6.1 定义数组：

# 6.1.1 定义空数组

同类型有序数组创建：

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
1

不同类型有序数组创建：

var arr = [1, '2', 3, '4', 5, '6', 7, '8', 9]

# 6.1.2 指定数组长度

arrayObject =new Array（size）

# 6.1.3、遍历数组

for (var i = 0; i < arr.length; i++) {
  console.log(arr[i])
}

用 delete 运算符删除数组，前后元素的个数没有改变，改变的知识被删除数组元素的值，该值变为 undefined。

# 6.1.4 数组的属性

length 属性演示：设置或返回数组元素的个数

var arr = [1, 2, 3, 4]
console.log(arr.length)

constructor 属性演示：返回创建数组对象的原型函数

var arr = [1, 2, 3, 4]
console.log(arr.constructor)

prototype 属性演示：为数组对象添加自定义的属性或方法

Array.prototype.outlast=function (){
    document.write(this.[this.length-1])
}
var arr=new Array(1,2,3,4,5,6,9,7)
arr.outlast()

# 6.1.5、数组方法

push()方法方法演示：该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度

var arr = ['孙悟空', '猪八戒', '沙和尚']
var result = arr.push('唐僧', '蜘蛛精', '白骨精', '玉兔精')
console.log(arr)
console.log(result)

pop()方法演示：该方法可以删除数组的最后一个元素，并将被删除的元素作为返回值返回

var arr = ['孙悟空', '猪八戒', '沙和尚']
var result = arr.pop()
console.log(arr)
console.log(result)

unshift()方法演示：该方法向数组开头添加一个或多个元素，并返回新的数组长度

var arr = ['孙悟空', '猪八戒', '沙和尚']
var result = arr.unshift('牛魔王', '二郎神')
console.log(arr)
console.log(result)

shift()方法演示：该方法可以删除数组的第一个元素，并将被删除的元素作为返回值返回

var arr = ['孙悟空', '猪八戒', '沙和尚']
var result = arr.shift()
console.log(arr)
console.log(result)

splice()方法演示：该方法可以用于删除数组中的指定元素，该方法会影响到原数组，会将指定元素从原数组中删除，并将被删除的元素作为返回值返回

参数：

第一个参数：表示开始位置的索引
第二个参数：表示要删除的元素数量
第三个参数及以后参数：可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边



 




var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"];
var result = arr.splice(3, 2);
console.log(arr);
console.log(result);
result = arr.splice(1, 0, "牛魔王", "铁扇公主", "红孩儿");
console.log(arr);
console.log(result);

ppOayIH.png (opens new window)




 




concat()方法演示：该方法可以连接两个或多个数组，并将新的数组返回，该方法不会对原数组产生影响**

var arr = ["孙悟空", "猪八戒", "沙和尚"];
var arr2 = ["白骨精", "玉兔精", "蜘蛛精"];
var arr3 = ["二郎神", "太上老君", "玉皇大帝"];
var result = arr.concat(arr2, arr3, "牛魔王", "铁扇公主");
console.log(result);

# 4.0 JavaScript 事件处理

<body>
<input type="button" value="保存" name="save" id="save">
</body>
<script>
    var saveBtn=document.getElementById("save")
    saveBtn.onclick=function (){
        alert("点击了保存按钮")
    }
</script>

# 4.4.1、事件概述

HTML 事件可以触发浏览器中的行为，比方说当用户点击某个 HTML 元素时启动一段 JavaScript。

# 4.4.2、窗口事件

由窗口触发该事件 (同样适用于

标签)：

属性 描述
onblur 当窗口失去焦点时运行脚本。
onfocus 当窗口获得焦点时运行脚本。
onload 当文档加载之后运行脚本。
onresize 当调整窗口大小时运行脚本。
onstorage 当 Web Storage 区域更新时（存储空间中的数据发生变化时）运行脚本。

# 4.4.3、表单事件

表单事件在 HTML 表单中触发 (适用于所有 HTML 元素，但该 HTML 元素需在 form 表单内)：

属性 描述
onblur 当元素失去焦点时运行脚本。
onfocus 当元素获得焦点时运行脚本。
onchange 当元素改变时运行脚本。
oninput 当元素获得用户输入时运行脚本。
oninvalid 当元素无效时运行脚本。
onselect 当选取元素时运行脚本。
onsubmit 当提交表单时运行脚本。
<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>

<form>
    <input type="text" id="text">
</form>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->

<script>
    var textInput = document.getElementById("text");

/* 当文本框获取焦点，文本框背景为红色 */
textInput.onfocus = function () {
    this.style.background = "red";
};

/* 当文本框失去焦点，文本框背景为绿色 */
textInput.onblur = function () {
    this.style.background = "green";
};

​ 注意：这里为什么要用 this，你不用 this 也可以，就直接textInput.style.background = "red";也不是不可以的，但是方法的调用规则就是谁调用 this，this 就指向谁，这样我们就可以简化代码了 示例：

# 改变文本框中字体的颜色

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>表单事件测试</title>
  </head>
  <body>
    <form action="" name="form">
      <input type="text" name="textfield" size="18" value="零基础学JavaScript" />
      <select name="menu" onchange="Fcolor()">
        <option value="black">黑色</option>
        <option value="red">红色</option>
        <option value="green">绿色</option>
        <option value="blue">蓝色</option>
        <option value="yellow">黄色</option>
        <option value="purple">紫色</option>
      </select>
    </form>
  </body>
  <script>
    function Fcolor() {
      var event = window.event
      var obj = event.srcElement
      form.textfield.style.color = obj.value
    }
  </script>
</html>

案例演示 2：当文本框内容改变时，鼠标离开文本框，自动将文本框的内容输出到控制台




 






















<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form>
    <input type="text" id="text">
</form>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->

<script>
    var textInput = document.getElementById("text");


    /* 当文本框内容改变时，鼠标离开文本框，自动将文本框的内容输出到控制台 */
    textInput.onchange = function () {
        console.log(this.value);
    };

</script>
</body>
</html>

案例演示3：当文本框内容改变时，立即将改变的内容输出到控制台




 






















<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form>
    <input type="text" id="text">
</form>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->

<script>
    var textInput = document.getElementById("text");


    /* 当文本框内容改变时，立即将改变的内容输出到控制台 */
    textInput.oninput = function () {
        console.log(this.value);
    };

</script>
</body>
</html>

案例演示 4：如果单击“submit”，则不填写文本字段，将发生警报消息




 























<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form>
    <input type="text" id="text" required>
    <input type="submit" value="submit">
</form>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->

<script>
    var textInput = document.getElementById("text");


    /* 如果单击“submit”，则不填写文本字段，将发生警报消息 */
    textInput.oninvalid = function () {
        console.log("请您完善表单内容！");
    };

</script>
</body>
</html>

案例演示 5：当选中文本框的内容时，输出“您已经选择了文本框内容！”




 






















<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form>
    <input type="text" id="text">
</form>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->

<script>
    var textInput = document.getElementById("text");


    /* 当选中文本框的内容时，输出“您已经选择了文本框内容！” */
    textInput.onselect = function () {
        console.log("您已经选择了文本框内容！");
    };

</script>
</body>
</html>

# 4.4.4、键盘事件

通过键盘触发事件，类似用户的行为：

属性 描述
onkeydown 当按下按键时运行脚本。
onkeyup 当松开按键时运行脚本。
onkeypress 当按下并松开按键时运行脚本。

案例演示 1：当键盘按下判断当前的按键是不是 a ，如果是就输出 true，否则输出 false




 
























<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->

<script>
    /* 当键盘按下判断当前的按键是不是 a ，如果是就输出true，否则输出false */
    window.onkeydown = function (event) {
        /* 解决兼容性问题 */
        event = event || window.event;


        if (event.keyCode == 65) {
            console.log("true");
        } else {
            console.log("false");
        }
    };

</script>
</body>
</html>

# 鼠标事件

通过鼠标触发事件，类似用户的行为：

ppOacid.png (opens new window)

# 4.4.5 鼠标单击事件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <script>
    var array = new Array('olive', 'teal', 'red', 'blue', 'maroon', 'navy', 'lime', 'fuschia', 'green', 'purple')
    var n = 0
    function change() {
      if (n == Array.length - 1) {
        n = 0
      }
      n++
      document.bgColor = array[n]
    }
  </script>
  <body>
    <form action="" name="form" method="post">
      <input type="button" value="更换背景颜色" onclick="change()" />
    </form>
  </body>
</html>

# 4.4.6 鼠标按下和松开事件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <p id="p1" onmousedown="onmousedown()" onmouseup="onmouseup()"><u>零基础学JavaScript</u></p>
    <script type="text/javascript">
      function onmousedown() {
        var elementById = document.getElementById('p1')
        elementById.style.color = '#0022AA'
      }
      function onmouseup() {
        var elementById = document.getElementById('p1')
        elementById.style.color = '#AA9900'
      }
    </script>
  </body>
  <style>
    p:hover {
      color: #aa9900;
      cursor: pointer;
    }
  </style>
</html>

# 4.4.7 鼠标移入移出事件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <div id="box" style="width: 100px;height: 100px;background: black;"></div>

    <!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
    <script>
      var box = document.getElementById('box')

      /* 当鼠标移入div，背景颜色变为红色 */
      box.onmouseenter = function () {
        this.style.background = 'red'
      }

      /* 当鼠标移出div，背景颜色变为绿色 */
      box.onmouseleave = function () {
        this.style.background = 'green'
      }
    </script>
  </body>
</html>

# 4.4.8 鼠标移动事件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <script type="text/javascript">
      var x = 0,
        y = 0
      function Mouseplace() {
        var event = window.event
        x = event.x
        y = event.y
        document.getElementById('position').innerHTML = '鼠标在页面中的当前位置的横坐标为X：' + x + ' 纵坐标为' + y
      }
      document.onmousemove = Mouseplace
    </script>
    <span id="position"></span>
  </body>
</html>

5.0 页面事件

# 5.1 加载和卸载事件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body onload="load()">
    <img src="./banner01.jpg" alt="" name="img1" onload="blowup()" onmouseout="blowup()" onmouseover="reduce()" />
    <script>
      var width = img1.width
      var height = img1.height
      console.log(img1)
      function blowup() {
        if (id.height >= height) {
          id.height = height - 100
          id.width = width - 100
        }
      }
      function reduce() {
        if (id.height < height) {
          id.height = height + 100
          id.width = width + 100
        }
      }
      function load() {
        alert('欢迎来到阿炫的页面')
      }
    </script>
  </body>
</html>
最新更新时间: 2023/4/11 22:47:39

← JS高级程序设计(红宝书) →