JavaScript基础之JavaScript引入方式

JavaScript引入方式

JavaScript 程序不能独立运行,它需要被嵌入 HTML 中,然后浏览器才能执行 JavaScript 代码。通过 script 标签将 JavaScript 代码引入到 HTML 中,一般以下方式:

  • 外部方式
  • 内部方式
  • JavaScript元素事件
  • 通过JavaScript伪URL引入

外部形式

外部形式,就是把HTML代码和JavaScript代码都各自单独放在不同的文件中,然后在HTML文档中使用script标签来引入JavaScript代码

步骤:将 JavaScript 代码写在独立的以 .js 结尾的文件中,然后通过 script 标签的 src 属性引入

语法:

// demo.js
document.write('这是demo.js文件内容')
<!--demo.html-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript引入方式</title><!-- 外部形式:通过 script 的 src 属性引入独立的 .js 文件 --><!--1.外部形式在head中引入--><script src="demo.js"></script>
</head>
<body><!--2. 外部形式在body中引入--><script src="demo.js"></script>
</body>
</html>

在script标签中,只需引入src这一个属性即可。src,是"source"的意思,表示文件路径

如果在 script 标签使用 src 属性引入了某 .js 文件后,script标签内再写了代码,那么 标签内的代码会被忽略
实例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript引入方式</title>
</head>
<body><!-- 外部形式:通过 script 的 src 属性引入独立的 .js 文件 --><script src="demo.js">// 此处的代码会被忽略掉!!!!console.log("这代码会被忽略掉")</script>
</body>
</html>

内部方式

内部方式,指的是把HTML代码和JavaScript代码都放在同一个文件中。其中,JavaScript代码都写在script标签内。

语法:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>内部引入</title><!-- 内部形式:通过 script 标签包裹 JavaScript 代码 --><!-- 1.在head中引入 --><script>//js代码......</script></head><body><!-- 2.在body中引入 --><script>//js代码......</script></body>
</html>

从上该实例中看出,内部样式JavaScript文件不仅可以在head中引入,也可以在body中引入。

其中,"<script></script>"是一种简写形式,等价于如下代码:

<script type="text/javascript">console.log('script标签完整写法')
</script>

实例:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>内部引入</title><!-- 内部形式:通过 script 标签包裹 JavaScript 代码 --><!-- 1.在head中引入 --><script>console.log("这是js代码")</script></head><body><!-- 2.在body中引入 --><script>console.log("这是js代码")</script></body>
</html>

JavaScript元素属性

元素属性JavaScript,指的是在元素的”事件属性"中直接编写JavaScript代码或调用JavaScript函数
实例:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>在元素事件中编写JavaScript</title></head><body><input type="button" value="按钮" onclick="alert('你触发了alert事件')"></body>
</html>

运行结果
在这里插入图片描述

实例:在元素事件中调用函数

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>在元素事件中调用函数</title><script>function example(){alert("你触发了example函数")}</script></head><body><input type="button" value="按钮" onclick="example()"/></body>
</html>

运行结果
在这里插入图片描述

通过JavaScript伪URL引入

在多数支持JavaScript脚本的浏览器中,可以通过JavaScript伪URL地址调用语句来引入JavaScript脚本代码。一般格式如下:

JavaScript:alert("你好")

实例:

<a href="javascript:alert('你好?')">点击</a>

伪URL地址可用于文档任何地方,并触发任意数量的JavaScript函数或对象固有的方法。多用于表单验证、超链接等。

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

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

相关文章

网络数据传输过程

先验知识&#xff1a;OSI模型 OSI网络模型实际上是参考模型&#xff0c;在实际中并不使用&#xff0c;在网络出现问题的时候&#xff0c;可以从一个宏观的整体去分析和解决问题&#xff0c;而且搭建网络的时候并不需要划分为7层&#xff0c;当今互联网广泛使用的是TCP/IP网络模…

js实现一个lazyman

“lazyman”通常被用来形容那些喜欢延迟处理或懒散的人&#xff0c;也就是那种不会立刻采取行动的人。 从设计模式的角度来说&#xff0c;有时也可能会用到“懒汉式”的概念&#xff0c;这通常指的是在需要的时候才进行初始化&#xff0c;比如Java中的单例模式。 此外&#x…

最短代码实现随机打乱数组各个元素的顺序

//最短代码实现随机打乱数组各个元素的顺序 randomSortArr(arr []) {return [...Array(arr.length)].map((v, i) > arr.splice(Math.round(Math.random() * (arr.length - 1)), 1)[0]); },

Unity 建造者模式(实例详解)

文章目录 说明实例1&#xff1a;构建游戏角色实例2&#xff1a;构建游戏场景实例3&#xff1a;构建UI界面 说明 在Unity中&#xff0c;建造者模式&#xff08;Builder Pattern&#xff09;是一种创建型设计模式&#xff0c;它通过分离对象构建过程的复杂性&#xff0c;允许您以…

【cucumber】CucumberOptions详解

CucumberOptions注解&#xff1a;相当于Cucumber的初始化配置 Maven依赖包 <!-- 用户验收测试框架 io.cucumber.junit.CucumberOptions --><dependency><groupId>io.cucumber</groupId><artifactId>cucumber-junit</artifactId><vers…

第一节 K8S的基础概念

第一节 K8S的基础概念 Node 可以理解为一个物理机或者虚拟机 ,K8S中的一个节点 ,每个节点包含Pod 所需的服务, 这些节点 是由 Control Plane 来管理, 节点的名称 用来标识Node 对象,名称必须是唯一的. Node上有三个组件分别是 kubelet ,kube-proxy,container-runtime . kubel…

