Web-JavaScript

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(“选择器”);

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

   元素对象.innerText 获取

   元素对象.innerText = “xxx”; 修改

3. 获取或修改控件的值

   控件对象.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(方法,时间间隔) 开启定时器
  • (timer) 停止定时器
  • setTimeout(方法,时间间隔) 开启只执行一次的定时器