JavaWeb系列笔记三——JavaScript

JavaScript

• 概念：一门客户端脚本语言
• 功能：可以用来增强用户与html页面的交互过程，可以用来控制html元素，让页面有一些动态的效果，增强用户的体验

ECMAScript：客户端脚本语言的标准

基本语法

• 与html结合方式
  • 内部JS：定义

注意：

• <script>可以定义在html页面的任何地方，但是定义的位置会影响执行顺序
• <script>可以定义多个

注释

• 单行注释：//注释内容
• 多行注释：/注释内容/

数据类型：

• 原始数据类型(基本数据类型）
  • number：数字。整型/小数/NaN（not a number一个不是数字的数字类型）
  • string：字符串。字符串"abc" “a” ‘abc’
  • boolean：true和false
  • null：一个对象为空的占位符
  • undefined：未定义。如果一个变量没有给初始值，则会被默认赋值为undefined
• 引用数据类型：对象

变量：一小块存储数据的内存空间

• Java语言是强类型语言，而JavaScript是弱类型语言
  • 强类型：在开辟变量存储空间时，定义了空间将来存储的数据类型。只能存储固定类型的数据
  • 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据
• 语法：
  • var 变量名 = 初始化值;
• typeof运算符：获取变量的类型
  • null运算后得到的是object

运算符

• 单目运算符
• 算术运算符
• 赋值运算符
• 比较运算符
• 逻辑运算符
• 三元运算符

流程控制语句

• if…else…
• switch:
  • 在java中，switch语句可以接收的数据类型：byte int short char,枚举,String

switch(变量):
    case 值:

• 在JS中，switch语句可以接收任意的原始数据类型
• while
• do…while
• for

JS特殊语法

• 语句以；结尾，如果一行只有一条语句则；可以省略（不建议)
• 变量的定义用var关键字，也可以不使用
  • 用：定义的变量是局部变量
  • 不用：定义的变量是全局变量（不建议）

基本对象

函数(方法)对象

• 创建

//第一种方式
var fun = new Function(形式参数列表,方法体);

