第46篇 JavaScrip基本语法

Posted 2021-01-12 cavalier-chen

2. 上篇内容回顾

1. CSS属性
1. 高和宽
2. 字体相关
3. 文本相关
4. 背景相关
1. background-color: red
2. background-image: url(‘hlw.png‘)
3. background: url(‘hlw.png‘) no-repeat center center
1. 雪碧图的概念
4. 背景固定不动的
background-attachment: fixed
5. 边框
1. border: 3px solid red
2. border-top: 4px dotted black
3. 圆角
1. border-radius: 50%
2. border-radius: 5px
6. display：修改标签默认的显示状态
- block
- inline
- inline-block
- none --> 页面隐藏标签的时候用这个属性
7. CSS盒子模型
content(内容)>padding(内填充)>border(边框)>margin(外边距)
1. 让标签显示得更丰满和充实用padding
2. 调整两个标签之间的距离用margin
8. float
大范围的布局使用float
- left
- right
清除浮动的副作用：
1. 浮动的标签会脱离文档流，后面的标签可以去占用它的位置了
2. .clearfix:after {
content: ‘‘;
display: ‘block‘;
clear: both;
}
9. 溢出overflow
- hidden --> 将溢出的部分隐藏(头像的例子)
- scroll --> 出现滚动体条
- auto --> 浏览器自行处理
- visible --> 默认
10. 定位position
1. 相对定位：相对自己原来在的位置，做移动
2. 绝对定位：相对自己已经定位过的祖先标签，做移动
3. 固定定位：固定在屏幕的某个位置（返回顶部按钮）
11. z-index
z-index: 1000; 值越大越靠近用户
1. 模态框（弹出框）指定谁在最上面
12. opacity
background-color: rgba(0,0,0,0.3) --> 只设置背景颜色的透明度
opacity: 0.3 --> 设置标签及其子标签的透明度

总结：
绝对定位、固定定位和浮动让标签脱离文档流（失去在文档中的位置）。

2. 本篇内容
1. javascript
html: 展示文档内容 --> 裸体的人
CSS：控制文档的显示效果 --> 让人穿上好看的衣服
JS： 控制文档的交互效果 --> 让人跳舞

1. JS的历史？
1. JavaScript和Java有什么关系？
雷锋和雷峰塔

2. ECMA Script是个啥？
ECMA Script是一个标准，JavaScript是一种实现规则的版本。

2. JS的导入方式
1. 直接将JS代码写到页面上的script标签中
2. 把代码写到单独的JS文件中，然后通过script标签的src属性导入

3. JS的语言规范
1. JS语句要以英文分号结束

4. JS中的数据类型
1. number(数字类型)
1. NaN表示一个值不是数字
2. parseInt(‘123‘)
3. parseFloat(‘123.456‘)
2. string(字符串)
1. 字符串的常用方法
3. boolean(布尔值)
1. 0,‘‘,null,undefined,NaN都是false
4. null
表示值为空，通常都是手动赋值的
5. undefined
1. 表示变量只声明没有赋值
2. 函数没有指定返回值，默认返回的就是undefined
6. object(对象)
1. Array（数组）
var a1 = [11, 22, 33]
2. 自定义对象
var o = {‘name‘: ‘王帅‘, ‘age‘: 18}
7. 类型检测
typeof 变量名
5. 运算符
1. 算数运算符
+、-、*、/、%、++、--
2. 比较运算符
1. 弱等于(只判断值相不相等)
2 == ‘2‘ --> true
2. 强等于(判断值和类型是否相同)
2 === ‘2‘ --> false
3. 逻辑运算符
1. &&
2. ||
3. !
4. 赋值运算符
=、+=、-=、*/、/=