Python学习笔记Day15

目录

• JavaScript
  • JavaScript代码存在形式
  • js注释
  • js变量
  • 写Js代码的方式
  • 基本数据类型
  • 定时器
  • 循环和判断语句
  • JS函数
• JavaScript进阶
  • 1.序列化
  • 2.转义
  • 3.eval
  • 4.时间
  • 5.作用域
  • 6.词法分析
  • 7.JavaScript也支持面向对象
  • 8.JS 正则
  • 9.默认事件与自定义事件执行顺序
  • 10.=======验证 =======
• 作业
  • 作业问题

JavaScript

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

JavaScript代码存在形式

• Head中
  
• 文件
  

***PS: JS代码最好放置在 标签内部的最下方，让内容先显示，后补充获取的数据

js注释

当行注释 //
多行注释  /*     */

js变量

name = 'alex'     # 全局变量
var name = 'eric' # 局部变量

写Js代码的方式

1. html文件中编写
2. 临时调试，浏览器的终端 console

基本数据类型

• 数字

    a = 18;
    a = parsint('18')
  

• 字符串

    a = "alex"
    a.chartAt(0)    #a[0]
    a.substring(1，3)    #含前不含后
    a.length    获取当前字符串长度
    ...
  

• 列表(数组)

    a = [11,22,33]
    a.splice(n,0,val)   #插入元素
    a.splice(n,1,val)   #替换元素
    a.splice(n,1)       #删除元素
  

• 字典

    a = {'k1':'v1','k2':'v2'}
  

• 布尔类型

    小写true,false
  

定时器

setInterval('func()', 4000)   #单位毫秒

循环和判断语句

• for循环

  1. 循环时，循环的元素是索引，python循环的是元素

      a = [11,22,33,44]
      for(var item in a){
          console.log(a[item]);
      }
      a = {'k1':'v1','k2':'v2'}   字典循环key
      for(var item in a){
          console.log(a[item]);
      }
     

  2. a = [11,22,33,44] #不支持字典的循环,key无序

     for(var i=0;i<a.length;i++){
         console.log(a[i]);
     }
     

• while循环

    while(条件){}
  

• if语句

    if(条件){
        ...
    }else if(条件){
        ...
    }else{
        ...
    }
  
    a==null # 为空
  
    ==   值相等
    ===  # 值和类型都相等,一般判断用的是这个
    !=   值不等
    !==   #  值和类型都不等,一般判断用的是这个
    &&   -> and
    ||   -> or
  

• switch

    switch(name){
        case '1':
            console.log('1');
            break;
        default:
            console.log('123');
    }
  

JS函数

• 普通函数

    function 函数名(a,b,c){
        ...
    }
    函数名(1,2,3)
  

• 匿名函数

    setInternal(function(){
        console.log('123')
    },5000)
  

• 自执行函数 创建时自动执行，一般用于插件

    (function(arg){
        console.log('123')
    })()
  

JavaScript进阶

1.序列化

JSON.stringify()  #将对象转换成字符串
JSON.parse()  #将字符串转换成对象

2.转义

decodeURI( )                   解码URl中的字符
decodeURIComponent( )          解码URI组件中的字符（包括/:?=等）
encodeURI( )                   编码URI中的字符
encodeURIComponent( )          编码URI组件中的字符
escape( )                      对字符串转义
unescape( )                    给转义字符串解码
URIError                       由URl的编码和解码方法抛出

###cookie 保存   ->将数据转义后保存在cookie中，可使用该cookie进行爬虫

3.eval

Python:
    val = eval('1+1')       #执行表达式，返回结果
          exec(执行代码)    #执行代码，无返回结果
JavaScript:
    eval    #既可以执行表达式又可以执行代码

4.时间

Data类，使用需要先实例化
var d = new Date()  #d为当前时间对象
d.getXXX    获取
d.setXXX    设置

5.作用域

**python以函数为作用域，其他C等语言以代码块{}为作用域

1. Javascript默认以函数为作用域（除了let）

2. 函数的作用域在函数未被调用之前（定义时）就已经创建

3. 函数的作用域存在作用域链，并且也是在调用之前就已经创建，内层没有时向外层寻找

    var arg = 111
    function f2(){
        var arg= 222;
        function f3(){
            console.log(arg);
        }
        //arg= 333; #此时结果为333
        return f3;
    }
    ret = f2();     #ret=f3
    ret();          ->>222
   

