文档库
文档库 最新最全的文档下载
当前位置：文档库 › JavaScript实验实训内容

JavaScript实验实训内容

JavaScript实验实训内容
JavaScript实验实训内容

JavaScript 表达式和逻辑控制语句的使用

实验

一．实验目的

掌握JavaScript 的变量；

掌握JavaScript 的数据类型；掌握JavaScript 的运算符；掌握

JavaScript 的逻辑控制语句。

二．实验内容

1、声明一个变量str,为其赋值"Hello World!"，显示该值; 改变该变量值为"Hello

China!" ，然后再显示该值。

2、将1~10 之间的奇偶数分开，页面呈现方式如下：

3、任意输入一个年份，判断是否为闰年。

实验二函数部分

一．实验目的

掌握JavaScript 的常用函数；

二．实验内容

编写一个函数，在页面上输出1~1000之间所有能同时被3，5，7 整除的证书，并要求每行显示6 个这样的数。

ex050303.htm

实验三

实验目的：常用函数的使用。

实验内容：

利用全局变量和函数，设计模拟幸运数字机游戏。设幸运数字为 8，每次 由计算机随机生成 3 个 1~9之间的随机数，当这 3 个随机数中有一个数字 为 8 时，就算赢了一次。

Ex050309.html

事件与对象

实验四

实验目的：表单的设计。

实验内容：设计一个表单，放入两个按钮，单击它们时将显示不同问候语。

S07_02.HTM

处理事件-HTML 标记方式

实验五

实验目的：内置对象的使用。

实验内容：

1．在页面中显示当天日期。

S06_03.HTM ：

使用new 运算符

实验六

实验目的：内置对象的使用。

实验内容：

2．在浏览器窗口的状态栏中显示当前浏览器的版本信息。

S06_02.HTM

访问对象的属性

实验七

实验目的：内置对象的使用。

实验内容：

3．将用户输入的字符串反向输出到页面上，并且要求将其中的小写字母转换成大写字母。

S06_07.HTM

使用String

实验八

实验目的：内置对象的使用。

实验内容：

4 .求PI的5次方，并四舍五入取整。

S06_04.HTM 使用Math 对象

实验九

实验内容：

5．由图像表示日期。

ch3_14.htm

JavaScript 对象的理解和使用

实验

．实验目的

掌握 JavaScript 的常用的对象类型；

掌握 JavaScript 对象属性和方法的引用方式；

实验目的： 内置对象的使用。

三"," 四"," 五"," 六"); // 当天的日期 // 年 // 月 // 日 星期

0－9 的图像文件，文件名为 0.gif ，

了解 JavaScript 对象的常用属性和方法 ；

二．实验内容

1、任意输入一个字符串，单击“确定”按钮，输出字符串的长度。

2、猜数游戏，实现效果如下：

3、设计实现一个带开关的时钟。

JavaScript 事件的理解和使用

实验

一．实验目的

掌握 JavaScript 的常用的事件； 掌握 JavaScript 事件的处理方式； 了解如何通过 HTML 属性和 JavaScript 属性处理事件；

二．实验内容

设计实现一个页面，当进入页面时提示“您好，欢迎光临” ，当离开页面时提 您好，欢迎您下次再来” 。

设计实现如下页面，要求 （1）单击“提交”按钮时逐一验证页面各项信息不允许为空；

2）如果哪一项信息不满足要求，页面焦点停留在该信息处；

3）单击“重置”按钮时，将页面各项元素信息清空。

1、

示 2、

javascript实验

长江职业学院Javascript语言程序设计实验指导书 专业： 学号： 姓名： 班级： 指导老师： 软件教研室编

实验一 JavaScript基本操作 一、实验目的 熟练掌握在HTML文件中编写JavaScript程序的基本操作，及在Microsoft Internet Explorer浏览器和Netscape的Nevigator浏览器中调试JavaScript的基本操作。 二、实验内容 1、用NotePad创建一个简单的.htm文件，在Microsoft Internet Explorer浏览器中浏览效果。 2、编写第1章中的实例源文件，并在Microsoft Internet Explorer浏览器中进行测试。 3、调试一段JavaScript程序，找出其中的错误。 三、实验步骤 1、通过windows的文件管理器，在c盘下新建一个文件夹jsp_ex,用于保 存实验中的文件，如图1-1所示。 2、在windows中打开“记事本”，（也可以用其他编辑html文件的工具软 件，如Microsoft frontpage,Macromedia Dreamweaver等，编写例1-1的程序，然后将文件保存在C:\jsp_ex文件夹中。 3、用下述任意一种方法，在浏览器中显示，如图1-2。

