JS函数与BOM

Posted 2020-09-11

[函数的声明及调用]
1、函数声明的格式:
function 函数名(参数1,参数2,....){
//函数体
return结果;
}
函数名(参数1的值,参数2的值,....)

>>>函数的调用格式
直接调用:函数名(参数1的值,参数2的值,....)
事件调用:事件名="函数名()";

2、函数声明的几点强调:

①函数名的声明，必须符合小驼峰法则(首字母小写，之后每个单词字母大写)

②参数列表，可以有参数，也可以无参数。分别称为有参函数和无参函数。

③声明函数时的参数列表，称为“形参列表”(变量的名);
调用函数时的参数列表，称为“实参列表”(变量的值);
函数中，实际有效的值取决于实参的赋值，未被赋值的形参，将为Undefined;

④函数如果需要返回值，可用return返回结果。
调用函数时，使用var 变量名=函数名();的方式，接受返回结果。
如果函数没有返回值，则接受的结果为Undefined;

⑤函数中变量的作用域:
在函数中，使用var声明的变量，默认为函数局部变量，只在函数内容使用;
不用var声明的变量，默认为全局变量，(函数中的全局变量，必须在函数电泳后才能使用)
函数的形参列表，为函数局部变量，只在函数内部使用;

⑥函数声明与函数调用，没有先后之分。即，调用语句可在声明语句之前。

[匿名函数的声明及调用]【重点】

1、声明一个匿名函数，直接赋给某个事件
window.onload=function(){}

2、使用函数表达式声明匿名函数:
声明函数表达式:var func=function(){}
调用函数表达式:func();
>>>使用匿名函数表达式时，调用语句，必须在声明语句之后，否则报错(对比常规函数声明与调用区别)

3、使用自执行函数声明并直接调用匿名函数:
!function(参数1){}(参数1的值) //使用任意运算符开头，一般使用【！】
(function(){}()) //使用()将匿名函数及之后的括号包裹
(function(){})() //使用()只将匿名函数表达式包裹
特点：
①结构清晰，开头加！,结尾加()。不容易乱，推荐使用;
②可以表明匿名函数与之后的()为一个整体，推荐使用;
③无法表明匿名函数与之后的()为一个整体，不推荐使用;

 JS中代码的运行顺序

console.log(abc);
var abc=10;
function funcN(){}
funcN();

JS中代码运行，会先进行检查、装载，即变量声明、函数等操作;
然后再进行执行阶段(变量赋值等属于执行阶段)
函数的声明属于装载阶段，函数的调用属于执行阶段，所以，函数的调用语句写在函数声明语句之前，没有任何关系。
上述代码执行流程:
----检查装载----
var num;
function funcN()
----执行阶段----
console.log(abc);
abc=10;
funcN();

[函数内部属性]
【Arguments对象】
1、作用：用于保存调用函数时的，所赋值的实参列表。
>>>当我们调用函数，并使用实参赋值时，实际上参数已经保存到arguments数组中，
即使没有形参，也可以使用arguments[n]的形式调用参数

2、arguments数组的个数，取决于实参列表，与形参无关;(顺序从0开始)
但，当第N个位置的形参、实参、arguments都存在时，形参与arguments是同步。
(即在函数中修改其中一个的值，另一个也会同步)

3、arguments.callee是arguments的重要属性，用于返回arguments所在函数的引用；
arguments.callee()可以调用自身函数执行；
在函数内部调用自身的写法，叫做递归，所以arguments.callee()是递归调用时常用的方式；

【this】
指向函数调用语句所在作用域，即谁调用函数，this指向谁;

 [BOM]

[screen对象]:
console.log(screen.width);//屏幕宽度
console.log(screen.height);//屏幕高度
console.log(screen.availWidth);//可用宽度
console.log(screen.availHeight);//可用高度=屏幕高度—底部任务栏


[location对象]:

完整的url路径
协议://主机名(IP地址):端口号/文件路径 ?传递参数(name1=value1 & name2=value)#锚点

console.log(location);
console.log(location.href);//完整路径
console.log(location.protocol);//路径协议 http: https: ftp: file: mailto:
console.log(location.pathname);//文件路径部分 /开始
console.log(location.port);//端口号
console.log(location.search);//从?开始往后的部分
console.log(location.hostname);//主机名(IP地址)
console.log(location.host);//主机名+端口号
console.log(location.hash);//#开始的锚点

function locationAssign(){
//加载新的文档。加载以后，可以回退。
location.assign("http://www.baidu.com");
}

function locationReplace(){
//使用新的文档，替换新的文档。替换以后，不能回退。
location.replace("http://www.baidu.com");
}

function locationReload(){
//重新加载当前页面
//reload(true):从服务器重新加载文档
//reload():在本地刷新当前页面
location.reload(true);
}


[history]:
1、history.length:浏览历史列表的个数；
2、history.forward();前进倒前一个页面
3、history.back();后退到后一个页面
4、history.go(0);跳转到历史网页列表的任意位置
位置标志:当前页面为0;前一个页面为1;后一个页面为-1;


[Navigator对象]

console.log(navigator.appName);//产品名称
console.log(navigator.appVersion);//产品版本号
console.log(navigator.userAgent);//用户代理信息
console.log(navigator.platform);//系统平台


navigator.plugins:返回一个数组，检测浏览器安装的所有插件
>>>主要属性:
description:插件的描述信息
filename:插件在本地磁盘的文件名
length:插件个数
name:插件名


navigator.mimeTypes:浏览器插件,所支持的文件类型
>>>主要属性:
description:MIME类型描述
enabledPlugin:支持此类型的浏览器插件
suffixes:此类型可能的后缀名
type:MIME类型的写法，例如:image/x-iocon text/css

window对象的常用方法【重点】
>>>window对象中的所有方法，均可以省略前面的window.,比如close();

1、prompt:弹窗接收用户输入;
2、alert:弹窗警告
3、confirm:带有确认/取消按钮的提示框;
4、close:关闭当前浏览器选项;
5、open:重新打开一个窗口，传入数据:URL/窗口名称/窗口特征
6、setTimeout:设置延时执行，只会执行一次
7、setInterval:设置定时器，循环每N毫秒执行一次
两个参数：需要执行的function/毫秒数(用逗号分隔)
8、clearTimeout:清除延时
9、clearInterval:清除定时器
传入参数:调用setInterval时返回一个ID，通过变量接收ID，传入clearInterval。