JavaScript

小肖爱笑不爱笑2025-12-20 18:03

目录

JavaScript

JS的核心语法

引入方式

常量&变量

数据类型

函数

匿名函数

自定义对象

json

DOM

事件监听

事件监听三要素

常见事件

鼠标事件

键盘事件

焦点事件

表单事件

JavaScript

**JavaScript（JS）：**是一门跨平台、面向对象的脚本语言，用来控制网页行为，实现页面交互的效果

组成

JS的核心语法

引入方式

  • 内部脚本：将JS代码定义在HTML页面中

1）JavaScript代码必须位于<script></script>标签之间

2）在HTML文档中，可以在任意地方放置任意数量的<script>

3）一般会把脚本置于<body>元素的底部，可改善显示速度

  • 外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中

js代码每行以分号结尾，分号可有可无

常量&变量

在早期的js中，声明变量还可以用var，但是并不严谨（不推荐）

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>基础语法</title>
</head>
<body>
  <script>
    //1.声明变量
    let a=10;
    a="hello world";
    a=true;
    alert(a);//弹出框
    //2.声明常量
    const PI=100;
    // console.log(PI);//控制台输出
    document.write(PI);//输出到body区域（不常用）
  </script>
</body>
</html>

数据类型

JavaScript的数据类型分为：基本数据类型和引用数据类型（对象）

基本数据类型：

  • number：数字（整数、小数、NaN（Not a Number））
  • boolean：布尔。true/false
  • null：对象为空。JavaScript是对大小写敏感的，因此null、Null、NULL是完全不同的
  • undefined：当声明变量未初始化时，该变量的默认值时undefined
  • string：字符串、单引号、双引号、反引号皆可，推荐使用单引号

使用typeof 运算符空域获取数据类型

模板字符串语法：

  • ``(反引号)
  • 内容拼接变量时，使用${}包住变量
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数据类型</title>
</head>
<body>
  <script>
    // 1.数据类型
    alert(typeof 123)//number
    alert(typeof "hello world")//string
    alert(typeof `123`)//string
    alert(typeof true)//boolean
    alert(typeof null)//object
    alert(typeof a)//undefined
    alert(typeof "c")//string
    //2.模板字符串(被反引号引起来的字符串)-简化字符串拼接
    let name = "小王"
    let age = 18
    alert('我的名字是' + name + ',年龄是' + age+'岁')
    alert(`我的名字是${name},年龄是${age}岁`)
  </script>
</body>
</html>

函数

**介绍：**function被设计用来执行特定任务的代码块，方便程序的封装复用

**定义：**JavaScript中的函数通过function关键字进行定义，语法为：

**调用：**函数实际名称（实际参数列表）

JS是弱类型语言，形参、返回值都不需要指定类型在调用函数时，实参个数和形参个数空域不一致，但是建议一致

匿名函数

一种没有名称的函数，可以通过两种方式定义：函数表达式和箭头函数

匿名函数定义后，可以通过变量名直接调用

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>函数</title>
</head>
<body>
  <script>
    // 1.函数的定义和调用-具名函数
    function add(a, b) {
      return a + b;
    }
    let result = add(1, 2);
    console.log(result); // 控制台输出: 3

    // 2.函数的定义和调用-匿名函数
    // 2.1函数表达式
    let add1 = function(a, b) {
      return a + b;
    }
    let result2 = add1(3, 4);
    console.log(result2); // 控制台输出: 7
    // 2.2箭头函数
    let add2 = (a, b) => {
      return a + b;
    }
    let result3 = add2(5, 6);
    console.log(result3); // 控制台输出: 11
  </script>
</body>
</html>

