前端学习-4
JS数据类型之布尔值
回顾一波
python 布尔值一般存在于if判断语句、while循环、for循环中，用于判断条件真或假
bool
True
False: 0 None '' [] {}...
JS
boolean
true
false:(空字符串)、0、null、undefined、NaN
null与undefined的区别
null可以理解为曾经拥有过 现在暂时空了
undefined可以理解为从未拥有过
很难理解吗？看图吧！！！
JS数据类型之对象(object)
在python中一切皆可对象 在JS中也是一切皆可对象
1.对象之数组
使用单独的变量名来存储一系列的值 类似于python中的列表
let l1 = [1, 2, 3, 4]
常见的内置方法
| 方法 | 说明 |
|---|---|
| .length | 数组的大小 |
| .push(ele) | 尾部追加元素 |
| .pop() | 获取尾部的元素 |
| .unshift(ele) | 头部插入元素 |
| .shift() | 头部移除元素 |
| .slice(start,end) | 切片 |
| .reverse() | 反转 |
| .join(seq) | 将数组元素连接成字符串 |
| .concat(val,...) | 连接数组 |
| .sort() | 排序 |
| .forEach() | 将数组的每个元素传递给回调函数 |
| .splice() | 删除元素，并将数组添加新元素 |
| .map() | 返回一个数组元素调用函数处理后的新数组 |
JS数据类型之自定义对象(object)
1.自定义对象(相当于python中的字典)
定义方式1:
let di = {'name':'curry','pwd':666}
定义方式2:
let d2 = new Object()
自定义对象操作数据值的方式更加简单 直接使用句点符即可
运算符
var x=10;
var res1=x++; 先赋值后自增
var res2=++= 先自增后赋值
== 弱等于(自动转换成相同数据类型)
=== 强等于(不自动转换)
&& 等价于python中的and
|| 等价于python中的or
！ 等价于python中的not
流程控制
1.分支结构
1.单if分支
if(条件){条件成立之后执行的代码}
2.if...else分支
if(条件){
条件成立之后执行的代码
}else{
条件不成立之后执行的代码
}
3.if...elif...else分支
if(条件1){
条件1成立之后执行的代码
}else if(条件2){
条件1不成立条件2成立执行的代码
}
else{
条件不成立之后执行的代码
}
"""
var day = new Date().getDay();
switch (day) {
case 0:
console.log("Sunday");
break;
case 1:
console.log("Monday");
break;
default:
console.log("...")
}
"""
2.循环结构
for(let i=1;i<101;i++){
console.log(i)
}
课堂小练习
打印数组内所有的数据值
l1 = [11, 22, 33, 44, 55, 66, 77, 88, 99, 'jason']
for(let i=0;i<l1.length;i++){
console.log(l1[i])
}
while(条件){
循环体代码
}
函数
function hanshuming(形参){
函数体代码
return 返回值
}
function func(a, b){
console.log(a,b)
}
参数的个数不需要一一对应 如果想限制参数个数需要使用内置关键字arguments
function func(a,b){
if(arguments.length===2){
console.log(a,b)
}else{
console.log('你倒是把参数给我啊')
}
}
匿名函数
funvtion(a,b){
return a + b;
}
箭头函数
var f = function(v){
return v;
}
var f = v => v;
var f = () => 5;
// 等同于
var f = function(){return 5};
var sum = (num1,num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
return num1 + num2; //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}
JS内置对象
类似于python中的内置函数或者内置模块
固定语法
var 变量名 = new 内置对象名（）：
1.Date星期对象
2.json序列化对象
回顾python序列化
import json
json.dumps()
json.loads()
JS中的序列化
JSON.stringify()
JSON.parse()
3.RegExp正则对象
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
'''默认undefined 符合条件'''
BOM与DOM操作
BOM:浏览器对象模型
指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”
DOM:文档对象模型
指文档对象模型，通过它，可以访问HTML文档的所有元素
window.innerHeight 浏览器窗口的内部高度
window.innerWidth 浏览器窗口的内部宽度
window.open() 打开新窗口
window.close() 关闭当前窗口
window.navigator.userAgent() 客户端绝大部分信息
window.history.forward() 前进一页
window.history.back() 后退一页
window.location.href 获取URL
window.location.href = 新网址 跳转到指定页面
window.location.reload() 重新加载页面
alter() 警告框
confirm() 确认框
prompt() 提示框
定时器相关操作(敲黑板)
function func1(){
alert('快跑呀')
}
let t = setTimeout(func1,3000) // 3秒中之后自动执行func1函数
clearTimeout(t) // 取消上面的定时任务
var s1 = null
function showMsg() {
function func1(){
alert('快跑呀')
}
s1 = setInterval(func1, 3000)
}
function clearMission(){
clearInterval(s1)
}
setTimeout(clearMission, 9000)
showMsg()
DOM操作
JS操作html和CSS操作html学习套路一致 都是先学如何查找标签
document.getElementById()
根据id值查找标签 结果直接是标签对象本身
document.getElementsByClassName()
根据class值查找标签 结果是数组类型
document.getElementsByTagName()
根据标签名查找标签 结果是数组类型
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
"""
let divEle = document.getElementById('d1')
"""
节点操作
let XXXEle = document.createElement('标签名')
XXXEle.id = 'id值'
XXXEle.innerText = '内部文本'
divEle.append(XXXEle)
ps:动态创建 临时有效 非永久
属性操作
XXXEle.属性 只能是默认属性
XXXEle.setAttribute() 默认属性、自定义属性
文本操作
divEle.innerHTML
divEle.innerText
divEle.innerHTML = '<h1>curry</h1>'
'<h1>curry/h1>'
divEle.innerText = '<h1>curry</h1>'
'<h1>curry</h1>'
8.25小练习
1.简述解释性语言和编译性的区别
编译型语言：编译型语言在执行之前要先经过编译过程，编译成为一个可执行的机器语言的文件，编译型语言的优缺点：执行效率高，缺点是跨平台能力弱，不便调试。
解释型语言：解释性语言编写的程序不进行预先编译，以文本方式存储程序代码。执行时才翻译执行。程序每执行一次就要翻译一遍。优缺点：跨平台能力强，易于调，执行速度慢。
2.列举你所知道的python2与python3之间的区别
1、输出print的不同；2、整数除法，返回值的不同；3、列表理解循环变量方面；4、Unicode字符串方面；5、错误处理方面；6、xrange方面不同等等。
3.什么是匿名函数。匿名函数一般结合什么一起使用，请列举几个常用的
匿名函数指一类无须定义标识符的函数。Python用lambda语法定义匿名函数，只需用表达式而无需申明。匿名函数有个限制，就是只能有一个表达式，不用写return，返回值就是该表达式的结果。 但通常都是在定义lambda函数的同时将其应用作为参数传递给另一个函数，该函数在其处理过程中对lambda定义的函数进行调用。结合max、min、sorted、map、reduce、filter使用
4.什么是TCP三次握手四次挥手
有两个端，（客户端、服务器），三次握手主要是保障两端都进入一个叫确立的状态，客户端发起（同步发送），服务器接受然后又响应回去（同步响应）状态，客户端接收到服务器的响应后（就绪），再响应一次给服务器，让服务器也处于（就绪）状态。所以，客户端有两次状态，服务器也有两次状态，形成三次握手，缺少一次，就不能保障两端都处于（就绪）状态。
而断开是需要四次挥手的，客户端发起断开，服务器收到后说好的进入一个（等待关闭）状态然后响应给客户端，这个过程，客户端是处于（终止等待第一阶段），然后服务器不放心，再发一次给客户端（最后确认），客户端收到服务器发过来的确认马上响应给服务器说，放心是真的关闭，然后服务器就关闭了，客户端也关闭。
5.列举你所知道的css选择器
id选择器 类选择器 标签选择器 后代选择器 子选择器 毗邻选择器 伪类选择器 通用(*)选择器
