JavaScript学习笔记（五）

JavaScript学习笔记——内置对象和BOM

---

---

基本知识

---

• JavaScript中的所有事物都是对象：字符串、数值、数组、函数、日期···
• JavaScript提供多个内建对象；
• 对象只是一种特殊的数据，对象拥有属性和方法；
• JavaScript允许自定义对象；
• 访问对象的属性：objectName.propertyName
• 访问对象的方法：objectName.methodName()

创建方法

---

• 创建直接的实例

<script>
	var example = new Object();
	//var example = {}; 与 new Object()等价

	example.pro1 = "XXX";
	example.pro2 = 4;
	//var example = {pro1:"XXX", pro2: 4}; 与上述操作等价

	alert(example.pro1);
	//alert(example["pro1"]);  也可用该方式进行调用
</script>

• 使用对象构造器：使用函数来构造对象

<script>
	function example(one,two,three){
		this.one1 = one;//this表示当前对象，点表示给当前对象的属性进行操作
		this.two1 = two;
		this._three = three;//this后面的名称为便于区分可另行定义
	} //通过构造函数的方式构造对象

	var test = new example("XXX",3,5); //实例化新的对象
	var test2 = new example("XAXX",31,5); //可重复使用
	alert(test.one1 + test.two1 + test._three); //调用
</script>

<script>
	function example(one,two){
		this.one1 = one;
		this.two1 = two;
		this._three = three;
		function three(){
			alert("XXX");
		}
	} 

	var test = new example("XXX",3,5); //实例化新的对象
	test._three();
</script>

• 使用for/in循环遍历对象里的属性

<script>
	function example(one,two){
		this.one1 = one;
		this.two1 = two;
		this._three = three;
		function three(){
			alert("XXX");
		}
	} 

	var test = new example("XXX",3,5); //实例化新的对象
	test._three();

	for(var temp in test){
		document.write(test[temp]);
	}
</script>

String字符串对象

---

• 用于处理文本
• 创建方法：new String() 或者直接用引号进行创建
• length属性获取长度
• 大小写转换：toUpperCase()，toLowerCase()

var str = new String("Hello!");
var str1 = "Hello!";
var str2 = 'Hello!';

alert(str.length);

alert(str.toUpperCase());
alert(str.toLowerCase());

• 替换文本：replease()

var msg = "你好，XXX";
var temp = msg.replace("XXX","AAA"); //XXX是要被替换的内容，AAA是代替的内容
document.write(temp);

• 字符串分割：split()

var word= "a,b,c,d,e,f";
var arr = word.split(",")； //用逗号进行分隔
for(var i in arr){
	document.write(arr[i]+ "<br>");
}

var msg = "How are you";
var arr = msg.split(" ");
for(var i in arr){
	document.write(arr[i]+"<br>");
}

• 连接两个或更多字符：concat()

var str1 = "AAA";
var str2 = "Hello!";
var str4 = "How are you?";

var str3 = str1.concat(str2,str4); //concat()中可以添加1到N个字符串
document.write(str3);

• 查找字符串：indexOf()、lastIndexOf()

//indexOf()是从左至右的去找寻并获取
var str = "Hello, how are you today? Oh, hello, I'm fine.";
//索引下标从0开始，符号空格都算
document.write(str.indexOf("Hello")); //0--获取的是匹配字符的第一个字母的索引下标

//lastIndexOf()是从右至左的去查找
document.write(str.lastIndexOf("Hello")); //16--从右边开始匹配第一个字母的位置

• 截取字符串：substring()、substr()

//substring(fromIndex,toIndex)
var str1 = "Hello, how are you today? Oh, hello, I'm fine.";

var str2 = str1.substring(5,10); //截取索引为5-9的，不包括10
document.write(str2);

//substr(fromIndex,length)
var str3 = str1.substr(5,5);
socument.write(str3);

var idx = str1.indexOf("Hello");
var end = str1.indexOf(",");
var temp = str1.substring(idx); //从选定的地方开始到最后
var temp2 = str1.substring(idx,end); //截取了Hello
document.write(temp);
documen.write(temp2);

• 去掉空白：trim()

var msg = "   AAA BBB CCC ";
document.write(msg.trim()); //去掉两边的空格

Date日期对象

---

• 基本语法

new Date(); //当前日期和时间
new Date(milliseconds); //返回从1970年1月1日至今的毫秒数
new Date(dateString); //指定字符串，会转换成日期形式
new Date(year,month,day,hours,minutes,seconds,milliseconds); //可以指定年月日时分秒，不是都要指定，可指定部分

例：

var date1 = new Date("2020-11-12"); //用字符串的形式指定时间
document.write(date1);

var date2 = new Date(2018,12,01);
document.write(date2); //会显示2019年，因为在Date中的月份为 0-11

var date3  = new Date(2018,11,01);
document.write(date3); //这样才会得到12月的显示

• 常用方法

方法	描述
getDate()	从Date对象返回一个月中的某一天（1~31）
getDay()	从Date对象返回一周中的某一天（0~6）
getFullYear()	从Date对象以四位数字返回年份
getHours()	返回Date对象的小时（0~23）
getMilliseconds()	返回Date对象的毫秒（0~999）
getMinutes()	返回Date对象的分钟（0~59）
getMonth()	从Date对象返回月份（0~11）
getSeconds()	返回Date对象的秒数（0~59）
getTime()	返回1970年1月1日至今的毫秒数
toLocaleDateString()	获取本地日期（根据本人所处环境打印）
toLocaleTimeString()	获取本地时间
toLocaleString()	获取本地时间和日期

与getXXX()方法相对应的有setXXX()方法。

var date1 = new Date();
date1.setFullYear(2040); //改变当前年份
date1.setMonth(2); //改变当前月份为3月
date1.setDate(5); //改变当前日期为5号
date1.setHours(10); //改变当前时间-小时数
document.write(date1)

var today = new Date();
document.write(today.getFullYear());
document.write(today.getMonth()+1); //加1后才能得到我们真实的所观察到的值，因为月份是从0开始的

Array数组对象

---

• 基本语法

//1、常规方式
var one = new Array();
one[0] = "AAA";
one[1] = "BBB";
one[2] = "CCC";

//2、简洁方式
var two  = new Array("AAA","BBB","CCC");

//3、直接赋值
var three = ["AAA","BBB","CCC"];

• 常用属性和方法

