首页 > 编程语言 >JavaScript WebAPI(三)(详解)

JavaScript WebAPI(三)(详解)

时间:2024-01-08 14:05:26浏览次数:36  
标签:WebAPI console log URL JavaScript 详解 location 执行 函数


这次介绍一下webAPI中的一些知识:

回调函数

回调函数是指 如果将函数A做为参数传递给函数B时,我们称函数A为回调函数

例如:

// 立即执行函数中传递的函数是一个回调函数
(function(){  
    console.log("我是回调函数")
})();
// 监听事件中传递的参数是一个回调函数
const div = document.querySelector('div')
div.addEventListener('click',function(){
    console.log("我是回调函数")
})

只需要记住,如果一个函数A调用函数B作为自己的参数,那么函数B就是回调函数

时间戳

定义:

时间戳是指用来表示某个时间点的数字或字符串。它通常是一个长整型数字,表示自某个固定的起始时间(如1970年1月1日00:00:00 UTC)到某个特定时间点所经过的秒数或毫秒数。时间戳在计算机系统中广泛应用,用于记录事件发生时间、排序、计时等方面。

时间戳的定义可以有多种形式,最常见的是UNIX时间戳,即从1970年1月1日00:00:00 UTC开始计算的秒数。例如,当前时间的UNIX时间戳可以表示为一个长整型数字,比如1638356433。

获取时间戳的三种方式:

  1. 使用方法(getTime())获取
    创建一个Date对象然后调用方法getTime()
const time = new Date()
console.log(time.getTime())
  1. 直接输出
    创建一个事件对象直接使用他的返回值
console.log(+new Date())
  1. 调用方法
console.log(Date.now())

