JavaScript基础&BOM

最新推荐文章于 2025-06-13 08:24:12 发布

weixin_48867096

最新推荐文章于 2025-06-13 08:24:12 发布

阅读量178

点赞数

文章标签： javascript bom js

本文链接：https://blog.youkuaiyun.com/weixin_48867096/article/details/107724466

版权

JavaScript基础&BOM
1.概述
JavaScript是一种解释性脚本语言（代码不进行预编译），由浏览器解释执行，用来向页面添加交互行为；
1.1构建网站的三大技术：
1.HTLM：支持网页的骨架，基础
2.Css：网页的样式
3.JS： JS动态脚本
1.2 JS三大组成部分
Java Script由三个主要组成部分：ECMAScript（核心），BOM（浏览器对象模型），DOM（文档对象模型

注：ECMAScript描述了语法、类型、语句、关键字、保留字、运算符和对象。它就是定义了脚本语言的所有属性、方法和对象，DOM把整个页面规划成由节点层构成的文档，它不与浏览器、平台、语言相关，为web开发者提供一个标准可以访问站点中的数据、脚本和表现层对象。BOM是浏览器的一种特性，它可以对浏览器窗口进行访问和操作，例如移动、关闭窗口，调整窗口的大小，支持cookie等。
在这里插入图片描述

1.3为什么使用JavaScript
JavaScript在互联网中的应用几乎无处不在，为了提升用户体验和数据的操作，常见的适用场景：
1.页面效果(用户体验)
2.表单验证
3.事件监听数据处理
4.页面跳转
5.局部刷新（ajax）
2.JS引入的三种方式
JavaScirpt是一个弱类型，强语法的语言。
2.1行内样式JS
1.行内JS使用较少，只是针对某些标签的特殊操作：

2.href属性，点击连接不跳转地址，而执行其中JS代码
3.javascript：是伪协议的意思，类似于http：，伪协议是为了告诉浏览器接下来的代码是JS代码
4.alert(参数值)是用来弹出一个提示框，弹框中的提示信息即为传入的参数值，弹框是JS的重要调试手段之一
5.console.debug()也是JS的一种调试手段，但此种调试手段在IE上不支持
2.2内部样式JS
1.页面内的JS是写在一组

	2.使用场景:仅仅被当前页面共享的js代码

2.3外部样式JS
1.外部JS方式，其实就是先单独定义一个JS文件，然后将这个JS文件与要使用的网页将关系关联起来；

写个JS页面引入
2.引入CSS文件使用标签，引入JS文件而是使用

写法1

写法2
写法3
3.JavaScript变量
使用var关键字，无论是何种数据类型的变量，均可以使用var关键字来进行声明；弱类型
3.1语法
var 变量名; //声明变量【推荐方式】
var 变量名=值; //声明变量并赋值【推荐方式】
已声明赋值的变量 = 另一种类型值; //【不推荐】
不声明变量 = 值; //不事先声明变量直接使用
1.如果按照Java的语法去声明JS变量，那么大家一定会使用推荐的两种方式去做；
2.事实上，JS的语法校验规则并不严密，在JS的语法中允许给已声明且赋值的变量赋值另外类型的值；
3.2示例代码
var num;
num=10;
console.debug(num); //在控制台输出
var name=“大圣”;
console.debug(name);
name=3.14;
console.debug(name);
var age=999;
console.debug(age);
1.声明了一个name变量并赋值了一个字符串，但随后我们给name变量赋值了一个数字类型；
讨论：这样的操作在Java语法中会报错吗？
2.答案是毋庸置疑的，Java语法一定会报错，但在JS的语法中，此种操作不会；
3.3.JS中还可以不使用var关键字，直接写一个符合命名规范的名字作为变量使用，例如：
age = 18;
console.debug(age);
4.上述操作中，我们直接使用了一个名字并赋值，JS中是允许此类操作的，但不推荐使用；
5.综上所述，我们可以得出一个结论：JS的语法规则并不如Java那么严格，所以在学习JS的过程中，请按照Java的语法风格要求自己；

