javascript 函数

一、javascript函数

1.1 概述

函数可以把代码封装起来，并且可以重复调用，完成特定功能的代码块
一个 JavaScript 函数用function关键字定义，后面跟着函数名和圆括号。

<script>
  // 声明函数
  function 函数名(){
     // 函数内部代码，又称为函数体
  }
// 调用函数
函数名();  
</script>

函数：系统函数和自定义函数

1.2 常见的系统函数

eval
parseInt
parseFloat
isNaN

1.2.1 eval

javascript中eval函数的作用是用于计算一个字符串，并将其作为脚本代码执行。

eval(string)

eval("x=10;y=20;document.write(x*y)") //返回200
document.write(eval("2+2")) //返回4
var x=10
document.write(eval(x+17)) //返回27

1.2.2 parseInt

parseInt(变量名);

作用：从一个字符串提取整数
提取规则：如果字符串第一个字符不是数字，就会返回NaN,它会遇到非数字就停止提取。

1.2.3 parseFloat

parseFloat(变量名);

作用：从一个字符串提取小数
提取规则：如果字符串第一个字符不是数字，就会返回NaN,它如果遇到除第一个以外的非数字就会停止提取。

1.2.1 isNaN

如果是NaN就返回true，如果不是的就是false
作用：先将一个变量的数据类型自动的转换为Number 如果是NaN就会得到true，如果是一个数字就得到false。

document.write(isNaN(5-2)); //返回false
document.write(isNaN(0)); //返回false
document.write(isNaN("Hello")); //返回true

1.3 自定义函数

1.3.1 声明函数

// 声明函数
function 函数名(){
    // 函数内部代码，又称为函数体
}
// 调用函数
函数名();

例：将1~100 累加封装成函数

function sum(){
 var sum = 0;
 for(var i=1; i<=100; i++){
     sum = sum+i;
 }
 console.log(sum);
}
sum();

1.3.2 函数参数

function 函数名(形参1, 形参2){
    // 函数体
}
函数名(实参1, 实参2);

函数调用参数实例：

function cook(arg){
 console.log(arg);
}
cook('嗨害嗨');

如果调用函数的时候，实参个数大于形参，则只会以形参个数为准

如果调用函数的时候，实参个数小于形参，未使用的形参值为 undefined

1.3.3 return 返回值

函数执行完毕后，只完成里边的代码，如果我们想要获取到函数运行中产生的数据，就需要用到返回值。

function getResult(){
    return 666;
}
console.log(getResult());

return 会终止函数并只会返回一个值，返回的是最后一个值
如果函数没有 return 则会返回 undefined

1.3.4 不定参数传递

function test(){
    console.log(arguments);
}
test(1,2,3,4,5);
// 输出结果
[1, 2, 3, 4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]

伪数组：

具有数组 length 属性

按照索引方式进行存储

它没有真正数组的一些方法： pop(), push()

1.3.5 函数中调用函数

function test1(){
    console.log('test1');
}
function test2(){
    test();
    console.log('test2');
}
test2();

1.3.6 匿名函数

匿名函数没有名字

function(){
    // 代码块
}

调用匿名函数：

用小括号的方法实现函数的自调用，注意，这种调用方法只能调用一次

(function(){
    console.log('hello world');
})();

还可以将匿名函数赋值给一个变量，当给这个变量加上() 的时候，就相当于调用了这个函数

fn = function (x, y) {
    return x + y;
};
console.log(fn(1, 2));

1.3.7 将函数当做参数

var f1 = function () {
    return 100;
};
var f2 = function (fun) {
    console.log(f1());
};
f2(f1);
// 输出结果
100

1.3.8 函数的调用方式

直接调用方式
函数内调用函数方式
事件属性调用
匿名函数通过变量调用

//直接调用方式
function a(){}
a();
//函数内调用函数方式
function a(){}
function b(){
    a();
}
//事件属性调用
function a(){}
<button onclick = "a();">点击</button>
//匿名函数通过变量调用
var sb = function(){
}
console.log(sb);

1.3.9 内置函数对象

var calSum3 = new Function('num1', 'num2', 'return num1 + num2');
calSum3(1,2)

BOM基本编程

二、BOM编程

2.1 BOM基本介绍

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。
BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。

2.2 BOM 的构成

BOM 比 DOM 更大，它包含 DOM。

window 对象，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性；
document 对象，文档对象；
location 对象，浏览器当前URL信息；
navigator 对象，浏览器本身信息；
screen 对象，客户端屏幕信息；
history 对象，浏览器访问历史信息；

2.3 window

window 对象是浏览器的顶级对象 它具有双重角色。

它是 JS 访问浏览器窗口的一个接口。

它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。

在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如 alert()、prompt() 等。

点击跳转： JavaScript初学者基础入门

2.3.1 窗口加载事件

在javascript的执行机制中，代码的执行是按照从上往下的顺序执行的，所以如果我们要给一个按钮添加点击事件，只能先设置按钮，然后获得按钮在进行操作

<body>
    <button>点击</button>
    <script>
        var btn = document.querySelector('button');
        btn.onclick = function(){
            alert('您刚点击了一下！')
        }
    </script>
</body>

如果我们想要把绑定的点击事件放置到页面前面，很明显是无法操作的。那应该怎么办呢？这个时候就可以通过我们的窗口加载事件来完成。

window.onload 就是窗口 (页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。

window.onload = function(){}
//或者 
window.addEventListener("load",function(){});

需要注意的是：

有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload是等页面内容全部加载完毕，再去执行处理函数。

window.onload 传统注册事件方式只能写一次，如果有多个，会以最后一个 window.onload 为准。

如果使用 addEventListener 则没有限制。

2.3.2 open()和close()

open()

open() 方法可以查找一个已经存在或者新建的浏览器窗口。

window.open([URL], [窗口名称], [参数字符串])
/*
参数说明：
1.URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
2.窗口名称：可选参数，被打开窗口的名称。
（1）该名称由字母、数字和下划线字符组成。
（2）"_top"、"_blank"、"_self"具有特殊意义的名称。
  _blank：在新窗口显示目标网页
  _self：在当前窗口显示目标网页
  _top：框架网页中在上部窗口中显示目标网页
（3）相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
（4）name 不能包含有空格。
  参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。
*/

//例1:打开http://www.baidu.com网站，大小为300px * 200px，无菜单，无工具栏，无状态栏，有滚动条窗口：
<script type="text/javascript"> window.open('http://www.baidu.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>
//例2:打开http://www.baidu.com网页，将在新窗体中打开，宽为600，高为400，距屏顶100像素，屏左0像素。当点击按钮时，打开新窗口。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>window.open</title>
<script type="text/javascript">
  function Wopen(){
      window.open('http://www.baidu.com','_blank','width=600,height=400,top=100,left=0');
  }
</script>
</head>
<body>
    <input name="button" type="button" onClick="Wopen()" value="点击我，打开新窗口!" / >
</body>
</html>

close()

close()关闭窗口

window.close();//关闭本窗口
<窗口对象>.close();//关闭指定窗口

<script type="text/javascript">
   var mywin=window.open('http://www.baidu.com'); //将新打的窗口对象，存储在变量mywin中
   mywin.close();
</script>

JavaScript函数和BOM及DOM编程（详细总结-无尿点）（一）