JavaScript

javaEE-3.JavaScript

1.概述

指网页的行为

特点

• 脚本语言，无需编译
• 基于对象，弱类型语言
• 交互性，可以与用户交互
• 安全性，只能在浏览器内运行
• 跨平台，只要有浏览器即可，与平台无关

2.html中引入js

通过

引入外部的 js 文件

• 通过script标签引入外部的js文件
  【此标签不能自闭，也不能写其他js内容】

3.语法

注释

• //：单行注释
• /* */ ：多行注释

数据类型

• 基本数据类型

  • 数值类型（number） 包装类：Number

    • 在js中，所有的数值底层都是浮点型，在需要的时候会在整型和浮点型之间自动转换

  • 字符串类型（string） 包装类：String

    • 通常用单引号或者双引号引起来

  • 布尔类型（boolean） 包装类：Boolean

    • 值为true和false

  • undefined

    • 未定义，如果声明了一个变量但是没有初始值，该变量就是undefined

  • null

    • 表示空，通常作为返回值使用

变量的定义

• 在js中，变量不区分类型，所有的变量都是通过var关键字声明，因此js是一门弱语言

运算符

• “”和“=”

  • “==”：在比较时，如果两端数据类型不同会先转换数据类型再比较
  • “===”：在比较时，如果两端数据类型不同则直接返回false

• typeof

  • 判断变量的数据类型

• delete

  • 删除数组中的元素或者对象的属性

语句

• if条件语句

• 循环语句

  • while（）{}
  • do{} while（）
  • for（）{ } 【注意】：js不支持增强for循环

函数

• 函数的定义：

  • function 函数名(形参列表){

       函数体
    

}

• 函数的调用

  • 函数名(实参列表)

数组

• 创建

  • var arr1 = new Array(10)
  • var arr2 = [“abc”,123,true]

• 注意

  • 数组可以存放任意类型的数据
  • 如果一个位置没有元素，则该位置的值为undefined
  • 数组的长度可以任意改变

API

• String对象

  • match(regexp)：返回正则表达式匹配的值
  • replace(regexp,replaceStr)：根据正则表达式匹配并替换字符串
  • search(regexp)：查找第一次匹配到正则的位置

• 正则对象

  • 创建

    • var reg1 = new RegExp(“java”,“ig”)
    • var reg2 = /java/ig

  • 标识符

    • i：ignoreCase，忽略大小写
    • g：global，全局查找
    • ^：从头匹配
    • $：从尾部匹配

  • 方法

    • test(str)：检查字符串是否匹配正则，返回boolean

• Array对象

  • length属性：返回或设置数组的长度
  • sort()：根据字典顺序排序

• Date对象

  • 创建

    • var date1 = new Date() 创建当前时间
    • var date2 = new Date(年,月,日,时,分,秒) 指定时间

• Math对象

  • 无需创建，可以直接调用身上的方法
  • ceil()：向上取整
  • floor()：向下取整
  • round()：四舍五入
  • random()：生成0-1之间的随机数

• 全局对象

  • 全局对象没有语法，直接调用方法即可

自定义对象

• 格式

  • var person = {

    “name”:“zhangsan”,

    “age”:18,

    …

}

4.DHTML

概述：动态的html

• DHTML并非一门新技术，而是将现有的html、css、js整合在一起形成的技术

• 分为BOM、DOM

  • BOM：浏览器对象模型
  • DOM：文档对象模型

BOM

• window对象

  • 是全局对象，即方法可以直接调用

  • 事件

    • onclick：点击事件
    • onfocus：获得焦点事件
    • onblur：失去焦点事件
    • onload：文档就绪事件，整个html加载完后触发

  • 方法

    • alert()—弹出提示框
    • confirm()—弹出确认框，返回boolean

DOM

• 获取元素

  • getElementById(“id值”)—根据id值获取元素
  • getElementsByName(“name属性值”)—根据元素的name属性值返回多个相同name属性元素组成的数组
  • getElementsByTagName(“元素名”)—根据元素的名称获取多个相同元素组成的数组
  • value属性：获取或设置元素的属性
  • innerText：获取或设置元素的文本【部分浏览器不支持】
  • innerHTML：获取或设置元素的html内容

• 元素的增删改

  • createElement(“div”)—创建一个指定名称的元素
  • appendChild(newDiv)—追加子元素
  • removeChild(ele)—删除子元素
  • replaceChild(newDiv,oldDiv)—替换子元素
  • insertBefore(newDiv,oldDiv)—在某个子元素前插入一个新的元素
  • cloneNode([boolean])—克隆元素 参数默认为false，表示只克隆元素本身，如果为true，则会连同子元素一起克隆