[web程序设计基础R]实验报告（JavaScript事件、JavaScript内置函数与内置对象、HTML基础、CSS+DIV页面布局）

web实验报告

玛卡巴卡

4045人浏览 · 2022-12-31 15:21:41

玛卡巴卡 · 2022-12-31 15:21:41 发布

实验一JavaScript事件

一、实验目的

1、掌握事件、事件驱动、事件处理程序的概念，理解三者之间的关系；

2、掌握指定事件处理程序的方法；

3、学会编写简单的事件处理程序。

二、实验环境

笔记本电脑、Windows系统

程序分析说明及结果

说明题（1）(2)

四、程序设计说明、源码及运行结果

<!DOCTYPE html>

<html>

<head>

function surf(){

document.getElementById("1").value=document.getElementById("URL").value;}

function jump(){

location=document.getElementById("1").value;}

</script>

</head>

<body>

<p>选择要去的网址</p>

</select>

</body>

</html>

四、实验总结

使用var时，不可以任意添加，location前不能添加var；以及赋值语句document.getElementById("1").value的用法，可以覆盖其原有的值；还有onchange的作用和意义，在改变后，会执行后面的函数。

实验二 JavaScript内置函数与内置对象

一、实验目的

1．分析JavaScript内置函数的使用方法；

2．掌握JavaScript常用内置对象的属性和方法。

二、实验环境

计算机、Windows操作系统

三、程序分析说明及结果

1.

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<title>内置函数的理解</title>

<style type="text/css">

div{

background:#CDEBE6;

color:#330000;

width:750px;

font-size:20px;

font-weight:bolder;

}

h4{text-align:center;}

b{color：red;font-size:18px;}

</style>

</head>

<body>

<div>

<h4>系统函数使用</h4>

<b>1.eval("字符串")<br/></b>

<script type="text/javascript">

var rel=eval("1000+3/5");

document.write("  "+"1000+3/5="+rel);

document.write("<br/>");

document.write("  "+"x=10,y=20,x*y=");

eval("x=10;y=20;document.write(x*y)");

document.write("<br/>  2+2="+eval("2+2"));

document.write("<br/>");

var x=10;

document.write("  "+"x=10,x+17="+eval(x+17));

document.write("<br/>");

</script>

<b>2.escape("字符串")<br/></b>

<script type="text/javascript">

document.write("  "+"escape('&')="+escape("&"));

document.write("<br/>");

result=escape("  "+"my name is 张华");

document.write("  "+"escape('my name is 张华')="+result);

</script>

<b>3.unescape(string)<br/></b>

<script type="text/javascript">

document.write("  "+"unescape('%26')="+unescape("%26"));

document.write("<br/>");

result=unescape("  "+"my%20name%20is%20%u5F20%u534E");

document.write("  "+"unescape('my%20name%20is%20%u5F20%u534E')="+result);

</script>

<b>4.parseFloat(string)<br/></b>

<script type="text/javascript">

document.write("  "+"parseFloat('3.14')="+parseFloat("3.14"));

document.write("<br/>");

document.write("  "+"parseFloat('314e-2')="+parseFloat("314e-2"));

document.write("<br/>");

document.write("  "+"parseFloat('3.14ab')="+parseFloat("3.14ab"));

document.write("<br/>");

document.write("  "+"parseFloat('FF2')="+parseFloat("FF2"));

document.write("<br/>");

</script>

<b>5.parseInt("numberstring,radix)<br/></b>

<script type="text/javascript">

document.write("  "+"32:"+parseInt("32"));

document.write("<br/>");

document.write("  "+"032:"+parseInt("032"));

document.write("<br/>");

document.write("  "+"0x32:"+parseInt("0x32"));

document.write("<br/>");

document.write("  "+"parseInt('15*3',10)="+parseInt("15*3",10));

document.write("<br/>");

</script>

<b>6.isNaN()<br/></b>

<script type="text/javascript">

document.write("  "+"isNaN(\"5454g\")="+isNaN("5454g"));

document.write("<br/>");

document.write("  "+"isNaN(\"789\")="+isNaN("789"));

document.write("<br/>");

</script>

</div>

</body>

</html>

对于第一段代码可知：

eval()函数，参数是字符串类型，主要功能是将字符串作为脚本代码来执行
escape()是对字符串进行编码。
unescape()是对建一个函数的编码进行解码。
parseFloat（)解析一个字符串，并返回一个浮点数，反之返回NaN，在函数转化过程中，遇到第一个非数字即终止转化。
parseInt()解析一个字符串，并返回一个整数，反之返回NaN，在函数转化过程中，遇到第一个非数字即终止转化。
isNaN()主要功能是检查其参数是否为非数字值，如果参数是返回False，否则返回True

