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

在HTML中使用JavaScript

news 2026/2/7 11:40:15

在 HTML 中使用 JavaScript 有以下几种常见的方式：

 

 

 

一、内联脚本

 

（一）基本语法

 

内联脚本是将 JavaScript 代码直接嵌入到 HTML 文件的 <script> 标签内部。

 

 

<!DOCTYPE html>

<html lang="en">

 

<head>

  <meta charset="UTF-8">

  <title>内联脚本示例</title>

</head>

 

<body>

  <script>

    // 变量声明与赋值

    var message = "Hello, World!";

 

    // 函数定义

    function showMessage() {

      console.log(message);

    }

 

    // 函数调用

    showMessage();

 

    // 条件语句

    if (message.length > 5) {

      console.log("消息长度大于 5");

    } else {

      console.log("消息长度小于或等于 5");

    }

 

    // 循环语句

    for (var i = 0; i < 5; i++) {

      console.log(i);

    }

  </script>

</body>

 

</html>

 

 

在上述示例中，我们在 <script> 标签内部定义了变量、函数，并进行了函数调用、条件判断和循环操作等基本的 JavaScript 编程操作。

 

（二）注意事项

 

1.  <script> 标签可以放在 <head> 或 <body> 部分，但通常建议将功能性的脚本放在 <body> 的底部，以确保在页面的内容加载完成后再执行脚本，避免因脚本执行时间过长导致页面加载卡顿或显示异常。

2. 内联脚本适合编写少量、简单的 JavaScript 代码。对于大型项目和复杂的功能，使用外部脚本文件（将在后面介绍）可以更好地组织和管理代码。

 

二、外部脚本文件

 

（一）创建外部脚本文件

 

您可以使用任何文本编辑器（如 Visual Studio Code、Sublime Text 等）创建一个扩展名为 .js 的文件，在其中编写 JavaScript 代码。

 

例如，创建一个名为  myScript.js  的文件，内容如下：

 

 

function greet(name) {

  alert(`Hello, ${name}!`);

}

 

function calculateSum(num1, num2) {

  return num1 + num2;

}

 

 

（二）在 HTML 中引用外部脚本文件

 

要在 HTML 文件中使用这个外部脚本文件，您可以在 HTML 文件的 <head> 或 <body> 部分添加 <script> 标签，并通过 src 属性指定脚本文件的路径。

 

<!DOCTYPE html>

<html lang="en">

 

<head>

  <meta charset="UTF-8">

  <title>外部脚本示例</title>

  <script src="myScript.js"></script>

</head>

 

<body>

  <button οnclick="greet('Alice')">点击问候</button>

  <p>两数之和为：<span id="sumResult"></span></p>

  <button οnclick="var sum = calculateSum(5, 3); document.getElementById('sumResult').innerHTML = sum;">计算两数之和</button>

</body>

 

</html>

 

 

（三）注意事项

 

1. 请确保 src 属性中指定的文件路径是正确的，相对路径或绝对路径都可以。

2. 当浏览器遇到带有 src 属性的 <script> 标签时，它会暂停 HTML 文档的解析，去下载并执行指定的脚本文件，然后再继续解析 HTML 文档。

 

三、事件处理

 

（一）基本概念

 

事件是用户与网页进行交互时发生的操作，例如点击按钮、鼠标移动、键盘输入等。您可以使用 JavaScript 来监听这些事件，并在事件发生时执行相应的代码。

 

（二）常见的事件类型

 

1.  click 事件：当用户点击元素时触发。

2.  mouseover 事件：当鼠标指针移到元素上时触发。

3.  mouseout 事件：当鼠标指针移出元素时触发。

4.  keydown 事件：当用户按下键盘上的某个键时触发。

5.  keyup 事件：当用户释放键盘上的某个键时触发。

6.  submit 事件：当用户提交表单时触发。

7.  load 事件：当页面或图像等资源加载完成时触发。

 

（三）事件处理程序的添加方式

 

1. HTML 属性方式（内联事件处理程序）

 

您可以在 HTML 元素的属性中直接指定事件处理函数，例如：

 

 

<!DOCTYPE html>

<html lang="en">

 

<head>

  <meta charset="UTF-8">

  <title>内联事件处理示例</title>

</head>

 

<body>

  <button οnclick="alert('你点击了按钮！')">点击我</button>

</body>

 

</html>

 

 

在上述示例中，当用户点击按钮时，会弹出一个包含文本“你点击了按钮！”的警告框。

 

这种方式虽然简单直观，但将 HTML 和 JavaScript 代码紧密耦合在一起，不利于代码的维护和管理，因此在实际开发中不建议大量使用。

 

2. DOM 方式

 

通过 JavaScript 的 addEventListener() 方法为元素添加事件处理程序，这种方式可以实现 HTML 和 JavaScript 代码的分离，提高代码的可维护性。

 

 

<!DOCTYPE html>

<html lang="en">

 

<head>

  <meta charset="UTF-8">

  <title>DOM 事件处理示例</title>

</head>

 

