首页 前端开发 Web前端入门第 52 问:JavaScript 的应用领域

Web前端入门第 52 问:JavaScript 的应用领域

截至目前,您应该对前端的 HTML + CSS 应该有了很清楚的认知,至少实现一个静态网页已经完全不在话下了。

当然,CSS 功能绝不止这些,一些不太常用的 CSS 相关知识,后续将通过案例进行分享。

那么咱们接下来看看 JavaScript 的相关知识,作为前端领域三剑客之一,JavaScript 也是前端最核心的技术。

JavaScript 简称 JS,虽然它有 Java 关键字,但您必须要知道它其实与大名鼎鼎的 Java 没任何关系,据说这可能想趁 Java 热度所以才有了 JavaScript 这个名字。

JavaScript 的应用领域
在学习 JS 之前,您必须要先知道 JS 它可以用来做什么,毕竟学习一门技术,必须要有一个目标对不。

Web 前端开发
JS 的诞生就是为了弥补 Web 开发的局限性,所以最初的目的就是用来做 Web 前端开发。

核心能力:操作 DOM、处理交互、动态渲染页面。这里就不得不说 jQuery 了,它可以算是这个领域的代表之一。

现代开发框架代表:React、Vue、Angular。用于构建大型 Web 应用的技术手段之一,完全实现了前后端分离。当然这些框架也都是站在了 nodejs 的肩上,没有 nodejs 它们的影响力至少减半。

Web 后端开发
Node.js:用于构建服务端的技术之一。谷歌开源的 V8 引擎赋予了 JavaScript 灵魂,让曾经只能跑在浏览器端的 JS 可以轻松运行在服务端,让 JS 在服务端领域可以与其他服务端编程语言一争高低,代表框架 Express、Koa、NestJS等。

全栈开发
结合前端 React、Vue 和 Node.js,可以轻松做到全栈开发,让曾经只能在浏览器那角落玩耍的前端开发者们,轻轻松松的实现了领域跨越。

移动应用开发
JS 也能做移动端的 APP 开发,可以用 JS 开发 iOS/Android 原生应用,代表框架:React Native、uni-app。

桌面应用开发
基于 V8 引擎,让 JS 可以轻松实现桌面应用开发,代表框架:Electron。

游戏开发
2D/3D 游戏开发,代表框架:Phaser.js(2D)、Three.js/Babylon.js(3D)、Unity 支持通过 WebGL 导出 JS 项目。

也可使用 WebXR 开发 AR/VR 游戏。

物联网(IoT)与硬件
通过 Node.js 控制树莓派(Raspberry Pi)、Arduino 等硬件,也可使用 Johnny-Five 库进行机器人编程。

数据可视化
代表框架:D3.js、ECharts、Chart.js、Three.js。

机器学习与 AI
浏览器中训练/部署模型(如图像识别),代表框架:TensorFlow.js。

自然语言处理,代表框架:Brain.js、Natural。

构建工具
用于构建 Web 应用,比如 React、Vue、Angular 等应用打包,代表工具:Webpack、Vite、Rollup。

测试框架
用于编写端到端测试、单元测试。代表框架:Jest、Cypress。

WebAssembly
JS 与 WebAssembly(WASM)结合,实现高性能计算。比如通过 Emscripten 将 C/C++ 编译成 WASM,再通过 JS 调用。

写在最后
JavaScript 的生态版图可以说非常丰满,选择一个您感兴趣的方向专研下去必有一番成就。

当然在走向兴趣的道路之前,咱们还需要先了解 JS 的基础语法,没有基础,任何高楼幻想都是泡影~~

站星网

截至目前,您应该对前端的 HTML + CSS 应该有了很清楚的认知,至少实现一个静态网页已经完全不在话下了。当..

为您推荐

告别 DOM 的旧时代:从零重塑 Web 渲染的未来

引言浏览器这玩意儿现在真够诡异的。WebAssembly 在服务器端混得风生水起,但客户端还是那副老样子,跟十年前没啥区别。WASM 粉会跟你吹,通过点 JS 胶水代码就能调原生 Web API。但核心问题是:为啥非得用 DOM?这..

Web前端入门第 81 问:JavaScript cookie 的读写操作

前端的 cookie 读写在 2020 年之前一直不存在一个官方的接口,每次需要使用 cookie 的时候,要么是引入三方插件,要么就需要自己封装一个公用的组件或函数。npm 的 cookie 插件周下载量 6 千万左右,可以想象一下此..

Web前端入门第 79 问:JavaScript async & await 的异步任务进化之路

JS 中异步任务随处可见,比如:1、用户交互的点击、输入2、网络请求的 fetch、ajax、WebSocket3、资源中的图片、脚本加载4、定时任务 setTimeout、setInterval、动画5、Web Worker 中的后台任务以上这些地方都能见到..

Web前端入门第 78 问:JavaScript 比较少见的模版字符串用法

在 ES6 之前,JS 的多行字符串一直是开发难题,在处理多行字符串时,各种各样的方案都有~~在 JS 中,如果直接这样写多行字符串:const str1 = '第一行第二行';那浏览器转过来就打脸,分分钟报错:Uncaught S..

Web前端入门第 76 问:JavaScript 鼠标事件(mouse) enter/leave 和 over/out 区别

