Python自动化开发学习15-JavaScript和DOM

初识JavaScript

JavaScript（后面都简写为js）是一门独立的语言。浏览器本身就具有js解释器。

js的存在形式

和css类似，js代码要放在<script>标签中。
同样和css类似，还可以写在一个js文件中，比如文件名就叫 commons.js ，然后在head中引入 &lt;script src="commons.js"&gt;&lt;/script&gt; ，src的值就是js的文件路径。
<script type="text/javascript"> 和 <script> 是一样的，或者说script默认就是js。看到这么写全的情况要认识。
<script>标签存放的位置
上面两种情况都用的是 <script> 标签。而这个标签可以放在head中，也可以放在body中。解释器是从上到下顺序执行的，所以放在越上面就越早执行。这就有一个问题，如果script先执行，那么执行完成script代码后才会导入网页内容。这样用户体验会比较差。而且用户只有先看到网页的内容才有可能会需要用到script的代码。所以建议把<script>标签放到最后，也就是body的内部的最下面。这样就是先显示网页的内容，然后再导入js的动态内容。

hellow world

语法：alert(message) 会显示一个带有消息和确定按钮的警告框。
举例如下，顺便看一下上面提到的代码的执行顺序：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        alert("Hello 1")
    </script>
</head>
<body>
<h1>什么时候出现这里的内容</h1>
<script>
    alert("Hello 2")
</script>
</body>

在head里写了一个alert，在body的下面也写了一个alert。打开网页后，会先弹出上面的消息，然后显示网页的内容，最后再弹出最下面的消息。

注释

js代码的注释的语法如下：
单行注释：// 你的代码
多行注释：/* 你的代码 */

<body>
<h1>什么时候出现这里的内容</h1>
<script>
    // alert("Hello 1")
    alert("Hello 2")
    /*
    这里的内容也不会执行
    alert("Hello 3")
    */
</script>
</body>

JavaScript 语句

js可以通过换行或者是分号来区分单独的语句。所以对于单行语句，行尾有没有分号都一样。但是建议加上分号，这样我们的js在编辑完成上线时，可以去掉语句间的缩进和换行（即变成很长的一行代码），节省空间。保证用户端的访问的流畅。

学习JavaScript

变量

变量直接赋值就可以是使用：

<script>
    a = "hello"
    alert(a)
</script>

但是在函数中的变量就存在全局变量和局部变量的区别。需要先用var声明变量，这个变量才是局部变量，否则就是全局变量。建议都先加上var声明为局部变量。

<script>
    function func() {
        // 局部变量
        var a = ‘A‘;
        // 全局变量
        b = ‘B‘
    }
</script>

用控制台调试js代码

除了写一个html文件来调试代码外，也可以用浏览器自带的控制台来调试，用起来就类似一个IDE。
先用 about:blank 来打开一个空白页，然后F12进入开发调试工具，找到控制台（Console）标签就可以在这里直接写代码了。
另外使用js命令 console.log() 可以直接向你的控制台输出信息：

<body>
<script>
    console.log("你好！")
</script>
</body>

打开这样的一个页面，应该是空白的，去控制台看一下有没有一条消息。

定义函数（function）

使用function来定义函数，后面跟函数名，然后是一个"{}"大括号。大括号js的代码块，大括号内部就是这个函数的代码。

<script>
    // 定义一个函数，函数名 fun
    function fun() {
        alert("你好！")
    }
    // 调用执行函数
    fun();
</script>

数据类型

js中的数据类型分为原始类型和对象类型：

  • 原始类型

    • 数字
    • 字符串
    • 布尔值
  • 对象类型
    • 数组
    • 字典

另外还有2个特别的值：

  • null，它表示一个特殊值，常用来描述“空值”。
  • undefined，是一个特殊值，表示变量未定义。

数字（Number）

字符串转数字的方法：
parseInt() ：转为整形，不成功则NaN。
parseFloat() ：转为浮点数，不成功则NaN。

