一、 实验目的和要求
实验目的:
(1) 通过上机实践,熟悉 HTML 和 JavaScript 脚本实现技术。
(2) 加深对 Web 编程的认识
实验要求:
1 编写个人主页,要求包含如下信息。
(1) 标题“欢迎访问×××的主页”
(2) 个人简介,包含照片。
(3) 个人经历简介,以有序列表形式显示。
(4) 个人最喜欢的 4 本书,以无序列表显示。
(5) 个人兴趣简介,以段落文字方式显示,或者以列表显示。
(6) 列出 6 门主干课程成绩,以表格形式显示。如下示例
表 3.1:
成绩显示格式
课程名 开课学期 任课教师 分数
高等数学 2012 秋季 张三 90
离散数学 2012 春季 李四 80
(7) 个人的朋友主页链接或者学校主页链接。
(8) 其它个人想表达的信息。
备注:
(1)代码要求手工输入,不要用工具自动生成,本题目让大家了解 HTML 文档的基本元素 构成。
(2)界面的字体、颜色、样式有大家自己决定。
2 HTML 文件中嵌入 javascript 脚本实现输入 a,b,c 三个系数,计算方程的两个根,并在 页面上显示。
二、实验环境(实验设备)
中文五号宋体,英文五号Times new roman字体,1.25倍行距
硬件:微型计算机
软件:Windows 操作系统、浏览器
三、实验原理及内容
中文五号宋体,英文五号Times new roman字体,1.25倍行距
说明:这部分请将实验分解成若干具体的任务步骤。
(一)编写个人主页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎访问×××的主页</title>
</head>
<body>
<div>
<h3>个人简介</h3>
<img src="/img/1.jpg" alt="" width="120">
</div>
<!-- 个人最喜欢的四本书-->
<div>
<h3>我最喜欢的四本书</h3>
<ul>
<li>book1</li>
<li>book2</li>
<li>book3</li>
<li>book4</li>
</ul>
</div>
<div>
<h3>个人经历简介</h3>
<ol>
<li>教育经历:
2018年9月-2022年7月南京大学物流管理
主要学习物流管理的专业知识以及与物流相关的计算机基础知识等其他知识包括电子商务,经济学管理学等方面知识
</li>
<li>培训经历:
年4月参加全国性物流研讨会的学习。通过与参加会议的一些国内和省内知名企业。同时也包括日本通运、普洛斯中国领导层的交谈,对现代物流中心建设、物流中心装备、物流中心运营规划经验等多个方面进行了学习。认真听取专家对未来物流发展的的一些意见以及物流对我国流通领域中的一些地位和作用。
</li>
<li>工作经验:
2020年暑假在_公司进行实习。对货物定单的处理、发货、收取货款等进行了学习。
2021年寒假/进行了自主创业,主要销售某一类产品,采购,销售均自己完成。
2023年一月到科技公司进行为期一个月的实习,主要学习仓库管理方面的知识。
</ol>
</div>
<div>
<h3>个人兴趣简介</h3>
<p>本人曾在校社团联合会网络信息部和检验学院学生会工作,并担任班干部;培养了我良好的领
导、管理、协作、交际沟通和创新能力,使我能客观理智地面对问题,顾全大局,对凡事持寻求解决的态度。</p>
<p>一年的实习工作更是丰富了我的阅历,培养了我开拓创新的思维和解决问题的能力,更加系统
地掌握了临床各项检测的基础理论和基础操作技术,掌握了微生物、病毒的实验检验原理和操作技术,有较强的综合分析能力和动手能力,也具有一定的科研能力。</p>
<p>我性格开朗、积极上进;具有良好的团队精神和人际关系,对待工作认真负责、
勤恳耐劳,耐心
细心,在工作中善于到激励他人的作用,同时善于并热爱与人沟通交流;敢于开拓创新
有着强烈的事业
心与责任感,对人生和事业充满热情和憧憬。</p>
</div>
<div>
<form action="">
<table border="">
<tr >
<th>课程名</th>
<th>开课学期</th>
<th>任课教师</th>
<th>分数</th>
</tr>
<tr >
<td>高等数学</td>
<td>2012 春季</td>
<td>张三</td>
<td>95</td>
</tr>
<tr>
<td>线性代数</td>
<td>2012 春季</td>
<td>李四</td>
<td>94</td>
</tr>
<tr>
<td>概率论与数理统计</td>
<td>2012 秋季</td>
<td>王五</td>
<td>91</td>
</tr>
<tr>
<td>数据结构</td>
<td>2012 秋季</td>
<td>赵六</td>
<td>93</td>
</tr>
<tr>
<td>计算机组成原理</td>
<td>2013 春季</td>
<td>钱七</td>
<td>98</td>
</tr>
<tr>
<td>操作系统</td>
<td>2013 春季</td>
<td>孙八</td>
<td>99</td>
</tr>
</table>
</form>
</div>
<!--个人或者学校的主页地址-->
<div>
<a href="www.njupt.edu.cn">南京邮电大学</a>
</div>
<div>
<form action="">
<label for="aa">a <input type="text" id = "aa" ></label><br/>
<label for="aa">b <input type="text" id = "bb"></label><br/>
<label for="aa">c <input type="text" id = "cc"></label><br/>
</form>
<input type="submit" onclick="Submit()" value="提交">
</div>
</body>
</html>
(二)计算方程的两个根
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<div>
<form action="">
<label for="aa">a <input type="text" id = "aa" ></label><br/>
<label for="aa">b <input type="text" id = "bb"></label><br/>
<label for="aa">c <input type="text" id = "cc"></label><br/>
</form>
<input type="submit" onclick="Submit()" value="提交">
</div>
<script>
function GetRoot(a, b, c)
{
delta = b*b-4*a*c;
x1 = "";
x2 = "";
if(delta < 0)
{
delta = - delta;
if (Math.sqrt(delta)/(2*a) === 1)
{
x1 = (-b/(2*a)).toFixed(2) + "i";
x2 = (-b/(2*a)).toFixed(2) - "i";
}
else
{
x1 = (-b/(2*a) + Math.sqrt(delta)/(2*a)).toFixed(2) +"i";
x2 = (-b/(2*a) - Math.sqrt(delta)/(2*a)).toFixed(2) +"i";
}
}
else
{
x1 = (-b+Math.sqrt(delta))/(2*a).toFixed(2);
x2 = (-b-Math.sqrt(delta))/(2*a).toFixed(2);
}
alert("x1 = " + x1 + "\n" + "x2 = " + x2);
}
function Submit()
{
a = document.getElementById("aa").value;
b = document.getElementById("bb").value;
c = document.getElementById("cc").value;
GetRoot(a, b, c);
}
</script>
</body>
</html>
四、实验小结(包括问题和解决方法、心得体会、意见与建议等)
(一)实验中遇到的主要问题及解决方法
在题目一编译时,图片过大的问题,设置img标签的width属性之后可以正常显示。
在题目二编译时,由于二次方程会出现复数根的情况,所以要先判断判别式是否小于零,如果小于零则为复数根,将结果保存为字符串类型,并在根的虚部加上字符‘i’
(二)实验心得
学习了html和JavaScript文章来源:https://www.toymoban.com/news/detail-743714.html
(三)意见与建议
无文章来源地址https://www.toymoban.com/news/detail-743714.html
到了这里,关于南京邮电大学Web技术双语实验一(客户端HTML脚本编写)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!