JavaScript 基础

王萌 2008年4月20日 JavaScript 基础

JavaScript 简介 • JavaScript 是一种解释型的程序语言。 • JavaScript 是一种基于对象的脚本语言。 • JavaScript 被最广泛地用于浏览器客户端。

JavaScript 实现（implementation）

ECMAScript DOM BOM ECMAScript • ECMAScript描述了以下内容： • 语法（syntax） • 类型（type） • 语句（statement） • 关键字（keyword） • 保留字（reserved word） • 运算符（operator） • 对象（object） • http://www.ecmascript.org

ECMAScript DOM BOM DOM(Document Object Model) • 树（tree）：一种离散数学结构（discrete mathematical structure）。 • 一棵树由n（n≥1且n有限）个节点（node）组成。 • 一棵树有且只有一个根节点（root node）。 • 每个结点有零个或多个子结点（child node）。 • 每一个子结点只有一个父结点（parent node）。 • 具有相同父节点的节点互为兄弟节点（sibling node）。

ECMAScript DOM BOM DOM(Document Object Model) • DOM（文档对象模型）把整个 (X)HTML 或 XML 文档规划成树结构。文档中的每个部分都是一个节点的衍生物。

ECMAScript DOM BOM DOM(Document Object Model) 元素节点 • 考虑如下 HTML 代码：属性节点 <html> <head> <title>JavaScript 基础</title> </head> <body> <h1>DOM(Document Object Model)</h1> <h2>节点（node）</h2> <p class="text">节点这个名词来自网络理论。</p> </body> </html> 文本节点

ECMAScript DOM BOM DOM(Document Object Model) • DOM 使开发者对文档的内容和结构具有空前的控制力。 • 当前流行的 DOM 是 DOM Level 3 。 • DOM 标准 • DOM Core • DOM HTML • 可缩放矢量图形（SVG） • 数学标记语言（MathML） • … • http://www.w3.org/dom

ECMAScript DOM BOM BOM(Browser Object Model) • BOM（浏览器对象模型）可以对浏览器窗口进行访问和操作。例如： • 弹出新的浏览器窗口 • 移动、关闭浏览器窗口及调整窗口大小 • 提供浏览器详细信息的导航对象 • 提供装载到浏览器中页面的详细信息的定位对象 • 对 Cookie 的支持 • 实例化 AxtiveX对象（IE only）

ECMAScript DOM BOM BOM(Browser Object Model) • 由于没有相关的 BOM 标准，每种浏览器都有自己的 BOM 实现。

JavaScript 实现（implementation） • DOM：页面 • BOM：浏览器 • ECMAScript：操作他们的工具

JavaScript 能做什么？ • 验证表单的合法性 • 设置和检索 Cookie • 动态地更改页面元素的外观 • 隐藏和现实元素 • 在页面上移动元素 • Ajax • …

JavaScript 代码的位置 • script标签 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript 示例</title> <script type="text/javascript"> //<![CDATA[ window.alert("Hello world!"); //]]> </script> </head> <body> </body> </html>

JavaScript 代码的位置 • 外部文件 • (X)HTML 文档： • msgbox.js： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript 示例</title> <script type="text/javascript"src="msgbox.js"></script> </head> <body> </body> </html> window.alert("Hello world!");

JavaScript 代码的位置 • 总是把 JavaScript 代码放到 <head>标签中，除了需要使用页面中之前定义的对象的情况。

ECMAScript DOM BOM ECMAScript语法（syntax） • 变量、函数名、对象等区分大小写。 • 变量是弱类型（weak typing）的。 • 例： var name = "mghostsoft"; var year = 2008; varisLeapYear = true; • 每行结尾的分号可有可无。 • 最好的习惯是总加上分号。

ECMAScript DOM BOM ECMAScript语法（syntax） • 注释（comment） • 单行注释以 //开头。 • 多行注释以 /*开头，以 */结尾。 • http://www.ecma-international.org

ECMAScript DOM BOM ECMAScript变量（variable） • 变量的命名（naming）规则： • 第一个字符必须是字母、下划线（_）或美元符号（$）。 • 其余字符可以是字母、数字、下划线或美元符号。 • ECMAScript的关键字（key word）和保留字（reserved word）不能用于给变量命名。 • Camel 标记法：首字母是小写的，接下来的单词都以大写字母开头。 • 例： myTestValue

ECMAScript DOM BOM ECMAScript变量（variable） • 变量的声明（declaration）：使用 var运算符（operator）。 • 语法： • 作为一种良好的编程习惯，在第一次对某个变量进行操作时应该对其声明。 • 对一个没有经过显示声明的变量进行赋值操作的时候隐式声明了这个变量。 • 如果未对变量进行声明，则求解它是不合法的。 varvariable[=iniValue]; varvariable1[=iniValue1], variable2[=iniValue2] , …;

