阶段02JavaWeb基础day02&03JavaScript

javascript知识体系
ECMAScript
javascript与html结合方式
内部: <script type="text/javaScript">***</script>
外部文件引入: <script type="text/javaScript" src="外部js路径（***.js）" ></script>
javascript数据类型
原始数据类型
null
string
number
boolean
undefined
当初始化一个变量,并且没有为该变量赋值时,系统会默认初始化为undefined
对象的占位符,当我们声明一个变量,并准备在之后为该变量赋值为对象类型时,我们可以先为该变量赋值为null
对象数据类型
javascript这两种数据类型 在内存中的状态 与 java中 一模一样
基本语法
javascript是弱类型语言，声明变量时不用声明变量类型. 全都使用var关键字；
一行可以声明多个变量.并且可以是不同类型（区别java语法）；
声明变量时 可以不用var. 如果不用var 那么它是全局变量；(推荐使用var)
变量命名，首字母只能是 字母、下划线、$美元符 三选一；
命名推荐 匈牙利标记法；
每行结束可以不加分号。没有分号会以折行符作为每行的结束（推荐加分号）；
注释：支持多行注释和单行注释。 /* */ 、 //
EcmaScript语句
if语句
for语句
while语句
do-while语句
swith语句
注意：语法规则 与 java 一样
javascript运算符
一元运算符
赋值运算符“=”
正数“+”
特殊案例：

+"10" => 10（字符串类型转换成数字类型）

+"abc12" => NaN （NaN无效数字）

NaN特点：参与所有运算都返回false，除了 != ;如：NaN != NaN 返回true
Boolean运算符
！、&&、||
转换规律：(弱类型)
string 向 boolean 转换 ： 除了空字符串("") 转换为false , 其他都为true;
number 向 boolean 转换 ： 除了 +0 -0 和 NaN 转换为false, 其他都为true;
null 向 boolean 转换 ： false;
undefined 向 boolean 转换 ： false;
Object 向 boolean 转换 ： true;
关系运算符
>、<、>=、<=
两个数字类型进行比较 : 直接比较即可.
一边是其他类型 一边是数字类型 : 将其他类型试图 转换为数字类型. 然后进行比较.
两边都是字符串时 : 从最高为比较 asc码. 如果相同 继续向后比较.
等性运算符
==、！=、===
特殊说明：

undefined == null : true （规定为true）

"NaN" == NaN : false

NaN != NaN : true

true == 1 : true （true转换为 1）

false == 0 : true （false转换为0）

true == 2 : false

"10" == 10 : true

null == 0 : false （null 转换为NaN）

undefined == 0 : false （undefined 转换为NaN）
全等运算符
比较的时候 包括变量的类型也必须相同
ECMA对象分类（两类）： 本地对象(native object) 和 主机对象(host object)！！

注意：

以下介绍的都是本地对象 (native object)

主机对象(host object) 包括BOM和DOM
本地对象
Object
Object对象是所有对象的超类. Object中的属性和方法,子类中都有；
toString()
打印一个对象时,默认调用的就是toString方法(跟java一样)
Function
创建方式三种：

1、function fun1(a,b){alert(a+b)}

2、var fun2 = new Function("a","b","alert(a+b)");

3、var fun3 = function(a,b){alert(a+b);};
调用时的特性：调用时 只看函数名称 跟参数没有关系。
函数的内置对象
arguments : 函数运行时的实际参数列表
arguments.length : 获得实际参数个数
arguments[n] : 获取第n个实际参数
内置对象的应用 ： 使用arguments完成重载功能！！
return 关键字
方法返回结果
结束当前方法运行
void 运算符：拦截方法返回值。
以下三个对象，是三个原始类型的包装对象
说明：

三个原始类型是伪对象，可以直接使用对应包装对象的方法！