> parseInt(‘123‘)
< 123
> parseInt(‘123.123‘)
< 123
> parseInt(‘abc‘)
< NaN
> parseFloat(‘321‘)
< 321
> parseFloat(‘321.123‘)
< 321.123
>

一些常量：
Math.E ：常量e，自然对数的底数。
Math.PI ：圆周率。

一些静态函数：
Math.sin() ：计算正弦值
Math.asin() ：计算反正弦值，根据值计算出弧度
Math.cos() ：计算余弦值
Math.acos() ：计算反余弦值，根据值计算出弧度
Math.tan() ：计算正切值
Math.atan() ：计算反正切值，根据值计算出弧度
Math.abs() ：计算绝对值
Math.round() ：返回一个整数，4舍5入。
Math.ceil() ：返回一个整数，浮点数向上取整。
Math.floor() ：返回一个整数，浮点数向下取整。

> Math.ceil(1.234)
< 2
> Math.ceil(-1.234)
< -1
> Math.floor(1.234)
< 1
> Math.floor(-1.234)
< -2
>

Math.random() ：生成随机数
Math.sqrt() ：计算平方根

字符串（String）

字符串是由字符组成的数组，但在JavaScript中字符串是不可变的：可以访问字符串任意位置的文本，但是JavaScript并未提供修改已知字符串内容的方法。
常用方法：
str.length ：获取字符串的长度
str.trim() ：移除字符串两边的空白，也可以指定只移除左边（trimLeft）或右边（trimRight）。

> str = ‘  abc  ‘
< "  abc  "
> str.length // 字符串长度
< 7
> str.trim() // 移除空白
< "abc"
> str.trimLeft() // 移除左边的空白
< "abc  "
> str.trimRight() // 移除右边的空白
< "  abc"
>

str.concat() ：字符串拼接

> str = ‘aaa‘
< "aaa"
> str.concat(‘bbb‘)
< "aaabbb"
> str.concat(‘ ‘,‘bbb‘,‘ ‘,‘ccc‘,‘ ‘,111)  // 可以拼接多个字符串，数字也能处理
< "aaa bbb ccc 111"
>

str.charAt() ：返回字符串中的第n个字符
str.substring() ：根据索引获取子序列，字符串切割。
str.slice() ：字符串切片，其实和上面的subsring差不多。不过如果第一个参数大于第二个参数，这里会返回空字符串，而substring会自动调整两个参数的位置。

> str = ‘abcdefg‘
< "abcdefg"
> str.charAt(0)  // 下标是0的字符
< "a"
> str.charAt(2)  // 下标是2的字符
< "c"
> str.substring(2) // 返回下标2到末尾的字符串
< "cdefg"
> str.substring(2,5) // 返回下标2，到下标5（不包括）之前的字符串
< "cde"
> str.slice(2,5)  // 结果和substring一样
< "cde"
> str.substring(5,2)  // 会自动调整参数位置
< "cde"
> str.slice(5,2)  // 返回空字符串
< ""
>

到这里可以先暂停一下，看一下下一个小标题定时器和跑马灯示例
str.indexOf() ：获取子序列的下标
str.lastIndexOf() ：获取子序列的下标，从后往前找。

> str = ‘sonmething for nothing!‘
< "sonmething for nothing!"
> str.indexOf(‘thing‘)
< 5
> str.indexOf(‘thing‘,6) // 从下标6的位置开始查找
< 17
> str.lastIndexOf(‘thing‘,16)  // 从下标16的位置开始往前查找
< 5
>

str.toLowerCase() ：转为小写字母
str.toLocaleUpperCase() ：转为大写字母

> str = "Any Way"
< "Any Way"
> str.toLowerCase()
< "any way"
> str.toLocaleUpperCase()
< "ANY WAY"
>

str.split() ：把字符串分割成数组。第一个参数，指定进行分隔的字符串或正则表达式。第二个参数，指定返回数组的最大长度。