<body>

  <button id="myButton">点击我</button>

  <script>

    var button = document.getElementById('myButton');

 

    button.addEventListener('click', function() {

      alert('你点击了按钮！');

    });

  </script>

</body>

 

</html>

 

 

在上述示例中，首先通过 getElementById() 方法获取到按钮元素，然后使用 addEventListener() 方法为按钮添加 click 事件的处理程序。当用户点击按钮时，会弹出一个包含文本“你点击了按钮！”的警告框。

 

（四）注意事项

 

1. 同一个事件可以添加多个事件处理程序，它们会按照添加的顺序依次执行。

2.  addEventListener() 方法的第三个参数是一个可选的对象，用于指定事件处理的一些选项，如事件捕获阶段还是冒泡阶段处理事件、是否在事件处理程序执行期间阻止事件的默认行为等。

 

 

 

相关文章：

在HTML中使用JavaScript

在 HTML 中使用 JavaScript 有以下几种常见的方式&#xff1a; 一、内联脚本 &#xff08;一&#xff09;基本语法 内联脚本是将 JavaScript 代码直接嵌入到 HTML 文件的 <script> 标签内部。 <!DOCTYPE html> <html lang"en"> <head> <…...

编程日记 2024/7/14 5:50:06

InjectFix 热更新解决方案

简介 今天来谈一谈&#xff0c;项目种的客户端热更新解决方案。InjectFix是腾讯xlua团队出品的一种用于Unity中C#代码热更新热修复的解决方案。支持Unity全系列&#xff0c;全平台。与xlua的思路类似&#xff0c;InjectFix解决的痛点主要在于Unity中C#代码写的逻辑在发包之后无…...

编程日记 2024/7/14 5:49:05

PHP7.4安装使用rabbitMQ教程（windows）

&#xff08;1&#xff09;&#xff0c;安装rabbitMQ客户端erlang语言 一&#xff0c;erlang语言安装 下载地址1—— 下载地址2——https://www.erlang.org/patches/otp-27.0 二&#xff0c;rabbitMQ客户端安装 https://www.rabbitmq.com/docs/install-windows &#xff08…...

编程日记 2024/7/14 5:48:04

分页以及tab栏切换，动态传类型

<view class"disTitle"><view class"disName">账户明细</view><view class"nav"><u-tabs lineWidth"0" :activeStyle"{color: #FD893F }" :list"navList" change"tabsChange&quo…...

编程日记 2024/7/14 5:47:03

【算法】平衡二叉树

难度&#xff1a;简单 题目 给定一个二叉树&#xff0c;判断它是否是 平衡二叉树 示例&#xff1a; 示例1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;true 示例2&#xff1a; 输入&#xff1a;root [1,2,2,3,3,null,null,4,4] 输出&…...

编程日记 2024/7/14 5:46:02

五、 计算机网络(考点篇)

1 网络概述和模型 计算机网络是计算机技术与通信技术相结合的产物&#xff0c;它实现了远程通信、远程信息处理和资源共享。计算机网络的功能&#xff1a;数据通信、资源共享、管理集中化、实现分布式处理、负载均衡。 网络性能指标&#xff1a;速率、带宽(频带宽度或传送线路…...

编程日记 2024/7/14 5:45:01

如何解决数据分析问题：IPython与Pandas结合

如何解决数据分析问题&#xff1a;IPython与Pandas结合 数据分析是现代科学研究、商业决策和技术开发中的一个重要环节。IPython和Pandas是两个强大的工具&#xff0c;它们可以大大简化和加速数据分析的过程。本文将为初学者详细介绍如何结合使用IPython和Pandas来解决数据分析…...

编程日记 2024/7/14 5:42:59

如何在 Microsoft Edge 上使用开发人员工具

Microsoft Edge 提供了一套强大的开发人员工具&#xff0c;可帮助 Web 开发人员检查、调试和优化他们的网站或 Web 应用程序。 无论您是经验丰富的 Web 开发人员还是刚刚起步&#xff0c;了解如何有效地使用这些工具都可以对开发过程产生重大影响。 在本文中&#xff0c;我们…...

编程日记 2024/7/14 5:41:58

《Linux系统编程篇》认识在linux上的文件 ——基础篇

前言 Linux系统编程的文件操作如同掌握了一把魔法钥匙&#xff0c;打开了无尽可能性的大门。在这个世界中&#xff0c;你需要了解文件描述符、文件权限、文件路径等基础知识&#xff0c;就像探险家需要了解地图和指南针一样。而了解这些基础知识&#xff0c;就像学会了魔法咒语…...

编程日记 2024/7/14 5:40:57

Qt：22.鼠标相关事件(实例演示——鼠标进入/离开某控件的事件、鼠标按下事件、鼠标释放事件、鼠标双击事件)

目录 1.实例演示——鼠标进入/离开某控件的事件&#xff1a; 2.鼠标按下事件&#xff1a; 3.鼠标释放事件&#xff1a; 4.鼠标双击事件&#xff1a; 1.实例演示——鼠标进入/离开某控件的事件&#xff1a; 首先创建一个C类文件 Label&#xff0c;填写好要继承的父类 QLabe…...