题外话在考察事件基础的时候,会经常被问及 click、mousedown、mouseup 它们三者执行的先后顺序是怎样的?如果平时没太注意,这细节可能就会忽略,毕竟很少会在同一个元素上面同时绑定这三个事件~~直接上示例:<div ..

Web前端入门第 67 问:JavaScript 中的面向对象编程

此 对象 非彼对象啊,不要理解错了哦~~面向对象编程 这个概念在 Java 编程语言中用得比较多,JS 同时支持 面向对象编程 和 函数式编程。像大名鼎鼎的 React 和 Vue 他们都有两种开发风格,比如:Vue 中的 组合式API ..

Web前端入门第 57 问:JavaScript 数据类型与类型转换

在程序语言中,数据类型是基础,一切程序都是建立在基础数据之上。如果说程序如同万丈高楼平地起,那么数据类型就像沙、石、钢筋、水泥等等最基础的原料。一样的高楼,不同的人,用相同的原料,造的方法也会有千般变..

JavaScript实现图片上传预览及获取图片尺寸和大小的完整指南

在现代Web开发中,提供图片上传的预览功能以及获取图片的尺寸和大小信息,已成为提升用户体验的重要手段。本文将详细介绍如何使用JavaScript实现这些功能,帮助你在用户上传图片前进行有效的验证和优化。一、实现图..

Web前端入门第 60 问:JavaScript 各种数组定义与数组取值方法

数组可以算是程序里面最常用的数据结构了,但凡网页上任何一个列表数据,基本都是以数组的形式存在,像表格、banner图、菜单列表、商品列表,分类列表等等,在前端领域都是以数组处理。数组的定义JS 的数组花样很多..

Web前端入门第 55 问:JavaScript 严格模式与非严格模式区别

JavaScript 默认是非严格模式的,可以通过 "use strict"; 启用严格模式。此声明语句可以放在 JS 文件顶部,也可以放在函数内部。启用严格模式1、外部脚本在 JS 文件开头声明,内部脚本在 <script> 标签开头声明,声..

Web前端入门第 53 问:JavaScript 的各种调试方法

任何一门编程语言,在学习之前都应该先弄清楚它的调试方法,毕竟没有不挖坑的人类!程序一旦出现问题,第一时间就是找到问题出在哪儿,其次才是拿出解决办法。如果都找不到问题原因,那又何从谈起解决办法呢?如何排..

Web前端入门第 54 问:JavaScript 3 种书写位置及 script 标签的正确存放位置

JS 的代码并没有强制规定放在 HTML 中的某个位置,如果您有使用过开发者工具查看过网页源码,那么您会看到很多 JS 代码都以 .js 文件的形式存放,并且放在了 HTML 文件最后,也就是 </body> 结束标签之前。但如果仔..

.NET C# 过滤从富文本编辑器html里的Javascript脚本

富文本编辑器在允许用户输入丰富内容的同时,也带来了跨站脚本攻击(XSS)的风险。过滤提交的 HTML 中的 <script> 脚本是防止跨站脚本攻击(XSS)的关键步骤。在 .NET C# 服务端过滤 <script> 脚本主要有以下几种方..

轻松学习 JavaScript函数中的默认参数

JavaScript函数可以有默认参数值。通过默认函数参数,你可以初始化带有默认值的正式参数。如果不初始化具有某些值的参数,则该参数的默认值为undefined。请看下列代码:function foo(num1){console.log(num1);}foo()..

JavaScript API 设计原则详解

前言本篇博文来自一次公司内部的前端分享,从多个方面讨论了在设计接口时遵循的原则,总共包含了七个大块。系卤煮自己总结的一些经验和教训。本篇博文同时也参考了其他一些文章,相关地址会在后面贴出来。很难做到详..

JavaScript 中精度问题以及解决方案

JavaScript 中的数字按照 IEEE 754 的标准,使用 64 位双精度浮点型来表示。其中符号位 S,指数位 E,尾数位M分别占了 1,11,52 位,并且在ES5 规范中指出了指数位E的取值范围是[-1074, 971]。精度问题汇总想用有限..

JavaScript 六种继承方式

继承是面向对象编程中又一非常重要的概念,JavaScript支持实现继承,不支持接口继承,实现继承主要依靠原型链来实现的。原型链首先得要明白什么是原型链,在一篇文章看懂proto和prototype的关系及区别中讲得非常详细..

JavaScript 事件委托详解

基本概念事件委托,通俗地来讲,就是把一个元素响应事件(click、focus……)的函数委托到另一个元素;一般来讲,会把一个或者一组元素的事件委托到它的父层或者更外层元素上,真正绑定事件的是外层元素,当事件响应..

JavaScript 中的遍历详解

编程这么多年,要是每次写遍历代码时都用 for 循环,真心感觉对不起 JavaScript 语言~对象遍历为了便于对象遍历的测试,我在下面定义了一个测试对象obj。测试对象// 为 Object 设置三个自定义属性(可枚举)Object.p..

web前端开发2018年12月找工作总结

2018年的冬天额外的冷,由内致外...作为一名刚刚踏入社会的实习生,可谓是狠狠的体验了一把什么叫社会(同时也感叹父母赚钱真的很不容易)前几天看见这样一句话"如果你不知道社会的辛苦,要么是有人替你扛了,要么是还没轮..

发表回复

返回顶部

微信分享

微信分享二维码

扫描二维码分享到微信或朋友圈

链接已复制