原版Javascript程序设计实验指导书

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

《Javascript程序设计》实验指导书

一、课程性质和教学目的

JavaScrip是一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

学习Javascript必须理论联系实际,多做上机练习。只有在上机实验过程中才能真正学会程序设计。本实验报告主要包括学期内各个实验的实验目的、实验内容、实验记录、实验总结等,供学生学习记录,以提高学习效率。参加实验的学生应参照本报告手册的要求,认真实验,如实填写实验数据,并对实验结果进行分析,阐述实验中所遇到的问题,提出解决问题的方法。

二、实验目的

上机实验的目的不仅是为了验证教材和讲课的内容,或者验证自己所编写的程序正确与否。学习程序设计上机实验的目的是:

1.加深对讲授内容的理解,尤其是一些语法规定,课堂讲授既枯燥无味又难以记忆,但它们都很重要。能过多次上机就能自然地、熟练地掌握。通过上机掌握语法是行之有效的方法。

2.学会上机调试程序。即善于发现程序中的错误,并且能很快排除这些错误,使程序能正确运行。要真正掌握这门课程,不仅应当了解和熟悉有关理论和方法,还要求自己动手实现即会编程并上机调试通过。故应给予充分重视。调试程序固然可以借鉴他人的现成经验,但更重要的是通过自己的直接实践来累积经验,而且有些经验是只能意会难以言传。调试程序的能力是每个程序设计人员应当掌握的一项基本功。

3.做实验时不要在程序通过后就认为搞定、完成任务了,而应当在己通过的程序甚而上作一些改动(例如修改一些参数、增加程序一些功能、改变输入数据的方法等),以观察和分析所出现的情况。

三、上机实验前的准备工作

实验前应做好准备工作,以充分利用有限的上机时间。准备工作至少包括:

1.复习和掌握本实验有关的教学内容。

2.准备好上机所需的程序。初学者切忌不编写程序或抄别人的程序去上机,应从一开始就养成严谨的科学作风。

3.对运行上可能出现的问题应事先作出估计;对程序中自己有疑问的地方,应作上记号,以便在上机时给予注意。

4.根据实验内容认真准备实验程序及调试时所需的输入数据。

5.在上实验课之前必须写好预习报告(编程题源程序用纸写好或画好程序流程图)

6.填空与改错题等题要预先做好,上机时的工作只能是输入源程序和调试修改。

7.认真完成实验内容,得出正确的实验结果。实验结束后总结实验内容、书写实验报告。

8.遵守实验室规章制度、不缺席、按时上、下机。

四、实验环境

代码编写环境:可根据机房主机条件自己决定。推荐notepad,Dreamweaver,eclipse,hbuilder等。

页面预览环境:建议学生及早考虑和适应跨浏览器自适应问题。推荐Firefox,google chrome,世界之窗,Internet Explorer等。

实验一 Javascript基本页面操作

实验目的

1.JS页面基本结构。

2.JS中变量基本格式。

3.变量与字符串相连接并显示结果。

4.使用按钮与function一一对应来实现代码功能。

实验内容

