# JS

# Ⅰ. 显示数据

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

# 1.window.alert()

这之中可以进行运算，如果输出不是字符，可以不要”“

操作 HTML 元素

如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById (id) 方法。

请使用 "id" 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容：

例如：

	<!DOCTYPE html>
	<html>
	<body>
	<h1>我的第一个 Web 页面</h1>
	<p id="demo">我的第一个段落</p> //使用标签来获取
	<script>
	document.getElementById("demo").innerHTML = "段落已修改。";
	</script>
	</body>
	</html> //注意这是一个覆盖操作，js对大小写很敏感

# 2.document.write()

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

网页加载后输出流就已经停止，重新调用 document.write () 就会发生覆盖，

事实上 write 方法会隐性调用 open 方法写一个新的文档（所以要加标签），如果强制使用 close 方法，会直接输出所有缓存的输出内容，理论上一旦调用了 close 方法，就不能在用 write，这样也会覆盖

# 3.console.log()

其中为输出的变量，这是写在控制台用于调试（F12），不会出现在网页上

# Ⅱ. 语法

// 注释方法同 C 语言

# 1. 字面量

# 数字（Number）

可以是整数或者是小数，或者是科学计数 (e)，输出时不会使用科学计数法

# 字符串（String）

可以使用单引号或双引号:

# 表达式

用于计算：比如 1/1

# 数组（Array）

定义一个数组：[]

定义方法：

	var cars=new Array();
	cars[0]="Saab"; // 数组的寻址从 0 开始，可以创建空数组
	cars[1]="Volvo";
	cars[2]="BMW";
	// 或者
	var cars=new Array("Saab","Volvo","BMW");
	// 再或者
	var cars=new Array("Saab","Volvo","BMW");
	// 最简单的
	var cars=["Saab","Volvo","BMW"];

注意：typeof 不能区分数组和对象，都会输出对象，要用：

if(car instanceof Array){
document.write("是数组")
}

对象（Object）字面量

定义一个对象：

定义方法：

	var person={firstname:"John", lastname:"Doe", id:5566};
	// 或者
	var person={
	firstname : "John",
	lastname : "Doe",
	id : 5566
	}; // 其实就是无所谓折行
	// 或者
	var people = new Object();
	people.name = 'Tom';
	people.age = 21;
	people.eat = function(){ } // 追加属性和方法

寻址方式：

name=person.lastname;
name=person["lastname"];

# 函数（Function）

定义一个函数： function myFunction (a, b)

带参数的变量使用：

	<p>点击这个按钮，来调用带参数的函数。</p>
	<button onclick="myFunction('Harry Potter','Wizard')">
	点击这里 //可以发送任意多的参数，变量接受参数时是按顺序的
	</button>
	<script>
	function myFunction(name,job){ // 参数要作为变量声明
	alert("Welcome " + name + ", the " + job);
	}
	</script>

带有返回值的函数：和 C 一样 return 变量；

注意： 整个 JavaScript 并不会停止执行，仅仅是函数。JavaScript 将继续执行代码，从调用函数的地方。

如果只是想退出函数，不继续执行，那么 return 可以不带任何参数

# 2. 变量

	<script>
	var length; // 不管什么类型，都是用 var
	length = 6;
	document.getElementById("demo").innerHTML = length;
	// 只会获取第一个出现的
	</script>

//undefined 和 [null](用于清空变量，var a=null)

如果在判断之后输出，都会是 undifined

// 字面量是不可变的运算符同样可以出现在赋值中

// 和 python 一样，变量是动态类型，可以使用 typeof () 来查看变量类型

// 存在布尔量，写为 var x=true/false;

# 运算符

类型	实例	描述
赋值，算术和位运算符	= + - * /	在 JS 运算符中描述
条件，比较及逻辑运算符	== != < >	在 JS 比较运算符中描述

function 用于定义函数在 {} 之间的会一并执行

js 会忽略多余的空格，可以随便加以提高可读性

可以在字符串中使用 \ 折行，可以正常显示

JavaScript 是脚本语言，浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

# 声明变量类型

可以使用关键词 "new" 来声明其类型：

	var carname=new String;
	var x= new Number;
	var y= new Boolean;
	var cars= new Array;
	var person= new Object;

# 对象属性

[JavaScript 变量均为对象](可以说 "JavaScript 对象是变量的容器"。但是，我们通常认为 "JavaScript 对象是键值对的容器"。键值对通常写法为 name : value (键与值以冒号分割)。键值对在 JavaScript 对象通常称为对象属性。 JavaScript 对象是属性变量的容器)

