首页 > Python资料 博客日记
【前端开发】一文带你快速入门 JavaScript(上)Web 前端必备程序语言 | 环境搭建与基础知识
2024-10-31 08:00:05Python资料围观7次
💯 欢迎光临清流君的博客小天地,这里是我分享技术与心得的温馨角落 💯 🔥 个人主页:【清流君】🔥 📚 系列专栏: 运动控制 | 决策规划 | 机器人数值优化 📚 🌟始终保持好奇心,探索未知可能性🌟
文章目录
引言
在当今的互联网时代, JavaScript
已成为最为重要的编程语言之一。最初由 Brendan
Eich
在
1995
1995
1995 年为 Netscape
Navigator
浏览器开发, JavaScript
以其简洁的语法和灵活性迅速崛起,并在随后几十年内不断演化,从一种简单的网页交互脚本语言成长为如今前后端开发、移动应用开发、服务器端开发中不可或缺的工具。现代的 JavaScript
不仅限于浏览器环境的使用,借助如 Node
. js
这样的技术,它在后端、物联网以及游戏开发领域也发挥着巨大的作用。
本篇博客是快速入门 JavaScript
的极简教程,旨在让非科班、对前端开发感兴趣的同学快速入手,将带领大家从基础开始,逐步理解 JavaScript
的基本概念与应用场景,无论是前端开发还是后端开发,通过掌握这门语言,将能灵活应对多种开发需求,打造功能强大的应用程序。
一、JavaScript 是什么
本篇博客首先回答
3
3
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 V 8 V8
在
2009
2009
2009 年,一个叫做 Ryan
Dahl
天才工程师把开源的 Javascript
引擎从谷歌浏览器里拿出来,并把它和
C
C
C + + 程序结合起来,他把这个
C
C
C + + 程序叫做 Node
,所以 Node
就是一个包含谷歌浏览器
V
8
V 8
V8 引擎的
C
C
C + + 程序。
现在用这个就可以在浏览器外面跑 Javascript
程序,可以把 Javascript
代码传递给 Node
执行,这也意味着可以使用 Javascript
给网站和移动 APP
做后端了,浏览器或 Node
为 Javascript
提供了运行时环境。
二、你的第一个 JavaScript 程序
2.1 打开浏览器控制台
首先打开的浏览器,按下键盘上的
F
12
F12
F12 ,打开浏览器中的开发者工具,点击 Console
按钮,这是浏览器的 Javascript
控制台,可以在其中写 Javascript
代码。
2.2 编写并执行代码
在第一行写下面这行代码:
console.log('hello world!');
按下回车执行,就得到了 Hello World
。
还可以尝试一些数学运算,例如 2 + 2
回车,得到了结果
4
4
4 。
还可以做一个有趣的事情,使用 alert()
函数,在里面输入 yo
:
alert('yo');
按下回车,发现浏览器弹出了一个提示窗口。
三、搭建开发环境
3.1 安装代码编辑器
为了编写 Javascript
,需要一个代码编辑器有很多可以用来写 Javascript
编辑器,例如 Visual Studio Code
、 Sublime Text
和 Atom
等等。推荐使用 Visual Studio Code
,可以在 code.visualstudio.com
上下载它。
VS Code
是一款非常简单、轻量级的和跨平台的强大编辑器,所以如果的电脑上还没装 VS Code
,只需要点击Download for Windows
按钮,后面的安装过程就非常简单啦。
3.2 安装 Node.js
另一个需要安装的就是之前提到过的 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
h
h
1
1
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
H
H
1
1
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
F12
F12 ,点击 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
V8
V8 引擎的
C
C
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
是 E S 6 ES6 ES6 中新加入的特性,ES
表示ECMAScript
,是一个Javascript
规格,而 E S 6 ES6 ES6 叫 E S 2015 ES 2015 ES2015 。给出了非常多的今天使用的Javascript
新特性。
let
和 const
的区别在于 let
的值可以被修改,而 const
不能。如果写下面的代码:
let age = 30;
console.log(age);
可以看到浏览器中打印出了 30 30 30 。
因为使用了 let
,可以将 age
重新赋值,比如
31
31
31 。
let age = 30;
age = 31;
console.log(age);
可以看到浏览器打印出了 31 31 31 。
7.3 const 变量
如果把 let
改成 const
,就会得到一个报错。
const
是 constant
的缩写,表示常量,其本身是不能被改变的,但如果 const
声明的是数组或者对象时,其内部的元素是可以被改变的,只是不能将整个数组或变量完全更改。
使用 let
可以不在声明变量时初始化数值,例如声明一个 score
变量,但其后才给它赋值为
10
10
10 。
let score;
score = 10;
console.log(score);
打印结果发现得到了 10 10 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
y
y 输出的是
Undefined
- 尝试
z
z
z 也是
Undefined
- 尝试使用
x
x
x ,得到了
object
可能以为输出的会是 null
,但事实上它就是 null
。
在
Javascript
第一个实现中,Javascript
值被表示为一个类型标记和一个值,对象的类型标记为 0 0 0 ,null
表示null
指针,在大多数平台中为 0 X 00 0X00 0X00,也就是十进制 0 0 0 的十六进制表示。因此null
的类型标记为 0 0 0 ,所以返回值的类型就成为了object
。
事实上,大家无需记住这些细节,只需要知道这里是js
犯的一个小错误就好, x x x 的类型就是null
。
这些就是 Javascript
中最主要的几种原生数据类型。
九、总结
JavaScript
作为当今最流行的编程语言之一,应用广泛,功能强大。本文从 JavaScript
的基础知识入手,逐步讲解了如何在浏览器和 Node.js
环境中运行代码。
学习了如何在浏览器的开发者控制台中编写和执行简单的 JavaScript
代码,并搭建了开发环境,安装了 VS Code
和 Node.js
。
讨论了变量和常量的区别与使用,并详细介绍了 JavaScript
的原生数据类型。本文还强调了代码结构化和“关注点分离”的原则,建议将 JavaScript
代码从 HTML
中剥离,放入独立的文件中,以确保代码清晰可维护。
通过这一系列的学习,不仅掌握了如何编写和执行 JavaScript
代码,还了解了良好的编程实践,助力未来开发项目中的高效工作。
参考资料
JavaScript 快速入门 | WEB 前端必备程序语言
后记:
🌟 感谢您耐心阅读这篇关于 快速入门 JavaScript | 环境搭建与基础知识 的技术博客。 📚
🎯 如果您觉得这篇博客对您有所帮助,请不要吝啬您的点赞和评论 📢
🌟您的支持是我继续创作的动力。同时,别忘了收藏本篇博客,以便日后随时查阅。🚀
🚗 让我们一起期待更多的技术分享,共同探索移动机器人的无限可能!💡
🎭感谢您的支持与关注,让我们一起在知识的海洋中砥砺前行 🚀
标签:
相关文章
最新发布
点击排行
- 版本匹配指南:Numpy版本和Python版本的对应关系
- 版本匹配指南:PyTorch版本、torchvision 版本和Python版本的对应关系
- Python 可视化 web 神器:streamlit、Gradio、dash、nicegui;低代码 Python Web 框架:PyWebIO
- 相关性分析——Pearson相关系数+热力图(附data和Python完整代码)
- Python与PyTorch的版本对应
- Anaconda版本和Python版本对应关系(持续更新...)
- Python pyinstaller打包exe最完整教程
- Could not build wheels for llama-cpp-python, which is required to install pyproject.toml-based proj