蓝色动力网络

 找回密码
 立即注册

扫一扫,访问微社区

QQ登录

只需一步,快速开始

查看: 5819|回复: 6

Javascript学习第一季

[复制链接]
发表于 2009-2-3 09:43:58 | 显示全部楼层 |阅读模式
Javascript学习第一季(1)

1 , javascript字符集:
javascript采用的是Unicode字符集编码。
为什么要采用这个编码呢?
原因很简单,16位的Unicode编码可以表示地球人的任何书面语言。这是语言 国际化的一个重要特征。(大家也许见过用中文写脚本,比如:function 我的函数() {} );
Javascript中每个字符都是用2个字节表示的。(因为是16位编码)


2 ,大小写敏感:
js是一种区分大小写的语言。
注意下:以前我也犯过的错误。
HTML是不区分大小写的。经常看见有人这么写,
<input type=”button” onClick=”a()” /> (这样写是对的)
如果放到JS中,就必须使用onclick(小写哦!)
同时XHTML中也只能使用小写。
这个我们并不需要太关心,象这种问题,其实都可以自己给自己定一个标准,自己写程序的时候全部小写。
另外每行程序后 分号 也是一样,我们都写上。

3 ,注释:
单行:
//   注释1
/*   注释2 */
多行:
/* 注释3
* 注释3
* 注释3
*/

4 ,标识符:
标识符就是一个名字,用来命名变量和函数。
规则:第一个字母必须是字母,下划线(_),或美圆符号($)。
为什么第一个字母不能为数字?
如果第一个为数字,js很容易就把它当作数字处理了,那么命名就没意义了,js规定了后,就很容易的区分了标识符和数字了。

5 ,直接量:
就是程序中直接显示出来的数据值。
比如:12 , 1.2 , “ hello “ , true , null , [1,2,3,4]
这些都是直接量。

6 ,保留字和关键字:
具体是哪些,可以去google.cn。
其实我们只要不取一些特郁闷的名字,都不会冲突的。

7 ,js数据类型:
3种基本的类型;数字,字符串和布尔值。
2种小数据类型:null 和 undefined . (为什么叫小数据类型?因为他们只定义了一个值)
1种复合类型:object. (在这个类型中,它的值可以是基本数据类型,也可以是复合类型,比如其他的object. )
注意:在对象中有一个特殊的对象----function.(它是一个可以执行代码的对象.)

其他的一些对象:
数组:
Date类 : 是日期的对象。
RegExp类: 正则表达式的对象。
Error 类:js中发生错误的对象。

8 ,使用数据类型注意的地方:
1):数字:
由于数字有什么8进制,10进制,16进制等。。。
八进制:var num = 011; //以"0"开头
十六进制:var num =0x1f; //以"0x"开头
所以对于js这个都能识别的语言来说,就必须得注意。
alert(377);   // 377
alert(0377);    //255   = 3 * 64 + 7 * 8 + 7 * 1

进行算术运算有个重要的对象:Math.
具体可以去网上下载手册,查询里面的方法。

2个有用的函数:isNaN()和isFinite()
isNaN() : 用于检查其参数是否是非数字值。// 提示:是非数字哦。(not a number)
document.write(isNaN(0) ) //返回false
document.write(isNaN(5-2) ) //返回false
document.write(isNaN ("Hello") ) //返回true

isFinite(number) 函数用于检查其参数是否是无穷大。
如果number是有限的,则返回true. 如果 number 是 NaN(非数字)或者是无穷大,则返回false;

2):字符:
‘you’re right’;
这样写的话js会误以为 在you字母后就结束了,引起错误。
所以当遇到这种情况的时候,必须用到转义。
我们可以这么写:
‘you\’re right’;
另外:你可以 google.com搜索 转义序列表 。

字符串的简单操作例子:
var a = "cssrain";
var b = a.charAt(a.length-1); // 从字符串a中截取最后一个字符。 输出:n
var c = a.substring(0 , 2); // 从字符串a中截取第1,2个字符。 输出:cs
var d = a.indexOf('s');   // 从字符串a中查找第一个s出现的位置。 输出:1   
从例子可以看出,基数都是从0开始的。
var e = a.substring( a.length-1 ); //可以看出,substring第2个参数不写的话,
//默认 是到最后。
var f = a.substring( a.length-1 , a.length);//等价于

3):数字跟字符之间的转换:
数字转字符:
var number_to_string = number + “ ”; //方法1:添加一个空的字符串。
var number_to_string =String(number); //方法2:使用String()函数。
var number_to_string =number. toString(); //方法3:使用toString()函数。
注:toString()方法默认是以10进制转换。
如果要使用8进制转换可以 这么写: number. toString(8);

字符转数字:
var string_to_number = string – 0 ; //方法1: 字符串减去0。
var string_to_number = Number(string) ; //方法2:使用Number ()函数。
var string_to_number = parseInt(string) ; //方法3:使用parseInt ()函数。
方法1中不能 用string+0 ; 这样会导致字符串拼接,而不是类型转换。
方法2 中的Number函数转换,比较严格。
比如:
var a = "19cssrain86";
var b = Number(a); //输出NaN.
如果我们使用方法3。
var c = parseInt(a); //输出 19
可以看出parseInt()会自动忽略非数字的部分。
parseInt()只取整数部分,忽略小数部分。
parseFloat()会把小数部分也取到。
和toString()一样,parseInt也有进制,默认是10进制。
如果想使用8进制,可以这么写: parseInt( “077” , 8 ); // 输出63 = 7 * 8 + 7
当字符以0开头的时候,我们必须把 第二个参数 指明,不然js可能会以8进制去转换。

