# JavaScript - JavaScript行为效果交互

通过HTML内容信息结构布局及CSS排版定位视觉渲染之后，接下来就需要JavaScript脚本语言闪亮登场了。JavaScript属于客户端的脚本语言，与HTML页面进行动态交互；一定程度上它也是客户端与服务器端沟通的一座桥梁。随着事物的发展变化，如今ECMAScript则为其标准，如同HTML与HTML5、CSS与CSS3一般升级、统一及标准化变迁。同样，这也是web前端开发者应具备了解且熟练应用的脚本语言。

Canonical: https://www.deathghost.cn/catalog/javascript

Keywords: JavaScript, 脚本语言, ECMAScript, ES6, Node.js, TypeScript

## JavaScript

JavaScript行为效果交互

- [JS原生的深拷贝API structuredClone()](https://www.deathghost.cn/article/javascript/120)
  2025-01-25 13:35:28 - 我喜欢新的，直接点的...
- [Web Worker 简单实例应用](https://www.deathghost.cn/article/javascript/114)
  2023-09-04 19:43:06 - 前端页面开发过程中或多或少会使用setInterval()与setTimeout()方法，这两天准备用它们做个简单的页面检测，谁料出现了问题...
- [取消页面再次加载后的滚动位置](https://www.deathghost.cn/article/javascript/109)
  2022-06-11 12:40:44 - 时常web页面中会用到或看到：history.forward()、history.back()或history.go(1)之类的操作，下面了解一个history另外一个属性 —— scrollRestoration 滚动恢复。
- [EyeDropper API - 启用浏览器吸管工具获取屏幕任意目标元素HEX色值](https://www.deathghost.cn/article/javascript/105)
  2021-11-15 22:17:27 - Photoshop、Illustrator等一些图形、图像设计软件都有一个吸管工具，作用就是拾取元素中某一位置的颜色，填充待作业的元素。Web开发中 HTML Input Color type 属性也可以做到类似效果，它类似Photoshop中前景色与背景色填色效果；那Web端有没有类似吸管工具的效果？
- [at 相对索引方法 - 查找元素](https://www.deathghost.cn/article/javascript/104)
  2021-11-13 12:08:31 - 查找数组元素是Web前端开发过程中常见的任务，如：查找数组中符合条件的元素或其下标。通常会通过find与findIndex方法查找元素与下标进行相应处理；以及查找数组中第一个元素或最后一个元素又或某一位置元素。
- [Intl.NumberFormat数字格式化应用](https://www.deathghost.cn/article/javascript/92)
  2021-03-13 21:22:46 - Web前端开发过程中常会对后端传递过来的数值类型的对象进行格式化处理，以便用户更好的阅读。例如：数据统计里的数值、货币、百分比、角度、字节、面积、质量、温度、长度、容量及一些符合单位等数据类型进行处理转换。所以下面看看关于Intl.NumberFormat对象对这些数值如何处理。
- [Intl.ListFormat对象 根据语言环境进行列表格式化](https://www.deathghost.cn/article/javascript/91)
  2021-03-05 19:38:55 - Intl 对象是 ECMAScript 国际化 API 的一个命名空间，它提供了精确的字符串对比、数字格式化，和日期时间格式化。下面这篇文章了解下关于Intl.ListFormat对象，针对列表元素进行数据格式化。
- [剪贴板 navigator.clipboard API 异步读写](https://www.deathghost.cn/article/javascript/89)
  2021-01-24 21:56:41 - Web开发人员在实际工作中多少会遇到与用户剪贴板进行交互，以便实现用户体验需求。剪贴、复制、粘贴这几个操作也是计算机操作中常常会使用的几个功能按键。前端开发人员第一个想到的就是document.execCommand()方法，下面看看新的API方法，它的出现就是为了取代document.execCommand()方法。
- [String.prototype.replaceAll 替换字符串新方法](https://www.deathghost.cn/article/javascript/84)
  2020-10-22 20:15:27 - 通常我们使用JavaScript处理字符串的时候会使用replace方法。String.prototype.replace(searchValue, replacement)指定字符串及所需替换为某一字符串，最后返回一个被替换过的字符串。那么，接下来看看关于replaceAll()方法。
- [MutationObserver监听DOM变更应用](https://www.deathghost.cn/article/javascript/79)
  2020-07-16 22:58:02 - MutationObserver接口提供了实时检测DOM属性或节点变更时调用。犹如单页面应用中的数据双向绑定监听其数据变更一般。只要属性或节点变更，就执行其他操作。
- [高阶函数替换JavaScript中的循环](https://www.deathghost.cn/article/javascript/75)
  2020-05-26 21:51:01 - JavaScript新方法代替传统循环方法操作。本篇文章对比介绍实际场景方法运用。
- [初略Web API Notification 桌面通知](https://www.deathghost.cn/article/javascript/74)
  2020-05-09 00:41:47 - HTML5 Web Notifications API 通知接口用于向用户配置和显示桌面通知弹窗。例如，Email邮件通知、来电提醒、聊天信息提醒或任务提醒等。
- [视频画中画Web API粗略](https://www.deathghost.cn/article/javascript/59)
  2019-11-28 00:54:25 - 视频画中画，用户在浏览web页面信息时，可将视频弹出到一个悬浮可随意拖放的一个顶层小窗口，可继续阅读页面其他信息或进行其他操作。
- [Object.entries() 与 Object.fromEntries() 方法应用](https://www.deathghost.cn/article/javascript/57)
  2019-08-17 17:03:35 - Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组，而Object.fromEntries() 方法把键值对列表转换为一个对象。
- [JavaScript flat 提取嵌套数组元素](https://www.deathghost.cn/article/javascript/56)
  2019-08-07 00:57:27 - flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
- [通过 Web API Vibration 触发移动端物理振动](https://www.deathghost.cn/article/javascript/55)
  2019-08-03 15:52:37 - 大多数移动设备支持硬件振动，可通过代码向用户提供物理性反馈；Vibration API 则允许前端开发人员通过JavaScript触发设备在给定的时间内振动。
- [Intl.RelativeTimeFormat相对时间格式化](https://www.deathghost.cn/article/javascript/53)
  2019-07-17 21:17:55 - 该Intl.RelativeTimeFormat对象是一个构造函数，可以实现本地区域化相对时间格式。犹如Web端我们常见的“昨天”，“20秒前”或“1个月”之类的短语，而不是完整日期和时间戳。
- [HTML5 音频或视频实现倍速播放](https://www.deathghost.cn/article/javascript/51)
  2019-07-13 01:04:59 - 我们可以通过playbackRate属性对web音频或视频进行速率控制，进而对部分用户提供辅助性选择体验。
- [JavaScript通过onscroll实现页面顶部进度条效果](https://www.deathghost.cn/article/javascript/47)
  2019-05-20 23:26:23 - 当我们获取页面内容高度、窗口可视高度及其可滚动高度值时，当页面的滚动条滚动时,我们可以通过该事件实现页面滚动进度条效果。
- [electron基础构建跨平台桌面应用 web端生成EXE文件](https://www.deathghost.cn/article/javascript/42)
  2018-12-22 19:51:53 - 通过HTML，CSS和JavaScript来构建跨平台桌面应用程序，Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。
- [web端获取电池电量及充电状态信息](https://www.deathghost.cn/article/javascript/41)
  2018-12-04 22:09:04 - web接口Battery Status API获取电池状态及充电状态，我们可以将其应用在移动web端，根据电池状态信息或充电状态对其做进一步的用户交互操作。
- [借助ES6中export和import通过execCommand方法实现一个可插入emoji表情的简易消息窗口](https://www.deathghost.cn/article/javascript/37)
  2018-09-15 18:09:52 - 此文主要提及几个知识点，没有可研究价值，具体的方法可以查看相关文档；本文主要将emoji表情单独列于js文件export后，通过import将其导入，对其表情渲染输出；可运用在web文本信息聊天或邮件类场景。
- [JavaScript对字符串进行Base64的编码与解码 以及中文乱码处理方法](https://www.deathghost.cn/article/javascript/30)
  2018-08-05 14:45:27 - 在实例部分情景中，犹如我们需要对密码进行Base64编码或解码，一般情况下，我们会直接引用网上base64.js文件对其处理。现在我们直接可以使用WEB API提供的WindowBase64的两个函数对其处理，window.btoa()编码与window.atob()解码对其处理。
- [html5前端上传图片预览删除小实例 js图片base64预览操作](https://www.deathghost.cn/article/javascript/27)
  2018-07-19 20:10:25 - 在项目操作中，时常会用到图片上传功能，例如：上传头像，上传封面照片或产品图片等。我们可以借助Web App中得FileReader接口对其读取进行相应操作。