> str = ‘What are you doing?‘
< "What are you doing?"
> str.split()  // 没有参数的话，就没有分隔，但是变成了一个数组
< [object Array]: ["What are you doing?"]
> str.split(‘ ‘)  // 按空格进行分隔
< [object Array]: ["What", "are", "you", "doing?"]
> str.split(‘ ‘,2)  // 指定返回数组的最大长度，多余的就丢弃了
< [object Array]: ["What", "are"]
> str.split(‘‘)  // 如果按字符串进行分隔，就是分隔每个字符
< [object Array]: ["W", "h", "a", "t", " ", "a", "r", "e", " ", "y", "o", "u", " ", "d", "o", "i", "n", "g", "?"]
>

最后还有3个方法，先放这里留个空，之后讲正则表达式的时候还会再遇到。
str.search() ：检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。
str.match() ：在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
str.replace() ：在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

布尔值（Boolean）

js里的布尔值分别是 ‘true‘ 和 ‘false‘ ，都是小写的。
比较运算符：

  • == ：等于。值相等，类型可以不一样
  • != ：不等于。只比较值
  • === ：全等。值和类型都相等
  • !== ：不等于。比较值和类型
  • &lt;、&gt;、&lt;=、&gt;= ：小于、大于、小于等于、大于等于

逻辑运算符：

  • && ：and，与
  • || ：or，或
  • ! ：not，非

数组（Array）

常用方法：
arr.length ：数组的大小
arr.push() ：向数组的末尾添加一个或多个元素，并返回新的长度
arr.pop() ：删除并返回数组的最后一个元素
arr.unshift() ：向数组的开头添加一个或更多元素，并返回新的长度
arr.shift() ：删除并返回数组的第一个元素

> arr = [11,22,33,44]
< [object Array]: [11, 22, 33, 44]
> arr.length
< 4
> arr.push(55,66)  // 添加2个元素到末尾
< 6
> arr.pop()  // 取出最后一个元素
< 66
> arr.unshift(‘a‘,‘b‘)  // 在头部插入2个元素
< 7
> arr.shift()  // 取出第一个元素
< "a"
> arr  // 现在数组的成员
< [object Array]: ["b", 11, 22, 33, 44, 55]
>

arr.splice() ：在数组中添加/删除元素，然后返回被删除的元素。
语法： arrayObject.splice(index,howmany,item1,.....,itemX)
index ：必需。整数，规定起始元素的位置，使用负数可从数组结尾处规定位置。
howmany ：必需。要删除的元素数量。如果设置为 0，则不删除元素。
item ：可选。向数组添加的新元素。

> arr = [11,22,33,44]
< [object Array]: [11, 22, 33, 44]
> arr.splice(1,2,‘a‘,‘b‘,‘c‘)  // 从下标1的位置，删除2个元素，并且在这个位置插入新的元素
< [object Array]: [22, 33]
> arr  // 操作后的数组
< [object Array]: [11, "a", "b", "c", 44]
>

arr.slice() ：切片
arr.reverse() ：反转
arr.join() ：把数组中的所有元素拼接为一个字符串。参数可选，指定要使用的分隔符。如果省略参数，则使用逗号作为分隔符。
arr.concat() ：连接两个或多个数组。参数可以是具体的值，也可以是数组对象。可以是任意多个。
arr.sort() ：对数组的元素进行排序

字典

字典没有太多内容，直接看定义和取值的例子：

> dic = {‘k1‘:‘v1‘,‘k2‘:‘v2‘,‘k3‘:‘v3‘}
< [object Object]: {k1: "v1", k2: "v2", k3: "v3"}
> dic[‘k1‘]
< "v1"
>

定时器

使用setInterval可以创建一个定时器，第一个参数是要执行的代码（一般是一个函数），第二个参数是间隔时间（ms）。
下面是一个每个一段时间弹框的例子：

<script>
    // 创建一个定时器
    // 第一个参数可以是一个函数，第二个参数是间隔时间（ms）
    setInterval("alert(‘Hellow‘)", 2000)
</script>

跑马灯示例

运用定时器和上面的字符串的内容来实现一个字符串滚动显示的效果：

