学习渗透测试的学前准备-前端-1

chengstery

已于 2023-12-07 01:14:12 修改

阅读量854

点赞数 19

分类专栏：渗透测试前端文章标签：学习前端 javascript vscode css

于 2023-12-03 17:24:59 首次发布

本文链接：https://blog.csdn.net/fjc0214/article/details/134767186

版权

渗透测试同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

本文介绍了学习渗透测试时的前端预备工作，包括推荐使用的开发工具（如VSCode和谷歌浏览器），以及创建一个可点击和不可点击的计算器页面示例，用于熟悉前端基本语法。后续还会涉及服务器部署和文件访问的配置说明。

摘要由CSDN通过智能技术生成

学习渗透测试的学前准备-前端-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>