JavaScript 学习笔记

JavaScript 和 HTML DOM 参考手册：https://www.runoob.com/jsref/jsref-tutorial.html

HTML DOM 事件对象参考手册：https://www.runoob.com/jsref/dom-obj-event.html
HTML DOM 教程：https://www.runoob.com/htmldom/htmldom-tutorial.html

语句是用分号分隔：
注释用双斜杠 // ， 多行注释以 /* 开始，以 */ 结尾。
JavaScript 使用 Unicode 字符集
JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性
您可以在文本字符串中使用反斜杠对代码行进行换行
可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型

对象属性有两种寻址方式：
document.write(person.lastname + "<br>");
document.write(person["lastname"] + "<br>");

可以通过将变量的值设置为 null 来清空变量

当您声明新变量时，可以使用关键词 "new" 来声明其类型：
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;

全局变量会在页面关闭后被删除。

可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量

声明也可横跨多行：
var lastname="Doe",
age=30,
job="carpenter";

如果重新声明 JavaScript 变量，该变量的值不会丢失：
在以下两条语句执行后，变量 carname 的值依然是 "Volvo"：
var carname="Volvo";
var carname;

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

在 JavaScript 中有 6 种不同的数据类型：

• string
• number
• boolean
• object
• function
• symbol

3 种对象类型：

• Object
• Date
• Array

2 个不包含任何值的数据类型：

• null
• undefined

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

<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function()
{
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo1").innerHTML = "不加括号输出函数表达式：" + person.fullName;
document.getElementById("demo2").innerHTML = "加括号输出函数执行结果：" + person.fullName();
</script>

<script>
function myFunction()
{
alert("Hello World!");
}
</script>

 

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。全局变量会在页面关闭后被删除。
如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量
在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。

如果您把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性。
这条语句：
carname="Volvo";
将声明 window 的一个属性 carname。
非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以删除

<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<button onclick="this.innerHTML=Date()">现在的时间是?</button>

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

=== 为绝对相等，即数据类型与值都必须相等。

continue 语句（带有或不带标签引用）只能用在循环中。
break 语句（不带标签引用），只能用在循环或 switch 中。
通过标签引用，break 语句可用于跳出任何 JavaScript 代码块：

可以设置为 null 来清空对象:var person = null;

Number() 转换为数字， String() 转换为字符串， Boolean() 转化为布尔值

test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

exec()该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

 

在字符串中直接使用回车换行是会报错的：字符串断行需要使用反斜杠(\)

注意：不用对 return 语句进行断行

定义数组元素，最后不能添加逗号

定义对象，最后不能添加逗号【对象就是字典】

数组中只允许使用数字索引

如果你使用名字作为索引，当访问数组时，JavaScript 会把数组重新定义为对象【即字典，所以此时只能用名字索引】。

var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length; // person.length 返回 0
var y = person[0]; // person[0] 返回 undefined

如果我们想测试对象是否存在：if (typeof myObj !== "undefined" && myObj !== null)

在每个代码块中 JavaScript 不会创建一个新的作用域，一般各个代码块的作用域都是全局的。
以下代码的的变量 i 返回 10，而不是 undefined：

for (var i = 0; i < 10; i++) {
// some code
}
return i;

表单验证方法：1）HTML 表单自动验证 2）JavaScript 表单验证

获取表单中数据的示例：https://www.runoob.com/js/js-form-validation.html
JavaScript 验证 API：https://www.runoob.com/js/js-validation-api.html
保留关键字：https://www.runoob.com/js/js-reserved.html
HTML事件：https://www.w3school.com.cn/jsref/dom_obj_event.asp

在对象方法中， this 指向调用它所在方法的对象。
单独使用 this或在函数中使用this，则它指向全局(Global)对象。在浏览器中，window 就是该全局对象
在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素

<button onclick="this.style.display='none'">
点我后我就消失了
</button>

apply 和 call 允许切换函数执行的上下文环境（context），即 this 绑定的对象，可以将 this 引用到任何对象

在下面实例中，当我们使用 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"

 

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

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

用于将一个 JSON 字符串转换为 JavaScript 对象:
var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';

obj = JSON.parse(text);

JSON.stringify():用于将 JavaScript 值转换为 JSON 字符串

void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值

=====异步调用：
setTimeout它的第一个参数是个回调函数，第二个参数是毫秒数;执行之后会产生一个子线程 就是一个消耗时间较长（3 秒）的过程，它的第一个参数是个回调函数，第二个参数是毫秒数，这个函数执行之后会产生一个子线程，子线程会等待 3 秒
AJAX 详细请参见：https://www.runoob.com/ajax/ajax-tutorial.html

Promise 是一个 ECMAScript 6 提供的类，目的是更加优雅地书写复杂的异步任务
Promise 类有 .then() .catch() 和 .finally() 三个方法
resolve() 中可以放置一个参数用于向下一个 then 传递一个值
reject() 参数中一般会传递一个异常给之后的 catch 函数用于处理异常

使用 JavaScript 访问 HTML 元素:var obj = getElementById("Demo")

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

JavaScript 函数有属性和方法：

arguments.length 属性返回函数调用过程接收到的参数个数
toString() 方法将函数作为一个字符串返回

apply和call两者的区别在于第二个参数： apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）

function myFunction(a, b) {
return a * b;
}
myObject = myFunction.call(myObject, 10, 2);

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

通过 id 找到 HTML 元素 var x=document.getElementById("intro");
通过标签名找到 HTML 元素
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
通过类名找到 HTML 元素
var x=document.getElementsByClassName("intro");

在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

修改 HTML内容使用 innerHTML 属性:document.getElementById(id).innerHTML=新的 HTML
改变 HTML元素的属性:document.getElementById(id).attribute=新属性值

改变 HTML 元素的样式:document.getElementById(id).style.property=新样式
如：document.getElementById("p2").style.color="blue";

事件：
【使用事件属性分配事件】当用户在 <h1> 元素上点击时，会改变其内容：<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
【使用 JavaScript 来向 HTML 元素分配事件】
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
【onload 和 onunload 事件会在用户进入或离开页面时被触发。】
【onchange 事件常结合对输入字段的验证来使用】
【onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。】
【首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件】
【当输入字段获得焦点时触发 onfocus】
addEventListener() 方法用于向指定元素添加事件句柄：document.getElementById("myBtn").addEventListener("click", displayDate);

向 Window 对象添加事件句柄：
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});

将 <p> 元素插入到 <div> 元素中：
在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。
在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。
addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：
addEventListener(event, function, useCapture);
默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄: