溢出设置overflow
- hidden 隐藏
- visible 显示
- scroll 滚动显示
显示层级
- 当元素为非static 定位,出现层叠时, 可以通过z-index设置显示层级, 值越大显示越靠前
行内元素垂直对齐方式vertical-align
- top上对齐
- middle中间对齐
- bottom下对齐
- baseline基线对齐
视频播放 参考04视频播放.html
JavaScript
-
作用: 给页面添加动态效果
-
语言特点:
- 属于脚本语言, 不需要编译由浏览器解析执行.
- 属于弱类型语言 int x = 10; String name="张三" ; let x=10; let name="张三";
- 基于面向对象语言
- 安全性强: 因为JS语言是嵌入到html页面中运行在客户端的语言,所以对安全性要求较高 , JS语言只能获取浏览器内部的数据, 浏览器以外客户端电脑上面的数据是禁止访问的.
- 交互性强: JS语言是嵌入到html页面中运行在客户端的语言, 和用户直接接触, 而像Java语言是运行在服务器的语言,需要通过网络进行交互,所以相对来说JS语言的交互性更强
- JavaScript和Java语言没有任何关系
变量 数据类型 运算符 各种语句 方法 面向对象
变量
-
JavaScript语言属于弱类型语言
- Java: int age=18; String name="张三"; name=20; 报错
- JS: let age=18; let name="李四"; name=20; 正常执行
-
JavaScript语言中通过let或var声明变量
-
let声明的变量, 作用域和Java语言类似
-
var声明的变量, 不管在什么位置都相当于声明的是一个全局变量
-
举例:
Java: for(int i=0;i<10;i++){ int j = i+1; } int x = i+j; //报错 i和j超出了作用域 JavaScript: let for(let i=0;i<10;i++){ let j=i+1; } let x = i+j; //不会报错 但是因为i和j超出了作用域,访问不到i和j JavaScript: var for(var i=0;i<10;i++){ var j=i+1; } var x = i+j; //不会报错, 并且可以访问到i和j的值
-
数据类型
- JavaScript语言中只有引用类型
- 常见的对象类型:
- string字符串: 可以通过单引号或双引号进行修饰
- number数值: 相当于java中所有数值类型的总和
- boolean布尔值: true和false
- undefined未定义: 当变量只声明不赋值时,变量的类型为未定义类型
- 获取变量类型的方法: typeof 变量;
运算符
- 算术运算符: + - * / %
- 除法运算会自动根据结果转换整数或小数
- java : int x = 5; int y=2; int z = x/y; z=2
- js : let x = 5; let y=2; let z = x/y; z=2.5 x=6 z=3
- 除法运算会自动根据结果转换整数或小数
- 关系运算符: > < >= <= != ==和===
- ==: 先统一等号两边变量的类型, 再比较值 "666"==666 true
- ===: 先比较类型,类型相同后再比较值 "666"===666 false
- 逻辑运算符: && || ! 只支持短路与和短路或
- 赋值运算符: = += -= *= /= %=
- 三目运算符: 条件?值1:值2
各种语句
- if else
- for 新循环 for(Person p : persons) JS: for(let p of persons)
- while
- switch case
如何在html页面中添加js代码
- 三种引入方式
- 内联:在标签的事件属性中添加JS代码,当事件触发时执行.
- 事件: 指系统提供的一系列时间点 .
- 点击事件: 当用户点击元素的时间点.
- 内部: 在页面的任意位置可以添加script标签,在标签体内写js代码, 建议写在body结束标签的附近
- 外部: 在单独的js文件中写js代码, 在html页面中通过script标签的src属性引入, 如果script标签引入了js文件则不能在标签体内继续写js代码
- 内联:在标签的事件属性中添加JS代码,当事件触发时执行.
方法
- Java: public 返回值 方法名(参数列表){方法体}
- JS: function 方法名(参数列表){方法体}
- 三种定义方法的方式:
- function 方法名(参数列表){方法体}
- let 方法名 = function(参数列表){方法体}
- let 方法名 = new Function("参数1","参数2","方法体");
和页面相关的方法
-
通过选择器获取页面中的元素对象
let 元素对象 = document.querySelector("选择器");
NaN
- Not a Number: 不是一个数, 任何数值和NaN进行任何运算得到的结果都是NaN