4):布尔类型:
布尔在数字环境中:true 转换为 1 ,false 转换为 0 。
在字符环境中:true 转换为 “true” ,false 转换为 “false” 。
布尔转换:
var x_to_Boolean = Boolean(x); //方法1:使用Boolean ()函数。
var x_to_Boolean = !x; //方法2:使用 感叹号。

5):函数的定义:
方法1:普通定义
function square(x){
      return x*x;
}
方法2:函数直接量定义
var square = function(x){ return x*x; }   //推荐使用
方法3:构造参数
var square = new Function(“x”,”return x*x;”);   //效率低

6):对象:
如果有一个名为 cssrain 的对象 , 他有一个高度height的属性。
那么我们可以这么引用:
cssrain.height;
还可以使用关联数组定义:cssrain[“height”];

创建对象:
方法1:
var point = new Object();
point.x = 3;
point.y = 5;
方法2:使用对象直接量
var point = {x:3 , y:5 }
当然json也可以咯。

对象在字符的环境下,会调用toString()方法。
数字环境下,会调用valueOf()方法。
布尔环境下,非空对象为true;

7):数组:
常规数组:以非负整数做为下标。image[0]
关联数组:以字符做为下标。如:image[“width”]
js不支持多维数组,但数组里面可以嵌套数组。

创建数组:
方法1:
var a = new Array();
a[0] = “1”;
a[1] = 2;
a[2] = { x:1, y:3};
方法2:
var a = new Array(“1” , 2 , {x:1,y:3} );
注意下:如果只传了一个参数;比如var a = new Array(3);
那么它是表示:3个未定义元素 的 新数组。
方法3:使用数组直接量
var a =[“1” , 2 , {x:1 , y :3 }]; //注意外面的 括号 , 不是花 括号。

8):null和undefined:
null表示无值;
undefined : 使用一个并未声明的变量,或者使用了已经声明的变量但未赋值或者使用了一个并不存在的属性。
undefined==null
如果要区分:
可以使用=== 或者typeof运算符。

9 ,新手常遇到的疑惑:
var s =”you are right”;
var b = s.substring(s.lastIndexOf(“ ”)-1 , s.length);
疑惑:s是对象还是字符串,为什么字符串会有方法呢?
回答:s是字符串。之所以有方法 ,是因为 string类型 有一个相应的对象类(String)。
同样数字和布尔都有相应的Number , Boolean类。
Js会内部进行相应的包装对象。String对象就替换了原始的字符串。

总结:
简单了介绍了js中的一些概念(词法结构) 和 数据类型(部分)。

好了,今天就说到这里, 明天我们 继续。^_^。

笔记我已给部分群员看过,有好的评论也有不好的评论。所以我郑重声明下:
这是我看了DOM编程艺术,悟透JavaScript,javascript权威指南5做的笔记,
我资质不深,不能写出高深的文章,
如果你觉得笔记写得不好,可以不看我以后的。这篇文章就当作浪费你几分钟
 楼主| 发表于 2009-2-3 09:44:54 | 显示全部楼层
Javascript学习第一季(2)

上篇文章讲了js中的一些概念(词法结构) 和 数据类型(部分)。
这章我们 继续.然后了解下js中操作数据 和 函数的 作用域。

1,对象跟基本类型之间的转换:
不管何时,只是对象非空,在布尔环境中都为true.
如;
new Boolean(false);
new Number(0);
new String(“”);
new Array();
上面虽然内部值是false,但对象的值是true;
Object à valueOf() à toString()
其中Date类,是先执行toString()转换。

2,js中操作一个数据值:
任何语言都有自己的操作数据的方法;
Js也不例外,js有3种重要的方式来操作一个数据值。
复制它。例如把它赋给一个新的变量。
把它作为参数传递给一个函数或方法。
可以和其他值比较大小。

Js通过传值和传址2种方式操作这些数据的值。
从名称可以看处,传值 是通过传递值来操作数据。在赋值的过程中,对实际的值进行了拷贝,存储到一个新的变量中。拷贝的值和原来的值是2份完全独立的值。所以如果你改变了拷贝的值,并不会影响原来的值。当比较大小时候,通常进行琢个字节比较。
传址 从名字来看,就是通过传递地址来操作数据。在赋值的过程中,对实际的值的地址(可以说是引用)进行了拷贝,他们不是完全的独立,所以如果你通过引用改变了值,那么原始的值也会改变。当比较大小的时候,通常是看他们是否引用同一个地址来比较。
简单的传址例子:
var a = new Date();
alert(a.getDate());
var b = a ;
b.setDate(21);
alert(a.getDate()) // 输出21

3,一般来说:
基本数据类型通过传值来操作的。(如果忘记了哪些是基本数据类型,可以往回看。)
对象数据类型通过传址来操作的。(比如 数组和函数)
例子:
<script>
//传值
a=1;
b=a;
b=2;
alert(a); //输出 1

//传址
x=[1,2];
y=x; // 赋给y的只是x的一个引用,而不是x本身。数组已经在语句中被赋值了,执行过这段代码后,仍旧只有一个数组对象,只不过我们有2个对他的引用了。
y[0]=2;
alert(x[0] +" | " +x[1]); //输出 2 | 2
</script>
其中我们必须注意字符串:
js中字符串是通过传址来复制和传递的,而他们是通过传值来比较的。
对象和数组是用传值来传递的,只不过传递的这个值实际是一个引用,而不是对象本身。
总结:

