note_17：恶补javascript基础_1

恶补javascript基础_1

---

参考

• 课件
• 官网：JSHint
• 官网：JS Bin
• 官网：w3school
• 火狐开发文档：typeof
• 博客园：JavaScript三种弹出框（alert，confirm和prompt）用法举例
• 百度知道：js的正则表达式的正则前瞻(?=)和非捕获性分组(?:)有什么区别?
• 菜鸟教程：HTML DOM元素对象
• 博客园：关于HTML（含HTML5）的块级元素和行级（内联）元素总结
• 简书：图解BOM与DOM的区别与联系
• 博客园：我所理解的ECMAScript、DOM、BOM—写给新手们
• 博客园：彻底理解js中this的指向，不必硬背。
• csdn：JavaScript之childNodes 和 children 区别
• 博客园：JS之event flow
• segment fault：深入理解js Dom事件机制（一）——事件流
• 博客园：JS邮箱验证-正则验证
• 博客园：js中， 用变量或对象作为if或其他条件的表达式
• csdn：getElementsByClassName()不能添加事件监听
• csdn：js如何判断数组是Array类型

---

文章目录

• 恶补javascript基础_1
• • 1. 链接到html文件里
  • • （1）css文件
    • （2）javascript文件
  • 2. 编译运行
  • • （1）检查风格
    • （2）运行代码
  • 3. 基础语法
  • • （1）注释
    • （2）弹窗
    • （3）部分变量和类型
    • • ① Number对象
      • ② Math对象
      • ③ String对象
      • ④ Boolean对象
      • ⑤ Array对象
      • ⑥ 全局对象
      • ⑦ RegExp对象
  • 4. DOM
  • • （1）什么是DOM？
    • （2）什么是HTML DOM？
    • （3）什么是DOM元素
    • （4）如何修改DOM元素？
    • • ① 注意区分innerHTML和textContent
      • ② value属性
    • （5）HTML DOM Tree
    • • ① 节点父、子和同胞
      • ② 选择DOM元素
      • ③ 改变结构
    • （6）BOM和DOM
    • • ① window对象
      • ② document对象
      • ③ location对象
      • ④ navigator对象
      • ⑤ screen对象
      • ⑥ history对象
    • （7）DOM Event对象
    • • ① event
      • ② this
      • ③ add event handlers/listeners
      • ④ 事件流
      • ⑤ 标准event方法

---

对，没有意外，我又忘了很多javascript的基础知识，所以需要恶补。

---

1. 链接到html文件里

javascript由三部分组成：ECMAScript语法、DOM和BOM。

要放在html文件的里面

（1）css文件

<link rel="stylesheet" text="text/css" href="filename.css" />

（2）javascript文件

<script type="text/javascript" src="filename.js">script>

---

2. 编译运行

（1）检查风格

• JSHint
• 尤其是检查分号，还有0和等于

（2）运行代码

• JS Bin
• chrome的console

---

3. 基础语法

（1）注释

javascript

/* 这里写注释 */
var a = 0;
// 这里写注释
var b = 1;

html

<div>titlediv>

css

/* 这里写注释 */
body{text-align: center;
}

（2）弹窗

alert()方法：用于显示带有一条指定消息和一个 OK 按钮的警告框。

alert("message");

• 图片来源：JavaScript三种弹出框（alert，confirm和prompt）用法举例
  

confirm()方法：用于显示一个带有指定消息和 OK 及取消按钮的对话框。

confirm("message");

• 图片来源：JavaScript三种弹出框（alert，confirm和prompt）用法举例
  

prompt()方法：用于显示可提示用户进行输入的对话框。

prompt("message");

• 图片来源：JavaScript三种弹出框（alert，confirm和prompt）用法举例
  

（3）部分变量和类型

声明

var name = expression;

查看是哪种类型，输出字符串，而且是小写

var a = 0;
console.log(typeof a); // 输出"number"

typeof()的返回值

① Number对象

部分属性

Number.MAX_VALUE           // 系统可表示的最大数
Number.MIN_VALUE           // 系统可表示的最小数，接近0，但不是负数
NaN                        // 代表非数字值的特殊值
Number.NEGATIVE_INFINITY   // 负无穷大
Number.POSITIVE_INFINITY   // 正无穷大

部分方法

