1. 介绍：

　　　　　JS中的函数是一种通过调用来完成具体业务的一段代码块。

　　　　最核心的目的是将可重复执行的操作进行封装，然后供调用方无限制的调用。

　　基本作用：

- 　　　方法(函数)是由事件驱动的或者当他被调用时被执行的可重复使用的代码块。
- 　　　JavaScript 函数语法：函数就是包裹在花括号中的代码块。

2. 语法：

　　方法（函数）关键字：function

　　注意：JavaScript 对大小写敏感。关键词 function 必须是小写，并且必须以与函数名称相同的大小写来调用函数。

　　　　第一种：普通创建　　（常用）

　　　　　　　语法：function 方法名（）{ 输出语句；}

　　　　　　　　调用方法()；
　　　　　　　　方法必须被调用。(前后都可被调用)

代码：

1 　　<script>
2         // 语法一 普通方法
3         function fang1(){
4             console.log("这是方法语法1");
5         }
6         fang1();    // 调用
7     </script>

　　　　　　　　　　方法被提前调用是可以的。

　　　　　　　　　变量被提前调用是不可以的。

例：

 1     <script>
 2                    
 3         console.log(num);   // 此处的num虽然被定义，有值。但是不可被调用 在下一行（var num = 123;）后才被执行。
 4 
 5         // 定义 全局变量
 6         var num = 123;
 7 
 8         console.log(num);  //  此时num是被定义过的，有值的。可以正常调用
 9 
10     </script>

　　　　第二种：字面量创建

　　　　　　注意：字面量创建方法不可被提前调用！！！

　　　　　　　　类型变量名(可变) = 字面量(是不可变的);

　　　　　　注：常量不可变是的被 final 修饰后 的变量为常量。例：final 类型常量 = 字面量；

　　　　　　字面量创建语法：
　　　　　　var 方法名 = function（）{ 执行代码块；}
　　　　　　调用方法名( )；

代码：

1     <script>
2         // 语法二 字面量方法
3         var fang2 = function() {
4             console.log("这是方法语法2");
5         }
6         fang2();    // 调用
7     </script>

　　　　　第三种：实例化创建（大写）

　　　　　　　　实例化创建函数（new 出的就为实例化）
　　　　　　var 方法名 = new Function(输出语句...)；

代码：

1     <script>
2         // 语法三 实例化方法
3         var fang3 = new Function(console.log("这是方法语法3"));
4     </script>

3. 调用：

　　在调用函数时，可以向其传递值，这些值被称为参数。这些参数可以在函数(方法)中使用。可以发送任意多的参数，由逗号 (,) 分隔；

　　变量和参数必须以一致的顺序出现。

例：

 1     <script>
 2         // 调用
 3         // 普通创建
 4         // 形参： can1, can2
 5         function fangfa1(can1, can2){
 6             console.log("对象冒充" +"--"+ can1 +"--"+ can2);
 7             // console.log(fangfa2);
 8         }
 9         // 字面量创建
10         var  fangfa2 = function(){
11                 return true; // 返回类型可随意
12         }
13 
14         
15         // 通过 fangfa2 调用 fangfa1
16         // 形参： can1, can2 --> 实参：12.07, 你好！
17         // 对象冒充一：.call();
18         fangfa1.call(fangfa2, "12.07","你好！");
19 
20         // 对象冒充二：.apply();
21         fangfa1.apply(fangfa2, ["12月7日", "你好吗？"]);
22     </script>

4. 匿名函数：没有方法名的方法。

　　语法：

　　+function() { 输出语句；} ()；
　　　　+ 可换为外层括号() + 与 -

代码：

1     <script>
2         // 匿名函数
3         // 可将 + 换为 - 及外层（）
4         + function(){
5             console.log("这是匿名函数！");
6         }();
7     </script>

　　　　　　　　　　或者

1     <script>
2         // 匿名函数
3         // 可将 + 换为 - 及外层（）
4          (function(){
5             console.log("这是匿名函数！");
6         })();
7     </script>

5. 全局变量和局部变量

　　　　全局变量：是方法外的变量；

　　　　局部变量：是在本方法内的变量，是不可在别的方法内调用的。

6. 点击事件：

　　关键字：onclick
　　　　onclick="updateColor()" --点击变色(方法名)

例：

 1     <!-- 点击 -->
 2     <!-- 内部样式装饰盒子 -->
 3     <style>
 4         #box{
 5             width: 250px;
 6             height: 250px;
 7             background-color: violet;
 8         }
 9     </style>
10     
11     <!-- 建个盒子、点击变色  updateColor为方法名 -->
12     <div id="box" onclick="updateColor()">这是一个盒子</div>
13 
14     <script>
15         // 点击事件 关键字 + 方法名
16         function updateColor(){
17             // 盒子颜色为 violet 当鼠标点击后 变为 greenyellow
18             document.getElementById("box").style.backgroundColor = "greenyellow";
19         }
20     </script>