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

最新推荐文章于 2023-05-17 20:25:43 发布

上山打老虎D

最新推荐文章于 2023-05-17 20:25:43 发布

阅读量1.9k

点赞数 2

分类专栏： Web开发及人机交互导论文章标签： css javascript html js

本文链接：https://blog.csdn.net/m0_46326495/article/details/118493789

版权

Web开发及人机交互导论专栏收录该内容

7 篇文章 2 订阅

订阅专栏

这里写自定义目录标题

一、实验目的
二、实验环境
三、实验步骤
四、结果与分析
五、心得体会

一、实验目的

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

二、实验环境

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页面变得不简单。

上山打老虎D

关注

2
点赞
踩
34

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web开发及人机交互导论实验九 JavaScript基础

这里写自定义目录标题一、实验目的二、实验环境三、实验步骤项目一：改变网页字号大小项目二：求圆面积项目三：消息对话框使用项目四：消息对话框使用四、结果与分析五、心得体会一、实验目的理解JavaScript脚本放置与运行的方法。掌握JavaScript基本构成和基础语法。掌握自定义函数定义与引用。二、实验环境Windows10系统下的H Builder X三、实验步骤项目一：改变网页字号大小本实验中通过利用JavaScript来实现对网页字号大小的改变1、建立网页基本格式：2、在h
复制链接

扫一扫