类型 复制 传递 比较     
数字 传值 传值 传值     
布尔 传值 传值 传值     
字符串 不可变 不可变 传值     
对象 传址 传址 传址
不可变:在JS中,没有方法去改变字符串值的内容。
对字符串来说,传值还是传址,意义不大。

4,垃圾收集机制:
Js中自动释放内存。
比如:
var s =”heelo”;
var b   = s.toUpperCase();
s=b; //运行到这里后,js会自动检测不再使用某个对象,因为s=b了,所以js会自动释放字符串“heelo”所占的存储空间。即我们不能再获取原始的 “heelo” 值;.

5 , javascript变量:
Js是非类型的。它的变量可以放任何类型的值。

变量的声明:
var a ;
var b ;
或者
var a , b ;
或者
var a=0 , b=1 ;

重复声明 是合法的,
如果 遗漏声明 , js会隐式的声明该变量。当然隐式声明的变量总是全局变量。

6 , 变量的作用域:
Js有2种:全局和局部。
从名字的定义可以知道,全局变量的作用域是全局性的。
在js代码中,处处都有定义。
局部变量的作用域是局部的。
在函数体内定义。

同名的局部变量的优先级比同名的全局变量高,下面的例子说明了这点:
var a ="abc"; //全局变量
function check(){
var a = "efg"; //同名的局部变量
document.write(a);
}
check(); // 输出 efg

看一个比较经典的例子:
   var scope = "global";
function f(){
     alert(scope); //输出 undefined
var scope = "local";
alert(scope); //输出 local
}
f();

为什么第一个会输出undefined 呢?
因为js规定当 局部变量和全局变量的名称相同的时候,函数体内的同名全局变量会被隐藏。
那么刚才例子 实际 等价于:
function f(){
var scope;
alert(scope);
scope = "local";
alert(scope);
}
f();
OK,如果你看懂了这个例子,说明你对局部和全局的一些区别稍微了解了。

7 , 变量的作用域:
从里到外:

词法作用域 作用域链 变量查找     
var x = 1;
function f(){
var y =2 ;
function g(){
   var z =3 ;
}

} 调用g()对象; z =3 ;



调用f()对象; y =2 ;



全局变量 x = 1   在此定义了吗?
         是
否           
获得值
在此定义了吗?
         是
否           
获得值
在此定义了吗?
         是
否           
获得值
未定义

8 , 客户端全局变量:
在客户端js中,Window对象代表浏览器窗口,他是一个全局对象。、
比如 ;我们常用的 parseInt() , Math() 都是Window对象定义的属性。

Js允许多个全局变量的执行环境,每个环境有不同的全局对象。
比如:客户端js的每个独立的浏览器窗口,或者同一窗口的不同帧。
其中的代码都运行在自己的执行环境中,具有自己的全局对象。
当然可以使用 表达式 parent.frames[0].x ; 来引用第一个帧中的全局变量 x ;这样就把不同帧中的代码联系起来了。
不过这里有安全性问题。

总结;
主要讲了 传值和传址 和 函数的作用域 。
对新手来说稍微难理解些。如果还有不懂,可以google 搜索资料
或者联系我 ,可以去我的blog 给我留言 :
http://www.cssrain.cn/LoadMod.asp?plugins=GuestBookForPJBlog

今天讲到这里了,呵呵,明天继续。相信大家的js技术会一步步提高的。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-2-3 09:45:16 | 显示全部楼层
Javascript学习第一季(3)

上篇文章讲了js中的传值和传址 和 函数的作用域.
这章我们来探讨js中的变量,表达式,和运算符 还有一些 js 语句。
升级中……

1, 表达式:
最简单的表达式:直接量或者变量名。var a =1;
直接量表达式的值:本身。
变量表达式的值:该变量所存放或引用的值。

2 , 运算符:
一元运算符: 比如 - 3
二元运算符: 比如 3+4
三元运算符: 比如 ?   :   

新手常遇到的问题:
递增运算符:
比如:
i = 1 ;
j = ++ i ; // 前递增运算,即先对运算数进行递增,然后再去计算。
//输出   i =2;    j=2 ;

i = 1 ;
j = i ++; // 后递增运算,即先去计算,然后再对运算数进行递增。
//输出   i =2;    j=1 ;

3, 相等运算符:
=   : 赋值运算符;
== : 相等运算符;
=== : 等同运算符;
值NaN永远不会与任何值相等,包括自己。
alert(NaN == NaN); //false NaN 意思为 Not a Number
要检测一个值是否是NaN,可以使用全局函数isNaN();

另外新手要注意:
var a =[1,2,3];
var b =[1,2,3];
document.write(a==b); // 输出false .(这个其实是 第一章讲的内容。)
                   // 虽然值相同,类型相同,但址不同。
--------------------------------------------------------
var a =[1,2,3];
var b = a ;
var c = a ;
document.write(b===c);//输出true;
--------------------------------------------------------
var a = "1";
var b = true ;
document.write(a==b); //输出 true
document.write(a===b); //输出 false   ; 值相同, 类型不同

4, 比较运算符:
要注意的就是字符串是进行琢个比较。
而且会区分大小写。
如果你的需求是不区分大小写:
可以使用 String.toLowerCase() //纯小写
String.toUpperCase() //纯大写 转换后 ,然后再去比较.

