JS学习

JS(JavaScript)

Node.js

什么是Node.js
Node是一个JavaScript运行环境(runtime),是对Google V8引擎进行封装.

Node.js的优势

1. 可以作为后台语言
2. 单线程
   不新增额外线程下,依然可以对任务进行并行处理(采用事件轮询).

多线程耗电快,流量速度快.

3. 非阻塞I/O.相当于iOS内多线程,在多个事件切换.

JS就是对Dom树进行增删改查.

JS的书写方式和常用语法

1. 页内JS
   示例代码:

2. 外部JS
   示例代码:

JS的基本数据

百度趣事(简历邮箱).

JS的函数

JS对象

JS中的构造函数.

JS中的内置对象.

1. window

2. document

案例
案例1,简单更换图片

    //案例1,简单更换图片(HTML部分)
    
    

    更换图片
//       案例1更换图片逻辑(JS部分
        function changeImg() {
            //修改图片
            //获取到图片
            var img = document.getElementsByClassName('icon')[0];//class可能有多个对象是个数组
            img.src = 'image/img_02.jpg';
        }

案例2,隐藏控件

    //案例2,隐藏控件(HTML部分)
    
    
上面的图片
    

    隐藏
//       案例2逻辑(JS部分)
        var icon = document.getElementsByClassName('icon')[0];
        var p = document.getElementById('word');
        var btn = document.getElementsByTagName('button')[0];
        btn.onclick = function() {
            if (btn.innerText == '隐藏') {
                icon.style.display = 'none';
                p.style.display = 'none';
                btn.innerText = '显示';
                alert(0);
            } else {
                alert(1);
                icon.style.display = 'inline-block';
                p.style.display = 'block';
                btn.innerText = '隐藏';
            }
        }

案例3,手动轮播图

    //案例3,手动轮播图(HTML部分)
    
    

    上一张
    下一张

//       案例3逻辑(JS部分)
        var maxIndex = 9;
        var minIndex = 1;
        var currentIndex = minIndex;

        //获取标签
        var icon = document.getElementsByClassName('icon')[0];
        var preBtn = document.getElementsByTagName('button')[0];
        var nextBtn = document.getElementsByTagName('button')[1];

        preBtn.onclick = function () {
            if (currentIndex == 1) {
                currentIndex = maxIndex;
            } else  {
                currentIndex -= 1;
            }
            icon.src = 'image/icon_0' + currentIndex +'.png';
        }
        nextBtn.onclick = function () {
            if (currentIndex == 9) {
                currentIndex = minIndex;
            } else  {
                currentIndex += 1;
            }
            icon.src = 'image/icon_0' + currentIndex +'.png';
        }