HTML 中使用 JavaScript 的具体方式

文章目录

    • 一、JavaScript 脚本添加方式
      • 1.1 内联 JavaScript
      • 1.2 内嵌 JavaScript
      • 1.3 外部引用 JavaScript
    • 二、外部引用 JavaScript 的注意事项

一、JavaScript 脚本添加方式

在 HTML 文件中使用 JavaScript 代码主要由以下三种方法:

  • 内联
  • 内嵌
  • 外部引用

1.1 内联 JavaScript

内联 JavaScript 是将 JavaScript 代码直接写在 HTML 元素的事件属性中。例如,使用 onclick 属性来处理按钮点击事件。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Inline JavaScript Example</title>
</head>
<body><button onclick="alert('Button clicked!')">Click me</button>
</body>
</html>

1.2 内嵌 JavaScript

内嵌 JavaScript 是将 JavaScript 代码放在 HTML 文件中的 <script> 标签内,通常放置在 <head><body> 中。

<script>允许出现网页的任意位置处

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Embedded JavaScript Example</title>
</head>
<body><button onclick="showMessage()">Click me</button><script>function showMessage() {alert('Button clicked!');}</script>
</body>
</html>

1.3 外部引用 JavaScript

外部引用 JavaScript 是将 JavaScript 代码放在独立的 .js 文件中,然后通过 <script> 标签引用该文件。这种方法有助于分离内容和行为,提高代码的可维护性和重用性。

  • 创建 script.js 文件

    function showMessage() {alert('Button clicked!');
    }
    
  • 在页面中引入 script.js 文件 , <script src="js文件路径"></script>

    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><title>External JavaScript Example</title><script src="script.js"></script>
    </head>
    <body><button onclick="showMessage()">Click me</button>
    </body>
    </html>

    注意:<script src=""></script>该对标记中,是不允许出现任何内容

二、外部引用 JavaScript 的注意事项

为了提高页面的加载速度和用户体验,建议优化 javascript 加载顺序(先加载页面内容,再加载 JavaScript)。优化 javascript 加载顺序的实现方式主要有:

  • 一般来说,建议将 <script> 标签放在页面底部(即在 </body> 之前),以确保页面内容先加载,然后再加载和执行 JavaScript。这可以

    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><title>Script at Bottom</title>
    </head>
    <body><h1>Hello, World!</h1><p>This is an example.</p><script src="script.js"></script>
    </body>
    </html>
  • 另一种方法是使用 deferasync 属性来控制脚本加载和执行的时机。

    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><title>Script Loading Example</title><script src="script.js" defer></script><!-- 或者 --><script src="script.js" async></script>
    </head>
    <body><button onclick="showMessage()">Click me</button>
    </body>
    </html>
    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/25809.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【python】在【机器学习】与【数据挖掘】中的应用:从基础到【AI大模型】

目录 &#x1f497;一、Python在数据挖掘中的应用&#x1f495; &#x1f496;1.1 数据预处理&#x1f49e; &#x1f496;1.2 特征工程&#x1f495; &#x1f497;二、Python在机器学习中的应用&#x1f495; &#x1f496;2.1 监督学习&#x1f49e; &#x1f496;2.2…

【MySQL】(基础篇七) —— 通配符和正则表达式

通配符和正则表达式 本章介绍什么是通配符、如何使用通配符以及怎样使用LIKE操作符进行通配搜索&#xff0c;以便对数据进行复杂过滤&#xff1b;如何使用正则表达式来更好地控制数据过滤。 目录 通配符和正则表达式LIKE操作符百分号(%)通配符下划线(_)通配符 通配符使用技巧正…

深入理解 C++ 智能指针

文章目录 一、引言二、 原始指针的问题1、原始指针的问题2、智能指针如何解决这些问题 三、智能指针的类型四、std::shared_ptr1、shared_ptr使用2、shared_ptr的使用注意事项3、定制删除器4、shared_ptr的优缺点5、shared_ptr的模拟实现 五、std::unique_ptr1、unique_ptr的使…

SpringSecurity入门(三)

12、密码加密 12.1、不指定具体加密方式&#xff0c;通过DelegatingPasswordEncoder&#xff0c;根据前缀自动选择 PasswordEncoder passwordEncoder PasswordEncoderFactories.createDelegatingPasswordEncoder();12.2、指定具体加密方式 // Create an encoder with streng…

Java中的CAS无锁并发原理是怎样的

CAS&#xff08;Compare And Swap&#xff09;即比较并交换&#xff0c;是一种无锁并发算法的核心原理。 简单来说&#xff0c;CAS 原理通过以下三个步骤来实现&#xff1a; 1. 读取当前值&#xff1a;获取目标变量当前的值。 2. 比较预期值&#xff1a;将读取到的值与预…

逆运动学IK原理举例说明

逆运动学IK原理举例说明 逆运动学(Inverse Kinematics, IK)是计算机器人各个关节的位置和角度,使机器人末端(如手或脚)达到目标位置的过程。IK 是机器人学中的一个重要问题,因为它允许我们从任务空间(如末端执行器的位置和姿态)控制机器人关节空间(如关节角度)。 逆…

【iOS】UI学习——登陆界面案例、照片墙案例

