首页 > 代码库 > 第十五章：Python の Web开发基础(二)

第十五章：Python の Web开发基础(二)

2024-08-23 13:43:14   220人阅读

本課主題

  • JavaScript 介绍
  • DOM 介绍
  • jQuery 介绍

 

JavaScript 介绍

JavaScript 是一门编程语言，它可以让网页动起来的，JavaScript 的变量有两种，一个是局部变量；一个是全区变量。怎么分啦？

a = 123;    // 全区变量
var a = 123;  // 局部变量

 

JavaScript 的数据类型

JavaScript 的数字类型

  1. parseInt: 
    技术分享 
    y = "111"
"111"

r2 = parseInt(y)
111
    parseInt( )
  2. parseFloat

JavaScript 的String 类型

  1. length: 找字符串的长度
    技术分享 
    s1 = ‘janice‘
// "janice"
s1.length
// 6
    s1.length
  2. charAt( )
    技术分享 
    s1 = ‘janice‘
s1.charAt(1)
// "a"
    s1.charAt(1)
  3. indexOf( )
    技术分享 
    s1 = ‘janice‘
s1.indexOf(‘i‘)
// 3
    s1.indexOf( )
  4. substring( )
    技术分享 
    s1 = ‘janice‘
s1.substring(1,4)
// ani
    s1.substring(1,4)
  5. slice( )
  6. toLower( )
  7. toUpper( )

JavaScript 的数据类型

  1. 创建数组
    技术分享 
    a = []
a = [11,22,33,44,55]
    a = [ ]
  2. 在数组尾部追加数据：push(ele)
    技术分享 
    a = [11,22,33,44,55,66]
a.push(77,88,99)
// 9

a
// [11, 22, 33, 44, 55, 66, 77, 88, 99]

a.push([77,88,99])
//10

a
//[11, 22, 33, 44, 55, 66, 77, 88, 99, Array[3]]
    a.push(ele)例子
  3. 在数组尾部获取数据：pop
  4. 在数组尾部获取数据：unshift(ele)
  5. 在数组尾部获取数据：shift
  6. join 

JavaScript 的字典

  1. 创建字典
    技术分享 
    a = {‘k1‘:123, ‘k2‘:456}
//Object {k1: 123, k2: 456}
    JavaScript创建字典
  2. 序列化：把对象变成字符串
    技术分享 
    a = {‘k1‘:123, ‘k2‘:456}
JSON.stringify(a)
//"{"k1":123,"k2":456}"
    JavaScript序列化
  3. 反序列化：把字符串变成对象
    技术分享 
    b = ‘{"k1":123, "k2":456}‘;
//"{"k1":123, "k2":456}"

JSON.parse(b);
//Object {k1: 123, k2: 456}
    JavaScript反序列化
  4. xxxx

JavaScript 的转义

  1. encodeURL 
  2. encodeComponentURL
  3. decodeURL
  4. decodeComponentURL
技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Js-s3</title>
</head>
<body>
    <script>
        var url = "https://www.sogou.com/web?query=宋仲基";
        var ret1 = encodeURI(url);
        var ret2 = encodeURIComponent(url);
        console.log(ret1);
        console.log(ret2);

        var u1 = decodeURI(ret1);
        var u2 = decodeURIComponent(ret2);
        console.log(u1);
        console.log(u2);

    </script>
</body>
</html>
JavaScript 转义

其他

  1. eval( )
  2. 时间处理，时间有两种：一种是 UTC; 一种是 GMT;
    技术分享 
    d = new Date()
// Sat Nov 26 2016 21:22:59 GMT+0800 (HKT)

d
// Sat Nov 26 2016 21:22:59 GMT+0800 (HKT)
d.getFullYear()
// 2016

d.getHours()
// 21

d.getUTCDate()
// 26

d.getUTCHours()
// 13

d.setMinutes(d.getMinutes() + 2)
//1480166699597
    JavaScript的时间处理
  3. xxxxx

JavaScript 的条件判断

  1. if-then-else
  2. switch case
  3. for loop
    技术分享 
    <script type="text/javascript">
    var li = [11,22,33,44,55];
    for(var i = 0; i < li.length; i++){
        console.log(i,li[i]);
    }

    for(var item in li){
        console.log(item,li[item])
    }

    var dic = {‘k1‘:123, ‘k2‘:456};
    for(key in dic){
        console.log(key, dic[key])
    }
</script>
    for loop例子
  4. while loop

JavaScript 的异常处理

Python 中的主动抛出异常

raise Exception(‘xxxxx‘)

JavaScript  中的主动抛出异常

throw new Error(‘xxxx‘)

 

JavaScript 的函数

  1. 普通函数
  2. 匿名函数
  3. 自执行函数

在 JavaScript 的世界没有块级作用域，但是它采用函数作用域，意思就是说如果你定义的变量在同一个函数里，不论里面有多少个块级，这个变量都可以给其他块级引用；但如果在 fun1( )定义了一个变量，在func2( )就不可以被引用了。

技术分享 
function f2(){
    var arg= 111;
    function f3(){
        console.log(arg);
    }
    return f3;
}
ret = f2();
ret();
JavaScript 作用域

JavaScript的作用域在执行之前已经创建，所以如果全区有一个变量和函数里有相同的变量时候，在调用函数时会调用函数里的，而不是全区的变量。在下面的代码例子中：

  1. 第一步：声明了一个全区的 xo = grandfather;
  2. 第二步：在代码还没被执行时作用域已经在内部定义好了，代码是从上往下被内部定义，定义了 xo = undefined
  3. 第三步：当函数被调用时，代码是从本身的函数作用域往前推来调用的。所以时次调用的结果是找到 inner( )的 xo 变量并打印，因为xo 被赋值成 ‘myself‘，所以结果是 ‘myself‘

代码编译时

技术分享

代码执行过程
技术分享

技术分享 
xo = ‘grandfather‘;
function func() {
    var xo = ‘father‘;
    function inner() {
        console.log(xo)
    }
    xo = ‘myself‘;
    return inner;
}

var ret = func();
ret();
JavaScript作用域例子

JavaScript 有一个特点，可以提前声明变量，它在编译的过程中会在一个函数里找所有的函数，然后提前声明为 undefined

技术分享 
function f1(){
    // xo = undefined
    console.log(xo)
    var xo = ‘janice‘
}
JavaScript提前声明

 

 

 

 

 

 

 

 

 

 

 

 

DOM 介绍

 

 

 

 

jQuery 介绍

 

 

 

 

 

 

 

 

 

 

 

 

參考資料 

银角大王：Python开发【第十一篇】：JavaScript | Python开发【第十二篇】：DOM

金角大王：

 

第十五章：Python の Web开发基础(二)


联系
我们