首页 > Python资料博客日记

【前端开发】一文带你快速入门 JavaScript（上）Web 前端必备程序语言 | 环境搭建与基础知识

2024-10-31 08:00:05Python资料围观7次

本篇文章分享【前端开发】一文带你快速入门 JavaScript（上）Web 前端必备程序语言 | 环境搭建与基础知识，对你有帮助的话记得收藏一下，看Python资料网收获更多编程知识

💯 欢迎光临清流君的博客小天地，这里是我分享技术与心得的温馨角落 💯
🔥 个人主页:【清流君】🔥 📚 系列专栏: 运动控制 | 决策规划 | 机器人数值优化 📚 🌟始终保持好奇心，探索未知可能性🌟

文章目录

引言
一、JavaScript 是什么
二、你的第一个 JavaScript 程序
- 2.1 打开浏览器控制台
- 2.2 编写并执行代码
三、搭建开发环境
- 3.1 安装代码编辑器
- 3.2 安装 Node.js
四、在浏览器中使用 JavaScript 文件
五、编码原则之关注点分离
六、使用 Node 运行 JavaScript 文件
- 6.1 打开命令行工具
- 6.2 使用 Node 执行 JavaScript 文件
七、变量与常量
八、原生数据类型
- 8.1 JavaScript 的原生数据类型
- 8.2 检查数据类型
九、总结
参考资料

引言

在当今的互联网时代， JavaScript 已成为最为重要的编程语言之一。最初由 Brendan Eich 在 $1995$ 年为 Netscape Navigator 浏览器开发， JavaScript 以其简洁的语法和灵活性迅速崛起，并在随后几十年内不断演化，从一种简单的网页交互脚本语言成长为如今前后端开发、移动应用开发、服务器端开发中不可或缺的工具。现代的 JavaScript 不仅限于浏览器环境的使用，借助如 Node . js 这样的技术，它在后端、物联网以及游戏开发领域也发挥着巨大的作用。

本篇博客是快速入门 JavaScript 的极简教程，旨在让非科班、对前端开发感兴趣的同学快速入手，将带领大家从基础开始，逐步理解 JavaScript 的基本概念与应用场景，无论是前端开发还是后端开发，通过掌握这门语言，将能灵活应对多种开发需求，打造功能强大的应用程序。

一、JavaScript 是什么

本篇博客首先回答 $3$ 个关于 Javascript 常见问题：

什么是 Javascript ？
Javascript 可以用来做什么？
Javascript 在哪里运行？

1.1 什么是 Javascript ？

Javascript 是目前世界上最流行和应用最广泛的编程语言之一。

它的增长速度比任何一种其他的编程语言都要快，有很多大公司的 APP 是完全使用 Javascript 做的，使用这门语言，可以作为前端开发者、后端开发者和全栈开发者。

1.2 Javascript 可用来做什么？

在很长的一段时间里， Javascript 只被用在浏览器里去做交互式网页，有一些开发者把它当做一门很垃圾的语言，但是那些日子已经一去不复返了。由于巨大的社区贡献，例如 Facebook 和谷歌这样的大公司的投资，甚至可以用 Javascript 来做下面的事情：

Web /移动端 App
实时联网 App
命令行工具
游戏

1.3 第三个问题是 Javascript 在哪里运行？

Javascript 本来被设计成只能运行在浏览器里，所以每个浏览器都有一个可以跑 Javascript 引擎，例如

在火狐浏览器里叫 SpiderMonkey
在谷歌浏览器里叫 $V 8$

在 $2009$ 年，一个叫做 Ryan Dahl 天才工程师把开源的 Javascript 引擎从谷歌浏览器里拿出来，并把它和 $C$ + + 程序结合起来，他把这个 $C$ + + 程序叫做 Node ，所以 Node 就是一个包含谷歌浏览器 $V 8$ 引擎的 $C$ + + 程序。

现在用这个就可以在浏览器外面跑 Javascript 程序，可以把 Javascript 代码传递给 Node 执行，这也意味着可以使用 Javascript 给网站和移动 APP 做后端了，浏览器或 Node 为 Javascript 提供了运行时环境。

