溢出设置overflow和JavaScript

溢出设置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代码

方法

• Java: public 返回值 方法名(参数列表){方法体}
• JS: function 方法名(参数列表){方法体}
• 三种定义方法的方式:
  • function 方法名(参数列表){方法体}
  • let 方法名 = function(参数列表){方法体}
  • let 方法名 = new Function("参数1","参数2","方法体");

和页面相关的方法

• 通过选择器获取页面中的元素对象

  let 元素对象 = document.querySelector("选择器");

NaN

• Not a Number: 不是一个数, 任何数值和NaN进行任何运算得到的结果都是NaN