A．在图1-1中双击“”文件名。 B．在图1-1中用鼠标右键单击“”，在打开的菜单列表中，如果有所需浏览器名就可以直接点击浏览器名。 C．现在windows中打开所需浏览器，然后按【ctrl】+【o】，在打开的对话框中找到文件。 4、再次编辑文件，将第21行中的“”改写为“”然后按第3步的操作， 得到如图1-3的效果，不能显示“上一次网页更新日期”，这时，通过浏览器的调试工具查找出出错的位置，修改后再次测试。 5、按1-2的步骤，将例1-1改写为“”和“”两个文件即通过外部javascript 文件和html文件一起完成网页的制作。 四、思考练习 1．为什么“上一次网页更新日期”在每一次打开都是同一个时间 2．请写出你在程序编写中出现的错误和改正方法，并分析。

JavaScript实验

实验项目：浏览器脚本语言及其应用 实验类型：设计 实验课时：4 实验目的：研究javascript及其应用 实验方案： 1 研究将JavaScript引入HTML页面 创建一个HTML文件，容如下。在浏览器中打开该文件。分析代码。

3 研究JavaScript名称 创建一个HTML文件，容如下。在浏览器中打开该文件。分析代码。 3 研究JavaScript值 创建一个HTML文件，容如下。在浏览器中打开该文件。分析代码。

你最喜欢的水果是？

  • 苹果
  • 橘子
  • 菠萝
var $li=$("ul li:eq(1)"); var li_txt=$li.text(); alert(li_txt);