<body>
<div id="welcome">欢迎公司领导莅临指导。 </div>
<script>
    function func() {
        // 根据id来获取到标签
        var tag = document.getElementById(‘welcome‘);
        // 获取标签内部的内容
        var content = tag.innerText;
        var f = content.charAt(0);
        var l = content.substring(1, content.length);
        // 重新拼接成新的字符串
        var new_content = l.concat(f);
        // 给标签内容重新赋值，赋值后页面显示就会有变化
        tag.innerText = new_content;
    }
    setInterval("func()", 500)
</script>
</body>

JavaScript 语句

for/in 循环

遍历的是索引，不是值。遍历一个数组，遍历的就是数组的下标：

> arr = [‘a‘,‘b‘,‘c‘,‘d‘]
< [object Array]: ["a", "b", "c", "d"]
> for (i in arr){
      console.log(i)  // 这个是下标不是值
      console.log(arr[i])  // 这样才能取到值
  }
    0
    a
    1
    b
    2
    c
    3
    d
< undefined
>

遍历一个字典，就是遍历字典的key：

> dic = {‘k1‘:‘v1‘,‘k2‘:‘v2‘,‘k3‘:‘v3‘}
< [object Object]: {k1: "v1", k2: "v2", k3: "v3"}
> for (k in dic){
      console.log(k);
      console.log(dic[k]);
  }
    k1
    v1
    k2
    k3
    v3
< undefined
>

for 循环

这种for循环是用的比较多的。但是这种循环驾驭不了字典的key，所以遍历不了字典。遇到字典的情况还是得用for/in。

for (语句 1; 语句 2; 语句 3)
  {
  被执行的代码块
  }

语句1：在循环（代码块）开始前执行
语句2：定义运行循环（代码块）的条件
语句3：在循环（代码块）已被执行之后执行

> for (var i=0; i<5; i++){
      console.log(i)
  }
    0
    1
    2
    3
    4
< undefined
>

if 语句

语法：

if (条件 1)
  {
  当条件 1 为 true 时执行的代码
  }
else if (条件 2)
  {
  当条件 2 为 true 时执行的代码
  }
else
  {
  当条件 1 和 条件 2 都不为 true 时执行的代码
  }

js的基础先会这么多，下一节在补充其他的内容

DOM

文档对象模型 DOM（Document Object Model）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

查找

首先，要先通过查找的方法获取到对象。

直接查找

document.getElementById() ：根据ID获取一个标签
document.getElementsByName() ：根据name属性获取标签集合
document.getElementsByClassName() ：根据class属性获取标签集合
document.getElementsByTagName() ：根据标签名获取标签集合
根据ID获取到的是唯一的值，返回的是对象。其他的方法获取到的值可能是多个，返回的都是包含每一个对象的数组。
我们可以通过获取对象的innerText属性，来获取到标签中的文本内容。也可以通过修改这个属性，来修改页面的内容。
举例：

<body>
<div id="i1" class="c1">我是i1</div>
<span>a</span>
<span>b</span>
<span>c</span>
<span>d</span>
<script>
    i1 = document.getElementById(‘i1‘);
    alert(i1.innerText);  // 弹框显示i1的信息
    t1 = document.getElementsByTagName(‘span‘);
    // 修改span标签中的内容
    for (var i=0; i<t1.length;i++){
        t1[i].innerText = i;
    }
</script>
</body>

间接查找

parentElement ：父标签
children ：所有子标签集合，这个是数组
firstElementChild ：第一个子标签
lastElementChild ：最后一个子标签
nextElementtSibling ：下一个兄弟标签
previousElementSibling ：上一个兄弟标签

<body>
<div>我是父标签
    <div id="i1">我是i1
        <div>我是子标签1</div>
        <div>我是子标签2</div>
    </div>
</div>
<div>（空）</div>
<script>
    i1 = document.getElementById(‘i1‘);  // 先获取到i1标签的对象
    // 子标签集合第一个元素的，下一个兄弟标签的，文本内容
    alert(i1.children[0].nextElementSibling.innerText);
    // 修改父标签的下一个兄弟标签的内容
    i1.parentElement.nextElementSibling.innerText = "我是父标签的兄弟";
