2017-03-05 JS 学习笔记

for 循环

格式：

for(语句1 ; 语句2; 语句3){
            被执行的代码块
}

语句1：最先执行，而且永远只执行一次
语句2：执行完语句1，就执行语句2，当语句2条件为 true 时，执行循环体中的代码，执行完循环体中的代码后执行语句3
语句3执行完之后，那么会再次执行语句2

执行顺序
1.先执行变量 var i = 0;（并且只执行一次）
2.然后执行判断条件
3.当条件成立，执行循环体中的语句
4.执行完循环体中的语句，执行++
5.执行完++，开始循环：2、3、4、2、3、4......直到件为false时候跳出循环
方式1

for(var i = 0; i < 5; i ++){
            console.log(i);
}

方式2：

var i = 25;
for(; i  > 9; i--){
            console.log(i);
}

break 和 continue

break 和 continue 只出现在循环体或者 switch 中
break：遇到 break 立即跳出循环体，结束循环
continue:遇到 continue 跳出本次循环继续下次循环

打印1~100 的整数，排除能被3整出的数

for (var i = 0 ; i <= 100; i++){
      if(i % 3 == 0){
              continue;  
      }
      console.log(i);
}

函数

什么是函数
函数是具有特定功能的代码块
语法：
函数名称：遵循标识符命名规范

function 函数名称(){
            这里是要执行的代码
}

注意点：
函数想要被执行，必须要手动调用

函数如何来调用：
函数名称();
其中()表示立即执行
补充：如果将函数直接用变量接收，那么函数名可以不写，调用时直接使用变量名();来调用

函数的几种类型

返回值：什么是返回值
当函数执行完毕的时候，如果向得到一个结果那么用 return 返回，用 return 返回的值就是函数的返回值。

无参无返回值

function printRose(){
        console.log(" @");
        console.log("\\|/");
        console.log(" |");
}

有参无返回值

 function printRose(number)
     {
             for(var i=0; i < number; i++){
           console.log(" @");
           console.log("\\|/");
           console.log(" |");
           }
     }

有参有返回值

 function sum(a,b)
    {
        return a + b;
    }
    var result = sum(12,4) + 10;
    console.log(result);

无参数有返回值

 function test() {
        return "123";
    }
    var result2 = test();
    console.log(result2);

企业开发中，一般没有返回值的函数较多，因为编程主要的是注重过程

递归函数

什么是递归函数：
定义：就是自己调用自己
注意点：
1.递归函数有性能问题，开发中几乎不用
2.递归函数必须有结束条件，不然就会进入死循环

变量的作用域

变量分为两种
局部变量(也叫内部变量)
定义：
就是声明周期在函数内部的变量或者函数的参数
作用域
只有在函数内部能使用
生命周期：
从定义的那一行开始，当函数执行完毕的时候死去。函数遇到 } 执行结束
全局变量
定义
声明在函数外面的变量
作用域
可以在整个 JS 文件中使用
声明周期
只有当当前的网页关闭才能释放
注意点
开发中全局变量尽量避免使用，耗内存

函数的提升

第一种提升
在函数内部或外部，如果把一个值赋值给未声明的变量，那么这个变量会被提升为全局变量
第二种提升

var num = 10;
function test(){
        console.log(num);
        num = "20"
}
test();
console.log(num);的打印结果为undefinded
这么写相当于
var num = 10;
function test(){
        var num;
        console.log(num);
        num = 20;
}
test()

dom 与对象

什么是 dom
当浏览器被加载时，浏览器会创建
dom 对象模型，被称为dom，比喻成一棵长满标签的树
什么是对象
内部封装了很多功能的功能组

JS 控制样式

样式

// 1.拿到box这个标签
var dom = document.getElementById("box");
// 2.修改他的样式的width为200
box.style.width = "200px";
//另一种写法 box.style.width = 200 + “px”；
//连接符都变成了驼峰命名法
box.style.backgroundColor = "pink";

Document 引申为 documen
如果一个对象想要调用其方法，通过 . 来调用
赋值用 ”“ 引起来

JS 控制结构

修改标签里的内容

dom.innerHTML = "随便写";
dom.innerHTML = "<p>随便写</p>"
// innerHTML 就是往标签里添加内容

JS 事件的三要素

三要素
事件源
事件
事件处理程序（就是函数）

事件源.事件 = 事件处理程序

dom.ondblclick = function(){
            dom.style.backgroundColor = "green";
}

JS 事件都是以 on 开头

入口函数

当整个文档加载完毕才执行

<head>
window.onload = function(){
        var box = document.getElementById("box");
        console.log(box);
        box.onclick = function (){
                box.style.backgroundColor = "green";
        }
}
</head>
<body>
        <div class="box" id="box"></div>