1.在C盘下创建文件夹1.1。在文件夹内创建一个txt文档,并命名为xx.1.html。xx是你学号后两位。然后把课本P10的程序1.1输入该文档,并把内容改为你自己的名字。<alert>内容改为你的名字加欢迎标语。<alert>后面是P9的最后一行,但是把" "里面的内容换成你自己的名字。保存该文档,并用google浏览器查看效果。</p><p>2.请将课本P10倒数第四行代码中的alert换成document.write并保存。你可以把任务01答案.html中的代码直接进行修改。然后用google浏览器打开这个页面看效果。想想alert和write的功能各是什么。</p><p>3.请看课本P12的 1.11练习,将任务01的页面代码的<script>中增加alert(document.title)。保存后用google浏览器打开看效果。</p><p>4.我们一般建议在body中完成页面的布局设计,而将script代码放在head中。我们为了能够确保让程序执行结果显示在我们指定的位置,一个最简单的方法是:在body中创建一个div,然后让它来显示程序执行的结果。因为我们可以控制div出现的位置,所以就等于可以控制程序执行结果出现的位置。我们一般在body中这样放置一个id唯一的div <div id="d1"></div>然后再在script中通过如下代码来使该div显示指定内容document.getElementById("d1").innerHTML="欢迎您访问我的页面";</p><p>5.我们现在来学习js代码的两个基本概念。</p><p>一个是书写规范,这个在P15有介绍,我们建议使用每一行都加分号并回车换行的方式。另一个是变量。这个很有趣,以后每节课都会用。</p><p>请新建xx.2.html,复制第一个页面的基本代码,然后把script标签内的代码换成</p><p>var x=Date();</p><p>document.write(x);</p><p>然后保存后打开xx.2.html看效果。</p><p>这里的x是一个自定义的变量。</p><p>6.新建一个页面xx.3.html。</p><p>在里面定义一个变量,变量内容为你的姓名。然后让页面显示这个变量与Date()函数相连接的结果。</p><p>比如你的变量名为x</p><p>那么请让你的页面显示x+Date()的内容</p><p>比如是x="张三为您报时,现在是"</p><p>请显示x+Date()的内容。</p><p>7.新建一个页面xx.4.html。要求网页打开的时候显示以下内容。</p><p>XXX的网页欢迎你。现在是几点几分。</p><p>xxx是你自己的名字。几点几分由下面的代码结合而成。</p><p>由于这个时间是从电脑主机时间获得的,而我们机房的电脑时间可能不准确,所以这个题目你的时间显示错误时没关系的。只要它能显示,然后每次F5刷新的时候它可以更新。就可以了。</p><p>下面是一些扩展的知识点,给大家作为参考。</p><p>var myDate = new Date(); //将当前日期时间赋值给变量myDate</p><p>myDate.getYear(); //获取当前年份(2位)</p><p>myDate.getFullYear(); //获取完整的年份(4位,1970-)</p><p>myDate.getMonth(); //获取当前月份(0-11,0代表1月)</p><p>myDate.getDate(); //获取当前日(1-31)</p> </div> </div> </div> </div> </div> <div id="rightcol" class="viewcol"> <div class="coltitle">相关文档</div> <ul class="lista"> <li><a href="/doc/015076403.html" target="_blank">javascript应用实例</a></li> <li><a href="/doc/0410721108.html" target="_blank">Javascript综合应用小案例</a></li> <li><a href="/doc/0f13310888.html" target="_blank">JavaScript前端开发案例教程第4章_函数_教学</a></li> <li><a href="/doc/0014036685.html" target="_blank">JavaScript图形实例:平面镶嵌</a></li> <li><a href="/doc/0d14162996.html" target="_blank">JavaScript图形实例:蝴蝶结图案</a></li> <li><a href="/doc/0415318976.html" target="_blank">《HTML CSS JavaScript网页制作案例教程》_教学大纲讲解</a></li> <li><a href="/doc/2016718916.html" target="_blank">JavaScript网页特效案例教程教案(普通班)</a></li> <li><a href="/doc/362954940.html" target="_blank">JavaScript范例</a></li> <li><a href="/doc/453595559.html" target="_blank">Web前端开发案例教程——HTML+CSS+JavaScript (8)</a></li> <li><a href="/doc/4b12255003.html" target="_blank">Javascript表单验证案例</a></li> </ul> <div class="coltitle">最新文档</div> <ul class="lista"> <li><a href="/doc/071000073.html" target="_blank">饭店包间名字大全</a></li> <li><a href="/doc/0d10001030.html" target="_blank">word无法创建工作文件,请检查临时环境变量</a></li> <li><a href="/doc/0d10001458.html" target="_blank">自行车健身比赛开幕式讲话词</a></li> <li><a href="/doc/0510001469.html" target="_blank">2018乡村医生个人工作总结</a></li> <li><a href="/doc/0e10002558.html" target="_blank">MySQL测试题 SQL</a></li> <li><a href="/doc/0310002568.html" target="_blank">合勤NXC5200</a></li> <li><a href="/doc/0210004833.html" target="_blank">铁路集中箱空箱调度优化建模案例(案例2)</a></li> <li><a href="/doc/021000530.html" target="_blank">微分几何教学大纲-复旦大学数学科学学院</a></li> <li><a href="/doc/031000596.html" target="_blank">人教版九年级数学上册导学案:24.1.1_圆【精品】</a></li> <li><a href="/doc/0c10006773.html" target="_blank">(整容后办护照用)医院整容证明</a></li> <li><a href="/doc/0e10006860.html" target="_blank">危险废物管理台账</a></li> <li><a href="/doc/0310008420.html" target="_blank">2017年终大会会场物料设计方案</a></li> </ul> </div> </div> <script> var sdocid = "240ba91d26fff705cc170af0"; var docId = '240ba91d26fff705cc170af0'; var totalPage = 64; const ext = 'doc'; const pageNum = '64'; </script> <script src="https://assets.360docs.net/pc/js/render.js"></script> <div class="clearfloat"></div> <div id="footer"> <div class="ft_info"> <a href="https://beian.miit.gov.cn">闽ICP备16038512号-3</a> <a href="/tousu.html" target="_blank">侵权投诉</a>  ©2013-2023 360文档中心,www.360docs.net | <a target="_blank" href="/sitemap.html">站点地图</a><br /> 本站资源均为网友上传分享,本站仅负责收集和整理,有任何问题请在对应网页下方投诉通道反馈 </div> <script type="text/javascript">foot()</script> </div> </body> </html>