Python之路，day18-javascript基础

回顾：
    整体：
        - HTML
        - CSS
        - JavaScript
            - 基本数据类型
            - for，while..
        - DOM
            - obj = document.getElementById('..')
            - obj.innerHtml
        - BOM:
            - setInterval。。。
        ----> 可以完成所有操作  <----
        
        - jQuery：
            - 选择器 $('#') $('.')
            - 筛选器 $('#').find('')  
            - 内容或属性  
                - $('#i1').val()  input系列，select,textarea  
                - $('#i1').text()
                - $('#i1').html()
                ------------------------
                - $('#i1').attr
                - $('#i1').prop('checked',true)
                ------------------
                - $('#i1').empty()
                - $('#i1').remove()
             - css
                $('#i1').addClass
                $('#i1').removeClass
                $('#i1').css('color','xxxx')
                
                $('#i1').scrollTop()
                
                $('#i1').offset()
                $('#i1').position()
                
              - 文档
                <div id='i1'>
                    <div>asdf</div>
                </div>
                $('$#1').append('<a>百度</a>')
                $('$#1').prepend('<a>百度</a>')
                $('$#1').after('<a>百度</a>')
                $('$#1').before('<a>百度</a>')
                
              - 事件绑定
                ...
            
            
            
        
    a. 
    


一、jQuery
        - 事件绑定
            DOM事件绑定：
                - 在标签上绑定
                - 通过找到标签再绑定
                <div class='c1'>
                    <div>
                        <div class='title'>菜单一</div>
                        <div class='content'>内容 一</div>
                    </div>
                    <div>
                        <div class='title'>菜单一</div>
                        <div class='content'>内容 一</div>
                    </div>
                    <div>
                        <div class='title'>菜单一</div>
                        <div class='content'>内容 一</div>
                    </div>
                    <div>
                        <div class='title'>菜单一</div>
                        <div class='content'>内容 一</div>
                    </div>
                </div>
            jQuery事件绑定：
                1. 
                    $('.title').click(function(){
                        var v = $(this).text();
                        console.log(v);
                        
                    })
                2. 
                    $('.title').bind('click',function(){
                        var v = $(this).text();
                        console.log(v);
                    })
                3. 
                    $('.c1').delegate('.title','click',function(){
                        var v = $(this).text();
                        console.log(v);
                    })
                    
                4. 
                    $('.c1').on('click','.title', function () {
                        var v = $(this).text();
                        console.log(v);
                    });
            
            页面框架加载完成：
            
                 $(function () {
                        ...
                  })
                  
                  使用：希望查看页面立即执行的操作
                  
            阻止默认事件的发生：
                $('#bd').click(function () {
                    var v = $(this).text();
                    alert(v);
                    return false;
                })
                
                -- Form表单验证示例
                
        - jQuery扩展
             - $.extend({ })      $.xx
             - $.fn.extend({})    $().xx
        - 自定义jQuery组件：
             -
                  xxx.js
                 
                 (function(jq){
                    function common(){
                    
                    }
                    
                    jq.extend({
                        xx: function(){
                            common();
                        }
                    
                    })
                    
                 })($);
        
        