ECMAScript DOM BOM ECMAScript变量类型（type） • 变量的原始类型（primitive type） • Undefined：当变量被声明但未初始化时的类型。该类型只有 undefined一个可取值。 • Null：表示尚未存在的对象。该类型只有 null一个可取值。 • 值 undefined 与 null是相等的。 • Boolean：可取 true或 false两个值。 • Number：既可以表示32位的整数，也可以表示64位的浮点数。

ECMAScript DOM BOM ECMAScript变量类型（type） • 变量的原始类型（primitive type） • String ：任意长度的字符串，字符串字面值（literal value）使用双引号或单引号声明。

ECMAScript DOM BOM ECMAScript变量类型（type） • typeof运算符 • 返回要检查的变量或值的类型。该运算符返回以下值之一： • "undefined" • "boolean" • "number" • "string" • "object" • 例如： window.alert(typeof 95); //显示 "number"

ECMAScript DOM BOM ECMAScript运算符（operator） • 一元（unary）运算符 • 前增量（pre-increment）/前减量（pre-decrement）运算符：在求解变量前自增或自减1。 • 语法： ++variable--variable • 后增量（post-increment）/后减量（post-decrement）运算符：在求解变量后自增或自减1。 • 语法： variable++variable--

ECMAScript DOM BOM ECMAScript运算符（operator） • 逻辑（logical）运算符 • 逻辑与（logical AND）运算符：二元（binary）运算符，当且仅当两个运算数都为 true时运算结果为 true。 • 语法： expr1&&expr2 • 逻辑或（logical OR）运算符：二元运算符，当且仅当两个运算数都为 false时运算结果为 false。 • 语法： expr1||expr2 • 逻辑非（logical NOT）运算符：一元运算符，当且仅当运算数为 false时运算结果为 true。 • 语法： !expr • 以上逻辑运算符仅限于操作数均为 Boolean 型变量的情况，其他更复杂的情况这里不予讨论。

ECMAScript DOM BOM ECMAScript运算符（operator） • 算术（arthmetic）运算符 • 加法（addition）运算符（+） • 减法（subtration）运算符（-） • 乘法（multiplication）运算符（*） • 除法（division）运算符（/） • 取模（modulus）运算符（%）：返回两个运算数相除的余数。例如： window.alert(20 % 7); //显示 6 window.alert(-20 % 7); //显示 -6 window.alert(-20 % -7); //显示 -6

ECMAScript DOM BOM ECMAScript运算符（operator） • 比较（comparision）运算符 • 小于（less-than）运算符（<） • 大于（greater-than）运算符（>） • 小于等于（less-than-or-equal-to）运算符（<=） • 大于等于（greater-than-or-equal-to）运算符（>=） • 等号（equality）运算符（==） • 不等号（inequality）运算符（!=）

ECMAScript DOM BOM ECMAScript运算符（operator） • 条件（conditional）运算符：三元（trinary）运算符，根据条件表达式的真值选择性返回值。 • 语法： boolean_expression?true_value:false_value • 例如： var a = (1 > 2) ? "blue" : "red"; window.alert(a); //显示 "red"

ECMAScript DOM BOM ECMAScript运算符（operator） • 赋值（assignment）运算符 • 简单赋值（simple assagnment）运算符（=） • 复合赋值（compound assagnment）运算符 • += • -= • *= • /= • %=

ECMAScript DOM BOM ECMAScript语句（statement） • if语句 • 语法： if (condition1) { statements } else if (condition2) { statements } else { statements } if (condition) { statements } if (condition) { statements } else { statements }

ECMAScript DOM BOM ECMAScript语句（statement） • do-while语句 • 语法： • while语句 • 语法： do { statements } while (condition) while (condition) { statements }

ECMAScript DOM BOM ECMAScript语句（statement） • for语句 • 语法： for (initialization; expression; updating) { statements }

ECMAScript DOM BOM ECMAScript语句（statement） • switch语句 • 语法： switch (expression) { casevalue1: statements break; casevalue2: statements break; ... casevalueN: statements break; default: statements }

ECMAScript DOM BOM ECMAScript自定义函数 • 函数的定义： • 函数的返回值：使用 return运算符。 • 如果函数不需要返回值，可以省略 return语句。 • 遇到 return将立即停止执行函数并返回调用函数的位置继续执行。 • return 后面的参数可选。 function functionName(arg0, arg1, ..., argN) { statements }

ECMAScript DOM BOM ECMAScript本地对象（native object） • Math 对象：提供解决初等数学所用到的一些常量和函数。 • E属性：自然对数的底（natural base）。 • PI属性：圆周率值（value of the ratio of the circumference of a circle to its diameter）。 • abs() 方法：绝对值（absolute value）函数。 • ceil() 方法：进一法取整函数（ceiling function）。 • floor() 方法：舍去法取整函数（floor function）。 • round() 方法：四舍五入法取整（round-off）函数。

