学习渗透测试的学前准备-前端-1
一、前言
渗透测试涉及的方面很广,前端就是其中一方面,不需要了解太深,只要懂得基本知识即可。
本文不会详细介绍前端基本语法的学习,只会简单介绍一些后面要用到的页面。
(本文可能只对有前端基础的人有帮助)
二、准备
- 一个可以写代码的编辑器,推荐使用vscode,下载地址:https://code.visualstudio.com/
- 一个可以运行代码的浏览器,推荐使用谷歌浏览器,下载地址:https://www.google.cn/chrome/
- 一个可以运行代码的服务器,推荐使用phpstudy,下载地址:https://www.xp.cn/,也可以用xampp,下载地址:https://www.xampp.com/
三、计算器页面
1. 一个无法点击计算器页面
有基础的的但又不熟练的可以尝试设计一个计算器页面,这样可以熟悉一下前端的基本语法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算器</title>
<style>
.button{
background-color: gray;
margin: auto;
}
.button td{
background-color: #7fffd4;
width: 25%;
text-align: center;
font-size: 30px;
}
.point-red{
width: 20px;
height: 20px;
background-color: red;
float: left;
margin-left: 10px;
border-radius: 50%;
}
.point-blue{
width: 20px;
height: 20px;
background-color: blue;
float: left;
margin-left: 10px;
border-radius: 50%;
}
.point-green{
width: 20px;
height: 20px;
background-color: green;
float: left;
margin-left: 10px;
border-radius: 50%;
}
.title{
color: white;
font-size: 22px;
float: right;
margin-right: 10px;
}
</style>
</head>
<body>
<table width="450" height="120" border="0" bgcolor="gray" cellspacing="5" align="center" >
<tr>
<td bgcolor="gray" height="50">
<div class="point-red"></div>
<div class="point-blue"></div>
<div class="point-green"></div>
<div class="title">佥殷计算器</div>
</td>
</tr>
<tr>
<td bgcolor="white" style="border: solid 2px red;"></td>
</tr>
</table>
<table width="450" height="400" border="0" cellspacing="4" class="button">
<tr>
<td>AC</td>
<td>+/-</td>
<td>%</td>
<td>÷</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>*</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>-</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>+</td>
</tr>
<tr>
<td>0</td>
<td>删除</td>
<td>.</td>
<td>=</td>
</tr>
</table>
</body>
</html>
这是一个简单的计算器页面代码,还未加入点击功能。
2. 一个可以点击计算器页面
下面是一个能点击的计算器页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算器</title>
<style>
#top{
width: 450px;
height: 50px;
margin: auto;
background-color: gray;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#top .point{
width: 20px;
height: 20px;
float: left;
margin-left: 10px;
border-radius: 50%;
margin-top: 15px;
}
#top .red{
background-color: red;
}
#top .blue{
background-color: blue;
}
#top .green{
background-color: green;
}
#calc-title{
font-size: 22px;
color: white;
float: right;
margin-top: 14px;
margin-right: 10px;
}
#result{
width: 420px;
height: 44px;
margin: auto;
margin-bottom: 6px;
background-color: white;
border: solid 2px red;
text-align: right;
font-size: 30px;
padding-right: 10px;
}
#button{
width: 444px;
height: 422px;
margin-left: 3px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#button div{
width: 107px;
height: 80px;
float: left;
background-color: #7fffd4;
margin: 2px;
line-height: 80px;
text-align: center;
font-size: 26px;
}
#button div:hover{
background-color: orangered;
font-size: 36px;
}
#box{
width: 450px;
height: 530px;
margin: auto;
background-color: gray;
border-radius: 10px;
}
</style>
<script type="text/javascript">
var isOperatorCliked = false;
var isDotCliked = false;
function clikNumber(number){
var result = document.getElementById("result");
result.innerHTML += number;
isOperatorCliked = false;
}
function clikOperator(operator){
var result = document.getElementById("result");
if(isOperatorCliked){
doBack();
}else{
isOperatorCliked = true;
}
result.innerHTML += operator;
}
function doCalc(){
var result = document.getElementById("result");
var expression = result.innerHTML;
var x = eval(expression)
result.innerHTML = x;
}
function doClear(){
var result = document.getElementById("result");
result.innerHTML = "";
}
function doBack(){
var result = document.getElementById("result");
var len = result.innerHTML.length;
result.innerHTML = result.innerHTML.substr(0,len-1);
}
</script>
</head>
<body>
<div id="box">
<div id="top">
<div class="point red"></div>
<div class="point blue"></div>
<div class="point green"></div>
<div id="calc-title">佥殷计算器</div>
</div>
<div id="result"></div>
<div id="button">
<div onclick="doClear()">AC</div>
<div>+/-</div>
<div onclick="clikOperator('%')">%</div>
<div onclick="clikOperator('/')">÷</div>
<div onclick="clikNumber(7)">7</div>
<div onclick="clikNumber(8)">8</div>
<div onclick="clikNumber(9)">9</div>
<div onclick="clikOperator('*')">*</div>
<div onclick="clikNumber(4)">4</div>
<div onclick="clikNumber(5)">5</div>
<div onclick="clikNumber(6)">6</div>
<div onclick="clikOperator('-')">-</div>
<div onclick="clikNumber(1)">1</div>
<div onclick="clikNumber(2)">2</div>
<div onclick="clikNumber(3)">3</div>
<div onclick="clikOperator('+')">+</div>
<div onclick="clikNumber(0)">0</div>
<div onclick="doBack()">删除</div>
<div onclick="clikOperator('.')">.</div>
<div onclick="doCalc()">=</div>
</div>
</div>
</body>
</html>
上述代码实现的计算器基本能基本运算,但逻辑功能还不完善,未考虑全用户的使用情况。
有兴趣的的可以尝试完善一下。
本文只是为了让大家熟悉一下前端的基本语法,所以不会详细介绍代码的逻辑。这对后面学习影响不大。
四、说明
这些代码一开始我是使用xampp部署在在windows11上的,下面是我把xampp配置好后的示例。
开启apache和mysql
访问
访问地址:http://localhost/ 或 访问本机ip地址,出现以下页面即为成功。
文件放置在htdocs目录下
访问某个文件
如果要访问某个文件,直接在地址栏输入文件名即可,如:http://localhost/learn/login.html 或 http://你的ip/security/login.html
windows的ip查看方法:win+r,输入cmd,输入ipconfig,查看ipv4地址,linux则是ifconfig
后面的代码也是同样的部署和访问方式。