二、你的第一个 JavaScript 程序

2.1 打开浏览器控制台

首先打开的浏览器，按下键盘上的 $F 12$ ，打开浏览器中的开发者工具，点击 Console 按钮，这是浏览器的 Javascript 控制台，可以在其中写 Javascript 代码。

2.2 编写并执行代码

在第一行写下面这行代码：

console.log('hello world!');

按下回车执行，就得到了 Hello World 。

还可以尝试一些数学运算，例如 2 + 2 回车，得到了结果 $4$ 。

还可以做一个有趣的事情，使用 alert() 函数，在里面输入 yo ：

alert('yo');

按下回车，发现浏览器弹出了一个提示窗口。

三、搭建开发环境

3.1 安装代码编辑器

为了编写 Javascript ，需要一个代码编辑器有很多可以用来写 Javascript 编辑器，例如 Visual Studio Code 、 Sublime Text 和 Atom 等等。推荐使用 Visual Studio Code ，可以在 code.visualstudio.com 上下载它。

Visual Studio Code下载地址

VS Code 是一款非常简单、轻量级的和跨平台的强大编辑器，所以如果的电脑上还没装 VS Code ，只需要点击Download for Windows按钮，后面的安装过程就非常简单啦。

3.2 安装 Node.js

另一个需要安装的就是之前提到过的 Node ，可以在官方网站上下载它，链接如下：

Node下载地址

使用 Node 也有很多好处，可以用它来执行 Javascript 代码，也可以通过它来安装第三方库，使用第三方库是超过本博客教程范围的内容。

四、在浏览器中使用 JavaScript 文件

4.1 创建 HTML 文件

下载完成之后再回来继续看，新建一个文件夹，名字叫什么无所谓，后面会把代码写在这个文件夹里，添加一个新的文件 index.html，事实上看本篇博客并不需要掌握 html ，但如果想成为前端工程师， html 是必须的内容。

在文件中，输入一个叹号，按下 Tab 键， VS Code 就会自动生成一些 html 代码。

不要担心，并不需要关心这里面的细节，但需要使用这些 HTML 代码作为 Javascript 容器，在下一节中，将会看到具体的使用方法，但现在保存文件。

4.2 使用 Live Server 预览

点击左侧的扩展按钮，在搜索框中输入 Live Server。

Live Server 是一个轻量级的 Web 服务器，可以用它服务 Web APP ，安装它并重启 VS Code 。

当完成之后，回到代码文件中，右键点击 index.html，点击 Open with Live Server。

这会打开电脑的默认浏览器，加载这个地址：

http://127.0.0.1:5500/index.html

这个地址是 Web 服务器提供服务的地址，现在这里是空的页面，为了确认各项事宜都是正常运转的，回到 VS Code ，在 <body> 部分写下 $h$ $1$ ，按下 Tab 键，在标签里写下 Hello World!。

<body>
    <h1>Hello World!</h1>
</body>

保存文件，回到浏览器中，看到这个页面自动刷新了，得到了 Hello World! 的输出。

4.3 添加 JavaScript 代码

现在准备往这个 html 文件中添加 Javascript 代码，为了编写 Javascript 代码，需要一个 script 标签，有两个地方可以添加 script 标签：

可以在 <head> 标签里添加
也可以在 <body> 标签里添加

一个好的编程实践是在 <script> 标签放在 <body> 标签中的末尾、在所有 <body> 中的其他标签之后，所以在 $H$ $1$ 标签后面输入 <script>，按下 Tab 键，这就是 <script> 标签。

<script></script>

为什么把它放在这里是一个好的编程实践，有两个原因：

第一，浏览器解析这个文件是自顶向下的，如果把 <script> 放在 <head> 中，可能有很多 Javascript 代码。这会让浏览器忙于去解析那些代码，而非去把页面中的内容先渲染出来，这会造成极差的用户体验，因为用户下载的页面就会非常缓慢，一片空白。
第二， <script> 中的很多代码都有要和这个页面中的控件交互的需要，比如可能需要用 Javascript 显示或隐藏某个控件，所以后写 <script> 就会保证那些空间先被浏览器渲染完成。