4.JavaScript原始数据类型
JavaScript中的原始数据类型相当于Java的基本数据类型，在js中可以使用typeof 和typeof()判断当前变量属于那种数据类型；
4.1number(数值类型)
1.JS数字类型可以采用10进制\8进制\16进制以及科学计算法等形式表示；
4.1.1常用十进制
0x8a //十六进制以0x或0X开头
0123 //八进制必须以0开头
1 //十进制首位不能为0
5E7 //科学计数法
4.1.2无穷大
1.在JS语法中，数字是有取值边界的，超出最大数取值为Infinity【正无穷】，超出最小数取值为-Infinity 【负无穷】，无穷数不能用于数值运算，一般使用isFinite()函数对一个数字进行判断是否是有穷的【有限的】，若传入的数据是无穷数，那么返回false，若传入的数据是有穷数，则返回为true；
isFinite(1/0); //Infinity
console.debug(isFinite(1/0)); //false
2.在JS中，1/0并不会报错，因为JS语法中0是取值了一个无限趋近于0的一个数字
4.1.3非数
1.非数：不是数字，在JS中采用NAN来表示，同样在JS中采用了isNaN()函数来判定当前字符是否真的不是数字；
//非数
console.debug(123/“abc”);//NaN
console.debug(123/“123”);//1 底层都是会转成字符处理
console.debug(isNaN(“abc”));//true真的不是数字
2.NaN这个特殊字符比较有意思的地方在于：
(1)与任何值均不相等，包括自己本身；
(2)任何涉及NaN的操作都会返回NaN；
4.2boolean（布尔类型）
1.布尔类型和Java一样，采用true和false表示；
2.注释：在JS语法中，0、NaN、Undefined、空字符串、null均可以表示为false；
4.3string（字符串类型）
JS语法中不存在char类型，所以由单引号或双引号括起来的字符序列，任何字符串的长度都可以通过访问length属性获得
//String字符串类型
var aa = “大哥”;
aa=“二弟”;
console.debug(aa);//二弟
4.4null（空对象）
表示一个不存在的对象，只有一个值null；
/null undifined 解释/
var bb= null;
console.debug(bb);//null
var cc;
console.debug(cc);//undefined
4.5undefined（未定义或未初始化）
1.表示声明但未赋值的对象，Undefined派生自null；
2.如果我们做 *、/如果有字符串，它会尝试去转换成number来进行运算，如果转换失败（NaN）；
var cc;
console.debug(cc);//undefined
5.JavaScript运算符
在JS中同样存在算术运算符、等性运算符、逻辑运算符的操作，这些运算符的操作和JAVA一样
5.1赋值运算符

注：赋值运算符的使用和Java一样；
5.2算术运算符

