当前位置：首页 > news >正文

JavaScript概述

news 2026/6/29 18:17:51

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("鼠标离开盒子");});