2019.6.22 Web全栈开发 学习笔记（八）_西部开源素材

JavaScript Day1

上课日期：2019年7月31日

从今天开始我们正式进入了JavaScript的学习，作为一门编程语言，JavaScript是前端学习中最重要的部分之一，同时整体难度也在加大，比HTML和CSS要复杂很多。

课程内容

一、JavaScript简介

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript是前端开发所用的网页交互代码，用于实现前端页面的特效，数据交互，数据展示，调用API等。

引入方式：

1. 外部js文件

<script src="../js/index.js" type="text/javascript"></script>
1

2. 内嵌

<script>
//直接在此处书写JavaScript代码即可
</script>
1
2
3

二、JavaScript中变量初始化问题（声明变量）
js中使用关键字var来定义变量，是一种弱类型语言，var可以替代int，float，double，char等等多种关键字。可以声明单个变量，同时也可以声明多个变量。
在使用声明的变量前，一定要先初始化变量。

        var a;
        console.log(a);//没有初始化
        a = 10;
        console.log(a);
1
2
3
4

因为第一次没有对变量a进行初始化，所以输出为undefined，第二次则会输出已经初始化的a变量，输出值为10。

变量的数据类型：number，string，boolean，object，null，undefined等

变量的提前声明：

     console.log(a);//undefined
     var a=10;
     console.log(a);
1
2
3

第一次输出的时候，即使变量a还没有被var声明及定义，但还是会输出undefined，第二行定义之后，就会输出变量a的值为10。

三、JavaScript中的函数
函数的声明，关键字：function

1. 基本函数

 show();
        function show() {
            console.log(1);
        }
1
2
3
4

输出值为1

2. 带返回值的函数

function showinfo() {
            //执行代码
            return '1';
        }
    
        var a = showinfo();
        console.log(a);
1
2
3
4
5
6
7

输出值为1

3. 带参函数

function showname(name, sex, age) {
            return name;
        }
        var name = showname("张三", "男", 18);
        console.log(name);
1
2
3
4
5

输出结果为“张三”

4. 没有参数列表的可传参的函数

function showData() {

    //arguments 参数列表对象
    //arguments  取值按照集合来取值   key:value  索引
            console.log(arguments[0], arguments[1], arguments.length);
        }

        showData("小花", 18);
1
2
3
4
5
6
7
8

输出结果为 小花，18，2

5. 匿名函数
   匿名函数的意思是不带函数名称的函数，一般使用变量去接受，不提前声明

var list = function () {
        console.log(arguments);
        return arguments[0];
    }
    console.log(list(1, 2, 3));
1
2
3
4
5

输出结果为1，console.log(arguments)所输出的参数列表为list中的三个参数1，2，3，函数返回值为arguments参数列表的第一个值，即为1

6. 自执行函数
   顾名思义，自己执行的函数体，同样有实参形参及返回值

var mm = (function (x, y) {
            console.log(x, y);
            console.log(arguments);
            return x + y;
        })(1, 2);
        console.log(mm);
1
2
3
4
5
6

典型例题

var temp = "object";
        (function () {
            console.log(temp);//object
            var temp = "student";
            console.log(temp);//student
        })();
1
2
3
4
5
6

输出结果为undefined和student。
解析：函数外首先对变量temp进行了提前声明，值为“object”，进入函数体后，由于对temp又一次进行了提前声明，导致所赋的值变为student，而在赋值student之前，是找不到变量的赋值的，所以第一次输出时的值应为undefined，第二次才会输出student。
（小米公司2018年秋招笔试题真题）

四、JavaScript中的闭包和变量作用域

1. 变量的作用域

var a=10;
    function f1(){
        var m=15;
        console.log(m,a);
    }
    function f2(){
        var m=15;
        console.log(m,a);
    }
    f1();
    f2();
1
2
3
4
5
6
7
8
9
10
11

两个函数输出的值都为15，20，m为各自函数中的局部变量，a为全局变量，全局变量是作用于整个js代码的。

2. 变量的闭包

闭包的通俗理解是使用别人的局部变量
闭包的缺点：闭包会大量占用内存，导致网页内存泄漏，在开发过程中应该尽量避免使用闭包
一个简单的闭包

function f1(){
        var a=10;
        return a;
    }
    function f2(){
        console.log(f1());
    }
    f2();
1
2
3
4
5
6
7
8

a为f1函数中的局部变量，让a作为返回值，供函数f2中直接使用，即可在函数f2中使用f1的局部变量，这就形成了一个简单的闭包。

3. 案例

案例1：

function f1(){
        var a=1;
        t=function (){
            a++;
        }
        return function (){
            console.log(a);
        }
    }
    var a1=f1();
    a1();//1
    t();
    a1();//2
    t();
    a1();//3 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

三次调用a1函数的时候分别输出了1，2，3，因为系统将变量a写进了内存当中，所以在调用函数t的时候对内存中的a进行了+1的操作。

案例2：

function f1() {
        var n = 999;
        return function f2() {
            return n;
        }
    }
    console.log(f1()());//999
    console.log(f1());//
1
2
3
4
5
6
7
8

第一个console的意思是执行了f1函数中的子函数f2，所以输出的是返回值n，即为999
第二个console的意思是返回f2函数

案例3：

var name="global";
    function foo(){
        console.log(name);
    }
    function fooOuter1(){
        var name="local";

        foo();
    }
    fooOuter1();//global  local

    function fooOuter2(){
        var name="local";
        function foo(){
            console.log(name);//local    局部函数取就近
        }
        foo();
    }
    fooOuter2();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

