JS使用方式

news2024/10/24 8:28:26

JS是解释性语言,所以不需要搭建类似C#/Java之类的开发运行环境,因为他们是编译型语言。JS一般运行在浏览器中或者node环境中,这里都是JS引擎的功劳。

node环境使用

推荐使用nvm管理node版本,nrm管理代理地址。
安装node:https://nodejs.org/en/
然后随便写一个JS文件,运行node命令运行即可:

HTML中使用

在html中使用方式有两种:

第一种,直接嵌入到html中进行使用

第二种,写到单独的文件中,在html中引用

扩展

延迟脚本(defer),异步脚本(async)

在了解defer和async之前,我们需要了解一下浏览器如何解释html的。一个html文档,浏览器是自上而下进行解析的。也就是从html开始一步一步到/html, 即使head中引用了多个外部js,也会将全部js加载完再向下解析。这就产生了一个问题,如果head中引入了大量外部js,这就会造成页面开始是空白的情况,直到js全部加载完之后,才会根据DOM进行界面显示。
所以可以将外部引用的js放置在body的尾部最好不过:

defer

在html4.01为script添加了defer属性,脚本会延迟到整个页面都解析完毕后再运行,也就是虽然脚本在head中,但是也会延迟到浏览器遇到</html>之后再执行。

注意
在现实中,延迟脚本并不一定会按照顺序执行,也不一定会在DOMContentLoaded事件触发前执行,因此最好只包含一个延迟脚本。

async

顾名思义,该属性的功能就是让浏览器异步加载js,而不是按照常规的顺序解析。

提示:延迟加载,并不影响界面的构造。而是立即下载,延迟执行。
最好使用外部文件来包含JS代码。
可维护性;可缓存,更加具有包容性。

<noscript>元素
用于验证浏览器是否支持JS,如果不支持,进行提示。
<noscript>该浏览器不支持脚本</noscript>

关于我

  • 一个推崇全栈开发的前端开发人员

  • 微信: itrzzh

  • 公众号:全栈道

  • 个人网站:https://www.iotzzh.com

  • 知识星球:全栈道

  • B站:https://space.bilibili.com/285025688

  • 抖音:全栈道

  • github:https://github.com/iotzzh

  • gitee: https://gitee.com/iotzzh

捐赠鼓励

开源不易,如果《全栈道》对你有些帮助,可以请作者喝杯咖啡,算是对开源做出的一点点鼓励吧!

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

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

相关文章

关于Vue3的一些操作

1. 设置浏览器自动打开 在package.json 中设置 dev: vite --open 2.给src文件夹配置别名 在vite.config.ts配置文件中添加以下内容 3. 如果2中有红色波浪线的问题 ***安装一个文件包***npm install types/node3. 在tsconfig.json配置文件中&#xff0c;找到配置项compi…

迷你内裤洗衣机排名前十名:推荐十款2024专业性高的内衣洗衣机

最近一段时间&#xff0c;关于内衣到底是机洗好&#xff0c;还是手洗好这个话题&#xff0c;有很多人都在讨论&#xff0c;坚决的手洗党觉得应该用手来清洗&#xff0c;机洗与其它衣物混合使用&#xff0c;会产生交叉感染&#xff0c;而且随着使用时间的推移&#xff0c;会变得…

【Maven】Maven 基础教程(五): jar 包冲突问题

《Maven 基础教程》系列&#xff0c;包含以下 5 篇文章&#xff1a; Maven 基础教程&#xff08;一&#xff09;&#xff1a;基础介绍、开发环境配置Maven 基础教程&#xff08;二&#xff09;&#xff1a;Maven 的使用Maven 基础教程&#xff08;三&#xff09;&#xff1a;b…

2575. 找出字符串的可整除数组(Go语言)

https://leetcode.cn/problems/find-the-divisibility-array-of-a-string/ 在看题解之前&#xff0c;我的代码是以下这样&#xff1a; package mainimport ("fmt" )func main() {fmt.Println(divisibilityArray("998244353", 3)) }func divisibilityArray…

数据备份:守护你的数字资产,安全无忧!

一、数据备份&#xff1a;数字时代的“保险箱” 在数字化日益盛行的今天&#xff0c;我们的工作、学习和生活都离不开各种电子设备。无论是电脑中的文档、图片&#xff0c;还是手机里的联系人、短信&#xff0c;都承载着我们的重要信息和回忆。然而&#xff0c;电子设备并非永…

基于C/S架构的在线阅读器

项目简介 本项目实现了用户的基本阅读功能。项目内容涉及到IO&#xff0c;网络编程&#xff0c;C&#xff0c;QT等知识点。本次项目服务器搭建在ubuntu上&#xff0c;客户端ui在QT中实现&#xff0c;客户端和服务器使用套接字通信。 一、基本功能展示 &#xff08;1&#xff…

关于制作一个Python小游戏(三)

目录 前言: 在前面我们已经了解过了关于制作pygame的使用和在里面游戏中的简单操作的内容了,今天我们主要讲的就是关于敌机的出现和如何去操控游戏中英雄飞机和敌机的出现 1.敌机的设计: 1.1敌机出场的实现: 1.1.1游戏启动后,每个一秒钟出现一架敌方飞机 1.1.2每架敌机向屏…

