JS基础:js的2种基本用法,4个属性详解

你好,我是云桃桃。

一个希望帮助更多朋友快速入门 WEB 前端的程序媛。

云桃桃-大专生,一枚程序媛,感谢关注。回复 “前端基础题”,可免费获得前端基础 100 题汇总,回复 “前端工具”,可获取 Web 开发工具合集

300篇原创内容-更多前端系列内容可以go公众.h:云桃桃

后台回复“前端基础路线”可获取前端基础学习路线

后台回复“前端基础题”可得到前端基础100题汇总,持续更新中

后台回复“前端电子书”可获取20+本精选电子书

前言

今天我们来看看 <script> 标签的一些写法和属性吧。

2 种基本用法

1、内联 JavaScript:直接在 <script> 标签内部编写 JavaScript 代码。

代码如下:

<script>// JavaScript 代码放在这里document.getElementById('title').innerHTML = 'hello world!'
</script>

2、外部 JavaScript 文件:是将 JavaScript 代码存储在一个单独的文件中,然后在 HTML 文档中使用<script>标签的src属性来引入这个文件。

比如,下面的写法,引入相对路径 js 文件夹下面的 script.js 文件,外部文件的写法就是内联方式标签里的内容。

<script src="js/scirpt.js"></script>

2者相比,最好使用 src 外部引入,它的优势如下几点:

代码复用:将 JavaScript 代码存储在一个单独的文件中,可以方便地在多个页面中复用这些代码。

代码维护:将 JavaScript 代码存储在一个单独的文件中,可以方便地进行代码的维护和修改。

提高性能:将 JavaScript 代码存储在一个单独的文件中,可以提高页面的加载速度。

需要注意的是,<script> 标签可以放在 HTML 文档的任何位置,但是为了保证代码的可读性和可维护性,最好将<script>标签放在<body>标签的底部,或者放在<head>标签中。

接下来,我们来看看它的 4 个属性。

4 个属性

一、 src:指定外部 JavaScript 文件的路径。

路径有相对路径和绝对路径两种。

(1)相对路径。是指相对于当前 HTML 文档的路径,也最为常见,它的写法有3种,比如:

  • ./:表示当前目录,不写这个也表示当前目录。

  • ../:表示上一级目录。

  • /:表示根目录。

(2)绝对路径。是指从根目录开始的完整路径。绝对路径的写法是/path/to/file.js,其中path/to/file.js是要引入的 JavaScript 文件的完整路径。

其实这个路径,我们和前面超链接HTML基础:超链接那篇文的写法是一样的,可以看看。

那在外部引入 JavaScript 文件时,最好用哪种呢?我认为最好是使用相对路径,它有以下几个好处:

  • 可移植性:相对路径是相对于当前 HTML 文件的位置,而不是固定的绝对路径。这意味着,如果你将整个项目移动到其他位置或服务器上,相对路径仍然有效,而无需修改 JavaScript 文件的路径。这样可以提高项目的可移植性,使其更容易在不同环境中运行。

  • 简洁性:相对路径通常比绝对路径更简洁,因为它们不包含完整的文件系统路径。这使得代码更易于阅读和理解,尤其是在项目结构复杂的情况下。

  • 避免依赖于特定的服务器配置:绝对路径可能会受到服务器配置的影响,例如服务器的根目录位置或虚拟主机设置。使用相对路径可以避免这种依赖,确保代码在不同的服务器环境中都能正常工作。

  • 团队协作方便:在团队开发中,使用相对路径可以减少因为文件路径不一致而导致的问题。

然而,在某些情况下,绝对路径可能也是合适的,例如:

  • 如果 JavaScript 文件位于与 HTML 文件不同的域名或服务器上,那么必须使用绝对路径。

  • 如果你希望在不同的网站或项目中共享相同的 JavaScript 文件,并且这些网站或项目的根目录位置不同,那么使用绝对路径可能更方便。

总的来说,在大多数情况下,使用相对路径是一个更好的选择。但具体使用哪种路径方式,还需要根据实际情况来决定。

二、 type:指定脚本的 MIME 类型,默认为 text/javascript。所以,基础学习中,我们不写 type 也没问题。

<script type="text/javascript">  // 不写type属性也可以// JavaScript 代码放在这里
</script>

三、 async:表示脚本将异步加载,浏览器会并行下载脚本,不阻塞页面的解析,但会阻塞文档的加载和渲染直到脚本执行完毕。

<script src="script.js" async></script>