var a = new Number(0);
a.toString([radix])          // 把数字转换为字符串，使用指定的基数
a.toLocaleString()           // 把数字转换为字符串，使用本地数字格式顺序
a.toFixed(num)               // 把数字转换为字符串，结果的小数点后有指定位数的数字
a.toPrecision(num)           // 在对象的值超出指定位数时将其转换为指数计数法
a.valueOf()                  // 以字符串返回数字

② Math对象

部分属性

Math.E                     // 自然对数的底数e
Math.PI                    // 圆周率pai

部分方法

Math.abs(x)                     // 绝对值
Math.ceil(x)                    // 向上取整
Math.floor(x)                   // 向下取整
Math.sin(x)                     // 正弦
Math.cos(x)                     // 余弦
Math.tan(x)                     // 正切
Math.max([x, y, ...])           // 最大值
Math.min([x, y, ...])           // 最小值
Math.pow(x, y)                  // x的y次方
Math.random()                   // 生成0~1之间的随机数
Math.sqrt(x)                    // 开方
Math.round(x)                   // 四舍五入
Math.log(x)                     // lnx

③ String对象

部分属性

length                          // 字符串长度

部分方法

var a = new String("abc");
a.charAt(index)                               // 返回指定位置的字符
a.concat(string1, [string2, ...])             // 连接两个或多个字符串
a.indexOf(searchValue, [fromIndex])           // 返回某个指定的字符串值在字符串中首次出现的位置，fromIndex是字符串开始检索的位置
a.lastIndexOf(searchValue, fromIndex)         // 返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后面向前搜索
a.slice(start, end)                           // 提取字符串的某个部分，并以新的字符串返回被提取的部分
a.split(seperator, [howmany])                 // 把一个字符串分割成字符串数组，howmany指定返回数组的最大长度
a.substr(start, [length])                     // 在字符串中抽取从start下标开始的指定数组木的字符
a.substring(start, [stop])                    // 提取字符串中介于两个指定下标之间的字符
a.toLowerCase()                               // 将字符串变小写
a.toUpperCase()                               // 将字符串变大写

注意：javascript字符串不可改变！一经产生，字符串本身的值就再也不会发生改变。变量赋值为字符串后，除非重新赋值，其值不变。

var a = "hello";
a[0] = "w";
console.log(a);  // 输出"hello"

④ Boolean对象

真值和假值

• “falsey” value，假值：0,0.0，NaN，""，null，undefined
• “truthy” value，真值：除假值以外的值，包括"0"，[]。

小心==和===

• ==不要求数据类型相同，系统会自动做数据类型转换来比较
• ===要求的是连数据类型都要相同，同理!==要求的是连类型都不能相同

console.log(10 < "42");    // true
console.log(10 !== "42");  // true
console.log("5.0" == 5);   // true
console.log(5.0 === 5);    // true
console.log("5.0" === 5);  // false/* 0只能跟0，0.0，false，空字符串等 */
console.log(0 == false);        // true
console.log(0 == undefined);    // false
console.log(0 == "");           // true
console.log(0 == null);         // false
console.log(0 == NaN);          // false/* false只能跟0，0.0，false和空字符串等 */
console.log(false == false);        // true
console.log(false == undefined);    // false
console.log(false == null);         // false
console.log(false == NaN);          // false
console.log(false == "");           // true/* undefined只能跟undefined和null等 */
console.log(undefined == undefined);    // true
console.log(undefined == NaN);          // false
console.log(undefined == null);         // true/* null只能跟null和undefined等 */
console.log(null == null);      // true
console.log(null == "");        // false
console.log(null == NaN);       // false/* NaN跟什么都不能等，包括NaN */
console.log(NaN == NaN);      // false
console.log(NaN === NaN);     // false

强制类型转换，将别的类型的值转换成布尔类型

var boolValue = Boolean(otherValue);
var boolValue = !!(otherValue);

以下来自网易云课堂web前端开发