可以使用 Date`构造函数来创建指定的日期和时间,构造函数的参数可以是数字、字符串或按年月日等顺序的多个数值。

例如,下面的代码创建了一个 Date 对象来表示 2022 年 10 月 24 日,上午 11 点 30 分:

const date = new Date(2022, 9, 24, 11, 30, 0);

移动端事件

JavaScript WebAPI(三)(详解)_开发语言

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            margin: 100px auto;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>
    </div>
    <script>
        const div = document.querySelector('div')
        div.addEventListener('touchstart', function () {
            console.log("开始触摸")
        })
        div.addEventListener('touchend', function () {
            console.log('离开了')
        })
        div.addEventListener('touchmove', function () {
            console.log('一直摸,移动')
        })
    </script>
</body>

</html>

JavaScript WebAPI(三)(详解)_前端_02

 

windows对象

将他称为BOM对象:这张图片整合的非常好,我直接放到这里了

JavaScript WebAPI(三)(详解)_回调函数_03

 

一些常见的Window对象的属性和方法包括:

  • window.alert():在屏幕上弹出一个警告框。
  • window.prompt():在屏幕上弹出一个提示框,要求用户输入文本。
  • window.confirm():在屏幕上弹出一个确认框,要求用户选择“确定”或“取消”。
  • window.location:表示当前页面的URL地址。
  • window.history:表示浏览器的历史记录,可以通过history.back()history.forward()方法回退和前进历史记录。
  • window.document:表示当前页面的文档对象,可以通过它访问和修改页面中的元素和内容。
  • window.setTimeout()window.setInterval():用于设置定时器,可以在指定的时间后执行一段代码,或每隔一段时间执行一段代码。
  • window.XMLHttpRequest():用于创建XMLHttpRequest对象,可以发送HTTP请求和接收服务器返回的数据。

定时器

重复执行

setInterval()是Window对象提供的一个方法,用于设置定时器,重复执行指定的代码或函数。它接受两个参数:要执行的代码或函数,以及执行的时间间隔(以毫秒为单位)。

setInterval(code, delay)
  • code:要执行的代码或函数。可以直接传入一段代码,也可以传入一个函数名。
  • delay:执行的时间间隔,以毫秒为单位。

例如,下面的代码会每隔1秒钟输出一次"Hello, World!":

setInterval(function() {
  console.log("Hello, World!");
}, 1000);

定时器会按照指定的时间间隔循环执行指定的代码或函数,直到页面被关闭或调用clearInterval()停止定时器。

需要注意返回的值是唯一的,一个定时器对应一个标识符,可以使用这个标识符来取消定时器,即停止代码的执行。可以使用clearInterval()方法来取消定时器,示例如下:

var timerId = setInterval(function() {
  console.log("Hello, World!");
}, 1000);

// 取消定时器
clearInterval(timerId);

定时器-延时函数:

定时执行相应的行为:只执行一次

用法和setInterval相似,填写等待事件 和 执行行为,清除也是调用只有一个标识符,没调用一次生成一个唯一的标识符,清除标识符clearsetTimeout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        const l = setInterval(() => {
            console.log(1)
        }, 1000);
        setTimeout(function(){
            clearInterval(l)
            console.log("清除成功")
        },3000)
    </script>
</body>
</html>

js执行机制

同步任务:就是再主线程上进行,形成一个执行栈

异步任务:

  1. 执行栈(Execution Stack):JavaScript代码的执行过程中,使用执行栈来管理函数调用和执行上下文。
  2. 任务队列(Task Queue):包括宏任务队列(macrotask queue)和微任务队列(microtask queue)。常见的宏任务包括setTimeout、setInterval、I/O操作等,而微任务包括Promise、MutationObserver等。
  3. 事件循环(Event Loop):不断地从任务队列中取出任务,放入执行栈中执行,这个过程就是事件循环。事件循环会不断地从任务队列中取出任务,放到执行栈中执行,直到任务队列为空。

JavaScript WebAPI(三)(详解)_开发语言_04

location

location的数据类型是对象,它拆分并保存了URL地址的各个组成部分

常用的属性和方法:

属性:

  • location.href:获取或设置完整的 URL。
  • location.protocol:获取或设置 URL 的协议部分(如 "http:"、"https:")。
  • location.host:获取或设置 URL 的主机部分(包括主机名和端口号)。
  • location.hostname:获取或设置 URL 的主机名部分。
  • location.port:获取或设置 URL 的端口号部分。
  • location.pathname:获取或设置 URL 的路径部分。
  • location.search:获取或设置 URL 的查询字符串部分(即问号后面的内容)。
  • location.hash:获取或设置 URL 的片段标识符部分(即井号后面的内容)。

方法:

  • location.assign(url):加载指定的 URL,作为新的文档。
  • location.reload():重新加载当前文档。
  • location.replace(url):用指定的 URL 替换当前文档,且不会生成新的历史记录。

navgator对象

检测设备然后查看是否需要自动跳转到对应的设备网站

JavaScript WebAPI(三)(详解)_前端_05

history对象:

执行前进或者后退操作

back()

执行的是后退的功能

forward()

前进功能

go(参数)

参数1前进 参数2 后退

本地储存:

localStorage:可以将数据永久储存到本地(电脑文件),除非手动删除,否则关闭页面也会存在

特性:

        可以多窗口(页面共享)

        以键值对的形式储存使用

储存数据:

语法:

储存数据:localStorage.setItem(key,value)

获取数据:localStorage.getItem(key)

删除数据.localStorage.removeItem(key)

// 存储数据
localStorage.setItem('key', 'value');

// 获取数据
var value = localStorage.getItem('key');

// 删除数据
localStorage.removeItem('key');

sessionStorage: 该对象用于临时保存数据,数据只在当前会话期间有效。当用户关闭了浏览器窗口或标签页后,数据会被清除。

// 存储数据
sessionStorage.setItem('key', 'value');

// 获取数据
var value = sessionStorage.getItem('key');

// 删除数据
sessionStorage.removeItem('key');

IndexedDB: IndexedDB是一种更高级的本地数据库解决方案,可以存储结构化数据。它提供了一个异步API,允许开发者执行复杂的数据库操作。

下面是使用IndexedDB进行基本操作的示例:

// 打开或创建数据库
var request = window.indexedDB.open('databaseName', version);

// 监听打开数据库的成功事件
request.onsuccess = function(event) {
  var db = event.target.result;
  
  // 执行数据库操作
  // ...
};

// 监听打开数据库的错误事件
request.onerror = function(event) {
  console.error("Database error: " + event.target.errorCode);
};

// 创建一个对象存储空间
var objectStore = db.createObjectStore('storeName', { keyPath: 'key' });

// 存储数据
var transaction = db.transaction('storeName', 'readwrite');
var store = transaction.objectStore('storeName');
store.put({ key: 'key1', value: 'value1' });

// 获取数据
var getRequest = store.get('key1');
getRequest.onsuccess = function(event) {
  var result = event.target.result;
  console.log(result);
};

// 删除数据
var deleteRequest = store.delete('key1');
deleteRequest.onsuccess = function(event) {
  console.log("Data deleted successfully");
};

标签:WebAPI,console,log,URL,JavaScript,详解,location,执行,函数
From: https://blog.51cto.com/u_16426526/9143914

相关文章

  • JavaScript WebApi(二) 详解
    监听事件介绍事件监听是一种用于在特定条件下执行代码的编程技术。在Web开发中,事件监听器可以用于捕获和响应用户与页面交互的各种操作,如点击、滚动、输入等。事件监听的基本原理是,通过在特定元素上注册事件监听器,当事件在该元素上触发时,相应的处理函数会被执行。以下是事件监听的......
  • 猿人学第一题 js混淆 双重加密(详解)
    当我们点击分页的时候可以确定这个请求过程是ajax请求,所以直接使用抓包工具找到储存信息的请求。找到这个请求之后,我们明显发现?后面的参数m是一个加密过的由于这个请求属于ajax请求,现在我们可以直接使用xhr断点调试找到位置打上断电之后直接分页请求。进入调试直接在右边堆栈中开......
  • CSS flex布局(详解)
    前面我们学了很多基本的布局,现在我们将学习一种新的布局方式,这种布局方式更为常用,并且可以缩减很多不必要的代码。我们来看一个实际中的布局。代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,ini......
  • JavaScript WebApi 一(详讲)
    基础知识在前面的部分已经讲过了,大家如果没有学习过JavaScript的可以去看一下1.DOM引入在JavaScript中,DOM(文档对象模型)提供了一种表示和操作HTML文档的方式。在DOM中,文档被表示为一个由节点组成的树形结构。DOM对象则是这些节点的抽象表示,它们可以通过JavaScript来访问和操作。DOM......
  • css动画(详解)
    你是否惊讶于为啥别人的网站效果那么好,自己的只有简单的布局,和图片加持。没事,这篇博客将带你了解制作动画,让你的网页变得更加生动。动画的制作:制作动画,我们需要选择动画的类型,这里我采用的是使用keyframes类型的关键帧动画,定义一个动画@keyframes动画名称{关键帧的相应执行操......
  • 详解Java死锁-检测与解决
    第1章:引言大家好,我是小黑,咱们今天来聊聊死锁。特别是对于咱们这些Java程序员来说,死锁就像是隐藏在暗处的陷阱,稍不注意就会掉进去。但别担心,小黑今天就来带大家一探究竟,看看怎么样才能避免这个陷阱。什么是死锁?简单来说,死锁就是两个或多个进程互相等待对方释放资源,结果大家都动......
  • Java中的InputStream和OutputStream详解
    引言在Java编程中,处理输入输出是日常任务的一部分,而流(Stream)是实现输入输出的核心概念。在JavaI/OAPI中,InputStream和OutputStream是所有字节流类的基础。本文将详细介绍这两个类及其在Java中的应用。什么是InputStream和OutputStream?InputStream是JavaI/O库中的一个抽象类,它......
  • C++指针详解
    定义:指针是一个整数,一种存储内存地址的数字内存就像一条线性的线,在这条街上的每一个房子都有一个号码和地址类似比喻成电脑,这条街上每一个房子的地址是一个字节我们需要能够准确找到这些地址的方法,用来读写操作因此,指针就是这些地址。不要考虑类型,无论是什么类型的指针,都是用来保......
  • Unity3D UGUI的Button组件的介绍及使用详解
    Unity3D是一款功能强大的游戏开发引擎,而UGUI是Unity3D提供的一套用户界面系统。在UGUI中,Button组件是最常用的组件之一,本文将详细介绍Button组件的使用方法和相关技术细节。对啦!这里有个游戏开发交流小组里面聚集了一帮热爱学习游戏的零基础小白,也有一些正在从事游戏开发的技术大......
  • 详解Java中的原子操作
    第1章:什么是原子操作大家好,我是小黑,面试中一个经常被提起的话题就是“原子操作”。那么,到底什么是原子操作呢?在编程里,当咱们谈论“原子操作”时,其实是指那些在执行过程中不会被线程调度机制打断的操作。这种操作要么完全执行,要么完全不执行,没有中间状态。这就像是化学里的原子,不......