Python学习笔记Day15 - Javascript

目录

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 =

  • 布尔类型

    小写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 = /\bJava(\w*)\b/; \b匹配单词边界
# ["JavaScript", "Script"]

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

JavaScript is more fun than Java!
var pattern = /\bJava\w*\b/g;
# ["JavaScript"]
# ["Java"]
# null

- 后加i不区分大小写

- 后加m多行匹配

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

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

默认事件先执行：

checkbox，自定的click后执行

自定义先执行：

a
submit
...大多数

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

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

后端：python加完整验证

作业

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

作业问题

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

    HTML模板，CSS模板，Bootstrap

  2. 背景图片可加入body里

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

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

  4. min-width: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 是在用户按下任何键盘键（包括系统按钮，如箭头键和功能键）时发生，在手指放下至离开时，会一直调用；

参考文档

posted @ 2020-07-05 15:13  Jerome12138  阅读(128)  评论(0)    收藏  举报