// 题目来自网易云课堂，渡一教育，web前端开发，javascript
// 课时12，递归，预编译（下）var str = false + 1; // 因为=右边没有字符串，所以全部转成数字算，0+1=1
console.log(str); // 1var demo = false == 1; // false==1为假，所以demo就是false
console.log(demo); // false// a虽然没有声明，但是typeof还是可以有的，为"undefined"（是个字符串）
// -true是指-1，+true是指1，-false是指0，+false是指0，+undefined是指NaN，-undefined是指NaN
// "undefined"&&(-1) = -1，这时"undefined"会转成1，-1 + NaN = NaN
if (typeof(a)&&-true + (+undefined) + "") { // NaN + "" = "NaN"（转换成true）console.log("基础扎实"); // "基础扎实"
}// 先算乘法，除了+以外，其他的-、+、/都是把字符串转成数字算，最后返回的结果都是数字
if (11 + "11" * 2 == 33) { // 11 + 22 == 33 （true）console.log("基础扎实");
}// !!相当于转换成boolean类型
// !!" " = true， !!"" = false， !!false = false
// true + false - false = 1 + 0 - 0 = 1 （true）
// 1 || 任何东西 = 1
!!" " + !!"" - !!false||console.log("不能打印"); // 不会打印，因为||前面已经是1了

if (condition) {...}，condition里面有时会出现隐式类型转换，具体怎么判断，参考js中， 用变量或对象作为if或其他条件的表达式

⑤ Array对象

部分属性

var arr = new Array(1, 2);
a.length               // 设置或返回数组中元素的数目

部分方法

var arr = new Array(1, 2);
arr.concat(array1, [array2, ...]);                  // 连接两个或多个数组
arr.join([seperator]);                              // 把数组中的所有元素放入一个字符串，元素是通过制定的分隔符进行分隔的
arr.pop();                                          // 用于删除并返回数组的最后一个元素
arr.push(element1, [element2, ...]);                // 向数组的末尾添加一个或多个元素，并返回新的长度
arr.reverse();                                      // 颠倒数组中元素的顺序
arr.shift();                                        // 把数组的第一个元素从其中删除，并返回第一个元素的值
arr.slice(start, [end]);                            // 从已有的数组中返回选定的元素
arr.sort([sortby]);                                 // 对数组中的元素进行排序，sortby是一个函数，规定排序顺序
arr.splice(index, howmany, [item1, item2, ...]);    // 向/从数组中添加/删除项目，然后返回被删除的项目。// index是个整数，规定添加/删除项目的位置。// howmany也是整数，表示要删除的项目数量。// item1，item2，...是向数组添加的新项目。
arr.toString();                                     // 将数组转换为字符串，元素之间用逗号分隔，并返回结果。
arr.unshift(element1, [element2, ...]);             // 向数组的开头添加一个或更多元素，并返回新的长度

声明数组

var arr = [];
arr[0] = 1;
arr[1] = 2;var arr = [1, 2];var arr = new Array();// 当单个的数字(Number)传递给Array()构造函数时，将会被解释为数组长度，并非单个元素。
var arr = new Array(2);    // 这里的2是指数组的长度size，不是数据var arr = new Array(1, 2); // 声明一个数组，里面包含1和2两个数

判断数组是不是Array的方法

// 1. instanceof
arr instanceof Array ? alert("true") : alert("false");// 2. constructor
[].constructor == Array ? alert("true") : alert("false");// 3. Object.prototype.toString.call(arr) === '[object Array]'
Object.prototype.toString.call(arr) == "[object Array]" ? alert("true") : alert("false");// 4. ES5定义了Array.isArray
alert(Array.isArray(arr));

⑥ 全局对象

部分函数

isNaN();                    // 检查某个值是否是数字
parseFloat(string);         // 解析一个字符串，返回一个浮点数。// 如果字符串的第一个字符不能被转换为数字，则该函数会返回NaN。// 如果在解析成浮点数的过程中遇到了不是正负号、数字、小数点，或者科学计数法中的指数的字符，// 则解析会忽略该字符以及之后的所有字符，返回当前已经解析到的浮点数。// 同时参数字符串开头和结尾的空格是允许的。
parseInt(string, [radix]);  // 解析一个字符串，并返回一个整数。// radix表示要解析的数字的基数（多少进制），介于2~36之间。默认为10。// 如果string是以"0x"开头，则会把string的其余部分解析为十六进制的整数。// 如果string以0开头，则会把string其余部分解析为八进制的整数。
Number(object);             // 将对象的值转换为数字
String(object);             // 将对象的值转换为字符串

例，

