Javascript教案.docx
《Javascript教案.docx》由会员分享，可在线阅读，更多相关《Javascript教案.docx（17页珍藏版）》请在冰豆网上搜索。
Javascript教案
教案
Javascript部分
共10天40学时2周
第一天Javascript简介
第一节简介
Javascript简介：
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用户仅仅通过s的Modem来连接到网络，即使这时网页已经不断地变得更大和更复杂。
加剧用户痛苦的是，仅仅为了简单的表单有效性验证，就要与服务器进行多次的往返交互。
设想一下，用户填写完一个表单，点击提交按钮，等待30秒后，看到的却是一条告诉你忘记填写一个必要的字段的信息。
那时正处于技术革新最前沿的Netscape，开始认真考虑一种开发客户端语言来处理简单的问题。
当时为Netscape工作的BrendanErich，开始着手为即将在1995年发行的NetscapeNavigator开发一个称之为LiveScript的脚本语言，当时的目的是同时在浏览器和服务器使用它。
Netscape与Sun公司联手及时完成了LiveScript的实现。
就在NetscapeNavigator即将正式发布前，Netscape将其更名为Javascript（想当年，也就是95年，正式Java普遍开始流行的一年，Java开始火起来，似乎打上一个Java的标签，也会火起来一样），目的是为了利用Java这个internet时髦词汇。
Netscape的这一决定也实现了当初的意图，Javascript从此变成了因特网的必备组件。
因为Javascript如此成功，Netscape在Navigator中发布了Javascript版本。
恰巧那个时候，微软决定进军浏览器市场，发布了IE并搭载了一个Javascript的克隆版，叫做Jscript（微软一直是一名成功的模仿者，这样命名是为了避免与Netscape潜在的许可纠纷）。
微软步入浏览器领域的这重要一步当然推动了javascript的进行一步发展。
在微软进入后，有3种不同的Javascript版本同时存在：
NetsacpeNavigator中的Javascript、IE中的JScript以及CEnvi中的ScriptEase。
与其他编程语言不同的是，Javascript并没有一个标准来统一其语法或特性，而这3种不同的版本恰恰突出了这个问题，随着用户担心的增加，这个语言标准化显然已经势在必行。
1997年，Javascript作为一个草案提交给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的支持程度是不一样的，效果会有一定的差距。
主要应用
控制文档的内容和表现
（“
hello,web
”）;
控制浏览器的行为
=“欢迎访问javascript”;
和文档的内容相互作用
和用户交互
DOCTYPEhtmlPUBLIC"-3CAjax3C*/多行注释
数据类型
三种主要数据类型，两种复合数据类型和两种特殊数据类型
主要（基本）数据类型
字符串
数值
布尔
复合（引用）数据类型
对象
数组
特殊数据类型
null
undefined
注意事项：
String字符串类型：
字符串是用单引号或双引号来说明的；
数值数据类型：
Javascript支持整数和浮点数。
整数可以为正数、0或者负数；浮点数可以包含小数点、也可以包含一个“e”（大小写均可，表示“10的幂”）；
Boolean类型：
true和false，不能用1和0；
Undefined数据类型：
变量创建后未赋值；
Null数据类型：
没有任何值，什么也不表示；
判断数据类型
typeof运算符
说明：
返回一个用来表示表达式数据类型的字符串
有六种可能：
number、string、boolean、object、function、undefined
--
vara=18;
varb=”今年18”；
varc=true；
（typeof（a））;
（typeof（b））;
（typeof（c））;
（typeof（d））;
（typeof（window））;23；
varMame；
Mame=123；
123”
[]（）+-
字段访问、数组下标、函数调用等
++--~!
deletenewtypeofvoid
医院运算符
*/%
+-
<<>>>>>
移位
<<=>>=instanceof
==!
====!
==
&
按位与
^
按位异或
|
按位或
&&
逻辑与
||
逻辑或
:
条件
=op=
赋值，运算赋值
多重求值
自学
注意使用（），减小复杂程度
第二天流程控制
流程控制
所谓结构化程序设计思想，就是要使所设计的程序给人一种一目了然的感觉，条理清晰，模块化，书写层次分明，要求：
顺序结构：
一条接一条，自上而下
选择结构：
判断给定条件，根据不同情况做不同处理
循环结构：
多次重复执行同一系列命令
流程结构
顺序结构
分支结构
单一选择结构if
二路选择结构if/else
内联三元运算符：
多路选择结构switch
循环结构
在循环的开始测试表达式while
在循环的末尾测试表达式do/while
遍历对象的各个属性for/in
由计数器控制的循环for
Break和continue
if（true）{
alert（“出现”）；
}
else{alert（“else”）；}
1、111”222”333”.+100
2、
3、
For循环演示
（"打印金字塔直线"）;
for（vari=0;i<100;i=i+5）
（""）;
7、
.myfont{
font-size:
150;
color:
#c99c96;
font-family:
Webdings；）
{
函数代码；
return返回值；
}
自变量的个数可以用以下变量来取得
函数名称.
自变量的值可以用以下变量取得
函数名称.arguments[x]
使用var定义变量的作用域
函数内
使用var定义局部变量
未用var定义全局变量
函数外
使用var定义全局变量
未用var定义全局变量
要求：
函数由关键字function定义
函数必须先定义后使用
函数名是调用函数时引用的名称，大小写敏感
参数表示传递给函数使用或操作的值，可以是常量，也可以是变量
return语句用于返回表达式的值，也可以没有
}
3）this关键字
是对当前对象的引用，在javascript中由于对象的引用是多层次的，防止互相引用造成混乱；
4）new运算符
设计人员自己创建对象
VarObject=newobject（parameterstable）；
如
Birthday=newData（）；
Birthday=newData（December121998）；
对象属性的引用
使用点（.）运算符
通过对象的下标实现
通过字符串形式实现
=”云南省”
University[0]=”云南省”
University[“Name”]=”云南省”
functionshowuniversity（object）
{
for（varj=0;j<2;j++）
（object[j]）;
}
对象方法的引用
对象名.方法名（）
例如：
Date对象
1970-1-1etTime（）-start）;
1970-1-1etTime（）-start）;
第二节课对象，实际上就是将一组属性的集合
1232”70’ame==name）{
ReturnmyClass[i].math;}
}
}
Vars=（searchByName（prompt（“name”,””））;
Alert（s）;
}
}
字符串string对象
Vars=“somestringhere“；
Alert;
中文在ascii里占两个字节
在unicode里占一个字节
Alert（“s”））;0”plit（“’）；
Functionfn（）{
（s[0]）;
（）;
=（“”）;
}
setInterval（fn,1000）;
第三节课文档结构模型基础DOM
文档对象模型
Document对象
第四节课浏览器模型基础BOM
1、BOM的作用
提供了一些访问窗口对象的一些方法，可以用它来移动窗口位置、改变窗口大小、打开新窗口和关闭窗口、进行导航以及获取客户的一些信息如：
浏览器品牌版本、屏幕分辨率等，但BOM最强大的功能是它提供了一个访问HTML页面的入口----document对象，使得我们可以通过这个入口来使用DOM的强大功能。
Window对象是BOM的顶层对象，所有对象都通过它延伸出来，也可以称为window的子对象，所以window可以省略。
（“bom”）;
、Window子对象（浏览器对象模型）
1）Window
document：
anchors、forms、images、links、location
Frames
History
Location
Navigator
Screen
2）Object
3）Array
Window对象关系属性
Parent：
如果当前窗口为frame，指向包含该frame的窗口的frame
Self：
指向当前的window对象；
Top：
如果当前窗口为frame，指向包含该frame的top-level的window
Window：
指向当前的window对象
Opener：
当窗口是用javascript打开时，指向打开它的那个窗口；
Window定位属性
IE提供了和对象来判断窗口的位置，但未提供任何判断窗口大小的方法，和属性可以获取视口的大小；
alert（）；
alert（）；
Mozilla提供和属性判断窗口的位置，它还提供了和来判断视口的大小，用和属性判断浏览器窗口自身的大小。
alert（）；
alert（）；
Window对象的方法
窗体控制
moveBy（x，y）：
从当前位置移动窗口x，y个像素；相对
moveTo（x，y）：
移动窗体左上角到屏幕左上角（x，y）点；
resizeBy（w，h）：
相对窗体当前大小，调整宽度高度
resizeTo（w，h）：
调整窗体宽度高度为w，h像素；
（100，100）；
（0，0）；
（100，100）；
滚动轴控制
scrollTo（x，y）：
对窗体中滚动条位置的定位；
scrollBy（x，y）：
对窗体滚动条一定相对的位置；
在firebug控制台右侧里试试：
（0,0）运行
可以做双击滚屏
焦点控制
focus（）：
使窗体或控件获取焦点；
blur（）：
使窗体或控件失去焦点；
（）；IE会自动隐藏，firefox没作用
工具---选项----内容---高级去设置
说明这些方法不固定，可以不用
新建窗体
open（）：
打开（弹出）一个新的窗体；
close（）：
关闭窗体；
opener属性：
新建窗体中对父窗体的引用；
（url,name,features,replace）;
url:
要载入窗体的url，如：
about：
blank；
Name：
窗体名称，可以自定，也可以选默认；
Features:
高度、宽度、等特性；
Replace:
布尔值，通常不用，是否替换当前载入信息；
=function（）{
}200”status
setTimeout（）：
暂停指定的毫秒数后执行指定的代码
setTimeout（“alert（123）”，1000）：
//字符串方式
setTimeout（fn，1000）：
//函数方式
functionfn（）{
alert（）；
}
clearTimeout（）：
第六天正则表达式
第三天事件
=function（）{
语句；
}
或者
Window。
Onload=initall；
Functioninitall（）{
语句；
}
每个事件只能对应一个
第八天表单
第九天表单
第十天项目
第五周项目
要求：
Php部分
共35天140学时7周
第一天
Mysql部分
共25天100学时5周
第一天
升级会员 