JavaScript简介：从概念、特点、组成和用法全面带你快速了解JS
“这里是云端源想IT，帮你轻松学IT”
嗨~ 今天的你过得还好吗？
我们总是先扬起尘土
然后抱怨自己看不见
– 2024.04.15 –
JavaScript，简称JS，是一种轻量级的解释型编程语言，它是网页开发中不可或缺的三剑客之一，与HTML和CSS并肩作战，共同构建起我们浏览的网页。
今天我们就来了解一下JavaScript，看看它在我们的web前端开发中扮演着什么样的角色。
JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。它以其作为开发Web页面的脚本语言而闻名，但也被广泛应用于非浏览器环境中。
JavaScript是一种基于原型编程、多范式的动态脚本语言，支持面向对象、命令式、声明式和函数式编程范式。
JavaScript最初由Netscape公司的Brendan Eich于1995年为网景导航者浏览器设计并实现。由于Netscape与Sun的合作，Netscape管理层希望该语言在外观上看起来像Java，因此得名为JavaScript。
JavaScript的标准是ECMAScript。截至2012年，所有浏览器都完整地支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3标准。
2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，正式名称为ECMAScript 2015，但通常被称为ECMAScript 6或ES2015。
JavaScript目前是互联网上最流行的脚本语言。这门语言不仅可用于HTML和Web开发，还可以广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
动画效果：
让你的网页动起来，比如轮播图、下拉菜单等。
表单验证：
在数据提交到服务器之前，进行即时的客户端验证。
异步请求：
通过AJAX技术，实现页面的局部更新，无需刷新整个页面。
交互式游戏：
创建复杂的网页游戏，或是简单的互动元素。
Web API：
利用浏览器提供的API，访问地理位置、摄像头、本地存储等。
跨平台应用：
使用如React Native、Electron等框架，开发跨平台的移动应用和桌面应用。
后端开发：
Node.js的出现让JavaScript也能在服务器端大展拳脚。
- ECMAScript，描述了该语言的语法和基本对象。
- 文档对象模型（DOM），描述处理网页内容的方法和接口。
- 浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口
3.1 ECMAScript：
ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会）在标准ECMA-262中定义的脚本语言规范。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMA-262标准的实现和扩展。
简单来说：
- ECMAScript JavaScript是的核心，是规范标准。
- 描述了语言的基本语法(var、for、if、array等)和数据类型(数字、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义)。
3.2 DOM
文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。
DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。
简言之，它会将web页面和脚本或程序语言连接起来。
可以理解为：
DOM Document Object Model文档对象模型，可以去操作网页
Document(文档)
指的是XML和HTML的页面，当你创建一个页面并且加载到Web浏览器中，DOM就在幕后悄然而生，它会把你编写的网页文档转换成一个文档对象。
Object(对象)
- js对象大致可以分为以下三种：
- 用户定义对象，例如：var obj = {}
- 内置对象，无需创建，可直接使用，例如：Array、Math和Data等
- 宿主对象，浏览器提供的对象，例如:window、document
DOM中主要关注的就是document，document对象的主要功能就是处理网页内容。
Model（模型）
代表着加载到浏览器窗口的当前网页，可以利用JavaScript对它进行读取。
3.3 BOM
浏览器对象模型，操作浏览器。
Browser Object Model 浏览器对象模型提供了独立与内容的、可以与浏览器窗口进行互动的对象结构，BOM由多个对象构成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。
JavaScript是一种功能强大的编程语言，它的特点主要包括以下几点，在这里大家只需要了解一下就可以了。
- 客户端脚本语言：JavaScript通常在用户的浏览器上运行，用于实现动态内容和用户界面的交互性。
- 弱类型语言：JavaScript不要求开发者在编程时明确指定变量的类型，类型会在运行时自动转换。
- 面向对象：JavaScript支持面向对象的编程模式，允许创建对象和定义它们之间的交互。
- 事件驱动：JavaScript能够响应用户的操作（如点击、输入等），这使得它非常适合构建交互式的Web应用。
- 跨平台：JavaScript代码可以在几乎所有的现代浏览器上运行，无论是Windows、macOS还是Linux操作系统。
- 动态性：JavaScript是一种动态语言，可以在运行时改变其结构和行为。
- 可扩展性：JavaScript可以通过添加新的函数和属性来扩展其内置对象的功能。
- 宽松语法：JavaScript的语法相对宽松，使得编程更加灵活，但也可能导致错误。
- 单线程与异步处理：JavaScript在浏览器中是单线程执行的，但它通过事件循环和回调函数等机制实现了异步处理。
- 基于原型的继承：不同于传统的类继承，JavaScript使用的是基于原型的继承方式。
- 核心组成部分：JavaScript的核心由ECMAScript、DOM（文档对象模型）和BOM（浏览器对象模型）组成。
- 多范式：JavaScript支持多种编程范式，包括过程式、面向对象和函数式编程。
总的来说，JavaScript的这些特点使其成为了Web开发中不可或缺的一部分，同时也适用于服务端编程（如Node.js）和其他非浏览器环境。
你是不是厌倦了一成不变的编程模式？想要突破自我，挑战新技术想要突破自我，挑战新技术？却迟迟找不到可以练手的项目实战？是不是梦想打造一个属于自己的支付系统？那么，恭喜你，云端源想免费实战直播——《VUE3+SpringBoot搭建移动支付功能(第1期)》即将开启，点击前往查看！云端源想-热门直播课
1、页内样式：
在HTML文件中，可以在<head>或<body>标签中添加<script>标签，然后在<script>标签中编写JavaScript代码。这种方式适合较小的脚本或者是测试阶段的代码。
例如：
2、页外样式：
步骤一：在js文件夹中创建一个Xxx.js文件。
步骤二：在Xxxx.js文件中编写JavaScript代码。
步骤三：在HTML文件的<head>标签中通过<script src=\”Xxxx.js\”></script>进行引入。
例如：
需要注意的是，引入时路径要正确，如果是当前目录则直接写文件名，如果是上级目录则需要使用./来指定路径。
- 页外样式写到<head>中，可以让它早点加载、早点完成。
- 而页内样式写到<body>结束标签之前，可以让HTML代码先渲染内容，然后再执行JavaScript代码。
随着Web技术的发展，JavaScript也在不断进化。ES6引入了类、模块、箭头函数等新特性，未来的JavaScript将更加强大、简洁。作为前端开发的基石，也是全栈开发的重要工具，JavaScript的重要性不言而喻。
现在，你是否已经迫不及待想要开启自己的JavaScript学习之旅了呢？记住，每一位大师都是从基础开始的，不要害怕犯错，因为每一个错误都是通往成功的阶梯。
拿起你的键盘，打开你的浏览器，让我们一起在JavaScript的海洋中遨游，发现编程的无穷魅力吧！
我们下期再见！
END
文案编辑|云端学长
文案配图|云端学长
内容由：云端源想分享
10个实用的JS技巧「值得收藏」
我一直在寻找提高效率的新方法。而且 JavaScript 总是能给人带来惊喜。
arguments 对象是函数内部可访问的类似数组的对象，其中包含传递给该函数的参数的值。
与其他数组不同，这里我们可以访问值并获得长度（length），但是不能在其上使用其他数组方法。
幸运的是，我们可以将其转换为常规数组：
我一开始想到的是使用一个循环，但是那样会很浪费。
我们有以下代码：
我们可以进一步简化代码，同时使用变量和函数：
我以前在函数开始时声明变量，只是为了避免在出现意外错误时遇到 undefined。
逗号运算符
逗号运算符（,）用来计算其每个操作数（从左到右）并返回最后一个操作数的值。
你可以调整大小或清空数组。
结构赋值语法是一种 JavaScript 表达式，可以将数组中的值或对象中的属性解包为不同的变量。
你可以在声明对象之前分配一个动态属性。
对于所有 ES6 爱好者而言，我们可以使用带有 Spread 运算符的 Set 对象来创建一个仅包含唯一值的新数组。
履行好自己的责任比提升效率要重要的多。
你的网站需要兼容所有浏览器。
你可以使用 Endtest或其他类似工具来确保兼容性。
https://endtest.io/
你还有其他 JavaScript 技巧或窍门要分享吗？
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
作者 | Zander Shirley
译者 | 王强
策划 | 小智
转发链接：https://mp.weixin.qq.com/s/QQp3GTUvnwn_cunmaqDwTg
Javascript 中三个点的三种用法
如果你阅读或查看现在的Javascript 程序时，大概率会发现省略号出现在很多的地方，这个省略号(…)是在ES6 中引入的一个功能，它看起来很简单很不起眼是不？但是它在 JavaScript 中，非常有用。
举个简单的例子，我们有个字符串 author :
那如何把这个字符串转换成包含所有字符组成的数组呢？
在 C 或 C++ 中，我们需要先创建一个数组，然后使用 for 循环遍历所有字符串，一个一个添加到数组中。
在 Javascript 中，我们只需要一行代码：
这个省略号瞬间让 Javascript 变得简单许多不是么？
这个例子也只是它能作为的冰山一角，下面来介绍一些它三个主要用途。
这个特性使得 JavaScript 中的赋值操作更加优雅。一行代码胜千言，咱来看一下代码：
如上所示，let {me, …others} = leaders 是JavaScript 解构赋值最经典的使用方法。我们将leaders[\”me\”] 的值赋个变量 me, leaders 其他值给 others。
当然，我们并不需要所有的值，可能我就需要 me 和 MS 值，所有可以这样：
这种用法这三个点也叫做扩展运算符。顾名思义，就是我们可以使用这个解压JavaScript 中可迭代的对象，包括字符串，数组，对象等等。
举一个简单的例子，假如有两个数组：
如何将l2中的值添加到 l1 中？
使用这个扩展运算符，我们只需要一行代码：
如上所示，使用这个扩展运算符可以很方便的解压l2，就是因为它的这种特性，使得它在JavaScript 中非常常见。下面举几个更有用例子。
2.1 复制数组
在JavaScript 中我们将一个数组赋值给另一个数组使用 = ，这在赋值的同时，也会传递引用。下面的例子中，如果我们改变了 l2 中的值，l1 中的值也会跟着变化。
如果想要只传值，就可以使用 … :
如上所示通过这三个点复制 l1 中的值 到 l3。
2.1 合并多个对象
使用这三个点结构对象可以使 JavaScript用起来更有趣。
下面的例子是合并两个对象：
2.2 使用数学函数更简单
JavaScript 中的一些内置函数挺奇怪，例如我们使用 max或min时需要传递一堆值，而不是一个数组到函数中，如果不这样做就会 NaN 。好在这三个点的结构赋值解决了这个问题：
如果一个 JavaScript 函数需要接受可变数量的参数，我们就可以使用这三个点来定义一个 rest 参数：
如上所示，这三个点使函数能接收可变量参数，并将它存储在一个数组中。这个特性使得 Javascript 函数更灵活更强大。
这里需要注意的是，rest 参数是收集所有剩余参数，所以它必须是函数的最后一个参数，如果我们把它放在中间，则会引发错误：
很多人都说 Javascript 作为一种开发语言有很多缺陷。这是事实，但它也是不断的改进，变得越来越优雅。这三个点就是很好的例子，可以用更少的代码做更多的事。
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
