Web开发及人机交互导论 实验九 JavaScript基础
Posted 上山打老虎D
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web开发及人机交互导论 实验九 JavaScript基础相关的知识，希望对你有一定的参考价值。
一、实验目的
- 理解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>
<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")以上是关于Web开发及人机交互导论 实验九 JavaScript基础的主要内容，如果未能解决你的问题，请参考以下文章