注释：在JS中+运算符中有字符串的应用，会演变为字符串的拼接；
//运算符拼接
var x=1+“00”;
console.debug(x);//100
5.3比较运算符（关系运算符）
1.比较运算符用于判断两个变量大小关系：>、<、、<=、>=、=、!=、!=，其中：
(1) ：代表相等(它只比较内容，不比较类型)
(2)=：绝对相等(先比较类型，再比较内容)
(3)!：绝对不等
//比较运算符
var a=10;
var b=“10”;
console.debug(ab);//true 代表相等，比较值
console.debug(a=b);//false 绝对相等,比较类型
console.debug(a!==b);//true 绝对不等
5.4逻辑运算符
&& ：逻辑AND运算符，一假遍假
|| ：逻辑OR运算符，一真遍真
! ：逻辑NOT运算符，真为假，假为真
var x=0||1;
console.debug(x); //1
1.逻辑或运算符从第一个值开始找，如果找到一个值代表true,那么就返回这个值
2.JS中0、""、false、null、undefined、NaN均表示false；
6.JavaScript流程控制
JS中同Java一样存在流程控制语句，用法一样：
1.分支：
(1)if语句
(2)switch语句
2.循环：
(1)while语句
(2)do-while语句
(3)for循环
//for循环
for(var i = 0;i<=10;i++){
console.debug(666);
}
3.break/continue语句
4.三目表达式
7.JavaScript函数
1.函数是一组可以随时运行的代码语句，此处可以理解为方法；
2.函数作用：可以避免载入时执行，可以被多次调用；
7.1语法
function 函数名( [参数列表] ){
JS代码
[return 返回值;]
}
1.JS中函数的定义使用function关键字，这一点是和Java不一样的地方，同时允许函数具备返回值，返回值采用关键字return，如果函数没有定义返回值，接收到的将是一个undefined；
function $action(){
console.debug(“函数定义测试”);
}
var x = $action(); //使用函数名完成函数调用，并定义一个变量接收返回值
console.debug(x); //输出undefined，因为函数中并没有定义返回值
①上述代码中我们可以看到直接使用函数名即可完成针对函数的调用；
②针对带参数的函数，个数与类型对它没有任何影响(都可以调用)。只要调用的函数名称是对的(函数名称不可以重名)，但推荐如何定义就如何使用；
③JS中函数传参不需要声明；
7.2全局变量和局部变量
var msg=“显示全局变量”;
function show(){
msg=“隐式全局变量”;
}
show();
console.debug(msg); //隐式全局变量，需要先调用方法才能访问该变量

8.JavaScript对象
8.1本地对象
1.本地对象就是 ECMA-262 定义的类（引用类型），相当于Java中类的概念；
2.这些引用类型在运行过程中需要通过new来创建所需的实例；
3.包括： Object、Boolean、Number、Date、String、Array等，重点掌握Date、String和Array对象；
8.1.1 Date
日期对象
1.API

2.Da’te代码示例
需求：将转换日期的代码封装成方法，重复使用

8.1.2 String
字符串对象
1.API
split()
方法用于把一个字符串分割成字符串数组
toLowerCase()
方法用于把字符串转换为小写
toUpperCase()
方法用于把字符串转换为大写
substr()
方法可在字符串中抽取从 start 下标开始的指定数目的字符，未指定长度则一直截取到结尾
substring()
方法用于提取字符串中介于两个指定下标之间的字符，不包括结束位置的字符
charCodeAt(index)
返回指定位置的unicode码
fromCharCode() – 相当于静态方法
可接受一个指定的 Unicode 值，然后返回一个字符
2.String代码示例
需求：分割字符串、转换大小写
var str = “a.b.c.D.e.F”;
console.debug(str.split(’.’));
console.debug(str.toLowerCase());
console.debug(str.toUpperCase());
需求：截取字符串
var str=“01234567”; //主要是为了能和下标相对应
console.debug(str5.substr(3));//34567
console.debug(str5.substring(3));//34567
console.debug(str5.substr(3,2));//34
console.debug(str5.substring(3, 2));
需求：连接字符串
var str1 = “hello”;
var str2 = “world”;
var str3 = str1.concat(str2);
console.debug(str3);//helloworld
需求：获取指定位置的unicode值，将一个unicode值转换为字符
var str1 = “abcde”;
console.debug(str1.charCodeAt(0));//取到对应索引处的unicode码
console.debug(String.fromCharCode(65));
8.1.3 Array
数组对象
1.API

2.Array代码示例
需求：数组声明并赋值
//1.声明数组
var arr = new Array();
var arr2 = new Array(3);
var arr3 = new Array(1, ‘2’, 3);
console.debug(arr);
console.debug(arr2);
console.debug(arr3);
//1.1针对空数组赋值
arr[0] = 1;
arr[1] = ‘aaa’;
arr[2] = 2;
console.debug(arr);