编程日记 2024/7/14 5:34:52

笔记 4 ：linux 0.11 中继续分析 0 号进程创建一号进程的 fork () 函数

&#xff08;27&#xff09;本条目开始&#xff0c; 开始分析 copy_process () 函数&#xff0c;其又会调用别的函数&#xff0c;故先分析别的函数。 get_free_page &#xff08;&#xff09; &#xff1b; 先 介绍汇编指令 scasb &#xff1a; 以及 指令 sstosd &#xff1a;…...

编程日记 2024/7/14 5:30:48

Vue3 引入Vanta.js使用

能搜到这篇文章 想必一定看过demo效果图了吧 示例 Vanta.js - Animated 3D Backgrounds For Your Website (vantajs.com) 1. 引入 在根目录 index.html中引入依赖 <script src"https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></sc…...

编程日记 2024/7/14 5:29:47

LeetCode --- 134双周赛

题目 3206. 交替组 I 3207. 与敌人战斗后的最大分数 3208. 交替组 II 3209. 子数组按位与值为 K 的数目 一、交替组 I & II 题目中问环形数组中交替组的长度为3的子数组个数&#xff0c;主要的问题在于它是环形的&#xff0c;我们要考虑首尾相接的情况&#xff0c;如何…...

编程日记 2024/7/14 5:28:46

快速读出linux 内核中全局变量

查问题时发现全局变量能读出来会提高效率&#xff0c;于是考虑从怎么读出内核态的全局变量&#xff0c;脚本如下 f open("/proc/kcore", rb) f.seek(4) # skip magic assert f.read(1) b\x02 # 64 位def read_number(bytes):return int.from_bytes(bytes, little,…...

编程日记 2024/7/14 5:26:44

postman录制设置

一、前言&#xff1a; ​ postman是一个很好接口调试或是测试工具&#xff0c;简单方便&#xff0c;不需要很复杂的流程与技术&#xff0c;并且也具备录制条件。对于接口不了解&#xff0c;没有明确对应的说明&#xff0c;但又想通过接口进行一些测试使用其录制是一个不错的办…...

编程日记 2024/7/14 5:25:44

redis消息队列

redis 的list类型实现消息队列&#xff1a; list结构实现的优缺点&#xff1a; 2、pubsub模式&#xff08;消息发布订阅&#xff09;实现消息队列 pubsub的优缺点&#xff1a; 命令行实现&#xff1a; pub:第一次发送有两个接收&#xff0c;第二个只有一个接收 sub接收&#x…...

编程日记 2024/7/14 5:23:42

Linux vim的使用(一键安装则好用的插件_forcpp)，gcc的常见编译链接操作

vim 在Linux系统上vim是个功能还比较完善的软件。但是没装插件的vim用着还是挺难受的&#xff0c;所以我们直接上一款插件。 我们只需要在Linux上执行这个命令就能安装(bite提供的) curl -sLf https://gitee.com/HGtz2222/VimForCpp/raw/master/install.sh -o ./install.sh …...

编程日记 2024/7/14 5:21:40

css基础（1）

CSS CCS Syntax CSS 规则由选择器和声明块组成。 CSS选择器 CSS选择器用于查找想要设置样式的HTML元素 一般选择器分为五类 Simple selectors (select elements based on name, id, class) 简单选择器&#xff08;根据名称、id、类选择元素&#xff09; //页面上的所有 …...

编程日记 2024/7/14 5:20:39

高并发线程池设计Nginx线程池源码剖析

为什么我们需要线程池?Why? 省流&#xff1a; 为了解决: 1.访问磁盘速度慢 2.等待设备工作 3..... 我们使用多线程技术&#xff0c;在IO繁忙的时候优先处理别的任务 为了解决多线程的缺陷: 1.创建、销毁线程时间消耗大 2.创建线程太多使系统资源不足或者线程频繁切换…...

编程日记 2024/7/14 5:19:38

SEO：6个避免被搜索引擎惩罚的策略-华媒舍

在当今数字时代&#xff0c;搜索引擎成为了绝大多数人获取信息和产品的首选工具。为了在搜索结果中获得良好的排名&#xff0c;许多网站采用了各种优化策略。有些策略可能会适得其反&#xff0c;引发搜索引擎的惩罚。以下是彭博社发稿推广的6个避免被搜索引擎惩罚的策略。 1. 内…...

编程日记 2024/7/14 5:18:37

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

编程新知 2026/2/5 3:48:44

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/8/12 16:28:43

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

编程新知 2025/10/16 13:22:06

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...

编程新知 2026/1/25 1:05:45

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...

编程新知 2026/1/31 21:56:58

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

编程新知 2026/2/7 10:59:19

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性：使神经网络可学习复杂模式控制输出范围：如Sigmoid将输出限制在(0,1)梯度传递：影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

编程新知 2025/11/17 21:48:26

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

编程新知 2026/1/23 7:56:54

代码规范和架构【立芯理论一】（2025.06.08）

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

编程新知 2026/1/28 11:47:09

Git常用命令完全指南：从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

编程新知 2025/10/3 0:40:01