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.mfbz.cn/a/340243.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Spring Boot 4.0:构建云原生Java应用的前沿工具

目录 前言 Spring Boot简介 Spring Boot 的新特性 1. 支持JDK 17 2. 集成云原生组件 3. 响应式编程支持 4. 更强大的安全性 5. 更简化的配置 Spring Boot 的应用场景 1. 云原生应用开发 2. 响应式应用程序 3. 安全性要求高的应用 4. JDK 17的应用 总结 作…

【射影几何11】完全四边形和交比研究

一、说明 对于交比的灵活应用&#xff0c;尚有许多情况需要讨论&#xff0c;首先引出完全四边形的例子&#xff0c;该关键词的应用非常普遍&#xff1b;其次&#xff0c;我们尝试用交比证明一些事实&#xff1b;随后我们又引出交比射影案例的特殊情况。 二、完全四边形 2.1 完…

Excel 动态可视化图表分享

AIGC ChatGPT 职场案例 AI 绘画 与 短视频制作 PowerBI 商业智能 68集 数据库Mysql 8.0 54集 数据库Oracle 21C 142集 Office 2021实战应用 Python 数据分析实战&#xff0c; ETL Informatica 数据仓库案例实战 Excel 2021实操 100集&#xff0c; Excel 2021函数大全 80集 Exc…

SqlAlchemy使用教程(五) ORM API 编程入门

