JS的函数入门

函数

1、函数的简介

函数也是一个对象，可以封装一些功能（代码），在需要时可以执行这些功能（代码），可以保存一些代码在需要的时候调用

使用typeof检查一个函数对象时，会返回function

// 创建一个函数对象
// 可以将要封装的代码以字符串的形式传递给构造函数
var fun = new Function("console.log('Hello World.');");
// 封装到函数中的代码不会立即执行
// 函数中的代码会在函数调用的时候执行
// 调用函数语法：函数对象（）
// 当调用函数时，函数中封装的代码会按照顺序执行
fun(); // Hello World.

使用函数声明来创建一个函数

function 函数名([形参1, 形参2...形参N]) {
	语句...
}
// 调用函数
函数名();

示例

function fun1(){
    console.log("Hello world.");
    alert("Hello World!");
    document.write("Helloworld");
}
fun1();

使用函数表达式（匿名函数）来创建一个函数

var 函数名 = function([形参1, 形参2...形参N]) {
	语句...
};
// 调用函数
函数名();    

示例

var fun1 = function(){
    console.log("Hello world.");
    alert("Hello World!");
    document.write("Helloworld");
};
fun1();

2、函数的参数

定义一个用来求两个数和的函数

可以在函数的()中来指定一个或多个形参（形式参数）多个形参之间使用,隔开，声明形参就相当于在函数内部声明了对应的变量

在调用函数时，可以在()中指定实参（实际参数）

• 调用函数时解析器不会检查实参的类型。所以要注意，是否有可能会接收到非法的参数，如果有可能则需要对参数进行类型的检查

• 调用函数时，解析器也不会检查实参的数量，多余实参不会被赋值。如果实参的数量少于形参的数量，则没有对应实参的形参将是undefined

// 创建一个函数，用来计算三个数的和
function sum(a, b, c) {
    alert(a + b + c);
}
sum(1, 2, 3, 4); // 6

3、函数的返回值

可以使用return来设置函数的返回值语法：return 值

return后的值将会作为函数的执行结果返回，可以定义一个变量，来接收该结果

在函数中return后的语句都不会执行

如果return语句后不跟任何值，就相当于返回一个undefined；如果函数中不写return，则也会返回undefined

return后可以跟任意类型的值

// 创建一个函数，用来计算三个数的和
function sum(a, b, c) {
    // var result = a + b + c;
    // return result;
    return a + b + c;
}

// 调用函数
// 变量result的值就是函数的执行结果
// 函数返回什么result的值就是什么
var result = sum(1, 2, 3);
console.log("result = " + result);

 

立即执行函数

函数定义完，立即被调用，这种函数叫做立即执行函数

立即执行函数往往只会执行一次

// 函数对象()
(function(){
    console.log("I'm anoymous function.");
})(); // I'm anoymous function.
(function(a, b){
    console.log(a + b);
})(2,3); // 

什么是DOM

DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。

DOM就是由节点组成的。

解析过程

HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。

DOM树（一切都是节点）

DOM的数据结构如下：

 

上图可知，在HTML当中，一切都是节点：（非常重要）

• 元素节点：HMTL标签。

• 文本节点：标签中的文字（比如标签之间的空格、换行）

• 属性节点：：标签的属性。

整个html文档就是一个文档节点。所有的节点都是Object。

DOM可以做什么

• 找对象（元素节点）

• 设置元素的属性值

• 设置元素的样式

• 动态创建和删除元素

• 事件的触发响应：事件源、事件、事件的驱动程序

DOM节点的获取

DOM节点的获取方式其实就是获取事件源的方式

操作元素节点，必须首先找到该节点。有三种方式可以获取DOM节点：

    var div1 = document.getElementById("box1");      //方式一：通过id获取单个标签

    var arr1 = document.getElementsByTagName("div1");     //方式二：通过 标签名 获得 标签数组，所以有s

    var arr2 = document.getElementsByClassName("hehe");  //方式三：通过 类名 获得 标签数组，所以有s

既然方式二、方式三获取的是标签数组，那么习惯性是先遍历之后再使用。

特殊情况：数组中的值只有1个。即便如此，这一个值也是包在数组里的。这个值的获取方式如下：

    document.getElementsByTagName("div1")[0];    //取数组中的第一个元素

    document.getElementsByClassName("hehe")[0];  //取数组中的第一个元素