Python-Django学习笔记6-前端开发（JavaScript）
JavaScript
1. 今日概要
JavaScript是一门编程语言。浏览器就是JavaScript语言的解释器
DOM和BOM
- 相当于编程语言内置的模块
- 例如：python中的re、random、time、JSON模块等
jQuery
- 相当于是JavaScript的第三方模块
- 例如：python中的requests、openpyxl
1.1 JavaScript让程序实现动态效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.menus{
width: 200px;
border: 1px solid red;
}
.menus .header{
background-color: gold;
padding: 20px 10px;
}
</style>
</head>
<body>
<div class="menus">
<div class="header" onclick="muFunc()">大标题</div>
<div class="item">内容</div>
</div>
<script type="text/javascript">
function muFunc(){
// alert("你好呀");
confirm("是否要继续？");
}
</script>
</body>
</html>
1.2 代码位置
- <!-- 位置一：放在head标签、css下方，代码写在script标签内 -->
- <!-- 位置二：写在body标签内部的最尾部 -->
- 一般推荐放在位置二；
1.3 JS代码存在形式
- 当前HTML中
<script type="text/javascript">
function a(){
}
</script>
<script type="text/javascript">
alert("你干嘛？")
</script>
- 写在其他js文件中，导入使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.menus{
width: 200px;
border: 1px solid red;
}
.menus .header{
background-color: gold;
padding: 20px 10px;
}
</style>
<script src="/static/js/js-adress.js"></script>
</head>
<body>
<div class="menus">
<div class="header" onclick="muFunc()">大标题</div>
<div class="item">内容</div>
</div>
<!-- 导入位置一般也放在此处 -->
<script src="/static/js/js-adress.js"></script>
</body>
</html>
1.4 注释
- HTML的注释，
HTML代码块
<!-- 注释内容 -->
- CSS的注释，
style代码块
/* 注释内容 */
- JS的注释，
JavaScript代码块
// 注释内容
/* 注释内容 */
2. JavaScript
2.1 变量
- python
name = "用户1"
print(name)
- JavaScript
<script type="text/javascript">
var name = "用户";
console.log(name);
</script>
2.2 字符串类型
// 声明
var name = "用户";
var name = String("用户");
// 常见功能
var name = "中国联通";
// 获取长度
var v1 = name.length;
// 取出下标字符
var v2 = name[0]; // 等价于 == name.charAr(3)
// 去除空白字符
var v3 = name.trim();
// 切片
var v4 = name.substring(1,2);
案例：跑马灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span id="txt">欢迎中国联通领导XXX莅临指导</span>
<script type="text/javascript">
function showText(){
// 1. 去HTML中找到标签并获取他的内容 (DOM)
var tag = document.getElementById("txt");
var dataString = tag.innerText;
// console.log(dataString);
// 2. 动态效果：把文本中的第一个字符获取到，并将其放在字符串最后位置
var firstChar = dataString[0];
var otherString = dataString.substring(1, dataString.length);
var newText = otherString + firstChar;
// console.log(newText);
// 3. 在HTML标签中更新内容
tag.innerText = newText;
}
// JavaScript中的定时器,下述代码为每一秒执行一次函数
setInterval(showText, 1000);
</script>
</body>
</html>
2.3 数组
// 定义
var v1 = [11,22,33,44];
var v2 = Array([11,22,33,44]);
// 操作
var v1 = [11,22,33,44];
v1[1]
v1[0] = "用户"
v1.push("联通"); // 在尾部追加
v1.unshift("中国"); // 头部插入
v1.splice(索引,0,元素);
v1.splice(1,0,"电信"); //指定位置插入
v1.pop(); //尾部删除
v1.shift(); //头部喊出
v1.splice(索引,1);
v1.splice(3,1); // 指定位置删除
var v1 = [11,22,33,44];
// 定义一个变量item，用于循环 v1中的每一个索引
for(var idx in v1){
// 获取循环的索引元素
print(v1[idx]);
// 获取列表的下标
print(idx);
}
var v1 = [11,22,33,44];
for(var i=0; i<v1.length; i++){
}
- 注意：break 和 continue
案例：动态数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<div>
<ul id="city">
<!-- <li>北京</li>
<li>上海</li>
<li>深圳</li> -->
</ul>
</div>
<script type="text/javascript">
// 发送网络请求，获取数据
var cityList = ['北京', '上海', '深圳'];
for(var idx in cityList){
var text = cityList[idx];
// 创建 li标签
var tag = document.createElement("li");
// 在li标签中写入内容
tag.innerText = text;
// 添加到id=city的标签内
var parentTag = document.getElementById("city");
parentTag.appendChild(tag);
}
</script>
</body>
</html>
2.4 对象（字典）
info = {
"name":"用户",
"age":18
}
info = {
name:"用户",
age:18
}
info.age
info.name = "Employee"
info["age"]
info["name"] = "用户"
delete info["age"]
info = {
name:"用户",
age:18
}
for(var key in info){
// key = name/age data = info[key]
}
案例：动态表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1px">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody id="body">
<!-- <tr>
<td>1</td>
<td>果汁</td>
<td>19</td>
</tr> -->
</tbody>
</table>
<script type="text/javascript">
//网络请求获取，写入到页面上
var dataList =[
{id:1,name:"果汁",age:19},
{id:1,name:"果汁",age:19},
{id:1,name:"果汁",age:19},
{id:1,name:"果汁",age:19}
]
for(var idx in dataList){
var info = dataList[idx];
var tr = document.createElement("tr");
for(var key in info){
var text = info[key];
var td = document.createElement("td");
td.innerText = text;
tr.appendChild(td);
}
var bodyTag = document.getElementById("body");
bodyTag.appendChild(tr);
}
// console.log(tr);
</script>
</body>
</html>
2.5 条件语句
if (条件) {
}else{
}
if (1==1){
}else{
}
if (条件) {
}else if (条件) {
}else if (条件) {
}else{
}
2.6 函数
function func(){
...
}
func()
3. DOM
DOM，就是一个模块，可以对HTML页面中的标签进行操作。
<table border="1px">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody id="body">
<!-- <tr>
<td>1</td>
<td>果汁</td>
<td>19</td>
</tr> -->
</tbody>
</table>
// 根据ID获取标签
var bodyTag = document.getElementById("body");
// 获取标签中的文本
bodyTag.innerText
// 修改标签中的文本
bodyTag.innerText = "hhhhh"
// 创建标签
var bodyTag = document.createElement("div");
// 标签内写入内容
bodyTag.innerText = "hhhhh"
<ul id="city">
</ul>
<script type="text/javascript">
var bodyTag = document.getElementById("city");
// 创建 li标签
var tag = document.createElement("li");
// 在li标签中写入内容
tag.innerText = "上海";
parentTag.appendChild(tag);
</script>
3.1 事件的绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<input type="button" value="点击添加" onclick="addCityinfo()">
<ul id="city">
</ul>
<script type="text/javascript">
function addCityinfo(){
var newTag = document.createElement("li");
newTag.innerText = "联通";
var parentTag = document.getElementById("city");
parentTag.appendChild(newTag);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<input type="text" placeholder="请输入内容" id="txtUser">
<input type="button" value="点击添加" onclick="addCityinfo()">
<ul id="city">
</ul>
<script type="text/javascript">
function addCityinfo(){
// 1. 先获取输入框中用户输入的数据
var txtTag = document.getElementById("txtUser");
// 2. 获取input框中用户输入的内容
var newString = txtTag.value;
// 判断用户输入的内容是否为空，只有不为空才能继续执行下后续逻辑
if (newString.length > 0){
// 3. 创建标签，<li></li>中间的文本信息就是用户输入的内容
var newTag = document.createElement("li");
newTag.innerText = newString;
// 4. 把标签添加到ul中
var parentTag = document.getElementById("city");
parentTag.appendChild(newTag);
// 5. 将输入框内容清空
txtTag.value = "";
}else{
alert("输入框内容不能为空，请输入内容~")
}
}
</script>
</body>
</html>
- 注意：DOM中还有很多操作，但比较繁琐，在写页面效果时，在实操中会使用jQuery来实现 / vue.js / react.js
4. 知识点回顾-Python
4.1 编码相关
文件存储时，使用某种编码，打开使用时就需要使用相同的编码，否则就会乱码
字符底层存储时本质上都是1010101010101
字符和二进制的对应关系（编码）：
- ASCII，256中对应关系
- bg2312，gbk，中文和亚洲的一些国家，一般中文使用2个字节
- Unicode，ucs2/ucs4，包括现在发现的所有文明
- utf-8，一般中文使用3个字节
Python默认解释器编码（utf-8）：
Python.exe 代码文件
如果将代码文件编码保存成了gbk编码，将python默认解释器编码修改为gbk
data = "中"
res = data.encode("utf-8")
print(res) # b'\xe4\xb8\xad'
data = "中"
res = data.encode("gbk")
print(res) # b'\xd6\xd0'
4.2 计算机中的单位
位/字节/KB/MB/GB/TB...
办流量/硬盘/内存
4.3 字符串格式化（三种）
v1 = "我是{}, 今年{}".fromat("徐泽林",25)
v2 = "我是%s, 今年%d岁" %("xzl", 25)
name = "徐泽林"
age = 19
v3 = f"我是{name}, 今年{age}岁"
4.4 数据类型
- 常见数据类型：int bool str list tuple dict set float None
- 哪些转化成布尔值为False：空*、None、0
- 可变和不可变划分：
- 可变：list、set、dict、
- 不可变：int、bool、str...
- 可哈希和不可哈希划分：
- 字典的键/集合的元素，必须是可哈希的类型
- 可哈希：int、bool、str...
- 不可哈希：list、set、dict（不能作为字典的键和集合的元素）
- 主要的数据类型：
- str
- 独有功能：split、upper、lower、startswith、strip、join
注意：str不可变；不会对原字符串进行修改，而是生成新的内容
- 公共功能：len、索引、切片、for、判断
- list
- 独有功能：append、insert、remove、pop...
注意：list可变；功能很多都是对原数据进行操作
- 公共功能：len、索引、切片、for、判断
- dict
- 独有功能：get、keys、items、values
- 公共功能：len、索引、切片、for、判断(判断键效率很高)
4.5 运算符
基本运算符：加减乘除...
逻辑运算符：（第一个值是True，第一个就能决定，整体即是True，第二个能决定，则使用第二个）
1>2 and 3<10 # False
v1 = 99 and 88
print(v1) # 88
v2 = [] or 10
print(v2) # 10
v3 = "联通" or [] # "联通"
4.6 推导式（简化生成数据）
data = []
for i in range(10):
data.append(i)
等价于：
data = [i for i in range(10)]
v1 = [i for i in range(10) if i<5] # [0,1,2,3,4]
4.7 函数编程
函数的基础知识
- 定义
- 参数；概念：位置传参/关键字传参/参数默认值/动态参数*args,**kwargs
- 返回值
- 函数中一旦遇到return就立即返回，后续代码不再执行
- 函数没有返回值时默认返回None
函数的进阶：
- Python中是函数为作用域
- 全局变量和局部变量，规范：全局变量（大写）、局部变量（小写）
- 在局部变量中可以使用global关键字；作用：引用全局的那个变量，不是在局部新建
内置函数：（Python内部提供的函数）
- bin/hex/odc/max/min/divmod/sorted/open文件操作
- 中文排序的依据：Unicode
文件操作：
- 基本操作：打开、操作、关闭
- 为了防止忘记关闭文件，可以用with
- 打开文件时的模式：
- r/rb：读 【文件不存在，报错】 【文件目录不存在，报错】
- w/wb：写（清空） 【文件不存在，自动新建】 【文件目录不存在，报错】
- a/ab：追加 【文件不存在，自动新建】 【文件目录不存在，报错】
注意：os.markdirs/os.path.exsits、是否存在，不存在则新建目录
4.8 模块
模块的分类：
- 自定义模块
- os.path导入模块时，python内部都会去那个目录找
- 自己写py文件时，不要与python内置模块同名
- import/from xx import xx
- 内置模块：time/datetime/json/re/random/os
- 第三方模块：requests/openpyxl/python-docx/flask
查看当前目录下所有的文件：os.listdir（获取一级目录） / os.walk（获取所有级别目录）
关于时间模块：时间戳 / datetime格式 / 字符串，三种时间格式可以相互转化
关于JSON模块：
- JSON本质上是字符串，有一些自己的格式要求，例如：无元组/无单引号
- json.dumps序列化时，只能序列化Python常用数据类型
关于re正则模块：
- 正则：\d \w
- 贪婪匹配和非贪婪匹配，默认贪婪匹配，想让他不贪婪，个数后面加?号
- 正则：re.search/re.match/re.findall
第三方模块：
- 安装方式：pip管理工具、源码、wheel包
4.9 面向对象
目标：不是为了用面向对象编程（推荐使用函数编程，面向对象要看得懂）
面向对象三大特性：封装、继承、多态
5. 知识点回顾-前端
5.1 前端开发
- 前端知识点分为三部分：
- HTML：标签具有默认特点
- CSS：修改标签的特点
- JavaScript：动态
- HTML标签
- dev/span/a/img/input/form/table/ul...
- 块级标签和行内标签，例如：div span默认谁是块级标签？ div块级、span行内
注意：css样式，发现行内标签设置高度、宽度、内边距..都无效
- 需要变成块级标签 或 块级行内标签
- form表单 + input/select/textarea 数据框
- action，提交地址
- method，提交方式
- form标签中有一个submit
- 内部标签都需要设置name属性
- CSS样式
- 布局一定会用到的样式：div + float（脱离文档流，clear:both / clearfix）
- 高度和宽度
- 边距
- 内边距 pandding
- 外边距 margin
- 字体大小/颜色
- 边框
- 背景颜色
- hover，鼠标移入时触发的CSS样式
