JavaScript
①边学边练
一、实现左右框体之间互相移动
这个功能实现的原理是在表格单元中定义两个select选项并设置相应的选项框。
1.首先分别获得两个选框中的元素，并定义添加按钮的单击事件，获得选中选项的索引作为向第二个选项框中添加选项的appendChild函数参数。
var firstSelectElement = document.getElementById("first");
var secondSelectElement = document.getElementById("second");
document.getElementById("add").onclick=function(){
var optionChildren = firstSelectElement.getelementsTagName("option");
var index = firstSelectElement.selectedIndex;
secondSelectElement.appendChild(optionChildren[index]);
}
2.实现把左边选框中选项全部添加到右边的选框中。
document.getElementById("add_all").onclick=function(){
var optionChildren = firstSelectElement.getElementsByTagName("option");
var optionLength = optionChildren.length;
for(var i=0;i<optionLength;i++){
secondSelectElement.appendChild(optionChildren[i]);
}
3.双击第一个选框实现自动移动
定义第一个select元素的双击事件函数
firstSelectElement.ondblclick=function(){
var index = firstSelectElement.selectedIndex;
var optionChildren = firstSelectElement.getElementsByTagName("option");
secondSelectElement.appendChild(optionChildren[index]);
}
二、两个选择框之间的省市城市的联动
首先定义两个下拉选框的结构，并在另一个xml文件中定义省和市的选项结构，作为联动的选 项。
1.给ID为province的select元素注册onchange事件
document.getElementById("province").onchange = function(){
var citySelectElement = document.getElementById("city");
var cityOptionElements = citySelectElement.getElementsTagName("option");
for(var i=cityOptionElements.length-1; i>0; i--){
citySelectElement.removeChild(cityOptionElements[i]);
}
}
2.得到xml文档中的选项结构
var xmlDoc = parseXML();
var selectedProvince = this.value;
var xmlProvince;
var xmlProvinceElements = xmlDoc.getElementsByTagName("province");
for(var i = 0; i < xmlProvinceElements.length; i++){
if(selectedProvince == xmlProvinceElements[i].getAttribute("name“）{
xmlProvince = xmlProvinceElements[i];
break;
}
if(xmlProvince!=null){
var xmlCitys = xmlProvince.getElementsByTagName("city");
for (var i = 0; i < xmlCitys.length; i++) {
var optionElement = document.createElement("option");//<option></option>
optionElement.setAttribute("value",xmlCitys[i].firstChild.nodeValue);//<option value="济南"></option>
var textNode = document.createTextNode(xmlCitys[i].firstChild.nodeValue);
optionElement.appendChild(textNode);
citySelectElement.appendChild(optionElement);
}
}
}
三、输入合法信息的验证，（此例太low不便展示）
1.正则表达式限制用户名的组成格式
var pattern = new RegExp("^[a-zA-Z0-9\u4e00-\u9fa5]{5,8}$");
var flag = pattern.test(username);
if(！flag){
alert("登录名必须是5-8为字母数字或汉字");
return false;
}
直接量形式
var pattern = /^[a-zA-Z0-9\u4e00-\u9fa5]{5,8}$/;
var falg = pattern.test(username);
if(!flag)
{
alert("登录名必须是5-8为字母数字或汉字）；
}
var pattern = /^[\w]{6,12}$/;//密码不包含中文字符
四、ajax进行get和post的请求
1.get请求
window.onload=function(){//当页面被全部加在完毕后再执行
//给b1按钮注册事件
document.getElementById("b1").onclick=function(){
//AJAX代码
//得到XmlHttpRequest对象
var xhr = createXmlHttpRequest();
//xhr的readyState改变都会触发onreadystatechange事件
/*
* readyState的取值：
* 0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
* 1 (初始化) 对象已建立，尚未调用send方法
* 2 (发送数据) send方法已调用，但是当前的状态及http头未知
* 3 (数据传送中) 已接收部分数据，因为响应及http头不全，
* 4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
*/
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
//真正的处理
if(xhr.status==200||xhr.status==304){
//服务器正确返回
var data = xhr.responseText;//服务器返回的数据
//把返回的数据写到div中
document.getElementById("d1").innerHTML=data;
}
}
}
//建立与服务器的连接
/*
* oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
* bstrMethod:请求方式。一般使用get或post
* bstrUrl:请求的资源地址：可以绝对或相对路径
* varAsync:是否是异步请求。默认是true。
*/
xhr.open("GET","/ajaxday02/servlet/ServletDemo1?time="+new Date().getTime());
//发送数据
//oXMLHttpRequest.send(varBody); varBody:请求参数
xhr.send(null);
//接收服务器返回的数据
}
}
2.post请求方式
window.onload=function(){
document.getElementById("b1").onclick = function(){
//获取xmlhttpRequest对象
var xhr = createXmlHttpRequest();
//注册状态变化的回调函数
xhr.onreadystatechange = function(){
if (xhr.readyState == 4) {
if (xhr.status == 200 || xhr.status == 304) {
//什么都不做
}
}
}
//初始化xmlhttpRequest对象，即open
xhr.open("POST", "/ajaxday02/servlet/ServletDemo2?time=" + new Date().getTime());
//设置请求消息头，告知服务器，发送的正文数据的类型。
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//发送数据
xhr.send("username=admin&password=123");
}
}
function createXmlHttpRequest(){
var xmlHttp;
try{ //Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
try{ //Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){}
}
}
return xmlHttp;
}
3.ajax实现级联菜单
window.onload=function(){
//得到服务器返回的xml文件
var xhr = createXmlHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200||xhr.status==304){
var xmlDoc = xhr.responseXML；
var xmlProvinceElements = xmlDoc.getElementsByTagName("province");
for(var i=0; i<xmlProvinceElements.length;i++){
var optionElement = document.createElement("option");
optionElement.setAttribute("value",xmlProvinceElements[i].getAttribute("name"));
var textNode = document.createTextNode(xmlProvinceElements[i].getAttribute("name"));
optionElement.appendChild(textNode);
document.getElementById("province").appendChild(optionElement);
}
xhr.open("GET","/ajaxday02/servlet/ServletDemo4?time="+new Date().getTime());
xhr.send(null);
}
}
}
}
五、json格式的前端数据交互
json和xml比较都可用作数据的存储结构。然而他们都有自己的优点和缺点。分别在代码量，解析难度等。
json优势在于JavaScript主场在前端的数据交互中，免去了xml那种闭合标签的繁琐，而且在编写和解析方面更加方便。
1.json的语法规则
JSON 语法是 JavaScript 对象表示语法的子集。
-
数据在键值对中
-
数据由逗号分隔
-
花括号保存对象
-
方括号保存数组
JSON 名称/值对
"firstName":"John"
JavaScript 语句：firstName="John"
2.基础结构
1、对象{key：value,key：value,...}
2、数组["java","javascript","vb",...]字段值的类型可以是 数字、字符串、数组、对象几种。
3.实例
perple对象
{ "programmers": [{ "firstName": "Brett", "lastName": "McLaughlin", "email": "aaaa" }, { "firstName": "Jason", "lastName": "Hunter", "email": "bbbb" }, { "firstName": "Elliotte", "lastName": "Harold", "email": "cccc" }], "authors": [{ "firstName": "Isaac", "lastName": "Asimov", "genre": "sciencefiction" }, { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" }, { "firstName": "Frank", "lastName": "Peretti", "genre": "christianfiction" }], "musicians": [{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" }, { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }]}var people = { "programmers": [{ "firstName": "Brett", "lastName": "McLaughlin", "email": "aaaa" }, { "firstName": "Jason", "lastName": "Hunter", "email": "bbbb" }, { "firstName": "Elliotte", "lastName": "Harold", "email": "cccc" }], "authors": [{ "firstName": "Isaac", "lastName": "Asimov", "genre": "sciencefiction" }, { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" }, { "firstName": "Frank", "lastName": "Peretti", "genre": "christianfiction" }], "musicians": [{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" }, { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }]}; people.programmers[0].lastName;{ id: '100000', text: '廊坊银行总行', children: [ { id: '110000', text: '廊坊分行', children: [ { id: '113000', text: '廊坊银行开发区支行', leaf: true }, { id: '112000', text: '廊坊银行解放道支行', children: [ { id: '112200', text: '廊坊银行三大街支行', leaf: true }, { id: '112100', text: '廊坊银行广阳道支行', leaf: true } ] }, { id: '111000', text: '廊坊银行金光道支行', leaf: true } ] } ] }
②基础回顾
一、函数
1、function是一个函数(多种函数的定义方法，记住一个就可以，和函数定义类似)
function aa(){
}
2、function是一个对象，可以利用该对象的constructor属性找到该对象的构造函数
aa.constructor
3、一个对象（这个对象必须有值，不能是null,undefined）可以动态的添加任何一个属性
这个对象可以通过直接赋值的方式添加相应属性，比如：aa.b=5; aa.bb=a;(a为对象)。
4、一个function同时又是一个构造器函数
new Function（）产生一个对象，所以这个创建函数就是一个构造器。一个对象本身就是一个一个函数，并且是自己的构造函数。
5、任何一个对象都有可能成为任何一个对象的属性
一个对象的属性可包含一个对象。
二、prototype
prototype好像一个可变的容器对象作为一个js对象的属性。
1. prototype是function中的一个属性，也是一个对象
2. prototype是一个json格式的对象，可以动态的往json中添加一些内容
Person.prototype.name = function(){
alert("name");
}
Person.prototype["sex"] = "male";
3 根据构造器可以创建对象，而创建出来的对象就拥有了prototype中的数据
三、继承的封装
四、自定义事件
jquery的事件是可以叠加的，要先解绑在绑定。
1.声明一个事件，把事件绑定到一个dom对象上。
2.找一个事件的触发方式
3.传递参数
③JavaScript的语法基础补充
标签，脚本段，保留关键字和标识符，变量类型。
一：href的属性可以为JavaScript脚本例如：href=“JavaScript：alert（new Date（））”
二：JavaScript区分大小写，
三：整型常量，实型常量，布尔值，字符串常量
四：字符串alert（“111111111111”+
“22222222222222222”）；//换行需要连接符
五：x=1234；没有声明变量直接定义。
运算符
+ - * / % ++ -- += /= > == || && ! >>
一：+运算符的可以用于字符串，但是两个操作数的必须有一个是字符串。
&：逻辑与，二者都为1才为1；与|相反。
^：异或，相同为0，相异为1；
>>:位运算符（不会改变原来变量的值），补位的话要考虑到符号位也就是最高位。但是如果是右移就是除以2的n次方，左移的话相反。其中左移的话补位总是补零。
，
>>>:进行无符号右移的话，最高位直接填充bit零。
流程控制语句
顺序结构 条件结构 循环结构
if while do while switch for continue和break
一：if（!x）=if(x==null || typeof(x)==undefined);
函数（存在问题）
