【JavaScript】P2 JavaScript 书写位置

在这里插入图片描述

本博文总结:

JavaScript 书写位置:

  • 内部
  • 外部
  • 行内

注意事项:

  • 书写的位置尽量写到 </body> 之前
  • 外部 js 标签中间不写任何内容,因为不予以展示

正文:

交互效果示例

一个简单的交互效果示例;

<head><style>.pink {background-color: pink;}</style>
</head><body><button>按钮1</button><button>按钮2</button><button>按钮3</button><script>let bts = document.querySelectorAll('button')for (let i = 0; i < bts.length; i++) {bts[i].addEventListener('click', function () {document.querySelector('.pink').className = ''this.className = 'pink'})}</script>
</body>

JavaScript 书写位置

JS 有三种书写位置:

  • 行内 JavaScript;
  • 内部 JavaScript;
  • 外部 JavaScript;

内部 JavaScript

描述: 直接写在 html 文件里,用 script 标签包住。
规范: script 标签写在 <\body> 上面。

<body><!-- 内部js --><script>// 页面弹出警示框alert('你好,js')</script>
</body>

外部 JavaScript

描述: 代码写在以 .js 结尾的文件里。
规范: 通过 script 标签,引入到 html 页面中。

<body><!-- 通过src引入外部js文件 --><script src="my.js">// 中间不写内容</script>
</body>
alert('我是外部的js文件')

行内 JavaScript

描述: 代码写在标签内部。
注意: 后期 Vue 框架使用这种模式。

<body><button onclick="alert('hi~')">点击我</button>
</body>

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

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

相关文章

【从零开始学习RabbitMQ | 第一篇】如何确保生产者的可靠性

目录 前言&#xff1a; 生产者重连机制&#xff1a; 生产者确认机制&#xff1a; Publisher Confirm&#xff08;生产者者确认&#xff09; Publish Return&#xff08;发布返回&#xff09; 总结&#xff1a; 前言&#xff1a; 在现代的分布式系统中&#xff0c;消息队…

【NumPy】关于numpy.divide()函数,看这一篇文章就够了

&#x1f9d1; 博主简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟&#xff0c;欢迎关注。提供嵌入式方向…

zabbix监控mysql

一、mysql数据库监控的内容有 mysql的吞吐量 mysql的常规操作&#xff08;增删改查&#xff09; QPS&#xff08;Questions Per second:&#xff09;每秒能处理多少次请求数 TPS&#xff08;Transactions Per Second&#xff09;每秒查询处理的事务数 mysql库大小和表大小 监控…

VsCode个人插件

Auto Rename Tag > 同时修改标签 Rainbow Brackets > 不同层级不同括号颜色 Dracula Official > 个人比较喜欢的一款主题 Error Lens > 错误信息显示 ES7REACT/Redux/React-Native>react开发插件 ESLINT Indenticator>方便看结构 Prettier Formatter …

欧科云链:Web3.0时代 具备链上数据分析能力的公司愈发凸显其价值

在当今激烈的市场竞争中&#xff0c;新兴互联网领域迅速崛起&#xff0c;Web2.0已相对成熟&#xff0c;用户创造数据&#xff0c;但不拥有数据。被视为新的价值互联网的Web3.0&#xff0c;赋予用户真正的数据自主权&#xff0c;它的到来被认为是打破Web2.0垄断的机遇。 在Web3…

迅狐跨境商城系统源码

在当今全球化的商业环境中&#xff0c;跨境电商的兴起为商家提供了无限的可能性。为了满足这一需求&#xff0c;跨境商城系统源码的开发显得尤为重要。本文将探讨跨境商城系统源码的优势&#xff0c;以及如何利用这些优势来构建一个成功的跨境电商平台。 独立开发&#xff0c;…

el-table 合并单元格_以合并属性值相同行为例

在做表格展示时&#xff0c;通常会遇到合并相同日期/id行的需求&#xff1b; <template><div><el-table:data"tableData":span-method"objectSpanMethod"borderstyle"width: 100%; margin-top: 20px"><el-table-column pr…

LLM 大模型学习必知必会系列(十三):基于SWIFT的VLLM推理加速与部署实战

LLM 大模型学习必知必会系列(十三)&#xff1a;基于SWIFT的VLLM推理加速与部署实战 1.环境准备 GPU设备: A10, 3090, V100, A100均可. #设置pip全局镜像 (加速下载) pip config set global.index-url https://mirrors.aliyun.com/pypi/simple/ #安装ms-swift pip install ms-…

windows11如何安装IIS