2.

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>日期对象及其方法 </title>

<script type="text/javascript">

var mydate=new Date();

var myyear=mydate.getFullYear(); 

document.write("年份:"+myyear); 

document.write("<br/>");

var myMonth=mydate.getMonth(); 

document.write("月份:"+myMonth); 

document.write("<br/>");

var mydays=mydate.getDate();

document.write("日期:"+mydays); 

document.write("<br/>");

var weekday=["日","一","二","三","四","五","六"];

document.write("星期：" + weekday[mydate.getDay()] );

document.write("<br/>");

pageOpen=new Date();

function stay(){

pageClose=new Date();

minutes=(pageClose.getMinutes()-pageOpen.getMinutes());

seconds=(pageClose.getSeconds()-pageOpen.getSeconds());

time=(seconds+(minutes*60));

time=(time+"秒");

alert("您在这里停留了"+time+"欢迎下次再来");

}

</script>

</head>

<body>

<input type="button" value="停留时间" onClick="stay()">

</body>

</html>

对于第二段的代码：

getFullYear()以四位数字返回年份

getMonth()从data对象中返回月份

getData()从data对象中返回一个月的某一天

之后getMinutes() getSeconds()获取分秒与最后分秒进行差值几位最后的停留时间。

四、程序设计说明、源码及运行结果

1.程序设计说明：

利用data对象的各种方法进行对计时器的实现。

2.源码：

<!DOCTYPE html>

<head>

var timeResult=0

var timer

function timedCount() {

document.txtForm.txt.value=timeResult;

timeResult=timeResult+1

timer=setTimeout("timedCount()",1000)

}

function stopCount() {

clearTimeout(timer)

}

function clearCount() {

document.txtForm.txt.value=0

}

</script>

</head>

<body>

</form>

</body>

<html>

运行结果：

实验总结

对javascript的内置函数的了解：

第一类：常规函数
包括以下9个函数：
(1)alert函数显示一个警告对话框，包括一个OK按钮。
(2)confirm函数：显示一个确认对话框，包括OK、Cancel按钮。
(3)escape函数：将字符转换成Unicode码。
(4)eval函数：计算表达指租式的结果。
(5)isNaN函数：测试是(true)否(false)不是一个数字。
(6)parseFloat函数：将字符串转换成符点数字形式。
(7)parseInt函数：将符串转换成整数数字形式(可指定几进制)。
(8)prompt函数：显示一个输入对话框，提示等待用户输入。

第二类：数组函数
包括以下4个函数：
(1)join函数：转换并连接数组中的所有元素为一个字符串。
(2)langth函数：返回数组的长度。
(3)reverse函数：将数组元素顺序颠倒。
(4)sort函数：将数组元素重新排序。

第三类：日期函数
包括以下20个函数：
(1)getDate函数：返回日期的“日”部分，值为1～31
(2)getDay函数：返回星期几，值为0～6，其中0表示星期日，1表示星期一，...，6表示星期六
(3)getHours函数：返回日期的“小时”部分，值为0～23。
(4)getMinutes函数：返回日期的“分钟”部分，值为0～59。见上例。
(5)getMonth函数：返回日期的“月”部分，值为0～11。其中0表示1月，2表示3月，...，11表示12月。见前面的例子。
(6)getSeconds函数：返回日期的“秒”部分，值为0～59。见前面的例子。
(7)getTime函数：返回系统时间。
(8)getTimezoneOffset函数：返回此地区的时差(当地时间与GMT格林威治标准时间的地区时差)，单位为分钟。
(9)getYear函数：返回日期的“年”部分。返回值以1900年为基数，例如1999年为99。
(10)parse函数：返回从1970年1月1日零时整算起的毫秒数(当地时间)。
(11)setDate函数：设定日期的“日”部分，值为0～31。
(12)setHours函数：设定日期的“小时”部分，值为0～23。
(13)setMinutes函数：设定日期的“分钟”部分，值为0～59。
(14)setMonth函数：设定日期的“月”部分，值为0～11。其中0表示1月，...，11表示12月。
(15)setSeconds函数：设定日期的“秒”部分，值为0～59。
(16)setTime函数：设定时间。时间数值为1970年1月1日零时整算起的毫秒数。
(17)setYear函数：设定日期的“年”部分。
(18)toGMTString函数：转换日期成为字符串，为GMT格林或皮威治标准时间。
(19)setLocaleString函数：转换日期成为字符串，为当地时间。
(20)UTC函数：返回从1970年1月1日零时整算起的毫秒数，以GMT格林威治标准时间计算。

