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

JavaScript青少年简明教程：开发工具与运行环境

news 来源：原创 2024/9/22 6:42:51

JavaScript青少年简明教程：开发工具与运行环境

JavaScript是一种基于对象和事件驱动且具有安全性能的脚本语言。使用它和HTML结合可以开发出交互式的Web页面。

脚本语言是为了缩短传统的编写-编译-链接-运行过程而创建的计算机编程语言。脚本通常是解释执行而非编译，脚本代码可以由浏览器解释执行。在许多方面，高级编程语言和脚本语言之间互相交叉，二者之间没有明确的界限。

学习JavaScript的实验环境有很多选择，以下是一些常用的实验环境：

☆浏览器控制台：浏览器（例如 Google Chrome、Mozilla Firefox、Microsoft Edge 等）本身提供了直接运行 JavaScript 代码的控制台。一般电脑系统中都会带有浏览器。打开浏览器按下 F12打开开发者工具。转到 "Console" 选项卡，可以直接输入和执行 JavaScript 代码。

打开一个浏览器，建议在地址栏中输入about:blank，按下Enter键（回车键），就可以看到一个空白页面——这样创建一个干净、无干扰的环境来进行 JavaScript 开发或测试，再按下F12键，就打开了浏览器的控制台（console），现在你就可以学习JavaScript了。以Microsoft Edge为例：

进入控制台以后，就可以在提示符后输入代码，然后按回车（Enter键），代码就会执行。如果按Shift + Enter键，就是代码换行，不会触发执行，可以输入多行语句，直至回车执行。

顺便提示：在浏览器控制台中，点击控制台右上角的 "清除控制台" 按钮，或者按下快捷键Ctrl+L，或者使用 console.clear() 方法的作用，是快速清空控制台，以便查看最新的日志信息或进行新的测试。清除控制台不会影响代码的执行或应用程序的状态，它只是清除了显示的输出。

浏览器的开发者工具使用介绍https://blog.csdn.net/cnds123/article/details/120822401

如何编辑运行HTML网页文件（HTML编辑工具使用介绍）https://blog.csdn.net/cnds123/article/details/113831256

浏览器控制台调试代码和JavaScript控制台方法介绍https://blog.csdn.net/cnds123/article/details/132332849

为什么浏览器控制台（Console）运行JavaScript代码有时会出现“undefined”？https://blog.csdn.net/cnds123/article/details/128014970

☆使用Node.js：Node.js是一个基于Chrome V8引擎的JavaScript运行时环境，可以在服务器端运行JavaScript代码。你可以在Node.js的官方网站上下载并安装Node.js，然后使用命令行界面运行JavaScript文件。安装了 Node.js可以搭建一个本地开发环境。

作为初学者一般不要这种方式。对Node.js 感兴趣的读者可见“Node.js 新手入门” https://blog.csdn.net/cnds123/article/details/104559497

☆创建HTML文件试验与测试JavaScript代码

可以安装了代码编辑器（如Visual Studio Code、Sublime Text等）或集成开发环境IDE（如WebStorm、HBuilderX等），也可以在这些工具上编写JavaScript代码并结合Node.js或浏览器来运行。

特别说明HBuilderX 是一款功能强大、使用便捷的开发工具，特别适合前端开发和移动应用开发，支持多语言和框架：

多种编程语言：支持 HTML、CSS、JavaScript、TypeScript、Python、PHP 等多种编程语言。

主流框架：支持 Vue.js、React、Angular 等主流前端框架，以及 uni-app 等移动应用开发框架。

因此，可以使用HBuilderX 编写并测试 JavaScript 代码 ，为感兴趣的读者提供官方网址HBuilderX-高效极客技巧

对这些就不做过多介绍了。

也可以使用Windows的记事本（Notepad）编写JavaScript代码。通过在文本编辑器创建一个HTML文件，将JavaScript代码放在<script>标签中。下面介绍这种方式。

打开Windows的记事本，编写代码如下内容：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>JavaScript 测试</title></head><body><p>JavaScript 示例：在网页的script标签内直接嵌入JavaScript代码</p><!-- 这里是你的JavaScript代码 --><script>alert ('Hello, JavaScript!');  // JavaScript代码</script></body>
</html>

说明，其中：

<html lang="en"> 中的 lang 属性用于指定文档的主要语言，这个属性可以帮助屏幕阅读器、翻译工具和搜索引擎更好地理解和处理页面内容。