文章目录 登陆界面案例照片墙案例 登陆界面案例 这里通过一个登陆界面来复习一下前面学习的内容。 先在接口部分定义两个UILabel、两个UITextField、两个UIButton按键&#xff1a; #import <UIKit/UIKit.h>interface ViewController : UIViewController {UILabel* _lb…

2024050501-重学 Java 设计模式《实战命令模式》

重学 Java 设计模式&#xff1a;实战命令模式「模拟高档餐厅八大菜系&#xff0c;小二点单厨师烹饪场景」 一、前言 持之以恒的重要性 初学编程往往都很懵&#xff0c;几乎在学习的过程中会遇到各种各样的问题&#xff0c;哪怕别人那运行好好的代码&#xff0c;但你照着写完…

深入解析分布式链路追踪:原理、技术及应用

目录 分布式链路追踪简介分布式链路追踪的基本概念 Span 和 Trace上下文传播采样策略 分布式链路追踪的工作原理常见的分布式链路追踪系统 ZipkinJaegerOpenTelemetry 分布式链路追踪的技术实现 数据收集数据传输数据存储数据展示 分布式链路追踪的应用场景 性能优化故障排除依…

适配Android12启动页

今天我们讲个什么话题呢&#xff1f;我们今天讲的内容是&#xff0c;Android12新启动页的支持API。 启动页我想大家都不陌生吧&#xff0c;通常的写法就是先创建一个SplashActivity&#xff0c;在onCreate中 Handler(Looper.getMainLooper()).postDelayed({// 在这里跳转主界…

人月神话珍藏版系列文章二---人月神话

前言: 在众多软件项目中,缺乏合理的进度安排是造成项目滞后的最主要的原因,它比其他所有因素加起来的影响还要大。软件项目的进度安排不合理普遍发生的原因是什么呢? 第一,在实际的工作当中,估算技术还不够成熟,说的更加的严重些,它们反映的是一个很不真实的假设,一切…

Python数据分析与机器学习在电子商务推荐系统中的应用

文章目录 &#x1f4d1;引言一、推荐系统的类型二、数据收集与预处理2.1 数据收集2.2 数据预处理 三、基于内容的推荐3.1 特征提取3.2 计算相似度3.3 推荐物品 四、协同过滤推荐4.1 基于用户的协同过滤4.2 基于物品的协同过滤 五、混合推荐与评估推荐系统5.1 结合推荐结果5.2 评…

Qwen2本地部署的实战教程

大家好,我是herosunly。985院校硕士毕业,现担任算法研究员一职,热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名,CCF比赛第二名,科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法…

网络安全技术实验一 信息收集和漏洞扫描

一、实验目的和要求 了解信息搜集和漏洞扫描的一般步骤&#xff0c;利用Nmap等工具进行信息搜集并进行综合分析&#xff1b;掌握TCP全连接扫描、TCP SYN扫描的原理,利用Scapy编写网络应用程序&#xff0c;开发端口扫描功能模块&#xff1b;使用漏洞扫描工具发现漏洞并进行渗透测…

8款高效电脑维护与多媒体工具合集!

AI视频生成&#xff1a;小说文案智能分镜智能识别角色和场景批量Ai绘图自动配音添加音乐一键合成视频https://h5.cxyhub.com/?invitationhmeEo7 1. 系统安装利器——WinNTSetup 系统安装利器&#xff0c;目前最好用的系统安装器&#xff0c;Windows系统安装部署工具。支持所…

跟我学,数据结构和组原真不难

我个人认为408中计算机组成原理和数据结构最难 难度排行是计算机组成原理>数据结构>操作系统>计算机网络。 计算机组成原理比较难的原因是&#xff0c;他涉及的硬件的知识比较多&#xff0c;这对于大家来说难度就很高了&#xff0c;特别是对于跨考的同学来说&#x…

ABB机械人模型下载

可以下载不同格式的 https://new.abb.com/products/robotics/zh/robots/articulated-robots/irb-6700 step的打开各部件是分开的&#xff0c;没有装配在一起&#xff0c;打开看单个零件时&#xff0c;我们会发现其各零件是有装配的定位关系的。 新建一个装配环境&#xff0c;点…

【qt】MDI多文档界面开发

MDI多文档界面开发 一.应用场景二.界面设计三.界面类设计四.实现功能1.新建文档2.打开文件3.关闭所有4.编辑功能5.MDI页模式6.瀑布展开模式7.平铺模式 五.总结 一.应用场景 类似于vs的界面功能,工具栏的功能可以对每个文档使用! 二.界面设计 老规矩,边做项目边学! 目标图: 需…

【vscode+clangd】clangd不起作用的解决方案、compile_commands.json文件为空的解决方案

配环境过程中出的问题多种多样&#xff0c;我的解决方案不一定对你适用&#xff0c;但不妨试试。 问题1&#xff1a;clangd不起作用 问题描述 在ubuntu22.04上安装了vscode&#xff0c;并安装了bear来生成compile_commands.json&#xff0c;到这里一切正常。 总之按照https:/…

【JMeter接口测试工具】第二节.JMeter项目实战(上)【实战篇】

文章目录 前言项目实战零、接口测试流程一、测试数据准备二、接口功能测试三、掌握测试用例编写四、自动化脚本架构搭建总结 前言 零、接口测试流程 1、制定测试计划,分配任务 2、从 API 文档中提取接口清单&#xff1a;对 API 文档简化,提高测试效率,接口清单就是对 API 文档…