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

在HTML中使用JavaScript

news 文章来源：https://blog.csdn.net/zhugedali_/article/details/140395972 2025/2/7 20:00:58

在 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

STM32之六：SysTick系统滴答定时器

目录 1. SysTick简介 2. 时钟来源 3. SysTick寄存器 3.1 CTRL—SysTick控制及状态寄存器 3.2 RELOAD—SysTick重装载数值寄存器 3.3 CURRENT—SysTick当前数值寄存器 4. systick系统定时器配置 5. 延时函数实现 5.1 延时函数编写步骤 5.2 微秒级延时函数delay_us 5.…...

编程日记 2024/7/14 5:16:33

全栈物联网项目：结合 C/C++、Python、Node.js 和 React 开发智能温控系统（附代码示例）

1. 项目概述 本文详细介绍了一个基于STM32微控制器和AWS IoT云平台的智能温控器项目。该项目旨在实现远程温度监控和控制,具有以下主要特点: 使用STM32F103微控制器作为主控芯片,负责数据采集、处理和控制逻辑采用DHT22数字温湿度传感器,精确采集环境温湿度数据通过ESP8266 W…...

编程日记 2024/7/14 5:15:32

WPF学习(3) -- 控件模板

一、操作过程 二、代码 <Window x:Class"学习.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http://schemas.microsoft.com/expressio…...

编程日记 2024/7/14 5:14:31

Netty Websocket SpringBoot Starter

netty websocket starter Quick Start Demo 项目 添加依赖 <!--添加源--> <repository><id>github</id><url>https://maven.pkg.github.com</url><snapshots><enabled>true</enabled></snapshots> </reposit…...

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

数据结构(4.2)——朴素模式匹配算法

字符串模式匹配 在主串中找到模式串相同的子串&#xff0c;并返回其所在的位置。 子串和模式串的区别 子串&#xff1a;主串的一部分&#xff0c;一定存在 模式串&#xff1a;不一定能在主串中找到 字符串模式匹配 朴素模式匹配算法 主串长度为n&#xff0c;模式串长度为…...

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

git切换远程仓库地址

git 更换远程仓库地址三种方法总结 一、前言 由于之前项目管理使用私服的 gitlab &#xff0c;现在换成了Gitea&#xff0c;需要修改远端仓库地址。 二、环境 windows 10git version 2.34.0.windows.1 三、帮助文档 GitHub文档 四、三种修改方法 方法一&#xff1a;不删除远程仓…...

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

同步与异步：.NET 中的 Task.WaitAll 和 Task.WhenAll

在 C# 中&#xff0c;异步编程通常涉及同时运行多个任务。处理多个任务的两种常见方法是 Task.WaitAll 和 Task.WhenAll。虽然它们看起来很相似&#xff0c;但它们的用途不同&#xff0c;并且用于不同的场景。本文探讨了 Task.WaitAll 和 Task.WhenAll 之间的区别&#xff0c;并…...

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

在Linux系统实现瑞芯微RK3588部署rknntoolkit2进行模型转换

一、首先要先安装一个虚拟的环境 安装Miniconda包 Miniconda的官网链接：Minidonda官网 下载好放在要操作的linux系统，我用的是远程服务器的linux系统，我放在whl这个文件夹里面，这个文件夹是我自己创建的 运行安装 安装的操作都是yes就可以了 检查是否安装成功,输入下面…...

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

【人工智能】Transformers之Pipeline（概述）：30w+大模型极简应用

​​​​​​​ 目录 一、引言 二、pipeline库 2.1 概述 2.2 使用task实例化pipeline对象 2.2.1 基于task实例化“自动语音识别” 2.2.2 task列表 2.2.3 task默认模型 2.3 使用model实例化pipeline对象 2.3.1 基于model实例化“自动语音识别” 2.3.2 查看model与task…...

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

Jenkins中Node节点与构建任务

目录 节点在 Jenkins 中的主要作用 1. 分布式构建 分布式处理 负载均衡 2. 提供不同的运行环境 多平台支持 特殊环境需求 3. 提高资源利用率 动态资源管理 云端集成 4. 提供隔离和安全性 任务隔离 权限控制 5. 提高可扩展性 横向扩展 高可用性 Jenkins 主服务…...

编程日记 2024/7/14 4:59:15

怎样在b2b网站做推广/5g网络优化

在这篇《MVC母版页_Layout.cshtml》http://www.cnblogs.com/insus/p/3380419.html中&#xff0c;把一些已经存在的视图或是新产生的视图加入母版中。不管怎样实现&#xff0c;产生出来的视图&#xff0c;均会有一行代码&#xff0c;即是它指向哪一个母版页的&#xff1a;如果你…...

编程日记 2025/2/7 19:01:50

做网站需要注册商标第几类/长沙百度首页排名

windows系统服务器IISPHP解决大文件上传最后出现500出错问题(亲测解决)windows系统服务器中&#xff0c;上传大文件出现500错误怎么办?windows系统服务器中&#xff0c;上传大文件提示500是什么问题?下面帝国CMS模板网来为大家分享&#xff1a;linux下改到iisphp后&#xff0…...

编程日记 2025/2/7 18:43:32

做微商在哪个网站打广告好/推广软文是什么

「「「动态规划」」」第555章 状压DP(DP(DP(后222题))) 目录&#xff1a; C.涂抹果酱 D.炮兵阵地C.C.C. 例题333 涂抹果酱 LibreLibreLibre OJOJOJ linklinklink 分析&#xff1a; 注意要状压成333进制 因为有333种颜色 fi,jf_{i,j}fi,j​表示第iii行状态为jjj的方案总数 已…...

编程日记 2025/2/7 16:01:25

全包装修包括哪些项目/整站快速排名优化

在Spring boot中有一个很重要的概念&#xff0c;叫做约定优于配置——软件开发的简约原则。所以Spring boot会按照约定好的文件位置去找我们的包和类。 默认配置 Spring Boot默认提供静态资源目录位置需置于classpath下&#xff0c;目录名需符合如下规则&#xff1a; /static/p…...

编程日记 2025/2/7 14:32:13

wordpress软件分享/网址域名ip查询

/*查询思路分析&#xff1a; 1 首先是查询一年级&#xff0c;班级表.2 关联学生表的字段&#xff0c;需要查询女神的信息。就写代表性别的字段 sex&#xff0c;用and 查询 3 where条件查询&#xff0c;去实现性别的查询. 用NJID字段去代表了班级表中的几年级 */--查询一年级 …...

编程日记 2025/2/7 13:12:58

正规网站开发流程/外贸推广方式都有哪些

# 函数a [1, 3, 6, 4, 85, 32, 46]print(sum(a)) # sum&#xff0c;求和函数def add():a 1,b 2,return a bprint(add())def add(a, b): # 都必填return a bprint(add())def add(a0, b0): # 都非必填return a bprint(add())def add(a, b0): # a必填(必填项放前面)return a…...

编程日记 2025/2/7 10:44:05