JavaScript基础之JavaScript引入方式

news2024/11/15 11:01:30

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.coloradmin.cn/o/1403918.html

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

相关文章

Haar小波下采样模块

论文原址&#xff1a;Haar wavelet downsampling: A simple but effective downsampling module for semantic segmentation - ScienceDirect 原文代码&#xff1a;HWD/HWD.py at main apple1986/HWD (github.com) 介绍 深度卷积神经网络 &#xff08;DCNN&#xff09; 通…

性能优化-HVX 指令介绍

「发表于知乎专栏《移动端算法优化》」 本文主要介绍了 HVX 指令相关的知识&#xff0c;包括 HVX 寄存器相关内容&#xff0c;指令的背景依赖&#xff0c;部分常用 intrinsic HVX 指令。具体指令的详细内容及使用还需阅读 HVX 的指令文档&#xff0c;以及细致的实践操作。 &…

MATLAB - 激光雷达 - 相机联合标定(Lidar-Camera Calibration)

系列文章目录 前言 一、 激光雷达 - 相机标定建立了三维激光雷达点和二维相机数据之间的对应关系&#xff0c;从而将激光雷达和相机输出融合在一起。 激光雷达传感器和相机被广泛用于自动驾驶、机器人和导航等应用中的三维场景重建。激光雷达传感器捕捉环境的三维结构信息&am…

惊了!竟然有上千款小游戏源码,可直接打包H5\微信\抖音,赶紧收藏!

很多人还不知道 Cocos Store 资源商城&#xff0c;它是国内最大的小游戏资源平台。上面有大量免费游戏源码可以下载&#xff0c;比如下图的《赛博朋克》&#xff0c;项目中包含大量模型、贴图&#xff0c;还有游戏源代码&#xff0c;通过Cocos引擎可以直接在浏览器上玩。 本文就…

编程语言MoonBit新增矩阵函数的语法糖

MoonBit更新 1. 新增矩阵函数的语法糖 新增矩阵函数的语法糖&#xff0c;用于方便地定义局部函数和具有模式匹配的匿名函数&#xff1a; fn init {fn boolean_or { // 带有模式匹配的局部函数true, _ > true_, true > true_, _ > false}fn apply(f, x) {f(x)}le…

vConsole 与 Vue中未定义变量而引发的Maximum call stack size exceeded异常问题

一、问题描述 前段时间有个前端小伙伴反馈在打包发布正式环境后调用VantUI的<van-popup>组件显示时&#xff0c;显示空白&#xff0c;并且在控制台看到一个Maximum call stacksize exceeded&#xff08;超出最大调用堆栈大小&#xff09;,而本地开发环境正常&#xff1a…

NOC总线(2)

1. NoC的路由 在NoC交换信息时&#xff0c;需要确定从源节点到目标节点所经过的路径&#xff0c;这时就需要路由算法来确定该路径。路由算法分为静态路由算法和动态路由算法两种。 静态路由算法对于两节点之间的路径是固定的&#xff0c;结构简单&#xff0c;便于硬件实…

mysql 导入数据 1273 - Unknown collation: ‘utf8mb4_0900_ai_ci‘

前言: mysql 导入数据 遇到这个错误 1273 - Unknown collation: utf8mb4_0900_ai_ci 具体原因没有深究 但应该是设计数据库的 字符集类型会出现这个问题 例如: char varchar text..... utf8mb4 类型可以存储表情 在现在这个时代会用很多 以后会用的更多 所以不建议改…

基于LLaMA Factory,单卡3小时训练专属大模型 Agent

大家好&#xff0c;今天给大家带来一篇 Agent 微调实战文章 Agent&#xff08;智能体&#xff09;是当今 LLM&#xff08;大模型&#xff09;应用的热门话题 [1]&#xff0c;通过任务分解&#xff08;task planning&#xff09;、工具调用&#xff08;tool using&#xff09;和…

多维时序 | Matlab实现CNN-GRU-Mutilhead-Attention卷积门控循环单元融合多头注意力机制多变量时间序列预测