第四类：数学函数
函数有以下18个：
(1)abs函数：即Math.abs(以下同)，返回一个数字的绝对值。
(2)acos函数：返回一个数字的反余弦值，结果为0～π弧度(radians)。
(3)asin函数：返回一个数字的反正弦值，结果为-π/2～π/2弧度。
(4)atan函数：返回一个数字的反正切值，结果为-π/2～π/2弧度。
(5)atan2函数：返回一个坐标的极坐标角度值。
(6)ceil函数：返回一个数字的最小整数值(大于或等于)。
(7)cos函数：返回一个数字的余弦值，结果为-1～1。
(8)exp函数：返回e(自然对数)的乘方值。
(9)floor函数：返回一个数字的最大整数值(小于或等于)。
(10)log函数：自然对数函数，返回一个数字的自然对数(e)值。
(11)max函数：返回两个数的最大值。
(12)min函数：返回两个数的最小值。
(13)pow函数：返回一个数字的乘方值。
(14)random函数：返回一个0～1的随机数值。
(15)round函数：返回一个数字的四舍五入值，类型是整数。
(16)sin函数：返回一个数字的正弦值，结果为-1～1。
(17)sqrt函数：返回一个数字的平方根值。
(18)tan函数：返回一个数字的正切值。

第五类：字符串函数
包括以下20个函数：
(1)anchor函数：产生一个链接点(anchor)以作超级链接用。anchor函数设定<A NAME...>的链接点的名称，另一个函数link设定<A HREF=...>的URL地址。
(2)big函数：将字体加到一号，与<BIG>...</BIG>标签结果相同。
(3)blink函数：使字符串闪烁，与<BLINK>...</BLINK>标签结果相同。
(4)bold函数：使字体加粗，与<B>...</B>标签结果相同。
(5)charAt函数：返回字符串中指定的某个字符。
(6)fixed函数：将字体设定为固定宽度字体，与<TT>...</TT>标签结果相同。
(7)fontcolor函数：设定字体颜色，与<FONT COLOR=color>标签结果相同。
(8)fontsize函数：设定字体大小，与<FONT SIZE=n>标签结果相同。
(9)indexOf函数：返回字符串中第一个查找到的下标index，从左边开始查找。
(10)italics函数：使字体成为斜体字，与<I>...</I>标签结果相同。
(11)lastIndexOf函数：返回字符串中第一个查找到的下标index，从右边开始查找。
(12)length函数：返回字符串的长度。(不用带括号)
(13)link函数：产生一个超级链接，相当于设定<A HREF=...>的URL地址。
(14)small函数：将字体减小一号，与<SMALL>...</SMALL>标签结果相同。
(15)strike函数：在文本的中间加一条横线，与<STRIKE>...</STRIKE>标签结果相同。
(16)sub函数：显示字符串为下标字(subscript)。
(17)substring函数：返回字符串中指定的几个字符。
(18)sup函数：显示字符串为上标字(superscript)。
(19)toLowerCase函数：将字符串转换为小写。
(20)toUpperCase函数：将字符串转换为大写。

实验三 HTML基础

一、实验目的

1.掌握常用的HTML语言标记；

2．利用文本编辑器建立HTML文档，制作简单表单页面。

二、实验环境

计算机、Windows操作系统

程序分析说明及结果

实验例题：

源程序：

<html>

<head>

<title>Example</title>

</head>

<body bgcolor="#00DDFF">

<h1><B><I><FONT COLOR="#FF00FF">

<MARQUEE BGCOLOR= "#FFFF00" direction=left behavior=alternate>welcome to you</MARQUEE>

</FONT></I></B></h1>

<hr>