5, in 运算符:
要注意的是:左边的值是其右边对象的属性。
比如:
var a = { x : 1 , y : 2 };
var b = “x” in a ;   // true
var c = “toString” in a ; // true . 左边的值是其右边对象的属性。

6 instanceof 运算符:
要注意的是:左边的运算数是一个对象,右边的运算数是对象类的名字。
比如:
var a = new Date()
a instanceof Date; // true
a instanceof Object ; // true
a instanceof Number ; // false

7, 3元条件运算符:
要注意的是:第一个运算数必须是一个布尔值。
X > 0 ? 3 : 2 ;

8, typeof运算符:
要注意的是:由于typeof对所有的对象和数组都是返回 object;
所以它只能区分对象和原始数据类型时才有用。
要区别一种对象类型和另一种对象类型,可以使用 instanceof 和 constructor 属性。

9, delete运算符:
要注意的是:并不是所有的属性和变量都能删除。
比如:
用var 语句声明的变量不能被删除。
另外;当delete删除一个不存在的属性时,返回true;(^_^,这个比较搞笑。)
var a = 1;
alert( delete a ); //返回 false
alert( delete a.x ); //返回 true
还有一个应该注意:
Delete 所能影响的只是属性值,并不能影响被这些属性引用的对象。
比如:
var my =new Object();
my.height = new Date();
my.width = my.height;
delete my.height ;
document.write(my.width);// my.width仍然是引用Date对象

10,void运算符:
void的一个用途: 专门生成undefined值、
alert( void(0) )
alert( void(1) ) //都输出 undefined
这里的undefined实际是 void()运算后的值。
考虑到向后兼容性,用表达式void 0 比使用 undefined属性更有用.

11,异常处理:
抛出异常: throw
捕捉异常:try / catch / finally
If(x>0)
throw new Error(“x must not be negative!”);


try{
}
catch(e){
}
finally{ //总是被最后执行 。通常进行 消除操作。
}

12,with语句:
   var form = frame[1].document.forms[0];
   form.name.value = “ “;
   form.address.value =” “;
这样可以使用with语句代替;
比如:
with(frame[1].document.forms[0]){
   name.value = “ “;
   address.value =” “;


当然书上强烈不推荐使用with, 呵呵。效率低,问题多多。

总结:
主要介绍了js中的变量,表达式,和运算符 还有一些 js 语句。
如果还有不懂,可以google 搜索资料. (学会使用搜索,你也就很厉害了。)
或者联系我 ,可以去我的blog 给我留言 :
http://www.cssrain.cn/LoadMod.asp?plugins=GuestBookForPJBlog

转眼间,学了3章了, 不知道大家感觉如何。
将就些吧,学习最重要的还是靠自己,不懂或者有疑问的地方马上 写例子测试,验证。或者查资料。 这样可能印象会更深入些。
加油…….
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-2-3 09:45:43 | 显示全部楼层
Javascript学习第一季(4)

上篇文章讲了js中的变量,表达式,和运算符 还有一些 js 语句.
这章我们来探讨js中的对象和数组。
比较难哦。做好心里准备吧。。。。。。 深呼吸。。。

1 , for / in :
一种遍历(枚举)对象属性的方法,可以循环我们呢事先不知道的属性。
它可以枚举处用户定义的所有属性,但却不能枚举出某些预定义的属性和方法。
不能枚举的属性通常是继承的属性

删除一个对象的属性:
delete book.width ;
从对象中移除了属性,在删除之后,用for/in将不会枚举该属性,并且用width in book 也检测不到该属性。

for/in 的另一个重要的用途就是跟关联数组一起使用:(如果忘记关联数组的定义,可以看前面的章节。)
for(stoct in port ){
    value + = get_value(stoct) *   port[stoct] ;
}

2 , 通用的Object属性和方法:
1):constructor属性:
每个对象都有这个属性,他引用了初始化这个对象的构造函数。
比如:
var d =new Date(); //使用Date()构造函数,创建一个对象 d;
   d.constructor ==Date;   //true    //属性d.constructor引用 Date ;

这个属性有助于确定一个对象的类型;
比如:
我们想确定一个值的类型是否是Date 类型:
If((typeof o==”object” )&& (o.constructor==Date)){
// 首先看是否是对象,然后看是否引用Date
}

上面的代码也可以写成:
If((typeof o==”object” )&& (o   instanceof   Date)){
// instanceof 运算符 来检测o.constructor 属性的值。
}

3 , toStirng()和toLocaleString()方法:
1):toLocaleStirng() 返回对象的一个本地化字符串。
toString和toLocaleString一般都返回相同,但在子类中,有点区别:
比如:
Array , Date和Number都定义了返回本地化的值的toLocaleString()方法.

4 , hasOwnProperty()和propertyIsEnumerable()方法:
1):hasOwnProperty
var a = { x : 1 , y : 2};
var k =a.hasOwnProperty("x");
alert(k) //true
alert( Math.hasOwnProperty("z") );//false
alert( Math.hasOwnProperty("cos") );//true
注:Math,cos() : 以弧度为单位计算并返回指定角度的余弦值。
propertyIsEnumerable()跟返回的结果跟hasOwnProperty()相同;

4 ,isPrototypeOf()方法:
如果方法所属的对象是参数的原型对象。
var a = { x : 1 , y : 2};
var k1= Object.prototype.isPrototypeOf(a);       // o.constructor = Object
var k2= Object.prototype.isPrototypeOf(Function);   // Function.constructor = Object
alert(k1) //true
alert(k2) //true

