HTML/JS  Day  02

                                                          2011年3月4日

了解 JS 是什么，JS能做什么，JS 基本程序结构 

什么是 JS 
JavaScript 被设计用来向 HTML页面添加交互行为。 
JavaScript 是一种脚本语言, 被浏览器解释执行。 
JavaScript 的正式名称是 "ECMAScript". 这个标准由 ECMA 组织发
展和维护。 
JS被用于做什么?  
响应事件, 实现复杂交互。 
验证数据, 提示系统健壮性。 
获取和改变 HTML元素及 CSS属性， 动态改变页面外观。 
JS DOM 编程及服务器异步通信技术—Ajax, 成为 RIA(Rich Internet Applications)的解决方案之一。 
JS在页面中的声明位置  
•  页面内部  
  <script type="text/JavaScript" src="some.js"> 
    var flag = true; 
    function validate() {…} 
  </script>  
•  单独文件  
<script type="text/JavaScript" src="some.js"></script> 
•  嵌入 HTML元素内部  
<a href="javascript:alert(‘Click Me’);">…</a> 
基于事件响应  
  <script type="text/JavaScript" src="some.js"> 
    function validate() {…} 
  </script> 
    … … … 
  <input type=“button” value=“OK” 
  <!—事件发生后，调用 validate方法-->

掌握 JS基本数据类型及其运算

JS有 3种基本数据类型  
number, string, boolean  
var n = 2; var str = "ECMAScript"; var flag = true;

typeof 用于返回类型  
 undefined, null, number, string, boolean, object

null和 undefined 
 var nullV = null; alert(nullV == undefined); //true

Infinity和 NaN 
对于 number类型 Infinity表示无穷, NaN表示非数字  
isNaN("ABC") // false 

parseInt(…)和 parseDouble(…) 
用于将字符串转换为数值

toString(…) 
用于将数值转换为字符串 

字符串的基本属性和方法 
•  length属性  返回字符串的长度  
•  charAt(index)   返回指定位置的字符  
•  substring(from, to) 返回子字符串  
•  indexOf(str) 指定字符串在原字符串中第一次出现的位置  
•  lastIndexOf(str) 指定字符串在原字符串中最后一次出现的的位置 
•  match(regexp)   返回匹配指定正则表达式的字符串  
•  search(regexp)  返回按照正则表达式检索到的字符串位置  
•  toLowerCase/toUpperCase 返回小写/大写形式 
 
掌握如基本事件及其含义  
onclick 鼠标单击（参见实例）  
onchange 内容改变（参见实例）  
onfocus 获得焦点（参见实例）  
onblur 失去焦点（参见实例）  
onload 元素加载显示（参见实例） 
onunload 页面关闭（参见实例） 
  鼠标移出（参见实例） 
onDblClick 鼠标双击（参见实例） 

熟练的使用数组、日期等

数组的基本操作  
•  创建数组, 长度由后期赋值决定  
  var arry1 = new Array;                 
  for (i = 0; i < 5; i++) {                     
    arry1[i] = 2 * i + 1;                 
  } 
•  length属性返回数组的长度                 
alert("arry1.length=" + arry1.length);                            
•  toString()方法, 返回数组的字符串表示                 
alert("arry1=" + arry1.toString());  
•  构建数组并初始化(有点像 Java) 
arry2 = [2, 4, 6, 8]; 
•  concat方法, 用于连接两个数组                 
var arry3 = arry1.concat(arry2); 
alert(arry3); // 1, 3, 5, 7, 9, 2, 4, 6, 8 
•  join 用于将数组中的各个元素连接成字符串, 默认用","连接,也可以指定连接的字符.   
  var arry5 = ["one", "two", "three"];  
  var strArry = arry5.join(); // "one,two,three“ 
  strArry = arry5.join("|"); "one|two|three" 
•  调用 reverse可以将数组反转  
  arry8 = [1,2,3,4,5]; 
  arry8.reverse(); // 5, 4, 3, 2, 1 
•  slice用于截取数组的一部分并以数组的形式返回  
  var arry9 = ['一','二','三','四','五']; 
  var arry10 = arry9.slice(1,3); // 二, 三  
