js 函数+滚动条

1. 函数传参

函数：是由事件驱动或者被调用时执行可重复使用的代码块

形参：在函数体内可以有多个形参没有特定的值

实参：是具体的值，或者变量，或者数组字符串等等

1.形参和实参需要一一对应

function 函数名(形参列表){
函数体
return 返回值
}

实参：是具体的值，或变量，数组，字符串等
      函数调用时，在括号里写进去的参数
形参：是在函数定义时在括号里设定的参数
      在函数体内可以有多个

2.arguments可变参数数组
在函数定义的内部，有一个数组，arguments会接受函数调用的时候所有的实参，并按照从左到右的顺序排列，因此，在js函数中形参可以与实际参数个数不同，通过arguments数组可以实现实参的调用

$\color{orange}{注意：}$ 在函数定义的时候，如果内部没有arguments，则形参和实参必须一一对应，有arguments的时候，可以省略形参，因为arguments会将所有的实参接收为一个数组

function sum() {
var sum = 0;
for (var i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
console.log(sum(1, 2, 3, 4, 5));

2. 形参的默认值

函数有时候在特殊情况下，可以给形参加上默认值，有默认值时，函数调用，可以不写参数

function rand(min = '0', max = '100') {
return Math.round(Math.random() * (max - min) + min)
}
console.log(rand());

3. 变量的作用域

变量通常在两个位置被声明：
函数内局部变量只能在定义的函数内被访问
函数外全局变量可以在程序的各个位置被访问

通过var关键字来定义变量
$\color{orange}{注意：}$ 如果局部变量和全局变量重名，函数执行时访问局部变量

4. 函数的嵌套

在函数的内部，去使用另外一个函数
函数的嵌套中，如果被嵌套的函数有参数，则外层函数需要跟被嵌套函数参数一一对应

5. 变量作用域的污染

当变量命名重复时，程序运行的过程中，就可能会出错

使用全局变量时，如果全局变量在多处声明，后声明的会覆盖先声明的语句，造成变量无法区分，这种情况称为变量的污染

$\color{orange}{注意：}$ 解决变法：利用函数来分割作用域，来进行文件中变量作用域的分割

var qqq = 0;
(function (o) {
console.log(1);
var qwe = 100;
var qqq = 1;
console.log(qqq);
})(0);

6. 函数的执行方式

事件绑定和调用:
1.行间事件的绑定，本质上是一个无返回值的函数的调用

<div class="box" onclick="fn(200)"></div>

2.函数内部this关键字，永远指向函数的调用对象
3.行间事件中，调用对象是标签本身，所有log(this)输出的是标签
4.当函数直接调用的时候，调用方式是window对象，而一般情况下，window对象自动省略，

7. 函数的几种形式

1.无参无返回值
2.有参有返回值
3.无参有返回值
4.有参无返回值

8. 函数定义方法

1.字面量形式
必须在变量声明后使用函数，在变量没有声明前不能使用（undefined），

var fn=function(){}

2.函数名
声明一个函数，可以在任何地方调用

function fn(){}

3.自调用函数
匿名函数
自己调用自己，立即执行，但是只执行一次

(function(形参列表){
函数体
})(实参列表);
(function (w){
console.log(w);
})(3);

9. 函数

定义：由事件驱动的或者当它被调用时执行的可重复使用的代码块

$\color{orange}{注意：}$ 同一段代码在多处出现，成为代码冗余，维护不便，函数就是代码中封装复用的思想，将一块重复执行的代码，通过一个标识符来代替，实现在一个地方定义，在多处使用的效果，方便维护

//事件驱动
div1.onclick = function () {
// 被调用
function rand() { }

函数使用（包含两个过程）
1.函数的定义
function 函数名(形参列表){
函数体
return 返回值
}
2.调用

回调函数：将函数作为参数传递到另外的函数中执行,一般情况下，回调函数必伴随着分支语句

function c(callback) {
console.log(callback);
}

c(function d() {
return 1;
});

递归函数：函数在内部调用自身本身,必须有出口

var f = 0;
function e() {
f++;
if (f > 10) {
return;
} else {
e();
}

}

滚动条：

window.onscroll =function(){}

onscroll当页面滚动条被滚动时触发
监听页面滚动
被window对象所调用
获取滚动条偏移量
滚动条偏移量是滚动条距离页面上边的距离

 document.body.scrollTop--chrome支持(低版本)
 document.documentElement.scrollTop--Chrome、firefox支持
 window.pageYOffset   safari支持
 window.pageXOffset

window.onscroll = function () {
var y = document.documentElement.scrollTop;
console.log(y);
var x = document.documentElement.scrollLeft;
console.log(x);
}

onscroll兼容性写法：

function scrol() {
// 普通方法
var scrollTop = document.documentElement.scrollTop ||
document.body.scrollTop || window.pageYOffset;
var scrollLeft = document.documentElement.scrollLeft ||
document.body.scrollLeft || window.pageXOffset;
return [scrollTop, scrollLeft];


// 使用json字符串方法
var scroll={
y:document.documentElement.scrollTop ||
document.body.scrollTop || window.pageYOffset,
x:document.documentElement.scrollLeft ||
document.body.scrollLeft || window.pageXOffset,
}
return scroll;
}
 window.onscroll = function () {
 // console.log(scrol()[0], scrol()[1]);   普通方法输出
console.log(scrol().y,scrol().x);   //json输出
    }

 // window.onresize浏览器窗口大小发生变化，触发调用方法
        window.onresize=function(){
        // console.log(document.documentElement.offsetWidth);
        console.log(document.documentElement.offsetHeight);
        console.log(document.documentElement.clientHeight);
        console.log(document.documentElement.scrollHeight);
        document.documentElement.scrollTop=500;
        console.log(document.documentElement.scrollTop);    
    }

滚动条高度 + 当前窗口的可见高度 == 页面的整体高度
文档高度，整个html加载完后的高度

document.documentElement.offsetHeight

浏览器可视区域高度，是浏览器显示内容区域的大小

document.documentElement.clientHeight

滚动条的总长度

document.documentElement.scrollHeight

offsetHeight=实际文档高度

if(文档的高度<窗口高度){
scrollHeight=clientHeight(窗口高度)
}else{
scroloffsetHeight=实际文档高度
if(文档的高度<窗口高度){
scrollHeight=clientHeight(窗口高度)
}else{
scrollHeight=offsetHeight(文档高度)
}

js 函数+滚动条