如何在记事本中保存 JavaScript 文件

2025年3月2日 | 阅读 12 分钟

JavaScript 概述及其在 Web 开发中的作用

JavaScript 是一种多功能的语言,在 Web 开发领域被广泛应用,用于为网站引入动态和交互性,并添加各种功能。JavaScript 是构成 Web 的三大主要组成部分之一,另外两个是 HTML 和 CSS。Web 开发人员可以使用这三种技术来创建引人入胜、设计直观的应用程序。

从根本上讲,JavaScript 是一种客户端 脚本语言。这意味着它运行在用户的设备上,通常在其互联网浏览器中,而不是在远程服务器上。因此,JavaScript 可以以编程方式实时修改网页内容,响应用户输入,并与 DOM 协作以维护最新的页面元素,而无需在必要时重新加载整个网页。

JavaScript 是一种基础语言,涉及 Web 开发的主要领域,包括表单验证、用户身份验证、动画、事件处理、Ajax 等等。它也是许多框架/库(如 AngularReactVue.js)的主要组成部分,支持开发最先进的 Web 应用程序,也影响了单页应用程序(SPA)。

将 JavaScript 代码保存在文件中以便重用的重要性

将 JavaScript 代码保存在文件中很重要,原因有很多,包括重用性和组织性等。因此,开发人员有时不会将所有 JavaScript 保存在主文档中,而是将其分散到单独的文件中,从而使他们能够编写模块化、可维护和可扩展的应用程序。

主要而言,将 JavaScript 存储在文件中可确保代码可重用。与直接在不同网页或组件上多次编写相同的代码不同,文章开发人员可以自己编写可重用的函数、类或模块,并将它们存储在单独的文件中。这些文件可以在应用程序的不同部分导入或添加,从而确保冗余大大减少并实现一致性。

同样,将 JavaScript 代码分段到文件中通过允许开发人员重用代码、正确缩进代码、添加注释等来方便维护。将庞大的代码库划分为较小的、易于理解的块有助于确保代码块易于阅读、调试或更新。开发人员可以专注于特定的代码行来发现它们的依赖关系,并且可以仅更改所需的部分,而不会影响整个应用程序。

此外,当所有 JS 代码都保存在文件中时,整个团队都可以协同工作。这有助于大家在不发生冲突的情况下协作完成项目。每个人都在处理自己项目的一部分,而不必担心干扰或打断他人。Git 等版本控制系统尤其有助于协作,并能解决以下问题以及减少代码冲突。

记事本作为简单文本编辑器的介绍

记事本是一个极简的编辑器,易于使用,是最初包含在 Windows 操作系统中的标准组件。尽管记事本不是为了复杂性而开发的,但它在创建不复杂的纯文本文件(如 .JS 文件)方面非常有用。因此,其简单的结构和少量功能使得该软件既可以用于编写少量信息,也可以用于编写代码示例。

与记事本的简洁和用户友好性相比,可以说它的最大优势在于易用性和简洁性。打开记事本时,用户会看到一个极简的界面,带有一个白色画布,就像他们以前喜欢的文本编辑器一样,您可以在其中开始输入任何内容。因此,记事本提供了一个简洁的编写环境,没有不必要的功能或复杂的菜单。因此,对于喜欢直接的编写环境且无干扰的人来说,它成为了最适合的编写空间。

此外,记事本具有一套基本的文本编辑功能(键入、删除、复制或粘贴文本),足以完成其主要任务。用户将熟悉快捷方式和菜单,因为它们都可以在熟悉的键盘上或包含的工具栏中找到。此外,记事本的功能还支持字体选择、文本对齐和自动换行等格式化选项,以便根据用户偏好更好地自定义文本外观。

记事本有很多优点。例如,它可以处理许多文件格式:.txt、.html 和 .js。用户可以以任何这些格式保存他们的工作,这使他们能够成为创建和编辑不同类型文档的动态工具。对于 JavaScript 程序员来说,记事本将是有益的,因为它保证了对短脚本甚至 JavaScript 脚本片段的便捷编程。