名称	功能
length	（属性）获取长度
toString()	用```document.write(array)来打印数组中的元素时，是默认调用该方法的
indexOf()	搜索数组中的元素，并返回它所在的位置
concat()	数组合并
join()	把数组的所有元素放入一个字符串
map()	通过指定函数处理数组的每个元素，并返回处理后的数组
forEach()	遍历，不需要返回值
reverse()	反转
sort()	排序

//indexOf()
var array = ["AAA","BBB","CCC"];
var idx = array.indexOf("AAA");

//concat()
var arr1 = ["AAA","BBB"];
var arr2 = ["DDD","EEE","KKK"];
var arr3 = ["CCC","FFF"];
var temp = arr1.concat(arr2, arr3);

//join(separator)
var tpArr = arr2.join(" and "); //指定and为分隔符

//map()
var tmpMapArr = arr2.map(function(item,index,array){
	return item+"1";
});
//item--当前的值，index--当前值的索引，array--当前的数组，后两个参数不是必须的

//forEach()
arr2.forEach((item,index,array){
	document.write(item+"<br>");
});

//reverse()
arr2.reverse();
document.write(arr2.reverse());

//sort()
document.write(arr2.sort()); //按照字母顺序进行升序排列，对于数字，会将其转换为字符串后进行排序，即会出现1，19，3，5的情况

var arr4 = [2,4,19,1]
document.write(arr4.sort(function(a,b){
	return b-a;   
}));  //通过一个比较器，可以对他们的大小进行比较后再进行排序

Math算术对象

---

执行常见的算术任务。

• 常用的Math对象属性

属性	描述
E	返回算术常量e，即自然对数的底数
LN2	返回2的自然对数
LN10	返回10的自然对数
LOG2E	返回以2为底的e的对数
LOG10E	返回以10为底的e的对数
PI	返回圆周率
SQQRT1_2	返回2的平方根的倒数
SQRT2	返回2的平方根

• 常用的Math对象方法

方法	描述
Math.max(x,y,…,z)	返回最大值
Math.min(x,y,…,z)	返回最小值
Math.abs(x)	返回绝对值
Math.round(x)	把数四舍五入为最为接近的整数
Math.ceil(x)	对数进行上舍入 – 4.2 会舍到 5
Math.floor(x)	对数进行下舍入
Math.random(x)	返回0~1之间的随机数，不包括1，包括0

//Math.random()
document.write(Math.random()*10);  //这样为0~10之间的随机数，不包括10
document.write(Math.random()*10+1);  //这样为1~11之间的随机数，不包括11
document.write(Math.floor(Math.random()*10+1));  //这样可取得整数

RegExp正则表达式对象

---

描述字符模式的对象；
用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。

• 基本语法

var patt = new RegExp(pattern,modifiers);
var parr = /pattern/modifiers;

var patt = new RegExp("\\w+","i");
var patt = /\w+/i;

• 修饰符

用于执行不区分大小写和全文的搜索.
i|用来执行不区分大小写的匹配
g|用于执行全文的搜索（不是在找到第一个就停止查找，而是找到所有的匹配）

• 对象方法

方法	描述
test()	搜索字符串指定的值，根据结果并返回真或假
exec()	检索字符串中的指定值，返回值是被找到的值；如果没有发现匹配，则返回null

var reg1 = new RegExp("hello");
//var reg1 = new RegExp("hello","gi");
var reg2 = /hello/;
var reg3 = /hello/i; //加上修饰符i，不区分大小写的匹配
var reg4 = /hello/gi; //加上修饰符g，进行全局匹配
var str = "hi, hello AAA, Hello world!";
document.write(reg1.test(str));
document.write(reg2.test(str));

document.write(reg1.exec(str));

• 实际应用

验证用户名和密码
（"^[a-zA-Z]\w{5,15}$"）
由A=Z，a-z，0-9组成，且第一个字必须为字母，长度在5-15位

验证电话号码
("^(\\d{3,4}-)\\d{7,8}$")
格式为：xxx/xxxx-xxxxxxx/xxxxxxxx

验证Email地址
("^\w+([-+.]\w)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$");

\w --> [a-zA-Z0-9_]
\d --> [0-9]
\w+ --> [a-zA-Z0-9_]I一到多个

BOM

---

浏览器对象模型-Browser Object Model。

Window对象

---

• 所有浏览器都支持，它表示浏览器窗口

• 所有JavaScript全局对象、函数以及变量均自动成为window对象的成员

• 全局变量是window对象的属性

• 全局函数是window对象的方法

• 常见属性和方法

方法/属性	描述
window.innerHeight	浏览器窗口的内部高度（不包括滚动条、工具栏的高度）
window.innerWidth	浏览器窗口的内部宽度
window.outerHeight	浏览器窗口的总高度
window.outerWidth	浏览器窗口的总宽度
window.open()	打开窗口
window.close()	关闭窗口

window.open("http://www.baidu.com","MyWindow","width=300,height=200,left=50,,top=200")  
//指定打开窗口的宽度高度和位移

Screen对象

---

• 包含有关用户客户端显示屏幕的信息
• window.screen对象在编写时可以不使用window这个前缀
• screen对象的属性

属性	描述
screen.availWidth	可用的屏幕宽度（不包括任务栏等）
screen.availHeight	可用的屏幕高度（不包括任务栏等）
screen.width	屏幕总宽度
screen.height	屏幕总高度

Location对象

---

• 包含有关当前浏览器URL的信息
• window.location中的window可省略
• location对象的属性和方法

方法/属性	描述
location.href	返回完整的URL
location.host	返回一个URL的主机名和端口（默认为8080时会省略显示）
location.hostname	返回URL的主机名
location.port	返回web主机的端口
location.protocol	返回所使用的web协议（http:*//或https://）
location.assign()	载入一个新的文档
location.reload()	重新载入当前文档
location.replace()	用新的文档替换当前文档

History对象

---

• 包含浏览器的历史
• history对象的属性和方法

属性/方法	描述
length	返回历史列表中的网址数
back()	回退到historyr列表中的前一个URL
forward()	加载history列表中的下一个URL
go()	跳转到history列表中的某个具体页面

window.history.go(1); //可通过在括号中添加数字来指定跳转到哪一页
window.history.go(-1); // 1和-1能达到同样的效果

Navigator对象

---

• 包含有关浏览器的信息
• navigator对象的属性

属性	描述
appCodeName	浏览器的代码名
appName	浏览器的名称
appVersion	浏览器的平台和版本信息
cookieEnabled	浏览器是否启用cookie，返回一个布尔值
platform	运行浏览器的操作系统平台
userAgent	返回由客户机发送服务器的user-agent头部的信息/值

注意：
来子navigator对象的信息具有误导性，不应该被用于检测浏览器版本，因为该数据可被浏览器使用者更改；一些浏览器对测试站点会识别错误；浏览器无法报告晚于浏览器发布的新操作系统。

弹窗/消息框

---

• 警告框alert()
• 确认框confirm()
• 提示框prompt()

//alert()
window.alert("hello!");

//confirm()
var flag = confirm("XXX"); //会弹出确认和取消的选项

//prompt()
var name = prompt("XXX","AA"); //会弹出带有输入框的弹窗，XXX为要求，AA为默认值

计时事件

---

• 通过在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。

方法	描述
setTimeout()	暂停指定的毫秒数后执行指定的代码
clearTimeout()	停止setTimeout()执行
setIntterval()	间隔指定的毫秒数不停地执行指定的代码
clearInterval()	停止setInterval()执行

setTimeout(function(){
	alert("hello");  //3秒后弹出一个对话框
},3000);   //3000毫秒=1秒