lang="en" 指定文档的语言是英语

lang="zh" 指定文档的语言是中文

lang="fr" 指定文档的语言是法语，等等

提示： lang 属性不是强制性的，但推荐使用它来提高网页的可访问性和SEO（Search Engine Optimization：搜索引擎优化）。

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 是一个HTML的<meta>标签，特别用于控制移动设备的页面呈现，没有这一句，许多移动设备可能会将页面渲染得太小或太大，导致用户体验不佳。在面向桌面设备的特定场景下，这个标签不是必须的。

alert()功能是令/指示浏览器显示一个带有可选的信息的对话框，并等待用户离开该对话框。JavaScript对大小写是敏感的，所以alert()必须全部小写。

用Windows的记事本编辑保存html文件，保存这个文件到合适的位置，确保文件扩展名是“.html”。可参见下图：

双击HTML文件名，它将会使用默认的网页浏览器打开。或

右击网页文件（.html文件）名，使用快捷菜单打开，具体操作参见下图：

HTML文件的结构简介

 一个超文本文件以<html>标签开始，用</html>结束，其标记的内容分为“头部”和“主体”两部分。“头部”以<head>标签开始，用</head>标签结束，在这两个标签之间是用于描述网页属性的各种标签，例如：title、style、link等。“主体”以<body>标签开始，用</body>标签结束，在这两个标签之间是网页的主体内容。关于HTML的元素、标签和属性含义可见 https://blog.csdn.net/cnds123/article/details/125745562

HTML注释

<!—注释内容-->是HTML注释，“<!--”是注释的起始符号，“-->”是注释的结束符号，在这两个符号之间的内容是注释。浏览器在加载HTML文件时会忽略其中的注释。

【顺便指出，CSS注释以 /* 开始，以 */ 结束。这两个标记之间的任何内容都会被浏览器忽略，不会被解释为CSS代码。】

在HTML中，每个标签（HTML元素）都可以被视为一个对象。例如，<body>、<div>、<img>等都是HTML对象。这些对象通常具有属性（例如，<img>标签的src、height、width等属性），事件（例如，鼠标点击事件click），以及方法（例如，JavaScript中的document.createElement()方法可以创建一个新的HTML元素）。这种理解基于HTML DOM（文档对象模型）的概念。DOM将HTML文档视为一个由多个互相连接的对象组成的树状结构，每个对象代表文档中的一个部分。这种模型允许我们使用脚本语言（如JavaScript）来操作HTML文档，改变文档的结构、样式或内容。

特别提示：有关浏览器脚本代码和网页的关系，还有很多可学的。我们这里不要过多分散自己的注意力，主要是针对 JavaScript 语言本身的。

<script> 标签是 HTML 中用于嵌入或引用 JavaScript 代码的标签（tab），在网页中嵌入JavaScript代码有两种方式：一种是使用script标签在网页中直接嵌入JavaScript代码；另一种是把JavaScript程序代码写在一个单独的文件中，然后通过script标签将JavaScript文件引入到网页文件中，要确保在<script>标签的src属性中指定的路径是正确的，如果路径错误，浏览器将无法加载JavaScript文件，导致网页的功能不正常，如果路径错误，浏览器将无法加载JavaScript文件，导致网页的功能不正常。

在网页中直接嵌入JavaScript程序代码的格式如下：

  <script >

       JavaScript程序代码

  </script>

JavaScript程序代码位于<script>和</script>两个标签之间。

可以参见前面的示例。

还可以将JavaScript代码放在单独的.js文件中，然后通过<script>标签引入，可以使HTML文档结构更清晰，代码更易于管理。

在网页中引入JavaScript文件的格式如下：

在 HTML 中，可以通过 <script> 标签的 src 属性（attribute）来指向外部的 JavaScript 文件。HTML指向外部 JavaScript 文件的语法：

<script src="路径/文件.js"></script>

修改前面的例子，将JavaScript代码放到另一个文件中，在HTML文件中通过<script> 标签的 src 属性引入，因此需要建立两个文件。

HTML文件内容改为：

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JavaScript 测试2</title></head><body><p>JavaScript 示例：通过script标签将JavaScript文件引入到网页文件中</p><!-- 这里是你的JavaScript代码 --><script src="script.js"></script></body>
</html>

