实验二 结对编程
一、实验目标：
1）体验敏捷开发中的两人合作。
2）进一步提高个人编程技巧与实践。
二 、实验内容：
1）根据以下问题描述，练习结对编程(pair programming)实践；
2）要求学生两人一组，自由组合。每组使用一台计算机，二人共同编码，完成实验要求。
3）要求在结对编程工作期间，两人的角色至少切换 4 次；
4）编程语言不限，版本不限。建议使用 Python 或 JAVA 进行编程。
三、实验内容：
1、代码规范：
实验采用html，css，JavaScript语言编写。
js语言的代码规范有：
命名规范：
变量和函数为小驼峰法标识, 即除第一个单词之外，其他单词首字母大写
全局变量为大写
常量 (如 PI) 为大写
对象定义的规则：
将左花括号与类名放在同一行。
冒号与属性值间有个空格。
字符串使用双引号，数字不需要。
最后一个属性-值对后面不要添加逗号。
将右花括号独立放在一行，并以分号作为结束符号。
html代码规范：
文档类型声明位于HTML文档的第一行：
HTML5 元素名可以使用大写和小写字母。推荐使用小写字母：
在 HTML5 中, 你不一定要关闭所有元素 (例如 <p> 元素)，但我们建议每个元素都要添加关闭标签。
HTML5 属性名允许使用大写和小写字母。
同时使用大小写是非常不好的习惯。
开发人员通常使用小写 (类似 XHTML)。
小写风格看起来更加清爽。
小写字母容易编写。
css代码规范：
用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。
为选择器分组时，将单独的选择器单独放在一行。
为了代码的易读性，在每个声明块的左花括号前添加一个空格。
声明块的右花括号应当单独成行。
每条声明语句的 : 后应该插入一个空格。
为了获得更准确的错误报告，每条声明都应该独占一行。
所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。
2.程序的总体设计
3、结对编程过程
编程之前，我和张承雷决定使用网页实现四则运算，接下来，我负责html，css的编写和js的渲染代码的编写，
他负责随机生成四则运算数据的部分。
html，css部分，有一个输入框，用来输入生成题目的数量，清除按钮，用来清除生成的题目，Create按钮，按照输入的题目的数量，来生成相应数量的题目。
js部分，用来生成数据，以及一些逻辑处理，将生成的数据返回到页面
我们第一次结对编程，我符则写了html和css，过程不是很顺利，有些代码，我都忘了，也不是很规范，也不是很完美的代码，不过最后还是展现了一些效果。
在后面的几次结对编程中，我们陆续将js代码进行完善。最后写出四则运算。
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="left">
<input type="number" class="number" placeholder="输入题目的数量">
</div>
<div class="right">
<div class="Create">Create</div>
</div>
<div class="topCenter">
<div class="clearAll">清除</div>
</div>
</div>
<div class="center">
<ul class="questions">
</ul>
</div>
<div class="bottom">
<span class="rightNum">正确数量：0</span>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
css代码
*{
margin: 0;
padding: 0;
outline: none;
list-style: none;
}
.wrapper{
width: 600px;
/*height: 200px;*/
margin: 100px auto;
border: 1px solid black;
}
.wrapper .top{
height: 60px;
position: relative;
}
/*.wrapper .top .left,.right{
float: left;
}*/
.wrapper .top .left{
width: 300px;
height: 40px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 30px;
}
.wrapper .top .right{
width: 100px;
height:40px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
right: 20px;
}
.wrapper .top .left input{
padding-left: 10px;
font-size: 20px;
width: 300px;
height: 40px;
}
.wrapper .top .right .Create{
text-align: center;
/*vertical-align: middle;*/
line-height: 40px;
width: 100px;
height: 40px;
background-color: orange;
color: white;
border-radius: 20px;
cursor:pointer;
}
.wrapper .top .right{
width: 100px;
height:40px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
right: 20px;
}
.wrapper .top .topCenter{
width: 60px;
height:40px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
right: 140px;
}
.wrapper .top .topCenter .clearAll{
width: 60px;
height: 40px;
color: white;
background-color: green;
text-align: center;
line-height: 40px;
border-radius: 20px;
cursor: pointer;
}
/*center*/
.wrapper .center{
width: 600px;
}
.wrapper .center ul{
width: 530px;
/*border: 1px solid black;*/
margin: 0 auto;
}
.wrapper .center ul li{
font-size: 20px;
margin-bottom: 5px;
padding-bottom: 5px;
border-bottom: 1px dotted #ccc;
}
.wrapper .center ul li div{
float: left;
}
.wrapper .center ul li:after{
display:block;
clear:both;
content:"";
}
.wrapper .center ul li .title{
width: 200px;
text-align: center;
margin-left: 30px;
}
.wrapper .center ul li .isresult{
padding-left:30px;
}
.wrapper .center ul li .answerbox{
width: 100px;
}
.wrapper .center ul li .answerbox input{
width: 100px;
}
.wrapper .bottom span{
margin-left: 200px;
}
js代码
var Answer = [];
var Test = [];
var btn = document.getElementsByClassName('clearAll')[0];
var Create = document.getElementsByClassName('Create')[0];
var Input = document.getElementsByClassName('number')[0];
var rightNumBox = document.getElementsByClassName('rightNum')[0];
var rightNum = 0;
var center = document.getElementsByClassName('center')[0];
Create.onclick = function(){
if(Input.value > 0){
Render(Input.value);
}
}
btn.onclick = clear;
function Render(num){
clear()
var questions = document.getElementsByClassName('questions')[0];
getRandomTest(num);
var str = "";
Test.forEach(function(ele,index){
str += '<li class="question">\
<div class="title">'+ele+'</div>\
<div class="answerbox">\
<input class="answer" type="text">\
</div>\
<div class="isresult"></div>\
</li>';
})
console.log(str)
questions.innerHTML = str;
str = "";
bindBtn(num);
}
function clear(){
var questions = document.getElementsByClassName('questions')[0];
questions.innerHTML = "";
Test = [];
Answer = [];
rightNum = 0;
rightNumBox.innerText = '正确数量：'+ rightNum;
}
function bindBtn(num){
var isresult = document.getElementsByClassName('isresult');
var answer = document.getElementsByClassName('answer');
for(var i = 0;i < num;i ++){
answer[i].setAttribute('data-index',i);
answer[i].onblur = function(){
var oldValue = "";
if(this.value != '' && oldValue != this.value){
oldValue = this.value;
if(Answer[this.getAttribute('data-index')] == parseInt(this.value)){
rightNum ++;
this.disabled = true;
isresult[this.getAttribute('data-index')].innerText = '正确';
isresult[this.getAttribute('data-index')].style.color = 'green';
rightNumBox.innerText = '正确数量：'+ rightNum
}else{
isresult[this.getAttribute('data-index')].innerText = '错误';
isresult[this.getAttribute('data-index')].style.color = 'red';
}
}
}
}
}
function getRandomTest(num){
var add = 0;
var sub = 0;
var mul = 0;
var div = 0;
var random;
for(var i = 0;i < num;i ++){
random = Math.floor((Math.random()*4)+1);
if(random == 1){
add ++;
}else if(random == 2){
sub ++;
}else if(random == 3){
mul ++;
}else{
div ++;
}
}
handleArr(getTest(add,'add'));
handleArr(getTest(sub,'sub'));
handleArr(getTest(mul,'mul'));
handleArr(getTest(div,'div'));
}
function handleArr(arr){
var arr1 = arr.slice(0,arr.length/2);
var arr2 = arr.slice(arr.length/2,arr.length);
for(var i = 0;i < arr1.length;i ++){
Test.push(arr1[i]);
Answer.push(arr2[i]);
}
}
function getRandom(){
return Math.floor((Math.random()*100)+1);
}
function getTest(num,sigal){
var arr = [];
var answer = [];
var first;
var second;
var str = '';
while(arr.length < num){
first = getRandom();
second = getRandom();
if(sigal=='add' && first + second <= 100 ){
str = "" + first+' + ' + second;
arr.push(str)
answer.push(first + second)
}
if(sigal == 'mul' && first * second <= 100){
str = '' + first + ' * ' + second;
arr.push(str)
answer.push(first * second)
}
if(sigal == 'sub'){
str = '' + Math.max(first,second) + ' - ' + Math.min(first,second);
arr.push(str)
answer.push(Math.abs(first - second));
}
if(sigal == 'div' && Math.max(first,second)%Math.min(first,second) == 0 && Math.min(first,second)!=1 && first!=second){
var a = Math.max(first,second);
var b = Math.min(first,second)
str = '' + a + ' / ' + b;
arr.push(str)
answer.push(a/b);
}
}
return arr.concat(answer);
}
实验截图：
输入题目的数量为10，点击Create生成
进行做题，把自己算的答案写进去
点击清除，会清楚所有的数据
4、GitHub地址
地址：https://github.com/xiaoshi176/study
实验小结：
结对编程的优势主要就在于设计思路的共享，和我们互相为对方避免错误。总的来说，自己在编程时犯下的错误，有些尽管很简单，但却难以发现，而这些在另一个人眼中，却会十分明显。当然结对编程也有不适用的地方，比如其他课程的编程作业，需要我们每个人独立完成，就不能依赖同伴的帮助，还有就是一些十分传统的、规范的编程任务，比如写一段最常规的快排算法，此时如果有人在旁边，就纯粹是浪费时间，因为这些内容对我们而且太熟悉了，不需要有人在旁指导。
浙公网安备 33010602011771号