WebApis学习笔记,第二节:高级语法

news/2024/11/24 1:15:56/

WebApis学习笔记,第二节:高级语法

一、JS组成

我们再回顾一下JS的组成:ECMAScript:
·规定了js基础语法核心知识。
·比如:变量、分支语句、循环语句、对象等等Web APIs :
·DOM 文档对象模型, 定义了一套操作HTML文档的API  (document  object model)
·BOM 浏览器对象模型,定义了一套操作浏览器窗口的API (browser object model)

在这里插入图片描述

前面我们简答的学习了DOM的相关语法,接下来我们看下BOM的语法:BOM (Browser Object Model ) 是浏览器对象模型
·window对象是一个全局对象,也可以说是JavaScript中的顶级对象
·像document、alert()、console.log()这些都是window的属性,基本BOM的属性和方法都是window的
·所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
·window对象下的属性和方法调用的时候可以省略window【navigator\location\document\history\scree】

二、定时器:延迟函数与间歇函数

JavaScript 内置的一个用来让代码延迟执行的函数,叫 setTimeout1、语法:
setTimeout(回调函数, 延迟时间)setTimeout 仅仅只执行一次,所以可以理解为就是把一段代码延迟执行, 平时省略window2、注意:
延时函数需要等待,所以后面的代码先执行
返回值是一个正整数,表示定时器的编号3、清除延时函数:
clearTimeout(timerId)
间歇函数 setInterval : 每隔一段时间就执行一次, , 平时省略window
//1、延迟函数
let timerId = setTimeout(() => {console.log("我是一个延迟函数");
}, 5000);console.log("延迟函数需要等待,所以我先执行,等时间到了,它再执行");console.log("timerId:" + timerId);//清除延迟函数
//clearTimeout(timerId);
console.log("================================");//2、间歇函数
let intervalTimerId = setInterval(() => {console.log("我是一个间歇函数");
}, 5000);console.log("间歇函数也需要等待,所以我限制性,等时间到了,它再执行");console.log("intervalTimerId:" + intervalTimerId);//清除间歇函数
//clearInterval(intervalTimerId);

三、location对象

location (地址) 它拆分并保存了 URL 地址的各个组成部分, 它是一个对象
属性/方法说明
href属性,获取完整的 URL 地址,赋值时用于地址的跳转
search属性,获取地址中携带的参数,符号 ?后面部分
hash属性,获取地址中的啥希值,符号 # 后面部分
reload()方法,用来刷新当前页面,传入参数 true 时表示强制刷新
<a href="#download">下载</a>
<input class="reload" type="button" value="点我">
<script>
//测试访问路径:http://127.0.0.1:5500/location对象.html?keyword=abc#download//1、href获取完整地址
console.log(location.href);//2、search获取?号后面的地址
console.log(location.search);//3、hash获取#号后面哈希值
console.log(location.hash);//4、reload刷新页面
const clickBut = document.querySelector(".reload");
clickBut.addEventListener('click', function () {location.reload();//刷新页面location.reload(true);//强制刷新页面ctrl+f5
});
</script>

四、navigator对象

//navigator是获取浏览器相关信息的对象
console.log(navigator);
document.write(navigator.userAgent);
document.write("<br/>");
document.write(navigator.language);

五、history对象