SqlAlchemy使用教程(一) 原理与环境搭建SqlAlchemy使用教程(二) 入门示例及编程步骤SqlAlchemy使用教程(三) CoreAPI访问与操作数据库详解SqlAlchemy使用教程(四) MetaData 与 SQL Express Language 的使用SqlAlchemy使用教程(五) ORM API 编程入门 前一章用SQL表达式(SQL Expr…

Android:JNI实战,加载三方库、编译C/C++

一.概述 Android Jni机制让开发者可以在Java端调用到C/C&#xff0c;也是Android应用开发需要掌握的一项重要的基础技能。 计划分两篇博文讲述Jni实战开发。 本篇主要从项目架构上剖析一个Android App如何通过Jni机制加载三方库和C/C文件。 二.Native C Android Studio可…

高防IP如何保护服务器

首先我们要知道什么是高防IP~ 高防IP是指高防机房所提供的ip段&#xff0c;主要是针对互联网服务器遭受大流量DDoS攻击时进行的保护服务。高防IP是目前最常用的一种防御DDoS攻击的手段&#xff0c;用户可以通过配置DDoS高防IP&#xff0c;将攻击流量引流到高防IP&#xff0c;防…

样品前处理国产微波消解罐的优势

国产微波消解罐参数&#xff1a; 型号 MARS5、MARS6等 内罐材质 TFM 外罐材质 宇航纤维复合材料 耐温 -200&#xff5e;260℃ 规格 25ml、55ml、75ml、100ml、110ml 厂家秉承 “客户、服务、技术”为根本的理念国产替代微波罐受到众多用户的青睐。 特性&#xff1a…

【LeetCode】每日一题 2024_1_21 分割数组的最大值(二分)

文章目录 LeetCode&#xff1f;启动&#xff01;&#xff01;&#xff01;题目&#xff1a;分割数组的最大值题目描述代码与解题思路 LeetCode&#xff1f;启动&#xff01;&#xff01;&#xff01; 今天是 hard&#xff0c;难受&#xff0c;还好有题解大哥的清晰讲解 题目&a…

论文阅读:Vary论文阅读笔记

目录 引言整体结构图数据集构造Vary-tiny部分Document Data数据构造Chart Data构造Negative natural image选取 Vary-base部分 引言 论文&#xff1a;Vary: Scaling up the Vision Vocabulary for Large Vision-Language Models Paper | Github | Demo 许久不精读论文了&#x…

文件操作与IO(3)

文件内容的读写--数据流 这里我们将要讲到文件操作中的重要概念--流. 之前也在C语言讲解中提到了文件流的概念---读写文件内容 分为这几步:(1)打开文件;(2)读/写文件;(3)关闭文件. 数据流主要分为字节流和字符流. 字节流:以字节为单位进行读写(代表:InputStream,OutputStrea…

20240122让WIN10在启动的时候进入安全模式

20240122让WIN10在启动的时候进入安全模式 2024/1/22 18:30 缘起&#xff1a;为了使用openai的whisper识别小语种【非英语】电影的字幕&#xff0c;决定开始折腾CUDA了&#xff01;https://github.com/openai/whisper https://www.bilibili.com/video/BV1d34y1F7qA https://www…

API协议设计的十种技术

文章目录 前言一、REST二、GraphQL三、gRPC&#xff08;google Remote Procedure Calls&#xff09;四、Webhooks五、服务端的事件发送——SSE&#xff08;Server-sent Events&#xff09;六、EDI&#xff08;Electronic Data Interchange&#xff09;七、面向API 的事件驱动设…

HarmonyOS NEXT 开发者必看“清单“就在这里!

随着HarmonyOS NEXT开启开发者预览版Beta招募&#xff0c;开发者可以体验到全面升级的 OS开放新能力、鸿蒙特征新场景、开发工具等。这是一项需要广大开发者一起参与的伟大事业&#xff0c;华为期待携手开发者一路同行&#xff0c;共赴鸿蒙生态的星辰大海。如何借助HarmonyOS N…

数据集笔记:UJIIndoorLoc

1 数据集介绍 UJIIndoorLoc - UCI Machine Learning Repository UJIIndoorLoc是一个多建筑多楼层的室内定位数据库&#xff0c;用于测试依赖于WLAN/WiFi指纹的室内定位系统。 2 数据读取 数据分类训练数据和测试数据 import pandas as pdapd.read_csv(Downloads/ujiindoo…

矩阵和矩阵如何相乘?

矩阵与矩阵相乘遵循特定的数学规则。为了相乘&#xff0c;第一个矩阵的列数必须等于第二个矩阵的行数。矩阵乘法的结果是一个新矩阵&#xff0c;其行数等于第一个矩阵的行数&#xff0c;列数等于第二个矩阵的列数。矩阵乘法不满足交换律&#xff0c;即 AB≠BA。 例子&#xff…

MySQL---多表分组查询综合练习

创建dept表 CREATE TABLE dept ( deptno INT(2) NOT NULL COMMENT 部门编号, dname VARCHAR (15) COMMENT 部门名称, loc VARCHAR (20) COMMENT 地理位置 ); 添加dept表主键 mysql> alter table dept add primary key(deptno); Query OK, 0 rows affected (0.02 s…

Mybatis 动态SQL条件查询(注释和XML方式都有)

需求 : 根据用户的输入情况进行条件查询 新建了一个 userInfo2Mapper 接口,然后写下如下代码,声明 selectByCondition 这个方法 package com.example.mybatisdemo.mapper; import com.example.mybatisdemo.model.UserInfo; import org.apache.ibatis.annotations.*; import j…

接口测试介绍以及用例编写

6.1 接口 6.1.1 接口概述 定义&#xff1a; 接口就是API&#xff08;Application Programming Interface&#xff0c;应用程序接口&#xff09;&#xff0c;是一个软件或服务对外提供的接口&#xff0c;别人只要调用这接口&#xff0c;而内部如何实现&#xff0c;不需要关心。…

Python 算法交易实验67 第一次迭代总结

说明 在这里对第一次迭代&#xff08;2023.7~ 2024.1&#xff09;进行一些回顾和总结&#xff1a; 回顾&#xff1a; 1 实现了0~1的变化2 在信息隔绝的条件下&#xff0c;无控制的操作&#xff0c;导致被套 总结&#xff1a; 思路可行&#xff0c;在春暖花开的时候&#x…

3分钟带你了解,软件测试是做什么的

&#x1f525; 交流讨论&#xff1a;欢迎加入我们一起学习&#xff01; &#x1f525; 资源分享&#xff1a;耗时200小时精选的「软件测试」资料包 &#x1f525; 教程推荐&#xff1a;火遍全网的《软件测试》教程 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1…
最新文章