Web开发及人机交互导论 实验九 JavaScript基础

一、实验目的

  1. 理解JavaScript脚本放置与运行的方法。
  2. 掌握JavaScript基本构成和基础语法。
  3. 掌握自定义函数定义与引用。

二、实验环境

Windows10系统下的H Builder X

三、实验步骤

项目一:改变网页字号大小

在这里插入图片描述

本实验中通过利用JavaScript来实现对网页字号大小的改变
1、建立网页基本格式:
在这里插入图片描述

2、在head中定义所需的style:
将标题加粗,并给文字以灰色背景阴影。
在这里插入图片描述

3、定义函数:
此处通过对函数的定义,实现了对字体大小的修改。
在这里插入图片描述
4、编写body内容
在body中编写内容,并使用链接调用已编写好的函数从而实现对字体大小的改变
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>项目一</title>
	<style>
		#div1 {
			text-align: center;
			font-size: 16px;
		}

		#content {
			font-size: 12px;
			line-height: 2em;
			padding: 10px;
			background-color: #C0C0C0;
			color: black;
			border: 2px groove #FCFF57;

		}

		p {
			text-indent: 2em;
		}
	</style>
	<script type="text/javascript">
		function $(id) { return document.getElementById(id); }
		function setFont(size) {
			$("content").style.fontSize = size;
		}
	</script>

</head>

<body>
	<h2 align="center">用JavaScript改变新闻网页中的字号</h2>
	<div id="div1">选择字号【 <a href="javascript:setFont('12px')"></a>
		<a href="#" onclick="javascript:setFont('18px')"></a>
		<a href="#" onclick="javascript:setFont('24px')"></a></div>
	<div id="content">
		<p>JavaScript是一种能让我们的网页更加生动活泼的程序语言,也是目前网页设计中
			最容易学又最方便的语言,我们利用JavaScript可以轻易地做出亲切的欢迎讯息、
            漂亮的数字钟、有广告效果的跑马灯还可以显示浏览器停留的时间,这些特殊效果
            可以提高网页的可观性。
		</p>
	</div>
</body>

</html>

选择字号为“小”:
在这里插入图片描述
选择字号为“中”:
在这里插入图片描述
选择字号为“大”:
在这里插入图片描述

项目二:求圆面积

在这里插入图片描述
1、建立网页基本格式:
在这里插入图片描述
2、在head中定义所需的style:
在此处实现对整个窗口及窗口中文字的定义
在这里插入图片描述
3、使用JavaScript编写函数:
由于要实现清屏和计算两个功能,则要编写两个函数,其中第一个函数实现了对圆面积的计算功能,获取输入的半径之后在textarea中写入计算的结果
清屏函数则是将两个id中输入框的内容写为空
在这里插入图片描述
4、编写body
此处使用前面定义好的函数对圆的面积进行计算:
在这里插入图片描述
5、完整源码及展示效果:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>项目二</title>
    <style type="text/css">
    	.circle {
    		border: 5px solid #FF6A6A;
    		background: #ADD8E6;
    		width: 500px;
    		height: 300px;
    		text-align: center;
    	}
    
    	h3 {
    		text-align: center;
    		margin-top: 40px;
    	}
    
    	p {
    		margin: 20px 110px;
    	}
    
    	.button {
    		width: 250px;
    		height: 30px;
    		margin: 40px 110px;
    	}
    
    	.button1 {
    		width: 50px;
    		margin-left: 50px;
    	}
    
    	.button2 {
    		width: 50px;
    		margin-left: 40px;
    	}
    </style>
	<script type="text/javascript">
		function show() {
			var radius = parseFloat(document.getElementById("radiustext").value);
			var area = 3.14 * radius * radius;
			console.log(area);
			document.getElementById("areatext").value = area;
			console.log(document.getElementById("areatext").value);
			return;
		};
		function reset() {
			document.getElementById("radiustext").value = "";
			document.getElementById("areatext").value = "";
			return;
		};
	</script>
	
</head>

