JavaScript基础笔记

最新推荐文章于 2024-04-21 15:07:55 发布

爱学习的小岳

最新推荐文章于 2024-04-21 15:07:55 发布

阅读量717

点赞数

文章标签： javascript html html5

原文链接：https://www.runoob.com/js/js-tutorial.html

版权

一、JavaScript

‘学习地址’

HTML定义了网页的内容
css描述了网页的布局
JavaScript控制了网页的行为

JavaScript是互联网上流行的脚本语言，这门语言可以用于HTML和web，更可以广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。ECMA-262 是JavaScript标准的官方名称
- 是一种轻量级的编程语言
- 是可插入HTML页面的编程代码
- 插入页面后，可由所有的现代浏览器执行

JavaScript输出

JavaScript 没有任何打印或者输出的函数
可通过不同方式输出数据
- 使用window.alert() 弹出警告框
- 使用document.write()将内容写到HTML文档中
- 使用innerHTML写入到HTML元素中去
- 使用 console.log()写到浏览器的控制台

操作HTML元素

使用document.getElementById(‘对应的id’)方法访问某个html元素（通过id属性寻找）
使用 ‘id’ 属性表示html元素，并使用innerHTML来获取或者插入元素内容

	  <!DOCTYPE html>
	  <html>
	  <head>
	  <meta charset="utf-8">
	  <title>Title</title>
	  <body>
	  <h1>我的第一个标题</h1>
	  <p id="demo">我的第一个段落</p>
	  <script>
	  document.getElementById("demo").innerHTML = "段落已修改。";
	  </script>
	  </body>
	  </html>

如果在文档已经加载后执行document.write，整个HTML页面将被覆盖

	  <!DOCTYPE html>
	  <html>
	  <head>
	  <meta charset="utf-8">
	  <title>Title</title>
	  <body>
	  <h1>我的第一个标题</h1>
	  <p id="demo">我的第一个段落</p>
	  <button onclick="myfunction()">点击运行JavaScript</button>
	  <script>
	  function myfunction(){
	  document.write(Date());
	  }
	  </script>
	  </body>
	  </html>

二、JavaScript语法

- JavaScript是一个脚本语言，是一个轻量级，但功能强大的编程语言
- 在编程语言中，一般固定值称为字面量，如数字字面量3.14，123e5（科学计数e）

1、变量、操作符……

使用关键字 var 定义变量，使用等号来为变量赋值：var x, length; x = 5; length = 6;
算数运算符 (5 + 6) * 10
使用//来单行注释, /*……*/多行注释
数据类型数字、字符串、数组、对象
**对大小写敏感 **

三、JavaScript语句

JavaScript语句向浏览器发出的命令。作用是告诉浏览器该做什么
- document.getElementById('demo').innerHTML = '你好BOY';是将html中id='demo’的元素输出文本”你好BOY“
- JavaScript 是脚本语言，浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

1、变量

变量名称对大小写敏感（y 和 Y 是不同的变量）
变量必须以字母开头
变量声明后，该变量是空的（没有值），用等号赋值
一条语句中声明的多个变量不可以同时赋同一个值:var x, y, z=1其中x， y为undefined，z=1
如果重新声明 JavaScript 变量，该变量的值不会丢失：var x = 1;var x依次执行后，x的值仍为1

2、数据类型

值类型：字符串（String）、数字（Number）、布尔（Boolean）、对空（Null)、未定义（Undefined）、Symbol ; Undefined这个值表示变量不含有值；可以通过将变量的值设为null来清空变量cars = null
引用数据类型：对象（Object）、数组（Array）、函数（Function）
拓展：对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔var person={firstname:"John", lastname:"Doe", id:5566};person有三个属性：firstname、lastname、id
当您声明新变量时，可以使用关键词 “new” 来声明其类型：
var carname = new String(‘BMW’) 此时是object，不是string
var cars = new Array; 同上
JavaScript 对象是拥有属性和方法的数据。
- 可以说 “JavaScript 对象是变量的容器”。var car = {name:"Fiat", model:500, color:"white"};3个值赋值给car，一辆汽车是一个对象。对象有它的属性，如名字、型号、颜色等，方法有启动停止等；通过car.name;或者car['name']获取到 name 的 value 值
- 对象的方法定义了一个函数，并作为对象的属性存储
  对象方法通过添加()调用（作为一个函数）
  如果你要访问 person 对象的 fullName 属性，它将作为一个定义函数的字符串返回：

var person = {
firstName: "John",
lastName: "Doe",
id: 5566,
fullName: function(){
return this.firstName + " " + this.lastName;}
}
name = person.fullName();  // 返回结果-->John Doe
// 该实例访问了person对象的fullName()方法
name1 = person.fullNmae;  // 返回的是函数定义function(){……}

3、JavaScript函数

- 函数是由事件驱动的或者当他被调用时执行的可重复使用的代码块
- 函数就是包裹在花括号中的代码块，前面使用了关键词function
- 调用函数时会执行函数内代码
- 可以在某事件发生时直接调用函数（当用户点击按钮时），并且可由JavaScript在任何位置上进行调用。

调用时传入的参数和函数内的变量要对应
在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。只要函数运行完毕，本地变量就会被删除。
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。全局变量会在页面关闭后被删除。
如果您把值赋给尚未声明的变量，该变量将被自动作为 window对象的一个属性。carname = "Volvo"将声明widow的一个属性carname
- 非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以删除。

var x = 1;  // 不可配置全局属性
y = 2;  //没有使用var声明，可配置全局属性
console.log(this.x);  // 1
console.log(window.x); // 1
console.log(window.y);  // 2
delete x; // false 无法删除
console.log(x);  // 1

delete y; 
console.log(delete y);  // true
console.log(y);  //已经删除 报错变量未定义

作用域：
- 作用域是可访问变量的集合，对象和函数同样也是变量
- 如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。（**注：函数要先运行再使用window.var **）
- 在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。（html的全局对象是window，以后声明的全局变量自动作为 window对象的一个属性）
- 在 html 中默认的全局对象是 html 页面本身，所以数据变量是属于 html 页面。在浏览器中的页面对象是浏览器窗口（window对象）。所以数据变量会自动变成window对象的函数。

4、JavaScript事件

html事件实例：
- HTML页面完成加载 onload
- HTML input字段改变时
- HTML按钮被点击 onclick
- HTML元素改变 onchange
- 用户在一个HTML元素上移动鼠标 onmouseover
- 用户从一个HTML元素上移开鼠标 onmouseout
- 用户按下键盘按键 onkeydown
- ……
可以使用多种方法来执行 JavaScript 事件代码
- HTML事件属性可以直接执行JavaScript代码<button onclick="this.innerHTML=Date()">现在的时间是?</button>
- HTML 事件属性可以调用 JavaScript 函数
- ……

5、JavaScript字符串

字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号：
你可以使用索引位置来访问字符串中的每个字符：var character = carname[7];字符串的索引从 0 开始
- 可以使用内置属性 length 来计算字符串的长度（可以使用 JavaScript的属性和方法）

var x = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = x.length;

可以使用 new 关键字将字符串定义为一个对象：var firstName = new String("John")
- 注：不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用

