配色: 字号:
《JavaScript项目式实例教程》项目一 对话框和页面输出 —— 初步体验
2023-05-25 | 阅:  转:  |  分享 
  
项目一对话框和页面输出 —— 初步体验有两张网页,每张网页上都有一个”问候”按钮。在第一张网页上点击该按钮,弹出对话框“张三向您问好!”,点
击对话框上的“确定”按钮后,紧接着在该网页上打印“张三欢迎您光临本站!”。在第二张网页上做同样的操作,显示结果相同,只不过信息中把
“张三”显示为了“李四”。项目要求代码的复用性和可维护性良好。项目情境熟悉JavaScript脚本内嵌在HTML中的书写方法熟悉J
avaScript脚本的执行时机。初步了解事件触发的概念。初步了解函数和函数调用的方法。熟悉JavaScript脚本文件的编写和引
入的方法。学习目标打开页面,立即弹出一个问候对话框。任务1 弹出对话框1、在HTML中,任何标签都可以看成是一个对象,例如body
就是一个对象。这些对象一般都有属性、事件和方法。其相关内容将在后面的章节阐述。2、如果要想在页面被引导后执行一个任务,可以给 dy>标签添加一个onload事件(关于事件将在后续章节详细介绍),此事件在body对象被加载完成后被触发,写法形如:onload
="要执行的代码";3、alert("参数")功能是弹出一个对话框,对话框中的内容就是该函数中设置的参数。4、JavaScript
对大小写是敏感的,所以alert()必须全部小写。【相关知识】在标签内部输入以下代码:【任务实现】在网页上打印一串欢迎词。任务2 在页面上打印欢迎词1、document表示的是文档对象,每个载
入浏览器的 HTML 文档都会成为 Document 对象。(关于该对象在后续章节会详细介绍)2、document对象有很多方法,
write方法是其中之一,表示在文档中打印信息内容。【相关知识】在标签内部输入以下代码:【任务实现】先弹出问候对话框再在页面上打印欢迎词任务3 先弹对话框再打印 在
JavaScript中,如果功能块有多个语句,这些语句中间用分号隔开。实际上,每一个完整的功能语句结束处都应该写上分号,哪怕只有一
条语句,也应该写上。【相关知识】在标签内部输入以下代码:【任务实现】页面上有一个按钮,点击此按钮后,弹出问候对话框,在页面上打印欢迎词。任务
4 点击按钮执行任务3document.write()执行时,将重写当前页面。所以,页面上原有的内容将全部消失,只留下docume
nt.write()写下的内容。在本任务中,页面中最后看不到原来的“问候”按钮就是这个原因。【相关知识】在标签对中编写
按钮代码,并在按钮代码中添加onclick事件属性,并编写执行任务代码:【任务实现】仍然实现任务4的需求,但是要求把任务执行代码模块化,以便随时调用。任务5 任务模块化1
、代码模块化。 将代码“打包”为函数的形式2、Javascript与HTML混编
【任务实现】仍然完成任务5的需求,但是要求增加代码的灵活性。例如改变对话框和页面打印的信息,但是不需要修改函数模块代码。任务6 调
用灵活化在任务4中,我们将代码“打包”为一个函数,实现了模块化,但是还不够灵活。例如要改变显示的内容,就必须要修改函数体中的代码。
又例如,如果再增加一个按钮,点击这个按钮也需要调用函数hello(),但是要显示的内容又有不同,则无法实现,只能另外编写一个函数供
其调用。这样的程序缺乏了可扩展性,代码的复用性也比较差。程序设计中常常通过在编写函数模块时定义参数(一般是用逗号隔开的变量列表),
而在调用函数时传入具体的数值的方法实现函数功能的灵活性和可扩展性。有关变量的概念以及函数参数的具体内容将在后面章节阐述。【相关知识
】1、在标签对中编写按钮代码:2、在页面的 ad>标签内部编写代码:【任务实现】任务7 “项目一”的实现
1、js文件扩展名为js的文件是用JavaScript编写的客户端脚本文件,它不是一般的网页文件,一般不能直接运行打开,而是配合网
页来使用。它常常用来实现某些功能,这些功能代码可以被多个不同的网页调用。在js文件中编写JavaScript脚本时,不要用 ipt>标签对包括。2、引用js文件在页面中,只有引入js文件才能使用该文件中的JavaScript代码。方法是在6、在hello2.html中做同样的操作,只是将“张三”改为“李四”【任务实现】
献花(0)
+1
(本文系大高老师首藏)