JavaScript项目式实例教程（第2版）课件 项目1、2 对话框和页面输出 初步体验-简单计算器 判断结构_第1页
JavaScript项目式实例教程（第2版）课件 项目1、2 对话框和页面输出 初步体验-简单计算器 判断结构_第2页
JavaScript项目式实例教程（第2版）课件 项目1、2 对话框和页面输出 初步体验-简单计算器 判断结构_第3页
JavaScript项目式实例教程（第2版）课件 项目1、2 对话框和页面输出 初步体验-简单计算器 判断结构_第4页
JavaScript项目式实例教程（第2版）课件 项目1、2 对话框和页面输出 初步体验-简单计算器 判断结构_第5页
已阅读5页，还剩60页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

项目一对话框和页面输出——初步体验有两张网页，每张网页上都有一个”问候”按钮。在第一张网页上点击该按钮，弹出对话框“张三向您问好！”，点击对话框上的“确定”按钮后，紧接着在该网页上打印“张三欢迎您光临本站！”。在第二张网页上做同样的操作，显示结果相同，只不过信息中把“张三”显示为了“李四”。项目要求代码的复用性和可维护性良好。项目情境熟悉JavaScript脚本内嵌在HTML中的书写方法熟悉JavaScript脚本的执行时机。初步了解事件触发的概念。初步了解函数和函数调用的方法。熟悉JavaScript脚本文件的编写和引入的方法。学习目标打开页面，立即弹出一个问候对话框。任务1弹出对话框1、在HTML中，任何标签都可以看成是一个对象，例如body就是一个对象。这些对象一般都有属性、事件和方法。其相关内容将在后面的章节阐述。2、如果要想在页面被引导后执行一个任务，可以给<body>标签添加一个onload事件（关于事件将在后续章节详细介绍），此事件在body对象被加载完成后被触发，写法形如：onload="要执行的代码";3、alert("参数")功能是弹出一个对话框，对话框中的内容就是该函数中设置的参数。4、JavaScript对大小写是敏感的，所以alert()必须全部小写。【相关知识】在<body>标签内部输入以下代码：<bodyonload="alert('你好！')">【任务实现】在网页上打印一串欢迎词。任务2在页面上打印欢迎词1、document表示的是文档对象，每个载入浏览器的HTML文档都会成为Document对象。（关于该对象在后续章节会详细介绍）2、document对象有很多方法，write方法是其中之一，表示在文档中打印信息内容。【相关知识】在<body>标签内部输入以下代码：<bodyonload="document.write('欢迎光临本站！')">【任务实现】先弹出问候对话框再在页面上打印欢迎词任务3先弹对话框再打印

在JavaScript中，如果功能块有多个语句，这些语句中间用分号隔开。实际上，每一个完整的功能语句结束处都应该写上分号，哪怕只有一条语句，也应该写上。【相关知识】在<body>标签内部输入以下代码：<bodyonload="alert('你好！');document.write('欢迎光临本站');">【任务实现】页面上有一个按钮，点击此按钮后，弹出问候对话框，在页面上打印欢迎词。任务4点击按钮执行任务3document.write()执行时，将重写当前页面。所以，页面上原有的内容将全部消失，只留下document.write()写下的内容。在本任务中，页面中最后看不到原来的“问候”按钮就是这个原因。【相关知识】在<body>标签对中编写按钮代码，并在按钮代码中添加onclick事件属性，并编写执行任务代码：<inputtype="button"name="button"id="button"value="问候"onclick="alert('你好！');document.write('欢迎光临本站！');"/>【任务实现】仍然实现任务4的需求，但是要求把任务执行代码模块化，以便随时调用。任务5任务模块化1、代码模块化。

将代码“打包”为函数的形式2、Javascript与HTML混编

<script></script>标签的使用3、注释

//……....注释单行

