当前位置： 首页 > news >正文

JavaScript(一)---【js的两种导入方式、全局作用域、函数作用域、块作用域】

news 2026/5/12 20:05:59

一.JavaScript介绍

1.1什么是JavaScript

JavaScript简称“js”，js与java没有任何关系。

js是一种“轻量级、解释型、面向对象的脚本语言”。

二.JavaScript的两种导入方式

2.1内联式

在HTML文档中使用<script>标签直接引用。

    <script>console.log("Hello,world,内联样式")</script>

2.2外联样式

在HTML中使用<script>标签的“src”属性引入

    <script src="./JS/myscript.js"></script>

在这里我有一个JS文件夹,里面有一个“myscript.js”名字的js文件

文件内容如下：

console.log("Hello,world,外联样式");

效果：

三.js的变量作用域

3.1全局作用域

在“函数之外”定义的变量拥有“全局作用域”，被定义的变量叫作“全局变量”

var carName = "porsche";// 此处的代码可以使用 carNamefunction myFunction() {// 此处的代码也可以使用 carName
}

而“全局变量”可以在JS程序中的任何地方被访问，例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>var x = 100;console.log("x在第一个script标签中被访问",x)function pt(){console.log("x在pt函数中被访问",x)}pt();</script><script>console.log("x在第二个script标签中被访问",x)</script>
</body>
</html>

效果：

可见全局变量哪怕是在不同的<script>标签中，仍然可以被访问。

那么全局变量在被调用位置的后面，还能不能访问呢？如下所示：

    <script>console.log("x在最前面script标签中被访问",x)</script><script>var x = 100;console.log("x在第一个script标签中被访问",x)</script>

效果：

报错了，显示：“x没有被定义”。

这说明作用域只在被定义的开始位置到整个HTML文档结束，这与其它编程语言中的变量作用域是类似的，如果学习过(C/C++、python等等)应该很好理解。

3.2函数(局部)作用域

在“函数”定义的变量拥有”函数作用域“，被叫作“局部变量”

例如：

// 此处的代码不可以使用 carNamefunction myFunction() {var carName = "porsche";// code here CAN use carName
}// 此处的代码不可以使用 carName

 很好理解吧，就跟编程语言中的局部作用域是一样的。

“局部变量只能在被定义的函数中访问”

例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>function sample(){var x = 100;console.log("x在sample函数中被调用",x);}sample();console.log("x在script标签中被调用",x);</script>
</body>
</html>

效果：

可以看到在<script>标签中调用x报错，提示“没有定义x”。

这说明x是一个局部变量。

3.3块作用域

块作用域是ES2015新订的规则。

块作用域指的是在“{}(花括号)”中定义的变量，具有块作用域，在块外无法访问。

值得注意的是，使用“var”在块内定义变量，仍然可以在块外访问，只有使用“let”定义的变量才不可以在块外访问。

例如：

{ 
  var x = 10; 
}
// 此处可以使用 x

比如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>{var x = 10;let y = 100;}console.log("块外访问var定义的x",x);console.log("块外访问let定义的y",y);</script>
</body>
</html>

效果：

看到使用let定义的变量y具有“块作用域”

3.4重新定义变量的问题【重要】

使用var两次定义变量，第二次定义在某个块中，会造成值改变，因为var默认是全局变量，哪怕在块中。

例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>var x = 100;console.log("第一次访问var定义的x",x);{var x = 10;}console.log("第二次访问var定义的x",x);</script>
</body>
</html>

效果：

可以看到全局变量x在块内被修改了！！

但如果，我们在块中使用“let”定义x，那么就可以解决这个问题了，因为let定义的变量具有块作用域，不会改变全局变量x

    <script>var x = 100;console.log("第一次访问var定义的x",x);{let x = 10;}console.log("第二次访问var定义的x",x);</script>

效果：

相关文章：

JavaScript(一)---【js的两种导入方式、全局作用域、函数作用域、块作用域】

一.JavaScript介绍 1.1什么是JavaScript JavaScript简称“js”&#xff0c;js与java没有任何关系。 js是一种“轻量级、解释型、面向对象的脚本语言”。 二.JavaScript的两种导入方式 2.1内联式 在HTML文档中使用<script>标签直接引用。 <script>console.log…...

编程日记 2024/3/31 5:46:27

部署云原生边缘计算平台kubeedge