5,数组:
1)创建数组:
数组直接量:
var es = [ ] ;
复杂点 var es = [ [ 1, {x:1   , y : 2}] , [ 2, {x:3 , y : 4}] ];
还有一种方式:使用Array() 构造函数:
    V1 : 无参数:
       var a = new Array();
空数组,和 var a =[ ] 相等 ;

   V2 : 多个参数:
     var a = new Array( 1,2,3,”tt”) ; //可以看出直接量定义 简单些。

   V3 : 1个数字参数:
   var a = new Array (3);
具有3个元素的数组,每个元素的值为 undefined ;

6, 数组的下标(索引):
大小   : 0 <= 下标 < 2的32次方 – 1 ;
如果不在范围内,js会讲它转换为一个字符串,作为对象属性的名称;
而不是作为数组的下标;
比如:
   a[-1.2] = “test” ;   // 等价于   a[“-1.2”] =”test” ;
//代码解释: 创建一个名为 “-1.2”的属性,而不是定义一个 新的数组元素。

7, 添加数组的内存使用:
   a[10] = “test” ; //添加新的元素
内存的使用:
比如:
a[0] = “1” ;
a[10] =” 10” ;
那么js值给下标为0 和10的元素分配内存,中间的9个元素不被分配;

注:数组也可以添加到对象中;
比如;
var a = new Circle(1,2,3);
a[0]= “test” ;
这个例子定义了一个名为” 0 “的新对象属性。
只将数组元素添加到一个对象中并不会使它成为数组。

8, 删除数组:
var a = [1,2];
delete a[0];
alert(a[0]) //输出 undefined
alert(a[1]) //输出 2
由例子可以看出,delete删除其实没有真正删除,只不过把元素设置为undefined;

如果要真正删除,可以使用Array.shift(),等方法。
比如:
var a = [1,2];
delete a[0];
alert(a[0]) //输出 undefined
alert(a[1]) //输出 2
a.shift(); //删除数组的第一个元素
alert(a[0]) //输出 2
alert("length:"+a.length);
alert(a[1]) //输出 undefined ;   1已经被删除了,其实数组已经的长度只有 1 了;

9,数组的length:
a[49] = “a”;
// 那么这个数组的长度是 50 ;

length属性经常用于遍历数组元素;
比如:
   var a = [“a” , “b “ ,”c” ];
for(var i = 0 ; i< a.length ; i++){
alert(a);
}

这个是在假定元素是连续的,如果不是这种情况:
必须检测每个元素是否被定义 : 比如:
for(var i = 0 ; i< a.length ; i++){
if(a){
alert(a);
}
}

多维数组: a[j] ;


10,数组的一些方法:
1):join() 方法:
把一个数组的所有元素都转换成字符串。
比如:var a = [1,2,3];
    var s =   a.join();   // 输出 s==1,2,3
当然也可以 指定一个分隔符;
比如;
   s = a.join(“,”);
这个方法跟String.split()相反, split()将一个字符串分割成几个片段来创建数组;

2):reverse () 方法:
把一个数组颠倒。
     var a   = new Array(1,2,3);
a.reverse();
var s = a.join(); //s == “3,2,1”

3):sort() 方法:
排序
♂:如果不给传参数,那么按照字母顺序对数组元素排序。
var a = new Array(“ee”,”df”,”b”);
a.sort()
var s = a.join(“, ”); // s == “b, df, ee”
♂:如果传参数:
比如:
var a = [33,4,1111,222]
a.sort(); // 排序 : 1111 ,222 ,33,4
a.sort(function(x,y){
       return x-y;
});
var s = a.join(); //输出 4, 33,222,1111

//可以从例子看出,排序如果x > y ,那么第一个参数就排在第2个参数后,
比如; 1111 ,222   -à     1111-222>0 -à 则 222 , 1111
另外注意下 字母排序:因为js是区分大小写,所以排序的时候,把字符统一成大写或者小写,再排序。

4):concat() 方法:
var a = [1,2,3];
a= a.concat(4, [5,6],7);
a=a.join(); //输出 1,2,3,4,5,6,7
alert(a)
注意:
如果是数组里面还有数组 ,就不能展开了。
比如:
var a = [1,2,3];
a = a.concat(4,[5,[6,6]],7);
alert(a); //这个看不出来
a = a.join("|");
alert(a); //分割后,注意有个逗号

-------------------------------------

var c = [1,2,3];
var d =new Array(1,2,3);
alert(c); //1,2,3
alert(d); //1,2,3
//之所以不输出Object ,是因为
//数组是一个具有额外功能层的对象.
//我们记住他的特殊性。

5):slice() 方法:
返回数组某一个片段。跟字符串的substring方法类似。

6):splice() 方法:
首先他跟 slice 方法 只有一个字母的差别,不过用处完全不同。
他可以用来删除。
var a = [1,2,3];
a = a.splice(0,2);
alert(a); // 输出 1, 2
a = a.splice(1,2);
alert(a); // 输出 2 。 如果是 a = a.splice(0 , 1) ; 输出 1
a = a.splice(1,2);
alert(a); // 没有删除任何数组 , 输出 空 数组

他也可以插入数组。具体方法:
    var array1 = new Array("1","2","3","4");
    array1.splice(1,0,"5");//在 第2个元素后面,插入 5 ; 如果第2个参数为0,则不删除。
    document.write(array1+"<br>"); //输出 1, 5 ,2 ,3,4
    array1.splice(2,3,"7","8") // 删除 第3个的 元素后的 3个元素。也就是 第3个,第4个,第5个元素。然后在这个位置上插入7,8
    document.write(array1);//输出 1, 5 ,7,8