var $para=$("p"); var p_txt=$para.attr("title"); alert(p_txt); var $li_1=$("

  • 香蕉
    • "); var $li_2=$("
  • 雪梨
    • "); $("ul").append($li_1); $("ul").append($li_2);

    jsp实验指导书

    实验一静态网页制作 一、实验目的 1.熟悉HTML语言； 2.掌握借助HTML语言，设计Web页面。 二、实验内容 1、按照要求完成eBook图书商城“联系我们”(contact. html)页面的设计； 2、应用表格完成eBook图书商城“购书袋”(cart. html)的设计； 3、应用框架技术设计eBook网站的主页，左边用来显示商品类别，右边用来显示某一类商 品信息，并使用图片对页面进行美化。 三、实验方法 参照《jsp程序设计案例教程》第十一章《HTML与JavaScript》HTML语法设计实验内容。 1、利用框架来设计实验内容一和三，设计时需要注意文字显示的位置，及加上相应的背景。 2、利用表格来设计实验内容二。 实验二生成简单动态网页 一、实验目的 1、掌握tomcat配置及使用方法； 2、进一步熟悉HTML基本语法； 3、熟悉JSP基本语法； 4、掌握HTML与JSP指令、动作元素结合来设计web页面。 二、实验内容 1、应用各种表单元素完成eBook图书商城的“用户注册”页面的设计（与JSP指令、动作元素结合）； 2、设计Easy-Buy电子商城网站首页框架，要求可以使用中文显示，首页由3部分组成：top.jsp （导航栏）、body.jsp（页面主体）和bottom.jsp(版权信息)； 3、在Easy-Buy电子商城首页（index.jsp）中使用一超链接，使用jsp:forward转向到时钟页面(clock.jsp). 三、实验方法 1、参照《jsp程序设计案例教程》第十一章《HTML与JavaScript》HTML语法设计web页面元素：表格及文本的对齐方式、多行文本的显示方式、提交和重置按钮，并在点击提交和重置按钮之后，分别进入相应的JSP页面； 2、使用jsp指令或动作元素包含要求的三个页面，并注意在页面中正确使用MIME类型，设置为GB2312； 3、使用HTML语法在index.jsp中建立一个超链接，并使用forward动作元素来转向制定的页面，在实验过程中注意IE浏览器地址栏中的变化。

    JavaScript实验报告

    第一次JavaScript实验实验主题：内置对象（1） 实验内容： 1. 熟悉JavaScript常见内置对象及其关系； 2. 熟练应用String对象和Array对象； 3. 动手操作： ①数组的升序与降序排列练习 1 升序排列代码 数组数字大小排序 让数组按照升序降序排列 这里写个数组var array=[89,28,49,654,6758,5768]; 升序输出：

    2降序排列 数组数字大小排序

    降序排列： 这里写个数组var array=[59,689,62,92,68,10]; 降序输出 ②字符串的交叉合并练习

    实验6 JavaScript函数(2)实验报告

    } 练习2：定义一个JavaScript函数calculator()，用于实现简单的计算器。在输入算式之后，单击计算，在该文本框中显示计算结果。 操作步骤如下： （1）在页面中添加用于输入要计算的算式的表单及表单元素。具体代码如下：

    输入要计算的算式：
    （2）编写自定义的JavaScript函数calculator()，用于实现计算器的功能，函数的具体代码如下：(计算器里要考虑异常处理，还要考虑如何把结果放在文本框中(赋值)) 练习:3：在文本框中输入一行字符串，然后分别运用三种编码和解码函数进行编码解码，并显示效果。 操作步骤如下： （1）在页面中添加用于输入一个字符串的表单及表单元素。具体代码如下：
    请输入字符串：

    请选择编码解码类型：

    ：

    Javascript推箱子实训

    实训报告 课程名称：___JavaScript网页特效案例教程项目名称：______ 推箱子_游_戏_____ 关卡：______第 22 关_卡________ 专业班级：______计网2013_班_______ 姓名：________张三___________ 指导老师：____________李四______ 实训时间：_2014-2015学年第1学期_______

    目录 实训一 (1) 实训二 (4) 实训三 (6) 实训四 (8) 实训五 (11) 实训六 (14) 实训七 (15) 实训八 (17) 实训总结 (19)

    一、实训目的： 推箱子是一种游戏界面简单，操作容易，在玩游戏的同时还可以锻炼大家的反应速度及灵敏程度。通过对推箱子的设计，让我们能熟练掌握HTML编写javascript程序的基本操作。把游戏画面描绘出来，利用方向键在规定游戏画面范围内移动小人来推动箱子是否到达目标点，如果全部箱子都到达目标点后即可过关。 二、实训要求： 每个同学随机一个关卡，用Javascript实现一个关卡推箱子游戏。用户可以通过方向键移动小人来推动全部箱子到达目标点后即过关。 三、实训步骤要求： 1、绘图游戏要的基本元素。如墙、箱子、目标地点等 2、把个人随机的关卡的推箱子的所有元素在页面显示出来 3、移动控制，让小人在墙壁内可以左右上下自由移动 4、控制小人可以移动推箱子 5、完善推箱子 四、实训步骤与过程： (1)绘图游戏要的基本元素 A．实现概述： 运用的CSS将所有要用的元素描绘出来，图中的q为墙壁元素,r 为人物元素，x为箱子元素，m为目标元素，z为箱子到达目标时的元素，d 为地板元素。

    《Web前端开发》-实验指导书

    《Web前端开发》实验指导书

    目录 实验1 HTML基础与布局元素 (3) 实验2 表格与表单的应用 (6) 实验3 框架 (8) 实验4 CSS样式表基础 (12) 实验5 CSS样式布局 (16) 实验6 Dreamweaver制作网页 (19) 实验7 网站设计 (22) 实验8 JavaScript基础 (26) 实验9 JavaScript对象 (29) 实验10 DOM编程 (33) 实验11 JavaScript常用特效 (36)

    实验1 HTML基础与布局元素一、实验目的 1．掌握使用HTML的基本结构创建网页 2．掌握使用行级和块级标签组织页面内容 3．掌握使用图像标签实现图文并茂的页面 二、实验内容 使用HTML基本元素设计基本网页 三、实验环境 （1）使用的操作系统及版本。 Windows XP Professional （2）使用的编译系统及版本。 Dreamweaver CS6 四、实验步骤及说明 任务1基本块级元素 使用HTML编辑工具，编写HTML代码，实现如图所示的页面效果 任务2用于布局的块级元素

    编写HTML代码，实现如图所示的页面效果 任务3行级元素 编写HTML代码，实现如图所示的页面效果。 任务4超链接 编写HTML代码，实现导航菜单的链接 ●单击lj.html页面的“人物简介”，将跳转到ww.html的介绍页。 ●单击lj.html页面的“王孟”，将跳转到设置锚点的ww.html页面相应位置。 ●单击ww.html的返回链接可以返回到lj.html。 ●单击“联系我们”，将自动打开本机的电子邮件程序。

    JS实训答案

    1、倒三角99乘法表 2、正三角99乘法表 3、输出两个数之间能被5整除的数的和 4、从键盘输入两个数，输出两个数中的最大的数。 条件运算符

    《网页设计与制作实训》指导书

    《网页设计与制作实训》指导书 --以“五岳独尊泰山”为例 一、规划网站 1．策划网站主题 在着手设计网站之前，要确定好网站的主题，每个网站都应该具有一个明确的主题。本次所创建的网站是一个名山宣传类网站，主要以五岳独尊泰山为主题，包括泰山简介、泰山文化、泰山名吃、泰山地质、环境和神话传说等内容。 2．确定网站风格 确定好站点主题后，就要根据该主题选择站点的风格。由于本次所创建的网站是一个名山宣传类网站，要求结构清晰，能够展现出泰山的魅力所在。本网站的主要特点如下： （1）设计风格要大众化，为了提高浏览速度，精选图片，同时尽量减少图片的使用，更多地使用层、表格实现效果。 （2）背景颜色以灰色和白色为主，文字颜色以黑色为主、蓝色和红色为辅。 （3）文字内容丰富、知识性强，标题简洁明了，字体一般采用宋体，大小一般为14像素。 （4）首页的版式结构采用典型的“三”字型结构，首页如图1-1所示。 图1-1 首页设计浏览效果

    二级页面采用与首页统一的风格设计。 该网站名称为“五岳独尊泰山”，所有网页的标题为“五岳独尊—泰山”，个人根据所定主题确定。英文名称为“MountTai”。 3．构思网站栏目结构 先在纸上绘制网站的栏目结构草图，经过反复推敲，最后确定完整的栏目和内容的层次结构。“五岳独尊泰山”的栏目结构如表1-1所示。 表1-1“五岳独尊泰山”的栏目结构 为了简化对网站的浏览过程，大部分网页通过栏目就能浏览内容页面，首页的主菜单包括9个菜单项：泰山简介、泰山文化、泰山名吃、泰山自然、泰山地质、神话传说、泰山景点、泰山美图、寄语泰山。 4．规划网站目录结构和链接结构 根据网站策划确定的栏目结构，创建站点目录，一个网站的目录结构要求层次清晰、井然有序，首页、栏目页、内容页区分明确，有利于日后的修改。“五岳独尊泰山”的目录结构，各文件夹的所存放文件类型如表1-2所示。 ※注意※ 文件夹和文件的名称建议不要使用中文名，因为中文名在HTML 文档中容易生成乱码，导致链接产生错误。 表1-2网站的目录结构及其存放的文件类型

    js实训报告

    Javascript实训报告 专业名称:计算机应用技术 班级名称：应用班 学员姓名： 指导教师：_______________ 完成日期：2014年6月18日

    一、简介： Web标准并不是一个单一的标准，而是一个系列的标准的集合。Web标准中具有代表性的几种语言有：XML可扩展标记语言、XHTML 可扩展超文本标记语言、CSS层叠样式表、DOM文档对象模型、JavaScript脚本程序设计语言等。 本次实训主要是学习JavaScript框架，是轻量级的js库，它兼容CSS3，还兼容各种浏览器(IE6.0+,FF 1.5+, Safari 2.0+, Opera 9.0+)。使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。 本次实训的目的是通过对JavaScript的学习，学会使用HTML标记语言，通过CSS对页面的布局，在HTML基础上，使用JavaScript 开发交互式动态Web网页。能够熟练使用JavaScript语言，让网页能够动态显示，美观大方。 二、实训目的： 1.掌握并练习javaScript的基本语法 2.熟悉javaScript编程环境Aptana 3.练习选择结构语句的应用 4.练习显示时间的应用 三、实训内容： 1、HTML

    HTML文件是可以被多种网页浏览器读取，产生网页传递各类资讯的文件。从本质上来说，Internet（互联网）是一个由一系列传输协议和各类文档所组成的集合，html文件只是其中的一种。这些HTML文件存储在分布于世界各地的服务器硬盘上，通过传输协议用户可以远程获取这些文件所传达的资讯和信息。 网络浏览器，例如Netscape Navigator或Microsoft Internet explorer,能够解释HTML文件来显示网页，这是网络浏览器的主要作用。当你使用浏览器在互联网上浏览网页时，浏览器软件就自动完成HTML文件到网页的转换。 2、CSS CSS是层叠样式表的简称。为了弥补HTML在显示属性上的不足，W3C协会制定了这一套扩展样式标准。CSS标准中重新定义了HTML中原来的文字显示样式，并增加了新的概念，例如类、层等，还可以对文字进行重叠、定位等操作。它提供了更为丰富多彩的样式；同时CSS可集中进行样式管理。另外，CSS允许将样式定义单独存储于样式文件中，这样就可以进行样式管理，不仅便于样式管理，还可以在多个HTML文件共享样式定义。一个HTML文件允许引用多个不同的CSS样式文件中的样式定义。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

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

    《Javascript程序设计》实验指导书 一、课程性质和教学目的 JavaScrip是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。 学习Javascript必须理论联系实际，多做上机练习。只有在上机实验过程中才能真正学会程序设计。本实验报告主要包括学期内各个实验的实验目的、实验内容、实验记录、实验总结等，供学生学习记录，以提高学习效率。参加实验的学生应参照本报告手册的要求，认真实验，如实填写实验数据，并对实验结果进行分析，阐述实验中所遇到的问题，提出解决问题的方法。 二、实验目的 上机实验的目的不仅是为了验证教材和讲课的内容，或者验证自己所编写的程序正确与否。学习程序设计上机实验的目的是： 1.加深对讲授内容的理解，尤其是一些语法规定，课堂讲授既枯燥无味又难以记忆，但它们都很重要。能过多次上机就能自然地、熟练地掌握。通过上机掌握语法是行之有效的方法。 2.学会上机调试程序。即善于发现程序中的错误，并且能很快排除这些错误，使程序能正确运行。要真正掌握这门课程，不仅应当了解和熟悉有关理论和方法，还要求自己动手实现即会编程并上机调试通过。故应给予充分重视。调试程序固然可以借鉴他人的现成经验，但更重要的是通过自己的直接实践来累积经验，而且有些经验是只能意会难以言传。调试程序的能力是每个程序设计人员应当掌握的一项基本功。 3.做实验时不要在程序通过后就认为搞定、完成任务了，而应当在己通过的程序甚而上作一些改动（例如修改一些参数、增加程序一些功能、改变输入数据的方法等），以观察和分析所出现的情况。 三、上机实验前的准备工作 实验前应做好准备工作，以充分利用有限的上机时间。准备工作至少包括： 1.复习和掌握本实验有关的教学内容。 2.准备好上机所需的程序。初学者切忌不编写程序或抄别人的程序去上机，应从一开始就养成严谨的科学作风。 3.对运行上可能出现的问题应事先作出估计；对程序中自己有疑问的地方，应作上记号，以便在上机时给予注意。 4.根据实验内容认真准备实验程序及调试时所需的输入数据。 5.在上实验课之前必须写好预习报告（编程题源程序用纸写好或画好程序流程图） 6.填空与改错题等题要预先做好，上机时的工作只能是输入源程序和调试修改。

    HTML实验报告

    东北大学软件学院 《HTML与JavaScript》 实验报告 专业：软件工程 班级：1405 学号：20144706 姓名：张俊怡 完成时间：2015/12/6 指导教师：王蓓蕾 总共页数： 8

    网站主界面：（针对颜色不协调的问题已经改进） 主界面布局： 全程采用table布局，主要分块为上边一块，下边一块，中间过渡用动态效果展示网站信息。 下边左边是主要功能选择区，中间是文字动态区，右边是图片以及视频动态展示区。 采用的CSS方法： Class外部关联和内部关联配合使用 网站整体颜色风格： 用淡雅浅色作为主页背景 编写代码步骤： 最重要的是整体布局，布局好后分块修饰。

    使用了JavaScript 来获取当前系统时间。 网站介绍页面： 使用了较多是js和jQuery

    实现了图片的动态特效。 资料下载页面： 布局方式： 采用table布局，布局较为简单，资料下载这个页面能实现的功能其实包括资料下载和上传。 代码：

    JavaScript实验实训内容

    JavaScript 表达式和逻辑控制语句的使用 实验 一．实验目的 掌握JavaScript 的变量； 掌握JavaScript 的数据类型；掌握JavaScript 的运算符；掌握 JavaScript 的逻辑控制语句。 二．实验内容 1、声明一个变量str,为其赋值"Hello World!"，显示该值; 改变该变量值为"Hello China!" ，然后再显示该值。 2、将1~10 之间的奇偶数分开，页面呈现方式如下： 3、任意输入一个年份，判断是否为闰年。

    实验二函数部分 一．实验目的 掌握JavaScript 的常用函数； 二．实验内容 编写一个函数，在页面上输出1~1000之间所有能同时被3，5，7 整除的证书，并要求每行显示6 个这样的数。 ex050303.htm
    实验三

    实验目的：常用函数的使用。 实验内容： 利用全局变量和函数，设计模拟幸运数字机游戏。设幸运数字为 8，每次 由计算机随机生成 3 个 1~9之间的随机数，当这 3 个随机数中有一个数字 为 8 时，就算赢了一次。 Ex050309.html 

       
       
       实验三
    实验目的：常用函数的使用。 实验内容： 利用全局变量和函数，设计模拟幸运数字机游戏。设幸运数字为8，每次由计算机随机生成3个1~9之间的随机数，当这3个随机数中有一个数字为8时，就算赢了一次。 Ex050309.html      varwin_rate=0; //赢率 varplay_times=0; //总次数 varwins=0; //赢的次数 varlast_digits; //上次数字串 varlast_win; //上次是否赢?