BOM
- 概念:Browser Object Model 浏览器对象模型,允许JavaScript与浏览器对话, JavaScript 将浏览器的各个组成部分封装为对象。
- 组成:
- Window:浏览器窗口对象
- Navigator:浏览器对象
- Screen:屏幕对象
- History:历史记录对象
- Location:地址栏对象
- window
- 介绍:浏览器窗口对象
- 获取:直接使用window,其中window,可以省略
window.alert(“Hello Window”);
alert(“Hello Window”);
-
属性:
-
history:对 History 对象的只读引用。
-
location:用于窗口或框架的 Location 对象。
-
navigator:对 Navigator 对象的只读引用。
-
innerHeight
-
innerWidth
//浏览器的有效高宽(显示内容区的高宽) console.log(document.write("height:" + window.innerHeight)); console.log(document.write("width:" + window.innerWidth));
-
-
方法:
-
alert():显示带有一段消息和一个确认按钮的警告框。
// 1. 警告窗口 window.alert() alert()
-
confirm():显示带有一段消息以及确认按钮和取消按钮的对话框.
// 2.确认窗口 // 当点击确定时返回true;点取消返回false let b = window.confirm('确认要删除当前信息吗?') let b = confirm('确认要删除当前信息吗?') console.log(b);
-
setInterval():按照指定的周期(以毫秒计)来调用函数或计算表达式(以固定间隔频率执行)。
-
clearInterval():结束定时器。
-
setTimeout():在指定的毫秒数后调用函数或计算表达式(时间到期后只执行一次)。
-
prompt():弹出输入框
//弹出输入框 // 第一个参数是提示信息;第二个参数是默认值;返回类型是字符串,返回输入的内容 let answer = window.prompt('请输入您的答案:') console.log(answer);
-
open():自定义弹出窗口
//弹出自定义窗口 // 第一个参数是弹出窗口的url; 第二个参数是弹出的目标,跟a标签的target // 返回值是弹出页面的window对象, //在弹出的页面中,用window.opener访问父页面的内容: window.opener.box window.open('index.html', '_blank')
-
- Location
-
介绍:地址栏对象
-
获取:使用 window.location 获取,其中 window. 可以省略。
window.location.属性;
location.属性;
-
location.href用于跳转页面
//浏览器的有效高宽(显示内容区的高宽)
console.log(document.write("height:" + window.innerHeight));
console.log(document.write("width:" + window.innerWidth));
//url地址. protocol//hostname:port/pathname
console.log("href: " + location.href)
// 主机名(域名)
console.log("hostname: " + location.hostname);
// 当前页面的路径和文件名
console.log("pathname: " + location.pathname);
// 端口名
console.log("port: " + location.port);
// 网络协议 http: https:
console.log("protocol: " + location.protocol); document.getElementById('gotoBaidu').addEventListener('click', ()=>{
// 在前端的js代码中跳转页面
location.href = 'http://www.baidu.com'
})
- history
-
介绍:历史记录对象
-
history.back()
-
history.forward()
// 浏览历史记录 document.getElementById('b').addEventListener('click', ()=>{ history.back() //在历史页面中后退一步 }) document.getElementById('f').addEventListener('click',()=>{ history.forward() //在历史页面中前进一步 })
- localStorage
- 介绍:在浏览器(客户端)上保存信息的对象。
- setItem()
- getItem()
- removeItem()
- clear()
localStorage.setItem("name", "hqyj")
//保存信息
console.log(localStorage.getItem("name"));
//读取信息
localStorage.removeItem("name")
//删除信息
localStorage.clear()
//清除localStorage的所有信息
数组
-
JavaScript 中 Array对象用于定义数组。
-
定义:
var 变量名 = new Array(元素列表); //方式一 var 变量名 = [ 元素列表 ]; //方式二
-
访问:
arr[ 索引 ] = 值;
注意事项
JavaScript 中的数组相当于 Java 中集合,数组的长度是可变的,而 JavaScript 是弱类型,所以可以存储任意的类型的数据。
- 属性:
属性 | 描述 |
---|---|
length | 设置或返回数组中元素的数量。 |
- 方法:
方法 | 描述 |
---|---|
push() | 将新元素添加到数组的末尾,并返回新的长度。 |
splice() | 从数组中删除元素。 |
forEach() | 遍历数组中的每个有值的元素,并调用一次传入的函数 |
join() | 把数组元素用指定的字符拼接成一个字符串 |
箭头函数(ES6):是用来简化函数定义语法的。
具体形式为: (…) => { … } ,如果需要给箭头函数起名字: var xxx = (…) => { … }
let arr = [] ;
// arr[0] = "JAVA"
// arr[1] = "HTML"
arr.push("Java") ;
//往数组的末尾添加一个元素
arr.push('HTML') ;
arr.push('JavaScript');
arr.push('jQuery') ;
arr.push('Vue');
for(let i=0; i<arr.length; i++){
console.log(arr[i]);
}
//数组元素拼接成字符串:
Java,HTML,JavaScript let str = arr.join(',');
console.log(str);
// forEach方法的参数是一个函数,这个函数有三个参数:
// current - 当前循环的数组元素的值;
//index - 循环变量(数组下标);
//arr_full - 整个数组对象
// 循环处理代码就写在箭头函数里
arr.forEach((current, index, arr_full)=>{
console.log(current);
})
字符串
-
String字符串对象创建方式有两种:
var 变量名 = new String("…") ; //方式一 var 变量名 = "…" ; //方式二
-
属性:
属性 描述 length 字符串的长度。 -
方法:
方法 描述 charAt() 返回在指定位置的字符。 indexOf() 检索字符串。 trim() 去除字符串两边的空格 substring() 提取字符串中两个指定的索引号之间的字符。 toFixed() 保留小数的位数(四舍五入) parseInt(‘123abc’) 字符串转整数 parseFloat(‘3.14’) 字符串转小数. 特性跟parseInt类似 replace(‘abc’, ‘xxx’) 替换第一个匹配字符串字符串 replaceAll(‘abc’, ‘yyy’) 替换所有匹配的字符串
举例:
let s1 = '123'
let s2 = 123
// == 判断值是否相等
console.log(s1 == s2);
//true
// === 全等,判断类型和值是否都相等
console.log(s1 === s2);
//false
//length 字符串的长度
console.log(s1.length);
let s3 = '123abc456abc'
// 返回指定位置的字符,下标从0开始
console.log(s3.charAt(3));
// 返回指定的字符串在另一个字符串中第一次出现的位置
// 如果不存在该字符串,返回-1
console.log(s3.indexOf('abc')); //返回指定的字符串在另一个字符串中最后一次出现的位置
console.log(s3.lastIndexOf('abc')); // 替换第一个匹配字符串字符串
console.log(s3.replace('abc', 'xxx'));
// 替换所有匹配的字符串
console.log(s3.replaceAll('abc', 'yyy'));
// 按下标截取一段字符,左闭右开
console.log(s3.slice(3, 6));
// 按指定字符把一个字符串拆分为数组
// 指定的字符串可以有多个字母, 还可以用空字符
let s4 = 'Java,HTML,JavaScript'
let arr = s4.split(',') let arr2 =
'Java'.split('')
//把字符串拆分为字母数组 ['J','a','v','a']
console.log(arr2[0]);
// 去空格(去掉左右空格)
let s5 = ' abc def '
console.log(s5.trim());
// 大小写转换
console.log(s4.toLowerCase());
console.log(s4.toUpperCase());
// 字符串转整数. 只要是数字开头的字符串都可以转整数,后面的非数字的字符忽略
// 如果字符串不是数字开头,返回NaN
console.log(parseInt('123abc')); //123
console.log(parseInt('a123')); //NaN
console.log(parseInt('123')); //123
console.log(!isNaN('123'));
// 字符串转小数. 特性跟parseInt类似
console.log(parseFloat('3.14')); //3.14
console.log(parseFloat('3.14abc')); //3.14
console.log(parseFloat('a3.14')); //NaN
// 保留小数的位数(四舍五入)
let f = 22.7358 console.log(f.toFixed(2));
正则表达式
常用的 正则表达式
// 正则表达式
let p = /[0-9]/
console.log(p.test('123a'));
//email
let mail =/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z] {2,4})$/
console.log(mail.test('yudr_cq@hqyj.com'));
//url
let url =/^http://([w-]+.)+[w-]+(/[w-./?%&=]*)?$/
// phone let
phone = /^(13[0- 9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])d{8}$/
// 身份证号码18位
let id = /^[1-9]d{5}[1-9]d{3}((0d)|(1[0-2]))(([0|1|2]d)|3[0- 1])d{4}$/
JSON介绍
- 概念:JavaScript Object Notation,JavaScript对象标记法。
- JSON 是通过 JavaScript 对象标记法书写的文本。
JSON-基础语法
1、定义:
var 变量名 = ‘{“key1”: value1, “key2”: value2}’;
示例:
var userStr = '{"name":"Jerry","age":18, "addr":["北京","上海","西安"]}'
2、JSON字符串转为JS对象
var jsObject = JSON.parse(userStr);
3、JS对象转为JSON字符串
var jsonStr = JSON.stringify(jsObject)
4、value 的数据类型为:
- 数字(整数或浮点数)
- 字符串(在双引号中)
- 逻辑值(true 或 false)
- 数组(在方括号中)
- 对象(在花括号中)
- null
JSON文件
-
一种数据格式,广泛用于前后端数据交互
-
json文件扩展名是.json
1、特征:
- 只有符号:{} [] “” : ,
- 引号只能用双引号
- 字符串用引号,数字和boolean不加引号;属性也要用引号
- json文件中不能写注释
2、用json描述对象
{
"stuName": "张三",
"stuSex": "男",
"stuAge": 22
}
3、用json描述数组(列表)
[
{
"stuName": "张三",
"stuSex": "男",
"stuAge": 22
},{
"stuName": "李四",
"stuSex": "男",
"stuAge": 22
}
]
4、用json描述嵌套对象
{
"className":"计科一班",
"grade":"2022",
"studentList":[
{
"stuName": "李四",
"stuSex": "男",
"stuAge": 22
}
],"classRoom":{
"roomNum":808
}
}