JavaScript简介:从概念、特点、组成和用法全面带你快速了解JS
csdh11 2025-05-24 13:16 3 浏览
“这里是云端源想IT，帮你轻松学IT”
嗨~ 今天的你过得还好吗？
我们总是先扬起尘土
然后抱怨自己看不见
- 2024.04.15 -
JavaScript，简称JS，是一种轻量级的解释型编程语言，它是网页开发中不可或缺的三剑客之一，与HTML和CSS并肩作战，共同构建起我们浏览的网页。
今天我们就来了解一下JavaScript，看看它在我们的web前端开发中扮演着什么样的角色。
一、JavaScript是什么？
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、笔记本电脑、平板电脑和智能手机等设备。
二、JavaScript能做什么？
动画效果：
让你的网页动起来，比如轮播图、下拉菜单等。
表单验证：
在数据提交到服务器之前，进行即时的客户端验证。
异步请求：
通过AJAX技术，实现页面的局部更新，无需刷新整个页面。
交互式游戏：
创建复杂的网页游戏，或是简单的互动元素。
Web API：
利用浏览器提供的API，访问地理位置、摄像头、本地存储等。
跨平台应用：
使用如React Native、Electron等框架，开发跨平台的移动应用和桌面应用。
后端开发：
Node.js的出现让JavaScript也能在服务器端大展拳脚。
三、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支持面向对象的编程模式，允许创建对象和定义它们之间的交互。
- 事件驱动：JavaScript能够响应用户的操作（如点击、输入等），这使得它非常适合构建交互式的Web应用。
- 跨平台：JavaScript代码可以在几乎所有的现代浏览器上运行，无论是Windows、macOS还是Linux操作系统。
- 动态性：JavaScript是一种动态语言，可以在运行时改变其结构和行为。
- 可扩展性：JavaScript可以通过添加新的函数和属性来扩展其内置对象的功能。
- 宽松语法：JavaScript的语法相对宽松，使得编程更加灵活，但也可能导致错误。
- 单线程与异步处理：JavaScript在浏览器中是单线程执行的，但它通过事件循环和回调函数等机制实现了异步处理。
- 基于原型的继承：不同于传统的类继承，JavaScript使用的是基于原型的继承方式。
- 核心组成部分：JavaScript的核心由ECMAScript、DOM（文档对象模型）和BOM（浏览器对象模型）组成。
- 多范式：JavaScript支持多种编程范式，包括过程式、面向对象和函数式编程。
总的来说，JavaScript的这些特点使其成为了Web开发中不可或缺的一部分，同时也适用于服务端编程（如Node.js）和其他非浏览器环境。
你是不是厌倦了一成不变的编程模式？想要突破自我，挑战新技术想要突破自我，挑战新技术？却迟迟找不到可以练手的项目实战？是不是梦想打造一个属于自己的支付系统？那么，恭喜你，云端源想免费实战直播——《VUE3+SpringBoot搭建移动支付功能(第1期)》即将开启，点击前往查看！云端源想-热门直播课
五、JavaScript的用法
1、页内样式：
在HTML文件中，可以在<head>或<body>标签中添加<script>标签，然后在<script>标签中编写JavaScript代码。这种方式适合较小的脚本或者是测试阶段的代码。
例如：
<!DOCTYPE html>
<html>
<head>
<title>页内样式示例</title>
<script>
// 在这里编写JavaScript代码
</script>
</head>
<body>
// 页面内容
</body>
</html>2、页外样式：
步骤一：在js文件夹中创建一个Xxx.js文件。
步骤二：在Xxxx.js文件中编写JavaScript代码。
步骤三：在HTML文件的<head>标签中通过<script src="Xxxx.js"></script>进行引入。
例如：
<!DOCTYPE html>
<html>
<head>
<title>页外样式示例</title>
<script src="Xxxx.js"></script>
</head>
<body>
// 页面内容
</body>
</html>需要注意的是，引入时路径要正确，如果是当前目录则直接写文件名，如果是上级目录则需要使用./来指定路径。
- 页外样式写到<head>中，可以让它早点加载、早点完成。
- 而页内样式写到<body>结束标签之前，可以让HTML代码先渲染内容，然后再执行JavaScript代码。
随着Web技术的发展，JavaScript也在不断进化。ES6引入了类、模块、箭头函数等新特性，未来的JavaScript将更加强大、简洁。作为前端开发的基石，也是全栈开发的重要工具，JavaScript的重要性不言而喻。
现在，你是否已经迫不及待想要开启自己的JavaScript学习之旅了呢？记住，每一位大师都是从基础开始的，不要害怕犯错，因为每一个错误都是通往成功的阶梯。
拿起你的键盘，打开你的浏览器，让我们一起在JavaScript的海洋中遨游，发现编程的无穷魅力吧！
我们下期再见！
END
文案编辑|云端学长
文案配图|云端学长
内容由：云端源想分享
相关推荐
- 跨越26年的宝可梦系列游戏你玩过几款?
-
作为一个宝可梦IP的忠实爱好者，是时时刻刻关注着宝可梦的影视及游戏方面，在22年2月也即将引来正统续作宝可梦阿尔宙斯（其实还是更习惯口袋妖怪的翻译）宝可梦从1996年诞生至今一共有多少正统系列，小编做...
- ndsi，肩键L键失灵，拆开看看能不能修
-
很久没有玩nds了，新买了个R4烧录卡是带64g的游戏来玩玩，发现肩键L失灵了，打开看看能不能挽救一下。之前后盖上是有痛贴的，没办法只能忍痛撕下来了，撕下来之后还真白啊，上保护贴是真有必要的。话不多说...
- R4卡使用方法!游戏介绍及常见问题!任天堂掌机通用
-
哈喽大家好！我是掌机百科！今天介绍下R4卡的使用方法及教程，DS,NDS,NDSL,NDSLL,NDSXL,NDSI.NDSILL,NDSIXL,3DS,3DSLL,3DSXL,2DS,NEW3DS...
- JavaScript简介:从概念、特点、组成和用法全面带你快速了解JS
-
“这里是云端源想IT，帮你轻松学IT”...
- FileBrowser 是一个优秀的基于 Web 的文件管理器
-
FileBrowser是一个基于网页的文件管理器，允许用户通过浏览器界面管理服务器上的文件和目录。它提供了一种简单直观的方式来执行文件操作，如上传、下载、删除、重命名和编辑文件，以及管理目录。以下是...
- BrowserTools MCP赋能Cursor IDE:基于上下文实现浏览器无缝控制
-
一、项目介绍BrowserToolsMCP是基于Anthropic的ModelContextProtocol（MCP）构建的浏览器交互工具，通过与CursorIDE等AI编辑器深度整合，实现...
- 正确复制、重写别人的代码，不算抄袭
-
我最近在一篇文章提到，工程师应该怎样避免使用大量的库、包以及其他依赖关系。我建议的另一种方案是，如果你没有达到重用第三方代码的阈值时，那么你就可以自己编写代码。...
- 它来了、全新的Vue3中文文档来了
-
Vue.js-渐进式JavaScript框架|Vue.jsPlayicon...
- “我们太乙变化大”——第一书记讲述贫困村变化
-
来源：江西日报-江西新闻客户端江西新闻客户端讯（江西日报记者唐燕）“2018年1月，组织安排我到太乙村开展帮扶工作。两年来，我亲眼目睹并亲身经历了群众生产生活发生的巨大变化。看到群众生活越来越幸福，我...
- 趋势科技杀软曝密码漏洞:允许远程代码执行
-
IT之家讯来自谷歌的安全研究员TavisOrmandy最近很忙。几周之前，他发现了AVG杀软扩展程序可以绕过Chrome商店中的审查机制，自动安装到用户的Chrome浏览器中，而且这个扩展还会泄露...
- Vue3安装使用方式详解
-
对于开发和学习任何一门新技术，新框架，最主要的还是能够运行起来，怎么运行起来，这才是最主要的。所以，我们来说一下Vue.js的安装方式。因为Vue.js的设计初始，就是一个渐进式的J...
- 设置 Cursor MCP 与 BrowserTools 服务
-
一、安装Chrome扩展打开Chrome网上应用店，搜索...
- 那些通用清除软件不曾注意的秘密
-
系统清理就像卫生检查前的大扫除，即使你使出吃奶的劲儿把一切可能的地方都打扫过，还会留下边边角角的遗漏。随着大家电脑安全意识的提高，越来越多的朋友开始关注自己的电脑安全，也知道安装360系列软件来"武装...
- SharpBrowser:用C#打造超快的个性化开源浏览器!
-
推荐一个基于.Net8和CefSharp开发的开源浏览器。项目简介SharpBrowser是一个用C#和CefSharp开发的全功能网页浏览器。它声称是最快的开源C#网页浏览器，渲...
- 一周热门
- 最近发表
- 标签列表
-
- mydisktest_v298 (34)
- document.appendchild (35)
- 头像打包下载 (61)
- acmecadconverter_8.52绿色版 (39)
- word文档批量处理大师破解版 (36)
- server2016安装密钥 (33)
- mysql 昨天的日期 (37)
- parsevideo (33)
- 个人网站源码 (37)
- centos7.4下载 (33)
- mysql 查询今天的数据 (34)
- intouch2014r2sp1永久授权 (36)
- 先锋影音源资2019 (35)
- jdk1.8.0_191下载 (33)
- axure9注册码 (33)
- pts/1 (33)
- spire.pdf 破解版 (35)
- shiro jwt (35)
- sklearn中文手册pdf (35)
- itextsharp使用手册 (33)
- 凯立德2012夏季版懒人包 (34)
- 冒险岛代码查询器 (34)
- 128*128png图片 (34)
- jdk1.8.0_131下载 (34)
- dos 删除目录下所有子目录及文件 (36)