js学习

1、js是可以嵌入到html中，是基于对象和事件驱动的脚本语言

特点：（1）交互性

（2）安全性：js不能访问本地磁盘

（3）跨平台：浏览器中都具备js解析器

2、（1）js能动态的修改html和css的代码

（2）能动态的校验数据

网景公司 LiveScript 微软 JScript ECMAScript JavaScript

3、js被引入的方式

（1）内嵌脚本

（2）内部脚本

（3）外部脚本

在不影响功能前提下，js越晚加载越好

js基本语法：

变量 var 弱类型语言

原始数据类型

（1）number：数字类型

（2）string：字符串类型

（3）boolean：布尔类型

（4）null：空类型 object类型

（5）undefined：未定义类型

注意：number、boolean、string是伪对象

typeof 检验类型

类型转换：

numberoolean转换为string：通过toString()

stringoolean转换为number：

parseInt（）

parseFloat（）注意没有parseDouble()

boolean不能转

string可以将数字字符串转换成number 如果“123a3sd5”，转换成123

强制转换

Boolean() 强转成布尔

数字转布尔，非零就是true，零就是false

字符串转布尔非“”（空字符串）就是true，空字符串就是false

Number（）强转为数字

布尔转数字 true转成1 false转成0

字符串转数字不能强转

引用数据类型

java：Object obj = new Object（）；

js：var obj = new Object（）；

var num = new Number();

运算符

（1）赋值运算符

（2）算数运算符

+：遇到字符串就变成连接了

-：先把字符串转换为数字然后进行运算

*和/与-一样，都是先把字符串转换为数字然后再进行运算

1213/100*100 = 1213; //特别注意js中才是这样的

（3）逻辑运算符

只有&& || ，没有& |

（4）比较运算符

===全等：类型与值都要相等

（5）三元运算符

（6）void运算符

<a href="javascript:void(0);">xxx</a> a标签不跳转

（7）类型运算符

typeof：判断数据类型返回我的数据类型

instanceof：判断数据类型是否是某种类型

逻辑语句

var arr = [1,3,5,7,9];

for index in arr

js对象

Number

var numer= new Number(s)

var numer= Number(s)

toString（）：转成字符串

valueOf（）：返回Number对象的基本数值

Boolean

var bool= new Boolean(s)

var bool= Boolean(s)

String

var str = new String(s)

var str = String(s)

属性和方法：

length：字符串的长度

charAt()：返回索引字符

charCodeAt()：返回索引字符unicode

indexOf()：返回字符的索引

split()：将字符按照特殊字符切割为数组

substr()：从起始索引号提取指定数目的字符串

substring()：提取两个指定索引号之间的字符

toUpperCase()：转大写

（4）Array

var arr= new Array()

var arr=new Array(size) 超出长度后自动扩展

var arr= new Array(element0, element1, element2, ..., elementn)

var arr = [];

var arr = [1,2,3];

var arr=[5] 在js中是没有的

length

join()

pop()

push()

reverse()

sort() 按照字符串字典顺序进行排序

Date

创建方式：

var myDate = new Date()

var myDate = new Date(毫秒值) //代表从190-1-1起到的毫秒

getFullYear()：年

getMonth()：月 0-11

getDay()：星期 0-6

getTime():

toLocal String（）：获得本地时间格式

Math

RegExp

创建方式：

var reg = new RegExp(pattern)

var reg = /^正则规则$/

规则的写法：

[0-9] d 代表数据 D 非数字

[A-Z]

[a-z]

[A-z]

w 查找单词字符

W 查找非单词字符

s 查找空白字符

S 查找非空白字符

+ 出现至少一次

* 出现0次或多次

？出现0次或1次

{5} 出现5次

{2,8} 2到8次

方法：

test():检索字符串中指定的值，返回true或false

js函数定义的方式

（1）普通方式

语法：function 函数名（参数列表）{函数体}

（2）匿名函数

语法：function（参数列表）{函数体}

var method = function(){

alert("yyy");

};

(3)对象函数

语法：new Function（参数列表，函数体）；

注意：参数名称必须使用字符串形式、最后一个默认是函数体，且函数体需要字符串形式

var fn = new Function("a","b","alert(a+b)");

2、函数的参数

(1)形参没有var修饰

（2)形参和实参个数不一定相等

(3)arguments是个数组，会将传递的实参进行封装

3、返回值

（1）在定义函数的时候不必标明是否具有返回值

（2）返回值仅仅通过return返回就可以了，return后的代码不执行

