title: JavaScript笔记
toc: true
comments: true
tags: JavaScript
abbrlink: e803913a
date: 2021-06-03 15:07:00
categories:
这里记录的是JavaScript笔记, 包括ECMAScript, BOM和DOM !
(一)JavaScript(简称js)
(二)JS初识
1. javascript & java a. 变量是弱类型的
b. 每行结尾的分号可有可无，但建议保留2. js 的作用 HTML: 组织内容
CSS: 样式效果
JavaScript: 动态行为
a. 实现动态效果（操作html和css）
b. 表单提交3. js组成 a. ECMAScript：核心语法
b. BOM： 浏览器对象模型
c. DOM：文档对象模型4. html中引入js的方式 a. 外部引入
b. 内部引入
c. 内联方式 ps:
内部引入中，JavaScript脚本必须位于 <script> 与 </script> 标签之间。且脚本数量任意，位置任意。
5. js 输出
console.log() 浏览器控制台输出
window.alert() 窗口提示框输出
document.write() DOM文档输出ps: js 大小写敏感(三)ECMAScript 语法
0. 注释：
// 单行注释
/* 多行注释 */
1. 标识符: 字母、数字、下划线、$，数字不能打头。
2. 常量、变量(作用域)
常量：字符串常量可用单引号，也可用双引号
变量：var a;
作用域：仅有在方法中用var声明的变量才是局部变量
3. 数据类型
a. 基本类型(原始类型)：按值访问。操作保存在变量中实际的值。
String
Number: 特殊值NaN，表示非数（Not a Number），不能用于计算，所以 NaN != NaN
Boolean: true、false
Undefined: 它只有一个专用值undefined，即它的字面量。当声明的变量未初始化时，该变量的默认值是 undefined。
Null: 它只有一个专用值 null，即它的字面量。值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。
Symbol: 是 ES6 引入的一种新的原始数据类型，表示独一无二的值。
b. 引用类型: 按址访问。实际上是在操作对象的引用而不是实际的对象。
Object
String、Number、Boolean、Date、Math、Array、Function
自定义对象:
1. 使用Object类型创建对象
2. 字面量创建对象
3. 使用函数（构造器）创建对象
//1. 使用Object类型创建对象
var person = new Object();
//添加属性
person.name = "zhangsan";
//删除属性
delete person.name;
//2. 字面量创建对象
var stu = {
name: 'dufu',
age:20,
sex:'男'
};
4. 运算符
。== 和 ===（绝对等:值和类型都相同）、!= 和 !==（不绝对等: 值或类型不同）
。typeof 变量/常量
string - 如果变量是 String 基本类型
number - 如果变量是 Number 基本类型
boolean - 如果变量是 Boolean 基本类型
undefined - 如果变量是 Undefined 基本类型
object - 如果变量是一种引用类型或 Null 基本类型
function - 如果变量是Function函数类型
ps: Null类型进行typeof操作符后，结果是object，原因在于，null被当做一个空对象引用。
。instanceof
判断 “对象实例” 所属的 “引用类型”
eg:
var s1 = 'a';
var s2 = new String('a');
typeof s1 == string
typeof s2 == ojbect
s1 instanceof String == false
s2 instanceof String == true
5. 流程控制语句
>选择结构
if
switch
>循环结构
while
do...while
for
for...in: 遍历对象的属性或数组中的元素的
a. for...in 遍历数组
var arr = new Array(3);
arr[0] = 1;
arr[1] = 3;
arr[2] = 5;
for(var i in arr){
document.write(arr[i]);
}
b.for...in 遍历对象
var person = new Object();
person.name = "zhangsan";
person.age = 23;
person.sex = 'm';
for(var i in person){
document.write(i + "=" + person[i])
}
6. 函数
function show(m,n){
/*
* 局部变量：仅在方法中用var声明的变量才是局部变量
* 所以result是局部变量，如果去掉var声明，result则为全局变量。
*/
var result = m + n;
return result;
}原型（链）
1. __proto__：对象属性，指向当前对象的原型对象（可理解为父对象）
2. construtor：对象属性，指向当前对象的构造函数。
3. prototype：函数属性，指向这个函数所创建的实例的原型对象。
对象.__proto__ === 函数.prototype === 对象.constructor.prototype
ps:
对于所有的对象，其原型对象默为 Object 实例。
闭包
能够读取其他函数内部变量（局部变量）的函数。在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数”。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。(四) BOM
BOM: Browser Object Model
window
属性：
。location
。history
。navigator
。screen
。document(DOM)
。innerWith/innerHeight
方法：
。alert / prompt / confirm
。open / close
。setTimeout / clearTimeout
。setInterval / clearInterval
PS:
1. window的属性和方法，我们可以通过window来调用（window.alert()），也可以直接调用（alert()）
2. 用户自定义的全局属性（变量）和方法，自动成为window的属性和方法。(五) DOM
DOM：Document Object Model
核心：document
。属性
。方法
DOM元素操作：
1、获取元素节点：
。document.getElementById("id");
。document.getElementsByName("name");
。document.getElementsByTagName("tagName");
。document.getElementsByClassName("className");
。document.querySelector(css 选择器) 获取匹配到的第一个元素
。document.querySelectorAll(css 选择器) 获取匹配到的所有元素
2、增加节点
创建节点：
document.createElement("标签名")
追加节点：
parentNode.appendChild(childNode)
插入节点：
parentNode.insertBefore(newNode,refNode)
克隆节点
node.cloneNode(true)
3、删除节点：
parentNode.removeChild(node)
node.remove()
DOM属性操作：
1、获取：
dom.id
dom.className
dom.style
//方法
dom.getAttribute("id");
dom.getAttribute("class")
dom.getAttribute("style")
2、赋值：
dom.id = "newId";
dom.className = "newClass";
dom.style.color = "red";
dom.style.backgroundColor = "blue";
//方法
dom.setAttribute("id","newId");
dom.setAttribute("class","newClass");
dom.setAttribute("style","color:red;background-color:blue");DOM 文本操作：
1、获取：
dom.innerHTML
dom.innerText
2、赋值：
dom.innerHTML = ""; //这里可以写HTML语句
dom.innerText = ""; //这里可以写文本DOM 事件处理：
dom.onEvent = function(){};
dom.addEventListener("event",function(){});