ETL与抖音数据同步,让数据流动无阻

在当今数字化时代&#xff0c;数据的价值日益凸显&#xff0c;企业需要从各种渠道获取有关用户行为、市场趋势和竞争对手活动的数据。作为一家专注于数据集成和转换的领先平台&#xff0c;ETLCloud为企业提供了强大的数据同步和转换功能。而与此同时&#xff0c;抖音作为一款热…

vcomp140.dll丢失如何修复,5种修复方法轻松搞定vcomp140.dll问题

vcomp140.dll文件的丢失可能会引发一系列系统运行与软件功能上的问题。具体来说&#xff0c;这个动态链接库文件是Visual C Redistributable的一部分&#xff0c;对于许多基于此环境开发的应用程序至关重要。一旦缺失&#xff0c;可能会导致部分应用程序无法正常启动或运行&…

深入浅出(二)MVVM

MVVM 1. 简介2. 示例 1. 简介 2. 示例 示例下载地址&#xff1a;https://download.csdn.net/download/qq_43572400/88925141 创建C# WPF应用(.NET Framework)工程&#xff0c;WpfApp1 添加程序集 GalaSoft.MvvmLight 创建ViewModel文件夹&#xff0c;并创建MainWindowV…

SAP Parallel Accounting(平行分类账业务)配置及操作手册(超详细的说明和测试)

SAP Parallel Accounting(平行分类账业务)配置及操作手册 1、Overview 为了适应不同的会计准则&#xff0c;SAP在新总账中启用了多分类账&#xff0c;&#xff08;其作用简单来说就是&#xff0c;同时一笔记账&#xff0c;会产生多个账套的凭证。&#xff09;分类账可以对应一…

一文掌握:电力管理系统该的功能和界面设计

一、什么电力管理系统 电力管理系统是一个用于监控、控制和优化电力系统运行的软件系统。它集成了实时数据采集、数据分析、决策支持和远程控制等功能&#xff0c;旨在提高电力系统的运行效率、可靠性和安全性。 电力管理系统是一个集成了数据采集、监控、分析和控制等功能的软…

应用层协议--HTTP

目录 一.HTTP是什么&#xff1f; 二.HTTP的请求和响应 a.请求&#xff1a; b.响应&#xff1a; 三.URL 四.Header 1.Host 2. Content-Length 3. Content-Type a. 请求 b. 响应 4. Referer 5. User-Agent 6. Cookie 一.HTTP是什么&#xff1f; HTTP是一种应用层协议&#xff0c…

Java并发编程-实现多线程的四种方式

创建线程的四种方式 创建线程的四种方式包括使用继承 Thread 类、实现 Runnable 接口、使用 Callable 和 Future 接口以及利用线程池。每种方式都有其特定的优势和适用场景。通过继承 Thread 类或实现 Runnable 接口&#xff0c;可以定义线程要执行的任务&#xff0c;并通过调用…

图形系统开发实战课程:进阶篇(上)——10.应用实例:交通路网

图形开发学院&#xff5c;GraphAnyWhere 课程名称&#xff1a;图形系统开发实战课程&#xff1a;进阶篇(上)课程章节&#xff1a;“图形样式”原文地址&#xff1a;https://www.graphanywhere.com/graph/advanced/2-10.html 第十章 应用实例&#xff1a;交通路网 \quad 在前面几…

Spring学习 基础(一)

Spring基础 IoC容器&#xff08;Inversion of Control&#xff09;: Spring 的核心是其控制反转&#xff08;IoC&#xff09;容器&#xff0c;它负责管理对象的生命周期和相互之间的依赖关系。通过依赖注入&#xff08;Dependency Injection&#xff09;&#xff0c;Spring能够…

python 基础知识点(蓝桥杯python科目个人复习计划59)

今日复习内容&#xff1a;做题 例题1&#xff1a;建造房屋 问题描述&#xff1a; 小蓝和小桥是两位年轻的建筑师&#xff0c;他们正在设计一座新的城市。 在这个城市中&#xff0c;有N条街道&#xff0c;每条街道上有M个位置可以建造房屋&#xff08;一个位置只能建造一个房…

【java】后序遍历二叉树

采用递归方式实现 节点类 public class Node {private int value;//父节点private Node fNode;//左节点private Node left;//右节点private Node right;//是否已经打印过private boolean sign false;public Node() {}public boolean isSign() {return sign;}public void setS…

融资项目——OpenFeign的降级与熔断

当一个微服务调用其他微服务时&#xff0c;如果被调用的微服务因各种原因无法在规定时间内提供服务&#xff0c;则可以直接使用本地的服务作为备选&#xff0c;即进行降级熔断。 如之前所提到的微服务为例&#xff1a; 如果希望实现降级熔断&#xff0c;可以在本地创建一个实现…

【Spring云原生系列】Spring Cloud Stream:消息驱动架构(MDA)解析,实现异步处理与解耦合!

&#x1f389;&#x1f389;欢迎光临&#xff0c;终于等到你啦&#x1f389;&#x1f389; &#x1f3c5;我是苏泽&#xff0c;一位对技术充满热情的探索者和分享者。&#x1f680;&#x1f680; &#x1f31f;持续更新的专栏《Spring 狂野之旅&#xff1a;从入门到入魔》 &a…