注意:和concat()不同,splice并不将他插入的参数展开。也就是如果插入一个数组,他就是插入数组本身,还不是数组的元素。
而concat()插入数组的话,就会把数组展开,插入数组中的元素,不过当插入的数组里
还有数组的时候,就不会展开了。


7):push() 方法和pop()方法:
push(): 将一个或者多个数组 附加到数组的尾部。
pop() : 删除数组的最后一个元素。
var array1 = new Array("1","2","3","4");
    array1.push("5");
    document.write(array1+"<br>"); //输出 1, 2 ,3 ,4,5
    array1.pop()
    document.write(array1);//输出 1, 2 ,3 ,4

8):unshift() 方法和shift ()方法:
跟push和pop唱反调。。。
unshift (): 将一个或者多个数组 附加到数组的头部。
shift ():删除数组的第一个元素。


数组的一些方法是比较多,看起来也比较烦。所以大家应该有点耐心。
另外可以参考这篇文章;
http://www.cssrain.cn/article.asp?id=438


总结:这章主要讲了对象和数组的一些方法。比较难记和难理解。不过任何事情都是从难到容易的过程。一次没看懂,再看一次。。。书读百遍,其意自现。。。。。。
也许你不需要读一百遍呢.   ^_^。


是不是感觉看了这么多js概念,已经迫不及待的想自己写点例子什么的。好吧。
下章我们 来点实战的。。。。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-2-3 09:46:08 | 显示全部楼层
Javascript学习第一季(5)

上篇文章讲了js中对象和数组的一些方法。
这章我们先说说函数,然后来点实战。

1 ,函数:
function是一个定义一次 却可以多次调用的js代码。
当一个函数被一个对象调用时,那么这个函数就叫做这个对象的方法。

function cssrain( x , y)
{
//code
}
解释:
cssrain : 为函数名;
( )     :   为 运算符;
x , y :   为 参数;

2 ,函数的返回值:
function a(x){
    document.write(x);
}
function b(y){
   document.write(y);
   return y;
}
alert( a(1) ) //因为没写return,所以返回undefined
alert( b(2) )

3 function语句和函数直接量:
function f(x) { return x * x ;}   //

var f = function(x){ return x * x ;}   //

第一个是function语句创建的,第二个是直接用函数直接量定义一个表达式,当然用这种方式,创建的也是匿名函数。
虽然直接量可以匿名,但也可以指定函数名;
比如:

var f = function fact(x){ return x * fact(x-1) ;}   //这样做的好处; 调用自身非常爽。

4 函数命名:
function like_this(){}
或者 function likeThis(){} //驼峰式

5 函数的参数:
由于js是一种宽松类型语言,参数不需要指定什么数据类型。参数也可以多 也可以少,
比如: function x(a,b){} //我们写了2个参数
如果我们传了3个参数,js会自动忽略掉多的/
实例:
function x(a,b){
document.write(a+ " "+b);
}
x(1,2,3,4);

如果我们只传了一个参数,会出现什么情况呢?
function x(a,b){
document.write(a+ " "+b);
}
x(1);
我们发现输出 了undefined,所以js会把少的,赋予undefined;
这样可能会引起程序错误。
解决:
function x(a,b){
var b = b || " "; // 这个是或运算符,如果前面的b为undefined,也就是false,他会取后面的空字符
document.write(a+ " "+b);
}
x(1);

6,实战:
编写一个javascript图片馆:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gbk" />
<title>Image Gallery</title>
<script type="text/javascript" >
function showPic(whichpic) {
var source = whichpic.getAttribute("href"); //获取当前点击的元素的属性href的值
var placeholder = document.getElementById("placeholder"); //获取目标
placeholder.setAttribute("src",source);
/*
设置目标的属性src。从而达到改变图片。
setAttribute完成了2部操作:即先创建属性,然后赋值。如果属性存在,则覆盖属性的值。

当然我们可以用 placeholder.src = source;
不过,还是建议大家使用setAttribute(),它是1级dom,
他可以对文档中的任何一个元素的任何一个属性做出修改。
另外他的移植性更好。
*/
var text = whichpic.getAttribute("title");
//获取当前点击的元素的属性title的值
var description = document.getElementById("description");//获取目标
description.firstChild.nodeValue = text;
/*
   或者使用
   description.childNodes[0].nodeValue = text;
*/
}
</script>
</head>
<body>
<h1>javascript 图片馆</h1>
<!--
在a标签上加事件我们要注意,避免要他跳转。
解决方法:函数返回false; 事件认为链接没有被点击。

当然这种情况是在href的值有用的情况下。

如果href的值是javascript:void(0);也可以不跳转。

-->
<ul>
    <li>
      <a href="images/fireworks.jpg" title="test1" onclick="showPic(this); return false;">test1</a>
    </li>
    <li>
      <a href="images/coffee.jpg" title="test2" onclick="showPic(this); return false;">test2</a>
    </li>
    <li>
      <a href="images/rose.jpg" title="test3" onclick="showPic(this); return false;">test3</a>
    </li>
    <li>
      <a href="images/bigben.jpg" title="test3" onclick="showPic(this); return false;">test4</a>
    </li>
</ul>
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
<p id="description">选择图片.</p>
</body>
</html>

