1 Javascript典型应用
1.1 限长的文本输入区
限定文本框的最大输入字符数,js检测是否超过,超过是给出提示。
1.2 易用的表单
隐藏部分表单项,需要时用按钮或者其他事件触发js,以显示需额外填写的表单项。
1.3 表单验证
验证表单是否为空,是否为数字等。
1.4 下拉菜单
不使用js脚本,只能静态的展示出所有菜单项。
2 JavaScript开发中的可访问性问题
主要是考虑兼容浏览器不支持js的情况,目前浏览器大部分都支持js,此部分显得不那么重要了。详细参考:《ppk谈javascript》2E。
需要注意的是location.replace与location.href的区别:location.href会在浏览器的历史记录中创建一条记录,即会影响“后退”操作。当从一个无脚本版本的页面在加载时检测是否支持脚本,若支持则跳转到支持脚本的相应页面。使用location.href会导致“后退”失效,因为每次后退到无脚本页面时总会转到支持脚本的页面,无法后退到之前的浏览记录。
3 Javascript中的钩子(hook)
用于选择HTML的元素,主要包括id,class,自定义属性,名值对。名值对比较特殊,如
<textarea class="maxlength=300">
此时,CSS选择符为textarea.maxlength=300,但这不起作用。当然可采用字符串函数实现该目的,但这样不清晰、不简洁,在class属性值比较复杂时,如还含有其他字符串,字符串处理过程也要更加复杂。
4 Javascript的6种数据类型
Javascript有4中重要的数据类型和2种小数据类型。重要数据类型:数字、字符串、布尔型、对象。小数据类型:undefined(未定义)和null(空)。
4.1 对象
对象数据类型包括了除数字、字符串、布尔型之外的所有类型。它区别于其他类型的原因是:对象可以被复制、被传递、还可以通过引用来比较。对象和字符串都是传引用的。
Javascript中三种对象:内置的Javascript对象(例如字符串对象)以及宿主对象,或者由Javascript的宿主(浏览器)创建的对象。宿主对象包括那些表示你的页面中的每个HTML元素的各个对象。第三种是自定义对象。
创建对象的方式:
-创建对象的标准Javascript代码,c的值是一个函数,所以c成为一个方法。
var test = new Object();
test.a = 2;
test.b = '2';
test.c = function () {
alert(test.a * test.b);
}
-对象字面量
var test = {
a : 2,
b : '2',
c : function () {
alert(test.a * test.b);
}//注意:没有逗号
}
4.2 null与undefined
null通常意味着无值。在获取不存在的DOM元素时会返回null。
undefined会在以下3中情况出现:
-声明了一个变量,但没有给它赋值;
-访问一个对象尚未声明的属性;
-定义了函数的参数,但没有把值传给它。
5 Javascript变量作用域
Javascript作用域有两种:全局作用域和局部作用域。Javascript没有块级作用域,这与C++和Java不同。Javascript任何局部变量在定义它的整个函数体中都能被识别。
内嵌函数和变量作用域:Javascript函数运行在被定义的作用域中,而不是执行它们的作用域中。即:内嵌函数可以访问所有它的父函数的局部变量,即使父函数在内嵌函数调用之前就已执行。示例代码:(js的闭包)
function sendRequest(url,callback,postData) {
var req = createXMLHTTPObject();
//其他操作
req.onreadystatechange = function() {
if(req.readyState != 4) return;
if(req.status != 200 && req.status != 304) {
alert('HTTP error ' + req.status);
return ;
}
callback(req);
}
}
事件处理程序在sendRequest执行后一段时间才激发,但仍可继续访问req。
6 BOM
6.1 window对象
6.2 document对象
document.cookie
7 DOM
文档中每个节点都拥有5个属性和2个节点列表。
5个属性:parentNode(父节点)、firstChild(第一个孩子)、lastChild(最后一个孩子)、previousSibling(左兄弟)、nextSibling(右兄弟)。
2个节点列表:childNodes[]和children[]。childNodes[]包含所有子节点;children[]仅包含类型为元素节点的子节点,不包含文本类型的子节点。
nodeName:元素节点的名称总是大写字母的标签名;属性节点的名称总是属性名;文本节点的名称总是#text;文档节点的名称总是#document。
nodeValue
nodeType(节点类型):Element、Attribute、Text、Comment、Document等。