Linux命令-ab命令(Apache服务器的性能测试工具 )

Apache服务器的性能测试工具 ab命令 是一个测试你 Apache http 服务器的工具&#xff0c;你可以通过这个工具&#xff0c;指定一个单位时间内向 apache 发出的请求数量来看看你的 Apache 和机器配合的性能如何。 语法 []内容为ab命令后跟的语法&#xff0c;eg&#xff1a;ab …

MySQL索引优化:深入理解索引下推原理与实践

随着MySQL的不断发展和升级&#xff0c;每个版本都为数据库性能和查询优化带来了新的特性。在MySQL 5.6中&#xff0c;引入了一个重要的优化特性——索引下推&#xff08;Index Condition Pushdown&#xff0c;简称ICP&#xff09;。ICP能够在某些查询场景下显著提高查询性能&a…

小程序学习-20

建议每次构建npm之前都先删除miniprogram_npm

HJ7 取近似值【C语言】

【华为机试题 HJ7】取近似值 描述输入描述:输出描述:示例1示例2参考代码1参考代码2参考代码3描述 写出一个程序,接受一个正浮点数值,输出该数值的近似整数值。如果小数点后数值大于等于 0.5 ,向上取整;小于 0.5 ,则向下取整。 数据范围:保证输入的数字在 32 位浮点数范…

【Java】小白友好的java IO操作学习笔记

慢就是快&#xff0c;让知识先沉淀一会。 目录 流 数据流 文件流 文件复制 缓冲流 字符流 序列化 流 在 Java 中&#xff0c;流是一种用于处理输入和输出的数据序列的抽象概念。Java 提供了丰富的流类和接口&#xff0c;用于处理不同类型的数据源和数据目标。 Java 中…

Windows11家庭版上安装Hyper-V并导入虚拟机的方法

大纲 安装启用Hyper-V下载并安装启用 导入虚拟机代码地址 一般我们新买的电脑默认自带的是Windows家庭版。这个版本是没有Hyper-V的。如果安装自带Hyper-V的版本&#xff0c;则需要另外购买。但是我们还是有办法在Windows11的家庭版上安装和启用Hyper-V的。 安装启用Hyper-V …

前端模板字符串的使用

目录 1.说明 2.示例 3.总结 1.说明 模板字符串是用反引号&#xff08;&#xff09;分隔的字面量&#xff0c;允许多行字符串&#xff0c;带有嵌入表达式的字符串插值和一种带标签的模板的特殊结构。 是增强版的字符串&#xff0c;在进行字符串拼接时&#xff0c;可以拼接固…

如何理解伪标签中的置信度

伪标签中常常有置信度这一说法&#xff0c;通过置信度&#xff0c;我们可以筛选出质量高的伪标签&#xff08;直观来说是像素&#xff09;&#xff0c;那比如说预测结果为一个2256256的概率图&#xff0c;那针对一个像素的两个通道值&#xff0c;怎样才算质量高或者低呢&#x…

11 python快速上手

函数进阶 函数进阶1.参数的补充1.1 参数内存地址相关【面试题】1.2 函数的返回值是内存地址1.3 参数的默认值【面试题】1.4 动态参数 2. 函数和函数名2.1 函数做元素2.2 函数名赋值2.3 函数名做参数和返回值 3.返回值和print4. 作用域4.1 函数为作用域4.2 全局和局部4.3 global…

一种计数算法

前言 常见的一个问题: 给定一个整形数组, 统计其中有多少唯一的元素. 常见的思路有哪些呢? 元素去重并统计, 利用哈希表进行去重计数.数组排序后统计 以上空间复杂度均与元素数量关联, 如果允许损失精度, 是否可以使用较低的空间占用来统计呢? 利用布隆过滤器是一种的一…

SHELL编程-Linux自动化运维基础(变量与条件控制语法)

SHELL编程-Linux自动化运维基础 变量使用 定义与使用 r123localhost:~$ first_varaaa r123localhost:~$ echo $first_var aaa r123localhost:~$ second_var123 r123localhost:~$ echo $second_var 123 r123localhost:~$ third"bbb ccc" r123localhost:~$ echo $th…

在CentOS 7 中配置NFS服务器

目录 1、克隆两个虚拟机 2、安装 NFS 服务 3、NFS 服务使用 1、克隆两个虚拟机 nfs-servernfs-client&#xff08;修改ip地址&#xff09;[rootxnode1 ~]# cd /etc/sysconfig/network-scripts/[rootxnode1 network-scripts]# vi ifcfg-eno16777736 #修改内容如下 BOOTPROT…

【Oracle】ORA-32017和ORA-00384错误处理

文章目录 【Oracle】ORA-32017和ORA-00384错误处理问题描述问题原因和解决测试验证 【声明】文章仅供学习交流&#xff0c;观点代表个人&#xff0c;与任何公司无关。 编辑|SQL和数据库技术(ID:SQLplusDB) 收集Oracle数据库内存相关的信息 【Oracle】ORA-32017和ORA-00384错误…

Linux 常见性能指标 -- 磁盘

本系列记录操作系统常见性能指标&#xff0c;写这个主要是记录也是回顾&#xff0c;笔记很长&#xff0c;拆分了几个部分&#xff0c;本篇记录 磁盘 的性能指标 常见概念 响应时间 简单描述&#xff1a;I/O 请求从发出到收到响应的间隔时间 是衡量磁盘性能的关键指标&#x…