//1.2针对固定长度的数组赋值，可以超出吗
arr2[0] = 1;
arr2[1] = ‘aaa’;
arr2[2] = 2;
arr2[3] = ‘hahaha’;
console.debug(arr2); //Array [ 1, “aaa”, 2, “hahaha” ]
console.debug(arr2.length); //4

//1.3 简化声明
var arr4 = [‘aa’, ‘asdfew’, 1, 2, ‘sdfasdfa’];
console.debug(arr4);
需求：数组转换为字符串，且使用指定内容分隔，倒序
console.debug(arr4.join());
console.debug(arr4.join(‘￥’));
console.debug(arr4.reverse());
需求：针对数组的增加、删除的一些操作
//1针对数组开头的一些操作
console.debug(arr4.shift()); //sdfasdfa
console.debug(arr4); //删除掉了’aa’
console.debug(arr4.unshift(‘aaa’)); //5
console.debug(arr4);

//2针对数组结尾的操作：pop删除和push添加
console.debug(arr4.pop()); //sdfasdfa
console.debug(arr4);
console.debug(arr4.push(‘aaaaa’));
console.debug(arr4);

//3针对数组中间部分的操作 splice
//splice演示删除
arr4.splice(0);
console.debug(arr4); //清空数组
//演示了添加
arr4.splice(0, 0, “aaa”, “asdfew”, 1, 2, “aaaaa”); //重新将数组添加回来
console.debug(arr4);
//演示了替换
arr4.splice(1, 1, 34);
console.debug(arr4);
arr4.splice(1, 2, 21);
console.debug(arr4);
需求：遍历数组
//1 for循环来进行遍历第一种方式推荐使用
for(var i = 0; i < arr4.length; i++) {
console.debug(arr4[i]);
}
//2 for…in来遍历数组
//此类方式遍历的是数组中的下标适合遍历json、对象
for(var i in arr4) {
console.debug(i);//输出的是数组的下标
console.debug(arr4[i]); //
}
8.2系统函数
1.定义：全局属性和函数可用于所有内建的 JavaScript 对象。
2.系统函数就是JS给我们准备或者说封装好的一些函数(方法)，实现了很多功能。让咱们可以直接使用。
系统函数我们记住重要的几个，其它的到api里去找即可
1.API

2.系统函数代码示例
需求：编码和解码：
//encodeURI和decodeURI搭配
var url = “http://www.baidu.com?arg=百度”;
console.debug(encodeURI(url));
console.debug(decodeURI(“www.baidu.com?arg=%E7%99%BE%E5%BA%A6”));
//使用encodeURICommponent和decodeURICommponent
console.debug(encodeURIComponent(url));
console.debug(decodeURIComponent(‘www.baidu.com%3Farg%3D%E7%99%BE%E5%BA%A6’));
需求：eval函数：
//eval函数的使用：计算JS的字符串，并将其作为脚本执行
var a = “console.debug(‘eval函数实例’)”;
console.debug(a); //输出：console.debug(‘eval函数实例’)
eval(a);//字符串就会当做函数使用
需求：将字符串转换为number类型：
//parseInt()函数的使用
var b = ‘123’;
console.debug(typeof b); //string
console.debug(typeof(parseInt(b))); //number
b = ‘123aaa’; //当遇到不能解析的内容的时候，parseInt会直接从该处放弃
console.debug(parseInt(b)); //123
console.debug(typeof(parseInt(b))); //number