有时会遇到第三方库要求在 <head> 中引入，那些是极特殊的情况。在自己写的时候一定要写在 <body> 内的末尾。

现在将写下之前在浏览器控制台中写下的相同代码，在 <script> 标签中写

console.log('Hello World!');

这里的代码称为一条语句，而语句表达了要执行的操作。在本例中，希望在控制台上记录一条信息，在引号里的是一条字符串，而字符串则是一条由字符组成的序列。

可以使用两条斜线来表示注释，在其后写下的内容可以用来描述代码做了一件什么样的事，这些内容会被 Javascript 引擎忽略掉，并不会被执行。

<body>
    <h1>Hello World!</h1>
    <script>
        // 这是第一个js代码；
        console.log('Hello World!');
    </script>
</body>

保存，回到浏览器中，按下 $F 12$ ，点击 Console 按钮，可以看到确实输出了 Hello World! 这条信息到浏览器中。

五、编码原则之关注点分离

5.1 分离 JavaScript 代码

固然可以在这个 <script> 标签中写各种 Javascript 代码，但在真实的开发过程中，可能会面对成千上万甚至上百万行的代码。所以不希望把所有的代码都写在这个标签里。

一个好的做法是将 Javascript 代码从 html 代码中剥离出去， html 都是关于页面内容的，而 Javascript 关心的是页面上的行为，所以将关注点分离，实现每个代码文件的职责单一。

5.2 创建单独的 JavaScript 文件

所以添加个新的文件index.js，回到 html 文件中，将所有这里的 Javascript 代码剪切在 index.js 文件中粘贴。

在这个项目中，目前有了一个单独的 js 文件，而在实战项目中，可能会有几百甚至成千上万的 js 文件。

5.3 在 HTML 文件中引用 JavaScript 文件

现在保存文件回到 html 文件中，现在 Javascript 文件是一个单独的部分了，需要在 html 文件中引用它才行。

在这里添加一个属性：

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

src 表示 source ，将它的值赋为index.js，这会告诉浏览器新的 Javascript 代码都在 index.js 文件中了。

5.4 验证代码运行结果

保存文件来到浏览器中，可以看到 Hello World！

这意味着工程还在正常运行中。

六、使用 Node 运行 JavaScript 文件

下面展示如何在 Node 中运行相同的一段代码。

假设已经安装了 Node ，如果没有的话，可以去 https://nodejs.org/en 上下载。

6.1 打开命令行工具

首先打开的命令行工具Win + R，输入 cmd ，回车，输入如下指令：

node --version

检查是否已经安装了 Node ，如果出现了一个类似这样的版本号，就代表已经安装成功啦。

6.2 使用 Node 执行 JavaScript 文件

现在可以使用快捷键 Ctrl 加 ESC 正下方的按钮，打开 VS Code 终端窗口，输入：

node index.js

于是在终端里也得到了相同的结果。

这说明 note 是一个包含了谷歌浏览器 $V 8$ 引擎的 $C$ ++ 程序，将代码传递给 Node ，它就会像浏览器一样为执行出同样的结果。所以 Node 是一个用来运行 Javascript 的运行时环境。

建议使用 VS Code 自带的终端工具，因为它相较于电脑自带的命令行：

不仅可以内置很多其他的工具，例如版本控制工具 Git
还可以自动切入当前工程文件的根目录

所以就不需要单独打开一个命令行工具，输入各种多余的指令。

七、变量与常量

下面来聊聊变量。

在 Javascript 中可以用三个关键字声明，它们分别是 var 、 let 和 const 。

7.1 var 变量

var 在 Javascript 诞生的时候就有了，但现在已经很少被使用了，因为有了 let 和 const ，因为 let 是全局作用域的。例如在一个 if 条件句的内外，用 var 声明两个同名的变量就会导致冲突。所以绝大多数情况下，可能不希望再使用 var 了。