看了这个例子,也许你会纳闷,我怎么就看不懂呢?
如果是这样,那么你的纳闷是对的。呵呵。

看不懂就看不懂吧。 先把看不懂的 拿笔记住, 后面几章我们讲 学习 DOM编程。
到时候 一切不懂 都会被化解。。。。。。

总节:
这章没说什么重大的东西,浪费了大家时间了。请原谅我。。。
不过下几章,相信大家都比较感兴趣。。。保密。^_^。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-2-3 09:46:28 | 显示全部楼层
Javascript学习第一季(6)

上篇文章纳闷的问题,将在这章和以后的几章里,慢慢搞定。
从今天起,开始学习DOM编程 让我们慢慢称为一名初级的js程序员。
然后往js匠人方向发展。

学习英文:
Dom:文档对象模型。Document object model
Bom:浏览器对象模型。
注:也可以叫窗口对象模型。(window object model.)
API:应用编程接口。
注:DOM其实可以看作一种API。
Node:节点。
注:节点分为:元素节点,属性节点,文本节点。
元素节点 包含 属性节点和文本节点。

Dom树:


下面我们直接看 到底怎么操作DOM。
创建元素节点。createElement():
<SCRIPT LANGUAGE="JavaScript">
var a = document.createElement("p");
alert( "节点类型是 : " +a.nodeType   + " , 节点名称是: " + a.nodeName);
</SCRIPT>
输出 ;     nodeType 是 1   .    a.nodeName 是 p ;
所以它创建的是一个元素节点 ….你也许会想 为什么文档中没发现 节点 p呢?
我们看下面例子:
<body>
</body>
<SCRIPT LANGUAGE="JavaScript">
var a = document.createElement("p");
document.body.appendChild(a);
</SCRIPT>
用firebug查看下,发现文档中已经 有我们需要的结果了。


原来createElement()方法创建出来的新元素节点不会被自动添加到文档里,既然没添加到文档里,说明它还是一个游离的状态。如果想把它添加到文档里,可以使用 appendChild()或者insertBefore()方法或者replaceChild()方法(后面介绍)。

2,创建文本节点。createTextNode():
var b = document.createTextNode("my demo");
alert( "节点类型是 : " +b.nodeType   + " , 节点名称是: " + b.nodeName);
输出 ;     nodeType 是 3   .    a.nodeName 是 #text ;
所以它创建的是一个文本节点 ….你也许又会想 为什么文档中没发现 这个文本节点 呢?难道也和createElement()一样,需要使用appendChild()添加到文档里。

对的,你的想法非常对。
我们看下面例子:
<body>
</body>
<SCRIPT LANGUAGE="JavaScript">
var mes = document.createTextNode("hello world");
var container = document.createElement("p");
container.appendChild(mes);//先把文本节点添加到 元素节点
document.body.appendChild(container);//再把元素节点添加到 文档里
</SCRIPT>

复制节点。cloneNode(boolean) :一个参数:
看一个例子:
<body>
</body>
<SCRIPT LANGUAGE="JavaScript">
var mes = document.createTextNode("hello world");
var container = document.createElement("p");
container.appendChild(mes);
document.body.appendChild(container);
var newpara = container.cloneNode(true);//true和false的区别
document.body.appendChild(newpara );

var newpara = container.cloneNode(false);//true和false的区别
document.body.appendChild(newpara );
</SCRIPT>
看下firebug下的结果:


看出 true 和false的区别了吧。
true的话:是<p>hello world</p> 克隆。
false: 只克隆 <p></p> ,里面的文本不克隆。
和createElement()一样,克隆后的新节点 不会被自动插入到文档 。需要appendChild();
另外还有一个注意: 如果克隆后,id一样,不要忘记用 setAttribute(“id” , “ new_id “);
来 改变新的节点的ID。

插入节点。appendChild():
前面都用到几次了, 应该大概的用法都知道了。
具体解释就是:
给元素追加一个子节点, 新的节点 插入到 最后。
var container = document.createElement("p");
var t = document.createTextNode("cssrain");
container.appendChild(t);
document.body.appendChild(container);

另外 appendChild()不仅可以用来追加新的元素,也可以你 挪动 文档中现有的元素。
看下面的例子:
<p id="msg">msg</p>
<p id="content">content</p>
<p id="aaa">aaaaaaaa</p>
<script>
var mes = document.getElementById("msg");
var container = document.getElementById("content");
container.appendChild(mes);
</script>
//发现msg放到 content 后面去了 。
Js内部处理方式:
先把ID为msg的从文档中删除,然后再插入到content 后,作为content的最后一个节点 插入。
结果为:
<p id="content">
content
<p id="msg">msg</p>
</p>
<p id="aaa">aaaaaaaa</p>

插入节点。insertBefore():
顾名思义,就是把一个新的节点插入到目标节点的前面。
Element.insertBefore( newNode , targerNode );
// 注意 第一个参数 是新的节点, 后面是目标节点(插入的位置)。
// 新节点是客人,肯定先服务他咯。。。 ^_^

第二个参数是可选,如果第二个参数不写,将默认添加到文档的最后,相当于appendChild();
我们看看insertBefore()怎么使用:
<div id="cssrian">
<p id="content">1111</p>
<div id="msg">msg<div>test</div></div>
<p id="content">222</p>
<p id="aaa">aaaaaaaa</p>
</div>
<script>
var msg = document.getElementById("msg");
var aaa = document.getElementById("aaa");
var test = document.getElementById("cssrian");
test.insertBefore( msg , aaa );
</script>
// 我们发现ID为msg的 插入到了 aaa的前面。
Js内部处理方式跟 appendChild()相似。也是:
先把ID为msg的从文档中删除,然后再插入到 aaa 前,作为aaa的前面一个节点 插入。