2.Math代码示例
需求：绝对值、最大值和最小值
console.debug(Math.abs(1));
console.debug(Math.abs(-1));
console.debug(Math.max(1, 2, 3, 4, 5, -1)); //5
console.debug(Math.min(1, 2, 3, 4, 5, -1)); //-1
需求：获取随机数
console.debug(Math.random());
for(var i = 0; i < 10; i++) {
console.debug(Math.random());
}
console.debug("---------");
需求：当前我要取出1-10的随机数取整（（随机数10））+1
for(var i = 0; i < 10; i++) {
console.debug(parseInt(Math.random() * 10) + 1);
}
规律公式：取整（随机数取值范围）+起始值
需求：获取1-100之间的随机数
for(var i = 0; i < 100; i++) {
console.debug(parseInt(Math.random() * 100) + 1);
}
需求：舍入取整
//1向上舍入举例：假设数字为5.1 向上舍入的结果为6
//使用场景分页假设现在有11组数据，每两条数据分为一个部分，请问会有多少个部分？
console.debug(Math.ceil(5.1)); //6
console.debug(Math.ceil(11/2));//6

//2向下舍入举例：假设数字为5.6 向下舍入的结果为5
console.debug(Math.floor(5.6)); //5

//3四舍五入
console.debug(Math.round(5.5));//6
console.debug(Math.round(5.4));//5
面试题:
Math.round(11.5)的结果是多少?;//12
Math.round(-11.5)的结果是多少?;//-11

注：Math类中提供了三个与取整有关的方法：ceil,floor,round,这些方法的作用于它们的英文名称的含义相对应，例如：ceil的英文意义是天花板，该方法就表示向上取整，Math.ceil（11.3）的结果为12，Math.ceil(-11.6)的结果为-11；floor的英文是地板，该方法就表示向下取整，Math.floor(11.6)的结果是11，Math.floor(-11.4)的结果-12；最难掌握的是round方法，他表示“四舍五入”，算法为Math.floor(x+0.5),即将原来的数字加上0.5后再向下取整，所以，Math.round(11.5)的结果是12，Math.round(-11.5)的结果为-11
8.3自定义类
1.在ES5中没有像Java中一样专门的class关键字定义对象，JavaScript中创建类其实和创建函数【函数也是一种对象】是一样的语法:
function 名称(){}
2.一种语法代表了多重含义，在JavaScript中若想清楚的区分定义的到底是方法还是类，那么建议方法名称小写，创建类名称首字母大写；
3.对象中定义方法，有下列形式：
(1)在对象中使用this关键字；
(2)通过new的实例化对象添加方法；
(3)通过prototype添加方法；
9.BOM
1.BOM是browser object model的缩写，简称浏览器对象模型，这个BOM有如下内容:

(1)打开一个窗口就是一个window对象；
(2)窗口里面使用location表示地址栏；
(3)窗口的历史记录使用history来表示；
(4)浏览器的信息使用navigator来表示；
(5)窗口里面的内容使用document来表示；
2.这里重点讲下window对象和location对象；
9.1window
1.window对象是BOM中的顶级对象，默认可以省略（即调用其函数时可以省略window.）；
2.window对象是相对于web浏览器而言的，依赖于浏览器，在浏览器中全局对象指的就是window对象；
3.window对象可以获取其他BOM对象；
注意：全局函数和window对象的函数不一样。全局函数不属于任何一个内置对象；

1.Window_API

2.Window方法代码示例
需求：提示框
//1消息框
alert(‘我是alert’);
//2提示输入框 prompt参数：第一个是标题第二个参数：提示框中的默认值
prompt(‘请问你是单身吗’,‘222’);
//3 确认框参数：确认框中的提问信息返回值：boolean
var res = confirm(‘你能做我女朋友吗？’);
console.debug(res);
需求：定时器
setTimeout(‘document.getElementById(“txt1”).value=1’, 5000);
var res;
//JS中不能同时使用单引号或者双引号进行嵌套
function start() {
res = setInterval(“document.getElementById(‘txt2’).value = new Date();”, 1000);
}
function stop() {
clearTimeout(res);
}

9.2location 当前访问的网址的相关信息 1.API

2.location代码示例
var loc = window.location;
for(var name in loc) {
console.debug(name, loc[name]); //查看对象信息(了解内容)
}
window.location.href = “http://www.baidu.com”;