7.2 let 变量

let 和 const 是 $ES 6$ 中新加入的特性， ES 表示 ECMAScript ，是一个 Javascript 规格，而 $ES 6$ 叫 $ES 2015$ 。给出了非常多的今天使用的 Javascript 新特性。

let 和 const 的区别在于 let 的值可以被修改，而 const 不能。如果写下面的代码：

let age = 30;
console.log(age);

可以看到浏览器中打印出了 $30$ 。

因为使用了 let ，可以将 age 重新赋值，比如 $31$ 。

let age = 30;
age = 31;
console.log(age);

可以看到浏览器打印出了 $31$ 。

7.3 const 变量

如果把 let 改成 const ，就会得到一个报错。

const 是 constant 的缩写，表示常量，其本身是不能被改变的，但如果 const 声明的是数组或者对象时，其内部的元素是可以被改变的，只是不能将整个数组或变量完全更改。

使用 let 可以不在声明变量时初始化数值，例如声明一个 score 变量，但其后才给它赋值为 $10$ 。

let score;
score = 10;
console.log(score);

打印结果发现得到了 $10$ 。

但如果把 let 改成 const ，就会发现报错了，就算把后面赋值操作去掉，还是会得到这个报错。

所以在使用 const 时，一定要在声明时就初始化数值。

八、原生数据类型

8.1 JavaScript 的原生数据类型

下面来说 Javascript 的原生数据类型，在 Javascript 中有很多原生数据类型，有 String , Number ， Boolem ， null 和 undefined 等等。

声明一个字符串并初始化为 John 。

const username = 'John'

John 就是一个字符串 String 。使用双引号或者单引号表示一个 String 在末尾加不加分号都不会导致程序报错，但是绝大多数开发者都使用分号，所以这里建议大家也使用哦。

再声明一个数类型的常量一个 number 就是不带引号的数值。

const age = 30;

声明一个布尔类型的常量只能是 true 或 false ，也不加引号。

const isCool = true;

再声明一个小数。

const rate = 4.5;

在 js 中并没有浮点类型的概念，整形和浮点型都是 number 类型的。

再声明一个 null 类型的常量。

const x = null;

除了 null 以外，还有 undefined 。

const y = undefined;

可以显示的声明 undefined ，也可以声明一个变量却不给它复制，这都是 undefined 。

const y = undefined;
let z;

null 和 undefined 的区别是

null 表示一个值被定义了，定义为空。
undefined 表示根本不存在定义。

8.2 检查数据类型

如果希望看到某个量的数据类型，可以使用 console.log(typeof XXX);，并直接将那个量的名称写在其后就可以啦。

console.log(typeof username);

可以把 username 放在这里，从浏览器中输出了 string 。

尝试使用 age ，从浏览器中输出了 number
尝试使用 rate ，还是获得了 number 输出，因为并不存在浮点说类型的概念
尝试使用 isCool ，获得了布尔类型 boolean
尝试使用 $y$ 输出的是 Undefined
尝试 $z$ 也是 Undefined
尝试使用 $x$ ，得到了 object

可能以为输出的会是 null ，但事实上它就是 null 。

在 Javascript 第一个实现中， Javascript 值被表示为一个类型标记和一个值，对象的类型标记为 $0$ ， null 表示 null 指针，在大多数平台中为 $0 X 00$ ，也就是十进制 $0$ 的十六进制表示。因此 null 的类型标记为 $0$ ，所以返回值的类型就成为了 object 。
事实上，大家无需记住这些细节，只需要知道这里是 js 犯的一个小错误就好， $x$ 的类型就是 null 。

这些就是 Javascript 中最主要的几种原生数据类型。

九、总结

JavaScript 作为当今最流行的编程语言之一，应用广泛，功能强大。本文从 JavaScript 的基础知识入手，逐步讲解了如何在浏览器和 Node.js 环境中运行代码。

学习了如何在浏览器的开发者控制台中编写和执行简单的 JavaScript 代码，并搭建了开发环境，安装了 VS Code 和 Node.js 。