自定义对象

  • 定义格式
  • 调用格式
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自定义对象</title>
</head>
<body>
  <script>
    // 1.自定义对象
    // let user = {
    //   name: "张三",
    //   age: 18,
    //   gender: "男",
    //   sing: function() {
    //     alert(this.name + "悠悠的唱着那最炫民族风~");
    //   }
    // }
    let user = {
      name: "张三",
      age: 18,
      gender: "男",
      sing() {
        alert(this.name + "悠悠的唱着那最炫民族风~");
      }
    }
    // let user = {
    //   name: "张三",
    //   age: 18,
    //   gender: "男",
    //   sing:() => {//注意：在箭头函数中，this并不指向当前对象-指向的是当前对象的父级(不推荐)
    //     alert(this.name + "悠悠的唱着那最炫民族风~");
    //   }
    // }
    // 2.调用对象的属性/方法
    alert(user.name);
    user.sing(); // 控制台输出: 张三悠悠的唱着那最炫民族风~
  </script>
</body>
</html>

json

html 复制代码 
//3.JSON-JS对象标记法
    let person = {
      name: "张三",
      age: 18,
      gender: "男"
    }
    // alert(person); // 控制台输出: [object Object]
    //js对象转为JSON字符串
    alert(JSON.stringify(person));// 控制台输出: {"name":"张三","age":18,"gender":"男"}
    //JSON字符串转为js对象
    let personJson='{"name":"heima","age":18,"gender":"男"}';
    alert(JSON.parse(personJson).name);// 控制台输出: {name: 'heima', age: 18, gender: '男'}

DOM

概念：Document Object Model，文档对象模型

将标记语言的各个组成部分封装为对应的对象：

  • Document：整个文档对象
  • Element：元素对象
  • Attribute：属性对象
  • Test：文本对象
  • Comment：注释对象

JavaScript通过DOM，就能够对HTML进行操作：

  • 改变HTML元素的内容
  • 改变HTML元素的样式
  • 对HTML DOM事件作出反应
  • 添加和删除HTML元素

DOM操作：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS-DOM</title>
</head>
<body>
  <h1 id="title1">1111</h1>
  <h1>2222</h1>
  <h1>3333</h1>

  <script>
    //1.修改第一个h1标签的文本内容
    //1.1 获取DOM对象
    // let h1 = document.querySelector("#title1");
    // let h1 = document.querySelector('h1');
    let hs = document.querySelectorAll('h1');
    //1.2 调用DOM对象中属性或方法
    // h1.innerHTML = "修改后的文本内容";
    hs[0].innerHTML = "修改后的文本内容";
  </script>

</body>
</html>

事件监听

**事件：**HTML事件是发生在HTML元素上的'事情'。比如：

  • 按钮被点击
  • 鼠标移动到元素上
  • 按下键盘

**事件监听：**JavaScript可以在事件触发时，就立即调用一个函数作出响应，也称事件绑定或注册事件

**语法：**事件源.addEventListener（'事件类型'，事件触发执行的函数）

事件监听三要素
  • 事件源：哪个dom元素触发了事件，要获取dom元素
  • 事件类型：用什么方式触发，比如：鼠标单击click
  • 事件触发执行的函数：要做什么事
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS事件</title>
</head>
<body>
  <input type="button" id="btn1" value="点我一下试试">
  <input type="button" id="btn2" value="点我一下试试">
  <script>
    //事件监听-addEventListener(可以多次绑定同一事件)
    document.querySelector("#btn1").addEventListener("click", function() {
      console.log("试试就试试~");
    });
    document.querySelector("#btn1").addEventListener("click", function() {
      console.log("试试就试试~");
    });
    //事件绑定-早期写法-onclick(如果绑定多个事件，后面的事件会覆盖前面的事件)
    document.querySelector("#btn2").onclick = function() {
      console.log("试试就试试~");}
    document.querySelector("#btn2").onclick = function() {
      console.log("试试就试试~");}
  </script>
</body>
</html>

**两种方式的区别：**on方式会被覆盖，addEventListener方式可以绑定多次，拥有更多特性，推荐使用

JS案例-实现表格数据行鼠标移入移出隔行换色效果

html 复制代码 
<script>
  //通过JS为上述表格中数据添加事件监听，实现鼠标进入后，背景色#f2e2e2;鼠标离开后，背景色需要设置为#ffffff
  let rows = document.querySelectorAll("tr");
  for(let i = 0; i < rows.length; i++) {
    rows[i].addEventListener("mouseenter", function() {
      this.style.backgroundColor = "#f2e2e2";
    });
    rows[i].addEventListener("mouseleave", function() {
      this.style.backgroundColor = "#ffffff";
    });
  }
