JS中的函数和BOM

Posted 2020-10-04

文档注释：开头两个*。写在函数上方，在调用函数时，
 可以看到文档中的描述信息；

function aaa(){

}

【函数的声明及调用】
1、函数的声明格式：
function 函数名(参数1，参数2，..){
// 函数体代码
return 返回值；
}

函数的调用：
① 直接调用：函数名(参数1的值，参数2的值，..);
② 事件调用：在html标签中，使用事件名="函数名()"
<button onclick="saySth(‘hhh‘,‘red‘)">点击按钮，打印内容</button>

2、函数的注意事项：
① 函数名，必须要符合小驼峰法则！！(首字母小写，之后每个单词首字母大写)
② 函数名后面的()中，可以有参数，也可以没有参数。分别称为有参函数和无参函数；
③ 声明函数时的参数列表，称为形参列表，形式参数。(变量的名字)
function saySth(str,color){}
调用函数时的参数列表，称为实参列表，实际参数。(变量的赋值)
saySth("呵呵呵呵","blue");
④ 函数的形参列表个数，与实参列表个数，没有实际关联关系。
函数参数的个数，取决于实参列表。
如果实参列表的个数<形参列表，则未赋值的形参，将为Undefined。
⑤ 函数可以有返回值，使用return返回结果；
调用函数时，可以使用一个变量接收函数的返回结果。
如果函数没有返回值，则接收的结果为undefined；
function func(){
return "haha";
}
var num = func(); // num = "haha";
⑥ 函数中变量的作用域：
在函数中，使用var声明的变量，为局部变量，只能在函数内部访问；
不用var声明的变量，为全局变量，在函数外面也能访问；
函数的形参列表，默认为函数的局部变量，只能在函数内部使用。
>>>>JS中没有块级作用域的概念！！！只有函数作用域和全局作用域。
⑦ 函数的声明与函数的调用，没有先后之分。 即，可以在声明函数前，调用函数。

func()；// 声明func之前调用也是可以的。
function func(){}；

[匿名函数的声明使用]
 1、声明一个匿名函数，直接赋值给某一个事件；
window.onload=function(){}

2、使用匿名函数表达式。将匿名函数赋值给一个变量。
 声明：var func = function(){}
调用：func()；

注意：使用匿名函数表达式时，函数的调用语句，必须
 放在函数声明语句之后！！！！(与普通函数区别！！！)

 3、自执行函数：
 ① ！function(){}(); // 可以使用多种运算符开头，但一般用!
！function(形参列表){}(实参列表)；
 ② (function(){}()); // 使用()将函数及函数后的括号包裹
 ③ (function(){})(){}; // 使用()值包裹函数部分；

 三种写法的特点：
 ① 使用！开头，结构清晰，不容易混乱，推荐使用；
 ② 能够表明匿名函数与调用的()为一个整体，官方推荐使用；
 ③ 无法表明函数与之后的()的整体性，不推荐使用；

[函数的内部属性]

 1、Auguments对象
 ① 作用：用于储存调用函数时的所有实参。
 当我们调用函数并用实参赋值时，实际上参数列表
 已经保存到arguments数组中，可以在函数中，
 使用argument[n]的形式调用。n从0开始。

 ② arguments数组的个数，取决于实参列表，与形参无关。
 但是，一旦第N个位置的形参、实参、arguments都存在时，
 形参将与arguments绑定，同步变化。(即在函数中修改形参的值，
 arguments也会改变，反之亦成立。)

③ arguments.callee 是arguments的重要属性。表示
arguments所在函数的引用地址：
在函数里面，可以使用arguments.callee()调用函数本身。

在函数内部，调用函数自身的写法，叫做递归。
 递归分为两部分：递和归。以递归调用语句为界限，可以将函数分为
 上下两部分。
 递：当函数执行上半部分，遇到自身的调用语句时，继续进入内层函数，
 再执行上半部分。直到执行完最内层函数。
 归：当最内层函数执行完以后，再从最内层函数开始，逐渐执行
函数的下半部分。

 当最外层函数执行时，遇到自身的调用语句，会进入内层函数执行，
 而外层函数的后半部分暂不执行，直到最内层函数执行完以后，再逐步向外执行。

[JS代码的执行顺序问题]
 JS代码在运行时，会分为两大部分，检查装载和执行阶段
 检查装载阶段：会先检测代码的语法错误，进行变量、函数的声明；
 执行阶段：变量的赋值、函数的调用等，都属于执行阶段。
 以下列代码为例：
 consoloe.log(num); // Undefined
 var num = 10;
 func1(); // 函数可以正常执行
 function func1(){}
 func2(); // 函数不能执行，打印func2时显示Undefined；
 var func2 = function(){}

 原因：上述代码的执行顺序为：

 ------------检查装载阶段-------------
 var num；
 function func1(){}
 var func2;
-------------执行阶段---------------
 consoloe.log(num);
 num = 10;
 func1();
 func2();
 func2 = function;

 Screen对象

console.log(screen.width); // 屏幕宽度
console.log(screen.height); // 屏幕高度
console.log(screen.availWidth); // 可用宽度
console.log(screen.availHeight); // 可用高度=屏幕高度-底部工具栏


 location对象

 取到浏览器的URL地址信息；
 完整的URL路径；
 协议名：//主机名(IP地址)：端口号/文件所在路径？传递参数
 (name1=value1&&name2=value2)#锚点

 例如：
 http：//127.0.0.1:8080/wenjianjia/index.html?name=jredu#top





console.log(location.href); // 返回当前完整路径
console.log(location.protocol); // 返回协议名
console.log(location.host); // 返回主机名+端口号
console.log(location.hostname); // 返回主机名
console.log(location.port); // 返回端口号
console.log(location.pathname); // 返回文件路径
console.log(location.search); // 返回？开头的参数列表
console.log(location.hash); // 返回#开头的锚点*/

// 使用JS跳转页面
window.location = "http://www.baidu.com";*/

 其他使用location提供的方法跳转页面的方式

location.assign("http://www.baidu.com");
location.replace("http://www.baidu.com");*/

function assign(){
// 加载新的文档，加载以后，可以回退。
location.assign("http://www.baidu.com");
}
function replace(){
// 使用新文档替换当前文档。替换以后，不能回退。
location.replace("http://www.baidu.com");
}
function reload(){
 重新加载当前文档。刷新页面
 reload()：在本地刷新当前页面，相当于F5
 reload(true)；强制刷新，从服务器端重新加载页面，相当于Ctrl+F5

 location.reload();
}

 history 浏览历史

console.log(history);
console.log(history.length); // 浏览历史列表的个数
function back(){
history.back(); // 后退按钮
}
function forward(){
history.forward(); // 前进按钮
}
function go(){*/
 跳转到浏览历史的任意一个页面；
 0表示当前页面，-1表示后一个页面(back)，1表示前一个页面(forward)

 history.go(1);
}

 navigator 了解即可
 包含浏览器的各种系统信息。

//console.log(navigator);

 检测浏览器安装的各种插件。

//console.log(navigator.plugins);

// 判断有没有插件
if(navigator.plugins[2].name == "Native Client"){
alert("有");
}else{
alert("没有");
}

// 寻找所有插件
for(var i=0; i<navigator.plugins.length;i++
alert(navigator.plugins[i].name);
}

 Window对象的常用方法：
 >>> 在window对象中的所有方法和属性，均可以省略window关键字。
 window.alert(); --> alert(); √

 1、alert()：弹出一个警告提示框；
 2、prompt()：弹窗接收用户的输入；
 3、confirm()：弹出一个带有"确定""取消"按钮的对话框，点击
 按钮返回true或false。
 4、close()：关闭当前浏览器窗口。在个别浏览器中，只能关闭在
 当前脚本新打开的页面(使用超链接、window.open()等方式打开的页面)
 5、open()：打开一个新窗口。
 参数一：新窗口的地址；
 参数二：新窗口的名字，并没有卵用；
 参数三：新窗口的各种属性设置，"属性1=值1，属性2=值2，属性3=值3"
 6、setTimeout：设置延时执行，只会执行一次；
 setIntervar：设置定时器，每隔n毫秒执行一次。
 接收两个参数，需要执行的function、毫秒数；
 7、clearTimeout：清除延时器；
 clearIntervar：清除定时器；
 使用方法：设置延时器或定时器时，可以使用变量接收定时器ID；
 var id = setInterval；
 调用clearInterval时，将id传入，即可清除对应的定时器；
 clearInterval(id)