4、js的全局函数

（1）编码和解码

decodeURI() 解码某个编码的URI

encodeURI() 把字符串编码为URI

decodeURIComponent() 解码一个编码的URI组件

encodeURIComponent() 解码一个编码的URI组件

escape() 对字符串进行编码

unescape() 对由escape()编码的字符串进行解码

三者区别：

进行编码的符号范围不同，实际开发中常使用第一种。

（2）强制转换

Number()

String()

Boolean()

(3) 转成数字

parseInt()

parseFloat()

(4)eval()方法

将字符串当作脚本进行解析运行

js的事件

事件

事件源

响应行为

js的常用事件：

onclick：点击事件

onblur：元素失去焦点

onfocus：元素获取焦点

onchange用户改变域的内容

ondblclick onfocus onkeyup onload onmouseover onreset onsubmit onunload onmouseout

事件的绑定方式：

（1）将事件和响应行为都内嵌到html标签中

（2）将事件内嵌到html中，而响应行为用函数进行封装

（3）将事件和响应行为与html标签完全分离

this关键字

this经过事件的函数进行传递的是html标签对象

<label for="value">
for 属性规定 label 与哪个表单元素绑定
js代码中要用document，必须将它添加到后面，不要放到前面

onmouseover:鼠标悬浮的事件
onmouseout：鼠标离开的事件
css的background-color写到JavaScript代码中要用驼峰命名，backgroundColor
onload事件
window.onload=function(){};等页面加载完毕再执行此事件
3、阻止事件的默认行为
  IE:window.event.returnValue = false;  //阻止默认的事件
  W3c(火狐谷歌):传递过来的事件对象.preventDefault();
  通过事件返回false也可以阻止事件默认行为
4、阻止事件的传播
  IE:window.event.cancelBubble = true;
  W3c:传递过来的事件对象.stopPropagation();
  if(e&&e.stopPropagation)     调用传入参数event
  {
      e.stopPropagation();
  }else
  {

      window.event.cancelBubble = true;js的bom

(1)window对象
  弹框的方法
  提示框：alert("提示信息");
  确认框: confirm("确认信息");
  输入框：prompt("请输入密码");返回值就是输入的值
open方法
  window.open("url地址");
定时器：
  setTimeout(function,毫秒值);在某个毫秒值后执行函数
  clearTimeout(定时器名称);
  setInterval(function,毫秒值);
  clearInterval(定时器名称);
（2）location
   location.href="url地址";
（3）history
   back() 上一页
   forward() 下一页
   go()跳转到哪一页
js的dom
1、理解一下文档对象模型
   html文件加载到内存之后会形成一颗dom树，根据这些节点对象可以进行脚本代码的动态修改。
   在dom树种，一切皆为节点对象。
2、dom方法和属性
   查找元素节点
   getElementById()
   getElementsByName()
   getElementsByTagName()
查看是否存在子节点
  hasChildNodes()
元素节点、文本节点、属性节点，每个节点都有nodeName、nodeType  只读属性

Node.ELEMENT_NODE ---1  元素节点
Node.ATTRIBUTE_NAME ---2  属性节点
Node.TEXT_NODE    ---3   文本节点
nodeValue，返回给定节点的值  元素节点返回值是null    可读可写
<p id="pid">wenben</p>
var textNode = document.getElementById("pid").firstChild;
var p = node.getAttributeNode("id"); 根据属性来获得属性节点，不能写属性值
firstChild/lastChild
childNodes表示父节点下所有的子元素（数组）
替换节点
replaceChild()
element.replaceChild(newchild,oldchild)
获取父节点 parentNode
查找属性值
getAttribute(attributeName)
setAttribute(attributeName,attributeValue)
createElement()
createTextNode()
appendChild()
插入节点
insertBefore()
element.insertBefore(newNode,targetNode)
DOM没有提供insertAfter()方法
nextSibling 下一个兄弟
removeChild()删除
innerHTML
Ajax
function getXMLHttpRequest(){
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
       xmlhttp = new XMLHttpRequest();
    }else
    {
       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xmlhttp;
}

window.onload = function()
{
     var req = getXMLHttpRequest();
     req.onreadystatechange = function()
     {
       if(req.readyStae == 4)
       {
             if (req.status == 200)
              {
                  alert(req.responseText);
              }
       }
      }
     req.open("get","${pageContext.requset.contextPath}/servlet/servletDemo1");
     req.send(null);
}
onblur 事件会在对象失去焦点时发生