•  splice用于删除原数组的一部分内容, 并用指定的元素替换  
  var arry11 = ['A', 'B', 'C', 'D', 'E', 'F', 'G']; 
  arry11.splice(1, 5, '&','%','#'); // A, &, %, #, G 
•  sort 方法用于将数组排序                 
var arry6 = [2, 3, 1, 6, 5, 3, 1, 4, 7]; arry6.sort();  
// 1, 1, 2, 3, 3, 4, 5, 6, 7 
对于字符串数组, sort方法使用字典的顺序排序                 
var arry7 = ['BB', 'AAA', 'C']; 
arry7.sort(); // AAA, BB, C 
可以通过回调函数的方式自定义排序的大小逻辑, 例如:  
arry7.sort(function(a1, a2) { 
return a1.length - a2.length;}); // C, BB, AAA 
=sort 方法运行时将使用数组的元素调用 function(a1, a2) {...} 根据其返回的结果判断元素的大小, 其逻辑为:  
    返回值>0 表示 a1>a2 
    返回值<0 表示 a1<a2 
    返回值=0 表示 a1=a2 
•  栈的操作  
可以利用数组实现栈(先进后出)的操作  
  var arry12 = new Array; 
     // 进栈一个元素  
  arry12.push('one'); 
  // 进栈多个元素    
  var size = arry12.push('two','three','four'); 
  for(i=0; i<size; i++) {          
alert(arry12.pop()); 
  }  

使用 Date对象处理日期  
var date = new Date(); 
alert(date.toString()); 设置/获取时间分量的方法  
setYear(…)/getYear() 
setMonth(…)/getMonth() 
setDate(…)/getDate() 
setHours(…)/getHours() setMinutes(…)/getMinutes() 
setSeconds(…)/getSeconds() 
setMilliseconds()/getMilliseconds  
setTime(…)/getTime()

Math类提供各种数学运算方法：  
alert(Math.sqrt(2));    
alert(Math.PI); 
alert(Math.pow(2,5)); 
alert(Math.random()); 类似的属性和方法还有：  
E, abs, acos, asin, atan, atan2, ceil, cos, exp, floor, log, 
max, min, pow, random, round, sin, sqrt, tan …

一些基本的对于页面元素的操作

每一个页面元素用 id属性标识。 
document（浏览器内建对象）的 getElementById方法可以根据 Id获取
该元素对象。 
通过 style属性可以访问样式。 
例如： 
var d = document.getElementById(“d1”); 
d.style.backgroundColor=”#ff9999”;

注意 JS对 CSS样式属性的命名规则： 
#d1 {color：#ffff99;}    d1.style.color=”#ffff99”; 
#d2{background-color: #ff9999;}  
d2.style.backgroundColor=”ff9999”; 
掌握 Prototype.js 的两个基本方法 

Prototype.js 
Prototype.js是知名的JS框架。应用很广。可以从官方网站下
载：www.prototypejs.org。

$方法 
相当于 document.getElementById 
•  $(‘item1’) 
相当于 document.getElementById(‘item1’); 
•  $('item1', 'item2', 'item3'，…) 
返回一个数组包含分别与 id‘item1’、 ‘item2’ 、‘item3’… 对应的各
个元素。

$F方法 
获得表单的值，相当于 document.getElementById(‘…’).value; 
例如: <input type=”text” id=”name”/> 
… … … 
$F(‘id’)=”Hello”;  
// 相当于 document.getElementBy(‘name’).value

掌握简单的正则表达式操作 

创建正则表达式对象： 
var re = /\d/; 
var reEmail = /^(?:\w+\.?)*\w+@(?:\w+\.?)*\w+$/; 
正则表达式的 test方法用于匹配。 
re.test(“1”); 返回为 boolean类型，表示是否匹配。 
match方法 
字符串的 match方法用于匹配，返回为数组对象，表示匹配到的所有字符
串。（注意表达式中“/g”的问题）。 
search方法 
字符串的 search方法用于查找字符串中第一个匹配的位置 
正则表达式规则（参见学过的 Java API）