Javascript教案.docx

《Javascript教案.docx》由会员分享，可在线阅读，更多相关《Javascript教案.docx（40页珍藏版）》请在冰豆网上搜索。

Javascript教案

Javascript教案

教案

Javascript部分

共10天40学时2周

第一天Javascript简介

第一节简介

1.1Javascript简介：

Javascript的历史

1992年，一家名为Nombas的公司开发一种叫C减减（C-minus-minus，简称Cmm，有点与C++对应的意味）的嵌入式脚本语言。

Cmm背后的理念很简单：

一个足够强大可以替代宏操作（macro）的脚本语言，同时保持C/C++足够的相似性（C语言太经典了，特别是其语法有着简洁美），以便开发人员能很快学会。

这个脚本语言被捆绑在一个叫做CEnvi的共享软件产品中，它首次向开发人员展示了这种语言的威力。

Nombas最终把Cmm的名字改成了ScriptEase，原因是后面的部分（mm）听起来过于“消极”，同时字母“C”令人害怕。

现在ScriptEase已经成为了Nombas产品背后主要驱动力（怎么我觉得这家公司已经不存在了呢）

。

当NetscapeNavigator（盛极一时的网景的浏览器，结果被微软IE的免费策略搅黄了局）暂露头角时，Nombas开发了一个可以嵌入网页中的CEnvi的版本。

这些早期的实验称为EspressoPage，它们代表了第一个在万维网上使用的客户端脚本语言。

而Nombas丝毫没有料到它的理念将会成为internet的一块重要基石。

当internet普及越来越广时，对于开发客户端脚本的需求也逐渐增大。

此时，大部分internet用户仅仅通过28.8kbit/s的Modem来连接到网络，即使这时网页已经不断地变得更大和更复杂。

加剧用户痛苦的是，仅仅为了简单的表单有效性验证，就要与服务器进行多次的往返交互。

设想一下，用户填写完一个表单，点击提交按钮，等待30秒后，看到的却是一条告诉你忘记填写一个必要的字段的信息。

那时正处于技术革新最前沿的Netscape，开始认真考虑一种开发客户端语言来处理简单的问题。

当时为Netscape工作的BrendanErich，开始着手为即将在1995年发行的NetscapeNavigator2.0开发一个称之为LiveScript的脚本语言，当时的目的是同时在浏览器和服务器使用它。

Netscape与Sun公司联手及时完成了LiveScript的实现。

就在NetscapeNavigator2.0即将正式发布前，Netscape将其更名为Javascript（想当年，也就是95年，正式Java普遍开始流行的一年，Java开始火起来，似乎打上一个Java的标签，也会火起来一样），目的是为了利用Java这个internet时髦词汇。

Netscape的这一决定也实现了当初的意图，Javascript从此变成了因特网的必备组件。

因为Javascript1.0如此成功，Netscape在Navigator3.0中发布了Javascript1.1版本。

恰巧那个时候，微软决定进军浏览器市场，发布了IE3.0b并搭载了一个Javascript的克隆版，叫做Jscript（微软一直是一名成功的模仿者，这样命名是为了避免与Netscape潜在的许可纠纷）。

微软步入浏览器领域的这重要一步当然推动了javascript的进行一步发展。

在微软进入后，有3种不同的Javascript版本同时存在：

NetsacpeNavigator3.0中的Javascript、IE中的JScript以及CEnvi中的ScriptEase。

与其他编程语言不同的是，Javascript并没有一个标准来统一其语法或特性，而这3种不同的版本恰恰突出了这个问题，随着用户担心的增加，这个语言标准化显然已经势在必行。

1997年，Javascript1.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主要应用

控制文档的内容和表现

document.write（“

hello,web

控制浏览器的行为

window.status=“欢迎访问javascript ” ; 

和文档的内容相互作用

和用户交互

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"

"http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

varsum=0；

num=Math.floor（）

第二节简介

2.1javascript不能做的（限制多，安全性高）

设置或检索浏览器参数设置、主窗口外观特性、动作按钮和打印

在客户机上启动一个应用程序

在客户端或服务器上读/写文件或文件夹

重新传输从服务器上捕获的现场数据流

从web站点访问者处向用户发送机密的电子邮件

2.2javascript并非Java

Ø不同的公司：

sun、Netscape（网景）；

Ø不同类型：

面向对象编译型、基于对象解释型；

Ø独立性：

单独执行、嵌入到HTML，不能单独运行；

2.3javascript在客户端应用的三部分构成

Ø作为核心的ECMAScript：

语言基础，定义了基本的语法和语义；

javascript的核心，描述该语言的语法和基本对象ECMA标准

Jscript是ECMAScript的一种实现，功能较多

ActionScriptflashAIRFlex

NetscapeLiveWire是javascript在服务器端的实现