console.log(parseInt(3, 8));  // 3// 将传进去的"3"当成是8进制的3，然后转成10进制的数字3
console.log(parseInt(3, 2));  // NaN// 因为2进制里面没有3，所以转不成数字
console.log(parseInt(3, 0));  // 3// 如果radix设置为0或者不写，就默认成"3"是10进制// 所以10进制转成10进制，还是10进制3

⑦ RegExp对象

• 表示正则表达式，对字符串执行模式匹配的强大工具。

创建RegExp对象：

// pattern是一个字符串，指定了正则表达式的模式或其他正则表达式。
// attributes是一个可选的字符串，包含属性"g"、"i"和"m"，
// 分别用于指定全局匹配、区分大小写的匹配和多行匹配。
// 如果pattern是正则表达式，而不是字符串，则必须省略该参数。
var patt = /pattern/attributes; // 直接量语法
var patt = new RegExp(pattern, attributes); // 创建RegExp对象的语法

修饰符：

var patt = /pattern/i;    // i指执行对大小写不敏感的匹配
var patt = /pattern/g;    // g指执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）
var patt = /pattern/m;    // m指执行多行匹配

方括号：

var patt = /[abc]/;    // 查找方括号之间的任何字符
var patt = /[^abc]/;   // 查找任何不在方括号之间的字符
var patt = /[0-9]/;    // 查找任何从0到9的数字
var patt = /[a-z]/;    // 查找任何从小写a到小写z的字符
var patt = /[A-Z]/;    // 查找任何从大写A到大写Z的字符
var patt = /[adgk]/;   // 查找给定集合内的任何字符
var patt = /[^adgk]/;  // 查找给定集合外的任何字符
var patt = /(red|blue|green)/;  // 查找任何指定的选项

部分元字符：

var patt = /pattern./;       // .指查找单个字符，除了换行和行结束符
var patt = /\w/;             // \w指查找单词字符
var patt = /\W/;             // \W指查找非单词字符
var patt = /\d/;             // \d指查找数字
var patt = /\D/;             // \D指查找非数字字符
var patt = /\s/;             // \s指查找空白字符
var patt = /\S/;             // \S指查找非空白字符
var patt = /\bpattern/;      // \b指匹配单词边界
var patt = /\Bpattern/;      // \B指匹配非单词边界
var patt = /\n/;             // \n指换行符

部分量词：

var patt = /n+/;       // 匹配任何包含至少一个n的字符串
var patt = /n*/;       // 匹配任何包含零个或多个n的字符串
var patt = /n?/;       // 匹配任何包含零个或一个n的字符串
var patt = /n{X}/;     // 匹配包含X个n的序列的字符串
var patt = /n{X, Y}/;  // 匹配包含X至Y个n的序列的字符串
var patt = /n{X, }/;   // 匹配包含至少X个n的序列的字符串
var patt = /n$/;       // 匹配任何结尾为n的字符串
var patt = /^n/;       // 匹配任何开头为n的字符串
var patt = /?=n/;      // 匹配任何其后紧接指定字符串n的字符串
var patt = /?!n/;      // 匹配任何其后没有紧接指定字符串n的字符串

例，正则表达式验证表单

// 验证邮箱
// ^\w表示以单词字符开头：a-z、A-Z、0-9、下划线
// +表示一个或多个字符
// @就是邮箱地址中间的at，紧跟@后面的是域名
// 长度为2-10的由大小写字母或者数字组成的字符串
// (?:)作为匹配校验，并出现在匹配结果字符里面
// \.，dot(.)转义字符，否则会被识别成元字符
// 长度为2-4的由小写字母组成的字符串
// (?:){1,3}$表示以长度为1-3由前面那个匹配校验字符串组成的字符串结尾
function testEmail(str) {var reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;return reg.test(str);
}// 检验电话号码格式
// 可能是11-12位电话号码（带区号），也可能是11位手机号码，所以用|（或）
// 区号第一位一定是0，区号可以是3位或者4位
// 区号后面要写-符号连接电话号码
// 手机号一定是1开头的，然后是表示电话运营商号码
function testTelNo(str) {var reg = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;return reg.test(str);
}// 检验是否由中文名称组成
// \u是指16进制的Unicode
// {2-4}代表长度
function testChinese(str) {var reg = /^[\u4E00-\u9FA5]{2,4}$/;return reg.test(str);
}// 是否带有小数
function testDecimal(str) {var reg = /^\d+\.\d+$/;return reg.test(str);
}