history (历史)是对象,主要管理历史记录, 该对象与浏览器地址栏的操作相对应,如前进、后退等
方法作用
back()后退
forward()前进
go(参数)参数1是前进1步,-1是后退一步,以此类推
<body><button class="forwardBtn">前进→</button><button class="backBtn">←后退</button><script>const forwardBtn = document.querySelector(".forwardBtn");const backBtn = document.querySelector(".backBtn");forwardBtn.addEventListener("click", () => {history.forward();// history.go(1);});backBtn.addEventListener("click", () => {history.back();// history.go(-1);});</script>
</body>

六、本地存储

本地存储,顾名思义就是将数据存储在本地浏览器中好处:
1、页面刷新或者关闭不丢失数据,实现数据持久化
2、容量较大,sessionStorage和 localStorage 约 5M 左右

1、localStorage

localStorage:数据可以长期保留在本地浏览器中,刷新页面和关闭页面,数据也不会丢失以键值对的形式存储,并且存储的是字符串, 省略了window语法:
1、localStorage.setItem(key,value)  存储数据
2、localStorage.getItem(key)  读取数据
3、localStorage.removeItem(key) 删除数据
<script>//使用localStorage将年龄存储在浏览器中localStorage.setItem("age", 18);localStorage.setItem("name", "lee");//从localStorage中获取年龄console.log(localStorage.getItem("age"));console.log("存储的类型是:" + (typeof localStorage.getItem("age")));console.log("存储的类型是:" + (typeof localStorage.getItem("name")));//清除localStoragelocalStorage.removeItem("age");//再次获取ageconsole.log(localStorage.getItem("age"));
</script>
##结果:18存储的类型是:string存储的类型是:stringnull

2、sessionStorage

sessionStorage:数据短期保留在本地浏览器中,刷新页面,数据也不会丢失特性:
1、用法跟localStorage基本相同
2、区别是:当页面浏览器被关闭时,存储在 sessionStorage 的数据会被清除语法:
1、sessionStorage.setItem(key,value)  存储
2、sessionStorage.getItem(key) 获取
3、sessionStorage.removeItem(key) 删除
<script>//1、尝试获取下 上个练习存储的 localStorage let name = localStorage.getItem("name");console.log("localStorage-name:" + name);//2、sessionStorage存储sessionStorage.setItem("home", "handan");sessionStorage.setItem("birthday", "2021-12-04");//3、sessionStorage查询console.log("home:" + sessionStorage.getItem("home"));console.log("home:" + typeof sessionStorage.getItem("home"));//4、sessionStorage删除sessionStorage.removeItem("home");console.log("home:" + sessionStorage.getItem("home"));
</script>
##结果:
localStorage-name:lee
home:handan
home:string
home:null

3、存储复杂数据类型

本地只能存储字符串,无法存储复杂数据类型.解决方案:
1、需要将复杂数据类型转换成 JSON字符串,在存储到本地语法:
1、JSON.stringify(复杂数据类型) //将对象转为JSON字符串  
2、JSON.parse(JSON字符串)  //将JSON字符串解析为对象
<script>//1、定义一个复杂数据类型let user = {"age": 18,"name": "lee","home": "handan",sayHi: function () {console.log("hello lee");}}user.sayHi();//2、转换成字符串let userStr = JSON.stringify(user);//3、存储localStorage.setItem("user", userStr);sessionStorage.setItem("user", userStr);//4、查询console.log(localStorage.getItem("user"));console.log(sessionStorage.getItem("user"));//5、转换let newUser = JSON.parse(localStorage.getItem("user"));console.log(newUser);console.log(newUser.age);console.log(newUser.name);console.log(newUser.home);console.log(newUser.sayHi());//证明本地存储 不存函数
</script>

六、数组

1、map方法

map 可以遍历数组处理数据,并且返回新的数组
//1、map创建新的数组
let myArr = ["1", "2", 3];
const newArr = myArr.map((el, index) => {console.log(el + "  " + index);return el + 1;
});
console.log(myArr);
console.log(newArr);
console.log("-------------------");
#结果:
1  0
2  1
3  2
['1', '2', 3]
['11', '21', 4]

2、join方法

join() 方法用于把数组中的所有元素转换一个字符串
//2、join将所有的内容拼接为一个字符串
let myStr1 = myArr.join();
console.log(myStr1);
let myStr2 = myArr.join("");
console.log(myStr2);
let myStr3 = myArr.join("β");
console.log(myStr3);
#结果:
1,2,3
123
1β2β3

七、正则表达式

正则表达式(Regular Expression)是一种字符串匹配的模式(规则)使用场景: 验证表单、过滤敏感词汇等语法:
1、const reg =  /表达式/          //定义规则·其中/ /是正则表达式字面量
·正则表达式也是对象2、test()     //使用正则·test()方法 用来查看正则表达式与指定的字符串是否匹配
·如果正则表达式与指定的字符串匹配 ,返回true,否则false3、replace(表达式,待替换的文本)  //字符串替换
· i 代表ignore,正则匹配时,字母不区分大小写
· g 代表global,匹配所有满足表达式的结果,如果没有g,默认只匹配第一个
· m 执行多行匹配
概念:1、普通字符
·大多数的字符仅能够描述它们本身,这些字符称作普通字符,例如所有的字母和数字。
·普通字符只能够匹配字符串中与它们相同的字符。2、元字符
·是一些具有特殊含义的字符,可以极大提高了灵活性和强大的匹配功能。
·比如,规定用户只能输入英文26个英文字母,换成元字符写法: /[a-z]/普通字符写法只能是:/[abcdefghijklmnopqrstuvwxyz]/
·[abc] 查找方括号内的任何字符
·[0-9] 查找任何0~9的数字
·(z|y) 查找z或者y3、边界符
·边界符(位置符)用来提示字符所处的位置
· ^ 表示匹配行首的文本
· $ 表示匹配行尾的文本
· 如果^和$在一起表示必须是精确匹配4、量词
· *重复零次或更多次
· +重复一次或更多次
· ?重复零次或一次
· {n}重复n次
· {n,}重复n次或更多次
· {n,m}重复n~m次5、范围
·[abc] 匹配包含的单个字符,也就是只有a||b||c 这三个单字符返回true
·[a-z] a到z 26个英文字母
·[^a-z] 取反,匹配除了小谢字母以外的字符6、字符类
· \d 匹配0-9之间的任意数字  等同于[0-9]
· \D 匹配除0-9以外的字符,等同于[^0-9]
· \w 匹配任意字母、数字、下划线,等同于[a-z0-9A-Z_]
· \W 匹配除字母、数字、下划线以外的字符,等同于[^a-z0-9A-Z_]
· \s 匹配空格(包括换行符、制表符、空格符等),等同于[\t\r\n\v\f]
· \S 匹配非空格的字符,等同于[^\t\r\n\v\f]
<script>//1、普通字符--有a~z之间的字符const reg1 = /[abcdefghijklmnopqrstuvwxyz]/;console.log(reg1.test("hello")); //trueconsole.log(reg1.test("你好")); //falseconsole.log(reg1.test("你好abc你好")); //trueconsole.log("-------------");//2、元字符--有a~z之间的字符const reg2 = /[a-z]/;console.log(reg2.test("hello"));//trueconsole.log(reg2.test("你好")); //falseconsole.log(reg2.test("你好abc你好")); //trueconst reg2_1 = /(abc|123)/;console.log(reg2_1.test("ab1"));//falseconsole.log(reg2_1.test("abc"));//trueconsole.log(reg2_1.test("123"));//trueconsole.log("-------------");//3、边界符const reg3 = /^a/;console.log(reg3.test("abcd"));//trueconsole.log(reg3.test("dcba"));//falseconst reg4 = /a$/;console.log(reg4.test("abcd"));//falseconsole.log(reg4.test("dcba"));//trueconst reg5 = /^abc$/;console.log(reg5.test("abbbbbbc"));//falseconsole.log(reg5.test("abc"));//trueconsole.log("-------------");//5、数量// * 重复次数 >= 0 次const reg6 = /^w*$/console.log(reg6.test(''))  // trueconsole.log(reg6.test('w'))  // trueconsole.log(reg6.test('ww'))  // trueconsole.log('-----------------------')//+ 重复次数 >= 1 次const reg7 = /^w+$/console.log(reg7.test(''))  // falseconsole.log(reg7.test('w'))  // trueconsole.log(reg7.test('ww'))  // trueconsole.log('-----------------------')// ? 重复次数  0 || 1 const reg8 = /^w?$/console.log(reg8.test(''))  // trueconsole.log(reg8.test('w'))  // trueconsole.log(reg8.test('ww'))  // falseconsole.log('-----------------------')// {n} 重复 n 次const reg9 = /^w{3}$/console.log(reg9.test(''))  // falseconsole.log(reg9.test('w'))  // flaseconsole.log(reg9.test('ww'))  // falseconsole.log(reg9.test('www'))  // trueconsole.log(reg9.test('wwww'))  // falseconsole.log('-----------------------')// {n,} 重复次数 >= n const reg10 = /^w{2,}$/console.log(reg10.test(''))  // falseconsole.log(reg10.test('w'))  // falseconsole.log(reg10.test('ww'))  // trueconsole.log(reg10.test('www'))  // trueconsole.log('-----------------------')// {n,m}   n =< 重复次数 <= mconst reg11 = /^w{2,4}$/console.log(reg11.test('w'))  // falseconsole.log(reg11.test('ww'))  // trueconsole.log(reg11.test('www'))  // trueconsole.log(reg11.test('wwww'))  // trueconsole.log(reg11.test('wwwww'))  // falseconsole.log("=====================");//6、字符类const reg12 = /\d{3}/; //包含匹配任意连续3个数字console.log(reg12.test("abc")); //falseconsole.log(reg12.test("123")); //trueconsole.log(reg12.test("a12a34a")); //falseconsole.log(reg12.test("a1234a")); //trueconsole.log("---------------------");const reg13 = /\D{3}/; //包含任意连续3个非数字字符console.log(reg13.test("ab123c")); //falseconsole.log(reg13.test("abc123c")); //trueconsole.log("--------------------");const reg14 = /\w{3}/; //包含任意连续三个字母、数字、下划线console.log(reg14.test("a71&"));//trueconsole.log(reg14.test("a_@12"));//falseconsole.log("===============================");//7、判断是否是一个邮箱const reg15 = /^\w{1,}@(167||qq||127).com$/;console.log(reg15.test("james_taylor@127.com"));//true
</script>

http://www.ppmy.cn/news/1549410.html

相关文章

掌上单片机实验室 – RT-Thread + ROS2 初探(25)

在初步尝试RT-Thread之后&#xff0c;一直在琢磨如何进一步感受它的优点&#xff0c;因为前面只是用了它的内核&#xff0c;感觉和FreeRTOS、uCOS等RTOS差别不大&#xff0c;至于它们性能、可靠性上的差异&#xff0c;在这种学习性的程序中&#xff0c;很难有所察觉。 RT-Threa…

MacOS通过X11转发远程运行virt-manager进行虚机分配

今天需要通过本地macbook机器连接远程物理机&#xff0c;执行虚机分配&#xff0c;现有文档仅提供window环境安装&#xff0c;如下整理Mac环境下的安装步骤 操作篇 前提条件 支持x11转发的terminal&#xff0c;我本地使用iTerm2&#xff1b;本地安装XQuartz&#xff0c;作为…

ROS机器视觉入门:从基础到人脸识别与目标检测

前言 从本文开始&#xff0c;我们将开始学习ROS机器视觉处理&#xff0c;刚开始先学习一部分外围的知识&#xff0c;为后续的人脸识别、目标跟踪和YOLOV5目标检测做准备工作。我采用的笔记本是联想拯救者游戏本&#xff0c;系统采用Ubuntu20.04&#xff0c;ROS采用noetic。 颜…

136.flask内置jinja2模版使用

文章目录 基本使用 基本使用 入口 # conding:utf-8 import os from flask import Flaskapp Flask(__name__,template_foldertemplate)app.config[SECRET_KEY] os.urandom(20)from controlle.index02 import index02 app.register_blueprint(index02)# 过滤器 app.template_f…

C++设计模式行为模式———迭代器模式

文章目录 一、引言二、迭代器模式三、总结 一、引言 迭代器模式是一种行为设计模式&#xff0c; 让你能在不暴露集合底层表现形式 &#xff08;列表、 栈和树等&#xff09; 的情况下遍历集合中所有的元素。C标准库中内置了很多容器并提供了合适的迭代器&#xff0c;尽管我们不…

【C++】undefined reference to `xxx_function’”的错误

1. undefined reference to xxx_function’”的错误时 既然编译是说没有定义某个函数&#xff0c;所以我们先看看这个函数是哪一个库实现的。直接搜索编译环境的include目录&#xff0c;看看 xxx_function 这个函数是定义到哪一个头文件&#xff0c;再看看这个函数是哪个源文件…

DimensionX:单图生成任意的3d/4d视图

DimensionX:单图生成任意的3d/4d视图 通俗易懂的来说 在我们的方法中&#xff0c;关键是如何从一张图片生成动态的3D和4D场景。我们使用一个叫做ST-Director的工具&#xff0c;它可以分开处理空间&#xff08;3D&#xff09;和时间&#xff08;4D&#xff09;两个方面。想象一…

Elasticsearch面试内容整理-分析与映射

在 Elasticsearch 中,分析(Analysis)和映射(Mapping)是数据处理和存储的核心部分。它们共同决定了数据如何被解析、存储以及如何被有效地搜索和查询。以下是关于分析和映射的详细介绍。 分析(Analysis) 分析是将文本数据转换为可以被 Elasticsearch 搜索的索引格式的过程…