Web前端学习-day03-JavaScript

溢出设置overflow

• visible显示(默认)

• hidden隐藏

• scroll滚动显示

行内元素垂直对其方式vertical-align

• top上对齐

• middle中间对齐

• bottom下对齐

• baseline基线对齐

显示层级z-index

• 当元素脱离文档流出现层叠显示时undefined可以通过z-index设置显示层级z-index的值越大显示约靠前

• 此样式只能添加给非静态定位的元素undefined静态定位添加无效

JavaScript

• 作用: 给页面添加动态效果

• 语言特点:

  • 基于面向对象的语言

  • 属于弱类型语言

  • 属于脚本语言undefined 不需要编译由浏览器解析执行.

  • 安全性强:JS语言只能访问浏览器内部的数据undefined浏览器以外的禁止访问

  • 交互性强: 由于JS语言是嵌入到HTML页面中undefined最终执行在客户端的浏览器中的语言undefined和用户是直接接触undefined Java语言是运行在服务器的语言undefined 用户需要进行交互的话必须通过网络才可以undefined所以JS语言的交互性会更强.

变量undefined数据类型undefined运算符undefined各种语句undefined数组undefined方法undefined

变量

• JS语言属于弱类型语言undefined声明变量的时候不需要指定类型

• 通过let或var声明变量

  • let声明的变量undefined作用域和java语言类似

  • var声明的变量undefined作用域是全局的

  • 举例:

    • java:

for(int i=0;i<10;i++){

int j = i+1;

}

int x = i+j; //编译报错undefined 因为i和j超出作用域

• JS-let:

for(let i=0;i<10;i++){

let j = i+1;

}

let x = i+j; // 运行时访问不到i和j 因为超出作用域

• JS-var:

for(var i=0;i<10;i++){

var j = i+1;

}

var x = i+j; // 此时可以访问到i和j的值undefined因为var声明的变量相当于是全局的

数据类型

• JavaScript中只有对象类型

• 常见的对象类型:

  • number数值: 相当于Java中所有数值类型的总和

  • string字符串: 可以用单引号或双引号修饰

  • boolean布尔值: true/false

  • undefined未定义: 当变量只声明不赋值的时候变量为未定义类型

• typeof 变量; 获取变量类型

运算符

• 算术运算符+ - * / %

  • 除法和java不一样undefined JS语言会自动根据结果转换整数或小数

- 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=4 z=2

• 关系运算符 > < >= <= != == ===

  • ==和===区别: ==先统一等号两边变量的类型 再比较值undefined ===先比较两个变量的类型undefined类型一致后再比较值. "666"==666 true "666"===666 false

• 逻辑运算符: && || !

• 赋值运算符: = += -= *= /= %=

• 三目运算符: 条件?值1:值2

各种语句

• if else

• while

• for

• switch case

如何在HTML页面中添加JS代码

• 三种添加方式:

  • 内联: 在标签的事件属性中添加js代码undefined 事件触发时执行

  • 内部: 在页面的任意位置写script标签undefined标签体内写js代码

  • 外部: 在单独的js文件中写js代码undefined 在html页面中通过script标签的src属性引入

方法

• java: public void 方法名(参数列表){方法体}

• JavaScript:

  • function 方法名(参数列表){方法体}

  • let 方法名 = function(参数列表){方法体}

  • let 方法名 = new Function("参数1"undefined"参数2"undefined"参数3"undefined"方法体");

和页面相关的方法

1. 通过选择器找到页面中的元素对象

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

1. 获取和修改元素的文本内容

元素对象.innerText = "xxxx"; 修改

元素对象.innerText 获取

1. 获取和修改控件的值

文本框对象.value = "xxx"; 修改

文本框对象.value 获取

NaN

• Not a Numberundefined 代表不是一个数字

• isNaN(变量) 返回值true代表是NaN false代表不是NaN

• NaN和任何数值进行任何运算 结果都是NaN