JS学习

作者: BigBossZhu | 来源:发表于2018-11-22 15:46 被阅读5次

JS 学习网址
2018-08-20
JS基础和WebAPIs的关联性
原生js
【译】从 JS 学习 Lua
暑假过半总结及后半段计划
Java EE之旅03-JS基础（上）
Js高级程序设计你不知道的那些事儿
Node.js学习express框架
浅谈JS原型和原型链

JS(JavaScript)

Node.js

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

Node.js的优势

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

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

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

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

JS的书写方式和常用语法

页内JS
示例代码:
```
<script>
</script>
```
外部JS
示例代码:
```
<script>
</script>
```

JS的基本数据

<script type="text/javascript">
//弹框输出
alert('hello world');

//调试输出,信息输出在鼠标右击检查内才能看到.
console.log('调试传输语句');

//基本数据类型,和swift有相似之处,有的甚至完全相同
var a = 10;
var name = 'jack';//(字符串用单引号)
name2 = 'rose';//(语法很随意,不申明变量都是可以的)

var booliOS = true;
var niliOS = null;
//指定数据类型
var cardName = String();
var cardName = new String;
//全部打印值看看不同.??new方式才是创建对象的正确方式.


//数据运算
//字符串拼接
var newName = name + name2;
console.log(newName);

//练习
var str1 = 10+10+'10';???
var str2 = '10'+10+10;???
var str3 = (10+'10')+10;???
console.log(str1,str2,str3);
console.log(tyepof str1,str2,str3);
tyepof关键字获取数据的类型.通过输出证明JS没有基本数据类型全是对象.


结论:
基本数据类型的运算:
1. 运算时从左往右
2. 任何类型的变量与String运算都会被转化为String类型



//数组
var arr = [];
arr.push(20,10.5,'hank',['eeee','18']);
arr.add(20,10.5,'hank',['eeee','18']);//错误,直接语法报错,提示不是一个方法.

console.log(arr);
//for语法
for(var i = 0,i<arr.length,i++) {
    console.log(arr[i]);
}//提示在swift3.0去掉了传统for循环改用forin循环.

//for inJS无语法提示
for (var i in arr) {
    console.log(arr[i]);//这和iOS语法不同,取i拿到的是角标
}
//Math 库(JS内库)
var numbers = [10,-5,3232,43];
console.log(Math.max.apply(this,numbers));//this代表JS这个内库,numbers代表数组.
//根据最大值写出最小值min.


</script>

百度趣事(简历邮箱).

JS的函数

<script>
    //1.1 加法,弱语言,语法很随意.
    function sum(num1,num2) {
        return num1 + num2;
    }

    var result = sum(10,20);
    console.log(result);

    //1.2万能加法
    function sum2(numbers){
        //变量
        var result = 0;
        for (var i in numbers) {
            result += number[i];
        }
        return result;
    }

    var result1 = sum2([10,20,30]);//要传数组进去
    console.log(result1);

    //3.匿名函数
    var res = function () {
        console.log('我是匿名函数');
    }

    //如何调用呢?变量接收
    res();



    //JS中函数作为参数
    function test1 (num1) {
        return num1;
    }

    console.log(sum(test1(10),10));??


    //JS中的闭包!!
    function test2 (num1) {
        return function (num2) {
            return num1 + num2;
        }
    }

    //调用
    var temp = test2(4);
    var temp2 = temp(5);//因为闭包,函数内部函数引用了包裹他的变量,函数销毁了,内部函数还是能引用外部的变量.


    //JS中的作用域.
    //流程控制语句内不会有单独的作用域.
    //但是函数(方法)内部有单独的作用域.
    var temp = 'oldTemp';
    if(true) {
        var temp = 'newtemp';
    }
    console.log(temp == 'newTemp');//iOS内部不会感染外部,但是JS内是链式的作用域.代码块内会访问外部变量改变其值.

    function test () {
        var temp = 'newtemp';
    }
    console.log(temp == 'newTemp');


    //JS中没有类(class)的概念,只有对象!
    var obj = new Object();
    obj.name = 'jack';
    obj.click = function () {
        alert('我被点击了');
    }
    //对象的另一种创建方式,属性之间用逗号隔开
    var obj1 = {
        name : 'jack',
        obj.click : function () {
            alert('我被点击了');
        }
    }
    

