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

在HTML中使用JavaScript

news 2025/12/16 16:58:39

在 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

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2025/12/14 0:09:42

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

编程新知 2025/12/13 23:30:19

IGP（Interior Gateway Protocol，内部网关协议）

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

编程新知 2025/10/12 11:54:26

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

编程新知 2025/11/22 7:38:58

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...

编程新知 2025/7/24 3:18:58

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

编程新知 2025/10/11 0:24:31

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程新知 2025/12/9 3:13:43

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

编程新知 2025/11/19 6:04:18

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

编程新知 2025/11/3 2:51:56

AI+无人机如何守护濒危物种？YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...

编程新知 2025/12/11 9:47:05