四、 defer:表示脚本将在文档解析完成后,且在 DOMContentLoaded 事件触发前执行。多个带有 defer 属性的脚本会按照它们在文档中出现的顺序执行。适用于脚本依赖于文档的解析,并且希望在文档解析完成后再执行脚本。

那假设你有一个外部 JavaScript 文件 app.js,你想在文档加载完毕后再执行它,可以这样写:

<script src="app.js" defer></script>

如果你需要立即执行内联脚本,可以这样写:

<body onload="console.log('页面开始加载');"><!-- 页面内容 --><script>// 页面加载时立即执行的脚本</script>
</body>

使用时候,需要注意以下 2 点:

  • 内联脚本应放在文档的底部,或者使用 defer 或 async 属性,以避免阻塞页面渲染。

  • 外部脚本可以放在头部(<head>),通过使用 defer 或 async 来控制脚本的加载和执行时机。

OK,本文完。

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

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

相关文章

C++容器map及unordered_map底层实现和性能上有所不同

std::map 和 std::unordered_map 都是 C 标准库中用于实现关联容器的类模板&#xff0c;但它们在底层实现和性能上有所不同。 1. std::map&#xff1a; - 使用红黑树实现&#xff0c;保持元素的有序性。因此&#xff0c;所有操作的时间复杂度都是 O(log n)&#xff0c;其中…

算法--贪心算法

贪心算法是一种在每一步选择中都采取在当前状态下最好或最优&#xff08;即最有利&#xff09;的选择&#xff0c;从而希望导致结果是全局最好或最优的算法。贪心算法在有最优子结构的问题中尤其有效&#xff0c;这意味着局部最优解能决定全局最优解。简单来说&#xff0c;贪心…

零基础学习数据库SQL语句之查询表中数据的DQL语句