//第二种方式
function 方法名(形式参数列表）{
	方法体
}

//第三种方法
var 方法名 = function(形式参数列表){
	方法体
}

• 方法
• 属性：
  • length：代表形参的个数
• 特点
  • 方法定义：形参的类型不用写，返回类型也不写
  • 方法是一个对象，如果定义名称相同的方法，会覆盖
  • 在JS中，方法的调用只与方法的名称有关，与参数列表无关
  • 在方法声明中，有一个隐藏的内置对象（数组）arguments，封装所有的实际参数
• 调用
  • 方法名称（实际参数列表）

数组列表

• 创建

var arr1 = new Array(元素列表);
var arr2 = new Array(默认长度);
var arr3 = [元素列表];

• 方法
  • join(参数)：将数组中的元素按照指定的分隔符拼接为字符串
  • push()：想数组的末尾添加一个或更多元素，并返回新的长度
• 属性
  • length：数组的长度
• 特定
  • Js中数组元素的类型可变
  • Js中数组的长度可变

日期对象

• 创建

var date = new Date();

• 方法
  • toLocateString()：返回date对象对应的本地时间字符串格式
  • getTime()：获取毫秒值。返回当前日期对象描述的时间到1970年1月1日零点的毫秒值

数学对象

• 创建
  • 特点：Math对象不用创建，直接使用

Math.方法名();

• 方法：
  • ramdom()：返回0~1之间的随机数。含0不含1
  • ceil(x)：对数进行上舍入
  • floor(x)：对数进行下舍入
  • round(x)：对数四舍五入为最接近的整数
• 属性
  • PI：圆周率

正则表达式对象

• 正则表达式：定义字符串的组成规律
  • 单个字符:[]
    如：[a],[ab],[a-zA-Z0-9]
    特殊符号表示特殊含义的单个字符
    \d：单个数字字符[0-9]
    \w：单个单词字符[a-zA-Z0-9]
  • 量词符号
    ？：表示出现0次或1次
    *：表示出现0次或多次
    +：出现1次或多次
    {m,n}：表示m<= 数量 <= n
    • m如果缺省：{，n}：最多n次
    • n如果缺省：{n，}：最少m次
  • 开始结束符号
    • 开始：^
    • 结束：$
• 创建

var reg = new RegExp("正则表达式");
var reg = /正则表达式/;

• 方法
  • test(参数)：验证指定的字符串是否符合正则定义的规范

BOM

• 概念：Browser object Model 浏览器对象模型
• 组成：
  • Window：窗口对象
  • Navigator：浏览器对象
  • Screen：显示器屏幕对象
  • History：历史记录对象
  • Location：地址栏对象

Window

• 创建
• 方法

//与弹出框有关的方法
//显示带有一段消息和一个确认按钮的警告框
alert();
//显示带有一段消息以及确认按钮和取消按钮的对话框，用户点击确认：true，点击取消：false
confirm();
//显示可提示用户输入的对话框，返回值：获取用户输入的值
prompt();

//与打开有关的方法
//关闭浏览器窗口.谁调用我，我关谁
close();
//打开一个新的浏览器窗口，返回新的Window对象
open();

//与定时器有关的方法
//在指定的毫秒数后调用函数或表达式
//参数：js代码或者方法对象，毫秒值
//返回值：唯一标识，用于取消定时器
setTimeout();
//取消由setTimeout方法设置的timeout
clearTimeout();
//按照指定的周期来调用函数或计算表达式
setInterval();
//取消由setInterval()设置的timeout
clearInteval();

• 属性
  • 获取其他BOM对象
    • history
    • location
    • Navigator
    • Screen
  • 获取DOM对象
    • document
• 特点
  • Window对象不需要创建可以直接使用：window.方法名();
  • window引用可以省略：方法名();

Location

• 创建（获取）
  • window.location
  • location
• 方法
  • reload()：重新加载当前文档，刷新
• 属性
  • href：设置或返回完整的URL

History

• 创建
  • window.history
  • history
• 方法：
  • back()：加载history列表中的前一个URL
  • forword()：加载history列表中的下一个URL
  • go(参数)：加载history列表中的某个具体页面
    • 参数：正数：前进几个历史记录；负数：后退几个历史记录；
• 属性
  • length：返回当前窗口历史列表的URL数量

DOM

• 概念：Document Object Model文档对象模型
• 功能：可能告知html文档的内容
• 获取页面标签（元素）对象：Element
  • document.getElementById(“id值”)：通过元素的id获取元素对象
• 操作Element对象：
  • 修改属性值：
    • 明确获取的对象是哪一个
    • 查找API文档，找其中有哪些属性可以设置
  • 修改标签体内容
    • 属性innerHTML
    • 获取元素对象
    • 使用innerHTML属性修改标签体内容

核心DOM模型

Document：文档对象

• 创建（获取）：在html dom模型中可以使用window对象来获取
  • window.document
  • document
• 方法
  • 获取Element对象：

//根据id属性值来获取元素对象，id属性值一般唯一
getElementById();

//根据元素名称获取元素对象们，返回值是一个数组
getElementByTagName();

//根据Class属性值获取元素对象们，返回是一个数组
getElementByClassName();

//根据name属性值获取元素对象们，返回值是一个数组
getElementByName();

• 创建其他DOM对象

createAttribute(name);
createComment();
createElement();
createTextNode();

• 属性
  • Element：元素对象
    • 获取/创建:通过document来获取和创建
    • 方法：
      1. removeAttribute()：删除属性
      2. setAttribute()：设置属性
  • Node：节点对象，其他5个的父对象
    • 特点：所有dom对象都可以被认为是一个节点
    • 方法：
      • CRUD dom树
        • appendChild()：向节点的子节点末尾添加新的子节点
        • removeChild()：删除（并返回）当前节点的指定子节点
        • replaceChild()：用新节点替换一个子节点
    • 属性：parentNode返回节点的父结点

HTMLDOM

HTML DOM

1. 标签体的设置和获取：innerHTML
2. 使用html元素对象的属性
3. 控制元素样式

• 使用元素的style属性来设置
• 提前定义好类选择器的样式，通过元素的className属性来设置class属性值