JavaScript实验实训内容
实验三JAVASCRIPT基础训练
1
3. 新建一个 HTML 网页，实现鼠标移动时，一行文字跟随鼠标移动；
return false; // 判断 30 天的月 if((month==4 || month==6 || month==9 || month==11)
&& day>30) return false; // 如果是 2 月，判断是否为润年 if(month==2) { if(year%400==0 || (year%4==0 && year%100!=0)) {
4
return true; } // 判断是否是日期，日期的格式为 1988-1-1 function isDate(date) {
// 查找分隔符 index1 = date.indexOf("-"); // 如果分隔符不存在，则不是合法的时间 if(index1 == -1)
return false; // 获取时间中的年 year = date.substring(0,index1); // 获取时间中的剩下部分 date = date.substring(index1+1); // 查找第二个分隔符 index1 = date.indexOf("-"); // 如果不存在第二个分隔符，则不是合法的时间 if(index1 == -1)
font-family: "华文彩云"; font-size: 44px; color: #6600FF; } --> </style> </head> <body> <h2 align="center" class="ss">欢 迎 注 册</h2> <form name="form1" action="yulei.html" method="post"
实验一 JavaScript编程基础
实验一 JavaScript编程基础（一）实验目的1. 掌握在网页中引入JavaScript的方式。
2. 掌握JavaScript程序控制结构的使用。
3．掌握函数的应用。
（二）实验器材计算机硬件环境：PIII 667以上计算机；软件环境：Dreamweaver。
（三）实验学时4学时（四）实验内容1. 编写第一个JavaScript程序，实现在页面上输出“欢迎学习JavaScript！”。
【要求】分别使用网页中引用JavaScript的三种方式完成！执行效果如下图所示：⒉制作自动问候语。
通过输入一个有效的24小时制的时间（格式为hh:mm:ss），按以下要求显示问候语。
5点以后～8点以前显示早上好！；12点以前显示上午好！；18点以前显示下午好！；21点以前显示晚上好！；23点以前显示祝你晚安！；23点～5点以前显示网虫：该休息了，明天还有课呢！【提示】使用substr(startindex[,length])函数或substring(startindex[,endindex])取子串3. 输出正方形。
按以下要求使用JavaScript在页面上输出一个正方形，要求如下：（1）使用prompt()方法输入正方形的行数。
（2）无论输入的正方形行数是否大于10，输出的正方形行数最多为10。
4. 制作简单计算器。
设计并完成如下界面，并完成相应功能。
【提示】使用四个或是一个函数实现计算功能5. 打印字型图案。
在页面中使用“▋”打印数字“2”或“8”字型图案，模拟电子广告牌的数码管显示，使用6×9的矩阵来表示。
6．简单数字倒计时器。
页面加载后显示的初始数字为5，每隔一秒数字减1，当数字减到0时，在弹出的对话框中显示“时间到！”。
《Javascript 网页开发》实训大纲
Windows 2000 Server实训大纲实训一 Windows 2000 Server IIS的安装与配置一、实验目的和要求熟悉IIS的安装过程与配置方法。
通过编写简单的JavaScript页面，掌握JavaScript网页的编写和运行方法。
要求学生掌握关于动态网页的相关知识；具备制作静态网页的基础；具备一定的网络基础知识。
二、实验器材Windows 2000 Server计算机系统；安装IIS、Dreamweaver MX 2004、Access 2000数据库系统等。
三、实验内容和步骤1、JSP Web服务器的安装与配置；参考步骤：1.检测本机的TCP/IP协的运行情况：运用Ping和IPconfig命令；2.将windows 2000/XP光盘插入教师机中，将其共享；3.学生机器将查看自己的IP地址，在网络中配置；4.在添加和删除程序中，添加IIS；5.在自己的本地硬盘中用03soft建一文件夹；6.在管理工具中Internet 信息服务中配置IIS；7.运行Dreamweaver MX 2004建立站点，完成相关的设置，其中根目录与IIS中一致，并使用服务器技术；8.启动Dreamweaver MX 2004，然后切换到源代码显示方式；9.在<body>与</body>之间，加入以下JavaScript代码：<script language=”javascript”>Alert(让我们共同努力学好JavaScript!并做得更好!);</script>10.将网页保存到C：\03soft目录下，文件命名为first. hml；启动IE浏览器，在地址栏中键入：http://localhost/first.hml或http://127.0.0.1/first.hml，然后按回车。
注意观察输出结果；2、FTP服务器的配置参考步骤：1.右击“我的电脑”|“管理”，进入“计算机管理”界面，新建用户,如：soft_student,密码为：123456；2.进入IIS界面，选择“默认FTP”，进行相应的选项设置，如添加：添加用户名和密码；文件的目录等；3.打开IE浏览器，在地址栏中输入：FTP：//localhost,自动弹出对话框，要求输入用户名和密码，根据在FTP中的设置输入后，窗口将显示站点根目录中的相关内容，表示访问成功；复制本机中的网页文件，粘贴在窗口文件夹中，即为上传。
JavaScript实训参考
实训2 HTML文档基本操作
【实训步Байду номын сангаас】
（4）在top.html页中应用图像标记<img>调用在线音乐网的Banner广告，代码如下。 <table width="800" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center"><img src="images/bg.JPG" width="768" height="220" /></td> </tr> </table> （5）在bottom页中应用表格标记<table>、换行标记<br>输出版权信息，代码如下。 <table width="800" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="70" align="center" bgcolor="#FFCC33"> 我 行 我 秀 在 线 音 乐 网
实训2 HTML文档基本操作
【实训步骤】
首页index.html实现框架的完整代码如下。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>在线音乐网</title> </head> <frameset rows="220,*" frameborder="no" border="0" framespacing="0"> <frame src="top.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" /> <frameset rows="*,159" cols="*" framespacing="0" frameborder="no" border="0"> <frameset rows="*" cols="430,*" framespacing="0" frameborder="no" border="0"> <frame src="left.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" /> <frame src="main.html" name="mainFrame" id="mainFrame" /> </frameset> <frame src="bottom.html" name="bottomFrame" scrolling="No" noresize="noresize" id="bottomFrame" /> </frameset> </frameset> <noframes> <body bgcolor="#CCFF33"> </body> </noframes> </html>
网页设计与制作JavaScript 实验
实验十三【实验内容】1 、JavaScript 变量、表达式和运算符的使用2 、JavaScript 对话框的使用3 、JavaScript 函数的定义及调用4 、JavaScript 分支结构程序设计5 、JavaScript 循环结构程序设计【实验目的与要求】1 、掌握JavaScript 变量、表达式和运算符的使用2 、掌握JavaScript 对话框的使用3 、掌握JavaScript 函数的定义及调用【实验过程】实验内容一：JavaScript 变量、表达式和运算符1 、程序案例1 －显示年龄<script language=javascript>var name; // 声明变量namevar age; // 声明变量agename=" 张三"; // 把字符串" 张三" 存储到变量name 中age=20; // 把整数20 存储到变量age 中document.write(name); // 读取变量name 的值，并将它显示在页面上document.write(" 的年龄是:"); // 在页面上输出" 的年龄是:"document.write(age); // 读取变量age 的值，并将它显示在页面上</script>2、思考题：设计JavaScript 程序，在网页上输出半径为 3 的圆的面积和周长。
实验内容二：JavaScript 对话框1 、提示对话框程序案例<script language=javascript>var name;name=prompt(" 请输入您的姓名:","");document.write(" 尊敬的"+name+" ：欢迎您进入我的主页！");</script>2、思考题：设计密码检测程序，密码输入正确，显示“ 欢迎访问” ，不正确显示“ 密码不正确，好好想哟” 。
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<html><head><script language=javascript><!--function IsThatNumber(x){return x%3==0 && x%5==0 && x%7==0;}//--></script></head><body><pre><script language=javascript><!--var n,nb=0;for(n=1;n<1000;n++){if (IsThatNumber(n)){if (nb%6 > 0) document.write(",");nb++;document.write(n);if (nb%6 == 0) document.write("\n");}}document.write("\n\n");document.write("共有"+nb+"个数");//--></script></pre></body></html>实验三实验目的：常用函数的使用。
JavaScript实验实训内容
JavaScript表达式和逻辑操纵语句的利用实验一一．实验目的把握JavaScript的变量；把握JavaScript的数据类型；把握JavaScript的运算符；把握JavaScript的逻辑操纵语句。
二．实验内容一、声明一个变量str，为其赋值"Hello World!"，显示该值；改变该变量值为"Hello China!"，然后再显示该值。
二、将1~10之间的奇偶数分开，页面呈现方式如下：3、任意输入一个年份，判定是不是为闰年。
实验二函数部份一．实验目的把握JavaScript的常常利用函数；二．实验内容编写一个函数，在页面上输出1~1000之间所有能同时被3，5，7整除的证书，并要求每行显示6个如此的数。
<html><head><script language=javascript><!--function IsThatNumber(x){return x%3==0 && x%5==0 && x%7==0;}METAMETAif">'; }return ret;}Last"></P><P>卡号：<INPUT type="text" name="mynumber" size="20" value="0000-0000-0000-0000"></P> <P><INPUT type="submit" value="发送"></P></FORM></BODY></HTML>1．设计3个按钮，当单击他们时别离使页面的背景色变成红、蓝和绿色。
javascript实验
javascript实验长江职业学院Javascript语⾔程序设计实验指导书专业：学号：姓名：班级：指导⽼师：软件教研室编实验⼀ JavaScript基本操作⼀、实验⽬的熟练掌握在HTML⽂件中编写JavaScript程序的基本操作，及在Microsoft InternetExplorer浏览器和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实训报告
javascript实训报告一、引言在这篇报告中，我将回顾我在JavaScript实训课程中所学到的内容和经验。
通过这次实训，我在JavaScript编程方面得到了很多的提升和实践机会。
我会分享我在实践过程中遇到的挑战和解决方案，以及对于JavaScript的未来发展的一些展望。
二、实践项目介绍本次实践项目是基于JavaScript的一个购物车网页应用。
用户可以通过该应用向购物车添加商品，并实现购物车的一些基本功能，如添加、删除、计算总价等。
这个项目旨在让我们学生更好地理解JavaScript的核心概念和应用。
三、实践过程1. 环境设置在开始实践之前，我首先需要设置合适的开发环境。
我选择了使用Visual Studio Code编辑器和Chrome浏览器进行开发和调试。
通过这些工具的结合，我能够更加高效地编写代码，并实时查看代码的运行结果。
2. 学习JavaScript基础知识在开始编写购物车应用之前，我需要对JavaScript的基础知识进行学习和巩固。
这包括了数据类型、变量、运算符、条件语句、循环结构等等。
通过深入学习这些知识，我能够更好地理解JavaScript的语法和特性。
3. 构建购物车应用在完成了基础知识的学习后，我开始了购物车应用的构建过程。
首先，我定义了需要用到的变量和数据结构，如商品列表、购物车数组等。
然后，我编写了一些函数来实现购物车的各种功能，如添加商品、删除商品、计算总价等。
在编写代码的过程中，我遇到了一些问题，比如如何正确地更新购物车的状态，如何处理用户输入的数据等等。
通过查阅文档和进行试错，我最终找到了解决方案并顺利完成了购物车应用。
4. 测试和调试完成编码之后，我进行了一系列的测试和调试工作。
我使用Chrome浏览器的开发者工具来检查代码的运行情况，并修复了一些bug。
通过这个过程，我学会了如何进行有效的代码调试和错误处理。
5. 优化和改进在完成了购物车应用的基本功能之后，我决定对应用进行一些优化和改进。
实验项目21—JAVASCRIPT内置函数和对象
实验难点实验内容实验目的实验重点实验步骤实验内容1、JavaScript 内置函数的应用2、JavaScript 内置对象的应用3、JavaScript 浏览器对象的应用实验难点实验内容实验目的实验重点实验步骤实验目的1、掌握JavaScript 内置函数的使用方法2、掌握JavaScript 常用内置对象的属性和方法3、掌握JavaScript 浏览器对象的含义4、掌握使用浏览器对象提供的信息来完成一定功能的网页设计。
实验难点实验内容实验目的实验重点实验步骤实验重点1、掌握JavaScript 内置函数的使用方法2、掌握JavaScript 常用内置对象的属性和方法3、掌握JavaScript 浏览器对象的含义实验难点实验内容实验目的实验重点实验步骤实验难点1、掌握使用浏览器对象提供的信息来完成一定功能的网页设计。
实验难点实验内容实验目的实验重点实验步骤实验内容一：JavaScript 内置函数的应用1、eval( )：计算字符串表达式的值2、parseFloat( )和parseInt( )：将字符串开头的整数或浮点数分解出来，转换为整数或浮点数3、isNaN( )：确定一个变量是否为NaN （Not a Number ）4、escape( )：将字符串中的非字母数字字符转换为按格式%XX 表示的数字5、unescape( )：将字符串格式为%XX 的数字转换为字符6、程序案例1_1：求用户在提示对话框中输入的表达式的值。
7、思考题：判断用户输入的字符是不是数字，如果是，分别将其转换成浮点数和整数，并显示到网页上。
实验难点实验内容实验目的实验重点实验步骤实验内容二：JavaScript 内置对象的应用1、Math 对象2、Date 对象3、Number 对象4、String 对象5、Array 对象实验难点实验内容实验目的实验重点实验步骤一、对象的基本概念1、什么是对象对象用于描述客观世界存在的特定实体。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
JavaScript 表达式和逻辑控制语句的使用实验一．实验目的掌握JavaScript 的变量；掌握JavaScript 的数据类型；掌握JavaScript 的运算符；掌握JavaScript 的逻辑控制语句。
二．实验内容1、声明一个变量str,为其赋值"Hello World!"，显示该值; 改变该变量值为"HelloChina!" ，然后再显示该值。
2、将1~10 之间的奇偶数分开，页面呈现方式如下：3、任意输入一个年份，判断是否为闰年。
实验二函数部分一．实验目的掌握JavaScript 的常用函数；二．实验内容编写一个函数，在页面上输出1~1000之间所有能同时被3，5，7 整除的证书，并要求每行显示6 个这样的数。
ex050303.htm<html><head> <script language=javascript><!-- function IsThatNumber(x){return x%3==0 && x%5==0 && x%7==0;}//--> </script></head><body><pre><script language=javascript><!-- var n,nb=0; for(n=1;n<1000;n++) {if (IsThatNumber(n)){if (nb%6 > 0) document.write(","); nb++;document.write(n);if (nb%6 == 0) document.write("\n");}document.write("\n\n"); document.write(" 共有"+nb+" 个数"); //--></script></pre></body> </html>实验三实验目的：常用函数的使用。
实验内容：利用全局变量和函数，设计模拟幸运数字机游戏。
设幸运数字为 8，每次 由计算机随机生成 3 个 1~9之间的随机数，当这 3 个随机数中有一个数字 为 8 时，就算赢了一次。
Ex050309.html <HTML><HEAD> <META name="GENERATOR" content="Microsoft FrontPage 5.0"><META name="ProgId" content=""> <SCRIPT language="javascript"> var win_rate=0; var play_times=0; //总次数 var wins=0;var last_digits; // 上次数字串var last_win; //上次是否赢 ? <!--function PlayOnce() {// 模拟玩一次数字机游戏var i,digit; play_times++; last_digits=""; last_win=false; for(i=0;i<3;i++){digit = Math.floor(Math.random()*9)+1; last_digits += digit; if (digit==8) last_win=true;}if (last_win) wins++;win_rate = Math.floor(100*(wins/play_times));}//--> </SCRIPT> </HEAD> <BODY><PRE><SCRIPT language="javascript"> <!-- while(true){PlayOnce();if (!confirm(last_digits +"\n" + (last_win?"赢":"输 ”)+ "\n 胜率"+win_rate+"%,继续吗？")) break;赢率//赢的次数}//--></SCRIPT> </PRE></BODY> </HTML>事件与对象实验四实验目的：表单的设计。
实验内容：设计一个表单，放入两个按钮，单击它们时将显示不同问候语。
S07_02.HTM<HTML><HEAD><TITLE> 处理事件-HTML 标记方式</TITLE><script language=javascript>function hello_girl(){alert(”小姐，您好!");}</script></HEAD> <BODY><FORM name="form1"><INPUT type="button" value=" 问侯先生" name="hello1" onclick="alert(' 先生,您好!');"></P> <INPUT type="button" value=" 问侯小姐" name="hello2" onclick="return hello_girl();"></P></FORM></BODY></HTML>实验五实验目的：内置对象的使用。
实验内容：1．在页面中显示当天日期。
S06_03.HTM ：<HTML><HEAD><TITLE> 使用new 运算符</TITLE></HEAD><BODY><script language=javascript>var today;today = new Date();document.write(" 今天是"+today.getFullYear()+" 年"+(today.getMonth()+1)+" 月"+today.getDate()+" 日");</script></BODY></HTML>实验六实验目的：内置对象的使用。
实验内容：2．在浏览器窗口的状态栏中显示当前浏览器的版本信息。
S06_02.HTM<HTML><HEAD><TITLE> 访问对象的属性</TITLE> <script language=javascript>window.status = navigator.appVersion;</script></HEAD><BODY></BODY></HTML>实验七实验目的：内置对象的使用。
实验内容：3．将用户输入的字符串反向输出到页面上，并且要求将其中的小写字母转换成大写字母。
S06_07.HTM<HTML><HEAD><TITLE> 使用String</TITLE></HEAD><BODY><script language=javascript>var origin_s,upper_s,i;origin_s = prompt(" 请输入一行文字:","");upper_s = origin_s.toUpperCase();for(i=upper_s.length-1;i>=0;i--) document.write(upper_s.charAt(i));</script></BODY></HTML>实验八实验目的：内置对象的使用。
实验内容：4 .求PI的5次方，并四舍五入取整。
S06_04.HTM <HTML><HEAD><TITLE> 使用Math 对象</TITLE> <script language=javascript> alert(Math.round(Math.pow(Math.PI,5)));</script></HEAD><BODY></BODY></HTML>实验九实验内容：5．由图像表示日期。
ch3_14.htm<script language="JavaScript"> <!-- var sWeek = new Array(" 日","一"," 二 "," var myDate = newDate(); var sYear =myDate.getFullYear(); var sMonth = myDate.getMonth()+1; var sDate = myDate.getDate(); var sDay = sWeek[myDate.getDay()];document.write(imageDigits(sYear) + " " + imageDigits(sMonth) + " " +imageDigits(sDate) + "<br>");// 如果输入数是 1 位数，在十位数上补 0 function formatTwoDigits(s) { if (s<10) return "0"+s; else return s;}// 将数转换为图像，注意，在本文件的相同目录下已有 1.gif ……以此类推 function imageDigits(s) { var ret = "";var s = new String(s);for (var i=0; i<s.length; i++) {ret += '<img src="' + s.charAt(i) + '.gif">';}return ret;}//--></script>JavaScript 对象的理解和使用实验．实验目的掌握 JavaScript 的常用的对象类型； 掌握 JavaScript 对象属性和方法的引用方式；实验目的： 内置对象的使用。