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

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

news 2026/5/12 22:02:57

一.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

Poppins字体终极指南：免费开源的多语言几何无衬线字体完全解析

Poppins字体终极指南&#xff1a;免费开源的多语言几何无衬线字体完全解析 【免费下载链接】Poppins Poppins, a Devanagari Latin family for Google Fonts. 项目地址: https://gitcode.com/gh_mirrors/po/Poppins 如果你正在寻找一款既现代又专业的免费字体&#xff…...

编程新知 2026/5/12 21:43:28

Steam Cron Studio：可视化配置生成器，为AI代理打造Steam自动化任务

1. Steam Cron Studio&#xff1a;一个为AI代理量身定制的Steam自动化配置生成器如果你是一个Steam重度用户&#xff0c;同时又对AI代理&#xff08;AI Agent&#xff09;和自动化工具感兴趣&#xff0c;那么你很可能和我一样&#xff0c;曾经被一个看似简单实则繁琐的问题困扰…...

编程新知 2026/5/12 20:24:31

Gemma 4大模型实战：从架构解析到生产部署与微调

1. 项目概述&#xff1a;为什么我们需要深入理解Gemma 4&#xff1f;如果你最近在关注开源大模型领域&#xff0c;一定绕不开“Gemma”这个名字。从年初Gemma 2B/7B的惊艳亮相&#xff0c;到如今关于下一代架构的种种猜测&#xff0c;Google的Gemma系列正以一种稳健而有力的姿态…...

编程新知 2026/5/12 19:34:49

NomNom终极指南：3个技巧让你轻松掌控《无人深空》存档

NomNom终极指南&#xff1a;3个技巧让你轻松掌控《无人深空》存档 【免费下载链接】NomNom NomNom is the most complete savegame editor for NMS but also shows additional information around the data youre about to change. You can also easily look up each item indi…...

编程新知 2026/5/12 18:46:14

AI代理技术如何赋能新生儿护理：从数据记录到个性化模式学习

1. 项目概述&#xff1a;当AI成为新手父母的“第二大脑”孩子出生的头三个月&#xff0c;被无数过来人称为“生存模式”。这不是夸张。在那些昼夜颠倒、睡眠被切割成碎片、大脑因极度疲惫而停摆的日子里&#xff0c;新手父母面对的不仅仅是新生儿的啼哭&#xff0c;更是一场信息…...

编程新知 2026/5/12 18:28:43

多语言AI Agent的构建：跨语言理解与任务执行

多语言AI Agent的构建：跨语言理解与任务执行 本文面向有一定大模型应用开发基础的工程师，从原理、架构、实战三个维度完整讲解可落地的多语言AI Agent构建方案，全文约11000字，代码可直接运行。 引言 痛点引入 你是否遇到过这些场景？ 运营跨境电商平台时，每个语言站点要…...

编程新知 2026/5/12 17:33:02

HoRain云--PHP日期格式化函数date()详解与最佳实践

&#x1f3ac; HoRain 云小助手&#xff1a;个人主页 ⛺️生活的理想&#xff0c;就是为了理想的生活! ⛳️ 推荐 前些天发现了一个超棒的服务器购买网站&#xff0c;性价比超高&#xff0c;大内存超划算&#xff01;忍不住分享一下给大家。点击跳转到网站。 目录 ⛳️ 推荐 …...

编程新知 2026/5/12 16:51:26

Windows APK安装工具终极指南：轻松在电脑上安装Android应用

Windows APK安装工具终极指南&#xff1a;轻松在电脑上安装Android应用 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 您是否曾经希望在Windows电脑上直接安装Android…...

编程新知 2026/5/12 14:40:09

Python轻量级Web框架fws：从核心原理到RESTful API实战

1. 项目概述&#xff1a;一个轻量级、可扩展的Web服务框架在构建现代Web应用时&#xff0c;我们常常面临一个选择&#xff1a;是使用功能全面但可能略显臃肿的成熟框架&#xff0c;还是从零开始&#xff0c;只为满足特定需求而构建一个精简的解决方案&#xff1f;前者提供了开箱…...

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

三步彻底解决Zotero中文文献管理的三大难题：茉莉花插件完整指南

三步彻底解决Zotero中文文献管理的三大难题&#xff1a;茉莉花插件完整指南 【免费下载链接】jasminum A Zotero add-on to retrive CNKI meta data. 一个简单的Zotero 插件&#xff0c;用于识别中文元数据 项目地址: https://gitcode.com/gh_mirrors/ja/jasminum 你是否…...

编程新知 2026/5/12 8:30:35