</script>
</body>

操作

之前我们已经对innerText属性进行过操作了。能做的还有很多

操作内容

innerText ：开始和结束标签之间的文本内容
innerHTML ：开始和结束标签之间的 HTML 内容
value ：元素的值

操作对象的class属性

className ：获取所有类名
classList.add ：添加一个类名
classList.remove ：删除一个类名

<body>
<div id="i1">我是i1</div>
<script>
    d1 = document.getElementById(‘i1‘);
    d1.className = ‘i1 i2 i3‘;
    alert(d1.className);
    d1.classList.remove(‘i2‘);
    d1.classList.add(‘i4‘);
    alert(d1.className);
</script>
</body>

后面示例中的模态对话框有应用场景的例子。操作起来比直接修改style方便。

事件

下面2个事件，后面的示例中会用到：

  • onclick ：事件会在对象被点击时发生。
  • onmouseover ：事件会在鼠标指针移动到指定的对象上时发生。

后面的示例中有例子。这里直接跳到后面看示例就好。
下面关于事件的内容还未学习，应该是下次要讲的补充内容了。

事件句柄　(Event Handlers)

属性 此事件发生在何时...
onabort 图像的加载被中断。
onblur 元素失去焦点。
onchange 域的内容被改变。
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onerror 在加载文档或图像时发生错误。
onfocus 元素获得焦点。
onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseup 鼠标按键被松开。
onreset 重置按钮被点击。
onresize 窗口或框架被重新调整大小。
onselect 文本被选中。
onsubmit 确认按钮被点击。
onunload 用户退出页面。

对于事件需要注意的要点：

  • this ：当前正在操作的标签
  • event ：封装了当前事件的内容
  • 事件链以及跳出

示例

模态对话框

这里的思路是，单独定义个hide的class，样式里定义隐藏属性（display: none;）。只要有标签加上hide这个class，就会被隐藏。我们之后只需要进行标签的class的add和remove的操作，就实现了样式的变化。
实现的方法有很多，直接把display写在class的样式里，然后修改样式的属性也是可以的。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*遮罩层样式*/
        .c1{
            position: fixed;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 5;
        }
        /*弹出框样式*/
        .c2{
            width: 500px;
            height: 400px;
            background-color: pink;
            position: fixed;
            left: 50%;
            margin-left: -250px;
            margin-top: 100px;
            z-index: 10;
        }
        /*显示/隐藏 遮罩层和弹出框*/
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div>
    点击
    <input type="button" value="按钮" onclick="ShowModel()" />
    弹出对话框
</div>
<!--遮罩层-->
<div class="c1 hide" id="i1"></div>
<!--弹出框-->
<div class="c2 hide" id="i2">
    <div style="padding: 100px 50px">
        <p>
            <label for="username">用户名：</label>
            <input type="text" id="username" />
        </p>
        <p>
            <label for="password">密码：</label>
            <input type="password" id="password" />
        </p>
        <p>
            <input type="button" value="确定" onclick="HideModel()" />
            <input type="button" value="取消" onclick="HideModel()" />
        </p>
    </div>
</div>
<script>
    function ShowModel() {
        document.getElementById(‘i1‘).classList.remove(‘hide‘)
        document.getElementById(‘i2‘).classList.remove(‘hide‘)
    }
    function HideModel() {
        document.getElementById(‘i1‘).classList.add(‘hide‘)
        document.getElementById(‘i2‘).classList.add(‘hide‘)
    }
</script>
</body>

全选、取消、反选

操作选择框：对于单选框（type="radio"）和复选框（type="checkbox"），可以通过checked属性获取它当前的状态，true为选中，false未选中。也可以通过赋值来改变它的状态。

<body>
<div>
    <input type="button" value="全选" onclick="ChooseAll()">
    <input type="button" value="取消" onclick="CancelAll()">
    <input type="button" value="反选" onclick="Reverse()">