ECMAScript DOM BOM ECMAScript本地对象（native object） • Math 对象 • min() 方法：最小值（mininum）函数。例如： • max() 方法：最大值（maxinum）函数。 • pow() 方法：乘方（power）函数。例如： • sqrt() 方法：平方根（square root）函数。 • random() 方法：随机数（random）函数，返回 (0,1) 上均匀分布的随机数。 window.alert(Math.min(15, 3, 8, 6)); //显示 3 window.alert(Math.pow(2, 10)); //显示 1024 window.alert(Math.pow(0.04, 0.5)); //显示 0.2

ECMAScript DOM BOM JavaScript DOM 编程 • 动态获取文档对象节点 • 按 id值获取对象节点 • sId:要获取的对象节点的 id 值。 • obj:指定 id 值的对象节点。 • 按 name值获取对象节点 • sName:要获取的对象节点的 name 值。 • collObjs:指定 name值的对象节点数组。 obj = document.getElementById(sId); collObjs = document.getElementsByName(sName);

ECMAScript DOM BOM JavaScript DOM 编程 • 动态获取文档对象节点 • 按标签名获取对象节点 • sTagName:要获取的对象节点的标签名。 • collObjs:指定标签名的 oParent的对象节点数组。 collObjs = oParent.getElementsByTagName(sTagName);

ECMAScript DOM BOM JavaScript DOM 编程 • 动态获取对象属性 • obj:要获取属性的对象的引用。 • attributeName:要获取的属性名称。 • vAttrValue:obj的 attributeName属性的值的副本。 vAttrValue = obj.getAttribute(attributeName);

ECMAScript DOM BOM JavaScript DOM 编程 • 动态设置对象属性 • obj:要设置属性的对象的引用。 • attributeName:要设置的属性名称。 • vAttr:要设置的属性的值。 obj.setAttribute(attributeName, vAttrValue);

ECMAScript DOM BOM JavaScript DOM 编程 • 动态设置对象样式 • style属性 • 语法： • cssProperty: CSS 属性的名称，以驼峰式名称取代样式表中的连接线风格名称。 • 例如： • style 属性是一个 CSSStyleDeclaration对象。它只能查询内嵌样式表。 obj.style.cssProperty document.getElementById("warning").style.color = "red"; document.getElementById("warning").style.fontWeight = "bold";

ECMAScript DOM BOM BOM 体系结构 • 对象 • 数组

ECMAScript DOM BOM window对象 • window的实例包括： • 整个浏览器窗口 • 框架页中的每一个框架 • parent对象 • self 对象 • top对象

ECMAScript DOM BOM window对象 • window的实例包括： • 整个浏览器窗口 • 框架页中的每一个框架 • 使用 window.frames集合引用框架。 window <frameset rows="100, *"> <framesrc="main_nav.htm" name="mainNav" /> <frameset cols="50%, 50%"> <framesrc="sub_nav" name="subNav" /> <framesrc="main.htm" name="main" /> </frameset> </frameset> mainNav subNav main window.frames["mainNav"] window.frames["main"] window.frames["subNav"]

ECMAScript DOM BOM window对象 • 不需要明确引用 window对象。 • 在引用函数、对象或集合时，解释程序都会检查 window对象。

ECMAScript DOM BOM window对象 • 窗口操作的方法 • 由于用户体验的原因，应尽量避免使用这些方法。 • window.moveBy(dx, dy) • window.moveTo(x, y) • window.resizeBy(dw, dh) • window.resizeTo(w, h)

ECMAScript DOM BOM window对象 • 打开新窗口 • 打开新窗口的方法 • sURL：新窗口的 URL 。 • sWindowName：用于打开 sURL的窗口名称。如果已存在，则用这个框架（窗口）打开该地址；否则打开新窗口。 • sWindowFeatures：指定新窗口的特性，包括尺寸、位置等。 • oNewWindow = window.open(sURL, sWindowName[, sWindowFeatures])

ECMAScript DOM BOM window对象 • 打开新窗口 • opener属性：使用 window.open() 方法打开当前窗口的 window 对象的引用。 • 由某些事件触发的 open() 方法可能会被弹出时窗口拦截器拦截。

ECMAScript DOM BOM window对象 • 关闭窗口的方法 • 主窗口能够使用该方法关闭它打开的子窗口。 • 试图关闭主窗口时会弹出提示让用户确认。 • window.close()

ECMAScript DOM BOM window对象 • 弹出对话框的方法 • 信息对话框 • 确认对话框 • bSelection：用户单击的按钮，“确定”为 true，“取消”为 false。 • window.alert(sMessage) • bSelection = window.confirm(sMessage)

ECMAScript DOM BOM window对象 • 弹出对话框的方法 • 输入对话框 • sMessage：窗口上的说明文本。 • sDefault：文本框中的默认文本。 • vInput：如果单击“确定”，则为用户输入的文本的字符串；如果单击“取消”，则为 null。 • vInput = window.prompt(sMessage, sDefault)

JavaScript 基础