JavaScript概述
Js的书写方式主要有三种
行内式：在 HTML 标签中直接编写
<button onclick="alert('点击')">点我一下</button>内嵌式：通过 标签在 HTML 中嵌入 JS 代码
<body><script>alert('Hello JavaScript')</script></body>外部文件：通过script引入外部独立 JS 文件
<script src="path.js"></script>变量
- es6前使用 var 的问题：函数作用域、变量提升、可重复声明。
- es6后使用 let / const ：块级作用域，不存在变量提升，不可重复声明
- let ：声明可变变量。
- const ：声明常量（必须初始化，不可重新赋值）
{letx=10;consty=20;// var z = 30; // 函数作用域，不推荐x=100;// 合法// y = 200; // 报错：Assignment to constant variable}console.log(x);// 报错：x is not defined- undefined ：表示 “意外的缺失”（如变量未初始化）。
- null ：表示 “主动的缺失”（如有意清空对象引用）
函数
不带参函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
<script>functionmyFunction(){alert("Hello World!");}</script>带参函数
在调用函数时，可以向其传递值，这些值被称为参数。这些参数可以在函数中使用。可以发送任意多的参数，由逗号 (,) 分隔：
<p>点击这个按钮，来调用带参数的函数。</p><button onclick="myFunction('Harry Potter','Wizard')">点击这里</button><script>functionmyFunction(name,job){alert("Welcome "+name+", the "+job);}</script>返回值
有时，我们会希望函数将值返回调用它的地方。通过使用 return 语句就可以实现。在使用 return 语句时，函数会停止执行，并返回指定的值。
functionmyFunction(){varx=5;returnx;}注意： 整个 JavaScript 并不会停止执行，仅仅是函数。JavaScript 将继续执行代码，从调用
函数的地方
函数调用将被返回值取代：
varmyVar=myFunction();**DOM（文档对象模型）**是将 HTML/XML 文档转换为树状结构的对象模型，允许 JavaScript 动态操作网页的内容、结构和样式
核心内容：
- 节点（Node）：整个文档是一个节点树，包括元素节点（如 div）、文本节点、属性节点等
- 操作方法：
- 获取元素： document.getElementById() 、 querySelector()
- 动态创建节点： document.createElement()
- 修改内容： element.innerHTML 、 element.textContent
- -事件绑定： element.addEventListener(“click”, handler)
- 修改样式： element.style.color = “red”
- 事件驱动：通过事件（如点击、滚动）触发 JavaScript 逻辑。
事件处理
绑定事件监听器
constbutton=document.getElementById("myButton");// 方式 1：addEventListener（推荐）button.addEventListener("click",function(event){console.log("按钮被点击！",event);event.preventDefault();// 阻止默认行为（如表单提交）});// 方式 2：HTML 属性（不推荐，混合结构与行为）// <button onclick="handleClick()">Click</button>**事件对象 event 常用属性 **
- event.target ：触发事件的元素。
- event.type ：事件类型（如 “click” ）。
constbox=document.getElementById("box");box.addEventListener("mouseenter",()=>{console.log("鼠标进入盒子");});box.addEventListener("mouseleave",()=>{console.log("鼠标离开盒子");});
)
)