javascript简介
昨日回顾
ps：浏览器默认优先展示文本内容
-
清除浮动带来的影响
""" 浮动的元素会造成父标签的塌陷 解决塌陷步骤推导 1、自己写一个标签强行成起一个高度 2、clear属性 clear:left\right\both 3、就解决问题方式 提前定义好后续直接使用 .clearfix:after { content:''; display:block clear:both } 谁塌陷就给谁加上clearfix属性 """ -
溢出属性
""" 标签内部内容超出了标签自身的范围会造成内容的溢出 """ overflow:hidden/scroll/auto/visible # 圆形头像制作 overflow:hidden img { max-width:100% } -
定位
""" 静态 static 默认所有的标签都是静态的无法改变位置 相对定位 relative 相对于标签自身原来的位置 （如果你将标签的position由static 变为relative 那么标签就会由没有定位过的标签定位变成i京定位的过的标签 性质就改变了） 绝对定位 absolute eg：小米商城购物车 相对于已经定位过的父标签（如果没有定位就会把body当作参考） 固定定位 fixed eg：回到顶部 右侧小广告 相对于浏览器窗口定位 """ left top right bottom # 脱离文档流 1、浮动 2、绝对定位 3、相对定位 # 不脱离文档流 相对定位 -
z-index 模态框
# 其实就是用来调节指向人的z轴的距离 模态框 eg：百度的注册页面 三成结构 1、底部的正常的文本 2、黑色的布 3、白色的登陆页面 z-index：99 -
透明度
opacity 颜色和字体均可改变
-
简易版的博客园首页
""" 步骤 先用div划分区域 再用html格式占位 最后调节样式标签 1、再给标签起id或class的时候 应该做到见明知意 css单独开设一个文件书写 1、先上来用注释表明作用区域 2、再把body的margin还有各种东西初始化 等 """ -
js简介
""" js也是一门编程语言（但是它内部的逻辑不是太清晰，很多bug） js的注释 // 单行注释 /**/ 多行注释 js的两种引入的方式 script内部书写 script src属性的引入外部js文件 js是以分号作为结束符号的 但是不屑基本也没得什么问题 """ -
js变量
""" 在js中首次声明变量需要使用关键字 var 声明的是全局变量 let 可以区分全局和局部 for循环案例 不用关键字也可以，不报错，但是不推荐 """ -
js常量
""" 在js中是由真正意义上的常量 const pi = 3.14 pi = 3 报错 """
今日内容概要
-
数据类型
-
字符类型
-
布尔值
-
null于undefined
-
对象
数组
自动对象
-
流程控制
-
函数
-
内置函数
事件对象
正则对象
JSON对象
今日内容详情
变量的定义
"""
js变量定义命名规范
1、变量名只能是数字、字母、下划线、$
2、不遵循命名规范也行
1、js中推荐使用驼峰体命名
3、不能使用关键子作为变量名
了解即可
js代码书写位置
1、可以单独书写js文件
2、还可以在浏览器的上面书写
"""
数据类型
js也是一门面向对象的编程语言 就是一切皆对象
js、python是一门拥有动态类型
name = 'jason'
name = 123
name = [1,2,3,4]
# name可以指向任意的数据类型
# 但是有一些语言中，变量名之内指向一种后续不能更改
数字类型（number）
var a= 11;
// 如何查看当前数据类型
typeof a;
"number"
// 特殊的NaN数值类型 表示的意思是不是一个数字
// 类型转换
parseInt()
parseFloat()
parseInt('123sdasdajs2312dasd')
// 遇到里面不全是数字的从头找数字遇到不是数字的就停下来
parseInt('asdasdad123sdasdajs2312dasd')
// 从头找不到数字直接打印出 NaN
字符类型（string）
var s = "jason"
typeof s
"string"
var s = '''sad''' // 不支持三引号
// 模板字符串
var s1 = `
ajdiosaj aa
ajksdpoas
asdjopj
`
// 模板字符串除了可以定义多行文本之外还可以实现字符串的格式化操作
// 书写$ {} 会自动去前面的大括号里卖弄的变量名对应的值 如果没有就报错 有的话就直接展示出来
var name = 'jason'
var age = 18
var sss = `
my name is ${name} and my age is ${age}
`
// 在书写js代码时不用在意左侧的箭头的内容
// 字符串拼接
python中不推荐使用+做i拼接 join
在js中推荐使用+用做拼接
字符串类型常用的方法
"""
.length 返回长度 不能加括号
.trim() 移除空白
.trimleft() 移除左边的空白
.trimright() 移除右边的空白
.charat(n) 返回第n个字符
.concat() 拼接
indexof() 子序列位置
substring() 根据索引获取子序列
slice() 切片
toLowerCase() 小写
toUpperCase() 大写
split() 分割
"""
var name = ' egon '
undefined
name.trim()
"egon"
name.trimLeft()
"egon "
name.trimRight()
" egon"
var name2 = '$$jason$$'
undefined
name2.trim('$') # 不能加括号指定去除的内容
"$$jason$$"
name2.charAt(0)
"$"
name2.indexOf('as') # 找出里面字母的一次出现的索引
3
name2.substring(0,5) # 如果取得值过大也不会报错会把后面的所有的值取出来 ，不识别负数
"$$jas"
name2.slice(0,5)
"$$jas"
name2.substring(0,-1) # 不识别负数
""
name2.slice(0,-1) # 后面推荐就使用slice就可以
"$$jason$"
var name = 'nihaoEGON1234DSb'
undefined
name
"nihaoEGON1234DSb"
name.toLowerCase()
"nihaoegon1234dsb"
name.toUpperCase()
"NIHAOEGON1234DSB"
name
"tank|hecha|liaomei|mengsao|..."
name.split('|')
(5) ["tank", "hecha", "liaomei", "mengsao", "..."]
var a = 'nihao,tank,egon,...'
undefined
a
"nihao,tank,egon,..."
a.split(',')
(4) ["nihao", "tank", "egon", "..."]
name.split('|')
(5) ["tank", "hecha", "liaomei", "mengsao", "..."]
name.split('|',3) # 第二个参数就是限制切割元素的个数，如果超出元素的个数，也不会报错
(3) ["tank", "hecha", "liaomei"]
var p = 1111
undefined
name.concat(p) # js是弱类型(内部会自动转换成相同的数据类型做操作)
"tank|hecha|liaomei|mengsao|...1111"
js是弱类型(内部会自动转换相同数据类型操作)
布尔值(boolean)
"""
1、在python中布尔值的首字母是大写的
True
Flase
2、在js中布尔值全是小写的true flase
# 布尔值是flase的有那些
空字符串、0、null、undefined、NaN
"""
null于undefined区别
"""
null
表示值为空 一般都是指定清空一个变量时使用
undefined
表明声明了一个变量但是没有做初始化操作(没有给值)
函数没有给指定返回的值 返回的也是undefined
"""
对象
js中也是一切皆对象
数组(类似于python中的表列表) []
var li = [11,22,3333,44,55,66]
undefined
typeof li
"object"
li[2]
3333
li.length
6
li.push('nihaoa ')
7
li
(7) [11, 22, 3333, 44, 55, 66, "nihaoa "]
li.pop(22)
"nihaoa "
li.unshift(123)
7
li
(7) [123, 11, 22, 3333, 44, 55, 66]
li.shift()
123
li.slice(1,4)
(3) [3333, 44, 55]
li.reverse()
(5) [66, 55, 44, 3333, 22]
li.join(',')
"66,55,44,3333,22"
# 三个比较重要的方法
li.forEach(function(value){console.log(value)},li)
VM3466:1 22
VM3466:1 3333
VM3466:1 44
VM3466:1 55
VM3466:1 66
li.forEach(function(value){console.log(value)})
VM3480:1 22
VM3480:1 3333
VM3480:1 44
VM3480:1 55
VM3480:1 66
# 一个参数就是把元素打印出来
li.forEach(function(value,index){console.log(value,index)})
VM3577:1 22 0
VM3577:1 3333 1
VM3577:1 44 2
VM3577:1 55 3
VM3577:1 66 4
# 元素+索引
li.forEach(function(value,index,arr){console.log(value,index,arr)})
VM3643:1 22 0 (5) [22, 3333, 44, 55, 66]
VM3643:1 3333 1 (5) [22, 3333, 44, 55, 66]
VM3643:1 44 2 (5) [22, 3333, 44, 55, 66]
VM3643:1 55 3 (5) [22, 3333, 44, 55, 66]
VM3643:1 66 4 (5) [22, 3333, 44, 55, 66]
# 元素+索引+元素的数据来源 最多三个参数
li.splice(1,3,[11,22])
# 第一个参数是起始位置，第二个参数是删除的个数
# 先删除 然后再把数组添加到里卖弄去
var li = [11,22,33,44,55,66]
undefined
li
(6) [11, 22, 33, 44, 55, 66]
li.map(function(value){console.log(value)},li)
VM4099:1 11
VM4099:1 22
VM4099:1 33
VM4099:1 44
VM4099:1 55
VM4099:1 66
(6) [undefined, undefined, undefined, undefined, undefined, undefined]
li.map(function(value,index){return value*3})
(6) [33, 66, 99, 132, 165, 198]
# 返回一个 调用函数处理后的新的数组
运算符
# 算术运算符
var x = 10;
var res1 = x++; # 先赋值在+1
var res2 = ++x; # 先+1在赋值
++ 类似于+=1 表示自增1
# 比较运算符
1=='1' # 弱等于 内部自动转换成相同的数据类型比较了
true
1==='1' # 强等于 内部不做类型转换
flase
1 != '1'
false
1 !== '2'
true
# 逻辑运算符
# python中 and or not
# js中 && || !
5 && '5'
'5'
0 || 1
1
!5 && '5'
false
# 一定要注意什么时候返回的是布尔值 什么时候返回的时数据
比较大小返回的是布尔值 逻辑运算返回的是数据
流程控制
# if判断
var age = 20;
# if (条件){条件成立之后的代码块}
if (age<18){
console.log('太小了')
}else if(age <24){
console.log('差不多')
}else {
console.log('你是个好人')
}
"""
在js代码中没有缩进的只不过我们处于习惯加上缩进而已
switch语法
提前列举好可能会出现的条件和解决方式
"""
var num = 2;
switch(num){
case 0:
console.log('喝酒');
break; # 不加break 匹配到一个之后 就一直往下执行
case 1:
console.log('唱歌');
break;
case 2:
console.log('洗脚');
break;
case 3:
console.log('按摩');
break;
case 4:
console.log('营养快线');
break;
case 5:
console.log('老板慢走 欢迎下次光临');
break;
default:
console.log('条件都没有匹配上 默认走的流程')
}
# 如果所有的条件都不符合就走最下面的语句
# 不加break就会把下面的语句都执行完
# for循环
# 打印0-9的数字
for(let i=0;i<10;i++){
console.log(i)
}
# while循环
var i = 0
wihle(i<10){
console.log(i)
i++
}
# 三运运算
# 在python中三元运算 res = 1 if 1>2 else 3
# 在js中res = 1>2?1:3
# 条件成立就取问好后面的1 不成立就取冒号后面的3
var res = 2>5?8:10 # 10
var res = 2>5?8:(8>5?666:444) # 666
# 三元运算不要过于复杂
函数
# 在python中定义函数需要用到关键字def
# js中需要用到关键字functoin
# 格式
function 函数名(形参1，形参2，形参3){函数体代码}
# 无参函数
function func1(){
console.log('你好')
}
# 有参函数
function func2(a,b){
console.log(a+b)
}
# 函数里面的参数多了、少了都没关系，不会报错
# 函数的返回值也是return
function(){
return 666
}
function(){
return (999,8888,777) # 要用括号括起来要不然只会取最后一个
}
# js不支持解压赋值
# 匿名函数 就是没有名字
function(){
console.log('哈哈哈')
}
var res = function(){
console.log('哈哈哈')
}
# 箭头函数（了解一下） 主要是用来处理简单业务逻辑 类似于匿名函数lamada
var func1 = v => v;
"""箭头左边的是形参 右边的时返回的值"""
等价于
var func1 = function(v){
return v
}
var func2 = (arg1,arg2) => arg1+arg2
等价于
var func1 = function(arg1,arg2){
return arg1+arg2
}
函数的局部变量与全局变量
# 与python的查找顺序一样
# 跟python查找变量的顺序一致
var city = "BeiJing";
function f() {
var city = "ShangHai";
function inner(){
var city = "ShenZhen";
console.log(city);
}
inner();
}
f(); //输出结果是？
var city = "BeiJing";
function Bar() {
console.log(city);
}
function f() {
var city = "ShangHai";
return Bar;
}
var ret = f();
ret(); // 打印结果是？
var city = "BeiJing";
function f(){
var city = "ShangHai";
function inner(){
console.log(city);
}
return inner;
}
var ret = f();
ret();
自定义对象
# 可以看作python中的字典 但是js中的自定义对象要比py中的字典操作起来更方便
# 创造自定义对象 {}
# 第一种自定义方法
var d1 = {'name':'jason','age':18}
undefined
d1.name
"jason"
d1.age
18
d1['name']
"jason"
d1['age']
18
# 更加的方便
typeof d1
"object"
# 利用for循环取值
for ( let i in d1){
console.log(i,d1[i])
}
VM4961:2 name jason
VM4961:2 age 18
# 第二种自定义对象的方式 需要用到关键字 new
var d1 = new Object()
undefined
d1
{}
d1.name = 'jason'
"jason"
d1
{name: "jason"}
d1.age = 30
30
d1
{name: "jason", age: 30}
date对象
let d3 = new Date()
Fri May 15 2020 14:41:06 GMT+0800 (中国标准时间)
d3.toLocaleString()
"2020/5/15 下午2:41:06"
# 也支持自己手动输入时间
let d4 = new Date('2200/11/11 11:11:11')
d4.toLocaleString()
let d5 = new Date(1111,11,11,11,11,11)
d5.toLocaleString() # 月份从0开始0-11月
"1111/12/11 上午11:11:11"
ps:月份是从0-11开始算的第一个月是0 第十二个月是11
# 获时间对象的具体方法
let d6 = new Date();
d6.getDate() 获取日
d6.getDay() 获取星期
d6.getMonth() 获取月份(0-11)
d6.getFullYear() 获取完整的年份
d6.getHours() 获取小时
d6.getMinutes() 获取分钟
d6.getSeconds() 获取秒
d6.getMilliseconds() 获取毫秒
d6.getTime()
JSON对象
"""
在python中序列化反序列化
dumps 序列化
loads 反序列化
js中也有序列化反序列化
JSON.stringify()
dumps
JSON.parse()
loads
"""
let d7 = {'name':'jason','age':18}
undefined
let res = JSON.stringify(d7)
undefined
res
"{\"name\":\"jason\",\"age\":18}"
JSON.parse(res)
{name: "jason", age: 18}
regxp对象
"""
在python中需要使用正则 需要借助于re模块
在js中需要建立正则对象
"""
# 第一种
let reg1 = new RegExp('^[a-zA-Z][a-zA-Z0-9]{5,11}')
# 第二种
let reg2= /^[a-zA-Z][a-zA-Z0-9]{5,11}/
# 匹配内容
reg2.test('egondsb')
true
# 题目 获取字符串里面所有的字母s
let sss = 'egondsb dsb dsb'
sss.match(/s/) # 拿到一个就停止了
sss.match(/s/g) # 全局匹配 g就表示全局匹配
# 全局匹配模式吐槽点
let reg3 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/g
reg2.test('egondsb')
reg3.test('egondsb') # 全局模式有一个lastIndex属性
true
reg3.test('egondsb')
false
reg3.test('egondsb')
true
reg3.test('egondsb')
false
reg3.lastIndex
0
reg3.test('egondsb')
true
reg3.lastIndex
7
# 全局模式有一个lastIndex属性就是说使用一次正则指针跑到末尾，下一次在使用因为指针子末尾所以就返回flase，然后又回到了前面，依次重复，出现啊上述情况
# 如果什么都不传就默认传进去undefined
reg4.test() # 什么都不传 默认传的是undefined
true
reg4.test()
true
所以就会出现这种情况
# 在使用正则时要注意上述问题
math对象
abs(x) 返回数的绝对值。
exp(x) 返回 e 的指数。
floor(x) 对数进行下舍入。
log(x) 返回数的自然对数（底为e）。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。
浙公网安备 33010602011771号