Javascript教案Word文档下载推荐.docx
《Javascript教案Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《Javascript教案Word文档下载推荐.docx（46页珍藏版）》请在冰点文库上搜索。
<
scriptlanguage=”JavaScript”>
document.write（“<
h1>
hello,web<
/h1>
”）
;
/script>
控制浏览器的行为
window.status=“欢迎访问javascript
”
和文档的内容相互作用
和用户交互
!
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Transitional//EN"
"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
htmlxmlns="
//www.w3.org/1999/xhtml"
head>
title>
猜数字游戏<
/title>
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的引用
在<
内部
标记包含式
html>
第三种<
scriptlanguage=”javascript”>
functionshowAlert（）
{
alert（“web“）；
}
/head>
body>
<
/body>
/html>
Js外部引用式
scriptlanguage=”javascript”src=“common.js“>
。
web程序设计<
common.js文件内容
functionshowAlert（）{
alert（“web程序设计“）；
事件跟随式
bodyonload=”window.alert（‘helloweb’）;
”>
第三节语言基础
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
scriptlanguage=”javascript”>
--
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”；
scripttype=”text/javascript”>
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<
c
（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+=“！
！
”；
//弱类型
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）；
alert（true>
false）；
//false=0,true=1
3）；
//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；
//逻辑运算符
a逻辑值
b逻辑值
a&
b
a||b
a
False
True
思考：
Alert（！
“”）；
//空字符串，不加空格false
Alert（“hello”&
//空字符串
Alert（“”||”hello”）；
hello
Alert（“”||”hello”）；
//空
vart=typeof（“123”*1）；
//num
vart=typeof（123+“”）；
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）{
alert（“true”）；
alert（“”）；
if（true）{
alert（“elseiftrue”）；
}
elseif（true）{
else{}
//小练习
varmark=prompt（“请输入”，“”）；
if（!
mark）{//alert（””*1）
alert（“没有输入”）；
}else{
mark*=1；
if（isNaN（mark））{
alert（“输入了非法数字”）；
If（mark<
=100&
mark>
=90）
alert（“good”）;
}else{if（num<
=90&
num>
=80）{alert（“ok”）;
}}
//简化后
}elseif（mark<
=90）{
alert（“good”）；
}elseif（num<
=80）{
alert（“ok”）；
alert（“！
”）；
//switch,又叫“开关”
vara=1；
switch（a）{
case1：
alert（“111”）；
break；
case2：
alert（“222”）；
case3：
alert（“333”）；
default：
alert（“default”）；
/*循环
for（初始化语句；
条件判断；
更新计数器）{
循环代码；
}*/
for（vari=0;
i<
10;
i++）{
document.write（i+”<
br>
”）
//混合
vari=0；
for（；
；
）{
if（i<
1
升级会员 