var x = "John";             
var y = new String("John");
(x === y) // 结果为 false，因为 x 是字符串，y 是对象

原始字符串，‘John’，没有属性和方法（他们不是对象）
原始值可以使用 JavaScript的属性和方法，因为JavaScript在执行方法和属性时可以把原始值当作对象

1、charAt()

返回指定索引位置的字符

2、concat()

链接两个或多个字符串，返回链接后的字符串

3、indexOf()、lastIndexOf()

返回字符串中检索指定字符第一次、最后一次出现的位置

4、正则表达式 match()、search()；替换字符串 replace()

5、slice()

提取字符串片段，并在新的字符串中返回被提取的部分

6、split()

把字符串分割为子字符串数组

7、toLocaleLowerCase()、toLocaleUpperCase()

根据主机的语言环境把字符串转化为小写、大写

8、toLowerCase()、toUpperCase()

把字符串转化为小写、大写

9、toString()

返回字符串对象值

10、trim()

移除字符串首尾空白

6、JavaScript 运算符

加、减、乘、除、取模（余数）
自增、自减

y = 5
x = ++y    // x = 6, y = 6
x = y++    // x = 5, y = 6
x = --y    // x = 4, y = 4
x = y--    // x = 5, y = 4

赋值运算符

var x = 10, y = 5;
x = y    // <==> 将 y 的值赋值给 x  --> x = 5
x += y   // <==> x = x + y  --> x = 15
x -= y   // <==> x = x - y  --> x = 5
x *= y   // <==> x = x * y  --> x = 50
x /= y   // <==> x = x / y  --> x = 2
x %= y   // <==> x = x % y  --> x = 0

var x = 5 + 5;
var y = "5" + 5;
var z = "Hello" + 5;
typeof x   // number
typeof y   // string
typeof z   // string
Object.prototype.toString.call(x)  //  [object Number]
Object.prototype.toString.call(y)  //  [object String]
Object.prototype.toString.call(undefined)  //[object Undefined]
Object.prototype.toString.call(null)  // [object Null]

比较和逻辑运算符

// ==================比较运算符=============================
var x = 5;
x === '5'   //  --> false  绝对等于（值和数据类型均相同）
x == '5'    //  --> true 等于只要值相同
x !== '5'   // --> true 不绝对等于（值和类型有一个不相等，或两个都不相等）
x != '5'    // --> false 不等于
// ===================逻辑运算符=============================
var x = 6, y = 3;
(x<10 && y>1)    // true
(x==5 || y==3)   // true
!(x == y)        // true
// ====================条件运算符============================
// variablename=(condition)?value1:value2 
var age = 15;
judge = (age<18)?"年龄太小":"年龄已达到"；  // 年龄太小

7、JavaScript 条件语句

if(condition){}
if(condition){}else{}
if (condition1){}else if(condition2){}else{}
switch()
工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。

switch(n){
	case 1:
		执行代码块1
		break；
	case 2：
		执行代码块2
		break；
	default:
		与case1和case2不同时执行的代码
}

var d = new Date().getDay();  // d = 2
switch (d)
{
    case 6:
    	x="今天是星期六";
    	break;
    case 0:
    	x="今天是星期日";
    	break;
    default:
    	x="期待周末";
}

8、循环语句

for --> 循环代码块一定的次数

for (语句一; 语句二; 语句三){
    被执行代码块
}
语句一 （代码块）开始之前执行
语句二 定义运行循环（代码块）的条件，语句二返回 true，则循环再次开始，如果返回 false，则循环将结束。
语句三 在循环（代码块）已经被执行之后执行

// ==================================================
var cars = ["BMW", "Volvo", "Saab", "ford"]
for (var i=0; i<cars.length; i++){
    document.write(cars[i] + "<br/>");
}

for/in 循环

var tex = ''
var person = {fname:"Bill",lname:"Gates", age:56}
for (x in person){  // x 为属性名
tex = tex + person[x] 
}
// --> "BillGates56"

while 循环
- 只要指定条件为 true，循环就可以一直执行代码块。

var i = 0, x = '';
while (i<5){
x = x + "The number is " + i + "<br/>";
i++;}

do/while循环
- 该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。

var i = 0, x = ''
do
{
    x = x + "The number is " + i + "<br>";
    i++;
}
while (i<5);

cars=["BMW","Volvo","Saab","Ford"];
var i=0;
// =======================================
for (;cars[i];)
{
    document.write(cars[i] + "<br>");
    i++;}
// =======================================
while (cars[i])
{
    document.write(cars[i] + "<br>");
    i++;}

break/continue
JavaScript 标签
- 可以对Javascript语句进行标记，在于语句之前加上冒号
  label:
  statement
- continue 语句（带有或不带有标签引用）只能用在循环中
- break 语句（不带有标签引用)，只能用在循环或switch中
- 通过标签引用，break语句可用于跳出任何JavaScript代码块
- 有了标签，可以使用break和continue在多层循环的时候控制外层循环。

cars = ["BMW", "Volvo", "Saab", "Ford"]
var x = ''
list:
{
    x += (cars[0] + "<br>"); 
    x += (cars[1] + "<br>"); 
    x += (cars[2] + "<br>"); 
    break list;
    x += (cars[3] + "<br>"); 
    x += (cars[4] + "<br>"); 
    x += (cars[5] + "<br>"); 
}
x   // --> "BMW<br>Volvo<br>Saab<br>"

9、typeof，null，undefined

undefined：是所有没有赋值变量的默认值，自动赋值var a a 自动被赋值为 undefined
null：主动释放一个变量引用的对象，表示一个变量不在指向任何对象地址

typeof "John"                // --> string
typeof 3.14                  // --> number
typeof false                 // --> boolean
typeof [1,2,3,4]             // --> object
typeof {name:'John', age:34} // --> object
typeof NaN                    // --> number
typeof new Date()             // --> object
// 在JavaScript中数组是一种特殊的对象类型。因此返回object

设置null来清空对象
- var person = null 值为 null（空），但类型为对象
设置undefined 来清空对象
- var person = undefined 值为 undefined，类型为undefined
null 和 undefined 的值相等，但类型不等：null == undefined --> true
- 两者均是原始类型-表示声明变量过但未赋过值
- null转换成数字是0；undefined转换成数字是NaN

10、类型转换

JavaScript 中有6中数据类型（String,number,boolean,object,function,symbol）
JavaScript 中有3中对象类型（Object,Date,Array）

var d = new Date()
d.getDate()

JavaScript 中有2种不包含任何值的数据类型（null, undefined）
- 转换成字符串：x.toString()；String(x)
- 转换成数字 Number(……)
  - 一元运算符 + 将变量变成数字
    - var y = ‘5’; var x = + y; —> x = 5(数字类型)
    - var y = ‘John’; var x = + y —> x = NaN（无法转化为数字）

11、正则表达式 (Regular Expression) regex

search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

/正则表达式主体/修饰符（可选）
var x = 'cvhnjRUnoobnnladn'
var n = x.search(/runoob/i)  // n = 6
//   /runoob/i  是一个正则表达式
//   runboob 是一个正则表达式主题（用于检索）
//   i 是一个修饰符（搜索不区分大小写）

