上周内容回顾
后续项目中需要用到前端、后端、数据库三方面知识
所以课程中涵盖了三方面内容
-
MySQL基本操作
-
基本SQL语句
-
字段类型
-
字段约束
-
外键约束
-
表查询关键字
-
多表查询思路
-
可视化软件
-
表查询实战演练
-
pymysql模块
本周内容概要
-
软件开发架构
-
socket模块
-
前端核心
HTML、CSS、JavaScript
jQuery、Bootstrap、fontawesome、elementui
本周内容详细
软件开发架构
CS架构
C:client 客户端
S:server 服务端
客户端需要基于互联网访问服务端才可以体验到服务端提供的服务
小弊端:要想体验服务需要提前下载对应的客户端 稍微有点麻烦!!!
eg:
1.手机(计算机)上各种各样的app其实就是一个个客户端
2.客户端可以看成是一个个即将去消费的客人 服务端可以看成是一家家店
客户端访问服务端就相当于是客人进店消费体验店里的服务
服务端需要具备的三大条件
1.要有固定的地址
2.24小时不间断服务
3.能够承受高并发(可以服务很多人)
BS架构
B:broswer 浏览器
S:server 服务器
浏览器充当所有服务端的客户端 用户无需下载对应的客户端 使用浏览器即可
(浏览器可以直接访问淘宝、京东、抖音、微信、qq)
但是使用浏览器访问服务端和使用专门的客户端访问服务端 页面样式和功能可能会有所区别
BS架构给了我们一种启发>>>:统一接口
BS架构的本质也是CS架构
socket模块
该模块专门用于计算机之间的远程数据交互
socket基本操作
import socket
# 1.产生一个socket对象
server = socket.socket() # 括号内不传参数 默认采用的网络协议是TCP协议(后续可自行了解)
# 2.绑定一个固定的地址(IP PORT)
"""
IP地址:接入互联网的计算机都必须有一个IP地址 相当于身份证号
PORT号:计算机用于管理自身多个应用程序的方式
"""
server.bind(('127.0.0.1', 8080)) # 127.0.0.1是本地回环地址 只有自己的计算机才可以访问
# 3.半链接池(节省资源)
server.listen(5)
# 4.等待客户端链接
sock, addr = server.accept() # sock用于数据交互 addr客户端地址
# 5.朝客户端发送数据
sock.send(b'hello I am from server')
# 6.接收客户端的数据
data = sock.recv(1024)
print('客户端发送过来的数据:',data)
import socket
# 1.产生一个socket对象
client = socket.socket()
# 2.链接服务端(IP PORT)
client.connect(('127.0.0.1', 8080))
# 3.接收服务端发送过来的数据
data = client.recv(1024)
print('来自于服务端的数据:',data)
# 4.朝服务端发送数据
client.send(b'hello I am from client')
前端简介
前端(前台接待员)
任何与用户直接打交道的界面 都可以称之为是前端
后端(幕后操作者)
不直接与用户打交道 主要负责业务核心逻辑的执行
"""
开玩笑:IT行业存在一个鄙视链
后端程序员 > 运维、测试、前端、产品经理
"""
前端核心知识
HTML
构建网页的骨架 类似于光着身子的蜡笔小新
CSS
调节HTML样式 类似于给蜡笔小新穿衣服、化妆
JavaScript
控制动态效果 类似于让拉比小新跳舞
代码模拟
代码模拟服务端 浏览器充当客户端请求数据
无法直接交互 数据格式需要符合HTTP协议(超文本传输协议)
HTML
超文本标记语言 是构建网页的骨架(也可以笼统说所有浏览器展示出来的花里胡哨的页面都是有它构建而来)
eg:淘宝 京东 拼夕夕
"""
浏览器上肉眼看到的内容肯定不是内部真正的模样!!! 内部肯定需要对应一段代码
"""
1.文件结构
<html>
<head>浏览器不直接展示出来的内容</head>
<body>浏览器会直接展示出来的内容</body>
</html>
2.语法注释
<!--注释内容-->
3.标签分类
双标签:一部分双标签很多情况下都可以在内部嵌套其他标签
<h1></h1>
单标签
<img/>
4.head内常见标签
title 网页小标题
style 内部编写css代码
link 通过href属性引入外部css文件
script 内部编写js代码或者通过src属性引入外部js文件
5.body内常见标签
5.1.基本标签
h1~h6 标题标签
u i s b 下划线、斜体、删除线、加粗
p 段落标签
hr 水平分割线
br 换行符
5.2.常见符号
空格符
> 大于号(避免普通文本的符号与html标签符号冲突)
< 小于号(避免普通文本的符号与html标签符号冲突)
¥ 羊角符
5.3.布局标签
div 专门做页面的前期规划布局(使用频率最高)
span 专门提供普通文本的内容(使用频率较低)
5.4.常见标签
a 链接标签 href属性跳转网页
img 图片标签 src属性展示图片
5.5.列表标签
ul
li
无序列表
页面上只要是有规则排列的横向或者竖向的多行内容 一般都是无序列表
5.6.表格标签
table 模拟excel表格存储数据的样式
thead 表头
tr 一行
th/td
tbody 表单
tr 一行
td
5.7.表单标签(重要)
form 能够通过前端页面获取用户数据并且发送给后端
action参数
控制数据提交的后端地址
input标签 获取用户数据
type属性
text 普通文本
password 密文展示
radio 单选
checkbox 多选
date 日历
email 邮箱
file 获取文件
submit 触发提交数据动作的按钮
reset 重置按钮
button 普通按钮
select标签 下拉框
option标签 一个个下拉选项
textarea标签 一次性获取大段文本内容
6.块儿级标签与行内标签
块儿级标签独占浏览器窗口一行
行内标签取决于内部文本 不独占一行
CSS选择器
层叠样式表 用于对html标签调整样式
"""
页面上很多标签都是相同的 但是样式又不同 如何区分???
一般情况下我们都会给标签设置两个非常重要的属性
id属性(指名道姓 精准查找)
类似于标签的身份证号 同一个页面上id不能重复
<div id='d1'></div>
class属性(分类管理 批量查找)
类似于分类管理 多个标签可以有相同的类名
<div class='c1'></div>
<p class='c2'></p>
<span class='c1'></span>
"""
语法结构
选择器 {样式名:样式值; 样式名:样式值;...}
注释语法
/*注释内容*/
1.在调整标签样式之前我们得先学会如何查找标签
1.1.基本选择器
id选择器 #id值
class选择器(类选择器) .class值
tag选择器(标签选择器) 标签名
1.2.组合选择器
"""
<div>div
<span>div>span</span>
<p>div>p
<span>div>p>span</span>
</p>
<span>div>span</span>
</div>
<span>123</span>
<span>321</span>
前端会将标签嵌套的结构使用亲戚关系来表述
儿子、后代、弟弟、哥哥、祖先
"""
/*后代选择器>>>:空格*/
/*div span {*/
/* color: red;*/
/*}*/
/*儿子选择器>>>:大于号*/
/*div>span {*/
/* color: greenyellow;*/
/*}*/
/*毗邻选择器>>>:加号*/
/*div+span {*/
/* color: red;*/
/*}*/
/*弟弟选择器>>>:小波浪号*/
div~span {
color: red;
}
混合使用
div,span {
color: red;
}
#d1,.c1,span {
color: red;
}
1.3.伪类选择器
a:hover { 鼠标悬浮动态加载样式
color: red;
}
2.选择器优先级
只需要掌握以下两种情况即可
1.选择器相同
就近原则
2.选择器不同
行内式 > id选择器 > 类选择器 > 标签选择器
CSS样式操作
1.字体相关操作
font-size 大小
font-weight 粗细
color 三种
red
rgb()
#4e4e4e
ps:取色方式有很多
方式1:pycharm取色
方式2:软件自带截图
text-align 布局
text-decoration 文字修饰
a标签自带下划线 需要我们自己处理
2.背景相关操作
background-color: red;
background-image: url('1.jpg');
3.边框相关操作
border
border-raduis
4.展示相关操作
display:none
5.盒子模型
所有的标签都有四个重要的属性
margin 外边距 标签与标签之间的距离
border 边框 标签边框属性
padding 内边距 边框与标签内部文本的距离
content 标签内容 标签内部文本
6.浮动布局
所有的网站几乎都需要使用浮动才可以完成页面布局的操作
float
7.溢出属性
overflow:hidden
8.定位属性
position:fixed
9.z-index
前端页面其实是一个三维坐标系 z轴指向用户
JS
JavaScript跟Java没有任何关系 纯粹是为了当初蹭Java热度
JS也是一门编程语言
JS的代码结束符是分号 但是很多时候不写也没啥大问题 逻辑不是很严谨
'''学习阶段直接使用浏览器console界面编写js更加方便'''
1.变量与常量
var name = 'jason'
let name = 'jason'
ps:var和let是申明变量的关键字 var是5.1版本之前通用的 let是5.1之后发明的
var声明的变量作用于全局 let则可以声明局部名称空间变量
const pi = 3.14
2.注释语法
// 单行注释
/* 多行注释 */
3.基本数据类型
回顾python基本数据类型
整型int、浮点型float、字符串str、列表list、字典dict、元组tuple、集合set、布尔值bool
JS基本数据类型
数值类型number、字符类型string、布尔类型boolean、undefined类型、对象类型object(array 自定义对象)
4.数据类型
'''js中查看数据类型的方式 typeof'''
1.数值类型number(包含了整型与浮点型)
let i = 11
let f = 11.11
NaN:Not A Number
2.字符类型string
let name = 'jason'
let name = "jason"
let name = `多行文本`
格式化输出 `${变量名}`
常见内置方法
js中的方法 python中的方法
.length len()
.trim() strip()\lstrip()\rstrip()
.concat() join()
.slice() 索引切片
.toLowerCase() lower()
.toUpperCase() upper()
.split() split()
3.布尔类型boolean
js中布尔值 python中的布尔值
true True
false False
4.undefined类型
null的意思是空 undefined的意思是没有定义
5.对象object
数组 类似于python中的列表 []
常见内置方法
js中的方法 python中方法
.length len()
.push() append()
.pop() pop()
.unshift() insert()
.concat() extend()
6.自定义对象
自定义对象 类似于python中的字典 {}
let obj1 = new Object() # 空字典
let obj2 = {'name':'jason'} # 自定义字典
可以通过句点符的方式直接操作键值对
JS流程控制
js中的分支结构 python中的分支结构
let age = 18 age = 18
if(age>18){ if age > 18:
console.log('猜大了') print('猜大了')
}else if(age<18){ elif age < 18:
console.log('猜小了') print('猜小了')
}else{ else:
console.log('猜对了') print('猜对了')
}
js中的for循环 python中的for循环
let l1 = [11, 22, 33, 44, 55] l1 = [11, 22, 33, 44, 55]
for(let i=0;i<l1.length;i++){ for i in l1:
console.log(l1[i]) print(i)
}
js中的while循环 python中的while循环
let count = 1 count = 1
while(count < 10){ while count < 10:
console.log(count) print(count)
count++; count += 1
}
JS函数
js中的函数语法结构 python中的函数语法结构
function 函数名(形参){ def 函数名(形参):
/*函数注释*/ '''函数注释'''
函数体代码 函数体代码
return 返回值 return 返回值
}
'''js中的函数形参与实参的个数可以不一致'''
function f1(){ def f1():
console.log('hello js') print('hello pythonn')
}
f1() f1()
f1(1,2,3,4)
function f2(a, b){ def f2(a, b):
console.log(a, b) print(a, b)
}
f2(1,2) f2(1, 2)
f2()
f2(1)
f2(1,2,3,4,5)
'''js中函数体代码自带一个关键字arguments用于接收所有的实参'''
等价于python中*args和**kwargs的功能
JS内置对象
类似于python中的内置模块
js中的内置对象 python中的内置模块
Date对象 time模块
let d1 = new Date() import time
d1.toLocaleString() time.strftime('%Y/%m/%d %X')
JSON对象 json模块
JSON.stringify() json.dumps()
JSON.parse() json.loads()
RegExp对象 re模块
let r1 = new RegExp('^ja$') re.findall('^ja$',待匹配的文本)
r1.test(待匹配的文本内容)
BOM操作
通过js代码与浏览器做交互 BOM:浏览器对象模型
1.window.open() 浏览器打开全新的窗口
2.window.close() 关闭浏览器窗口
3.window.navigator.userAgent 获取浏览器信息
4.window.history.forward() 浏览器前进一页
5.window.history.back() 浏览器后退一页
6.window.location.reload() 浏览器重新加载
7.window.location.href 获取页面地址
8.window.location.href = url 重新指定访问地址
9.alter() 警告框
10.confirm() 确认框
11.prompt() 提示框
12.setTimeout()/clearTimeOut() 延时执行
13.setInterval()/clearInterval()循环执行
DOM操作
通过js代码与html页面做交互 DOM:文档对象模型
1.先学会如何查找标签
核心
document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()
扩展
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
2.操作标签
1.创建标签
let aEle = document.createElement('a')
2.添加文本
aEle.innerText = '点我去搜狗'
3.设置属性
aEle.setAttribute('href','https://www.sogo.com/')
4.文档操作
let divEle = document.getElementById('d1')
divEle.append(aEle)
5.样式操作
aEle.style.color = 'red'
6.获取标签值
innerText 主要用于页面普通标签
只作用于内部文本 不识别标签
innerHTML 主要用于页面普通标签
内部文本和标签都识别
value 主要用于获取用户数据的标签
用于普通数据的获取
files 主要用于获取用户数据的标签
用于文件数据的获取
3.事件
"""
html页面上JS代码的编写位置>>>:建议写在body内最下方
当JS代码中涉及到标签查找 那么需要先确保页面上所有的标签全部加载完毕之后再查找避免报错 最简单的方式就是写在body内最下方(页面加载从上往下)
"""
类似于给标签绑定一些功能 让其在特定的条件下自动触发
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 // 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown 某个键盘按键被按下。应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onl oad 一张页面或一幅图像完成加载。
onm ousedown 鼠标按钮被按下。
onm ousemove 鼠标被移动。
onm ouseout 鼠标从某元素移开。
onm ouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。
3.1.绑定事件的两种方式
方式1:先查找标签再绑定事件
<button id="d1">我是按钮1</button>
let btnEle = document.getElementById('d1')
btnEle.onclick = function () {
alert(123)
console.log(this)
}
'''上述绑定事件的函数内还可以用关键字this来指代当前被操作的标签'''
方式2:先编写函数再赋值属性
<button id="d2" onclick="func1()">我是按钮2</button>
function func1() {
confirm('哈哈哈')
}
4.事件实战案例
案例1:获取用户名和密码并校验是否正确 如果不正确展示提示信息
// 1.查找提交数据的按钮
let btnEle = document.getElementById('d3');
// 2.给按钮绑定一个点击事件
btnEle.onclick = function () {
// 3.获取用户输入的用户名和密码
let userNameVal = document.getElementById('d1').value
let passWordVal = document.getElementById('d2').value
// 4.校验数据是否符合条件
// 针对用户名不能填写jason
if(userNameVal === 'jason'){
document.getElementsByClassName('errors')[0].innerText = '用户名不能是jason'
}
// 针对密码不能为空
if(passWordVal.length === 0){
document.getElementsByClassName('errors')[1].innerText = '密码不能为空'
}
}
案例2:省市联动
参考笔记或者博客即可
案例3:搜索框内容变化
let inEle = document.getElementById('d1');
// input框聚焦事件(鼠标点击选中)
inEle.onfocus = function () {
this.removeAttribute('placeholder')
}
// input框失去焦点时间(鼠标点击其他标签)
inEle.onblur = function () {
this.setAttribute('placeholder','switch掌机')
}
案例4:锻炼逻辑能力 动态展示时间
<script>
// 1.查找标签
let d1Ele = document.getElementById('d1');
let d2Ele = document.getElementById('d2');
let d3Ele = document.getElementById('d3');
// 提前定义存储定时任务的变量
let t = null;
function showTime(){
// 3.获取当前时间
let cTimeObj = new Date();
// 4.添加到input框中
d1Ele.value = cTimeObj.toLocaleString()
}
// 2.给开始按钮绑定点击事件
d2Ele.onclick = function () {
if(!t){
t = setInterval(showTime, 1000) // 循环定时任务没开启一个都是全新的 变量t只能指代最后一个
}
}
// 给结束按钮绑定点击事件
d3Ele.onclick = function () {
clearInterval(t) // 只能结束t指代的那一个定时任务 只是把t指代的定时任务取消了 但是t的值并没有清空
t = null;
}
</script>
作业
1.整理今日内容及博客
2.自行查阅博客练习事件绑定
3.预习博客 前端及django部分
标签：浏览器,标签,day06,笔记,js,let,document,选择器 From： https://www.cnblogs.com/A121/p/16656352.html