二、JavaScript高级

    - 作用域相关
        1.
            function func(){
                if(1==1){
                    var v= 123;
                }
                console.log(v);
            }
            func()
            A. 报错(Java,C#)    B. 123(对)   C.undefined
            =》 JavaScript/python是以函数为作用域，非括号为作用域
            =》 括号为作用域
        2. 
            xo = 'root1';
            function func(){
                var xo = 'root2';
                function inner(){
                    console.log(xo);
                }
                inner();
            }
            func();
            作用域链
            // root2
         3. 
         
            xo = 'root1';
            function func(){
                var xo = 'root2';
                function inner(){
                    console.log(xo);
                }
                return inner;
            }
            result = func();
            result();
            // 作用域链在函数调用之前已经创建，当寻找变量时，根据最开始创建的作用域查找
            // root2
            
         4. 
            xo = 'root1';
            function func(){
                var xo = 'root2';
                function inner(){
                    console.log(xo);
                }
                xo = 'root3'
                return inner;
            }
            
            result = func();
            result();
            
         5. 
            var xxxx;
            console.log(xxxx);
            
            
            function func(){
                console.log(xo);
                var xo = '123';
                console.log(xo);
            }
            func()
            // 提前声明,JS
            1. 预编译：
                var xo;
            2. 执行
            
         6.
            function func(num){
                console.log(num); // function
                num = 18;
                console.log(num); // 18

                function num(){
                }
                console.log(num); // 18
            }
            func(666);
            
            a. 预编译 AO
                先编译参数：
                    AO.num = undefined
                    AO.num = 666
                再编译变量：
                    如果AO中有num，则不做任何操作
                    否则 AO.num = undefined
                最后编译函数：
                    AO.num = function num(){
                             }

            b. 执行
            
         
         7. 
         
            function func(num){
                console.log(num); // function
                function num(){
                }
                console.log(num); // function
                num = 18;
                
                console.log(num); // 18
            }
            func(666);
            
            
            先编译参数：
                    AO.num = undefined
                    AO.num = 666
            再编译变量：
                如果AO中有num，则不做任何操作
                否则 AO.num = undefined
            最后编译函数：
                AO.num = function num(){
                         }

          
          8. 
            function func(){
                console.log(xo);
                var xo = 123;
            }
            func()
            
            编译：
                参数：
                    AO
                变量：
                    AO.xo = undefined
            执行：
      
      - 函数和面向对象相关  
      1. 
            function func(arg){
                console.log(this,arg);
            }
            func(18);
            // func.call(window,20);
            // func.apply(window,[30]);
            
            
            (function(arg){
                console.log(this,arg);
            })(123)
            
            在函数被执行时，默认this是代指window对象
            
            function func(){
                window.nn = 'root';
                //nn = 'root';
                this.nn = 'root';
            }
            func()
            console.log(nn);
            
            =====>
                a. 在函数内部，默认都有this变量。默认情况下，执行函数时 this=window
                b. 使用 函数名.call 或者 函数名.apply 可以对函数中的this主动设置值
                
                document.getElementById('id').onclick = function(){
                    // this                
                }
                
                document.getElementById('id').onclick.call(DOM对象)
            
            
      2. 在JS中么有字典类型
           只有对象伪造成字典形式
           
           var dict = {
                name: 'alex',
                age: 18
           }
           等价于
           var dict = new Object();  # 表示创建空字典
           dict.name = 'alex';
           dict.age = 18;
            
            
            
           function Foo(name){
                this.Name = name
           }
           
           Foo('root')                   # 当做函数时，this默认是window
           var dict1 = new Foo('root1')    # 当做类时，this是 dict1 同pyself
           // Foo.call(dict1,'root1')
           var dict2 = new Foo('root2')    # 当做类时，this是 dict2
           
           
           ====
           function Foo(name){
                this.Name = name;
                this.Func = function(){
                    console.log(this.Name);
                }
            }
            # 当做函数
            Foo('root1')
            window.Name
            window.Func()

            # 当做类
            obj = new Foo('root2')
            obj.Name
            obj.Func()


            # 直接对象
            dict = {
                Name: 'root3',
                Func: function(){
                    console.log(this.Name);
                }
            }

            # dict = new Object();
            # dict.Name = 'root3';
            # dict.Func = function(){
                    console.log(this.Name);
                }
            dict.Func()
            ==========================》 谁调用函数，this就是谁。 函数()执行时候默认window.函数()
            
            
            谁调用函数，this就是谁。 函数()执行时候默认window.函数()
            每一个函数里都有一个this
            Name = '666';
            var dict = {
                Name: 'root',
                Age: 18,
                Func: function(){
                      // this等于dict  
                      console.log(this.Name);      // root 
                      
                      function inner(){
                          console.log(this.Name);  // 666
                      }
                      window.inner();
                }
            }
            
            dict.Func();
            
            ============================
            谁调用函数，this就是谁。 函数()执行时候默认window.函数()
            每一个函数里都有一个this
            变量查找顺序，作用域链
            Name = '666';
            var dict = {
                Name: 'root',
                Age: 18,
                Func: function(){
                      // this等于dict
                      console.log(this.Name);      // root
                      // that 等于dict
                      var that = this;
                      
                      function inner(){
                          // this=window
                          console.log(that.Name);  // root
                      }
                      window.inner();
                }
            }
            
            dict.Func();
            
      3. 原型
      
        function Foo(name){
            this.Name = name;
        }
        // 原型
        Foo.prototype = {
            Func: function(){
                console.log(this.Name);
            }
        }

        obj1 = new Foo(1)
        obj2 = new Foo(2)
        obj3 = new Foo(3)
              