目录 IIS是什么&#xff1f; 为什么要配置IIS&#xff1f; 1.打开控制面板进入程序 2.点击启用或者关闭windos功能 3.勾选IIS相关的web项 4.点击确定等待一分钟程序变更即可 5.主页搜索internet 点击进入 6.进入IIS进行查看配置&#xff0c;并测试&#xff0c;也可以浏…

重学java 49 List接口

但逢良辰&#xff0c;顺颂时宜 —— 24.5.28 一、List接口 1.概述: 是collection接口的子接口 2.常见的实现类: ArrayList LinkedList Vector 二、List集合下的实现类 1.ArrayList集合的使用及源码分析 1.概述 ArrayList是List接口的实现类 2.特点 a.元素有序 —> 按照什么顺…

计算机视觉可视化工具SIBR使用方法

最近在跑实验时需要可视化3DGS/2DGS的重建后的图形界面&#xff0c;所以需要一个可视化工具&#xff0c;需要的软硬件要求如下&#xff1a; Hardware Requirements OpenGL 4.5-ready GPU and drivers (or latest MESA software)4 GB VRAM recommendedCUDA-ready GPU with Comp…

常见SSL证书品牌关系图

常见SSL证书品牌关系图 在SSL证书市场上&#xff0c;有几个主要的品牌和他们之间的复杂关系。以下是一些主要的SSL证书提供商及其关系的简要概述&#xff1a; DigiCert&#xff1a; DigiCert 是最大的SSL证书颁发机构之一。它收购了Symantec的SSL和PKI业务&#xff0c;其中包括…

深度合作!博睿数据联合中国信通院开展公网服务质量评估工作!

近日&#xff0c;中国信息通信研究院&#xff08;简称“中国信通院”&#xff09;算网质量保障工作全面启动&#xff0c;博睿数据&#xff08;bonree.com&#xff0c;股票代码688229&#xff09;作为信通院算网质量测试独家技术支持单位&#xff0c;提供公网服务质量测评整体解…

Linux之多进程

文章目录 c程序获取进程pid和ppid进程相关命令进程的创建多进程进程退出exit()函数_exit函数 进程的等待wait函数waitpid函数 进程的替换进程间的通信一、无名管道二、有名管道三、信号kill函数raise函数pause() 函数自定义信号处理函数SIGALARM信号子进程退出信号SIGCHLD 四、…

算法刷题day55:搜索(二)

目录 引言一、迷宫二、红与黑三、马走日四、单词接龙五、分成互质组六、小猫爬山七、数独八、木棒九、加成序列十、排书 引言 上篇文章主要是讲 B F S BFS BFS 的&#xff0c;主要应用在搜索中找最短路方面&#xff0c;主要就是在内部搜索&#xff0c;和整体搜索。而 D F S …

基于mybatis-plus的多语言扩展

概览 对于表中字段&#xff0c;需要实现多语言的方案探讨&#xff1a; 1.表中横向扩展多个字段分别存储中文&#xff0c;英文&#xff0c;俄语等语言字段&#xff0c;查询时&#xff0c;根据需要查询的语言&#xff0c;进行查询 2.增加一张多语言表&#xff0c;存储多语言信…

IC开发——VCS基本用法

1. 简介 VCS是编译型verilog仿真器&#xff0c;处理verilog的源码过程如下&#xff1a; VCS先将verilog/systemverilog文件转化为C文件&#xff0c;在linux下编译链接生成可执行文件&#xff0c;在linux下运行simv即可得到仿真结果。 VCS使用步骤&#xff0c;先编译verilog源…

深入理解Java中的ThreadLocal机制:原理、方法与使用场景解析

深入理解Java中的ThreadLocal机制&#xff1a;原理、方法与使用场景解析 ThreadLocal 是 Java 中提供的一种机制&#xff0c;用于在多线程环境下为每个线程提供独立变量副本&#xff0c;避免了线程间共享变量引发的并发问题。通过 ThreadLocal&#xff0c;每个线程都可以拥有自…

js面试题----3

61.new的原理是什么?通过new的方式创建对象和通过字面量创建有什么区别? new: 创建一个新对象。这个新对象会被执行[[原型]]连接。将构造函数的作用域赋值给新对象,即this指向这个新对象.如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象。functio…

Nuxt2 控制路由导航方式

控制路由导航 1 在插件中使用 beforeEach 守卫 首先&#xff0c;创建一个插件文件&#xff0c;例如 router.js&#xff1a; export default ({ app, store }) > {app.router.beforeEach((to, from, next) > {if (to?.fullPath /buy/ && from?.fullPath /p…