/*…….*/注释多行【相关知识】1、在<body>标签对中编写按钮代码：<inputtype="button"name="button"id="button"value="问候"onclick="hello()"/>站！');"/>2、在页面的<head></head>标签内部编写代码：<scripttype="text/javascript">//下面定义了一个函数hellofunctionhello(){ alert('你好！'); document.write('欢迎光临本站!');}</script>【任务实现】仍然完成任务5的需求，但是要求增加代码的灵活性。例如改变对话框和页面打印的信息，但是不需要修改函数模块代码。任务6调用灵活化在任务4中，我们将代码“打包”为一个函数，实现了模块化，但是还不够灵活。例如要改变显示的内容，就必须要修改函数体中的代码。又例如，如果再增加一个按钮，点击这个按钮也需要调用函数hello(),但是要显示的内容又有不同，则无法实现，只能另外编写一个函数供其调用。这样的程序缺乏了可扩展性，代码的复用性也比较差。程序设计中常常通过在编写函数模块时定义参数（一般是用逗号隔开的变量列表），而在调用函数时传入具体的数值的方法实现函数功能的灵活性和可扩展性。有关变量的概念以及函数参数的具体内容将在后面章节阐述。【相关知识】1、在<body>标签对中编写按钮代码：<inputtype="button"name="button"id="button"value="问候"onclick="hello('你好','欢迎光临本站！');"/>2、在页面的<head></head>标签内部编写代码：<scripttype="text/javascript">functionhello(str1,str2){alert(str1);document.write(str2);}</script>【任务实现】任务7“项目一”的实现1、js文件扩展名为js的文件是用JavaScript编写的客户端脚本文件，它不是一般的网页文件，一般不能直接运行打开，而是配合网页来使用。它常常用来实现某些功能，这些功能代码可以被多个不同的网页调用。在js文件中编写JavaScript脚本时，不要用<script>标签对包括。2、引用js文件在页面中，只有引入js文件才能使用该文件中的JavaScript代码。方法是在<script>标签中添加src属性，其值就是该js文件的路径。【相关知识】1、建立一个文件hello.js（注意扩展名为js）。2、在hello.js中编写如下函数代码并保存文件。functionhello(str1,str2){ alert(str1); document.write(str2);}3、建立两个页面，分别为hello1.html和hello2.html（为简单起见，将这三个文件放置在同一个目录下）。4、在hello1.html中，在<body>标签对内部编写按钮代码如下：<inputtype="button"name="button"id="button"value="问候"onclick="hello('张三向您问好','张三欢迎您光临本站！');“/>5、在页面的<head></head>标签内部编写代码如下：<scripttype="text/javascript"src="hello.js"></script>6、在hello2.html中做同样的操作，只是将“张三”改为“李四”【任务实现】项目二简单计算器——判断结构设计一个简单的计算器，能进行加、减、乘、除四则运算。当用户运行网页时，依次弹出三个输入对话框，分别要求输入两个数和一个运算符号（+、-、×、÷）。输入无误时，在页面上打印计算算式。在进行除法运算时，除数不能为0，否则打印错误信息。如果输入数字格式错误或者输入的运算符号错误都提示相应的不能运算信息。项目情境熟悉变量和常量的概念和使用方法。熟悉基本数据类型的概念熟悉数据类型的转换。熟悉关系运算符、逻辑运算符、算术运算符的使用方法。熟悉判断结构的使用方法。熟悉几个内置函数的使用方法。学习目标打开页面，打印程序中指定的姓名和性别。任务1认识变量和字符串1、变量的定义定义一个变量用关键字var，例如：varx;vary;一个var也可以同时定义多个变量，这些变量间用逗号隔开，例如：varx,y,z;【相关知识】2、变量的赋值变量的赋值就是把值存储在变量所在的内存单元中,方法是用“=”运算符。赋值可以是在定义变量时，例如：varx=0;vary=1,z=2;也可以是在变量定义后使用时才赋值，例如：varx;x=0;【相关知识】3、变量的命名变量的名称必须是由ASCII字符或者下划线（_）开头，第一个字符不能是数字，但其后可以是数字或者其他字母。例如如下变量的命名是合法的：aA_aa_1注意：JavaScript语言对大小写是敏感的，所以变量a和变量A是两个不同的变量。变量名不能定义为JavaScript的保留字。例如不能定义一个变量的名称为var或者function。【相关知识】4、变量的类型【相关知识】数据类型具体类型基本数据类型字符串型、数字型、布尔型复合数据类型对象、数组其他数据类型函数、null（空）、undefined（未定义）5、常量与变量对应的是常量。常量用来表示一个固定不变的值。比如下面这些这些都是常量：12325.78"张三"true【相关知识】6、字符串型6.1、字符串的定义字符串必须用双引号或者单引号包括起来。6.2、转义符转义符“\”6.3、连接运算符连接运算符”+”【相关知识】在<head>标签内部输入以下代码：<scripttype="text/javascript">varname="张三"; varsex="男"; document.write("姓名："+name+"<br/>性别："+sex); </script>【任务实现】打开页面，弹出一个输入对话框，要求输入姓名。输入确定后再次弹出输入对话框，要求输入性别。输入确定后，在页面打印刚刚输入的信息。任务2输入对话框1、Window对象window对象表示浏览器窗口。任何一个全局函数或变量都是windowd对象的属性，所以使用时，该对象常常省略不写。【相关知识】2、prompt方法prompt方法的功能是弹出一个输入对话框，格式是：prompt(<提示信息>[,默认值])其返回的值就是用户在对话框中输入的值,返回值的类型是字符串型。【相关知识】在<head>标签内部输入以下代码：<scripttype="text/javascript">varname=mpt("请输入您的姓名：",""); varsex=mpt("请输入您的性别：","男"); document.write("姓名："+name+"<br/>性别："+sex);</script>【任务实现】打开页面，弹出一个输入对话框，要求输入一个整数。如果输入的不是一个整数，则给出错误提示。任务3判断是否为整数1、表达式表达式可以是常量或者变量，也可以是由常量、变量和运算符号组成的语句。比如下面这些都是合法的表达式：4.56truea>ba+b。【相关知识】2、布尔数据类型布尔（boolean）是一种基本数据类型，表示真或者假，通俗的理解为是或者非，对或者错等。它常常用于判断一个结果的是非性。它的值只有两个：true（真）和false（假）。例如：8>4其结果就是false。再如：a<6如果a是一个比6小的值，则结果就是true,如果a是一个比6大或者等于6，结果就是false。【相关知识】3、关系运算符【相关知识】运

