Javascript教案
https://www.360docs.net/doc/e213243080.html,/p-57651799.html教案
Javascript部分
共10天40学时2周
第一天Javascript简介
第一节简介
1.1 Javascript简介：
Javascript的历史
1992年，一家名为Nombas的公司开发一种叫C减减(C-minus-minus，简称Cmm，有点与C++对应的意味)的嵌入式脚本语言。Cmm背后的理念很简单：一个足够强大可以替代宏操作（macro）的脚本语言，同时保持C/C++足够的相似性（C 语言太经典了，特别是其语法有着简洁美），以便开发人员能很快学会。这个脚本语言被捆绑在一个叫做CEnvi的共享软件产品中，它首次向开发人员展示了这种语言的威力。Nombas最终把Cmm的名字改成了ScriptEase，原因是后面的部分（mm）听起来过于“消极”，同时字母“C”令人害怕。现在ScriptEase 已经成为了Nombas产品背后主要驱动力（怎么我觉得这家公司已经不存在了呢？）。当Netscape Navigator（盛极一时的网景的浏览器，结果被微软IE的免费策略搅黄了局）暂露头角时，Nombas开发了一个可以嵌入网页中的CEnvi的版本。这些早期的实验称为Espresso Page，它们代表了第一个在万维网上使用的客户端脚本语言。而Nombas丝毫没有料到它的理念将会
成为internet的一块重要基石。
当internet普及越来越广时，对于开发客户端脚本的需求也逐渐增大。此时，大部分internet用户仅仅通过28.8kbit/s的Modem来连接到网络，即使这时网页已经不断地变得更大和更复杂。加剧用户痛苦的是，仅仅为了简单的表单有效性验证，就要与服务器进行多次的往返交互。设想一下，用户填写完一个表单，点击提交按钮，等待30秒后，看到的却是一条告诉你忘记填写一个必要的字段的信息。那时正处于技术革新最前沿的Netscape，开始认真考虑一种开发客户端语言来处理简单的问题。
当时为Netscape工作的Brendan Erich，开始着手为即将在1995年发行的Netscape Navigator 2.0开发一个称之为LiveScript的脚本语言，当时的目的是同时在浏览器和服务器使用它。Netscape与Sun公司联手及时完成了LiveScript的实现。就在Netscape Navigator 2.0即将正式发布前，Netscape将其更名为Javascript（想当年，也就是95年，正式Java普遍开始流行的一年，Java开始火起来，似乎打上一个Java的标签，也会火起来一样），目的是为了利用Java这个internet时髦词汇。Netscape的这一决定也实现了当初的意图，Javascript从此变成了因特网的必备组件。
因为Javascript 1.0如此成功，Netscape在Navigator 3.0中发布了Javascript 1.1版本。恰巧那个时候，微软决定进军浏览
器市场，发布了IE 3.0b并搭载了一个Javascript的克隆版，叫做Jscript（微软一直是一名成功的模仿者，这样命名是为了避免与Netscape潜在的许可纠纷）。微软步入浏览器领域的这重要一步当然推动了javascript的进行一步发展。
在微软进入后，有3种不同的Javascript版本同时存在：Netsacpe Navigator 3.0中的Javascript、IE中的JScript以及CEnvi 中的ScriptEase。与其他编程语言不同的是，Javascript并没有一个标准来统一其语法或特性，而这3种不同的版本恰恰突出了这个问题，随着用户担心的增加，这个语言标准化显然已经势在必行。
1997年，Javascript 1.1作为一个草案提交给ECMA（欧洲计算机制造商协会）。第39技术委员会（TC39）被委派来“标准化一个通用、跨平台、中立于厂商的脚本语言的语法和语义”。由来自Netscape、Sun、微软、Borland和其他一些对脚本编程感兴趣的公司的程序员组成的TC39锤炼出了ECMA-262，该标准定义了叫做ECMAScript的全新脚本语言。
在接下来的几年里，ISO/IEC（国际化标准组织及国际电工委员会）也采纳ECMAScript作为标准（ISO/IEC-16262）。从此，Web浏览器就开始努力（虽然有着不同成都的成功和失败）将ECMAScript作为Javascript实现的基础。
Javascript的优点
1.简单性
Javascript是一种脚本编写语言，她采用小程序段的方式实现编程，像其他脚本语言一样，Javascript同样也是一种解释性语言，他提供了一个简易的开发过程，他的基本结构形式与C、C++十分类似，但他不像这些语言一样，需要先编译，而是在程序运行过程中被逐行的解释，他与HTML标记结合在一起，从而方便用户的使用操作。
2.动态性
Javascript是动态的，他可以直接对用户或客户输入作出响应，无须经过web服务程序，他对用户的反映响应，是采用以事件驱动的方式进行的，所谓事件驱动，就是指在页面中执行了某种操作所产生的动作，称为“事件”。比如按下鼠标、移动窗口、选择菜单等都可以视为事件，当事件发生后，可能会引起相应的事件响应。
3.跨平台性
Javascript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持javascript的浏览器就可以正确执行。
4.节省CGI的交互时间
假如提交一个简单的表单，就需要与服务器进行多次的交互，点击提交，等待30秒后被告之没有填写住址等等类似的事
情发生让人感觉非常不舒服，客户端脚本就显得越来越重要，Javascript可以在数据被提交给服务器之前，预处理客户端的数据。
Javascript的局限性
浏览器有很多种，每种对javascript的支持程度是不一样的，效果会有一定的差距。
1.2 主要应用
控制文档的内容和表现
控制浏览器的行为
和文档的内容相互作用
和用户交互
"https://www.360docs.net/doc/e213243080.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">
第二节简介
2.1 javascript不能做的（限制多，安全性高）
设置或检索浏览器参数设置、主窗口外观特性、动作按钮和打印
在客户机上启动一个应用程序
在客户端或服务器上读/写文件或文件夹
重新传输从服务器上捕获的现场数据流
从web站点访问者处向用户发送机密的电子邮件
2.2 javascript并非Java
不同的公司：sun、Netscape（网景）；
不同类型：面向对象编译型、基于对象解释型；
独立性：单独执行、嵌入到HTML，不能单独运行；
2.3 javascript在客户端应用的三部分构成
作为核心的ECMAScript：语言基础，定义了基本的语法和语义；
javascript的核心，描述该语言的语法和基本对象ECMA标准
Jscript是ECMAScript的一种实现，功能较多
ActionScript flash AIR Flex
Netscape LiveWire是javascript在服务器端的实现
JavaScript HTML XML Ajax
文档对象模型DOM：操作HTML/XML的API描述处理网页内容的方法和接口W3C标准;
浏览器对象模型BOM：操作浏览器功能的API，描述与浏览器进行交互的方法和接口；
开发环境
1）选择一个自己喜欢的编辑器
●Notepad++
●VIM
●Editplus
●Gedit
●Emacs
●其它
2）符合W3C标准的浏览器
●Firfox
●IE
●Google chrome
●Opera
●Safari
3）调试工具
下的firebug、venkman等, FF-----“辅助选项”-----
●Firefox
“firebug”---安装
或者下载到firebug插件拖入浏览器即可
下的ie developertoolbar, IE---“工具”----“开发人员工
●IE
具”
2.4 javascript的引用
在
内部标记包含式
Js外部引用式
common.js文件内容
function showAlert（）{
alert（“web程序设计“）；
}
事件跟随式
第三节语言基础
3.1注意事项
语句分隔符；
注释标记
// 单行注释
/*……..*/ 多行注释
3.2数据类型
三种主要数据类型，两种复合数据类型和两种特殊数据类型
主要（基本）数据类型
●字符串
●数值
●布尔
复合（引用）数据类型
●对象
●数组
特殊数据类型
●null
●undefined
注意事项：
?String字符串类型：字符串是用单引号或双引号来说明的；
?数值数据类型：Javascript支持整数和浮点数。整数可以为
正数、0或者负数；浮点数可以包含小数点、也可以包含一个“e”（大小写均可，表示“10的幂”）；
?Boolean类型：true和false，不能用1和0；
?Undefined数据类型：变量创建后未赋值；
?Null数据类型：没有任何值，什么也不表示；
3.3判断数据类型
typeof 运算符
说明：
返回一个用来表示表达式数据类型的字符串
有六种可能：number、string、boolean、object、function、undefined
请注意：null与0不相等，typeof运算符将报告null为object，而非类型null，这点潜在的混淆是为了向下兼容。
3.4数据类型转换
Object.toString() 对象的字符串表示
parseInt（numString）字符串转换得到整数
parseFloat（numString）字符串转换得到浮点
【强制转换】
数值与字符串相加数值转换成字符串
布尔值与字符串相加布尔值转换成字符串
数值与布尔值相加布尔值转换成数值
3.5转义字符
?\n 换行（new line）
?\r 游标回首行（carriage return）
?\t 水平定位（horizontal tab）
?\?单引号（single quote）
?\”双引号（double quote）
?\\ 反斜线（back slash）
?\b 倒退（backspace）
?\f 换页（form feed）
第四节语言基础
4.1 变量和常量
?常量值可以为整型、逻辑型、实型以及字符串型等
?变量用关键字var声明或用赋值的形式
?变量命名规则
1、第一个字符必须是字母（大小写均可）、下划线
（_）或美元符（$）;
2、后续字符可以是字母、数字、下划线或美元符；
3、变量名称不能是保留字；
4、字符大小写敏感；
?变量可以不声明直接使用
?变量弱类型检查，且可随时改变数据类型
演示：骆驼命名法、匈牙利命名法
对于变量的理解；变量是数据的代号，如同人的名字一样：
var num；//在javascript中使用关键字var声明一个变量在javascript中，使用上面的语法就能声明一个变量，以便在之后给其指定值