JS其他知识

JS其他知识

学习网站：w3school

---

JavaScript 表单

自动 HTML 表单验证

HTML 表单验证能够被浏览器自动执行：

如果表单字段（fname）是空的，required 属性防止表单被提交：

<form action="/action_page_post.php" method="post">
   <input type="text" name="fname" required>
   <input type="submit" value="Submit">
</form>

亲自试一试

JavaScript 验证 API

约束验证 DOM 方法

属性	描述
checkValidity()	返回 true，如果 input 元素包含有效数据
setCustomValidity()	设置 input 元素的 validationMessage 属性。

约束验证 DOM 属性

属性	描述
validity	包含与 input 元素的合法性相关的布尔属性。
validationMessage	包含当 validity 为 false 时浏览器显示的消息。
willValidate	指示是否验证 input 元素。

合法性属性

input 元素的 validity 属性包含了与数据合法性相关的一系列属性：

属性	描述
customError	设置为 true，如果设置自定义的合法性消息。
patternMismatch	设置为 true，如果元素值不匹配其 pattern 属性。
rangeOverflow	设置为 true，如果元素值大约其 max 属性。
rangeUnderflow	设置为 true，如果元素值小于其 min 属性。
stepMismatch	当字段拥有 step 属性，且输入的 value 值不符合设定的间隔值时，该属性值为 true。
tooLong	设置为 true，如果元素值超过了其 maxLength 属性。
typeMismatch	当字段的 type 是 email 或者 url 但输入的值不是正确的类型时，属性值为 true。
valueMissing	设置为 true，如果元素（包含 required）没有值。
valid	设置为 true，如果元素值是有效的。

JavaScript 对象定义

在 JavaScript 中，对象是王。如果您理解了对象，就理解了 JavaScript。

在 JavaScript 中，几乎“所有事物”都是对象。

• 布尔是对象（如果用 new 关键词定义）
• 数字是对象（如果用 new 关键词定义）
• 字符串是对象（如果用 new 关键词定义）
• 日期永远都是对象
• 算术永远都是对象
• 正则表达式永远都是对象
• 数组永远都是对象
• 函数永远都是对象
• 对象永远都是对象

所有 JavaScript 值，除了原始值，都是对象。

对象是包含变量的变量

对象也是变量。但是对象能够包含很多值。

值按照名称 : 值对的形式编写（名称和值以冒号分隔）。

JavaScript 对象是命名值的集合。

JavaScript 对象是易变的

对象是易变的：它们通过引用来寻址，而非值。

如果 person 是一个对象，下面的语句不会创建 person 的副本：

var x = person;  // 这不会创建 person 的副本。

对象 x 并非 person 的副本。它就是 person。x 和 person 是同一个对象。

对 x 的任何改变都将改变 person，因为 x 和 person 是相同的对象。

JavaScript 对象访问器

JavaScript 访问器（Getter 和 Setter）

ECMAScript 5 (2009) 引入了 Getter 和 Setter。

Getter 和 Setter 允许您定义对象访问器（被计算的属性）。

理解：其实也就是可以不调用方法，而直接调用方法定义的属性值

JavaScript Getter（get 关键词）

本例使用 lang 属性来获取 language 属性的值。

实例

// 创建对象：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "en",
  get lang() {
    return this.language;
  }
};

// 使用 getter 来显示来自对象的数据：
document.getElementById("demo").innerHTML = person.lang;

亲自试一试

JavaScript Setter（set 关键词）

本例使用 lang 属性来设置 language 属性的值。

实例

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "",
  set lang(lang) {
    this.language = lang;
  }
};

// 使用 setter 来设置对象属性：
person.lang = "en";

// 显示来自对象的数据：
document.getElementById("demo").innerHTML = person.language;

亲自试一试

为什么使用 Getter 和 Setter？

• 它提供了更简洁的语法
• 它允许属性和方法的语法相同
• 它可以确保更好的数据质量
• 有利于后台工作

JavaScript 对象构造器

对象类型（蓝图）（类）

创建相同“类型”的许多对象，是使用对象构造器函数。

函数 Person() 就是对象构造器函数。用大写首字母对构造器函数命名是个好习惯。

通过 new 关键词调用构造器函数可以创建相同类型的对象：

// Person 对象的构造器函数
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

var myFather = new Person("Bill", "Gates", 62, "blue");
var myMother = new Person("Steve", "Jobs", 56, "green");

使用 prototype 属性

JavaScript prototype 属性允许您为对象构造器添加新属性：

实例

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}
Person.prototype.nationality = "English";