在不同操作系统上打开记事本的说明

Windows

方法 1

  • 可以通过这些功能使用“开始”菜单。
  • 首先,按下屏幕左下角的“开始”按钮。
  • 在“开始”菜单中按 Ctrl+R,然后在搜索栏中键入记事本。
  • 搜索结果将包含记事本应用程序,点击即可启动。

方法 2

  • 运行对话框情况:在这种情况下,用户输入现有可执行文件的名称来启动它。
  • 按住“Windows”+“R”键可调出“运行”对话框。
  • 记事本是一个应用程序的名称,因此在对话框中键入它,然后按“Enter”。
  • 事实上,记事本应用程序将立即开始运行,其图标将出现在您的桌面上。

方法 3

  • 简单的方法是使用文件资源管理器,在那里您会看到文件。
  • 通过单击任务栏上的文件夹图标或按键盘上的 `Windows` 键 + `E` 快捷键来查找文件资源管理器。
  • 导航到“C: 除了隐藏打包或压缩格式的文件外,还有另一个勒索软件的目标目录:“Windows\System32”。
  • 搜索“notepad.exe”文件并单击它。这将打开记事本。

macOS

方法 1

  • 选择性使用搜索聚光灯
  • 同时按下“Command”和“Spacebar”键以打开聚光灯搜索窗口。相同的键盘快捷键适用于 MacOS 和 iOS。
  • 键入“TextEdit”作为搜索词,然后按 Enter 键。
  • TextEdit 应用程序将在搜索结果列表中等待您。点击它即可打开。

注意:TextEdit 是 MacOS 上的默认文本编辑器,可以被认为是 Windows 记事本的等价物。

方法 2

  • 使用 Finder
  • 最快的进入 Finder 的方法是单击 Dock 上的笑脸图标或按“Command”+“N”键。
  • 找到名为“Applications”的文件夹。
  • 查找“TextEdit”应用程序并双击以打开 TextEdit。

Linux

方法 1:使用终端

  • 同时按下 control + alt + T 键启动终端应用程序。
  • 键入“edit”并按 Enter 键进入终端。
  • 因此,Gedit 将被启动,并在您的桌面上打开。

注意:记事本和记事本++ 是 Windows 文本编辑器,而 Gedit 是许多 Linux 发行版上的默认文本编辑器,与记事本类似。

方法 2

  • 这是因为我们使用文件管理器。
  • 通过启动器中的“文件”部分打开默认的文件管理器应用程序(例如 Nautilus - Ubuntu)。
  • 使用“Finder”实用程序导航到“Applications”或“Accessories”文件夹。
  • 搜索“Text Editor”/“Gedit”应用程序并双击以启动应用程序。

配置记事本用于 JavaScript 编辑的技巧

启用语法高亮

  • 突出显示代码中的语法可以通过为代码的各个部分着色来帮助读者处理它。
  • 在记事本中,在“语言”菜单下,选择“JavaScript”或“HTML”以开启 JavaScript 代码的语法高亮。
  • 但是,您可以扩展代码,通过插件或扩展来提供高级 JavaScript 编程的语法高亮。

调整字体和字号

  • 选择 Consolas 或 Courier New 等粗体等宽字体,它们的字符占用单个宽度,以获得最佳的代码对齐和可读性。
  • 我们可以根据您的喜好调整字号,这样既舒适,屏幕也不会显得过大或过小。

使用网页浏览器

  • 在当前世界范围内,最普遍的方法是在网络浏览器中打开 JavaScript 文件。你想达到这个目的,对吧?所以这就是为什么你必须双击这个文件,或者进入你的浏览器窗口,因为你将把它拖到那里。对于给定的事物,浏览器会这样做,并且给定的 JavaScript 也会做同样的事情。