大家自己动动手写写,不然光看记忆性不好。
好了,讲到这里,明天继续讲。
今天讲了 用dom方式 创建节点,复制节点,插入节点。
明天我们将讲 删除节点,替换节点,查找节点等。。。。。。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-2-3 09:46:53 | 显示全部楼层
Javascript学习第一季(7)

上篇文章我们讲了 用dom方式 创建节点,复制节点,插入节点。
今天我们将讲 删除节点,替换节点,查找节点等。

直接从方法说起:
删除节点。removeChild():
<body>
<div id="cssrain">
<div id="a">a </div>
<div id="b">b </div>
<div id="c">c </div>
</div>
</body>
<script>
var msg = document.getElementById("cssrain");
var b = document.getElementById("b");
msg.removeChild(b);
</script>
如果不知道要删除的节点的父节点是什么?可以使用parentNode属性。
比如:
<body>
<div id="cssrain">
<div id="a">a </div>
<div id="b">b </div>
<div id="c">c </div>
</div>
</body>
<script>
var b = document.getElementById("b");
var c = b.parentNode;
c.removeChild(b);
</script>

替换节点。repalceChild()
element.repalceChild( newNode , oldNode ); // 新节点是客人,肯定先服务他咯。。oldNode必须是Element的一个子节点。
例子:
<body>
<div id="cssrain">
<div id="a">a </div>
<div id="b">b </div>
<div id="c">c </div>
</div>
</body>
<script>
var cssrain = document.getElementById("cssrain");
var msg = document.getElementById("b");
var para = document.createElement("p");
cssrain.replaceChild( para , msg );
</script>

3,查找节点
相对上面的方法,查找节点是比较简单的。
因为很多人都用过。(记得我认识js的第一句就是getElementById();)
getElementById();
返回一个对象, 对象拥有 nodeName , nodeType , parentNode , ChildNodes 等属性。

getElementsByTagName() 查找标签名的所有元素。
返回一个集合,可以用循环取出每个对象,对象拥有 nodeName , nodeType , parentNode , ChildNodes 等属性。
例子:
var ps = document.getElementsByTagName(“p”);
for(var i=0 ; i< ps.length ; i++){
           ps.setAttribute(“title”,”hello”);
//也可以使用: ps.item(i).setAttribute("title","hello");
}

设置/获取属性节点。
setAttribute();//设置
例子:
var a = document.createElement(“p”);
a.setAttribute(“title”,”my demo”);
不管以前有没有title属性,以后的值 是 my demo。

getAttribute();//获取
例子:
var a =document.getElementById(“cssrain”);
var b = a.getAttribute(“title”);
获取的时候,如果属性不存在,则返回空,注意ie和ff返回不同。
<body>
    <p title="test">aaaa</p>
<p>bbbb</p>
<script type="text/JavaScript">
   var paras = document.getElementsByTagName("p");
   for (var i=0; i< paras.length; i++) {
   var title_text = paras.getAttribute("title");
   if (title_text != null) {
   //这样写会有个问题:ff只弹一次,ie却弹了2次。
   //如果 if (title_text != "") 这样写,ie只弹1次,ff却弹出2次。
   //如果这样写呢? if (title_text)   ,我们发现,ie只弹1次,ff也只弹出1次。
   //if (title_text) 才是我们想要的。
   //注意:如果不存在 ff下返回null
   //ie返回 "" ;
   alert(title_text);
   }
}
</script>
</body>
返回虽然不同,但是可以用一个方法来判断。
if(a.getAttribute(“title”) ){
// do something
}

5,hasChildNodes:
由名字就可以知道,是判断元素是否有子节点。
返回boolean类型。
文本节点和属性节点不可能有子节点,所以他们的hasChildNodes 永远返回false;
hasChildNodes经常跟 childNodes 一起使用。
比如:
<body>
<div id="cssrain">
<div id="a">a </div>
<div id="b">b </div>
<div id="c">c </div>
</div>
</body>
<script>
var ps = document.getElementById("cssrain")
if(ps.hasChildNodes){
        alert( ps.childNodes.length );     
}
</script>


大家自己动动手写写,不然光看记忆性不好。
好了,讲到这里,明天继续讲。
今天讲了 用dom方式删除节点,替换节点,查找节点, 获取属性等。。。
操作DOM的方法也差不多了。
明天我们讲DOM 属性…..
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

蓝色动力网络微信平台
网站管理,业务合作联系邮箱: admin#lansedongli.com    QQ:13412492 限网站业务问题.
网站帐号、密码、密保找回请使用注册邮箱,发送邮件至 password#lansedongli.com ,否则不予受理.
免责声明:本论坛所有文字和图片仅代表其个人观点.
本站某些资料或文章来自于互联网,不代表本站观点,如果侵犯了您的权益,请来信告知,我们会在三天内删除.
为了给大家一个更好的交流场所,请勿在本论坛发表与中华人民共和国法律相抵触的言论,请合作,谢谢!
Copyright © 2007-2019 Corporation Powered by网吧系统 版权所有    转载请注明!
浙ICP备11043737号-1 程序:Discuz! x3.4

湘公网安备 43018102000145号

手机版|Archiver|蓝色动力网络   

快速回复 返回顶部 返回列表