访问对象属性的方法：

	person.lastName;
	// 或者
	person["lastName"]; // 这些表达式相当于一个普通变量

# 对象方法

对象的方法定义了一个函数，并作为对象的属性存储。

对象方法通过添加 () 调用 (作为一个函数)。

	var person = {
	firstName: "John",
	lastName : "Doe",
	id : 5566,
	fullName : function()
	{
	return this.firstName + " " + this.lastName;
	} //this 其实等价于 person
	}; // 其实就是将函数作为对象属性（实际上是它的返回值）

访问对象方法

创建：

methodName : function() {
    // 代码 
}

访问：

	var person = {
	firstName: "John",
	lastName : "Doe",
	id : 5566,
	fullName : function()
	{
	return this.firstName + " " + this.lastName;
	}
	};
	document.getElementById("demo").innerHTML = person.fullName();
	// 这时函数是 person 对象的一个方法，如果作为属性访问【即不加 ()】，会返回函数的定义

# EX 局部变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。

您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。

只要函数运行完毕，本地变量就会被删除。

不在函数内声明的就是全局变量，它会在页面关闭后删除（这就是变量的生命周期）

# BEFORE 作用域

# 作用域类型

全局作用域：
- 全局作用域中的变量在整个程序中都可以访问。
- 例如，在浏览器中，全局作用域由 window 对象表示。
函数作用域：
- 函数作用域中的变量只能在该函数内部访问。
- 当函数执行完毕后，函数作用域中的变量通常会被销毁。
块级作用域：
- 块级作用域中的变量只能在特定的代码块（如 if 语句、 for 循环、 while 循环等）内部访问。
- JavaScript ES6 引入了 let 和 const 关键字，允许在块级作用域中声明变量。

# 作用域链

作用域链是一系列嵌套的作用域，从当前作用域开始，一直到全局作用域结束。当查找变量时，JavaScript 引擎会沿着作用域链向上查找，直到找到该变量或到达全局作用域。

# EX 未声明的变量

如果您把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性。

var 声明的属于不可配置全局属性，没有则是 [可配置全局属性](非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以使用 delete var 删除。)

在 HTML 中，全局变量是 window 对象，所以 window 对象可以调用函数内的未声明（未加 var) 的局部变量。

** 注意：** 所有数据变量都属于 [window 对象]( 全局变量，或者函数，可以覆盖 window 对象的变量或者函数，因此，自设变量时尽量不要和已有的 window 变量或函数重名，这样会覆盖掉。局部变量，包括 window 对象可以覆盖全局变量和函数。 )。

# 外部访问局部变量

** 通过全局对象：** 在函数内部，可以通过将局部变量赋值给 window 对象的属性来使其成为全局可访问的。例如，使用 window.a = a; 语句，可以在函数外部通过 window.a 访问到这个局部变量的值。

** 定义全局变量：** 在函数内部不使用 var、let 或 const 等关键字声明变量时，该变量会被视为全局变量，从而可以在函数外部访问。但这种做法通常不推荐，因为它可能导致意外的副作用和代码难以维护。

** 返回值：** 可以通过在函数内部使用 return 语句返回局部变量的值，然后在函数外部接收这个返回值。这样，虽然局部变量本身不会被暴露，但其值可以通过函数调用传递到外部。

** 闭包：**JavaScript 中的闭包特性允许内部函数访问外部函数的局部变量。即使外部函数执行完毕后，其局部变量仍然可以被内部函数引用。

** 属性和方法：** 定义在全局作用域中的变量和函数都会变成 window 对象的属性和方法，因此可以在调用时省略 window，直接使用变量名或函数名。

闭包的一个重要特性是它们可以访问创建时的作用域，即使外部函数已经执行完毕。这意味着闭包可以访问外部函数的局部变量，即使这些变量在外部函数执行完毕后仍然存在。

# 3. 事件

# DOM

通过 [HTML DOM](当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。)，可访问 JavaScript HTML 文档的所有元素。

HTML DOM 模型被构造为对象的树：

1728045667035

js 可以改变页面中的：

html 元素，html 属性（属性本身实际上也以是 js），css 样式

还可以对事件做出反应

# Ⅰ. 查找 HTML 元素

