第一讲 JavaScript编程基础 信息学院 周宝刚
课程内容 JAVASCRIPT 简介 JAVASCRIPT编程基础 流程控制 函数 对象编程 文档对象模型与事件驱动 信息学院 周宝刚
JAVASCRIPT 简介 什么是JavaScript JavaScript是Web上的一种功能强大的编程语言，用于开发交互式的Web页面。 JavaScript的前身叫做LiveScript JavaScript 的基本特点 JavaScript是脚本编程语言： JavaScript是基于对象的语言 安全性 跨平台性 讨论Web开发技术的历史，当然要先说说Web的起源。众所周知，Web这个Internet上最热门的应用架构是由Tim Berners-Lee发明的。Web的前身是1980年Tim Berners-Lee负责的Enquire（Enquire Within Upon Everything的简称）项目。1990年11月，第一个Web服务器nxoc01.cern.ch开始运行，Tim Berners-Lee在自己编写的图形化Web浏览器“WorldWideWeb”上看到了最早的Web页面。1991年，CERN（European Particle Physics Laboratory）正式发布了Web技术标准。目前，与Web相关的各种技术标准都由著名的W3C组织（World Wide Web Consortium）管理和维护。 从技术层面看，Web架构的精华有三处：用超文本技术（HTML）实现信息与信息的连接；用统一资源定位技术（URI）实现全球信息的精确定位；用新的应用层协议（HTTP）实现分布式的信息共享。这三个特点无一不与信息的分发、获取和利用有关。其实，Tim Berners-Lee早就明确无误地告诉我们："Web是一个抽象的（假想的）信息空间。"也就是说，作为Internet上的一种应用架构，Web的首要任务就是向人们提供信息和信息服务。 信息学院 周宝刚
JAVASCRIPT 简介 在HTML中嵌入JavaScript 通过标记<SCRIPT>…</SCRIPT>引入JavaScript代码。 Language属性指定脚本类型，如VBScript、JavaScript 链接JavaScript文件 链接方式：使用<SCRIPT>标记的SRC属性指定*.js的URL。 信息学院 周宝刚
JAVASCRIPT 简介 客户端应用 服务器端应用 信息学院 周宝刚
JAVASCRIPT编程基础 常量 JavaScript有三种基本类型的常量：数值型、字符串型和布尔型。 空值型 常量 JavaScript有三种基本类型的常量：数值型、字符串型和布尔型。 空值型 空值就是null，定义空的或不存在的引用。它不等同于空串或0。 未定义值 未定义值就是undefined，表示变量还没有赋值。 变量 所谓变量，就是程序中一个已命名的存储单元。 使用var声明变量 JavaScript变量的类型是动态的 信息学院 周宝刚
JAVASCRIPT编程基础 算术运算符 (+,-,*,/,%,++,-- ) 比较运算符 (<,<=,>,>=,==,!=) 逻辑运算符 (&&,||,! ) 字符串运算符 (+) 位操作运算符 (&,|,^,<<,>>,>>> ) 赋值运算符 (=) 条件运算符 (?: ) 其他运算符 (. [] () ) 信息学院 周宝刚
流程控制 3种对话框: 警示、确认和提示对话框 alert() alert("欢迎浏览本页面！"); confirm() var visited,show_text; visited = confirm(“您来过西湖吗？"); show_text = visited?“您也认为西湖很美吧！":"欢迎您有机会来中大参观!"; document.write(show_text); prompt() name =prompt("请输入您的姓名:",""); 信息学院 周宝刚
流程控制 if 语句 (if…else 语句 ) switch 语句 switch() { case 常数表达式1:语句1;break; case 常数表达式2:语句2; break; … case 常数表达式n:语句n; break; default: 语句n+1; break; } 信息学院 周宝刚
流程控制 for 语句 for(初值表达式;循环判定式;更新表达式) 循环体语句 while 语句 while(循环判定式) 循环体语句 do while 语句 do 循环体语句 while(循环判定式); 信息学院 周宝刚
函数 eval()函数 计算字符串表达式的值，如：x =eval("123*321/9") escape()、unescape()函数 escape()将字符串中的非字母数字字符转换为按格式%XX表示的数字。如: var str="Tom & Jerry Show"; var escapestr=escape("Tom & Jerry Show"); unescape()函数将字符串中格式为“%XX”的数字转换为字符。如: var str="Tom%20%26%20Jerry%20Show"; var unescapestr=unescape(str); 结果为“Tom & Jerry Show”。 信息学院 周宝刚
函数 isNaN ()、isFinite()函数 isNaN函数确定一个变量是否是NaN，如果是，则返回true，否则返回false。 isFinite()函数用于确定一个变量是否有限。如isFinite(1)、isFinite(true)返回true，而isFinite(“a”)返回false。 parseFloat()、parseInt()函数 parseFloat()将字符串开头的整数或浮点数分解出来，转换为浮点数。如，parseFloat(“123.45”)、parseFloat(“123.45abc”)返回浮点数123.45，而parseFloat(“abc123.45”)和parseFloat(true)返回NaN parseInt()将字符串开头的整数分解出来，转换为整数。如，parseInt(“123”)、parseInt(“123.45”)、parseInt(“123.45abc”)都返回整数123，而parseInt(“abc123”)和parseInt(true)返回NaN 信息学院 周宝刚
函数 自定义函数 定义格式： function 自定义函数名() { 函数体 } 在同一个页面中的两个函数不能同名。 函数定义通常放在<HEAD></HEAD>标记之间，确保函数先定义后使用。 调用形式“函数名()” 使用return语句返回值 信息学院 周宝刚
文档对象模型与事件驱动 信息学院 周宝刚
文档对象模型与事件驱动 引用文档对象模型中的对象 所有下层对象都是其上层对象的子对象。而子对象其实就是父对象的属性，所以引用子对象的方式，与引用对象的一般属性是相同的。如： window.document.write("Hello"); 由于window对象是默认的最上层对象，因此引用它的子对象时，可以不使用window： document.write("Hello"); 当引用较低层次的对象时，要根据对象的包含关系，一层一层地引用对象。如： document.form1.yourname 信息学院 周宝刚
文档对象模型与事件驱动 引用文档对象模型中的对象 所有下层对象都是其上层对象的子对象。而子对象其实就是父对象的属性，所以引用子对象的方式，与引用对象的一般属性是相同的。如： window.document.write("Hello"); 由于window对象是默认的最上层对象，因此引用它的子对象时，可以不使用window： document.write("Hello"); 当引用较低层次的对象时，要根据对象的包含关系，一层一层地引用对象。如： document.form1.yourname 信息学院 周宝刚
使用浏览器对象 窗口(Window)对象 对于window对象的使用，主要集中在窗口的打开和关闭、窗口状态的设置、定时执行程序以及各种对话框的使用等四个方面 Open,close, setInterval, location.href 信息学院 周宝刚
使用浏览器对象 文档(document)对象 document.write("当前文档的标题:"+document.title+"<BR>"); document.write("当前文档的URL:"+document.URL+"<BR>"); document.write("当前文档的背景色:"+document.bgColor+"<BR>"); document.write("当前文档的最后修改日期:"+document.lastModified+"<BR>"); document.write("当前文档包含"+document.links.length+"个超链接<BR>"); document.write("当前文档包含"+document.images.length+"个图像<BR>"); 信息学院 周宝刚
使用浏览器对象 for(i=0;i<document.all.length;i++) //遍历文档中的所有标记 { cell=document.all[i]; if(i>0) document.write(","); document.write(cell.tagName); } 信息学院 周宝刚
使用浏览器对象 for(i=0;i<document.all.length;i++) //遍历文档中的所有标记 { cell=document.all[i]; if(i>0) document.write(","); document.write(cell.tagName); } 信息学院 周宝刚
使用浏览器对象 表单(form)对象 form对象的属性、方法和事件 var myform,element,i; myform = document.myform; document.write("<H3>表单中有"+myform.length+"个元素:</H3>"); for (i=0;i<myform.length;i++) { element = myform.elements[i]; if(i>0) document.write(","); document.write(element.name); } 信息学院 周宝刚
使用浏览器对象 表单(form)对象 form对象的属性、方法和事件 var myform,element,i; myform = document.myform; document.write("<H3>表单中有"+myform.length+"个元素:</H3>"); for (i=0;i<myform.length;i++) { element = myform.elements[i]; if(i>0) document.write(","); document.write(element.name); } 信息学院 周宝刚