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

在HTML中使用JavaScript

news 2026/5/25 13:55:23

在 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

Windows安卓应用安装终极指南：5分钟实现跨平台应用自由

Windows安卓应用安装终极指南&#xff1a;5分钟实现跨平台应用自由 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 还在为Windows电脑无法直接安装安卓应用而烦恼吗&am…...

编程新知 2026/5/25 13:35:26

c++乱码问题

大家下载vs2026或者更新时&#xff0c;可能会出现乱码问题点击工具&#xff0c;进入选项&#xff0c;在环境列表里找到文档&#xff0c;下滑到底部&#xff0c;勾选使用特定编码保存文件然后退出就可以了。如果还是存在问题&#xff0c;将自己的代码保存&#xff0c;重新新建一…...

编程新知 2026/5/25 10:56:09

Cocos Creator资源加载优化：用AssetManager的preload和loadBundle提升游戏首屏速度

Cocos Creator资源加载优化&#xff1a;用AssetManager的preload和loadBundle提升游戏首屏速度当玩家首次打开你的游戏时&#xff0c;那几秒钟的等待时间可能决定了他们是否会继续玩下去。作为一款成熟的游戏引擎&#xff0c;Cocos Creator提供了强大的AssetManager系统来管理资…...

编程新知 2026/5/25 8:45:13

告别Godot默认编辑器：手把手教你用VSCode配置C#开发环境（解决中文乱码）

告别Godot默认编辑器&#xff1a;手把手教你用VSCode配置C#开发环境&#xff08;解决中文乱码&#xff09;当你在Godot中编写C#脚本时&#xff0c;是否曾为默认编辑器的功能限制感到困扰&#xff1f;代码补全不够智能、调试功能简陋、界面不够友好——这些问题都会显著降低开发…...

编程新知 2026/5/25 8:34:54

Windows用户必看！终极免费的PDF处理工具Poppler快速安装指南

Windows用户必看&#xff01;终极免费的PDF处理工具Poppler快速安装指南 【免费下载链接】poppler-windows Download Poppler binaries packaged for Windows with dependencies 项目地址: https://gitcode.com/gh_mirrors/po/poppler-windows 还在为Windows系统上处理P…...

编程新知 2026/5/25 8:15:39

鸿蒙PC：Qt适配OpenHarmony实战【番茄刻】：工作和休息两种倒计时如何写成一个 QML 状态机

前言 欢迎加入鸿蒙PC开发者社区&#xff0c;共同打造开发者工具生态&#xff1a;鸿蒙PC开发者社区 &#xff1a;https://harmonypc.csdn.net/ 项目开源地址&#xff1a;https://atomgit.com/lqjmac/qtfqk 我更愿意把这类 Demo 当成工程切片来看&#xff1a;功能要小&#xf…...

编程新知 2026/5/25 7:43:41

Atomic Layout测试策略：单元测试与集成测试最佳实践

Atomic Layout测试策略&#xff1a;单元测试与集成测试最佳实践 【免费下载链接】atomic-layout Build declarative, responsive layouts in React using CSS Grid. 项目地址: https://gitcode.com/gh_mirrors/at/atomic-layout 在现代前端开发中&#xff0c;构建可靠的…...

编程新知 2026/5/25 6:28:41

RTX51多任务环境下printf安全调用方案解析

1. RTX51多任务环境下printf的安全调用方案在RTX51实时操作系统中&#xff0c;多个任务同时调用标准库函数printf时会出现"多重调用警告"(Warning 15: MULTIPLE CALL TO SEGMENT)。这个看似简单的调试输出问题&#xff0c;实际上涉及RTOS任务调度、函数重入、内存管理…...

编程新知 2026/5/25 6:05:48

Unity新手第一课：从创建立方体理解场景驱动开发

1. 这不是“Hello World”&#xff0c;而是你和Unity第一次真正握手很多人点开Unity&#xff0c;新建一个空项目&#xff0c;盯着灰蒙蒙的Scene视图发呆——光标悬停在空白画布上&#xff0c;不知道该点哪里&#xff0c;更不知道点下去会发生什么。我带过几十个零基础学员&…...

编程新知 2026/5/25 5:42:24

在CentOS7服务器上装Win10？手把手教你用Ventoy搞定双系统（附网卡驱动安装避坑指南）

在CentOS7服务器上实现Win10双系统&#xff1a;Ventoy实战与驱动避坑指南 当Linux服务器遇上Windows需求&#xff0c;双系统成为了一种优雅的解决方案。本文将带你深入探索在CentOS7生产环境中部署Win10双系统的完整流程&#xff0c;特别针对服务器硬件特性提供定制化指导。 …...

编程新知 2026/5/25 3:10:19