使用开发者工具

  • 通常,主流浏览器都内置了开发工具。其中最强大的工具之一是控制台。它在任何浏览器中都可用,并且可以应用于通过控制台或直接写入渲染器来调试代码。就像那样,函数代码将在毫秒内打印在终端上,由“Enter”键表示。

服务器端执行

  • 使用服务器端 JavaScript (ssJS) 时,您还应考虑这些因素:使用级别(在网站内和针对远程用户)以及系统集成是否提供某些特权(例如,共享身份验证和数据库的系统)。
  • Node.js JavaScript 可以被称为一种多范式编程语言,它是一种高级的、动态类型的语言,来自 node.js 文件。js 运行时环境。

在记事本中编写 Javascript 代码

在记事本中生成 JavaScript 代码是一项简单的任务。我们首先应该创建一个新的文本文档,在其中编写代码,然后以正确的文件扩展名保存文件。

打开记事本

  • Windows 有一种简单的方法可以使用记事本;在 Windows 开始菜单搜索栏中键入即可打开,或从应用程序列表中获取。

创建新文档

  • 选择记事本的“文件”菜单,它位于记事本窗口的左上角。
  • 点击“新建”以创建新的排版文档。“新建”按钮用于选择创建新的空白文档。

编写我们的 JavaScript 代码

  • 将您的 JS 脚本的起点输入到记事本中。
  • 可以直接在文档中编写 JavaScript 代码,或者将从其他来源获取的代码粘贴到文档中。

保存文件

  • 最后,完成 JavaScript 代码的编写后,请确保将其保存为 .js 文件,以便它能正常作为 JavaScript 运行。
  • 从记事本窗口的左上角选择“文件”选项。
  • 执行“另存为”命令。选择该命令。
  • 选择文件名和位置:选择文件名和位置
  • 切换到您希望存储新的 JavaScript 文件的文件夹。
  • 为了正确识别您的 .js 文件,请为其命名一个相关的名称,并在后面加上 .js,例如 script.js。
  • 确保“保存类型”字段的值为“所有文件 (.)”,以便以 .js 扩展名保存文件。

执行我们的 JavaScript 代码

以这种方式保存 JavaScript 文件后,可以使用 Web 浏览器或 JavaScript 运行时环境来执行它。

启动 Web 浏览器,键入文件,然后向其中添加 <script> 标签,以查看 HTML 元素。例如

HTML

在 Web 浏览器中打开 HTML 文件以执行您的 JavaScript 代码。

遵循这些步骤,您可以有效地在记事本中编写和保存 JavaScript 代码。无论您是创建简单的脚本还是开发更复杂的应用程序,记事本都为 JavaScript 编码提供了一个轻量级且易于访问的环境。

在记事本中保存具有正确扩展名的 JavaScript 文件

在记事本中保存 JavaScript 文件时,确保它们具有正确的扩展名 ".js" 至关重要。

编写你的 JavaScript 代码

  • 首先在记事本中编写你的 JavaScript 代码。
  • 选择“另存为”:代码准备好后,单击菜单栏中的“文件”,然后选择“另存为”。

选择文件位置

  • 导航到您要保存 JavaScript 文件的目录。

命名你的文件

  • 为文件输入一个名称,然后加上 ".js" 来指定文件扩展名。例如,“myscript.js”。

选择文件类型

  • 确保“保存类型”下拉菜单设置为“所有文件 (.)”,以防止记事本添加默认文件扩展名。

保存你的文件

  • 最后,点击“保存”以具有正确扩展名的 JavaScript 文件保存。

文件扩展名的重要性

文件扩展名作为文件类型的标识符,并决定其行为。对于 JavaScript 文件,".js" 扩展名表示文件包含 JavaScript 代码。这种区分至关重要

程序识别

  • 文件扩展名帮助程序识别文件中的内容类型。浏览器将 ".js" 文件识别为 JavaScript 代码并相应地执行它们。

语法高亮

  • 文本编辑器和 IDE 使用文件扩展名来应用语法高亮,从而更容易阅读和编写代码。