</div>
<div>
    <table border="3">
        <thead>
        <tr>
            <th>choice</th>
            <th>name</th>
            <th>age</th>
        </tr>
        </thead>
        <tbody id="tb">
        <tr>
            <td><input type="checkbox" title="choose the student"></td>
            <td>Adam</td>
            <td>23</td>
        </tr>
        <tr>
            <td><input type="checkbox" title="choose the student"></td>
            <td>Bob</td>
            <td>24</td>
        </tr>
        <tr>
            <td><input type="checkbox" title="choose the student"></td>
            <td>Clark</td>
            <td>25</td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    function ChooseAll() {
        var tbody = document.getElementById(‘tb‘);
        var tr_list = tbody.children;
        for (var i=0; i<tr_list.length; i++){
            var checkbox = tr_list[i].firstElementChild.firstElementChild;
            checkbox.checked = true;
        }
    }
    function CancelAll() {
        var tbody = document.getElementById(‘tb‘);
        var tr_list = tbody.children;
        for (var i=0; i<tr_list.length; i++){
            var checkbox = tr_list[i].firstElementChild.firstElementChild;
            checkbox.checked = false;
        }
    }
    function Reverse() {
        var tbody = document.getElementById(‘tb‘);
        var tr_list = tbody.children;
        for (var i=0; i<tr_list.length; i++){
            var checkbox = tr_list[i].firstElementChild.firstElementChild;
            checkbox.checked = !checkbox.checked;
        }
    }
</script>
</body>

后台管理左侧菜单

这里采用了鼠标悬停事件（onmousemove），会展开当前菜单。子菜单的隐藏依旧是通过操作class属性实现的。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .item .header{
            height: 35px;
            background-color: blue;
            color: white;
            line-height: 35px;
        }
    </style>
</head>
<body>
<div style="height: 48px"></div>
<div style="width: 300px">
    <div class="item">
        <div class="header" onmousemove="ShowMenu(this)">菜单1</div>
        <div class="content hide">
            <div>内容1-1</div>
            <div>内容1-2</div>
            <div>内容1-3</div>
        </div>
    </div>
    <div class="item">
        <div class="header" onmousemove="ShowMenu(this)">菜单2</div>
        <div class="content hide">
            <div>内容2-1</div>
            <div>内容2-2</div>
            <div>内容2-3</div>
        </div>
    </div>
    <div class="item">
        <div class="header" onmousemove="ShowMenu(this)">菜单3</div>
        <div class="content hide">
            <div>内容3-1</div>
            <div>内容3-2</div>
            <div>内容3-3</div>
        </div>
    </div>
</div>
<script>
    function ShowMenu(x){
        var content_list = document.getElementsByClassName(‘content‘);
        for (var i=0; i<content_list.length; i++){
            content_list[i].classList.add(‘hide‘)
        }
        x.nextElementSibling.classList.remove(‘hide‘)
    }
</script>
</body>

作业

电子商务网站页面（动态）（仿京东），要做4个页面

主页

主要是实现中间的那个部分，四分格的商品展示的样式。还要做返回顶部的功能

登陆

要做出右边有图标的input框

注册

红色的星号（*）表示必填项

购物车

左边有菜单：类似后台管理的左侧菜单
右边有表格：表格要有全选、反选。还能用模态框添加内容

原文地址：http://blog.51cto.com/steed/2072109

时间： 2024-10-12 12:02:42

Python自动化开发学习15-JavaScript和DOM的相关文章

Python自动化开发学习17

jQuery学习之前 jQuery 是 JavaScript 的一个类库,类似 python 中的模块.jQuery在线手册:http://jquery.cuishifeng.cn/官网:http://jquery.com/ 版本选择 目前jQuery有三个大版本:1.x. 2.x. 3.x.教学推荐使用1.x的最新版本,这个版本兼容IE低版本.去官方页面:http://code.jquery.com/ ,可以获取到最新的版本,我这会用的是 jquery-1.12.4 . 添加jQuery 前面

