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

在HTML中使用JavaScript

news 2026/3/28 8:25:55

在 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

nli-distilroberta-base算法优化：利用LSTM思想增强序列上下文建模

nli-distilroberta-base算法优化&#xff1a;利用LSTM思想增强序列上下文建模 1. 效果展示背景 在自然语言推理任务中&#xff0c;nli-distilroberta-base作为轻量级Transformer模型表现出色&#xff0c;但在处理长文本序列时仍面临挑战。传统Transformer架构的自注意力机制虽…...

编程新知 2026/3/28 8:17:45

7.系统配置与性能评价

一、系统配置与性能评价 &#xfeff;00:00 1. 考情分析 &#xfeff;00:12 考查频率&#xff1a;本章节在历年真题中偶尔出现&#xff0c;非每年必考分值占比&#xff1a;若考查则占1-2分&#xff0c;分值较低内容稳定性&#xff1a;与旧版教材内容基本一致&#xff0c;无实质…...

编程新知 2026/3/28 8:15:45

多模态RAG：解锁大模型学习，收藏这份从入门到精通的实战指南！

多模态RAG&#xff1a;解锁大模型学习&#xff0c;收藏这份从入门到精通的实战指南&#xff01; 多模态RAG在传统RAG基础上扩展了对图像、视频等非文本数据的处理能力&#xff0c;其流程包括文档解析&#xff08;提取多模态数据并保留结构关联&#xff09;、入库与检索&#x…...

编程新知 2026/3/28 8:05:41

如何通过AndroidAnnotations与Kotlin扩展函数实现极速Android开发：新手必备指南

如何通过AndroidAnnotations与Kotlin扩展函数实现极速Android开发&#xff1a;新手必备指南 【免费下载链接】androidannotations Fast Android Development. Easy maintainance. 项目地址: https://gitcode.com/gh_mirrors/an/androidannotations AndroidAnnotations是…...

编程新知 2026/3/28 5:42:06

墨语灵犀开源模型生态：对接LangChain/RAG构建专属翻译知识库

墨语灵犀开源模型生态&#xff1a;对接LangChain/RAG构建专属翻译知识库 1. 引言&#xff1a;当古典美学遇见现代AI架构 在人工智能技术快速发展的今天&#xff0c;翻译工具已经从简单的词汇转换演变为理解文化语境和语义深度的智能系统。「墨语灵犀」作为基于腾讯混元大模型…...

编程新知 2026/3/28 5:16:01

05-OpenClaw 自动生成 PPT 实战：每天节省 3 小时

作者&#xff1a;程序员小明儿 字数&#xff1a;约 9000 字 阅读时间&#xff1a;约 25 分钟 难度&#xff1a;⭐⭐⭐ 中级 系列&#xff1a;OpenClaw 实战 16 例&#xff08;第 5 篇&#xff09; 前置条件&#xff1a;已完成 OpenClaw 环境部署和基础配置写在前面 你是不是也这…...

编程新知 2026/3/28 4:38:02

AI助力：让快马平台智能生成排列组合列举与计算一体化工具

最近在做一个数据分析项目时&#xff0c;遇到了需要批量计算排列组合的需求。传统的手动计算不仅效率低&#xff0c;还容易出错。于是我开始寻找更智能的解决方案&#xff0c;发现InsCode(快马)平台的AI辅助开发功能正好能帮我快速实现这个工具。 需求分析 排列组合在概率统计、…...

编程新知 2026/3/28 4:23:59

告别代码噩梦：用Awesome-Dify-Workflow零代码30分钟实现企业级登录系统

告别代码噩梦&#xff1a;用Awesome-Dify-Workflow零代码30分钟实现企业级登录系统 【免费下载链接】Awesome-Dify-Workflow 分享一些好用的 Dify DSL 工作流程&#xff0c;自用、学习两相宜。 Sharing some Dify workflows. 项目地址: https://gitcode.com/GitHub_Trending/…...

编程新知 2026/3/28 4:15:54

OpenClaw：AI 权限治理的核心问题

子玥酱 &#xff08;掘金 / 知乎 / CSDN / 简书 同名&#xff09; 大家好&#xff0c;我是 子玥酱&#xff0c;一名长期深耕在一线的前端程序媛 &#x1f469;‍&#x1f4bb;。曾就职于多家知名互联网大厂&#xff0c;目前在某国企负责前端软件研发相关工作&#xff0c;主要聚…...

编程新知 2026/3/28 3:53:48

告别黑盒调试：为VS2022和Halcon HImage定制一个带暗色主题的视觉化调试器

为VS2022和Halcon HImage打造沉浸式暗色调试器&#xff1a;从UI优化到高效开发实践 在计算机视觉开发领域&#xff0c;Halcon凭借其强大的图像处理能力成为工业检测、医疗影像等场景的首选工具。然而&#xff0c;长时间面对传统调试界面容易导致视觉疲劳&#xff0c;影响开发效…...

编程新知 2026/3/28 3:33:29