是用来查询数据库表的记录的语句 在SQL语句中占有90%以上 也是最为复杂的操作 最为繁琐的操作 DQL语句很重要很重要 初始化数据库和表 USE dduo;create table tb_emp(id int unsigned primary key auto_increment comment ID,username varchar(20) not null unique comment…

【C++基础】内联函数

一&#xff0c;内联函数概念 以inline修饰的函数叫做内联函数。 编译时&#xff0c;C编译器会在调用内联函数的地方展开&#xff0c;没有函数调用栈帧的开销。 内联函数提升程序运行的效率。 二&#xff0c;特性 1&#xff0c;inline是一种以空间换时间的做法 2&#xff…

glob库和split函数的用法

dir为一个文件夹&#xff0c;存放着三张jpg格式的图像 import glob dir rD:\My Data\Figure image_DCE_files glob.glob(f{dir}/*.jpg) image_DCE_files glob库可以获取文件夹下为个文件的绝对路径,会保存到一个列表中 获取的路径可以拆分为列表 image_DCE_files[1].split(…

写自己的c库----小话c语言(19)

Q&#xff1a; 对于c代码&#xff0c;经常可能被c代码使用&#xff0c;所以经常需要使用extern "C"语句&#xff0c;老是写这段代码真是很烦人&#xff0c;有什么好的方法&#xff1f; A&#xff1a; 对于重复代码来说&#xff0c;宏无疑是个很好的方法。 #if defin…

HTTP常见面试题(一)

3.1 HTTP 常见面试题 HTTP基本概念 HTTP 是超文本传输协议&#xff0c;也就是HyperText Transfer Protocol。 HTTP 的名字「超文本协议传输」&#xff0c;它可以拆成三个部分&#xff1a; 超文本 传输 协议 HTTP 是一个用在计算机世界里的协议。它使用计算机能够理解的语…

Lora训练笔记1——快速上手

准备工具 AKI大佬的整合包&#xff0c;一键解压即可。 度盘链接 提取码&#xff1a;p8uy 图片预处理 图片预处理&#xff1a;以一定规则裁剪原始的训练素材图片&#xff0c;并进行打标处理。 新建两个文件夹 input&#xff1a;存放原始图片的文件夹 preprocess-output:…

西湖大学赵世钰老师【强化学习的数学原理】学习笔记-1、0节

强化学习的数学原理是由西湖大学赵世钰老师带来的关于RL理论方面的详细课程&#xff0c;本课程深入浅出地介绍了RL的基础原理&#xff0c;前置技能只需要基础的编程能力、概率论以及一部分的高等数学&#xff0c;你听完之后会在大脑里面清晰的勾勒出RL公式推导链条中的每一个部…

OpenCV如何使用 GDAL 读取地理空间栅格文件(72)

返回:OpenCV系列文章目录&#xff08;持续更新中......&#xff09; 上一篇:OpenCV的周期性噪声去除滤波器(70) 下一篇 :OpenCV系列文章目录&#xff08;持续更新中......&#xff09; 目录 目标 代码&#xff1a; 解释&#xff1a; 如何使用 GDAL 读取栅格数据 注意 …

C++进阶----多态

1.多态的概念 1.1 概念 多态的概念&#xff1a;通俗来说&#xff0c;就是多种形态&#xff0c;具体点就是去完成某个行为&#xff0c;当不同类型的对象去完成时会 产生出不同的状态。 举个例子&#xff1a;比如有一个基类Animal&#xff0c;它有两个子类Dog和Cat。每个…

利用 pcap 库和 select 函数实现网络数据包实时捕获

概述 在网络编程中&#xff0c;实时捕获网络数据包是一项常见的任务。这对于网络安全分析、网络流量监控以及网络性能调优等领域都非常重要。在本篇博客中&#xff0c;我们将介绍如何利用 pcap 库和 select 函数实现网络数据包的实时捕获&#xff0c;以及一些相关的技巧和应用…

数据结构---时间复杂度+空间复杂度

算法(algorithm)简单说就是解决问题的方法。方法有好坏&#xff0c;同样算法也是&#xff0c;有效率高的算法&#xff0c;也有效率低的算法。衡量算法的好坏一般从时间和空间两个维度衡量&#xff0c;也就是本文要介绍的时间复杂度和空间复杂度。有些时候&#xff0c;时间与空间…

2024年第七届大数据技术国际会议(ICBDT 2024)即将召开!

2024年第七届大数据技术国际会议&#xff08;ICBDT 2024&#xff09;将于2024年9月20-22日在中国杭州的浙江工商大学举行。数据驱动未来&#xff0c;技术引领潮流。从数据挖掘算法的优化&#xff0c;到数据处理速度的提升&#xff0c;再到数据安全与隐私保护的进步&#xff0c;…

求解ab串

【问题描述】 给定一个由字符a和字符b组成的字符串&#xff0c;可以删除若干字符&#xff0c;使得剩下来的字符串满足前后段为a&#xff0c;中间段为b&#xff08;aaa....aaabbbb.....bbbbaaa.....aaa&#xff09;,区段可以没有字符&#xff08;ba,ab,b,aa都是合法的&#xff…

Scikit是什么?

目录 一、Scikit是什么&#xff1f; 二、用Scikit做一个简单房价预测例子 三、sklearn知识点 一、Scikit是什么&#xff1f; Scikit就是scikit-learn&#xff0c;是一个免费软件机器学习库。 https://scikit-learn.org/stable/https://scikit-learn.org/stable/ 用于预测数…

SoundStream: 下一代的神经网络音频编解码器,实时压缩不牺牲音质

音频编解码技术的目标是&#xff0c;通过减少音频文件的大小来节省存储空间或减轻网络传输的负担。理想的情况下&#xff0c;即使音频被压缩&#xff0c;我们听到的声音与原版也应该没有任何区别。 过去&#xff0c;已经有不少编解码技术被开发出来&#xff0c;满足了这些需求…

[重学Python] Day8 面向对象编程:详解基于接口编程、组合优于继承、控制反转及SOLID五个原则

[重学Python] Day8 面向对象编程&#xff1a;详解基于接口编程、组合优于继承、控制反转及SOLID五个原则 一、面向对象编程的理念1、基于接口编程面向对象中基于接口编程主要有以下一些优点和特点 2、组合优于继承组合优于继承的优点和特点主要包括以下几点 3、控制反转通过控制…

Day13-JavaWeb开发-事务管理(回顾/进阶)AOP基础(入门/概念)AOP进阶(通知类型/顺序/切点表达式)AOP案例

1. 事务管理 1.1 事务管理-事务回顾 1.2 事务管理-事务进阶 rollbackFor propagetion 2. AOP基础 2.1 AOP基础-快速入门 2.2 AOP基础-核心概念 3. AOP进阶 3.1 AOP进阶-通知类型 3.2 AOP进阶-通知顺序 3.3 切入点表达式-execution 3.4 切入点表达式-annottation 3.5 AOP进阶…

Flutter路由跳转的两种方式

1.基本路由跳转&#xff1a;文件引入在你要跳转的页面引入 ElevatedButton(onPressed: () {Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) {return const NewsPage(arguments: {"title": "基本路由新闻页面传值","a…