网络安全C10期课程第二次作业
1、使用 html 写一个网页,要求满足以下条件:
(1)网页中含有任意一张图片,图片路径使用绝对路径,鼠标悬停在图片时出现“马哥教育”
文本,且点击图片可跳转至马哥教育官方页面
(2)网页中包含账号、密码登录,且账号提前定义好是 admin 且不可更改,输入密码时显
示加密形式
HTML代码片:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网络安全C10期课程</title>
<style>
.center-text {
text-align: center;
}
body{
margin: 0;
}
#footer {
height: 40px;
line-height: 40px;
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
background: rgb(2, 2, 103);
color: rgb(217, 217, 228);
font-family: Arial;
font-size: 18px;
letter-spacing: 5px;
}
</style>
</head>
<body >
<center>
<h1>网络安全C10期课程</h1>
</center>
<hr /><!--分隔线-->
<div class="center-text">
<a href="https://www.magedu.com" title="马哥教育"><img src="https://edu.magedu.com/img/logo-dark.7f1c58d1.png" alt="显示失败"></a><!--点击图片跳转到马哥教育官网页面-->
<p><input type="button" value="马哥教育官网" onclick="alert('马哥教育 NumberOne')" /></p><!--行内式弹窗-->
</div>
<div class="login">
<center>
<h2>登录框</h2>
<form action="https://www.magedu.com/"> <!--跳转至马哥教育官网-->
<input type="text" id="uname" value="" placeholder="用户名"/><br><!--输入用户名admin-->
<script src="pwd.js"></script>
<input type="password" id="pwd" value="" placeholder="密码"/><br><!--输入密码123-->
<input type="submit" id="but" value="登录" onclick="return checkuser()"/> <!-- 设置跳转事件 -->
</form>
</center>
</div>
<div id="footer">点击图片或登录跳转马哥教育官网</div><!--底部说明-->
<script src="magedu.js"></script><!--引入外部文件造成弹窗-->
</body>
<script type="text/javascript">
function getValue(id) {
return document.getElementById(id).value;
// 查找元素
}
function checkuser() {
if(getValue('uname') == "admin" && getValue('pwd') == "123") {
//设置正确跳转的账号和密码
return true;
}else {
alert("登录名或密码错误!")
// 警告框,内嵌式弹窗
return false;
}
}
</script>
</html>
JavaScript代码片:magedu.js
alert('点击图片或登录跳转马哥教育官网');
HTML页面
用户名admin,密码123
2、判断题
(1)Java 是编译型语言。 (Java是解释型语言)
(2)Javascript 中,不区分大小写字母,也就是说 A 和 a 是同一个变量。(A和a是不同变量)
(3)Javascript 中的常量包括 String、Number、Boolean、Null、Undefined。 (null可以是常量也可以是变量;undefined是一个特殊值,既不是常量也不是变量)
(4)String 字符串的语法中既可以使用单引号,也可以使用双引号。(√)
(5)typeof 是用来判断变量类型,不可以当作运算符使用。 (可以当作运算符使用)
(6)任何值和 undefined 运算,undefined 可看做 0 运算。(undefined取值具体取决于运算的类型和操作数)
3、请分别描述下列代码中“+”的作用。
(1)console.log(“年龄:” + 20); (对字符串和数字进行加法运算,返回字符串)
(2)console.log(11+22+33); (对数字进行加法运算)
(3)console.log(“网络+安全”); (作为字符’+'使用)
(4)var a = 1;
var b = 2;
console.log(“a” + b); (字符串与数字相加,返回字符串)
(5)var a = 1;
var b = 2;
console.log(“a + b”);(把空格插入表达式中)
代码结果按序号排列如下:
4、计算下述代码的打印值
var a = 10;
var b = 10;
console.log(a++);
console.log(++a);
console.log(--b);
console.log(b--);
5、分别使用行内式、内嵌式、引入外部文件的方法造成网页弹窗,要求触发弹窗的 JS 命令不止一种。
行内式:
点击‘马哥教育官网’造成弹窗
<p><input type="button" value="马哥教育官网" onclick="alert('马哥教育 NumberOne')" /></p><!--行内式弹窗-->
内嵌式:
账号密码输出错误造成弹窗
<script type="text/javascript">
function getValue(id) {
return document.getElementById(id).value;
// 查找元素
}
function checkuser() {
if(getValue('uname') == "admin" && getValue('pwd') == "123") {
//设置正确跳转的账号和密码
return true;
}else {
alert("登录名或密码错误!")
// 警告框,内嵌式弹窗
return false;
}
}
引入外部文件:
打开HTML网页造成弹窗
<script src="magedu.js"></script><!--引入外部文件造成弹窗-->
JavaScript代码片:magedu.js
alert('点击图片或登录跳转马哥教育官网');