JavaScript简介:从概念、特点、组成和用法全面带你快速了解JS
myzbx 2024-12-01 18:27 23 浏览
“这里是云端源想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
文案编辑|云端学长
文案配图|云端学长
内容由：云端源想分享
相关推荐
- 陈冠希飞机争执事件:维权还是失态?
-
陈冠希最近又上热搜了！这次不是因为潮牌，而是在飞机上和机组人员“杠”上了。事情是这样的：他在东京飞纽约的航班上，发现机组人员让一名日籍VIP乘客优先下机，当场就炸了，直接质问：“我跟他哪里不一样？钻石...
- 风向变了，小S被吴宗宪猛爆黑料，至亲好友背刺，s家乱成一锅粥
-
前言当吴宗宪5月26日直播中甩出"黄子佼犯罪小S知情"的录音时，谁还记得这对师徒曾在《我猜》里默契十足的黄金年代？昔日提携晚辈的综艺天王，如今用三小时连爆12条黑料，把综艺女王钉在道德...
- 吴宗宪开撕小S，离婚内幕疑曝光，S家起内讧，汪小菲果然没说错
-
文|东方不败难怪葛思琪说小S大概率是不能复出了。原来一切都是有迹可循的！被吴宗宪猛曝黑料、被至亲好友背刺。失去大S的s家彻底乱成一锅粥。小S还能如以往那般幸运地“化险为夷”吗？01不得不说，作为台湾主...
- 美国俄亥俄大学性侵案细节曝光，新纪录片揭开体育界被忽视的丑闻
-
美国俄亥俄州立大学一直是美国校际体育运动的标杆，以至于很少有人将该大学与美国历史上最令人震惊的性虐待丑闻联系起来。近日，由澳大利亚纪录片导演伊娃·奥纳（EvaOrner）执导的《俄亥俄州立大学的幸存...
- 陈冠希飞机上怒怼空姐，称要让其丢掉工作?原因曝光后大家纷纷支持
-
【点新闻报道】44岁的陈冠希（Edison）被爆料在一架由东京羽田飞往纽约的航班上，疑不满头等舱的下机安排，与空姐发生口角，甚至放话：“把客诉信拿来，我会让你丢工作！”，引发网上热议。有内地网民在小红...
- 陈冠希机上风波再起!一场由“优先权”引发的对峙
-
一句“我会让你丢工作”的激烈争执录音，将陈冠希再次推向风口浪尖。飞机引擎的轰鸣尚未完全停歇，纽约机场的廊桥尚未对接，头等舱内的空气却已骤然凝固。44岁的陈冠希，这位早已褪去偶像光环却始终身处舆论漩涡...
- 传祺M8 vs 别克GL8，谁才是MPV终极选择?
-
广汽传祺M8与别克GL8一直都是很多人在选择MPV时纠结的对象，尤其是对于选择“困难症”的朋友来说，更是如此。今天我们将广汽传祺M8大师超混版和别克GL8ES陆尊进行对比，看看究竟怎么选！不是合资买...
- 开源鸿蒙OpenHarmony 6.0 Beta1发布
-
IT之家6月19日消息，开源鸿蒙OpenHarmony6.0Beta1（APILevel20）现已发布并上线Gitee。据介绍，OpenHarmony6.0Beta1版本进一...
- 巴雷特(Barrett)食管（巴雷特食管?）
-
近年来随着HP根除的增加等因素存在，食管胃结合部腺癌发病率逐年增加，食管胃结合部腺癌主要包括Barrett腺癌、胃贲门腺癌，而Barrett食管（Barrett’sesophagus，BE）为Bar...
- 儿子对象三天不出门 吵架动手后关系僵持
-
这几天家里事儿多。儿子交的女朋友搬来同住三天，人跟消失似的。每天中午才起床吃我家做的饭，吃完就喊着出去，问晚上回不回来，答不回来。昨天中午我找她谈儿子动手的事，她也不说话，现在微信电话全拉黑，连饭都不...
- 偷鸡不成蚀把米!命理师称小S将有大劫，老公许雅钧被爆换继承人
-
近期有命理师称小S将有大劫，其老公许雅钧也被爆换继承人，具体情况如下：命理师称小S有大劫有台湾省命理师称小S面相不好，将会有一场“大劫”，会影响到她生活的重大事件。还有细心网友翻出2022年某命理师在...
- 如何设计Agent的记忆系统（agent记忆方法）
-
最近看了一张画Agent记忆分类的图我觉得分类分的还可以，但是太浅了，于是就着它的逻辑，仔细得写了一下在不同的记忆层，该如何设计和选型先从流程，作用，实力和持续时间的这4个维度来解释一下这几种记忆：1...
- 深入理解跨域及常见误区揭秘（深入理解跨域及常见误区揭秘论文）
-
跨域问题是前端与后端协作中不可避免的话题，处理不当将直接影响系统可用性与安全性。本文将系统梳理跨域的概念、原理、常见解决方案，并结合实际开发中易错点进行总结，帮助你全面掌握跨域知识。一、什么是跨域？*...
- aardio + Java + JavaScript 混合开发快速入门
-
aardio最近在AI功能上做了很多细节的改进，建议大家更新。aardio的AI接口里的Gemini2.5pro更新到了刚发布的最新版本（Gemini2.5pro0605），...
- 一种改进的锂离子电池剩余寿命预测算法
-
摘要：锂离子电池故障往往会使系统性能下降甚至瘫痪，故障部件剩余寿命的精确估计对整个系统的寿命预测和健康管理至关重要。粒子滤波是一种有效的序列信号处理方法，然而应用于锂离子电池剩余寿命预测准确性并不高...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 选择器 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)