三、Web框架本质
    浏览器：socket客户端
    服务器：socket服务端
    
    1. Socket服务端
        import socket

        def handle_request(client):
            buf = client.recv(1024)
            client.send(b"HTTP/1.1 200 OK

")
            client.send(b"Hello")

        def main():
            sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
            sock.bind(('localhost', 8000))
            sock.listen(5)

            while True:
                connection, address = sock.accept()
                handle_request(connection)
                connection.close()

        if __name__ == '__main__':
            main()
     2. 次之
     
        WSGI：通用网关服务接口
            'cgi': CGIServer,
            'flup': FlupFCGIServer,
            'wsgiref': WSGIRefServer,
            'waitress': WaitressServer,
            'cherrypy': CherryPyServer,
            'paste': PasteServer,
            'fapws3': FapwsServer,
            'tornado': TornadoServer,
            'gae': AppEngineServer,
            'twisted': TwistedServer,
            'diesel': DieselServer,
            'meinheld': MeinheldServer,
            'gunicorn': GunicornServer,
            'eventlet': EventletServer,
            'gevent': GeventServer,
            'geventSocketIO':GeventSocketIOServer,
            'rocket': RocketServer,
            'bjoern' : BjoernServer,
            'auto': AutoServer,
        
        # WEB框架的开发者
        
        from wsgiref.simple_server import make_server

        def runServer(environ, start_response):
            # environ： 用户请求相关信息
            # start_response： 设置用户响应相关信息
            start_response('200 OK', [('Content-Type', 'text/html')])
            return [bytes('<h1>Hello, web!</h1>', encoding='utf-8'), ]


        if __name__ == '__main__':
            httpd = make_server('127.0.0.1', 8000, runServer)
            print("Serving HTTP on port 8000...")
            httpd.serve_forever()

     3. 现成的Web框架：Bottle,Flask,Tornado,Django...
        
        => 我们
        分类(功能齐全)：
            Django
            Bottle,Flask,Tornado,Webpy...
        
        
    
四、Django
    分类(功能齐全)：
        Django
        Bottle,Flask,Tornado,Webpy...
    安装：
        pip3 install django
        
        解压
        python3 setup.py install 
        
        ==》 可执行文件 django-admin.exe   目录：C:Python35Scripts
            
        # 添加环境变量
        
    基本操作：
        命令
            创建project
                先进入自己指定的目录
                django-admin startproject mysite
                
                mysite
                    - mysite          (配置文件)
                    - manage.py      （管理Project）
                    - app(cmdb)
                        - models.py   数据库操作
                        - admin.py    配置Django自带的后台管理
                        - apps.py     当前app的配置
                        - tests.py    单元测试
                        - views.py    做业务处理...
            运行
                cd mysite
                python3 manage.py runserver 127.0.0.1:8000

            
            创建app
                cd mysite
                python3 manage.py startapp cmdb
                python3 manage.py startapp monitor
            
        Pycharm