s14 javascript笔记

JavaScript

____oldboy python s14

参考博客:
    https://www.cnblogs.com/wupeiqi/articles/5602773.html
    
1. JavaScript基本

    - 独立的语言,浏览器具有js解释器

    - JavaScript代码存在形式:
        - Head中
            <script>
                alert(123);
            </script>
            
            <script type="text/javascript">
                alert(123);
            </script>
        - 文件引入
            <script src='js文件路径'> </script>
            
        PS: JS代码需要放置在 <body>标签内部的最下方
        
    - 注释
        当行注释 //
        多行注释  /*     */
        
    - 变量:    
        name = 'alex'     # 全局变量
        var name = 'eric' # 局部变量
        
    - 写Js代码:
        - html文件中编写
        - 临时:浏览器的终端 console(shift + enter 换行)
        - JavaScript必须加分号(便于压缩)
        
    - 定时器:
        - setInterval('执行的代码',间隔时间);
        - 跑马灯示例:
            
        PS:console 中隐藏彩蛋
        <script>
            f1();
            function f1(){
                var joke = 'this is a test'
                console.log(joke);
            }
        </script>
      
2. 基本数据类型
    数字
        a = 18;
        age = '18'
        i = parseInt(age)    #字符串转数字
        
    字符串
        a = "alex"
        a.chartAt(索引位置)
        a.substring(起始位置,结束位置)
        a.lenght            #获取当前字符串长度
        ...
    列表(js数组)
        a = [11,22,33]
        
    字典(对象类型)
        a = {'k1':'v1','k2':'v2'}
    布尔类型
        true,false 小写
 
 
3. 循环
    a. 循环时,循环的元素是索引
    
        a = [11,22,33,44]
        for(var item in a){
            console.log(item);
        } #a[item]
        
        a = {'k1':'v1','k2':'v2'}
        for(var item in a){
            console.log(item);
        }
        
    b.
        for(var i=0;i<10;i=i+1){    
        }
        
        a = [11,22,33,44]
        for(var i=0;i<a.length;i=i+1){
        }
        
        # 不支持字典的循环
        # break;
        # continue:
        
    c. while循环
        while(){
        }
    
    
4. 条件语句
    if(条件){
    }else if(条件){            
    }else if(条件){          
    }else{   
    }
    
    ==   值相等
    !=   值不相等
    ===  值和类型都相等
    &&   and
    ||   or
    
    switch(name){
        case '1':
            age= 123;
            break;
        case '2':
            age= 456;
            break;
        default:
            age= 777;
    }
    
5. 函数:
    function 函数名(arg){
        return arg+1;
    }
    var result = func(1);
    console.log(result);
    
    普通函数:
        function func(){
        }
    匿名函数:
        setInterval (function(){
            console.log(123);
        },5000);
    自执行函数:
        创建函数并且自动执行。
        function func(arg){
            console.log(arg);
        }
        // func(1);
        
        
        (function(arg){
            console.log(arg);
        })(1)
        
6. 其他一些        
    - 序列化:
        JSON.srtingify()        # 将对象转换为字符串
        JSON.parse()            # 将字符串转换为对象类型
        
    - 转义:
        将数据经过转义后保存。
        decodeURL()                # URL中未转义的字符  **转义下载文件汉子代码
        decodeURLComponent()    # URL组件中的未转义字符
        encodeURL()                # URL中的转义字符
        encodeURLCommponent()    # 转义URL组件中的字符
        escape()                # 对字符串转义
        unescape()                # 给转义字符串解码
        URLError                # 由URL的编码和解码方法抛出
            
    - 自动登录抽屉并点赞
        # 略
        
    - eval:
        python:
            val= eval(表达式)
                 exec(执行代码)     # 无返回值
        JavaScript:
            eval 兼具python上述

    - 时间:
        date类
        var d = new Date()
        d.getMinutes()    # 获取
        d.setMinutes(n)    # 设置