<h2 align=center><FONT COLOR="#0000FF">A simple HTML document</FONT></h2>

<EM>Welcome to the world of HTML</EM>

<p>This is a simple HTML document.It is to give you an outline of how to write HTML file and how the<b> markup tags</b> work in the <I>HTML</I> file</p>

<p>Following is three chapters

<ul>

<li>This is the chapter one</li>

<li><A HREF="#item">This is the chapter two</A></li>

<li>This is the chapter three</li>

</ul></p>

<hr>

<p><A NAME="item">Following is items of the chapter two</A> </p>

<table border=2 bgcolor=gray width="40%">

<tr>

<th>item</th><th>content</th>

</tr>

<tr>

<td>item 1</td>

<td>font</td>

</tr>

<tr>

<td>item 2</td>

<td>table</td>

</tr>

<tr>

<td>item 3</td>

<td>form</td>

</tr>

</table>

<hr><p>

1<p>

2<p>

3<p>

4<p>

5<p>

6<p>

7<p>

<B><I><FONT COLOR=BLUE SIZE=4>End of the example document </FONT></I></B>

</p>

</body>

</html>

实验结果：

对于表的填写：

源代码：

<html>

<head>

<title>Example</title>

</head>

<h1 align=center><b><i><font color="黑色">表1.1实验1程序分析记录表</h1>

<hr>

<table border=2 width="80%" align=center bgcolor=grey>

<tr>

<th>标签</th><th>标签功能</th>

<th>用到的说明</th><th>效果说明</th>

</tr>

<tr>

<td>marquee</td>

<td>html标签 - <marquee></marquee>可以实现多种滚动效果，无需js控制。使用marquee标记不仅可以移动文字，也可以移动图片，表格等.只需要在<marquee></marquee>内部输入要滚动的内容即可</td>

<td>

direction 表示滚动的方向，值可以是left，right，up，down，默认为left

behavior 表示滚动的方式，值可以是scroll(连续滚动)slide(滑动一次)alternate(来回滚动)

loop 表示循环的次数，值是正整数，默认为无限循环

scrollamount 表示运动速度，值是正整数，默认为6

scrolldelay 表示停顿时间，值是正整数，默认为0，单位是毫秒

align 表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middle

bgcolor 表示运动区域的背景色，值是16进制的RGB颜色，默认为白色

height、width 表示运动区域的高度和宽度，值是正整数(单位是像素)或百分数，默认width=100% height为标签内元素的高度。

hspace、vspace 表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素。

οnmοuseοver=this.stop() οnmοuseοut=this.start() 表示当鼠标以上区域的时候滚动停止，当鼠标移开的时候又继续滚动</td>

<td>behavior （控制滚动）

bgcolor （文字滚动范围的背景颜色）

direction （文字滚动的方向）

width （决定滚动文字在页面中的矩形范围的宽度）

height （决定滚动文字在页面中的矩形范围的高度）

hspace （滚动矩形区域距周围的空白区域）

vspace （滚动矩形区域距周围的空白区域）

loop （滚动文字的滚动次数）

scrollamount （文字滚动的速度）

scrolldelay （文字滚动的速度）

align （滚动文字位于距形内边框的上下左右位置）</td>

</tr>

<tr>

<td>table</td>

<td> 标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素</td>

<td>

tr 表格行 , td 表格单元 ,th 表头

border=“1” or “” —（table）

align=“left” 、center、right —（tr,td）

valign=“top”、middle、bottom —（tr,td）

bgcolor=“#000” —（table,tr,td）

td 中的属性

width=“npx”

height=“npx”

colspan=“n” --(向右合并n列)

rowspan=“n” --(向下合并n行)

table中的其他属性

cellpadding=“10” 单元格与内容之间的空格

cellspacing=“10” 单元格之间的空格

frame=“box” 显示四个边的外侧边框

“above” 显示上部的外侧边框

“below” 显示下部的外侧边框

“hsides” 显示上部和下部的外侧边框

“lhs” 显示左部的外侧边框

“rhs” 显示右部的外侧边框

“vsides” 显示左部和右部的外侧边框

“void” 无边框

rules=“rows” 位于行之间的线条

“cols” 位于列之间的线条

“all” 位于行和列之间的线条

“none” 没有线条

summary=“text”

summary 属性在 Web 浏览器中没有效果，可以通过屏幕阅读器看出效果。