</script>

JS对象

<script>
    var dog = {
        name:'facai',
        age:18,
        height:1.67,
        eat:function () {
            console.log('eat');
        },
        run:function () {
            console.log('run');
        }
    };
    //输出属性和行为
    console.log(dog.name,dog.age);
    dog.eat();
    dog.run();
    //访问自己本身的属性,通过关键字this访问.this所在的函数属于哪个对象,this就代表哪个对象!!
    run:function () {
            console.log('run' + this.name);
    }
    //加参数.类比
    run:function (someThing) {
            console.log('run' + this.name + someThing);
    }
</script>

JS中的构造函数.

<script>
    //构造函数
            //目的构造一个函数可以多次创建不同的对象
        var Dog = function () {
            this.name = null;
            this.age = null;
            //事件吃和跑
            this.eat = function (someThing) {
                console.log(this.name + 'eat' + someThing);
            };
            this.run = function () {
                console.log(this.name + 'run' + '狗比宫');
            };
        }

        //调用
        var dog1 = new Dog();
        dog1.name = '小工';
        dog1.age = '1';
        dog1.eat('shit');

        dog1.run();



</script>

JS中的内置对象.

window

<script>
    //第一个作用
    //        1.1 window对象作用:全局变量属于window,2全局函数也属于window
        var age = 17;
        console.log(window.age);//能够打印结果证明全局变量属于window

//        1.2 全局函数属于window对象.alert()等
        function Person() {
            console.log(this);
        }

        Person();//全局函数属于window对象
        new Person();//通过函数new创建出来新的对象了
//
//        1.3 可以进行动态跳转
        alert(0);
        window.location.href = 'http://www.baidu.com';//有效


</script>

document

<script>
//        2 ducument对象作用
//        2.1. 可以动态获取网页的标签
//        2.2. 可以获取到标签进行CRUD
        document.write('hello');//书写标签
        document.write('<input type = "file">');
        document.getElementsByClassName('icon')[0];
        document.getElementById('word');
        document.getElementsByTagName('button')[0];
</script>

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

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

案例2,隐藏控件

    //案例2,隐藏控件(HTML部分)
    <img class="icon" src="image/img_01.jpg">
    <p id="word">上面的图片</p>
    <p></p>
    <button>隐藏</button>
//       案例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部分)
    <img class="icon" src="image/icon_01.png">
    <p></p>
    <button>上一张</button>
    <button>下一张</button>

//       案例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';
        }

JS 学习网址
JS学习 JS标准参考教程 JS秘密花园
2018-08-20
今天学习了JS 运算符 JS 比较 JS If...Else JS Switch JS For JS While ...
JS基础和WebAPIs的关联性
学习ECMAscript标准规定的基本语法掌握JS基础语法只学习JS基础做不了网页交互效果学习JS基础语法是为了后...
原生js
原生JS学习笔记1——基本数据类型和运算符 js的背景知识介绍，js的引入方式，js的变量及运算符原生JS学习笔...
【译】从 JS 学习 Lua
原文：Learning Lua/From JS 从 JS 学习 Lua 对 JavaScript 已经了解，想学习...
暑假过半总结及后半段计划
总结学习 7.6号开始小组学习，温习闭组前学到的js知识，明确未学习的js知识，7.21号完成js阶段作品，7....
Java EE之旅03-JS基础（上）
JS学习大纲 JS简介 1、js是什么 2、js能做什么 3、js历史及组成 4、js被引入的方式 js基本语法 ...
Js高级程序设计你不知道的那些事儿
写在开头：为了学习方便，js程序分成两个阶段学习，JS初级和js高级阶段，js高级有很多需要理解的概念，重在理解...
Node.js学习express框架
Node.js框架学习 express.js express.js是什么 Express基于Node.js平台，快...
浅谈JS原型和原型链
学习使用过js的人一开始都会觉得js简单，这是因为js语法简单，学习过编程语言的人，很容易掌握js的基本语法并按要...