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网络模…

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

//最短代码实现随机打乱数组各个元素的顺序 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;允许您以…

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

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

小程序学习-20

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

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;可以拼接固…

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…

在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…

【QT+QGIS跨平台编译】之二:【zlib+Qt跨平台编译】(一套代码、一套框架,跨平台编译)

文章目录 一、zlib介绍二、文件下载三、文件分析四、pro文件五、编译实践 一、zlib介绍 zlib是一套通用的解压缩开源库&#xff0c;提供了内存&#xff08;in-memory&#xff09;压缩和解压函数。zlib是一套通用的解压缩开源库&#xff0c;提供了内存&#xff08;in-memory&am…

【小沐学GIS】基于C#绘制三维数字地球Earth(OpenGL)

&#x1f37a;三维数字地球系列相关文章如下&#x1f37a;&#xff1a;1【小沐学GIS】基于C绘制三维数字地球Earth&#xff08;OpenGL、glfw、glut&#xff09;第一期2【小沐学GIS】基于C绘制三维数字地球Earth&#xff08;OpenGL、glfw、glut&#xff09;第二期3【小沐学GIS】…

三、内存分配

1. JVM 简化架构概览 1.1 运行时数据区&#xff08;即内存区域&#xff0c;又称 JVM 内存结构&#xff09; 如上面的 JVM 简化架构图所示&#xff0c;内存区域分为如下五个部分&#xff08;这五个部分统称为运行时数据区&#xff09;&#xff1a; PC 寄存器&#xff08;又称程…

Python-setup进阶打包命令

一、setup.py文件的书写 这个资料有很多&#xff0c;不多赘述&#xff0c;setup 函数常用的参数如下&#xff1a; 基础描述信息&#xff1a; name 包名称&#xff08;起一个响亮的名字&#xff09;version (-V) 包版本author 程序的作者author_email 程序的作者的邮箱地址mai…

Kafka-服务端-DelayedOperationPurgatory

DelayedOperationPurgatory是一个相对独立的组件&#xff0c;它的主要功能是管理延迟操作。 DelayedOperationPurgatory的底层依赖于Kafka提供的时间轮实现。 我们可以使用JDK本身提供的java.util.Timer或是DelayQueue轻松实现定时任务的功能&#xff0c;为什么Kafka还要专门…

图像处理之《用于统一源跟踪和深度伪造检测的深度可分离水印SepMark》论文精读

一、文章摘要 恶意的Deepfakes导致了一场关于区分真脸和伪造脸的激烈冲突。尽管已经制定了许多事后检测Deepfakes的对策&#xff0c;但毫无疑问&#xff0c;在可预见的操作之前&#xff0c;被动取证没有考虑对原始人脸采取任何预防措施。为了完成这个取证生态系统&#xff0c;…

月薪2W的软件测试工程师,到底是做什么的?

在生活中&#xff0c;我们常常会遇到以下几种窘迫时刻&#xff1a; 准备骑共享单车出行&#xff0c;却发现扫码开锁半天&#xff0c;车子都没有反应&#xff1b;手机导航打车&#xff0c;却发现地图定位偏差很大&#xff0c;司机总是跑错地方&#xff1b;买个水&#xff0c;却…

Redis实战之-分布式锁-redission

一、分布式锁-redission功能介绍 基于setnx实现的分布式锁存在下面的问题&#xff1a; 重入问题&#xff1a;重入问题是指 获得锁的线程可以再次进入到相同的锁的代码块中&#xff0c;可重入锁的意义在于防止死锁&#xff0c;比如HashTable这样的代码中&#xff0c;他的方法都…

​第14节-高质量简历写作求职通关-在线测试

在线测试主要包括性格测试、综合能力测试、技能测试三类 性格测试 性格测试主要用于考察个人与工岗位的匹配程度 考察内容包含性格、能力、动机、价值观等&#xff0c;考察形式一般为给出相应的工作场景&#xff0c;让你选择最喜欢或者最不喜欢的答案 技能考试 这类测试一般是针…

SpringMVC第一天

简介 SpringMVC技术与Servlet技术功能等同&#xff0c;均属于web层开发技术 SpringMVC是一种基于java实现的MVC模型的轻量级Web框架 优点 使用简单,开发便捷(相比于Servlet) 灵活性强 入门案例 第一步、导入SpringMVC与Servlet坐标 <?xml version"1.0" encod…

(Bean工厂的后处理器入门)学习Spring的第七天

一 . Bean工厂的后处理器入门 : 直接上图 BeanDefinitionRegistyPostProcessor 为 BeanFactoryProcessor的子接口 , 前者先执行(图里只有Bean工厂的后处理器第一个类型) 如下图 : 这两个接口可改变两个Map(BeanDefinitionMap , singletonObject)里的信息 (黑马只讲了BeanFact…