</script>
常见事件
鼠标事件

click：鼠标点击

mouseenter：鼠标进入

mouseleave：鼠标离开

键盘事件

keydown：键盘按下触发

keyup：键盘抬起触发

焦点事件

focus：获得焦点触发

blur：失去焦点触发

表单事件

input：用户输入时触发

submit：表单提交时触发

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>常见事件</title>
</head>
<body>
  <form action="" style="text-align: center;">
    <input type="text" name="username" id="username">
    <input type="text" name="age" id="age">
    <input id="b1" type="submit" value="提交">
    <input id="b2" type="button" value="单击事件">
  </form>
  <br><br><br>
  <table width="400px" border="1" cellspacing="0" align="center">
    <tr>
      <th>学号</th>
      <th>姓名</th>
      <th>分数</th>
      <th>评语</th>
    </tr>
    <tr align="center">
      <td>001</td>
      <td>李四</td>
      <td>91</td>
      <td>很优秀</td>
    </tr>
    <tr align="center", id="last">
      <td>002</td>
      <td>张三</td>
      <td>90</td>
      <td>很优秀</td>
    </tr>
  </table>
  <script>
    // click:鼠标点击事件
    document.querySelector("#b2").addEventListener('click', ()=> {
      // 提示用户点击了单击事件按钮
      console.log("我被点击了");
    //mouseenter:鼠标进入事件
      document.querySelector("#last").addEventListener('mouseenter', ()=> {
        console.log("鼠标进入了表格");
      });
      //mouseleave:鼠标离开事件
      document.querySelector("#last").addEventListener('mouseleave', ()=> {
        console.log("鼠标离开了表格");
      });
      // keydown:按键按下事件
      document.querySelector("#username").addEventListener('keydown', ()=> {
        console.log("按键被按下");
      });
      // keyup:按键抬起事件
      document.querySelector("#username").addEventListener('keyup', ()=> {
        console.log("按键被抬起");
      });
      //blur:失去焦点事件
      document.querySelector("#age").addEventListener('blur', ()=> {
        console.log("失去焦点");
      });
      // focus:获得焦点事件
      document.querySelector("#age").addEventListener('focus', ()=> {
        console.log("获得焦点");
      });
      //input:输入事件
      document.querySelector("#age").addEventListener('input', ()=> {
        console.log("输入了内容");
      });
      //submit:提交事件
      document.querySelector('form').addEventListener('submit', ()=> {
        alert("表单被提交了");
      });

    });
  </script>
</body>
</html>

JS程序优化

js模块化（export，import）

相关推荐
于是我说2 小时前
前端JavaScript 项目中 获取当前页面滚动位置
开发语言·前端·javascript
专注于大数据技术栈2 小时前
java学习--String和StringBuffer互转
java·学习
凯小默2 小时前
02.内存管理和内存泄漏
javascript
waper972 小时前
nohup java -jar启动jar包错报错 地址已在使用
java·开发语言·jar
無量2 小时前
ConcurrentHashMap实现原理
java·后端
Selegant2 小时前
Kubernetes + Helm + ArgoCD：打造 GitOps 驱动的 Java 应用交付流水线
java·kubernetes·argocd
ShadowSmartMicros2 小时前
java调用milvus数据库
java·数据库·milvus
禾高网络2 小时前
互联网医院系统，互联网医院系统核心功能及技术
java·大数据·人工智能·小程序
来杯三花豆奶2 小时前
Vue 2.0 Mixins 详解：从原理到实践的深度解析
前端·javascript·vue.js
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03Linux下V2Ray安装配置指南04sqli-labs靶场通关笔记：第18-19关 HTTP头部注入05在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）06安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）07BongoCat - 跨平台键盘猫动画工具08RedissonClient的配置解析09jdk21下载、安装（Windows、Linux、macOS）10Labelme从安装到标注：零基础完整指南