fooOuter1输出值为“global”，fooOuter2输出值为“local”，因为fooOuter1函数中所定义的local为局部变量，只作用于函数内部。
同时，作为同名变量，局部函数取就近原则

案例4：

function test() {
        var value =2;
        return function (params) {
            console.log(value*params);
            console.log(window.value*params);
        }
    }
    value=3;
    var a = test();
    a(2);
1
2
3
4
5
6
7
8
9
10

输出结果是4和6，即value值取局部变量2，window.value取的是全局变量3，window属性表示所定义的全局变量或全局方法，是浏览器的最大对象。

案例5：

function f1(){
        var b=10;
        return function (){
            b++;
            console.log(b);
        }
    }
    f1()();
1
2
3
4
5
6
7
8

f1()表示执行函数f1，而f1()()则表示执行f1函数体内部的匿名函数function，所有输出的b的值要进行+1，最终的输出值为11

案例6（笔试题）：

var m=0;
    function f2(n){
        temp=function (){
            m+=n;
        }
        temp();
        f2.toString=function (){
            return m;
        }
        return f2;
    }
    console.log(f2(1)(2)(3));
1
2
3
4
5
6
7
8
9
10
11
12

f2函数体中的f2.toString的意思是将f2函数的功能重写成了另一个功能，这个叫做方法的重写。toString也可以被替代成valueOf，他们都可以用来对方法进行重写。
这个函数实现的是所输数值的连加，所输出的结果是6

五、JavaScript中的语句

1. 运算符

++和–运算符，前置和后置的区别，例如a++，是在运算之前先+1，而++a，是先自身+1之后，再进行运算

2. 常见语句
   循环语句：
   for语句

for(var i=0;i<10;i++)
     {
     //执行代码
     console.log(i);
     }
1
2
3
4
5

while语句

var a=0;
while(a=10){
console.log(a);
a++;
}
1
2
3
4
5

其他逻辑语句：
if语句else语句
switch语句（过于简单，不予阐述）

六、JavaScript中DOM元素获取

1. DOM定义
   document object model 文本对象模型
   JavaScript可以操作网页上的dom元素。
2. DOM元素的获取
   常规获取方式

document.getElementsByClassName()
document.getElementById()
document.getElementsByName()
document.getElementsByTagName()
1
2
3
4

以上四个分别是通过Class属性，Id属性，Name属性和标签名进行获取，这四个都属于动态的获取DOM。

var b_ele = document.getElementsByClassName("block");
b_ele[0].innerHTML = "1111";
1
2

以下是静态获取：
通过选择器获取元素

//返回单个元素
    var a4 = document.querySelector("#binfo");
    console.log(a4);
    //返回的是多个元素   NodeList  集合
    var a5 = document.querySelectorAll("#binfo1");
    console.log(a5);
1
2
3
4
5
6

特定的元素获取

//特定的获取元素
    console.log(document.body);  //获取body
    console.log(document.documentElement);  //获取html
1
2
3

七、JavaScript中DOM元素的事件操作

事件，通俗地讲就是当用户在进行某些动作时，可以触发一些特殊的DOM操作，例如，用户点击一个按钮，就可以获取到一个变量。

事件的写法

1. 直接在标签上写

<button id="btn" onclick="showname()">按钮</button>
<script>
function showname() {
     alert("张三");
     }
</script>
1
2
3
4
5
6

onclick事件表示点击时进行操作，用户点击该按钮时触发事件，调用showname函数，输出名字“张三”。

2. 动态绑定事件

<button id="btn" >按钮</button>
<script>
var btn = document.querySelector("#btn");
    btn.onclick = function () {
        alert("你点我");
    }
</script>
1
2
3
4
5
6
7

这个写法是使用var btn = document.querySelector(“#btn”)来获取id为btn的元素，在给btn绑定onclick事件，输出“你点我”。功能与上面那段代码类似，但写法不同。
同时，使用以下这个写法，一样可以实现动态绑定事件的功能：

<button id="btn" >按钮</button>
<script>
var btn = document.querySelector("#btn");
    btn.onclick=showalert;//不加括号
     function showalert(){
     alert("你点我");
     }
</script>
1
2
3
4
5
6
7
8

事件的冒泡

var ul = document.getElementsByTagName("ul");
     var li = document.getElementsByTagName("li");
     ul[0].addEventListener("click", function (e) {
     console.log(1);
     });
     li[0].addEventListener("click", function (e) {
     console.log(2);
     //阻止事件冒泡  在原生js里面阻止事件冒泡是  e.stopPropagation();   return false
     e.stopPropagation();
     });
1
2
3
4
5
6
7
8
9
10

addEventListener表示在文档中添加点击事件。当用户在列表li和ul点击时，输出1

事件的执行参数

document.body.onkeypress=function (){
     //1.事件的执行对象直接添加事件匿名函数上面
     //获取按键键值
     console.log(e.keyCode);

//     2.可以直接声明变量使用window.event  调用事件的执行对象
     var e=window.event;
     console.log(e);
     }
    document.body.onmousemove=function (e){
     console.log(e.pageX, e.pageY);
     }
1
2
3
4
5
6
7
8
9
10
11
12

事件的委托

var ul = document.getElementsByTagName("ul")[0];
        var li = document.getElementsByTagName("li")[0];
        ul.onclick = function (e) {
            //输出的当前点击的元素
            //1.找到委托的元素对象
            var child = e.target || e.srcElement;
    
            console.log(e);
            if (child.nodeName.toLowerCase() == "li") {
                console.log(1);
            }
    
        }
1
2
3
4
5
6
7
8
9
10
11
12
13