JavaScriptHTMLXMLAjax

Ø文档对象模型DOM：

操作HTML/XML的API描述处理网页内容的方法和接口W3C标准;

Ø浏览器对象模型BOM：

操作浏览器功能的API，描述与浏览器进行交互的方法和接口；

Ø开发环境

1）选择一个自己喜欢的编辑器

●Notepad++

●VIM

●Editplus

●Gedit

●Emacs

●其它

2）符合W3C标准的浏览器

●Firfox

●IE

●Googlechrome

●Opera

●Safari

3）调试工具

●Firefox下的firebug、venkman等,FF-----“辅助选项”-----“firebug”---安装

或者下载到firebug插件拖入浏览器即可

●IE下的iedevelopertoolbar,IE---“工具”----“开发人员工具”

2.4javascript的引用

在内部

Ø标记包含式

functionshowAlert（）

{

alert（“web“）；

}

ØJs外部引用式

。

。

。

。

。

。

web程序设计

common.js文件内容

functionshowAlert（）{

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

--

vara=18;

varb=”今年18”；

varc=true；

document.write（typeof（a））;

document.write（typeof（b））;

document.write（typeof（c））;

document.write（typeof（d））;

document.write（typeof（window））;//object

document.write（typeof（test））;

functiontest（xb）

{

If（xb=1）

return“男”；

else

return“女”；

}

//-->

请注意：

null与0不相等，typeof运算符将报告null为object，而非类型null，这点潜在的混淆是为了向下兼容。

3.4数据类型转换

Object.toString（）对象的字符串表示

parseInt（numString）字符串转换得到整数

parseFloat（numString）字符串转换得到浮点

【强制转换】

数值与字符串相加数值转换成字符串

布尔值与字符串相加布尔值转换成字符串

数值与布尔值相加布尔值转换成数值

3.5转义字符

⏹\n换行（newline）

⏹\r游标回首行（carriagereturn）

⏹\t水平定位（horizontaltab）

⏹\’单引号（singlequote）

⏹\”双引号（doublequote）

⏹\\反斜线（backslash）

⏹\b倒退（backspace）

⏹\f换页（formfeed）

第四节语言基础

4.1变量和常量

⏹常量值可以为整型、逻辑型、实型以及字符串型等

⏹变量用关键字var声明或用赋值的形式

⏹变量命名规则

1、第一个字符必须是字母（大小写均可）、下划线（_）或美元符（$）;

2、后续字符可以是字母、数字、下划线或美元符；

3、变量名称不能是保留字；

4、字符大小写敏感；

⏹变量可以不声明直接使用

⏹变量弱类型检查，且可随时改变数据类型

演示：

骆驼命名法、匈牙利命名法

对于变量的理解；变量是数据的代号，如同人的名字一样：

varnum；//在javascript中使用关键字var声明一个变量

在javascript中，使用上面的语法就能声明一个变量，以便在之后给其指定值

vara=“hello”；

varb=“world”；//不需要声明类型

varn=123；

varf=.123；

varMame；

Mame=123；

//同时进行

vara，b，c；

vara=b=c=123；

varb=true；

b=false；

//undefined情况：

值未定义

vara；//没有赋值

alert（a）；//有值，undefined

//未声明的变量

alert（n）；//将会出错，不是undefined

//错误情况

varabc-abc；

var123bad；

varvar；

var21bad；

保留字

Break、delete、function、return、typeof、case、do、if、switch、var、catch、else、in、this、void、continue、false、instanceof、throw、while、debugger、finnally、new、true、with、default、for、null、try

将来的保留字

Abstract、double、goto、native、static、boolean、enum等

数字（只能有整数或小数），字符串可能是最常用的了，还有另外一种类型：

布尔（Boolean）true（非零）、false

varbool=true;//用true表示真值

bool=false；//用false表示假值

Javascript是动态类型语言，声明时可以不指明类型，运行时刻变量的值可以有不同类型

vars=“helloworld”；//声明无需指明字符串类型

s=1.603；//运行时刻指定另一个类型

复合（引用）数据类型：

对象、数组

特殊数据类型：

undefined

4.2运算符和表达式

⏹运算符

⏹赋值运算符：

=、+=、-=、*=、/=、%=

⏹算术运算符：

+、-、*、/、%、++、--、-（负）

⏹字符串运算符：

+

⏹逻辑运算符和关系运算符：

==、！

=、<、>、<=、>=、&&、||、！

⏹位运算符（很少用）

⏹算术表达式

⏹字符串表达式

⏹逻辑表达式

计算各表达式的值

a=5；b=7；c=9

（1）a+b

（2）b*b-4*a*c<=0

（3）c*c>=a*a+b*b

（4）c*c%2==1

（5）b=2*++a

（6）b=2*a++

//字符串相连

vars1=”hello”;

vars2=”world”;

alert（s1+s2）;

vars1=“hello”；

s1=s1+“world”；

alert（s1）；

s1+=“！

！

！

”；

alert（s1）；

//弱类型

varn=10;

vars=”hello”;

alert（n/s）;//NaN，notanumber的缩写

alert（3-s）；//NaN

alert（23*“23”）；//自动类型转换529

alert（23*“ab”）；//不能转换NaN

alert（23+“23”）；//字符串不总是能转换成数字，数字总能转字符

alert（2+3+“23”+4+5）；//52345

alert（2+3+“23”+（4+5））；//括号提高优先级5239

//算术运算只能针对数字，如果有字符串出现NaN：

notanumber的缩写

//比较运算符

alert（12>13）；

alert（（12>13）==（2!

=4））；//混合运算符

alert（“a”<“A“）;//比较的是字符的编码

alert（true&&false）；//false

alert（true||false）；//ture

alert（！

true）；//false

alert（true>false）；//false=0,true=1

alert（！

3）；//3转换成布尔值

alert（！

！

3）；//连用两个！

！

是将变量值转换成布尔值

//a&&b,a为false，不判断b，直接返回false；a为true，返回b

alert（3&&4）；//4

//转换成数字

alert（“3”*1）；

alert（“”*1）；

alert（typeof2）；

prompt（“请输入数字”，“”）；//弹出对话框，用户输入内容，返回输入值

vara=prompt（“请输入数字”，“”）；

a*=1；

alert（a）；

//逻辑运算符

a逻辑值

b逻辑值

a&&b

a||b

！

a

False

False

False

False

True

False

True

False

True

True

True

False

False

True

False

True

True

True

True

False

思考：

Alert（！

！

“”）；//空字符串，不加空格false

Alert（“hello”&&“”）；//空字符串

Alert（“”||”hello”）；hello

Alert（“”||”hello”）；//空

vart=typeof（“123”*1）；//num

vart=typeof（123+“”）；//num

alert（t）；

注意：

不是真正的只返回布尔值，它将最后判断的值显示出来；

逻辑运算表

例如：

vara=prompt（“输入一个数字”，“”）

a*=1;

alert（typeofa）;

4.3运算符的优先级

运算符

描述

.[]（）+-

字段访问、数组下标、函数调用等

++--~!

deletenewtypeofvoid

医院运算符

*/%

+-

<<>>>>>

移位

<<=>>=instanceof

==!

====!

==

&

按位与

^

按位异或

|

按位或

&&

逻辑与

||

逻辑或

:

条件

=op=

赋值，运算赋值

多重求值

自学

注意使用（），减小复杂程度

第二天流程控制

1.1流程控制

所谓结构化程序设计思想，就是要使所设计的程序给人一种一目了然的感觉，条理清晰，模块化，书写层次分明，要求：

⏹顺序结构：

一条接一条，自上而下

⏹选择结构：

判断给定条件，根据不同情况做不同处理

⏹循环结构：

多次重复执行同一系列命令

流程结构

Ø顺序结构

Ø分支结构

●单一选择结构if

●二路选择结构if/else

●内联三元运算符：

●多路选择结构switch

Ø循环结构

●在循环的开始测试表达式while

●在循环的末尾测试表达式do/while

●遍历对象的各个属性for/in

●由计数器控制的循环for

ØBreak和continue

if（true）{

alert（“出现”）；

}

else{alert（“else”）；}

//不存在elseif语法

if（true）alert（“one”）;//只有一条语句可以省略花括号

elsealert（“”）;//只有一条语句可以省略花括号

if（false）{

if（true）{

alert（“true”）；

alert（“”）；

}

}

else

if（true）{

alert（“elseiftrue”）；

}

elseif（true）{

}

else{}

//小练习

varmark=prompt（“请输入”，“”）；

if（!

mark）{//alert（””*1）

alert（“没有输入”）；

}else{

mark*=1；

if（isNaN（mark））{

alert（“输入了非法数字”）；

}else{

If（mark<=100&&mark>=90）

alert（“good”）;}else{if（num<=90&&num>=80）{alert（“ok”）;}}

}

//简化后

if（isNaN（mark））{

alert（“输入了非法数字”）；

}elseif（mark<=100&&mark>=90）{

alert（“good”）；

}elseif（num<=90&&num>=80）{

alert（“ok”）；

}else{

alert（“！

”）；

}

//switch,又叫“开关”

vara=1；

switch（a）{

case1：

alert（“111”）；

break；

case2：

alert（“222”）；

break；

case3：

alert（“333”）；

break；

default：

alert（“default”）；

break；

}

/*循环

for（初始化语句；条件判断；更新计数器）{

循环代码；

}*/

for（vari=0;i<10;i++）{

document.write（i+”
”）

}

//混合

vari=0；