这三个包装对象的构造方法可以用来做类型转换！！
Number
Boolean
String
属性：
length ： 返回字符串长度
方法：
不常用的方法(了解)：
anchor( ) : 创建 HTML 锚
big( ) : 用大号字体显示字符串
sup( ) : 把字符串显示为上标
sub( ) : 把字符串显示为下标
重要的方法：
charAt( ) : 返回在指定位置的字符
charCodeAt( ) : 返回在指定的位置的字符的 Unicode 编码
indexOf( ) : 检索字符串
lastIndexOf( ) : 从后向前搜索字符串
subString( ) : 提取字符串中两个指定的索引号之间的字符
slice( ) : 提取字符串的片断，并在新的字符串中返回被提取的部分 ( 支持负数 )
与正则结合的方法：
match( ) : 找到一个或多个正则表达式的匹配(了解)
search( ) : 检索与正则表达式相匹配的值(了解)
split( ) : 把字符串分割为字符串数组
replace( ) : 替换与正则表达式匹配的子串
Array
创建方式：
var arr1 = [1,2,3,4]; //初始化元素 var arr2 = [];
var arr2 = new Array(1,2,3,4); //初始化元素
//构造函数只填一个参数并且是数字的话,这个数字是数组的初始化长度

var arr3 = new Array(3);
属性：
length ： 获得数组长度
方法：
concat( ) 将两个数组结合成一个数组
join( ) 按照参数的连接符连接元素返会连接后的字符串
pop( ) 弹出并返回最后一个元素
push( ) 向数组末尾添加一个元素并返回数组的最新长度
reverse( ) 将数组元素反转
sort( ) 将数组排序 默认排序规则是按照字符串比较。

如果希望自定义比较规则 需要准备一个比较器(函数)！！
特性
1.数组中的类型,可以任意.不要求是同类型的.
2.数组的长度,使用到哪就有多长.
Date
构造方法：new Date( ) 获取当前时间
方法：
1.new Date() 获取当前时间

2.getFullYear() 获取年份

3.getMonth() 获取月份注意 1月份结果为0

4.getHours() 小时

5.getDate() 日期

6.getMinutes() 分钟

7.getSeconds() 获取秒

8.getDay();获得星期

9.getTime() 获取毫秒值.

10.toLocalString() 获取本地的时间格式字符串.
RegExp
创建方式：
var reg1 = new RegExp("正则表达式","gi");

参数1：正则表达式 、 参数2：匹配模式

g 全局匹配 i 匹配是忽略大小写
var reg2 = /正则表达式/gi;
方法：
test( ) 按照正则的规则匹配某个字符串。 匹配正确返回true 错误返回false
与string结合的4个方法
本地对象(native object)中有一部分特殊的对象： 内建对象 (build in object)

特点: 不需要创建实例，直接使用即可。
Global
方法：
encodeURI( ) 对字符串进行编码 只对中文进行编码
decodeURI( ) 对字符串进行解码
encodeURIComponent( ) 对字符串进行编码 范围比encodeURI要大。

包括一些特定字符 例如 / , : , ? , &
decodeURIComponent( ) 对字符串进行解码
escape( ) 现已过时
unescape( ) 现已过时
isNaN( ) 对某个变量进行判断，是否是NaN。因为NaN == NaN ： false；
parseInt( ) 对字符串向数字(整数)转换
parseFloat( ) 对字符串向数字(小数)转换；

以上这两种转换，在转换时是从左到右寻找可以被转换的字符依次转换。
Math
属性：
PI
方法：
random( ) 获得0~1之间的随机数
round( ) 四舍五入取整
min( )/max( ) 返回两个参数中的最小/最大值
pow( 参数1,参数2 ) 获得参数1的参数2次方的值.
BOM(Browser Object Model)
功能上讲: 控制浏览器窗口的. 使用上讲: 与Global 类似.window对象同样不需要创建对象,直接使用即可.
window
一个window对象代表一个html文档。
属性：
self : 自己的所在窗口的window对象
parent : 指向自己父窗口的window对象
top : 指向自己顶层窗口的window对象
frames : 获得所有自己子窗口的window对象数组
opener : 如果一个窗口是使用window.open方法打开的,