table的width 总宽度的权重大于td的width的权重</td>

<td>tr：用于定义表格中的行，必须嵌套在 table 标签中，在表格中有几组 tr ，就表示有多少行。

td：用于定义表格中的单元格，必须嵌套在 tr 标签中，一组 tr 中包含几对 td，就表示该行有多少个单元格。

caption：用于定义表格标题，内容居中对齐。

上面说到的 td 标签准确来说叫表行单元格，在 HTML 中，还有一种单元格，那就是表头单元格，用 th 标签标示

在使用表格进行布局时，可以将表格划分为表头 thead、表身 tbody、表脚 tfoot，也分别叫表格的头部、主体和页脚。

align:设置表格在网页中的水平对齐方式，常用属性值有 left（居左显示），right（居右显示），center（居中显示）。

border:设置表格外边框的宽度，宽度以像素为单位，默认为0。

cellspacing 设置单元格与单元格的间距。

cellpadding 设置单元格内容与边框的间距。

width 设置表格的宽度，height 设置表格的高度。</td>

</tr>

</table>

</body>

</html>

实验结果（表的填写）：

实验要求：

编写一个能输出如下图所示界面的HTML文件。要求：

（1）校验输入的E-mail的格式：用户名@域名。

（2）校验输入的电话格式：11位数字组成。

（3）性别“女”为默认选项

（4）年龄的列表选项有：20以下、20、21、22、23、24、25、25以上，其中“20以下”为默认选项。

程序设计说明、源码及运行结果

程序设计说明：构建表单

构建表单结构。
对输出控件(创建文本框，创建密码表，创建单选按钮，创建复选框，创建文本区域，创建选择框，创建隐藏字段，创建按钮。
处理表单（对表单元素进行组织，对表单进行验证，为表单组件添加说明标签，对表单提交方式的选择。

程序的源代码：

<!DOCTYPE html>

<html>

<head>

<title>INSPINIA | Basic Form</title><meta name="keywords" />

</head>

<body>

<p align="center" valign="middle"><h3 >您的基本信息</h3></p>

</a>

</a>

<li><a href="#">Config option 1</a>

</li>

<li><a href="#">Config option 2</a>

</li>

</ul>

</a>

</div>

</div>

</div>

</div>

<div class="form-group"><label class="col-sm-2 control-label">兴趣爱好<br/><small class="text-navy">您的兴趣爱好</small></label>

<div class="i-checks"><label> <input type="checkbox" value="" checked=""> <i></i> 运动/label></div>

</div>

</select>

</div>

</select>

</div>

</div>

</div>

</div>

</form>

</div>

</div>

</body>

</html>

运行结果截图：

、实验总结

所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在<form></form>标签之间。
<form   method="传送方式"   action="服务器文件"></form>
1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。
2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
3.method ：数据传送的方式（get/post）。
下面来认识一下表单控件标签

文本输入框、密码输入框
<form>
    <input type="text/password" name="名称" value="文本" />
</form>
1、type：

   当type="text"时，输入框为文本输入框;

   当type="password"时, 输入框为密码输入框。

2、name：为文本框命名，以备后台程序ASP 、PHP使用。

3、value：为文本输入框设置默认值。(一般起到提示作用)

文本域：
<textarea  rows="行数" cols="列数">文本</textarea>
1、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。
2、cols ：多行输入域的列数。
3、rows ：多行输入域的行数。
4、在<textarea></textarea>标签之间可以输入默认值。

可选择的单选框、复选框
<input type="radio/checkbox"  value="值"  name="名称" checked="checked"/>
1、type:
   当 type="radio" 时，控件为单选框
   当 type="checkbox" 时，控件为复选框
2、value：提交数据到服务器的值（后台程序PHP使用）
3、name：为控件命名，以备后台程序 ASP、PHP 使用
4、checked：当设置 checked="checked" 时，该选项被默认选中

列表框
<selected>
    <option>选项一</option>
    <option>选项二</option>
    <option>选项三</option>
</selected>

提交按钮：
<input type="submit" value="提交">
type：只有当type值设置为submit时，按钮才有提交作用
value：按钮上显示的文字

重置按钮，重置数据
<input type="reset" value="重置">
type：只有当type值设置为reset时，按钮才有重置作用
value：按钮上显示的值