---

4. DOM

（1）什么是DOM？

w3school上的描述：

DOM是Document Object Model（文档对象模型）的缩写，它是W3C（万维网联盟）的标准，定义了访问HTML和XML文档的标准：“W3C文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

W3C DOM标准被分为3个不同的部分：

1. 核心DOM——针对任何结构化文档的标准模型
2. XML DOM——针对XML文档的标准模型
3. HTML DOM——针对HTML文档的标准模型

（2）什么是HTML DOM？

HTML DOM是：

1. HTML的标准对象模型
2. HTML的标准编程接口
3. W3C标准

HTML DOM定义了所有HTML元素的对象和属性，以及访问它们的方法。
HTML DOM是关于如何获取、修改、添加或删除HTML元素的标准。

（3）什么是DOM元素

根据W3C的HTML DOM标准，HTML文档中的所有内容都是节点：

1. 整个文档是一个文档节点
2. 每个HTML元素是元素节点
3. HTML元素内的文本是文本节点
4. 每个HTML属性是属性节点
5. 注释是注释节点

通过HTML DOM，树种的所有节点均可通过javascript进行访问。所有HTML元素（节点）均可被修改，也可以创建或删除节点。

（4）如何修改DOM元素？

NodeList对象代表了节点列表，类似HTML元素的子节点集合。
访问或者修改DOM对象的属性可以通过修改objectName.attributeName = newValue。

部分属性和方法：

element.getAttribute(attributeName);                    // 通过名称获取属性的值
element.setAttribute(attributeName, attributeValue);    // 创建或改变某个新属性。如果指定属性已经存在，则只设置该值。
element.innerHTML = text;                               // 设置或返回表格行的开始和结束标签之间的HTML
element.textContent = text;                             // 设置或者返回指定节点的文本内容

① 注意区分innerHTML和textContent

• innerHTML返回的是html，textContent返回的是文本内容。
• innerHTML返回的内容会包含html的标签，但是textContent不会

来自课件上的一个例子：

<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>JS Bintitle>head><body><div id="example"><p>文本内容1p><p>文本内容2p>div><br /><button onclick="changeTextContent();">改变textContentbutton><br /><br /><button onclick="changeInnerHTML();">改变innerHTMLbutton><script>window.onload = function() {var example = document.getElementById("example");console.log(example.textContent);console.log(example.innerHTML);changeTextContent = function() {example.textContent = "
新文本内容
";}changeInnerHTML = function() {example.innerHTML = "
新文本内容
";}}script>body>
html>

console的显示：

• 第一个字符串就是textContent的内容
• 第二个字符串就是innerHTML的内容

Output的显示：

一开始什么都没动时

点击改变textContent

• 这里的

  和

  并不是作为html的标签，而是单纯的字符串
• 如果这时输出example.innerHTML，会得到"<p>新文本内容</p>"，输出为了说明是文本，所以特意用了转义字符。

changeTextContent = function() {example.textContent = "
新文本内容
";// console.log(example.innerHTML);
}

点击改变innerHTML

• 这里的

  和

  就是作为html的标签
• 如果这时输出example.innerHTML，会得到"

  新文本内容

  "，并没有用转义字符表示

  和

  ，因为它们是作为标签存在，而不是文本。

changeInnerHTML = function() {example.innerHTML = "
新文本内容
";// console.log(example.innerHTML);
}

② value属性

以下内容来自课件

value属性与网页内容：
对于一些由value属性定义其显示内容的HTML元素，例如：文本框、各种按钮等，不能使用textContent和innerHTML，而应该通过其DOM元素的value property来获取、改变其显示的内容。

（5）HTML DOM Tree

DOM节点：

1. 文档节点
2. 元素节点
3. 文本节点
4. 属性节点
5. 注释节点

① 节点父、子和同胞

节点树种的节点彼此拥有层级关系。父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子
同胞是拥有相同父节点的节点

来自w3school的一段代码

<html><head><title>DOM 教程title>head><body><h1>DOM 第一课h1><p>Hello world!p>body>
html>

从上面的HTML中：

• 节点没有父节点；它是根节点
• 和的父节点是节点
• 文本节点"Hello world!"的父节点是

  节点

并且：

• 节点拥有两个子节点：和
• 节点拥有一个子节点：