JavaScript代码文件，其内容如下：

alert ('Hello, JavaScript!');  // JavaScript代码

我这里保存文件名为script.js，将此文件和HTML文件保存同一个文件夹（目录）中——这可以避免出现路径问题，关于路径后面将介绍。

一般来说，只有最简单的脚本代码才嵌入到 HTML 中，更复杂的脚本代码存放在单独的文件中。不要纠结上面这个示例的脚本代码很简单，为何分离出来，目的让初学者减少分神快速直观认识，感性了解，减少不必要的挫折感，增强深入学习的动力和信心。

将JavaScript代码写在单独的.js文件中，然后通过<script>标签引入到HTML中，是一种常见且推荐的做法，因为它有助于保持代码的组织性和可维护性。不过，使用这种方法时，有几个重要的注意事项：

1. 文件路径正确

确保在<script>标签的src属性中指定的路径是正确的。如果路径错误，浏览器将无法加载JavaScript文件，导致网页的功能不正常。

例如：

<script src="js/script.js"></script>  <!-- 假设script.js位于当前目录下的js文件夹中 -->

路径可以是相对路径或绝对路径。

相对路径是相对于当前网页文件的路径，可以使用相对于当前文件的目录的路径表示。例如，如果 JavaScript 文件与网页文件位于同一目录下，可以使用相对路径来引用它：

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

如果 JavaScript 文件位于当前文件的上一级目录中，可以使用相对路径来引用它：

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

绝对路径是指完整的路径，从根目录开始，可以直接指向 JavaScript 文件的位置。例如，如果 JavaScript 文件位于网站的根目录下的 js 文件夹中，可以使用绝对路径来引用它：

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

绝对路径通常以斜杠 / 开头，表示从网站的根目录开始的路径。相对路径根据当前文件的位置而定，不以斜杠开头。

选择相对路径还是绝对路径取决于你的需求和项目结构。相对路径更具灵活性，适用于项目内部文件之间的引用。绝对路径在引用外部文件或跨子域名加载文件时更为方便。请根据你的具体情况选择适当的路径类型。

2. 加载顺序

要附加多个.js脚本文件，请使用多个标签。

JavaScript文件的加载和执行顺序对网页的功能有重要影响。如果一个脚本依赖于另一个脚本中定义的变量或函数，则必须正确地安排它们的加载顺序。

例如：

<script src="js/ script1.js "></script>  <!-- 首先script1.js  -->

<script src="js/script2.js"></script>  <!-- 然后加载依赖于script1.js的脚本script2.js -->

3. 文档加载状态

通常，JavaScript代码需要在整个文档加载完毕后执行，尤其是当脚本需要访问或修改DOM元素时。使用defer属性可以保证脚本在文档解析完成后、DOMContentLoaded事件触发前执行。

例如：

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

4. 异步加载

如果脚本不依赖于其他脚本，也不依赖于DOM的完全加载，可以使用async属性使脚本异步加载。这样可以加快页面加载速度，因为它不会阻塞DOM的解析。

例如：

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

可以使用<script>标签中async异步加载外部脚本、defer延迟执行外部脚本，这两个属性控制外部脚本文件的加载和执行时机，但只对外部脚本文件有效。

5. 缓存问题

为了避免浏览器缓存旧的脚本文件，可能需要在文件名后添加版本号或时间戳。

例如：

<script src="js/script.js?v=1.2"></script>

6. 安全性考虑

从外部源引入脚本时，特别是从CDN加载公共库，应确保源是可信的。此外，为防止内容篡改，可以使用子资源完整性（SRI）。

例如：

<script src="https://example.com/library.js" integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9DGPtSwiD1W9Q8Q9SQWj+drz5X…" crossorigin="anonymous"></script>

7. 跨域问题

当从外部域名加载脚本时，需要确保服务端支持跨域请求，特别是当你的脚本需要进行跨域API调用时。如果 JavaScript 文件从不同的域名或子域名加载，可能会遇到 CORS（跨域资源共享）问题。从第三方域名加载的 JavaScript 文件需要服务器设置适当的 CORS 头。

8. 性能优化

尽可能将脚本放在页面底部或使用defer属性，以免阻塞页面的渲染。此外，压缩JavaScript文件可以减少传输时间。

特别提示，初学者重点了解1，其他各项大体知道即可，随着学习认识的提高回头看可能豁然开朗或更深入的理解认识。

