Web04-JavaScript

目录

JavaScript

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

变量

数据类型

运算符

各种语句

方法

和页面相关的方法

NaN

JavaScript代码出错排错步骤:

JavaScript对象分类

BOM浏览器对象模型

---

JavaScript

• 简称JS, 作用:是给页面添加动态效果

• 语言特点:

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

  • 基于面向对象

  • 弱类型语言

  • 安全性强:JS语言由于是运行在客户端电脑上的语言,所以JS语言只能访问浏览器内部的数据,浏览器以外的数据是禁止访问的.

  • 交互性强: 因为JS语言是嵌入到html页面中,最终执行在客户端电脑里面的,和用户近距离接触,所以交互性更强.

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

• 三种引入方式:

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

    • 事件: 系统给提供的一些特定的时间点

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

  • 内部: 在html页面中的任何位置添加script标签,在标签里面写JS代码

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

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

变量

• JS语言属于弱类型语言

  • Java强类型: int x=10; String s = "abc"; x="xxx";报错

  • JS弱类型: let x=10; let s = "abc"; x="xxx";正常 不报错

• let和var声明变量的区别

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

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

    • java:

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

int j = i+1;

}

int x = j+i; //报错 j和i超出作用域

• • JS:let

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

let j = i+1;

}

let x = j+i; //不报错但是访问不到j和i(超出了作用域)

• • JS:var

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

var j = i+1;

}

var x = j+i; //不报错而且可以访问到j和i的值

数据类型

• JS语言中只有对象类型

• 常见的对象类型包括:

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

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

  • boolean布尔值: true/false

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

• typeof 变量; 获取变量的类型

运算符

• 算术运算符: + - * / %

  • 除法会自动根据结果转换成整数或小数

java: int x=5; int y=2; x/y=2

JS: let x=5; let y=2; x/y=2.5 x=6 x/y=3

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

  • ==: 先统一两个变量的类型再比较值

  • ===:先比较类型, 类型相同之后再比较值

"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","方法体");

和页面相关的方法

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

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

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

元素对象.innerText 获取

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

1. 获取或修改控件的值

控件对象.value 获取

控件对象.value="xxx"; 修改

NaN

• Not a Number 不是一个数

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

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

JavaScript代码出错排错步骤:

• 通过浏览器F12 调出控制台, 看控制台中的错误提示, 然后点击超链接找到对应的代码

JavaScript对象分类

• 内置对象, 包括: string,boolean,number...

• DOM,Document Object Model文档对象模型, 包含和页面相关的内容

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

BOM浏览器对象模型

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

• window中的常见方法:

  • alert("xxx") 弹出提示框

  • confirm("xxx")弹出确认框

  • prompt("xxx") 弹出文本框

  • isNaN(变量) 判断变量是否是NaN

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

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

  • let timer = setInterval(方法,时间间隔) 开启定时器

  • clearInterval(timer) 停止定时器

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