Web前端学习-day03-JavaScript

发布于:2023-01-04 ⋅ 阅读:(198) ⋅ 点赞:(0)

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

本文含有隐藏内容,请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到