函数：就是将一些语句进行封装，然后通过调用的形式，执行这段代码。
函数的作用：
1，将大量重复的语句写在函数里，可以直接调用函数，避免重复劳动。
2，简化编程，让编程模块化。
console.log("hello world");
sayHello(); // 由于是同时加载所以可以调用。 //调用函数
//定义函数：
function sayHello(){
console.log("hello");
console.log("hello world");
}
函数的定义：
函数的语法：
function 函数名字(){ }
1，function：是一个关键字。
2，函数名字：命名规定和变量的命名规定一样。
3，参数：后面有一对小括号，里面是放参数。
4，大括号里面，是这个函数的语句。
函数的调用：
函数名().
函数的参数：形参和实参
函数的参数包括形参和实参
注意：实际参数和形式参数的个数，要相同。
例子：
sum(3,4); //7 sum("3",4); // "34" sum("Hello","World"); // HelloWorld //函数：求和 function sum(a, b) { console.log(a + b); }
函数的返回值：
console.log(sum(3, 4)); //函数：求和 function sum(a, b) { return a + b; }
伪数组 arguments:
arguments代表的是实参，且只在函数中使用。
1，返回函数实参的个数：arguments.length
fn(2,4); fn(2,4,6); fn(2,4,6,8); function fn(a,b,c) { console.log(arguments); //arguments接收所有参数且返回个伪数组 console.log(fn.length); //获取形参的个数 console.log(arguments.length); //获取实参的个数 console.log("----------------"); }
之所以说argumes是伪数组，因为：arguments可以修改元素，但不能改变数组的长短：
fn(2,4); fn(2,4,6); fn(2,4,6,8); function fn(a,b) { arguments[0] = 99; //将实参的第一个数改为99 arguments.push(8); //此方法不通过，因为无法增加元素 }
清空数组的方式：
var arr = [1,2,3,4,5]; arr.splice(0); console.log(arr); //[] arr.length = 0; console.log(arr); //[] arr = []; console.log(arr); //[]
关于DOM的事件操作：
JavaScript基础分为三个部分：
1，ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
2，DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
3，BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。
事件的三要素：
JS是以事件驱动为核心的一门语言。
1，事件源。引发后续事件的html标签。
2，事件。js定义好的。
3，事件驱动程序。对样式和html的操作，也就是DOM。
代码的书写步骤:
1，获取事件源：documen.getElementById('id');
2，绑定事件：事件源box，事件onclick = function(){事件驱动程序};
3，书写事件驱动程序：关于DOM的操作。
<script type="text/javascript"> window.onload = function(){ var div = document.getElementById('box1'); // 2，绑定事件 div.onclick = function(){ // 3,书写驱动程序 alert('顾清秋') } } </script> <style type="text/css"> #box1{ 100px; height: 100px; background-color: red; } </style> </head> <body> <div id="box1"></div> </body>
常见事件如下：
1，获取事件源的方式(DOM节点的获取)
var div1 = document.getElementById("box1"); //方式一：通过id获取单个标签 var arr1 = document.getElementsByTagName("div1"); //方式二：通过 标签名 获得 标签数组，所以有s var arr2 = document.getElementsByClassName("hehe"); //方式三：通过 类名 获得 标签数组，所以有s
2，绑定事件的方式：
方式一：直接绑定匿名函数
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getElementById("box1");
//绑定事件的第一种方式
div1.onclick = function () {
alert("我是弹出的内容");
}
</script>
方式二：先单独定义函数，在绑定。
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getElementById("box1");
//绑定事件的第二种方式
div1.onclick = fn; //注意，这里是fn，不是fn()。fn()指的是返回值。
//单独定义函数
function fn() {
alert("我是弹出的内容");
}
</script>
注意上方代码的注释。绑定的时候，是写fn，不是写fn()。fn代表的是整个函数，而fn()代表的是返回值。
方式三：行内绑定。
<!--行内绑定-->
<div id="box1" onclick="fn()"></div>
<script type="text/javascript">
function fn() {
alert("我是弹出的内容");
}
</script>
注意第一行代码，绑定时，是写的"fn()"，不是写的"fn"。因为绑定的这段代码不是写在js代码里的，而是被识别成了字符串。
3，事件驱动程序：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #box{ width: 100px; height: 100px; background-color:red; } </style> <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById('box'); console.log(oDiv); oDiv.onclick = function(){ oDiv.style.width = "200px"; oDiv.style.height = "200px"; oDiv.style.backgroundColor = 'yellow'; } } </script> </head> <body> <div id="box"></div> </body> </html>
上方代码的注意事项：
1，在js里写属性时，要用引号。
2，在js里写属性名时，都写成驼峰体。例如 background-color要写成backgroundColor.
有一点我们要知道：js的加载是和html同步加载的。因此，如果使用元素在定义元素之前，容易报错。这个时候，onload事件就能派上用场了，我们可以把使用元素的代码放在onload里，就能保证这段代码是最后执行。
建议是：整个页面上所有元素加载完毕在执行js内容。所以，window.onload可以预防使用标签在定义标签之前。