算

符名

称举

例==等于a==b!=不等于a!=b===全等于a===b!==不全等于a!==b>

大于a>b<

小于a<b>=大于或等于a>=b<=小于或等于a<=b4、判断语句4.1、if语句①if语句if(<条件>)[语句块]②if...else语句if(<条件>) [语句块1]else [语句块2]【相关知识】③if...elseif...else语句if(<条件1>) [语句块1]elseif(条件2) [语句块2]……elseif(<条件n>) [语句块n]else [语句块n+1]【相关知识】④if语句的嵌套if语句允许嵌套，嵌套时注意if与else的匹配，不要出现交叉嵌套的现象。【相关知识】4.2、switch语句switch(<变量或表达式>){ case<数值1>：

[语句块1] <break;> case<数值2>：

[语句块2] <break;> …… case<数值n>：

[语句块n] <break;> [default:] [语句块n+1]}【相关知识】5、三目运算三目运算是根据条件执行两个语句中的其中一个，格式如下：布尔表达式?语句1:语句2当“布尔表达式”值为真时，执行“语句1”；当“布尔表达式”值为假时，执行“语句2”。【相关知识】在<head>标签内部输入以下代码：<scripttype="text/javascript">varnum=mpt("请输一个整数：","");if(parseInt(num)==num) { document.write(num+"是整数");}else{ document.write(num+"不是整数");}</script>【任务实现】打开页面，

弹出一个输入对话框，要求输入一个整数。如果输入的为奇数，确认后打印信息，提示该数为奇数。如果输入的为偶数，确认后打印信息，提示该数为偶数。如果输入的信息为以下情况中的一种，就视为不合法输入，提示错误。①输入的不是数字。

