首页 > Python资料 博客日记
【前端开发】一文带你快速入门 JavaScript(上)Web 前端必备程序语言 | 环境搭建与基础知识
2024-10-31 08:00:05Python资料围观23次
💯 欢迎光临清流君的博客小天地,这里是我分享技术与心得的温馨角落 💯 🔥 个人主页:【清流君】🔥 📚 系列专栏: 运动控制 | 决策规划 | 机器人数值优化 📚 🌟始终保持好奇心,探索未知可能性🌟
文章目录
引言
在当今的互联网时代, 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 | 环境搭建与基础知识 的技术博客。 📚
🎯 如果您觉得这篇博客对您有所帮助,请不要吝啬您的点赞和评论 📢
🌟您的支持是我继续创作的动力。同时,别忘了收藏本篇博客,以便日后随时查阅。🚀
🚗 让我们一起期待更多的技术分享,共同探索移动机器人的无限可能!💡
🎭感谢您的支持与关注,让我们一起在知识的海洋中砥砺前行 🚀
标签:
相关文章
最新发布
- 【Python】selenium安装+Microsoft Edge驱动器下载配置流程
- Python 中自动打开网页并点击[自动化脚本],Selenium
- Anaconda基础使用
- 【Python】成功解决 TypeError: ‘<‘ not supported between instances of ‘str’ and ‘int’
- manim边学边做--三维的点和线
- CPython是最常用的Python解释器之一,也是Python官方实现。它是用C语言编写的,旨在提供一个高效且易于使用的Python解释器。
- Anaconda安装配置Jupyter(2024最新版)
- Python中读取Excel最快的几种方法!
- Python某城市美食商家爬虫数据可视化分析和推荐查询系统毕业设计论文开题报告
- 如何使用 Python 批量检测和转换 JSONL 文件编码为 UTF-8
点击排行
- 版本匹配指南: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