讨论了变量和常量的区别与使用，并详细介绍了 JavaScript 的原生数据类型。本文还强调了代码结构化和“关注点分离”的原则，建议将 JavaScript 代码从 HTML 中剥离，放入独立的文件中，以确保代码清晰可维护。

通过这一系列的学习，不仅掌握了如何编写和执行 JavaScript 代码，还了解了良好的编程实践，助力未来开发项目中的高效工作。

参考资料

JavaScript 快速入门 | WEB 前端必备程序语言

后记：

🌟 感谢您耐心阅读这篇关于 快速入门 JavaScript | 环境搭建与基础知识 的技术博客。 📚

🎯 如果您觉得这篇博客对您有所帮助，请不要吝啬您的点赞和评论 📢

🌟您的支持是我继续创作的动力。同时，别忘了收藏本篇博客，以便日后随时查阅。🚀

🚗 让我们一起期待更多的技术分享，共同探索移动机器人的无限可能！💡

🎭感谢您的支持与关注，让我们一起在知识的海洋中砥砺前行 🚀

标签：

上一篇：python篇-windows cmd 输入python弹出应用商城
下一篇：『玩转Streamlit』--页面布局

点击排行

本站推荐

标签云

Python高手进阶指南

首页 > Python资料博客日记

【前端开发】一文带你快速入门 JavaScript（上）Web 前端必备程序语言 | 环境搭建与基础知识

文章目录

引言

一、JavaScript 是什么

1.1 什么是 Javascript ？

1.2 Javascript 可用来做什么？

1.3 第三个问题是 Javascript 在哪里运行？

二、你的第一个 JavaScript 程序

2.1 打开浏览器控制台

2.2 编写并执行代码

三、搭建开发环境

3.1 安装代码编辑器

3.2 安装 Node.js

四、在浏览器中使用 JavaScript 文件

4.1 创建 HTML 文件

4.2 使用 Live Server 预览

4.3 添加 JavaScript 代码

五、编码原则之关注点分离

5.1 分离 JavaScript 代码

5.2 创建单独的 JavaScript 文件

5.3 在 HTML 文件中引用 JavaScript 文件

5.4 验证代码运行结果

六、使用 Node 运行 JavaScript 文件

6.1 打开命令行工具

6.2 使用 Node 执行 JavaScript 文件

七、变量与常量

7.1 var 变量

7.2 let 变量

7.3 const 变量

八、原生数据类型

8.1 JavaScript 的原生数据类型

8.2 检查数据类型

九、总结

参考资料

相关文章

最新发布

点击排行

本站推荐

标签云

首页 > Python资料 博客日记

【前端开发】一文带你快速入门 JavaScript（上）Web 前端必备程序语言 | 环境搭建与基础知识

文章目录

引言

一、JavaScript 是什么

1.1 什么是 Javascript ？

1.2 Javascript 可用来做什么？

1.3 第三个问题是 Javascript 在哪里运行？

二、你的第一个 JavaScript 程序

2.1 打开浏览器控制台

2.2 编写并执行代码

三、搭建开发环境

3.1 安装代码编辑器

3.2 安装 Node.js

四、在浏览器中使用 JavaScript 文件

4.1 创建 HTML 文件

4.2 使用 Live Server 预览

4.3 添加 JavaScript 代码

五、编码原则之关注点分离

5.1 分离 JavaScript 代码

5.2 创建单独的 JavaScript 文件

5.3 在 HTML 文件中引用 JavaScript 文件

5.4 验证代码运行结果

六、使用 Node 运行 JavaScript 文件

6.1 打开命令行工具

6.2 使用 Node 执行 JavaScript 文件

七、变量与常量

7.1 var 变量

7.2 let 变量

7.3 const 变量

八、原生数据类型

8.1 JavaScript 的原生数据类型

8.2 检查数据类型

九、总结

参考资料

相关文章

最新发布

点击排行

本站推荐

标签云

首页 > Python资料博客日记