一、简介
JavaScript 的起源可以追溯到 1995 年，当时网景公司（Netscape Communications Corporation）的 Brendan Eich 在 10 天内创建了一种名为 LiveScript 的脚本语言，用于网页交互。不久之后，网景与 Sun Microsystems 合作，将 LiveScript 改名为 JavaScript，以期在 Java 热潮中获得更好的营销效果。
JavaScript 最初的版本在 Netscape Navigator 2.0 浏览器中首次出现，由于当时没有标准化机构，各个浏览器都有自己的实现方式，因此导致了浏览器兼容性问题。1997 年，欧洲计算机制造商协会（ECMA）制定了 JavaScript 的标准，称为 ECMAScript，目前已经发展到第 12 版。
自从诞生以来，JavaScript 在 Web 开发中扮演了非常重要的角色，几乎所有的现代网页都需要 JavaScript 来实现各种动态效果和交互功能。同时，随着 Node.js 的出现，JavaScript 也逐渐成为一种可以用于服务器端编程的语言。
好的，以下是我整理的 JavaScript 学习笔记：
JavaScript 是一种用于网页编程的脚本语言。它可以用于增强网站的交互性和动态性，使用户能够与网站进行更多的交互。
二、基础语法
数据类型
JavaScript 中有五种基本数据类型：
- 数字（Number）
- 字符串（String）
- 布尔值（Boolean）
- undefined
- null
变量声明
使用 var 关键字可以声明一个变量，如下：
var x = 10;
运算符
JavaScript 中的运算符包括算术运算符、比较运算符和逻辑运算符等。
条件语句
JavaScript 中的条件语句包括 if 语句和 switch 语句。
if (condition) {
// 代码块
} else {
// 代码块
}
switch (expression) {
case value1:
// 代码块
break;
case value2:
// 代码块
break;
default:
// 代码块
}
循环语句
JavaScript 中的循环语句包括 for 循环、while 循环和 do-while 循环。
for (var i = 0; i < 10; i++) {
// 代码块
}
while (condition) {
// 代码块
}
do {
// 代码块
} while (condition);
函数
JavaScript 中的函数可以通过 function 关键字进行声明。
function functionName(parameters) {
// 代码块
}
对象
JavaScript 中的对象是由键值对组成的集合，可以使用 . 运算符访问对象的属性。
var person = {
firstName: "John",
lastName: "Doe",
age: 25,
fullName: function() {
return this.firstName + " " + this.lastName;
}
};
DOM 操作
DOM（Document Object Model）是指 HTML 文档的对象模型，通过 JavaScript 可以对其进行操作。
获取元素
可以使用 document.getElementById() 方法获取页面中的元素。
var element = document.getElementById("myId");
修改元素内容
可以使用 innerHTML 属性修改元素的内容。
var element = document.getElementById("myId");
element.innerHTML = "New content";
修改元素样式
可以使用 style 属性修改元素的样式。
var element = document.getElementById("myId");
element.style.color = "red";
事件处理
JavaScript 可以通过事件处理程序响应用户的交互行为，如单击、鼠标移动等。
事件类型
JavaScript 支持的事件类型包括：
-
鼠标事件（click、mouseover、mouseout 等）
-
键盘事件（keydown、keyup 等）
-
表单事件（submit、change、focus 等）
-
网页文档和资源加载事件（DOMContentLoaded、load 等）
-
视频和音频播放事件（play、pause、ended 等）
-
动画和过渡事件（animationstart、transitionend 等）
-
网络事件（online、offline 等）
-
剪贴板事件（cut、copy、paste 等）
-
设备事件（orientationchange、devicemotion 等）
三、实例
下是获取一个图像并通过监控键盘实现移动的 JavaScript 代码示例：
<!DOCTYPE html>
<html>
<head>
<title>移动图像</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="480" height="320"></canvas>
<script>
// 获取画布元素和上下文对象
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 定义图像的初始位置和大小
var img = new Image();
img.src = "aaa.png";
var x = 0;
var y = 0;
var width = 50;
var height = 50;
// 监听键盘事件，改变图像位置
document.addEventListener("keydown", function(event) {
if (event.keyCode == 37) { // 左箭头键
x -= 10;
} else if (event.keyCode == 38) { // 上箭头键
y -= 10;
} else if (event.keyCode == 39) { // 右箭头键
x += 10;
} else if (event.keyCode == 40) { // 下箭头键
y += 10;
}
});
// 绘制图像
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, x, y, width, height);
requestAnimationFrame(draw);
}
// 启动动画循环
draw();
</script>
</body>
</html>
在这个示例中，使用 HTML5 的 Canvas API 获取画布元素和上下文对象，并使用 Image 对象获取要绘制的图像。然后，定义图像的初始位置和大小，并监听键盘事件，根据按下的键盘按键改变图像的位置。最后，使用 Canvas API 的 drawImage() 方法在画布上绘制图像，并使用 requestAnimationFrame() 方法启动动画循环。（高二老师教过，印象深刻