</body>

练习以及练习的抽离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            border: 1px solid #000;
            text-align: center;
            background-color: deepskyblue;
        }
        .box img{
            width: 80px;
            cursor: pointer;
        }
        body{
            background:  url(images/huanfu/1.jpg) 0 0 no-repeat;
        }
    </style>
</head>
<body id="main">
<div class="box">
    ![](images/huanfu/1.jpg)
    ![](images/huanfu/2.jpg)
    ![](images/huanfu/3.jpg)
    ![](images/huanfu/4.jpg)
    ![](images/huanfu/5.jpg)
</div>
<script>
    // 1.先得到对应的标签
    var img1 =  document.getElementById("icon1");
    var img2 =  document.getElementById("icon2");
    var img3 =  document.getElementById("icon3");
    var img4 =  document.getElementById("icon4");
    var img5 =  document.getElementById("icon5");
    var body =  document.getElementById("main");

    // 2.事件源.事件 = 事件处理程序
    img1.onclick = function () {
        // 3.更改body的背景图片即可
        body.style.background = "url(images/huanfu/1.jpg) 0 0 no-repeat";
    }
    img2.onclick = function () {
        // 3.更改body的背景图片即可
        body.style.background = "url(images/huanfu/2.jpg) 0 0 no-repeat";
    }
    img3.onclick = function () {
        // 3.更改body的背景图片即可
        body.style.background = "url(images/huanfu/3.jpg) 0 0 no-repeat";
    }
    img4.onclick = function () {
        // 3.更改body的背景图片即可
        body.style.background = "url(images/huanfu/4.jpg) 0 0 no-repeat";
    }
    img5.onclick = function () {
        // 3.更改body的背景图片即可
        body.style.background = "url(images/huanfu/5.jpg) 0 0 no-repeat";
    }
</script>
</body>
</html>

抽离封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            border: 1px solid #000;
            text-align: center;
            background-color: deepskyblue;
        }
        .box img{
            width: 80px;
            cursor: pointer;
        }
        body{
            background:  url(images/huanfu/1.jpg) 0 0 no-repeat;
        }
    </style>
</head>
<body id="main">
<div class="box">
    ![](images/huanfu/1.jpg)
    ![](images/huanfu/2.jpg)
    ![](images/huanfu/3.jpg)
    ![](images/huanfu/4.jpg)
    ![](images/huanfu/5.jpg)
</div>
<script>
    // 1.先得到对应的标签
    var body =  document.getElementById("main");

    // 提供一个函数
    function changeImg(tag,url) {
        var dom =  document.getElementById(tag);

        // 事件源.事件 = 函数
        dom.onclick = function () {
            // 更改body的背景图片图片
            body.style.background = url;
        }
    }
    changeImg("icon1","url(images/huanfu/1.jpg) 0 0 no-repeat");
    changeImg("icon2","url(images/huanfu/2.jpg) 0 0 no-repeat");
    changeImg("icon3","url(images/huanfu/3.jpg) 0 0 no-repeat");
    changeImg("icon4","url(images/huanfu/4.jpg) 0 0 no-repeat");
    changeImg("icon5","url(images/huanfu/5.jpg) 0 0 no-repeat");

</script>
</body>
</html>

三次封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            border: 1px solid #000;
            text-align: center;
            background-color: deepskyblue;
        }
        .box img{
            width: 80px;
            cursor: pointer;
        }
        body{
            background:  url(images/huanfu/1.jpg) 0 0 no-repeat;
        }
    </style>
</head>
<body id="main">
<div class="box">
    ![](images/huanfu/1.jpg)
    ![](images/huanfu/2.jpg)
    ![](images/huanfu/3.jpg)
    ![](images/huanfu/4.jpg)
    ![](images/huanfu/5.jpg)
</div>
<script>
    // 1.先得到对应的标签
    var body =  document.getElementById("main");

    // 提供一个函数
    function changeImg(tag,url) {
        var dom =  document.getElementById(tag);

        // 事件源.事件 = 函数
        dom.onclick = function () {
            // 更改body的背景图片图片
            body.style.background = url;
        }
    }
 
    for(i = 1; i < 6; i++){
          changeImg("icon" + i,"url(images/huanfu/" + i + ".jpg) 0 0 no-repeat");     

}
</script>
</body>
</html>

数组的声明

什么是数组
数组是一个对象，是一个集合，就是用来存储其他变量的
声明数组的方式
第一种（几乎没人用）

var myArray = new Array();

第二种

var myArr = [];

先定义后初始化

var arr = [];
arr[0] = 12;
arr[1] = 15;
arr[2] = 15;

定义的同时初始化

var arr2 = [12,3,4];

数组的 .push 方法

arr2.push(45);
//从数组的最后添加元素