JavaScript

175 阅读3分钟

1,JS的常见用途

  • HTML DOM操作(节点操作,比如添加、修改、删除节点)
  • 给HTML网页增加动态功能,比如动画
  • 事件处理:比如监听鼠标点击、鼠标滑动、键盘输入

2,什么是Node.js

Node是一个JavaScript运行环境(runtime),是对Google V8引擎进行了封装 V8引擎执行JavaScript的速度非常快,性能非常好

Node.js的优势

  • 可以作为后台语言
  • 单线程 -- 不新增额外线程的情况下,依然可以对任务进行并行处理(采用事件轮询) 非阻塞I/O、V8虚拟机、事件驱动

3,JS常见的书写方式有2种

  • 页内JS:在当前网页的script标签中编写
<script type="text/javascript">
</script>
  • 外部JS
<script src="index.js"></script>

4,JS遍歷語法

//遍历数组
        for(var i = 0;i<arr.length;i++){
//            console.log(i,arr[i]);
        }
        //和iOS不同的地方:i不是数组元素,而是数组角标!!
        for(var i in arr){
//            console.log(arr[i]);
        }

5,JS中的Math庫

//Math 库
        var nums = [10,6,-99,1000];
//        console.log(Math.max(10,6,-99,1000));
        console.log(Math.max.apply(this,nums)) //this後面是逗號!

        //指定数据类型
        //js中任何变量都是一个 对象!!
        var x = new String;

6,JS中的匿名函數和閉包

//1.3 匿名函数 -- 相当于OC中的Block -- 相当于Swift中的闭包
       var res = function () {
            console.log('我是匿名函数');
        }
        //调用匿名函数
        function funct(block) {
            block();
        }
        funct(res);

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

        var temp = func1(4);
        var temp2 = temp(5);
        console.log(temp2);

7,JS的作用域是函數區分的,不是大括號!!!

//作用域
        //代码块的作用域
        var t = 'hank'; //全局变量
        if(true){
            var t = 'Dream'; //JS中哥么还是一个全局变量!!
        }
        console.log(t);
        //函数的作用域
        function test() {
            var t = 'Jack';//里面就是局部变量!!!
        }
        test();
        console.log(t);

8,JS創建對象的兩種寫法

//这是一种写法
        var obj = new Object();//创建一个对象obj
        obj.age = 5;//给对象定义属性
        obj.click = function () { //创建对象函数
            alert("我被单击了");
        }

        //另一种写法
        var obj1 = {
            age:5,
            click:function () {
                alert("我也被点击了");
            }
        }

9,JS使用構造函數創建對象

    <script>
        //普通函数
        //new
        var Dog = function (name,age,height) {
            this.name = name;
            this.age = age;
            this.height = height;
            this.eat = function (someThing) {
                console.log(this.name + '吃'+someThing)
            };
            this.run = function (someWhere) {
                console.log(this.name + '跑'+someWhere)
            }
        }

       //创建对象
        var dog1 = new Dog('小黄',18,1.1)

        var dog2 = new Dog('旺财',17);
        console.log(dog1,dog2);
        dog1.eat('板烧鸡腿堡')
        dog2.eat('叉烧包')

    </script>

10,JS中內置對象之Window

    <script>
        //window作用
        //1.所有全局的变量都是window的属性
        //2.所有全局的函数都是window的方法

        //全局的变量
        var age = 17;
//        console.log(window.age);

        //全局函数
        function Dog() {
            console.log('这是一直狗');
        }

        function Person() {
            console.log(this);
        }
        Person();//window
        new Person();//Person 因为哥么变成了构造函数了!!所属类就是Person类!!

        //第二大作用,動態跳轉
        //-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType; 
        //iOS中可以通過上面的這個方法攔截到URL,並做一些處理
        window.alert(0);
        window.location.href = 'http://被OC攔截到的URL';


    </script>

11,JS內置對象之Ducument

<script>
        //document 内置对象的作用:
        //1.可以动态获取网页中所有的标签(DOM节点)
        //2.可以对获取到的标签CRUD(增删改查)
        document.write('動態寫入你好hello');
        document.write('<input type="file">');
        document.write(' <img src="http://動態加入圖片.jpeg">')
        
        //------
        //1.拿到图片DOM結點
        var img = document.getElementsByClassName('icon')[0];
        //2.修改src属性!
        img.src = 'imgs/img_02.jpg'

    </script>

12,JS定時器

//2.设置定时器
        var timer = setInterval(function () {
            //改变倒计时数字
            number.innerText -= 1;
            //判断
            if(number.innerText == 0){
                //结束定时器
                clearInterval(timer);
            }
        },1000);//1000毫秒

13,let和var作用域的區別

  • let:作用域被大括號{}分開
  • var:作用域被函數分開
  • var所定義的JS對象在for循環裏面地址是不會變的