1.JavaScript
1.1.介绍:嵌入式脚本语言,浏览器执行,它是以字符串解析执行的,它是一种基于对象的语言,不具有封装,继承,多态等特点。
1.2.核心:1.事件,2.对象(Bom,Dom).
1.3.js是事件驱动语言:
1.区分大小写.
2.每句话后分号可有可无(最好有).
3.注释和java一样.
4.弱类型语言.
1.4.有两种数据类型:
1.原始数据类型:放在栈里的简单数据类型(值在变量的地址).(boolean,String,undefind,null,Number..)
2.引用数据类型:放在堆里的复杂数据类型.
2.Array对象-提供对创建任何数据类型的数组的支持。
2.1.concat 方法 (Array)---返回一个新数组,这个新数组是由两个或更多数组组合而成的。
2.2.join 方法-返回字符串值,其中包含了连接到一起的数组的所有元素,元素由指定的分隔符分隔开来
2.3.pop 方法--移除数组中的最后一个元素并返回该元素
2.4.shift 方法--移除数组中的第一个元素并返回该元素。
2.5.unshift 方法--将指定的元素插入数组开始位置并返回该数组。
2.6.push 方法--将新元素添加到一个数组中,并返回数组的新长度值。结束位置
2.7.slice 方法 (2,4)--返回一个数组的一段。
2.8.splice 方法--从一个数组中移除一个或多个元素,如果必要,在所移除元素的位置上插入新元素,返回所移除的元素。
2.9.toLocaleString 方法--返回一个日期,该日期使用当前区域设置并已被转换为字符串。
3.Boolean 对象-创建新的 Boolean值。
4.Date对象-启用基本存储器并取得日期和时间
5.Error对象-保存有关错误的信息。
6.Global 对象-把所有全局方法集中在一个对象中.
6.1.escape(str) 方法---对 String对象编码以便它们能在所有计算机上可读,;
6.2.unescape(str) 方法---解码用 escape方法进行了编码的 String对象。
6.3.eval 方法--检查 JScript代码并执行. eval(codeString),这个字符串将由 JScript分析器进行分析和执行
6.4.isNaN 方法---返回一个 Boolean值,指明提供的值是否是保留值 NaN(不是数字)。
7.Math 对象-是一个固有对象,提供基本数学函数和常数。
7.1.alert(Math.round(1.5)); //四舍五入
8.Number 对象-代表数值数据类型和提供数值常数的对象。
9.String 对象-可用于处理或格式化文本字符串以及确定和定位字符串
9.1.在每个空格字符处进行分解。--var ss = s.split("-");
10.typeof 返回原始值类型
10.1.typeof 运算符把类型信息当作字符串返回。typeof返回值有六种可能:
"number," "string," "boolean," "object," "function,"和 "undefined."
11.instanceof 判断对象类型
12.this表示:永远都指向调用它的那个对象-不加this,undefined - this .
13.prototype原型
13.1.prototype 属性提供对象的类的一组基本功能。对象的新实例“继承”赋予该对象原型的操作。
14.定义方法的方式:结构体,对象引用(定义是私有的),通过原型(定义是公共的)
14.1.结构体
function pe(){...}
1.1--pe = function(){}
1.2--HashMap.prototype = {size :function(){
return this.elements.length;
},put..}
14.2.对象引用
s1.q1 = function(){
alert('I am q1.');
}
14.3.原型
pe.prototype.fun1 = function(){
alert('我是原型220');
}
1.constructor:对创建对象构造器的引用
var date = new Date();
var d = date.constructor;
var ss = new d();
//alert(ss.getDay());
2.StringBuffer
append-push(value);
toString-join(',');
以及在Java里面StringBuffer与String的区别
3.className-p标签颜色改变,引用css
p.className="oa"; --css里面.oa;
4
4.1--getElementsByTagName-获得目标对象.
var img = document.getElementsByTagName("img");
4.2--getElementById-通过id获得标签对象
var p = document.getElementById('pa');
5.arguments-类似于数组,但是不能用join(); length属性表示参数列表的长度.--方法重载
6
6.1--clearInterval 使用 setInterval 方法取消先前开始的间隔事件。
6.2--clearTimeout 取消先前用 setTimeout 方法设置的超时事件。
6.3--setInterval 每经过指定毫秒值后计算一个表达式。
6.4--setTimeout 经过指定毫秒值后计算一个表达式。
7.定义对象的三种方式
//1.
var obj = new Object();
obj.name = '123d';
//alert(obj.name);
//2.
var obj = {x:'123123',y:'aaa'};
alert(obj.y);
//3。
function point(){}
8.动态创建span对象
document.createElement("span");
span.innerText='..';
span.attachEvent("onclick",fn);
//把span对象追加到div后面
var div = document.getElementById('sss');
div.appendChild(span);
9.图片显示
var img = document.createElement("img");
body.appendChild(img); //动态创建img对象
i = window.setInterval("fun()",1000);
定义一个变量 i进行 window.clearTimeout(i)控制暂停.
onmouseover 当用户将鼠标指针移动到对象内时触发。
onmouseout 当用户将鼠标指针移出对象边界时触发。
10.计时器,HashMap.
1.document.cookie -短期-关闭浏览器,cookie结束,长期-存于本地
1.1.介绍:JavaScript中的另一个机制:cookie,则可以达到真正全局变量的要求。
cookie是浏览器提供的一种机制,它将document对象的cookie属性提供给JavaScript。
可以由JavaScript对其进行控制.(cookie文件存储于documents and settings\userName\cookie\文件夹下)
1.2.可以作为全局变量,这是它最大的一个优点.用于:
1.2.1.保存用户登录状态。例如将用户id存储于一个cookie内,这样当用户下次访问该页面时就不需要重新登录了.
1.2.2.跟踪用户行为,例如一个天气预报网站,能够根据用户选择的地区显示,当地的天气情况上次用户所在地区的天气情况.
1.2.3.定制页面。如果网站提供了换肤或更换布局的功能,那么可以使用cookie来记录用户的选项.背景,分辨率...
1.2.4.创建购物车。正如在前面的例子中使用cookie来记录用户需要购买的商品一样,在结账的时候可以统一提交。例如淘宝网就使用cookie记录了用户曾经浏览过的商品,方便随时进行比较。
1.3.cookie的缺点主要集中于安全性和隐私保护。主要包括以下几种:
1.3.1.cookie可能被禁用。当用户非常注重个人隐私保护时,他很可能禁用浏览器的cookie功能;
1.3.2.cookie是与浏览器相关的。这意味着即使访问的是同一个页面,不同浏览器之间所保存的cookie也是不能互相访问的
1.3.3.cookie可能被删除。因为每个cookie都是硬盘上的一个文件,因此很有可能被用户删除;
1.3.4.cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中,因此如果要保存用户名密码等信息时,最好事先经过加密处理。
1.4.设置cookie每个cookie都是一个名/值对,可以把下面这样一个字符串赋值给document.cookie:
document.cookie="userId=828";//document.cookie =key+"="+value+";expires="+date.toGMTString();
2.insertRow.
主要用到的方法有:
var tr = table.insertRow();//插入行.
var td = tr.insertCell();//插入列.
td.innerText = ''+i;//置或获取位于对象起始和结束标签内的文本。
tr.appendChild(td);//列加入指定行.
table.appendChild(tr);//行加入指定表格.
!!!this是button对象button.td(parentNode).tr.table .removeChild(button.td.tr); -删除指定行.
3.new操作
1.当解析器遇到new并操作的时候创建空对象.
2.开始运行A()函数,并将this指针指向新建的对象.
3.当给对象不存在的属性赋值的时,解析器就会为该对象创建该属性.这样A()函数的执行就是初始化空对象的过程.
4.当函数执行完成以后,new操作符就会返回该对象.(早绑定,晚绑定)
4.继承
1.构造继承
1.1.this.newMethod = A;//将A的地址(引用)赋给newMethod.--A为父类
this.newMethod('admin','永州');//继承属性(方法)到this关键字里面.
...获取子类的实例调用父类的方法.
2.冒充继承call
2.1.父类.call(子类对象,parmers...);...
3.冒充继承apply
3.1.父类.apply(子类对象,Array)...
4.原型继承
4.1.E.prototype = new A('lishi','北京');--A为父类,E为子类,...
5.copy继承
5.1 G.prototype.method1 = F.prototype.method1; //F为父类
5.2 for(var par in F.prototype){ //1.1种方式.
G.prototype[par] = F.prototype[par];
}
5.3 var str = 'method1';
G.prototype[str] = F.prototype[str];
5.计算器.
6.冒泡排序.
闭包
1.介绍:调用函数,返回函数.闭包有返回,返回的是最终值.
2.作用:闭包保护栈,保护资源.
3.特点
1.作为一个函数变量引用.当函数返回时,处于激活状态.
2.闭包就是当一个函数返回时,一个没有释放资源的栈区.
动态插入表格全JavaScript.首先调用init(随便定义的方法)方法.
1.js文件压缩(http://code.google.com/p/closure-compiler/)
压缩的时候,首先去掉空格,之后去掉注释,之后去掉长的变量名这个时候,还会有多行,不是压缩成一行,
使用高级的那种就可以实现一行,但我们这里来不了(SIMPLE_OPTIMIZATIONS).
java -jar compiler.jar --compilation_level SIMPLE_OPTIMIZATIONS --js base.js.js --js_output_file base-debug.js
WHITESPACE_ONLY(最简单的.),SIMPLE_OPTIMIZATIONS-简单的,ADVANCED_OPTIMIZATIONS-高级的
2.节点(node)
节点类型共12个常量.
1.Node.ELEMENT_NODE (1)-元素节点
2.Node.TEXT_NODE (3)- 文本节点
3.Node.COMMENT_NODE (8) 注释
克隆节点—cloneNode
var p1 = document.getElementById("p1");
var p2 = p1.cloneNode();
document.body.appendChild(p2);//页面上将会多出一个段落,不过段落中什么都没有
p2 = p1.cloneNode(true);//使用参数true表示克隆节点时包含子节点
document.body.appendChild(p2); //克隆出来了.
3.表单(form)
var fm = document.formName;//可以这样来直接引用该表单对象
document.formName.onsubmit = function () { //当表单提交的时候触发
if (result) {//检查表单
this.submit();
} else {
return false;//阻止表单提交
}
};
表单重置
<input type ='reset' value='重置'/><br> //IE不需要注册下面的事件
document.f.onreset = function(){ //firefox可以,也可以不注册该事件.
document.f.reset();//ie报堆,栈溢出
}
单选按钮与复选框有个共同的属性——checked,指明该按钮是否被选中 fm.sex[0].checked //返回Boolean
select,它包含option标签(下拉框)
alert(select.selectedIndex);//这个索引号是从0开始的
alert(select.options[select.selectedIndex].value\(text文本内容));//输出选中项的
document.f.age.onchange = function(){
alert(this.value); //输出选中的值
}
4.表格(table)
<tfoot><tr><td colspan="3">脚注</td></tr></tfoot> //在最下面的.
5.动画
动态文字显示
var s = document.getElementById('ss').innerText.split("");
t = setInterval(function(){
s.push(s.shift());
sss.innerText = s.join("");
},100);
div动画
animate(oDiv,'width',2,100,50,500);
执行动画的对象:obj,执行动画的属性:attr,执行动画间隔时间:timer,增量:increment,end:结束位置
function animate(obj,attr,increment,timer,start,end){
var saved = start;
setInterval(function(){
if(saved>=end){
return;
}
saved+=increment;
obj.style[attr]=saved;
},timer);
}