Python自动化开发学习12-MariaDB

关系型数据库 主流的关系型数据库大概有下面这些: Oracle : 甲骨文公司的企业级的数据库 SQL Server : 微软的 MySQL : 免费的数据库,现在也属于Oracle的旗下产品 MariaDB : 开源的数据库,MySQL的一个分支 PostgreSQL : 也是开源的 SQLite : 一款轻量级的数据库 DB2 : IBM的 RDBMS 术语 RDBMS(Relational Database Management System)即关系数据库管理系统,在开始之前,先了解下RD

Python自动化开发学习14

Web的三个层次 网页设计思路是把网页分成三个层次,即:结构层(HTML).表示层(CSS).行为层(Javascript).形象的比喻,先是HTML捏了一个人,然后CSS则是给人穿上衣服,最后通过JS让人动起来. Web服务的本质 对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端.用户向服务器发送一个请求.然后服务器响应,将数据和格式发回给客户端,然后断开这个连接.客户端收到返回的数据后,通过浏览器将数据按照一定的格式呈现出来.整个过程就是

Python自动化开发学习16-前端内容综合进阶

css补充 这里再补充几个css的知识点,下面会用到 最小宽度-min-width 设置元素的最小宽度.举例说明,比如设置一个百分比的宽度,那么元素的宽度的像素值是会随着页面大小而变化的.如果设置一个最小的像素宽度,那么当变化到最小值之后,不会继续变小.在下面的例子中,会出现滚动条,保证元素的宽度: <body> <div style="height: 80px;width: 100%;background-color: blue;min-width: 800px;"

Python自动化开发学习19-Django

接下来,我们把Django分为视图(View).路由系统(URL).ORM(Model).模板(Templates )这4块进行学习. 视图 提交数据 上节课已经用过 request.POST.get() 获取提交的数据了,现在来看看有多选框的情况,多选的话应该要提交多个数据.先写一个有单选.多选.下拉列表的html: <body> <form action="/choice/" method="post"> <p> 性别: &l

Python自动化开发学习18-Django基础篇

自定义Web框架 跟着老师一点一点完善代码和文档结构,最终一个Web框架的雏形会显现出来,然后引出之后要学习完善的的Web框架. Web框架的本质 Web服务端的本质就是一个socket服务端,而我们的浏览器就是socket客户端.浏览器发送的请求就是一次socket请求.一次请求获得一次响应,然后就断开,这是一个短连接.下面是一个服务端的python代码,直接用socket,实现一个简单的Hello World: import socket def handle_request(conn):

Python自动化开发学习-Tornado

Tornado 基本操作 讲师的博客:白话tornado源码系列5篇,主要是源码剖析暂时不需要知道那么多.只要看下第一篇就好:https://www.cnblogs.com/wupeiqi/tag/Tornado/Web框架之Tornado:https://www.cnblogs.com/wupeiqi/p/5702910.html Hello World 经典的 hello world 示例: import tornado.web # 视图 class MainHandler(tornado.

python自动化开发学习-9 socket网络编程

一. 简介 python提供了两个级别访问的网络服务: 低级别的网络服务支持节本的socket,它提供了标准的BSD sockets API,可以访问底层操作系统socket接口的全部方法. 高级别的网络服务模块socketserver,它提供了服务器中心类,可以简化网络服务器的开发. socket介绍 socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. socket起源于Unix

python自动化开发学习-8 面向对象进阶

---恢复内容开始--- 类的成员(字段,方法,属性) 注意:所有成员中,只有普通字段的内容是保存在对象中.而其他成员都是保存在类中,即无论创建多少个对象,在内存中只保留一份. 1.字段 字段包含:普通字段和静态字段,在使用中有所区别,最本质的区别是内存中保存的位置不同. 普通字段:属于对象 静态字段:属于类, 多个对象共用一个字段,主要用于对象的变量内容都一样的情景. 注意: 静态字段在代码加载的时候就被创建了,而普通字段在类被实例化的时候才会被创建.# 示例代码: class Provinc