文章目录 1、kubeedge架构2、基础服务提供 负载均衡器 metallb2.1、开启ipvc模式中的strictARP2.2、部署metalb2.2.1、创建IP地址池2.2.2、开启二层转发&#xff0c;实现在k8s集群节点外访问2.2.3、测试 3、部署cloudcore3.1、部署cloudcore3.2、修改cloudcore的网络类型 4、部…...

编程日记 2024/3/31 5:43:24

Java设计模式：单例模式详解

设计模式&#xff1a;单例详解 文章目录 设计模式&#xff1a;单例详解一、单例模式的原理二、单例模式的实现推荐1、饿汉模式2、静态内部类 三、单例模式的案例四、单例模式的使用场景推荐总结 一、单例模式的原理 单例模式听起来很高大上&#xff0c;但其实它的核心思想很简…...

编程日记 2024/3/31 5:41:22

Qt5.14.2 定时器黑魔法，一键唤醒延时任务

在图形界面程序的世界里&#xff0c;有这么一个需求无处不在:在特定的时间间隔后&#xff0c;执行一段特殊的代码。比如说30秒后自动保存文档、500毫秒后更新UI界面等等。作为资深Qt程序员&#xff0c;我相信各位一定也曾为实现这种"延时任务"而绞尽脑汁。今天&#…...

编程日记 2024/3/31 5:40:21