那么在新打开的窗口中 要获得打开自己窗口的window对象使用该属性
方法：
alert( ) 提示框
confirm( ) 确认框，返回值是 true / false
prompt( ) 提示输入框，返回值是 用户输入的值
open( ) 打开新窗口

参数1: 新窗口的地址;

参数2(用的比较少): 新窗口的名字;

参数3: 新窗口打开时的一些参数(窗口的宽 高 有没有滚动条, 地址栏,可否调整大小)
close( ) 关闭当前window对象(关闭当前窗口)
setInterval( ) 设置定时器方法(循环执行)

参数1: 要执行的函数;

参数2: 间隔的事件 (毫秒);

返回值是定时器的ID;
clearInterval( ) 停止一个定时器

参数: 要停止的定时器的ID
setTimeout( ) 设置定时器方法(只执行一次)

参数1: 要执行的函数;

参数2: 间隔的事件 (毫秒);

返回值是定时器的ID;
clearTimeout( ) 停止一个定时器.

参数: 要停止的定时器的ID
history
属性：
length ： 该窗口访问过的 页面个数
方法：
back( ) 后退
forward( ) 前进
go( ) 跳转

参数接受一个整数;

0代表当前页面;

1代表下一页面;

-1代表上一页面;
location
属性：
href 当前窗口的地址。可以用来做跳转
方法：
reload( ) 重新加载当前页面 ！刷新
DOM(Document Object Model)
DOM : Document Object Model (文档对象模型)

整合javascript和html、css，控制html文档行为 ;

DOM就是把页面当中所有内容全部封装成对象 ;

HTML文档中万物皆对象 ;
DOM五类对象
Document（掌握）
Element（掌握）
Attribute（理解）
Text（理解）
Common（理解）
DOM中5类对象，抽象出的父类：Node
自身属性：
nodeName（了解）
nodeValue（了解）
nodeType（了解）
导航属性
firstChild（了解）
lastChild（了解）
parentNode（掌握）
nextSibling（了解）
previousSibling（了解）
childNodes（了解）
Document
获取（文档下的）元素对象
getElementById( )
getElementsByClassName( )
getElementsByTagName( )
getElementsByName( )
Element
获取（该元素下的）元素对象
getElementsByClassName( )
getElementsByTagName( )
事件
javascript是基于对象和事件驱动的脚本语言。

给Element对象附加事件属性 ;

属性的类型是Function类型 ;
事件类别：
onclick ： 单击时触发
ondblclick ： 双击时触发
onblur ： 失去焦点时触发
onfocus ： 得到焦点时触发
onchange ： 用于表单元素, 当元素被修改时触发
onkeydown ： 当键盘按键被按下时
onmousemove ： 当鼠标移动时触发
onmousedown ： 当鼠标按键按下时触发
onmouseover ： 当鼠标指向时触发
onmouseout ： 当鼠标移出时触发
onsubmit ： 当表单提交时触发
onload ： 只给body标签使用.当页面加载完成后 执行
事件详情获得：
我们获得事件详情要找到“侦探”来知道(事件Event对象)；

Event对象是在事件发生时被创建, 并传递给我们的事件Function中，所以我们直接使用即可；
Event对象
属性：
keyCode ： 按键的ASC码返回值
button ： 鼠标按钮（左中右）
clientX ： 返回当事件被触发时，鼠标指针的水平坐标。
clientY ： 返回当事件被触发时，鼠标指针的垂直坐标。
方法：
preventDefault( ) : 阻止默认关联事件的发生
stopPropergation( ) : 阻止事件的向下传播
页面对象的增删改查
Document对象
createElement( )
Element对象
属性：
innerHTML
方法：
appendChild( ) 追加子节点
removeChild( ) 删除子节点
replaceChild( ) 替换子节点
cloneNode( ) 克隆节点
setAttribute(key,value) 设置属性值
getAttribute(key) 获得属性值
insertBefore() 插入到某元素之前
DHTML（动态网页技术）
整合4门技术 ： DOM HTML CSS JavaScript
用通俗的话说: DHTML就是 对我们的之前学的DOM对象进行增强（增加新的属性、获得方法）.