# 通过 id 找到 HTML

	var x=document.getElementById("intro"); // 未找到就是 null
	// 返回是以对象（在 x 中）的形式，即 x.innerHTML

# 通过标签名找到 HTML

	var y=x.getElementsByTagName("p"); // 就是找标签是 & lt;p>
	// 返回是个数组，形式同上，即 y [0].innerHTML

# 通过类名找到 HTML

	var x=document.getElementsByClassName("intro");
	// 返回同标签名

# Ⅱ. 改变 HTML

# 1. 输出流

document.write()

# 2. 内容

	document.getElementById("id").innerHTML="新的 HTML"
	// 顺带一提，getElementById () 是方法，innerHTML 是属性，可以套

# 3. 属性

	document.getElementById("id").attribute="新属性值"
	// 改的是值，不是 HTML 属性本身，attribute 是要改的 HTML 属性（不是对象属性）

# 4. 样式 (css)

	document.getElementById(id).style.property=新样式
	//property 就是 style 属性下的 color 等。有横线的都去掉换成下一个字母大写（?）

# 5. 使用事件

包括但不限于：

元素被点击。
页面加载完成。
输入框被修改。

比如：

	<button type="button" onclick="document.getElementById('id1').style.color='red'">
	<--就是说可以当属性值,也可以调用函数-->
	这就是HTML事件属性

还有：

	<p id="p1">这是一个文本。这是一个文本。这是一个文本。这是一个文本。这是一个文本。这是一个文本。这是一个文本。</p>
	<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />
	<input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />
	<--visibility就是设置是否可见-->

# 6. 事件反应

包括但不限于：

当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

比如：

	<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
	//替换文本

除了 onclick 事件之外，还有：

# onload 与 onunload

<-- 它们用于处理 cookie，onload 还用于事先检测访问者的浏览器类型和版本 -->

# onchange

	<script>
	function myFunction(){
	var x=document.getElementById("fname");
	x.value=x.value.toUpperCase();
	}
	//value 就是你输入的值（所以事先输入的 value 是初始值！！！）
	//toUpperCase () 是内置函数，用于小写转大写，对其他没有影响
	</script>
	<body>
	输入你的名字:
	<input type="text" id="fname" onchange="myFunction()">
	<p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p>
	</body>

# onmousedown 与 onmouseup

# onmouseover 和 onmouseout

	<body>
	<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
	<script>
	function mOver(obj){
	obj.innerHTML="Thank You"
	}
	function mOut(obj){
	obj.innerHTML="Mouse Over Me"
	}
	</script>
	</body>

# EXTRA this

这里说说这个 this，它是 js 中的一个关键字，它在函数被调用时自动创建并用作指向调用该函数的上下文的引用。

在函数中它代表了调用函数的这个元素（作为一个对象）。

如果将其填入变量位置，则表示调用这个函数的这个元素的值。（就像上面）

也就是说

	onmouseover="mOver(this)"
	function mOver(obj){
	obj.innerHTML="Thank You"
	}
	与
	onmouseover="mOver()"
	function mOver(){
	this.innerHTML="Thank You"
	}
	实际上是一样的

# onfocus

	<script>
	function myFunction(x){
	x.style.background="yellow"; // 是的，只有 background
	}
	</script>
	输入你的名字: <input type="text" onfocus="myFunction(this)">
	<p>当输入框获取焦点时，修改背景色（background-color属性）将被触发。</p>

其他事件对象：https://www.runoob.com/jsref/dom-obj-event.html

# 7.addEventListener()

用于为元素添加一个或多个事件句柄（其实就是 onclick 之类的）不会覆盖，可以重复。

比如：

	<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
	<button id="myBtn">点我</button>
	<p id="demo"></p>
	<script>
	document.getElementById("myBtn").addEventListener("click", displayDate);
	/* 存在 removeEventListener ()，移除事件监听，可以用 document.getElementById ("myBtn").removeEventListener ("click", displayDate) 来实现 */
	function displayDate() {
	document.getElementById("demo").innerHTML = Date();
	} // 要有条件才调用，不要像这里多此一举
	</script>

IE8 以及之前的用的是 attachEvent () 和 detachEvent ()

解决办法：

	var x = document.getElementById("myBtn");if (x.addEventListener) {
	// 所有主流浏览器，除了 IE 8 及更早版本
	x.addEventListener("click", myFunction);} else if (x.attachEvent) {
	// IE 8 及更早版本
	x.attachEvent("onclick", myFunction);}