C++项目——集群聊天服务器项目(九）客户端异常退出业务

服务器端应检测到客户端是否异常退出&#xff0c;因此本节来实现客户端异常退出&#xff0c;项目流程见后文 一、客户端异常退出业务流程 &#xff08;1&#xff09;在业务模块定义处理客户端异常退出的函数 &#xff08;2&#xff09;集群聊天服务器项目(八&#xff09;提到…...

编程日记 2024/3/31 5:39:20

STM32CubeIDE基础学习-HC05蓝牙模块和手机通信

STM32CubeIDE基础学习-HC05蓝牙模块和手机通信 文章目录 STM32CubeIDE基础学习-HC05蓝牙模块和手机通信前言第1章 硬件连接第2章 工程配置第3章 代码编写3.1 手机指令控制LED 第4章 实验现象总结 前言 前面的文章学习了串口通过轮询和中断的简单使用方法&#xff0c;现在就来用…...

编程日记 2024/3/31 5:37:18

npm mongoose包下载冲突解决之道

我在新电脑下载完项目代码后,运行 npm install --registryhttps://registry.npm.taobao.org 1运行就报错&#xff1a; npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: lowcode-form-backend1.0.0 npm …...

编程日记 2024/3/31 5:36:17

26. UE5 RPG同步面板属性（二）

在上一篇&#xff0c;我们解析了UI属性面板的实现步骤&#xff1a; 首先我们需要通过c去实现创建GameplayTag&#xff0c;这样可以在c和UE里同时获取到Tag创建一个DataAsset类&#xff0c;用于设置tag对应的属性和显示内容创建AttributeMenuWidgetController实现对应逻辑 并且…...

编程日记 2024/3/31 5:35:15

五、postman基础使用案例

postman基础使用 相关案例【传递查询参数】【提交表单数据】【提交JSON数据】 注&#xff1a;postman⼀款⽀持调试和测试的⼯具&#xff0c;开发、测试⼯程师都可以使⽤。方法一般统一为&#xff1a;方法→请求头→请求体→断言 相关案例 【传递查询参数】 访问TPshop搜索商品的…...

编程日记 2024/3/31 5:31:11

Git合并利器：Vimdiff使用指南

使用 vimdiff 作为 Git 的合并工具确实可能会让新手感到困惑&#xff0c;但它是一个功能强大的工具&#xff0c;一旦掌握了它&#xff0c;就可以非常高效地进行代码合并和比较。以下是一个简短的教程&#xff0c;旨在帮助理解 vimdiff 的基本用法以及如何利用它来进行 Git 合并…...

编程日记 2024/3/31 5:30:10

阿里云2核4G服务器租用价格_30元3个月_165元一年_199元

阿里云2核4G服务器租用优惠价格&#xff0c;轻量2核4G服务器165元一年、u1服务器2核4G5M带宽199元一年、云服务器e实例30元3个月&#xff0c;活动链接 aliyunfuwuqi.com/go/aliyun 活动链接如下图&#xff1a; 阿里云2核4G服务器优惠价格 轻量应用服务器2核2G4M带宽、60GB高效…...

编程日记 2024/3/31 5:26:06

＜QT基础(2)＞QScrollArea使用笔记

项目需要设置单个检查的序列图像预览窗口&#xff0c;采用QScrollArea中加入QWidget窗口&#xff0c;每个窗口里面用Qlabel实现图像预览。 过程涉及两部分内容 引入QWidget 引入label插入图像&#xff08;resize&#xff09; 引入布局 组织 scrollArea内部自带Qwidget&#…...

编程日记 2024/3/31 5:25:05

springboot企业级抽奖项目业务四 (缓存预热)

缓存预热 为什么要做预热: 当活动真正开始时&#xff0c;需要超高的并发访问活动相关信息 必须把必要的数据提前加载进redis 预热的策略: 在msg中写一个定时任务 每分钟扫描一遍card_game表 把(开始时间 > 当前时间)&& (开始时间 < 当前时间1分钟)的活动及相…...

编程日记 2024/3/31 5:22:02

opejdk11 java 启动流程 java main方法怎么被jvm执行

java启动过程 java main方法怎么被jvm执行 java main方法是怎么被jvm调用的 1、jvm main入口 2、执行JLI_Launch方法 3、执行JVMInit方法 4、执行ContinueInNewThread方法 5、执行CallJavaMainInNewThread方法 6、创建线程执行ThreadJavaMain方法 7、执行ThreadJavaMain方法…...

编程日记 2024/3/31 5:20:01

link 样式表是否会阻塞页面内容的展示？取决于浏览器，edge 和 chrome 会，但 firefox 不会。

经过实测&#xff1a; 在 head 中 link 一个 1M 大小的样式表。设置网络下载时间大概为 10 秒。 edge 和 chrome 只有在下载完样式表后&#xff0c;页面上才会出现内容。而 firefox 可以直接先显示内容&#xff0c;然后等待样式表下载完成后再应用样式。 DOMContentLoaded 事…...

编程日记 2024/3/31 5:19:00

uniapp对接极光推送(国内版以及海外版)

勾选push&#xff0c;但不要勾选unipush 国内版 网址&#xff1a;极光推送-快速集成消息推送功能,提升APP运营效率 (jiguang.cn) 进入后台&#xff0c;并选择对应应用开始配置 配置安卓包名 以及ios推送证书&#xff0c;是否将生产证书用于开发环境选择是 ios推送证书…...

编程日记 2024/3/31 5:17:59

智慧城市数字孪生，综合治理一屏统览

现代城市作为一个复杂系统&#xff0c;牵一发而动全身&#xff0c;城市化进程中产生新的矛盾和社会问题都会影响整个城市系统的正常运转。智慧城市是应对这些问题的策略之一。城市工作要树立系统思维&#xff0c;从构成城市诸多要素、结构、功能等方面入手&#xff0c;系统推进…...

编程日记 2024/3/31 5:16:58

在Java中对SQL进行常规操作的通用方法

SQL通用方法 一、常规方法增删改查二、具体优化步骤1.准备工作2.getcon()方法&#xff0c;获取数据库连接对象3.closeAll()方法&#xff0c;关闭所有资源4.通用的增删改方法5.通用的查询方法6.动态查询语句 总结 一、常规方法增删改查 在常规方法中&#xff0c;我们在Java中对…...

编程日记 2024/3/31 5:15:57

JavaSE day16笔记 - string

第十六天课堂笔记 学习任务 Comparable接口★★★★ 接口 : 功能的封装 > 一组操作规范 一个抽象方法 -> 某一个功能的封装多个抽象方法 -> 一组操作规范 接口与抽象类的区别 1本质不同 接口是功能的封装 , 具有什么功能 > 对象能干什么抽象类是事物本质的抽象 &…...

编程日记 2024/3/31 5:14:55

java将文件转成流文件返回给前端

环境&#xff1a;jdk1.8&#xff0c;springboot2.5.3,项目端口号&#xff1a;9100 1.待转换的文件 一、路径 二、文件内容 2.controller中代码 package com.example.pdf.controller;import com.example.pdf.service.GetFileStreamService; import org.springframework.web.b…...

编程日记 2024/3/31 5:13:54

LaMa图像修复：基于傅里叶卷积的大掩码鲁棒修复方法

1. 项目概述&#xff1a;这不是又一个“修图工具”&#xff0c;而是一次对图像修复底层逻辑的重新定义LaMa——全称Large Mask Inpainting&#xff0c;直译是“大区域掩码图像修复”&#xff0c;但它的实际能力远超字面。我第一次在CVPR 2022论文里看到它时&#xff0c;第一反应…...

编程新知 2026/5/12 19:56:36

别再手动造数据了！用Python的imgaug库5分钟搞定深度学习图像增强（附关键点/边界框处理避坑指南）

深度学习图像增强实战&#xff1a;用imgaug打造高效数据流水线 在计算机视觉项目中&#xff0c;数据增强是提升模型泛化能力的关键步骤。传统手动处理方式不仅耗时耗力&#xff0c;还难以保证处理一致性。本文将深入探讨如何利用Python的imgaug库快速构建自动化图像增强流程&am…...

编程新知 2026/5/12 19:50:00

如何在10分钟内完成1小时视频硬字幕提取：望言OCR完整指南

如何在10分钟内完成1小时视频硬字幕提取&#xff1a;望言OCR完整指南 【免费下载链接】SubtitleOCR 快如闪电的硬字幕提取工具。仅需苹果M1芯片或英伟达3060显卡即可达到10倍速提取。A very fast tool for video hardcode subtitle extraction 项目地址: https://gitcode.com…...

编程新知 2026/5/12 18:52:19

从SolidWorks到Simulink：手把手教你用Simscape Multibody Link搭建你的第一个虚拟样机

从SolidWorks到Simulink&#xff1a;手把手教你用Simscape Multibody Link搭建你的第一个虚拟样机 虚拟样机技术正在彻底改变传统机电系统的开发流程。想象一下&#xff0c;你刚刚在SolidWorks中完成了一个精巧的自动门闭锁装置的设计&#xff0c;现在不需要花费数周时间加工金…...

编程新知 2026/5/12 16:24:10

开发预告：关于改造Hermes-agent这件事，我想说的比上一篇多得多

先声明一点&#xff1a;这不是什么技术布道&#xff0c;更不是产品软文。这篇文章里写的东西&#xff0c;要么是我花了真金白银和睡眠时间换来的&#xff0c;要么是我接下来要去踩的坑。你要觉得哪里不对&#xff0c;直接怼。你要觉得哪里说到你心坎里了&#xff0c;欢迎一起搞…...

编程新知 2026/5/12 15:00:03

从零到一：Lmbench 性能测试实战与结果深度解读

1. 为什么你需要Lmbench性能测试 第一次听说Lmbench时&#xff0c;我也和大多数新手一样困惑&#xff1a;系统性能测试工具那么多&#xff0c;为什么非要选这个老古董&#xff1f;直到在服务器部署项目时连续遇到三次性能瓶颈&#xff0c;我才真正理解它的价值。那次我们用某款…...

编程新知 2026/5/12 13:56:47

地铁站内人员危险情况检测人员跌倒检测数据集VOC+YOLO格式4369张2类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;4369 标注数量(xml文件个数)&#xff1a;4369 标注数量(txt文件个数)&#xff1a;4369 …...

编程新知 2026/5/12 13:52:31

深度解构：指纹浏览器底层隔离与Python高并发RPA，如何重塑电商矩阵自动化架构？

大家好&#xff0c;我是林焱&#xff0c;一名专注电商底层业务逻辑与 RPA 自动化架构定制的独立开发者。 在 CSDN 的各个技术板块中&#xff0c;关于爬虫与反爬虫、并发调度、以及客户端架构的讨论一直是热点。而将这些技术综合应用到极致的领域之一&#xff0c;就是当下极度内…...

编程新知 2026/5/12 13:11:57

外汇延迟套利检测系统演进：从规则到AI的行为博弈

1. 项目概述&#xff1a;当速度优势不再是护城河 在电子外汇交易的世界里&#xff0c;速度套利一直是一个古老而又充满技术魅力的游戏。它的核心逻辑简单到近乎纯粹&#xff1a;如果你能比你的交易对手更快地获取到市场价格变动的信息&#xff0c;你就能在对手更新其报价之前&a…...

编程新知 2026/5/12 12:54:20

PHPStudy本地开发，用上Redis 5的Stream和HyperLogLog到底有多香？

PHPStudy本地开发中Redis 5的Stream与HyperLogLog实战指南 Redis作为高性能的内存数据库&#xff0c;在PHP开发中扮演着重要角色。当我们在本地开发环境使用PHPStudy时&#xff0c;默认安装的Redis 3.0.504版本功能有限&#xff0c;无法体验Redis 5引入的强大新特性。本文将深…...

编程新知 2026/5/12 12:34:36