4. 函数内部的局部变量在函数定义时会提前声明，但不会赋值，undefined

6.词法分析

例：

function t(age){
    console.log(age);   //function age(){}
    var age = 27;
    console.log(age);   //27
    function age(){}
    console.log(age);   //27
}
t(3);

调用时先生成一个活动对象active onject ======>>AO
然后进行词法分析：

1. 形式参数

    AO.age = undefined      #生成形参undefined
    AO.age = 3              #将实参赋值给形参
   

2. 局部变量的声明

    AO.age = 3      #有形参则不做改变，没有形参则undefined
   

3. 局部函数的声明

    AO.age = function age(){}   #函数优先，重定义
   

7.JavaScript也支持面向对象

function Foo(name) {
    this.Name = name;
    this.Func = function(arg){
        return this.Name + arg;
    }
}
var obj = new Foo('alex');
var ret = obj.Func("sb");

1. this代指对象（python self）

2. 创建对象时，用new Foo()

3. 类似于class

4. 上述代码中每个对象创建时均保存了一个相同的Func函数，浪费内存。

   使用原型可以解决该问题：

    # Foo的原型
    Foo.prototype = {
        Func : function(arg){
            return this.Name + arg;
        }
    }
   

   类似于python，python类的函数放在类里面，不在对象里

8.JS 正则

• .test() ##判断字符串是否符合规定的正则
• .exec() ##获取匹配的值

RE用法：

rep = re.match('d+',"fasdf89asdf")     d匹配数字

JS用法：

var rep = /d+/;    以/为匹配号
rep.test("fasdf89asdf")
# true

rep = /^d+$/;      ^开始符 $结束符
# false

- /.../  用于定义正则表达式

    rep = /d+/;
    rep.exec("wangshen_67_houyafa_20")      #默认只取第一个
    # ["67"]

- 内加()分组，匹配出差异值

    "JavaScript is more fun than Java or JavaBeans!"
    var pattern = /Java(w*)/;      匹配单词边界
    # ["JavaScript", "Script"]

- 后加g表示全局匹配  # 依次调用取值，匹配完null，继续会循环匹配

    JavaScript is more fun than Java!
    var pattern = /Javaw*/g;
    # ["JavaScript"]
    # ["Java"]
    # null

- 后加i不区分大小写

- 后加m多行匹配

    默认就是多行匹配，加m后可以让每一行识别^开头和$结尾匹配

9.默认事件与自定义事件执行顺序

默认事件先执行：

checkbox，自定的click后执行

自定义先执行：

a
submit
...大多数

10.=======验证 =======

前端：JS做基本验证（不万能，可能被禁止）

<input type='text' require = true Field = 'string' range='4-16' min-length = 15 confirm-to = 'pwd'>

后端：python加完整验证

作业

1. 登录、注册，练习：position
2. 后台管理页面
   • 左侧菜单
   • 右边表格，全选反向，模态框，返回顶部
3. 商城页面

作业问题

1. 页面丑，从网上找模板

   HTML模板，CSS模板，Bootstrap

2. 背景图片可加入body里

3. JQuery封装了dom和html部分功能

   小公司一般用JQuery，但大公司为保证加载速度需要自己定制封装

4. min-200px 最小宽度

5. 后台管理布局

   • fixed

   • absolute #只第一次定位时应用

     a.左侧菜单跟随滚动条
     b.左侧保持不动

   • :hover

       .a .b:hover{}   #当鼠标放在b上时改变b的属性
       .a:hover .b{}   #当鼠标放在a上时改变b的属性
     

   • font awesome图标库

6. 按下回车响应事件

    xxx.bind('keypress',function(event){
        if(event.keyCode == "13")    
        {  
            ...
        }
    });
   

   • onkeypress 是在用户按下并放开任何字母数字键时发生。系统按钮（例如，箭头键和功能键）无法得到识别，在手指放下至离开时，只调用一次；
   • onkeyup 是在用户放开任何先前按下的键盘键时发生。系统按钮（例如，箭头键和功能键）无法得到识别，在手指放下至离开时，只有离开的时候调用；
   • onkeydown 是在用户按下任何键盘键（包括系统按钮，如箭头键和功能键）时发生，在手指放下至离开时，会一直调用；

参考文档