WEB日常4

JavaScript

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

语言特点 :

属于弱类型语言:

java: String name = "tom" int age =18; name=30; 报错

JavaScript : let name ="tom" let age=18; name=30; 不会报错

属于脚本语言 不要要编译直接解析执行

基于面向对象

安全性强: JS语言只能访问浏览器内部的数据,浏览器以外的程序或磁盘中的数据禁止访问

交互性强: 因为JS语言是嵌入在html页面中的语言,随着页面一起传递到客户端,运行在客户

的语言, 离用户更近一些,Java语言是运行在服务器的语言 所以JS语言交互性更强

如何在html页面中添加JS语言

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

事件: 系统给提供的特定时间点.

点击事件: 在用户点击元素时触发的时间点

内部:在html页面中任意位置添加script标签 在标签体内写JS代码

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

 变量  数据类型 运算符  各种语句   方法 面向对象

变量

JavaScripth属于弱类型语言

- java: String name = "tom"; int age =18 ;  name = 30 ; 报错

- javascript : let name  = "tom"; let age=18 ; name= 30; 不会报错

let 和 var 关键字的区别 

使用let声明的变量 作用域和Java语言一样

使用var声明的变量 相当于声明的是一个全局变量

举例 : 

java : 

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

int  y=i+1;

}

int z=y-i; 报错 : i 超出了作用域

JavaScript:

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

let y=i+1;

}

let z=y-i; 不会报错,但是y和i 是访问不到的

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

var y=i+1;

}

var z=y-i; y和i 是可以访问的

数据类型

JavaScript中只有引用类型(对象类型)

常见的对象类型:

number : 数值类型,相当于java中所有数值类型的总和

string: 字符串,可以用单引号或双引号修饰'tom' "tom"

boolean : 布尔值,true/false

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

获取变量类型的方式 : typeof 变量

运算符

算术运算符 :  +-/% ,JS除法会自动根据结果转换整数还是小数

Java : int x=5 ; int y=2  x/y=2;
js: let x=5; let y = 2 ; x/y=2.5;

关系运算符 : ><>=<= != ==和===

== 先统一等号两边的类型 在比较值"666"==666 true

===先比价类型,类型相同之后在比较值 "666"===666 false

逻辑运算符 : && ||  !

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

各种语句

if  else

while

do  while 

for

switch case

方法

Java : public 返回值类型 方法名(参数列表){方法体}

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

常见的四种方法:

无参无返回值

无参有返回值

有参无返回值

有参有返回值

声明方的三种方式:

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

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

let 方法名 = new Function(参数1  参数2  方法体)

NaN

Not a Number : 不是数

isNaN(变量) 判断 变量是否是NaN, true 代表是NaN false代表不是NaN

JavaScript中的对象分类

内置对象: number string boolean等

BOM : Browser Object Model 浏览器对象模型 包含和浏览器相关的容

DOM : Document  Object Model   文档对象模型, 文档指html标签,包含和页面相关内容

BOM浏览器对象模型

包含和浏览器相关内容

window对象:该对象的属性和方法称为全局属性和全局方法, 访问时可以省略掉window

window对象中常见的方法

alert("xxx") 弹出提示框

confi("xxxx") 弹出确认框

prompt("xxx")弹出文本框

parselnt()将字符串或小数转成整数

parseFloat()将字符串转成整数或小数

isNaN()判断变量是否是NaN

console.log() 浏览器控制台输出

let timer = setlnterval(方法 , 时间间隔 )定时器

clearlnterval(timer) 停止定时器

setTimeout(方法,时间间隔) 只执行一次的定时器

Window对象中常见的属性

location 位置

1 location.href 获取或修改浏览器的请求地址

2 location.reload()刷新页面

3 location.search 获取浏览器地址栏中的参数

history 历史(指当前浏览器页卡的历史,关闭则清除)

1 history.length历史页面数量

2 history.back()返回上一页面

3 history.forward() 前往下一页面

4 history.go(n) n是正值前进 负值后退  0代表刷新

DOM 文档对象模型

和页面相关内容

1 通过元素的id获取元素对象

let元素对象=document.getElementByld("元素id")

2 通过CSS中接触到的选择器获取元素对象 

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

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

元素对象 innerText //获取

元素对象 innerText="xxx"; //修改

4 获取和修改表单中的控件的值

控件.value //获取

控件.value="xxx" //修改

5 创建元素对象

let 元素对象=document.createElement("标签名")

6 添加元素对象

document.body.appendChild(元素对象);

7 给元素的属性赋值

元素对象.src=" xxxx.jpg";

元素对象.属性="值";