互操作性

  • 一致的文件扩展名可确保不同系统和平台之间的互操作性。

组织和命名 JavaScript 文件的技巧

  • 使用描述性名称:选择有意义的名称,以描述 JavaScript 文件的角色或功能,例如,“utility_functions. js”或“form_validation. js”。
  • 遵循命名约定:编写代码字符串时,遵循 camelCase 等命名约定,使其一致且易于阅读。
  • 将文件组织在文件夹中:将相关的 JavaScript 文件收集起来,创建不同的文件夹,考虑功能或模块。这些关联有助于形成想法和过渡,直接影响项目的成果。
  • 版本控制:使用 Git 等版本控制系统来可靠地跟踪所有更改并管理 JavaScript 文件中的修订。
  • 避免特殊字符:最好避免在文件名中使用特殊字符或空格,以避免不同平台之间的各种兼容性问题。

在记事本中执行 JavaScript 代码的概述

有几种在记事本中执行 JavaScript 代码的方法

  • 使用 Web 浏览器:一种流行的方法包括在 Web 浏览器网络(网络和结构)中打开 JavaScript 文件。为此,您需要双击鼠标或将文件拖入 Web 浏览器窗口。浏览器将运行命令并尝试找到问题的答案。
  • 使用开发者工具:总的来说,最先进的 Web 浏览器都包含允许您通过控制台本身或使用控制台以两种主要方式调试 JavaScript 的工具。只需按一下“Enter”键,建议的代码片段就会相应地发送到控制台。
  • 服务器端执行:当您在服务器端(服务器端 JavaScript)使用 JavaScript 时,您会将所有处理和数据操作委托给服务器,该服务器从用户那里获取数据,并将处理后的数据发送到视图端(客户端 JavaScript)进行渲染。例如,通过使用 node.js,您可以运行您的代码。js 运行时环境。

在 HTML 文件中运行 JavaScript

要在嵌入 HTML 文件的 JavaScript 代码

  • 创建 HTML 文件:首先在记事本中编写一个 .html 文件(即,直接编写)。
  • 添加 Script 标签:在闭合标签和打开标签之间交替;例如,<script> 标签可以放置在 <html> 标签之间。可以直接包含在 <? ?> 标签中,或通过 src 属性 并指向外部 JS 文件。
  • 在浏览器中打开:代码现在就在那里了;因此,要让 HTML 文件在浏览器中显示,请打开它。程序然后将执行存在于网页中的 JavaScript 代码。

JavaScript 代码测试和调试指南

在记事本中测试和调试 JavaScript 代码时

  • 使用浏览器开发者工具:浏览器开发者工具,如控制台、调试器和网络检查器,可以方便地调试 JavaScript 代码,只要您需要使用任何浏览器。
  • 添加 Console Log 语句:在代码的特定位置添加控制台日志。日志() 语句可能会有所帮助,因为它们会显示当前帧的情况,并且可能进行调试。
  • 检查语法错误:可以使用在线验证器和 linting 工具作为语法检查器来检查语法错误。此外,请注意代码是最低可接受的。
  • 逐步执行代码:为了减少识别和修复现有错误的工作量,请使用开发者工具中的调试器并采用逐步模式使您的代码可调试,这样结果实际上不是错误而是正确的行为。
  • 测试跨浏览器兼容性:代码总是需要使用多个浏览器进行验证,以确认它能够正常运行而不会损坏,并且与各种设备和系统兼容。

结论

总而言之,记事本可以作为开始和维护 JavaScript 编码的平台,具有低复杂性和易用性。通过正确实施本指南中包含的步骤,用户将能够将 JavaScript 用于各种目的,例如 Web 开发和自动化任务。

从编辑记事本设置到将 Web 标签和代码插入 HTML 页面,再到在浏览器或独立环境中执行代码,保存 JavaScript 文件将揭示无限的可能性。无论您是刚开始学习基础知识的初学者,还是正在精炼技能的专家,记事本都可能成为您程序员生涯中的重要工具。