多维时序 | Matlab实现CNN-GRU-Mutilhead-Attention卷积门控循环单元融合多头注意力机制多变量时间序列预测 目录 多维时序 | Matlab实现CNN-GRU-Mutilhead-Attention卷积门控循环单元融合多头注意力机制多变量时间序列预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍…

从CNN ,LSTM 到Transformer的综述

前情提要&#xff1a;文本大量参照了以下的博客&#xff0c;本文创作的初衷是为了分享博主自己的学习和理解。对于刚开始接触NLP的同学来说&#xff0c;可以结合唐宇迪老师的B站视频【【NLP精华版教程】强推&#xff01;不愧是的最完整的NLP教程和学习路线图从原理构成开始学&a…

k8s--helm

什么是helm&#xff1f;在没有这个helm之前&#xff0c;deployment service ingress helm的作用 通过打包的方式&#xff0c;把deployment service ingress等打包在一块&#xff0c;一键式的部署服务&#xff0c;类似yum安装 官方提供的一个类似与安装仓库额功能&#xff0c;…

详解APQC流程分级分类框架PCF13个高阶分类和5级业务流程

一&#xff1a;什么是APQC 美国生产力与质量中心(American Productivity and Quality Center&#xff0c;简称为APQC)&#xff0c;创立于1977年是一个会员制的非营利机构&#xff0c;使命是“发现有效的改进方法&#xff0c;广泛地传播其发现成果&#xff0c;实现个人之间及其…

MySQL函数—字符串函数

MySQL函数—字符串函数 函数功能CONCAT(s1,s2,...sn)字符串拼接&#xff0c;将s1,s2,...sn拼接成一个字符串LOWER(str)将字符串全部转为小写UPPER(str)将字符串全部转为大写LPAD(str,n,pad)左填充&#xff0c;用字符串pad对str左边进行填充&#xff0c;达到n个字符串长度RPAD(s…

Leetcode—19.删除链表的倒数第 N 个结点【中等】

2023每日刷题&#xff08;七十五&#xff09; Leetcode—19.删除链表的倒数第 N 个结点 算法思想 实现代码 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNode(int…

EHS管理系统为何需要物联网的加持?

EHS是Environment、Health、Safety的缩写&#xff0c;是从欧美企业引进的管理体系&#xff0c;在国外也被称为HSE。EHS是指健康、安全与环境一体化的管理。 而在国内&#xff0c;整个EHS市场一共被分成三类&#xff1b; 一类是EHS管培体系&#xff0c;由专门的EHS机构去为公司…

使用AFPN渐近特征金字塔网络优化YOLOv8改进小目标检测效果(不适合新手)

目录 简单概述 算法概述 优化效果 参考文献 文献地址&#xff1a;paper 废话少说&#xff0c;上demo源码链接&#xff1a; 简单概述 AFPN的核心思想&#xff1a;AFPN主要通过引入渐近的特征融合策略&#xff0c;逐步整合底层、高层和顶层的特征到目标检测过程中。这种融合…

架构篇08:架构设计三原则

文章目录 合适原则简单原则演化原则小结 成为架构师是每个程序员的梦想&#xff0c;但并不意味着把编程做好就能够自然而然地成为一个架构师&#xff0c;优秀程序员和架构师之间还有一个明显的鸿沟需要跨越&#xff0c;这个鸿沟就是“不确定性”。 对于编程来说&#xff0c;本…

高效构建Java应用:Maven的使用总结

一、Maven简介和快速入门 1.1 Maven介绍 Maven-Introduction Maven 是一款为 Java 项目构建管理、依赖管理的工具&#xff08;软件&#xff09;&#xff0c;使用 Maven 可以自动化构建、测试、打包和发布项目&#xff0c;大大提高了开发效率和质量。 总结&#xff1a;Maven…

用ChatGPT教学、科研!大学与OpenAI合作

亚利桑那州立大学&#xff08;简称“ASU”&#xff09;在官网宣布与OpenAI达成技术合作。从2024年2月份开始&#xff0c;为所有学生提供ChatGPT企业版访问权限&#xff0c;主要用于学习、课程作业和学术研究等。 为了帮助学生更好地学习ChatGPT和大语言模型产品&#xff0c;AS…