输入的是数字，但不是整数。③未做任何输入。任务4判断奇偶数1、逻辑运算符【相关知识】运算符名称举例备注&&逻辑与true&&false(结果为false)9>8&&7>8(结果为false)二元运算符。只有两个操作数的值都为true，结果才是true。||逻辑或true||false(结果为false)9>8||7>8(结果为false)二元运算符。操作数中只要有一个值为true，结果就是true。只有两个操作数的值都为false，结果才是false。!逻辑非!true(结果为false)!9>8(结果为false)一元运算符。true的非是false,false的非是true。2、算术运算符【相关知识】运算符名称举例备注+加a+b二元运算符。加法运算，运算结果为数字型。-减a-b二元运算符。减法运算，运算结果为数字型。*乘a*b二元运算符。乘法运算，运算结果为数字型。/除a/b二元运算符。除法运算，运算结果为数字型。%模a%b二元运算符。取余数运算，运算结果为数字型。++递增a++++a一元运算符。相当于加1。要求操作数必须是变量。运算结果为数字型。--递减a—--a一元运算符。相当于减1。要求操作数必须是变量。运算结果为数字型。3、运算符的优先级【相关知识】优先级（从高到低）运

算

符顺

序1小括号()2一元运算符++--!3算术运算符先*/%，后+-4关系运算符>>=<<=5关系运算符==!====!==6逻辑运算符先&&，后||7赋值运算符=4、isNaN函数【相关知识】isNaN()函数接收一个参数，用于检查这个参数是否“不是数值”。isNaN()函数在接收到一个值之后，会尝试将这个值转换为数值，如果能成功转换，则返回false，否则返回true。该函数的基本语法是isNaN(value)，其中value就是要被检查的值。需要注意的是，当value为空格（或者由空格组成的字符串）、null值时，该函数返回的值也是false，原因是isNaN()函数将这些值转换为了数字0。在<head>标签输入下列代码：<scripttype="text/javascript">varnum=mpt("请输一个整数：",0);if(!isNaN(num)&&num!=""&&parseInt(num)==num){ varres=num%2;if(res==0) { document.write(num+"是偶数"); } else { document.write(num+"是奇数"); }}else{ document.write("输入的数字格式不对，不能判断奇偶数");}</script>【任务实现】打开页面，弹出输入对话框，要求输入一个被加数。输入确定后，再次弹出输入对话框，要求输入一个加数。输入确定后，打印这两个数的和。如果这两个数中只要有一个输入格式不正确，或者未输入任何值，都给出错误信息。任务5加法运算器1、数字型【相关知识】表现形式举例涵义整数198、234072、0650xAF9、0x56E十进制八进制（0开头）十六进制（0x开头）浮点数1.0、3.489有小数点科学计数法2.45E72.45×107特殊数字InfinityNaN无限大不是一个数字2、数据类型的转换2.1、隐式类型转换【相关知识】数据类型在数字环境下转换在字符串环境下转换在布尔环境下转换数字类型无（1）转换为内容为数字的字符串（2）NaN转换为"NaN"（1）非0转换为true，0转换为false（2）NaN转换为false字符串类型（1）空字符串转换为0（2）非空字符串转换为数字（当字符串中的内容为数字时）或NaN（当字符串中的内容不是数字时）无（1）空字符串转换为false（2）非空字符串转换为true布尔类型（1）true转换为1（2）false转换为0（1）true转换为"true"（2）false转换为"false"无2.2、显示类型转换【相关知识】函数功能举例结果Number(字符串)将字符串整体转换为数字。Number("4.56")Number("1.23.56")4.56NaNparseInt(字符串)将字符串中第一个非数字字符前的字符转换为整型数字。parseInt("12abc")parseInt("abc12")parseInt("1.8")12NaN1parseFloat(字符串)将字符串中第一个非数字字符前的字符转换为浮点型数字。parseFloat("1.2abc")parseFloat("abc1.2")parseFloat("1.2e3abc")1.2NaN12003、查看数据类型【相关知识】可以使用typeof运算符查看一个数据的数据类型。typeof运算符有以下两种使用方式：typeof(表达式)typeof变量名在<head>标签对中输入如下代码：<scripttype="text/javascript">varnum1=mpt("请输入被加数：",0);varnum2=mpt("请输入加数：",0);if(parseFloat(num1)==num1&&parseFloa

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论