<body>
	<form class="circle" id="form1" name="form1" method="post" align="center" rules="all">
		<h3>计算圆的面积</h3><br>
		<p>输入半径:<input type="text" id="radiustext" name="radiustext"></p>
		<p>圆的面积:<input type="text" id="areatext" name="areatext" readonly="readonly"></p>
		<div class="button">
			<a href="#" onclick="show();return false;"><input class="button1" type="button" value="计算"></a>
			<a href="#" onclick="reset();"><input class="button2" type="button" value="清空"></a>
		</div>
	</form>
</body>

</html>

展示效果:
1、未使用时:
在这里插入图片描述
2、输入数值并运行:
在这里插入图片描述

项目三:消息对话框使用

在这里插入图片描述
本项目需使用JavaScript脚本编程并事件调用自定义函数inputName()。使用JavaScript消息对话框语法,并根据用户的选择进行相关代码是编写。
1、建立网页基本格式:
在这里插入图片描述
2、在head中定义所需的style:
在此处实现对整个窗口及窗口中文字的定义,需要注意的是此处使用了域标记。
在这里插入图片描述
3.编写body
此处先对表单进行编写,并使用inputName进行输入,再对JavaScript进行编写
在这里插入图片描述
此处即定义JavaScript,通过编写inputName函数来实现姓名的回显及错误信息提示。
在这里插入图片描述
4.完整源代码及展示效果:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>项目三</title>
    <style type="text/css">
        fieldset {
            background: #99ff99;
            border: 8px ridge #3333cc;
            width: 300px;
            height: 150px;
        }

        legend {
            color: #0000cc;
        }

        form {
            margin: 20px;
            padding: 20px;
        }
    </style>
</head>

<body>
    <fieldset>
        <legend>
            消息框函数
        </legend>
        <form method="POST" action="">
            你的姓名:<input type="text" name="" id="name1" maxlength="10" readonly><br><br>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <input type="button" value="输入姓名" onclick="inputName();">
            <input type="reset" name="clear" value="清空">
        </form>
        <script type="text/javascript">
            function inputName() {
                var name = prompt("请输入你的姓名:", "你好!");
                if (name != null) {
                    alert("你的姓名是:" + name);
                    document.getElementById("name1").value = name;
                } else {
                    alert("请你输入姓名!")
                }
            }
        </script>
    </fieldset>
</body>

</html>

运行结果:
未输入时:
在这里插入图片描述
点击输入姓名按钮,此时弹出对话框:
在这里插入图片描述
点击确定后弹出确认窗口并回显:
在这里插入图片描述
在这里插入图片描述
如果未输入或输入空白,则弹出错误信息提示:
在这里插入图片描述
点击清空按钮,可以清除内容,并恢复初始状态:
在这里插入图片描述

项目四:消息对话框使用

在这里插入图片描述
本项目需要使用6个JavaScript系统内部函数来进行实验。
1、建立网页基本格式
在这里插入图片描述
2、在head中定义所需的style:
设置背景,小标题及字体。
在这里插入图片描述
3.编写body
每个题头为一个小标题,下面仅以第一个为例进行展示,其余几个与所展示任务相同
在这里插入图片描述
4.全部源代码及运行结果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>项目四</title>
    <style type="text/css">
        div {
            background: #000099;
            color: white;
            width: 800px;
            font-size: 20px;
            font-weight: bolder;
            /* text-align: center */
        }

        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);
            document.write("<br/>");
        </script>
        <b>3.unecspe(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);
            document.write("<br/>");
        </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>

在这里插入图片描述

四、结果与分析

以上四个实验项目的结果完全符合预期,JavaScript程序代码编写及CSS样式编写完全正确。

五、心得体会

通过对JavaScript基础的实验,我理解了JavaScript脚本放置与运行的方法,掌握了JavaScript基本构成和基础语法,掌握了自定义函数定义与引用。此外也学会使用域标记<fieldset>和域标题标记<legend>,通过样式设置域标记的样式
JavaScript作为一种脚本语言,在HTML编程过程中常常起到了锦上添花的作用,很多动画,消息弹出,人机交互,很多都可以通过JavaScript来实现,而对JavaScript的充分利用,更是大大的提高了页面的交互性。使得简单的HTML页面变得不简单。

  • 2
    点赞
  • 34
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

上山打老虎D

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值