【Web开发及人机交互导论】JavaScript

Alex_Shen
2021-05-17 / 0 评论 / 0 点赞 / 96 阅读 / 4,228 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-04-06,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

代码:Github仓库地址

一、实验目的

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

二、实验环境

HBuilderX

三、实验步骤

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

  1. 编写HTML5部分在这里插入图片描述
  2. 编写CSS部分
    在这里插入图片描述
  3. 编写JavaScript部分
<script type="text/javascript">
			function setFont(size) {
				var obj = document.getElementById("content");
				obj.style.fontSize = size;
				obj.style.color = "#ff0000";
			}
		</script>
  1. 微调
    将文字框剧中,宽度设置为800px
    style=“width: 800px; margin: 0 auto;”

项目二:计算圆的面积

  1. 编写HTML5部分
    在这里插入图片描述

  2. 编写CSS部分在这里插入图片描述

  3. 编写JavaScript部分

function compute(radius){
	var pi=3.14;
	var area=pi*radius*radius;
	return area;
}

function show(){
	var radius=parseFloat((document.getElementById("radiustext").value));
	var area=compute(radius);
	document.getElementById("areatext").value=area;
	return;
}
  1. 微调
    修改div大小至合适的大小
    width: 300px; height: 130px;

项目三:消息对话框使用

  1. 编写HTML5部分
    在这里插入图片描述
  2. 编写CSS部分
    在这里插入图片描述
  3. 编写JavaScript部分
<script>
			function inputName(){
				var name=prompt("输入你的姓名","您好");
				if(name!=null){
					alert("你的姓名是:"+name);
					document.getElementById("name1").value=name;
				}
				else{
					alert("请输入姓名!");
				}
			}
		</script>
  1. 微调
    将form向下50px,被包含在fieldset之中
    position: relative;top: 50px;

项目四:系统内部函数使用

  1. 编写HTML5部分
    在这里插入图片描述

  2. 编写CSS部分
    在这里插入图片描述

  3. 编写JavaScript部分

<script type="text/javascript">
				var rel = eval("1000+3/5");
				document.write("&nbsp;&nbsp;" + "1000+3/5=" + rel);
				document.write("<br />");
				document.write("&nbsp;&nbsp;" + "x=10,y=20,x*y=" + eval("10*20"));
				document.write("<br />&nbsp;&nbsp;2+2=" + eval("2+2"));
				document.write("<br />");
				var x = 10;
				document.write("&nbsp;&nbsp;" + "x=10,x+17=" + eval(x+17));
				document.write("<br />");
			</script>
<script type="text/javascript">
				document.write("&nbsp;&nbsp;" +"eacape('&')="+escape('&'));
				document.write("<br />");
				document.write("&nbsp;&nbsp;" +"eacape('&nbsp;&nbsp;my name is 张华')="+escape('&nbsp;&nbsp;my name is 张华'));
				document.write("<br />");
			</script>

<script type="text/javascript">
				document.write("&nbsp;&nbsp;" +"unescape('%26')="+unescape('%26'));
				document.write("<br />");
				document.write("&nbsp;&nbsp;" +"uneacape('my%20name%20is%20%u5F20%u534E')="+unescape('my%20name%20is%20%u5F20%u534E'));
				document.write("<br />");
</script>
<script type="text/javascript">
		document.write("&nbsp;&nbsp;" +"parseFloat('3.14')="+parseFloat('3.14'));
		document.write("<br />");
		document.write("&nbsp;&nbsp;" +"parseFloat('314e-2')="+parseFloat('314e-2'));
		document.write("<br />");
		document.write("&nbsp;&nbsp;" +"parseFloat('3.14ab')="+parseFloat('3.14ab'));
		document.write("<br />");
		document.write("&nbsp;&nbsp;" +"parseFloat('FF2')="+parseFloat('FF2'));
		document.write("<br />");
</script>
<script type="text/javascript">
		document.write("&nbsp;&nbsp;" +"32:"+parseInt("32",10));
		document.write("<br />");
		document.write("&nbsp;&nbsp;" +"032:"+parseInt("032",8));
		document.write("<br />");
		document.write("&nbsp;&nbsp;" +"0x32:"+parseInt("0x32",16));
		document.write("<br />");
		document.write("&nbsp;&nbsp;" +"parseInt('15*3',10)="+parseInt('15*3',10));
		document.write("<br />");
</script>
<script type="text/javascript">
			document.write("&nbsp;&nbsp;" +"isNaN(\"5454g\")="+isNaN("5454g"));
			document.write("<br />");
			document.write("&nbsp;&nbsp;" +"isNaN(\"789\")"+isNaN("789"));
			document.write("<br />");
</script>

四、结果与分析

项目一:改变网页字号大小
原网页:
在这里插入图片描述
字体小:
在这里插入图片描述
字体中:
在这里插入图片描述
字体大:
在这里插入图片描述
项目二:计算圆的面积
在这里插入图片描述
项目三:消息对话框使用
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
项目四:系统内部函数使用
在这里插入图片描述

0

评论区