描述	修饰符
i	执行对大小写不敏感的匹配
g	执行全局匹配（查找所有匹配而非再找到第一个匹配后停止）
m	执行多行匹配

RegExp 对象

var patt = new RegExp(pattern, modifiers);
或者 patt = /pattern/modifiers; 
--> patt (模式)描述了表达式的模式
--> modifiers(修饰符)用于指定全局匹配、区分大小写和多行匹配的
// =====================================================
var patt = new RegExp('\\w+'); <==> var re = /\w+/

12、throw、try、catch

try 语句测试代码块的错误
catch 语句处理错误
throw 语句创建自定义错误 throw exception
finally 语句在 try 和 catch 语句之后，无论是否触发异常，该语句都会执行

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>

<body>
<p>不管输入是否正确，输入框都会再输入后清空。</p>
<p>请输入 5 ~ 10 之间的数字：</p>

<input id="demo" type="text">
<button type="button" onclick="myFunction()">点我</button>

<p id="p01"></p>

<script>
function myFunction() {
  var message, x;
  message = document.getElementById("p01");   <!--段落p的值-->
  message.innerHTML = "";                      <!--赋值段落p值为空-->
  x = document.getElementById("demo").value;    <!-- 获取输入值赋值给x -->
  try { 
    if(x == "") throw "值是空的";
    if(isNaN(x)) throw "值不是一个数字";
    x = Number(x);
    if(x > 10) throw "太大";
    if(x < 5) throw "太小";
  }
  catch(err) {
    message.innerHTML = "错误: " + err + ".";    <!--输出错误信息写入到p段落-->
  }
  finally {
    document.getElementById("demo").value = "";   <!--将输入框内容清空-->
  }
}
</script>
</body>
</html>

13、JavaScript 调试

var x = 15 * 5
debugger
x

14 、JavaScript 声明提升

函数及变量的声明都将被提升到函数的最顶部
变量可以在使用后声明，也就是变量可以先使用再声明

x = 5; // 变量x的值设置为5
x += 5;
var x;  // 声明x
// ==============================
var x;
x = 5;
x += 5;

// 上面两种方式等价

声明提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部
JavaScript 初始化不会提升，只有声明的变量会提升

var x = 5;  // 初始化 x
var y = 7;  // 初始化 y
x + y   // ---> 12
// ================================
var x = 5; //初始化 x
x + y;   // --> y undefined
var y = 7;  // 初始化 y

// 因为变量声明(var y)提升了，但初始化(y=7)并不会提升，所以变量是一个未定义的变量

15、JavaScript 的严格模式

严格模式是指通过再脚本或者函数的头部添加use strict；表达式来声明
严格模式下不能使用未声明的变量
在函数内部声明是局部作用域（只在函数内部使用严格模式）
使用严格模式原因
- 消除代码运行的一些不安全指出，保证代码运行安全
- 提高编译器效率，增加运行速度
- 为未来新版本的JavaScript 做好铺垫
对象也是变量

"use strict";
x = {p1:10, p2:20}  // 执行脚本时 F12 中 Console 显示 x is not defined

use strict 指令只允许出现在脚本或者函数的开头

16、JavaScript 使用误区

浮点型数据使用注意事项

JavaScript中所有数据都是以 64 位浮点型数据（float）来存储。所有的编程语言，对浮点型数据的精确度都很难确定：

var x = 0.1, y = 0.2;
var z = x + y;       //  z = 0.30000000000000004
Boolean(z == 0.3)   // --> false
// ===============================================
var z = (x * 10 + y * 10) / 10;       // z 的结果为 0.3
Boolean(z == 0.3)   // --> true

JavaScript 字符串分行
- 允许在字符串中使用断行语句，但在字符串中直接使用回车换行会报错，加上\
在JavaScript中不支持使用名字来索引数组，只允许使用数字索引
- 对象使用名字作为索引，若使用名字作为索引，当访问数组时，Javascript会把数组重新定义为标准对象。执行这样的操作后，数组的方法及属性将不能再使用，否则会产生错误
**Undefined 不是Null **
- 在 JavaScript 中 Null 用于对象，undefined 用于变量，属性和方法
- 对象只有被定义才有可能为 Null，否则为undefined
  - 若想测试对象是否存在，应该先判断是否被定义Boolean(typeof obj !== "undefined" && obj !== null)

17、JavaScript 表单

表单验证

HTML5 新增HTML表单的验证方式：约束验证（constraint validation）

约束验证是表单被提交时浏览器用来实现验证的一种算法

HTML约束验证基于：

HTML 输入属性一般在input元素中

描述
abled`
abled`
、min`
tern`
uired`
`

描述
abled`
abled`
`、`min`
tern`
uired`
`

CSS 伪类选择器

