Javascript学习笔记（一）
Javascript学习笔记（一）
Javascript学习笔记（二）
Javascript学习笔记（三）
1、深入理解eval函数：
（1）介绍javascript中的eval函数的用法
（2）如何在函数内执行全局代码
►先来说eval的用法，内容比较简单，熟悉的可以跳过。
eval函数接收一个参数s，如果s不是字符串，则直接返回s。否则执行s语句。如果s语句执行结果是一个值，则返回此值，否则返回undefined。
需要特别注意的是对象声明语法“{}”并不能返回一个值，需要用括号括起来才会返回值，简单示例如下：
var code1='"a" + 2'; //表达式
var code2='{a:2}'; //语句
alert(eval(code1)); //->'a2'
alert(eval(code2)); //->undefined
alert(eval('(' + code2 + ')')); //->[object Object]可以看到，对于对象声明语句来说，仅仅是执行，并不能返回值。为了返回常用的“{}”这样的对象声明语句，必须用括号括住，以将其转换为表达式，才能返回其值。这也是使用JSON来进行Ajax开发的基本原理之一。在例子中可以清楚的看到，第二个alert语句输出的是undefined，而第三个加了括号后输出的是语句表示的对象。
►现在来说本文的重点，如何在函数内执行全局代码。为了说明这个问题，先看一个例子：
var s='global'; //定义一个全局变量
function demo1(){
eval('var s="local"');
}
demo1();
alert(s); //->global很好理解，上面的demo1函数等价于：function demo1(){var s='local';}，其中定义了一个局部变量s。
所以最后的输出是global并不是什么奇怪的事情，毕竟大家都能很清楚的区分局部变量和全局变量。
仔细体会一下，可以发现eval函数的特点，它总是在调用它的上下文变量空间（也称为：包，closure）内执行，无论是变量定义还是函数定义都是如此，所以如下的代码会产生函数未定义的错误：
var s='function test(){return 1;}'; //一个函数定义语句
function demo2(){
eval(s);
}
demo2();
alert(test()); //->error:test is not defined
这是因为test函数在局部空间定义，demo2函数内可以访问到，外面就访问不到了。而在实际的Ajax开发中，有时我们需要从服务器动态获取代码来执行，以减轻一次载入代码过多的问题，或者是一些代码是通过Javascript自身生成的，希望用eval函数来使其执行。
但这样的动态获取代码的工作一般在函数内完成，比如：
function loadCode(){
var code=getCode();
eval(code);
}可见eval不可能在全局空间内执行，这就给开发带来了不少问题，也看到过很多人为此郁闷。
不过现在偶终于找到了解决办法，嘿嘿，可以同时兼容IE和Firefox，方法如下：
var X2={} //my namespace:)
X2.Eval=function(code){
if(!!(window.attachEvent && !window.opera)){
//ie
execScript(code);
}else{
//not ie
window.eval(code);
}
}现在如果要想在函数内定义全局代码，就可以通过调用X2.Eval(code)方法，一个例子如下：
var s='global';
function demo3(){
X2.Eval('var s="local"');
}
demo3();
alert(s); //->'local'可见，在demo3函数内重新定义了全局变量s="local"。
需要注意的是X2.Eval并不返回值，如果要进行表达式的求值，还是用系统的eval函数。X2.Eval设计为仅做全局代码定义用。
其实看到这里，或许有人感觉问题也太容易解决了点，呵呵，但发现这个办法倒是需要些运气和技巧的：
（1）对于IE浏览器，默认已经提供了这样的函数：execScript，用于在全局空间执行代码，只是知道的人还不多。
（2）对于Firefox浏览器，直接调用eval函数，则在调用者的空间执行；如果调用window.eval则在全局空间执行。这个知道的人估计就更少了。毕竟alert(eval==window.eval)返回true！
Firefox的eval函数的特点的确是很令人奇怪的，但从javascript规范中倒也能找到其来源：
If value of the eval property is used in any way other than a direct call (that is, other than by the explicit use of its
name as an Identifier which is the MemberExpression in a CallExpression), or if the eval property is assigned to,
an EvalError exception may be thrown.
意思大概就是说eval函数的执行是和调用者相关的，但并没有说其执行上下文的问题。所以IE和Firefox孰是孰非也就很难说了，大家知道解决办法就好。
2、escape(字符串) 与 unescape(字符串)：
escape： 返回字符串的一种简单编码,将非字母数字的符号转换为%加其unicode码的十六进制表示。
例如: escape("Hello there")返回"Hello%20there"
unescape： 将已编码的字符串还原为纯字符串。
3、parseFloat(字符串) 与 parseInt(字符串)：
parseFloat & parseInt解析的过程是从参数str的第一个字符开始解析，如果为非数字，返回NaN；如果为数字，继续解析，直到遇到非数字或解析完，并返回解析的数字。如果在解析过程中遇到了正负号（+ 或 -）、数字 (0-9)、小数点，或者科学记数法中的指数（e 或 E）以外的字符，则它会忽略该字符以及之后的所有字符，返回当前已经解析到的浮点数。同时参数字符串首位的空白符会被忽略。
isNaN() 返回true 或 false。
3、事件&事件驱动&事件与函数关联：
事件驱动）在多年以前，计算机程序通常是以批处理的模式运行。所谓批处理，就是开发者事先写好一些代码，再将这些代码一次运行。这种处理方式有点类似于通过HTML代码直接编写的网页。浏览器只是将HTML代码逐行解析，并显示在浏览器窗口。
后来，在批处理模式中，开发者可以加入一些特定的代码，在程序批处理期间，可以停下来等待用户输入一些信息，并根据用户输入的信息来判断和执行某个程序分支，这就使程序有了初步的交互性。
随着鼠标、触摸屏等设备的出现，批处理时代就逐渐远去，取而代之的是事件驱动的时代。当然，批处理也还能使用，只是使用的范围和频率比事件驱动要少得多。以鼠标为例，在事件驱动中，用户可以使用鼠标单击等方式进行操作，程序则根据鼠标指针的位置以及单击的方式进行响应。JavaScript使用的就是这种事件驱动的程序设计方式。
在JavaScript中，事件（Even）包括以下两个方面：
● 用户在浏览器中产生的操作是事件，如单击鼠标、按下键盘上的键等。
● 文档本身产生的事件，如文档加载完毕、卸载文档等，都是事件。
事件）JavaScript事件驱动中的事件是通过鼠标或热键的动作(点击或按下)引发的。下表中列出了常见的事件及其说明。
FF: Firefox, N: Netscape, IE: Internet Explorer
|
属性 |
说明 |
FF |
N |
IE |
|
onabort |
图像加载被中断 |
1 |
3 |
4 |
|
onblur |
元素失去焦点 |
1 |
2 |
3 |
|
onchange |
用户改变域的内容 |
1 |
2 |
3 |
|
onclick |
鼠标点击某个对象 |
1 |
2 |
3 |
|
ondblclick |
鼠标双击某个对象 |
1 |
4 |
4 |
|
onerror |
当加载文档或图像时发生某个错误 |
1 |
3 |
4 |
|
onfocus |
元素获得焦点 |
1 |
2 |
3 |
|
onkeydown |
某个键盘的键被按下 |
1 |
4 |
3 |
|
onkeypress |
某个键盘的键被按下或按住 |
1 |
4 |
3 |
|
onkeyup |
某个键盘的键被松开 |
1 |
4 |
3 |
|
onload |
某个页面或图像被完成加载 |
1 |
2 |
3 |
|
onmousedown |
某个鼠标按键被按下 |
1 |
4 |
4 |
|
onmousemove |
鼠标被移动 |
1 |
6 |
3 |
|
onmouseout |
鼠标从某元素移开 |
1 |
4 |
4 |
|
onmouseover |
鼠标被移到某元素之上 |
1 |
2 |
3 |
|
onmouseup |
某个鼠标按键被松开 |
1 |
4 |
4 |
|
onreset |
重置按钮被点击 |
1 |
3 |
4 |
|
onresize |
窗口或框架被调整尺寸 |
1 |
4 |
4 |
|
onselect |
文本被选定 |
1 |
2 |
3 |
|
onsubmit |
提交按钮被点击 |
1 |
2 |
3 |
|
onunload |
用户退出页面 |
1 |
2 |
3 |
事件与函数关联）
(1)
(2)
实现翻转图的效果,原来在网页上显示一幅图片,当用户把鼠标移到该图像上时,自动将图像切换成新的一幅图片;当用户把鼠标移开时,最初的图像又被恢复回来。
Test
4、内置对象：
JavaScript是一种基于对象的脚本语句,而不是面向对象的编程语言。对象就是客观世界存在的实体,具有属性和方法两方面特性。访问对象的属性和方法的方式如下:
对象名.属性对象名.方法名()
（1）Array～数组
1> 三种建立方法：
(1)使用方括号,创建数组的同时赋初值var myA=["张三", "李四","王五"];var b=[10,20,30,40];
(2)使用new操作符,创建数组的同时赋初值
var myA=new Array("张三", "李四","王五");注意圆括号和方括号的区别,不能任意使用。
(3)先创建长度为10的数组,内容后面再赋值var anArray = new Array(9);anArray[0]= "张三";
anArray[1]= "李四";
anArray[2]= "王五";
2> 数组的属性：
数组长度（元素个数）：length
var arr = ['a', 'b', 'c'];
document.write(arr.length);
3> 数组的方法：
var arr = ['z', 'a', 'b', 'c', 'd', 'f', 'g'];
// 数组连接成字符串
document.write(arr.join('*'));
document.write('
');
// 数组倒置
document.write(arr.reverse());
document.write('
');
//排序（按汉字拼音字母）
document.write(arr.sort());
document.write('
');
//数组拼接
document.write(arr.concat(4,5));
document.write('
');
var arr2 = ['script', 'sss'];
document.write(arr.concat(arr2));
document.write('
');
var arr3 = new Array('1', '2', '3');
document.write(arr.concat(arr2, arr3));
document.write('
');
// 数组弹出元素,方法用于删除并返回数组的最后一个元素。删除数组的最后一个元素,把数组长度减 1,
// 并且返回它删除的元素的值。如果数组已经为空, 则 pop() 不改变数组,并返回 undefined 值
document.write(arr);
document.write('
');
document.write(arr.pop());
document.write('
');
document.write(arr.length);
document.write('
');
// 数组添加元素,push() 方法可把它的参数顺序添加到 arrayObject 的尾部
arr.push('pushed value');
document.write(arr);
document.write('
');
// 删除数组第一个元素,方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。
// 如果数组是空的,那么 shift() 方法将不进行任何操作,返回 undefined 值。
// 请注意,该方 法不创建新数组,而是直接修改原有的 arrayObject。
document.write(arr.shift());
document.write('
');
document.write(arr);
document.write('
');
// 方法可向数组的开头添加一个或更多元素,并返回新的长度。
// unshift() 方法将把它的参数插入 arrayObject 的头部,并将已经存在的元素顺次地移到
// 较高的下标处,以便留出空间。该方法的第一个参数将成为数组的新元素 0,如果还有第二个参数,
// 它将成为新的元素 1,以此类推。
// 请注意,unshift() 方法不创建新的创建,而是直接修改原有的数组。
arr.unshift("unshiftValue1", "unshiftValue2")
document.write(arr);
document.write('
');
// slice（fromIndex, length, element1, element2）
// 从已有的数组中返回指定index的元素
document.write(arr.slice(1, 4) + "
");
splice（）方法用于插入、删除或替换数组的元素。语法:arrayObject.splice(index,howmany,element1,.....,elementX)
// 相当于在第一个位置添加了一个元素
arr.splice(0, 0, "spliceValue");
document.write(arr + "
");
// 相当于替换了第一个元素
arr.splice(0, 1, "spliceValueOther");
document.write(arr + "
");
var arr = ['z', 'a', 'b', 'c', 'd', 'f', 'g'];
document.write(arr + '
');
arr.splice(2,4,'lzf');
document.write(arr);
打印：z,a,lzf,g打印结果：
内部数组：