Python学习笔记Day15 - Javascript

JavaScript

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

JavaScript代码存在形式

Head中
文件

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

js注释

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

js变量

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

写Js代码的方式

html文件中编写
临时调试，浏览器的终端 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循环

循环时，循环的元素是索引，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]);
 }

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等语言以代码块{}为作用域

Javascript默认以函数为作用域（除了let）
函数的作用域在函数未被调用之前（定义时）就已经创建

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

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

函数内部的局部变量在函数定义时会提前声明，但不会赋值，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
然后进行词法分析：

形式参数

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

局部变量的声明

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

局部函数的声明

 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");

this代指对象（python self）
创建对象时，用new Foo()
类似于class
上述代码中每个对象创建时均保存了一个相同的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做基本验证（不万能，可能被禁止）

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

后端：python加完整验证

作业

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

作业问题

页面丑，从网上找模板

HTML模板，CSS模板，Bootstrap
背景图片可加入body里
JQuery封装了dom和html部分功能

小公司一般用JQuery，但大公司为保证加载速度需要自己定制封装
min-width:200px 最小宽度
后台管理布局
- fixed
- absolute #只第一次定位时应用
  
  a.左侧菜单跟随滚动条
  b.左侧保持不动
- :hover
```
  .a .b:hover{}   #当鼠标放在b上时改变b的属性
  .a:hover .b{}   #当鼠标放在a上时改变b的属性
```
- font awesome图标库
按下回车响应事件
```
 xxx.bind('keypress',function(event){
     if(event.keyCode == "13")    
     {  
         ...
     }
 });
```
- onkeypress 是在用户按下并放开任何字母数字键时发生。系统按钮（例如，箭头键和功能键）无法得到识别，在手指放下至离开时，只调用一次；
- onkeyup 是在用户放开任何先前按下的键盘键时发生。系统按钮（例如，箭头键和功能键）无法得到识别，在手指放下至离开时，只有离开的时候调用；
- onkeydown 是在用户按下任何键盘键（包括系统按钮，如箭头键和功能键）时发生，在手指放下至离开时，会一直调用；

参考文档

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

刷新页面返回顶部

Jerome12138