性	描述
:disabled`\| 选取属性为`disabled`属性的`input` 元素
:invalid`\|选取无效的`input`元素
:optional`\| 选取没有`optional`属性的`input`元素
:requried`\|选择有`requeired`属性的`input`元素
valid`\| 选取有效值的`input`元素

DOM 属性和方法
- checkValidity()
- setCustomValidity()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}
</script>
</head>
<body>

<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
	名字: <input type="text" name="fname">
		<input type="submit" value="提交">
</form>

</body>
</html>

18、JavaScript 验证 API

checkValidity()：
- 如果input 元素中的数据是合法的返回true，否则返回false

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>

<p>输入数字并点击验证按钮：</p>

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">验证</button>
<p>如果输入的数字小于 100 或大于300，会提示错误信息。</p>
<p id="demo"></p>
<script>
function myFunction() {
var inpObj = document.getElementById("id1");
if (inpObj.checkValidity() == false) {
document.getElementById("demo").innerHTML = inpObj.validationMessage;
<!--input元素中的validationMessage属性,浏览器错误提示信息-->
} else {
document.getElementById("demo").innerHTML = "输入正确";}}
</script>
</body>
</html>

setCustomValidty()：
- 设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。使用setCustomValidty() 设置自定义提示后，validity.customError 就会变成 true，则 checkValidity 总会返回 false。如果要重新判断需要取消自定义提示，方式如下：setCustomValidity('')，setCustomValidity(null)，setCustomValidity(undefined)。

var inpObj = document.getElementById("id1");
inpObj.setCustomValidity(''); // 取消自定义提示的方式
if (inpObj.checkValidity() == false) {
    if(inpObj.value==""){
        inpObj.setCustomValidity("不能为空！");
    }else if(inpObj.value<100 || inpObj.value>300){
        inpObj.setCustomValidity("请重新输入数值（100~300之间）!");
    }
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
} else {
    document.getElementById("demo").innerHTML = "输入正确";
}

19、JavaScript 保留关键字

在 JavaScript 中，一些标识符时保留关键字，不能用作变量名或函数名
也应当避免使用 JavaScript 内置的对象、属性和方法的名称作为变量或函数名
this关键字
- this表示当前对象的一个引用。但在 JavaScript 中this不是固定不变的，他会随着执行环境的改变而改变。
  1. 在方法中，this表示当前对象的一个引用（指向调用它所在方法的对象）
  2. 单独使用，this 表示全局对象（指向全局对象）var x = this --> [object Window]
  3. 在函数中，this表示全局对象（是函数，不是方法）
    - 函数中，函数的所属者默认绑定到 this 上。(函数的所属者为window)在浏览器中，window 就是该全局对象[object Window]
    - 若函数位于对象内，this指向该方法（函数）所属的对象 [object Object]
  4. 在函数中，在严格模式下，this是未定义的（undefined）
    - 严格模式下，如果单独使用（不在函数中），this也是指向全局对象**（同上2）**
  5. 在事件中，this表示接收事件的元素
  6. 类似call()和apply()方法可以将this引用到任何对象
    - 在 JavaScript 中函数也是对象，对象则有方法，apply 和call就是函数对象的方法，他们允许切换函数执行的上下文环境（context），即this绑定的对象

// 在函数中，函数的所属者默认绑定到 this 上。在浏览器中，window 就是该全局对象
function myFunction() {
  return this;                    // --> [object Window]
}
// ==================================================================
// 严格模式下函数是没有绑定到this上，这时候this是undefined
"use strict";
function myFunction() {
  return this;                    // --> undefined
}
// ==================================================================
// person 对象是函数所有者，person 对象默认绑定到 this 上
var person = {
  firstName  : "John",
  lastName   : "Doe",
  id         : 5566,
  myFunction : function() {
    return this;                    // --> [object Object]
  }};
// ==================================================================
// 使用 person2 作为参数来调用 person1.fullName 方法时, this 将指向 person2, 即便它是 person1 的方法：
var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = {
  firstName:"John",
  lastName: "Doe",
}
person1.fullName.call(person2);  // --> "John Doe"

20、JavaScript `let` 和 `const`

函数内使用 var 声明的变量只能在函数内容访问，如果不使用 var 则是全局变量（函数与块级作用域不同）
使用 var 关键字声明的变量不具备块级作用域的特性，他在{}仍能被访问到
- 在 ES6 之前是没有块级作用域概念
- 使用 var 关键字重新声明变量可能会带来问题，在块中重新声明变量也会重新声明块外的变量：使用 let 解决
- ES6可以使用 let 关键字来实现块级作用域
  - let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问

var x = 10            // --> x = 10
{
	var x = 2;        // --> x = 2
}                     

// ==================================================
var x = 10            // --> x = 10
{
	let x = 2;        // --> x = 2
}

在 JavaScript中，全局作用域是针对 JavaScript 环境，在 HTML 中，全局作用域是针对 window 对象，使用 var 关键字声明的全局作用域变量属于 window 对象，使用 let 关键字声明的全局作用域变量不属于 window 对象

var x = "cy";  // --> 可以使用 window.x 访问变量
let y = 'cy';  // --> 不能使用 window.y 访问变量

使用 var 关键字声明的变量在任何地方都可以修改；在相同的作用域或块级作用域中，不能使用 let 关键字来重置 var 关键字声明的变量；在相同的作用域或者块级作用域中，不能使用 let 关键字来重置 let 关键字声明的变量；在不同作用域或者块级作用域中 let 关键字是可以重新声明赋值的

// 在相同的作用域或者块级作用域中，不能使用 let 关键字来重置 var 关键字声明的变量
var x = 2;       // 合法
let x = 3;       // 不合法
或
{
    var x = 4;   // 合法
    let x = 5   // 不合法
}
// ==================================================================
// 在不同作用域或者块级作用域中 let 关键字是可以重新声明赋值的
let x = 2;       // 合法
{
    let x = 4;   // 合法
}

在相同的作用域或块级作用域中，不能使用 var 关键字来重置 let 关键字声明的变量

let x = 2;       // 合法
var x = 3;       // 不合法
或
{
    let x = 4;   // 合法
    var x = 5;   // 不合法
}

变量提升：var 关键字定义的变量可以先使用在声明，但 let 关键字定义的变量则必须先声明再使用。
const 定义常量与使用 let 定义的变量相似：二者均是块级作用域；均不能和它所在作用域内的其他变量或函数拥有相同的名称
const 声明的常量必须初始化，而 let 声明的变量不用；const 定义常量的值不能通过再赋值修改，也不能再次声明（是在同一作用域下）。而 let 定义的变量值可以修改

// 必须初始化
const PI; PI = 3.1415926;  // --> 错误
const PI = 3.1415926;  // --> 正确
// ===============================================
// 不能修改  --> 是在同一作用域下
const PI = 3.1415926;
PI = 3.14;    // --> 报错
// ============================================
let x = 1;
x = 2      // --> x = 2

const 的本质：const 定义的变量并非常量，并非不可变，它定义了一个常量引用一个值。使用 const 定义的对象或者数组，其实是可变的。

// 创建常量对象
const car = {type:"Fiat", model:"500", color:"white"};
// 修改属性:
car.color = "red";
// 添加属性
car.owner = "Johnson";
// 不能赋值
car = {type:"Volvo", model:"EX60", color:"red"};  // --> 错误

const 关键字在不同作用域，或不同块级作用域中是可以重新声明的

const x = 2;       // 合法
{
    const x = 3;   // 合法
}
{
    const x = 4;   // 合法
}

21、JavaScript Json

json 英文全称 Javascript Object Notation(符号)
- 是一种轻量级的数据交换模式，用于存储和传输数据的格式
- 是独立的语言，通常用于服务端向网页传递数据
- JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。文本可以被任何编程语言读取及作为数据格式传递。
使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象
- var obj = JSON.parse(text);
将 JavaScript 值转换为 json 字符串。
- JSON.stringify()
json 是 js 对象的字符串表示法，json本质是一个字符串。

22、JavaScript:void(0)

void 是 javascript 中重要关键字，该操作符指定要计算一个表达式但是不返回值。
当用户链接时，void(0) 计算为 0，但 JavaScript上没有任何效果

void func()                 // --> void(func())
javascript:void func()      // --> javascript:void(func())

// void 指定要计算一个表达式，但不返回值
function getValue(){
var a, b, c;
a = void(b = 5, c = 7);
document.write(a, b, c)    // --> a = undefined, b = 5, c = 7
}

// 当用户链接时，`void(0)` 计算为 0，但 JavaScript上没有任何效果
<a href="javascript:void(0)">单机此处什么也不会发生</a>
<!--下例中，在点击链接后显示警告信息-->
< a href="javascript:void(alert('Warning!!'))">点我弹出警示框</a>

href="#" 与 href="javascript:void(0)"的区别
- # 包含一个位置信息，默认的锚时 #top 也就是网页的上端；
- 而javascript:void(0)仅仅表示死链接。
- 在 html 页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id

<a href="javascript:void(0);">点我没有反应的!</a>
<a href="#position">点我定位到指定位置!</a>
……
<p id="position">定位点</p>

23、JavaScript 异步编程

异步（Asynchronous,sync），同步（Synchronous,sync）
同步：步骤在一个控制流序列中按顺序执行；异步：从主线程发射一个子线程来完成任务。
异步优缺点：
- 子线程独立于主线程，所以即使出现阻塞也不会影响主线程的运行。
- 子线程有一个局限：一旦发射了以后就会与主线程失去同步，我们无法确定它的结束，如果结束之后需要处理一些事情，比如处理来自服务器的信息，我们是无法将它合并到主线程中去的。为了解决这个问题，JavaScript 中的异步操作函数往往通过回调函数来实现异步任务的结果处理。
回调函数：就是一个函数，在我们启动一个异步任务的时候告诉它：等你完成这个任务之后要干什。这样主线程几乎就不用关心异步任务的状态，他自己会善始善终。

……
setTimeout(function () {
    document.getElementById("demo").innerHTML="RUNOOB!";
}, 3000);
document.getElementById("demo2").innerHTML="RUNOOB-2!";
// setTimeout 就是一个耗时3秒的过程，它的第一个参数是回调函数，第二个参数是毫秒数，这个函数执行时候会产生一个子线程，子线程会等待3秒，然后执行回调函数，在命令行输出
// setTimeout 会在子线程中等待 3 秒，在 setTimeout 函数执行之后主线程并没有停止

异步 AJAX
- 除了setTimeout 函数之外，异步回调广泛应用于 AJAX 编程

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
<p><strong>以下内容是通过异步请求获取的：</strong></p>
<p id="demo"></p>
<script>
var xhr = new XMLHttpRequest();
xhr.onload = function () {
    // 输出接收到的文字数据
    document.getElementById("demo").innerHTML=xhr.responseText;
}
 
xhr.onerror = function () {
    document.getElementById("demo").innerHTML="请求出错";
}
// 发送异步 GET 请求
xhr.open("GET", "https://www.runoob.com/try/ajax/ajax_info.txt", true);
xhr.send();
</script>
</body>
</html>
<!--XMLHttpRequest 的 onload 和 onerror 属性都是函数，分别在它请求成功和请求失败时被调用。-->

24、JavaScript Promise

Promise 是一个ECMAScript 6 提供的类，目的是更加优雅地书写复杂的异步任务。
使用：
- 构造 Promise ，新建一个 Promise 对象 new Promise(function(resolve, reject){……})
- Promise 构造函数只有一个参数，是一个函数，这个函数在构造之后会被异步运行，所以称之为起始函数。起始函数包括两个参数 resolve，reject ，当 Promise 被构造时，起始函数会被异步执行。
  - 其中 resolve 和 reject 均是函数，调用 resolve 代表一切正常， reject 是出现异常的时候调用的
  - Promise 类有 .then()，.catch()，.finally()，三个方法，这三个方法的参数均是一个函数，.then() 可以将参数中的函数添加到当前 Promise 的正常序列，.catch() 则是设定 Promise 的异常处理序列，.finally() 是在执行 Promise 执行的最后一定会执行的序列。.then() 传入的函数会按顺序依次执行，有任何异常均会直接跳到 catch 序列

new Promise(function(resolve, reject){
	var a = 0, b = 1;
	if (b==0) reject("Divide zero");
	else resolve(a/b);
}).then(function(value){
	console.log('a / b = ' + value)
}).catch(function(err){
	console.log(err);
}).finally(function(){
	console.log('end!')
})

resolve() 中可以放置一个参数用于向下一个 then 传递一个值， then 中函数也可以返回一个值（return）传递给 then 。但是，如果 then 中返回的是一个 Promise 对象，那么下一个 then 将相当于对这个返回的 Promise 进行操作。
- resolve 和 reject 的作用域只有起始函数，不包括之后的 catch 函数用于处理异常
- reject() 参数中一般会传递一个异常给之后的 catch 函数用于处理异常
- resolve 和 reject 并不能够使起始函数停止运行，别忘了 return。
- then 模块默认会向下顺序执行，return 是不能中断的，可以通过 throw 来跳转至 catch 实现中断

new Promise(function (resolve, reject) {
	console.log(1111);
	resolve(2222);      // --> 传递给下一个 then
}).then(function (value) {
	console.log(value);
	return 3333;      // --> then 中的函数也可以返回一个值传递给 then
}).then(function (value) {
	console.log(value);
	throw "An error";    // --> 传递一个自定义的异常给catch函数，用于处理异常
}).catch(function (err) {
	console.log(err);
});  // --> 1111, 2222, 3333, An error

返回值为一个 Promise 对象的函数称作 Promise 函数，常用于开发居于异步操作的库

function countnumber(delay, message){
	return new Promise(function(resolve, reject){
		setTimeout(function(){
			console.log(message);
			resolve();
		}, delay)           // setTimeout(回调函数，毫秒数)
	})
}
countnumber(1000, "First").then(function(){
	return countnumber(2000, "Second");
}).then(function(){
	countnumber(3000, "Third")
})
// ======================================== 或者
new Promise(function (resolve, reject) {
    setTimeout(function () {
        console.log("First");
        resolve();
    }, 1000);
}).then(function () {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log("Second");
            resolve();
        }, 2000);
    });
}).then(function () {
    setTimeout(function () {
        console.log("Third");
    }, 3000);
});

四、JavaScript 函数

1、函数定义

使用关键字function 定义函数，函数声明之后不会立即执行，会在我们需要的时候调用
通过表达式定义，函数表达式可以存储在变量中，变量也可以作为一个函数使用

var x = function(a, b){return a * b};
var y = x(4, 3);
// 以上函数实际上是一个匿名函数（函数没有名称），函数存储在变量中，不需要函数名称，通常通过变量名来调用。上述函数以分号结尾，因为它是一个执行语句。

Function() 构造函数，通过内置的 **JavaScript 函数构造器（Function()）**定义。

var myFunction = new Function("a", "b", "return a*b");
var x = myFunction(4, 3);

函数提升（Hoisting：是JavaScript 默认将当前作用域提升到前面去的行为）
函数表达式可以自调用，如果表达式后面紧跟 () ，则会自动调用，通过添加 () ，来说明它是一个函数表达式

(function(){
    var x = "Hello!";
})();  // 实际上是一个匿名自我调用的函数（没有函数名）

函数是对象
- 在 JavaScript 中使用 typeof 操作符判断函数类型将返回 function，但在JavaScript 函数描述为一个对象更加准确。
- JavaScript 函数有属性和方法
  - argument.length 属性返回函数调用过程接收到的参数个数：
  - toString() 方法将函数作为一个字符串返回：
- 函数定义作为对象的属性，称之为对象方法。函数如果用于创建新的对象，称之为对象的构造函数。
箭头函数
- (参数1, 参数2, ……) => {函数声明}
- (参数1, 参数2, ……) => 表达式 const x = (x, y) => {return x * y}
- 有的箭头函数没有自己的 this 。不适合定义一个对象方法。当我们使用箭头函数时候，箭头函数会默认帮我们绑定外层 this 的值，所以在箭头函数中的 this 的值和外层的 this 是一样的。箭头函数是不能提升的，所以需要在使用之前定义。
- 使用 const 比使用 var 更安全，因为函数表达式始终是一个常量。
- 如果函数部分只是一个语句，可以省略 return 关键字和大括号 {}

2、函数参数

显式参数（Parameters）：在函数定义时列出
隐式参数（Arguments）：在函数调用时传递给函数真正的值
- ES5 中如果函数在调用时未提供隐式参数，参数会默认设置为： undefined
- 如果函数调用时设置了过多的参数，参数将无法被引用，因为无法找到对应的参数名。只能使用 arguments 对象来调用。
  - JavaScript 函数有个内置的对象 arguments 对象。
  - argument 对象包含了函数调用的参数数组。

x = findMax(1, 123, 500, 115, 44, 88);
 
function findMax() {
    var i, max = arguments[0];

    if(arguments.length < 2) return max;
 
    for (i = 0; i < arguments.length; i++) {
        if (arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}

3、函数调用

函数有4种调用方式，每种方式的不同在于this 的初始化（一般而言，this 指向函数执行时当前对象）
- 作为一个函数调用 myFunction() 和 window.myFunction() 是一样的
- 函数作为对象的方法被调用
- 使用构造函数调用函数：如果函数调用前使用 new 关键字，则是调用了构造函数。
  - 看起来像是创建了新的函数，但实际上 JavaScript 函数是重新创建的对象。构造函数的调用会创建一个新的对象。新对象会继承构造函数的属性和方法。
- 作为函数方法调用函数：函数是对象，函数有它的属性和方法。call() 和 apply()是预定义的函数方法。两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。

//  构造函数
function myFunction(arg1, arg2){
	this.firstname = arg1;
	this.lastname = arg2;
}
var x = new myFunction("John", "Doe");
x.firstname   // --> "John"
// 在一个已存在构造器的对象中是不能添加新的属性：
myFunction.nationality = "English"  // --> 无法添加，但不会报错

var myObject, myArray;
function myFunction(a, b) {
    return a * b;
}
myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray);  // 返回 20

4、闭包

内嵌函数
闭包（使得函数用于私有变量变成可能）
- 变量 add 指定了函数自我调用的返回字值；自我调用函数只执行一次，设置计数器为0。并返回函数表达式；add 变量可以作为一个函数使用。非常棒的是它可以访问上一层作用域的计数器。

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

五、HTML DOM

1、HTML DOM

通过 HTML DOM ，可以访问 JavaScript HTML 文档的所有元素
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
HTML DOM 模型会被构造为对象的树

通过 id 查找 HTML 元素 var x = document.getElementById("")，若找到该元素，则该方法则将以对象（在 x 中）的形式返回该元素。如果未找到该元素，则 x 将包含 null
通过标签名查找 var x = document.getElementByTagName("")
通过类名找 var x = document.getElementByClassName("")

2、HTML DOM - 改变 HTML

document.write() 可用于直接向 HTML 输出流 写内容 document.write(Data())
改变HTML 内容最简单的方法是使用 innerHTML 属性 document.getElementById("").innerHTML=""
改变 HTML 元素的属性 document.getElementById(id).attribute=""

3、HTML DOM - 改变 CSS

修改 HTML 元素的样式 document.getElementById(id).style.property=新样式

document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";

4、 HTML DOM 事件

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
<h1 onmouseover="style.color='red'"onmouseout="style.color='black'">将鼠标移至文本上</h1>
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
onload 和 onunload 事件会在用户进入或离开页面时被触发。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body onload="checkCookies()">

<script>
function checkCookies(){
	if (navigator.cookieEnabled==true){
		alert("Cookies 可用")
	}
	else{
		alert("Cookies 不可用")
	}
}
</script>
<p>弹窗-提示浏览器 cookie 是否可用。</p>
	
</body>
</html>

5、HTML DOM EventListener

document.getElementById("myBtn").addEventListener("click", displayDate);
- addEventListener() 方法用于向指定元素添加事件句柄。
- 添加的事件句柄不会覆盖已存在的事件句柄
- 可以向一个元素添加多个事件句柄
element.addEventListener(event, function, useCapture);
- 第一个参数是事件的类型（如 click 或 mousedown）
- 第二个参数是事件触发后调用的函数
- 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的默认为false ，即冒泡排序
向 window 对象添加事件句柄
- addEventListener() 方法允许在 HTML DOM 对象添加事件监听
- HTML DOM 对象：
  - HTML 元素
  - HTML 文档
  - window 对象
  - xmlHttpRequest 对象
事件传递有两种方式：（事件传递定义了元素事件触发的顺序）
- 冒泡：内部元素的事件会被触发，然后再触发外部元素
- 捕获：外部元素的事件会被触发，然后会触发内部元素的事件
- 下面的例子是点击包含在div 元素中的 p 元素会先执行那个

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
div {
    background-color: coral;
    border: 1px solid;
    padding: 50px;
}
</style>
</head>
<body>

<p>实例演示了在添加不同事件监听时，冒泡与捕获的不同。</p>
<div id="myDiv">
	<p id="myP">点击段落，我是冒泡。</p>
</div><br>
<div id="myDiv2">
	<p id="myP2">点击段落，我是捕获。 </p>
</div>
<script>
document.getElementById("myP").addEventListener("click", function() {
    alert("你点击了 P 元素!");
}, false);
document.getElementById("myDiv").addEventListener("click", function() {
    alert(" 你点击了 DIV 元素 !");
}, false);
document.getElementById("myP2").addEventListener("click", function() {
    alert("你点击了 P2 元素!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() {
    alert("你点击了 DIV2 元素 !");
}, true);
</script>

</body>
</html>

removeEventListener()

6、HTML DOM 元素（节点）

创建一个新的元素节点，然后再已存在的元素中添加它，添加新元素到尾部。如果我们需要将新元素添加到开始位置，可以使用 insertBefore() 方法:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var element = document.getElementById("div1");
element.appendChild(para);
</script>

</body>
</html>

要移除一个元素，你需要知道该元素的父元素。parent.removeChild(child)
使用 replaceChild() 方法来替换 HTML DOM 中的元素。

7、HTML DOM 集合（Collection）

var x = document.getElementsByTagName("p");
- getElementsByTagName() 方法返回 HTMLCollection 对象。
- HTMLCollection 对象类似包含 HTML 元素的一个数组。但HTMLCollection 不是一个数组！

8、HTML DOM 节点列表（NodeList）

NodeList 对象是一个从文档中获取的节点列表 (集合) 。
NodeList 对象类似 HTMLCollection 对象。

六、JS 高级教程

1、JS 对象

对象只是带有属性和方法的特殊数据类型
JavaScript 对象就是一个 name:value 集合。
在 JavaScript 中，不会创建类，也不会通过类来创建对象（就像在其他面向对象的语言中那样）。JavaScript 基于 prototype，而不是基于类的。

2、prototype（原型对象）

所有的 JavaScript 对象都会从一个 prototype 中继承属性和方法
- Date 对象从 Date.prototype 继承
- Array 对象从 Array.prototype 继承
- Person 对象从 Person.prototype 继承。
- 所有 JavaScript 中的对象都是位于原型链顶端的Object 的实例。JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时，它不仅仅再该对象进行搜寻，还会搜寻该对象的原型，遗迹该对象原型的原型，依次层层向上搜索，知道找到一个名字匹配的属性或到达原型链的末尾。Date，Array，Person 对象从object.prototype 继承
添加属性和方法
- 要在所有已经存在的对象添加新的属性或方法，要在对象的构造函数中添加属性或方法，使用 prototype 属性就可以给对象的构造函数添加新的属性

<script>
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

Person.prototype.nationality = "English";  // --> Person.nationality = "English"  --> 无法添加上去

var myFather = new Person("John", "Doe", 50, "blue");
document.getElementById("demo").innerHTML =
"我父亲的国籍是 " + myFather.nationality; 
</script>

3、Number 对象

所有的 JavaScript 数字均为 64 位，所有的数字都是浮点型，JavaScript 采用 IEEE754 标准定义的 64 位浮点格式表示数字，它能表示最大值为 ±1.7976931348623157e+308，最小值为 ±5e-324。
- 用 64 位存储数值，其中 0 到 51 存储数字（片段），52 到 62 存储指数，63 位存储符号：
精度：
- 整数（不使用小数点或指数计数法）最多为 15 位。
  - var y = 9999999999999999 --> y = 1000……
- 小数的最大位数是 17，但是浮点运算并不总是 100% 准确：
  - var x = 0.2+0.1; // 输出结果为 0.30000000000000004
如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 “x”，则解释为十六进制数。 ** 绝不要在数字前面写零，除非您需要进行八进制转换。 **
- 使用 toString() 方法输出16进制、8进制、2进制。
- num.toString(16) , num.toString(8) 注：(var num = 128)
NaN - 非数字值
- NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把Number 对象设置为该值，来指示其不是数字值
- 0/0 得 NaN
- 整数/0 得 infinity

4、String 对象

使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置：
match() 函数用来查找字符串中特定的字符，并且如果找到的话，则返回这个字符。
replace() 方法在字符串中用某些字符替换另一些字符。
字符串大小写转换使用函数 toUpperCase() ，toLowerCase()
字符串使用 split() 函数转为数组:

var str="Hello world, welcome to the universe.";
var n=str.indexOf("welcome");
// =======================================
str="Please visit Microsoft!"
var n=str.replace("Microsoft","Runoob");
// ======================================
txt="a,b,c,d,e"   // String
txt.split(",");   // 使用逗号分隔

5、Date 对象

通过new 关键字来定义 Date 对象 var myDate = new Date()
getFullYear() 获取年份
getTime() 返回从1970年1月1日至今得毫秒数
getDay() 显示星期，星期日为 0

6、Array 对象

创建数组，并为其赋值 var myCars = new Array()
访问数组：通过指定数组名以及索引号码，你可以访问某个特定的元素
使用数组对象预定义属性和方法：
- var x = myCars.length 返回数组中元素个数
- var y = myCars.indexOf("BMW") 返回 BMW 值得索引值
- concat() 连接数组
- join() 把数组的元素放入一个字符串
- pop() 输出数组最后一个元素并返回删除的元素
- push() 向数组末尾添加一个或更多的元素，返回新的长度

7、Boolean 对象

var b = new Boolean(0) 返回 true

8、Math 对象

round(x) 四舍五入。
floor(x) 对 x 进行下舍入
random() 返回0-1之间的随机数

9、RegExp 对象

var patt=new RegExp(pattern,modifiers);
// ================================
var patt=/pattern/modifiers;

test() 方法搜索字符串指定的值，根据结果并返回真或假，含有为 true
exec() 方法检索字符串中指定的值，返回值是被找到的值。如果没有发现匹配，则返回 null

var patt1=new RegExp("\\d");
document.write(patt1.exec("The best things in 9 life are free"));

七、浏览器 BOM

1、Window BOM

浏览器对象模型（BOM：Browser Object Model）使 JavaScript 有能力与浏览器对话
所有浏览器都支持 window 对象。它表示浏览器窗口
所有 JavaScript 全局对象、函数以及变量均自动成为window 对象的成员
全局变量使 window 对象的属性；全局函数是 window 对象的方法
HTML DOM 的 document 也是 window 对象的属性之一：

window.document.getElementById("header"); <==> document.getElementById("header");

2、Window Screen

window.screen 对象包含有关用户屏幕的信息。（注：window.screen对象在编写时可以不使用 window 这个前缀。）
- screen.availWidth - 可用的屏幕宽度
- screen.availHeight - 可用的屏幕高度

3、Window Location

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
（注：window.screen对象在编写时可以不使用 window 这个前缀。）

4、Window History

window.history 对象包含浏览器的历史。
window.history对象在编写时可不使用 window 这个前缀。
- history.back() - 与在浏览器点击后退按钮相同
- history.forward() - 与在浏览器中点击向前按钮相同

5、window Navigator

window.navigator 对象包含有关访问者浏览器的信息。

<script>
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.language + "</p>";
document.getElementById("example").innerHTML=txt;
</script>

6、JavaScript 弹窗

警告框：window.alert("sometext");
确认框：window.confirm("sometext");
提示框：window.prompt("sometext","defaultvalue");当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。var person=prompt("请输入你的名字","Harry Potter");
弹窗使用反斜杠 + “n” (\n) 来设置换行。

7、计时事件

通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
1. setInterval() 间隔指定的毫秒数不停地执行指定的代码。
  - var myVar = setInterval(function(){alert("Hello")},3000);
2. clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
  - clearInterval(myVar);
3. setTimeout() 在指定的毫秒数后执行指定代码。
  - var myVar = setTimeout(function(){alert("Hello")},3000); 等待三秒，然后弹出 Hello
4. clearTimeout() 方法用于停止执行 setTimeout() 方法的函数代码。
  - clearTimeout(myVar);

8、Cookies

Cookies 含义：
- Cookies 用于储存 web 页面的用户信息
- 当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。
- Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:
  - 当用户访问 web 页面时，他的名字可以记录在 cookie 中。
  - 在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。
- Cookie 以名/值对形式存储 username=John Doe
  - 当浏览器从服务器上请求 web 页面时，属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。
创建Cookies
- 使用 document.cookie 属性来创建、读取、删除 cookie
- document.cookie="username=John Doe";
- document.cookie 将以字符串的方式返回所有的 cookie，类型格式： cookie1=value; cookie2=value; cookie3=value;

八、JavaScript 库

1、库（jQuery、Prototype、MooTools）

这些 JavaScript 库常被称为 JavaScript 框架。
- jQuery：它使用 CSS 选择器来访问和操作网页上的 HTML 元素（DOM 对象）。
- Prototype：提供用于执行常见 web 任务的简单 API。
  - API 是应用程序编程接口（Application Programming Interface）的缩写。它是包含属性和方法的库，用于操作 HTML DOM。
- MooTools
CDN - 内容分发网络 (Content Delivery Network) Staticfile CDN
- 如果许多不同的网站使用相同的 JavaScript 框架，那么把框架库存放在一个通用的位置供每个网页分享就变得很有意义了
- 如需在您的网页中使用 JavaScript 框架库，只需在 <script> 标签中引用该库即可：
  - <script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script>

2、测试 jQuery

主要的 jQuery 函数是 $() 函数（jQuery 函数）。若向该函数传递DOM对象，会返回 jQuery 对象，带有向其添加的jQuery功能
jQuery 允许您通过 CSS 选择器来选取元素。

function myFunction()
{
    var obj=document.getElementById("h01");
    obj.innerHTML="Hello jQuery";
}
onload = myFunction;
// <============================================>
function myFunction()
{
    $("#h01").html("Hello jQuery");
}
$(document).ready(myFunction);
// HTML DOM 文档对象被传递到 jQuery ：$(document)
// 向 jQuery 传递 DOM 对象时，jQuery 会返回以 HTML DOM 对象包装的 jQuery 对象。
// jQuery 函数会返回新的 jQuery 对象，其中的 ready() 是一个方法。
// 由于在 JavaScript 中函数就是变量，因此可以把 myFunction 作为变量传递给 jQuery 的 ready 方法。

注：jQuery 返回 jQuery 对象，与已传递的 DOM 对象不同；jQuery 对象拥有的属性和方法，与 DOM 对象不同；不能再 jQuery 对象上使用 HTML DOM 的属性和方法

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>
<script>
function myFunction(){
	$("#h01").attr("style","color:red").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>
</head>
<body>
	
<h1 id="h01"></h1>
	
</body>
</html>
<!--jQuery 允许链接（链式语法）。链接（Chaining）是一种在同一对象上执行多个任务的便捷方法-->

3、测试 Prototype

Prototype 也有自己的 $() 函数
$() 函数接受 HTML DOM 元素的 id 值（或 DOM 元素），并会向 DOM 对象添加新的功能。
与 jQuery 不同，Prototype 没有用以取代 window.onload() 的 ready() 方法。相反，Prototype 会向浏览器及 HTML DOM 添加扩展。
在 JavaScript 中，您可以分配一个函数以处理窗口加载事件：
Event.observe() 接受三个参数：
- 您希望处理的 HTML DOM 或 BOM（浏览器对象模型）对象
- 您希望处理的事件
- 您希望调用的函数

<!--
function myFunction()
{
    var obj=document.getElementById("h01");
    obj.innerHTML="Hello Prototype";
}
οnlοad=myFunction;
-->
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.org/prototype/1.7.3/prototype.min.js">
</script>
<script>
function myFunction()
{
    $("h01").writeAttribute("style","color:red").insert("Hello Prototype!");
}
Event.observe(window,"load",myFunction);
</script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>

装的 jQuery 对象。
// jQuery 函数会返回新的 jQuery 对象，其中的 ready() 是一个方法。
// 由于在 JavaScript 中函数就是变量，因此可以把 myFunction 作为变量传递给 jQuery 的 ready 方法。


**注：jQuery 返回 jQuery 对象，与已传递的 DOM 对象不同；jQuery 对象拥有的属性和方法，与 DOM 对象不同；不能再 jQuery 对象上使用 HTML DOM 的属性和方法**

```html
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>
<script>
function myFunction(){
	$("#h01").attr("style","color:red").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>
</head>
<body>
	
<h1 id="h01"></h1>
	
</body>
</html>
<!--jQuery 允许链接（链式语法）。链接（Chaining）是一种在同一对象上执行多个任务的便捷方法-->

3、测试 Prototype

Prototype 也有自己的 $() 函数
$() 函数接受 HTML DOM 元素的 id 值（或 DOM 元素），并会向 DOM 对象添加新的功能。
与 jQuery 不同，Prototype 没有用以取代 window.onload() 的 ready() 方法。相反，Prototype 会向浏览器及 HTML DOM 添加扩展。
在 JavaScript 中，您可以分配一个函数以处理窗口加载事件：
Event.observe() 接受三个参数：
- 您希望处理的 HTML DOM 或 BOM（浏览器对象模型）对象
- 您希望处理的事件
- 您希望调用的函数

<!--
function myFunction()
{
    var obj=document.getElementById("h01");
    obj.innerHTML="Hello Prototype";
}
οnlοad=myFunction;
-->
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.org/prototype/1.7.3/prototype.min.js">
</script>
<script>
function myFunction()
{
    $("h01").writeAttribute("style","color:red").insert("Hello Prototype!");
}
Event.observe(window,"load",myFunction);
</script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>

爱学习的小岳

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础笔记

一、JavaScript‘学习地址’HTML定义了网页的内容css描述了网页的布局JavaScript控制了网页的行为JavaScript是互联网上流行的脚本语言，这门语言可以用于HTML和web，更可以广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。ECMA-262 是JavaScript标准的官方名称是一种轻量级的编程语言是可插入HTML页面的编程代码插入页面后，可由所有的现代浏览器执行JavaScript输出JavaScript 没有任何打印或者输
复制链接

扫一扫

性	描述
:disabled`\| 选取属性为`disabled`属性的`input` 元素
:invalid`\|选取无效的`input`元素
:optional`\| 选取没有`optional`属性的`input`元素
:requried`\|选择有`requeired`属性的`input`元素
valid`\| 选取有效值的`input`元素

JavaScript基础笔记

一、JavaScript

JavaScript输出

操作HTML元素

二、JavaScript语法

1、变量、操作符……

三、JavaScript语句

1、变量

2、数据类型

3、JavaScript函数

4、JavaScript事件

5、JavaScript字符串

1、charAt()

2、concat()

3、indexOf()、lastIndexOf()

4、正则表达式 match()、search()；替换字符串 replace()

5、slice()

6、split()

7、toLocaleLowerCase()、toLocaleUpperCase()

8、toLowerCase()、toUpperCase()

9、toString()

10、trim()

6、JavaScript 运算符

7、JavaScript 条件语句

8、循环语句

9、typeof，null，undefined

10、类型转换

11、正则表达式 (Regular Expression) regex

12、throw、try、catch

13、JavaScript 调试

14 、JavaScript 声明提升

15、JavaScript 的严格模式

16、JavaScript 使用误区

17、JavaScript 表单

18、JavaScript 验证 API

19、JavaScript 保留关键字

20、JavaScript let 和 const

21、JavaScript Json

22、JavaScript:void(0)

23、JavaScript 异步编程

24、JavaScript Promise

四、JavaScript 函数

1、函数定义

2、函数参数

3、函数调用

4、闭包

五、HTML DOM

1、HTML DOM

2、HTML DOM - 改变 HTML

3、HTML DOM - 改变 CSS

4、 HTML DOM 事件

5、HTML DOM EventListener

6、HTML DOM 元素（节点）

7、HTML DOM 集合（Collection）

8、HTML DOM 节点列表（NodeList）

六、JS 高级教程

1、JS 对象

2、prototype（原型对象）

3、Number 对象

4、String 对象

5、Date 对象

6、Array 对象

7、Boolean 对象

8、Math 对象

9、RegExp 对象

七、浏览器 BOM

1、Window BOM

2、Window Screen

3、Window Location

4、Window History

5、window Navigator

6、JavaScript 弹窗

7、计时事件

8、Cookies

八、JavaScript 库

1、库 （jQuery、Prototype、MooTools）

2、测试 jQuery

3、测试 Prototype

3、测试 Prototype

“相关推荐”对你有帮助么？

20、JavaScript `let` 和 `const`

1、库（jQuery、Prototype、MooTools）