7. 作用域
    a. JavaScript 以函数作为作用域            
        其他语言:其他语言:以代码块作为作用域
            public void Func(){
                if(1==1){
                    srting name = 'alex';
                }
                console.writeline(name);
            }
            Func()
            //报错
            
        python:以函数作为作用域
            情况一:
                def func():
                    if 1==1:
                        name = 'alex'
                    print(name)
                func()
                //正常运行
            情况二:
                def func():
                    if 1==1:
                        name = 'alex'
                    print(name)
                func()
                print(name)
                //报错
                
        JavaScript:默认函数作用域(主流版本,let外)
            function func(){
                if(1==1){
                    var name = 'alex':
                }
                console.log(name)
            }
            func()    
                
    b. 函数作用域在函数未被调用之前已创建    
        function func(){
            if(1==1){
                var name = 'alex':
            }
            console.log(name)
        }

    c. 函数的作用域存在作用域链,也在被调用前创建
        情况一:
            xo = 'alex';
            function func(){
                var xo ='eric';
                function inner(){
                    var xo = 'tony';
                    console.log(xo);
                }
                inner()
            }
            func()
            //输出tony
        情况二:  
            xo = 'alex';
            function func(){
                var xo ='eric';
                function inner(){
                    console.log(xo);
                }
                return inner;
            }
            var ret = func()
            ret()
            //输出eric
        情况三:
            xo = 'alex';
            function func(){
                var xo ='eric';
                function inner(){
                    console.log(xo);
                }
                var xo = 'tony';
                return inner;
            }
            var ret = func()
            ret()
            //输出tony
        
    d. 函数内局部变量声明提前
        情况一:
            function func(){
                console.log(xxoo);
            }
            func();
            //报错
        
        情况二:
            function func(){
                console.log(xxoo);
                var xxoo= 'alex';
            }
            解释过程中: var xxoo; 第一行未赋值,所以undefined
            func();
            //输出undefined
            
8. 面向对象

    function Foo(n){
        this.name = n;
        this.sayName =function(){
            console.log(this.name)
        }
    }
    var obj1= new Foo('we');
    obj1.name
    obj1.sayName()
    
    var obj2= new Foo('wee');
    obj2.name
    obj2.sayName()

    
    # this 代指对象(相当于python:self)
    # 创建对象时,new 函数()
    # 原型:
    
        function Foo(){
            this.name=n;
        }
        # Foo的原型
        Foo:prototype ={
            'sayName':function(){
                console.log(this.name)
            }
        }
        var obj1= new Foo('we');
        obj1.sayName()
        var obj2= new Foo('wee');
            
9.JavaScript词法分析解析
    <body>
        <script>
            function t1(age){
                console.log(age);   //function age(){}
                var age = 27;
                console.log(age);   //27
                function age(){}
                console.log(age);   //27
            }
            t1(3);
            //active object ===>AO
            //1.形式参数
            //AO.age = undefined
            //AO.age = 3
            //2.局部变量
            //AO.age = undefined
            //3.函数声明表达式
            //AO.age = function()
        </script>
    </body>

    
    
- 跑马灯示例:
        <body>
            <div id="i1">&nbsp;&nbsp;Welcome&nbsp;to&nbsp;China&nbsp;&nbsp;</div>
            <script>
                function f1(){
                    var tag = document.getElementById('i1');
                    content = tag.innerText;
                    var f = content.charAt(0);
                    var l = content.substring(1,content.length);
                    var new_content = l + f;
                    tag.innerText = new_content
                }
                    setInterval('f1();',500);
            </script>
        </body>    
            
        PS:console 中隐藏彩蛋
        <script>
            f1();
            function f1(){
                var joke = 'this is a test'
                console.log(joke);
            }
        </script>

    
- 面试题58.COM:写一个行为、样式、相分离的页面
    #行为:js    样式:css    机构:html
    # 推荐工具Sublime Text 3 emmet组件
    <body>
        <table border="1" width="300px">
            <tr><td>1</td><td>1</td><td>1</td></tr>
            <tr><td>1</td><td>1</td><td>1</td></tr>
            <tr><td>1</td><td>1</td><td>1</td></tr>
        </table>
        <script>
            var myTrs = document.getElementsByTagName('tr');
            for (var i=0;i<myTrs.length;i++){
                    myTrs[i].onmouseover = function(){
                    this.style.backgroundColor = 'red';
                    //此处this是关键
                }
                    myTrs[i].onmouseout = function() {
                    this.style.backgroundColor = '';
                }
            }
        </script>
    </body>            

posted @ 2019-12-23 21:56  badweather  阅读(102)  评论(0编辑  收藏  举报