下面给出一个模板示例，这是一个简单的 HTML 页面文件，其中包含一个按钮和一个 JavaScript 函数 sayHello。当按钮被点击时，给出一条信息"Hello from JavaScript!"。

源码如下：

<!DOCTYPE html>  
<html lang="zh">  
<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>JavaScript Test</title>  
</head>  
<body>  <h1>Hello, JavaScript!</h1>  <button onclick="sayHello()">Click Me</button>  <script>  function sayHello() {  console.log ('Hello from JavaScript!');  }  </script>  
</body>  
</html>

以后可以此例为模板，修改使用，用来试验JavaScript语法。如果你不想用浏览器的控制台试验JavaScript语法，可以采用之。

其中，console.log() 静态方法用于将消息输出到控制台。消息可以是一个字符串（可以包含可选的替换值），也可以是一个或多个 JavaScript 对象。简单来说，console.log() 可以在控制台上打印出消息或变量的值，方便调试和查看程序的执行结果，下一节还将介绍它。

相关文章：

  • 北京网站建设多少钱？
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 0302GPIO外设输入功能
  • vue 自定义滚动条同步拖动（移动端）
  • VUE + 小程序 关于前端循环上传附件页面卡死的问题
  • 大模型最新黑书：基于GPT-3、ChatGPT、GPT-4等Transformer架构的自然语言处理 PDF
  • 永磁同步电机控制算法--基于 SVM 的无磁链环 DTC
  • 远程帮客户解决“应用程序无法正常启动0xc000007b，请单击确定关闭应用程序”的问题
  • C# Winform 自定义事件实战
  • 前后端项目部署方案汇总
  • 链接追踪系列-00.es设置日志保存7天-番外篇
  • 对Mapper.xml文件进行深入的学习
  • @SpringBootApplication 注解
  • linux：命令执行过程【图表】
  • linux 安装redis 遇到问题解决方案
  • 面试真题 | ARM体系架构基础知识
  • （四）stm32之通信协议
  • 【Amaple教程】5. 插件
  • 2018一半小结一波
  • C学习-枚举（九）
  • Essential Studio for ASP.NET Web Forms 2017 v2，新增自定义树形网格工具栏
  • javascript从右向左截取指定位数字符的3种方法
  • java正则表式的使用
  • js写一个简单的选项卡
  • vue-cli3搭建项目
  • Xmanager 远程桌面 CentOS 7
  • 阿里云Kubernetes容器服务上体验Knative
  • 驱动程序原理
  • 吴恩达Deep Learning课程练习题参考答案——R语言版
  • 线上 python http server profile 实践
  • 详解NodeJs流之一
  • 数据库巡检项
  • （2）MFC+openGL单文档框架glFrame
  • （3）STL算法之搜索
  • （板子）A* astar算法，AcWing第k短路+八数码 带注释
  • (附源码)计算机毕业设计SSM保险客户管理系统
  • (简单) HDU 2612 Find a way，BFS。
  • （九）c52学习之旅-定时器
  • （四）TensorRT | 基于 GPU 端的 Python 推理
  • (太强大了) - Linux 性能监控、测试、优化工具
  • （学习日记）2024.01.09
  • （一）Linux+Windows下安装ffmpeg
  • （转载）虚幻引擎3--【UnrealScript教程】章节一：20.location和rotation
  • ./configure、make、make install 命令
  • .DFS.
  • .NetCore+vue3上传图片 Multipart body length limit 16384 exceeded.
  • .net操作Excel出错解决
  • .Net高阶异常处理第二篇~~ dump进阶之MiniDumpWriter
  • .net之微信企业号开发(一) 所使用的环境与工具以及准备工作
  • .xml 下拉列表_RecyclerView嵌套recyclerview实现二级下拉列表，包含自定义IOS对话框...
  • [ element-ui:table ] 设置table中某些行数据禁止被选中，通过selectable 定义方法解决
  • [] 与 [[]], -gt 与 ＞ 的比较
  • [202209]mysql8.0 双主集群搭建 亲测可用
  • [BUG] Hadoop-3.3.4集群yarn管理页面子队列不显示任务
  • [BZOJ 3531][Sdoi2014]旅行（树链剖分+线段树）
  • [C++]打开新世界的大门之C++入门
  • [CISCN2019 华北赛区 Day1 Web2]ikun