Javascript 로 진리표 생성하기이다.
<html>
<head>
<style>
* {
color: #555;
background-color: #FFF;
transition: all 0.2s ease-out;
}
input[type=text] {
padding: 5px 15px;
border: 1px solid #AAA;
border-radius: 2px;
outline: none;
}
.rows {
padding-bottom: 5px;
}
.rows label {
width: 220px;
display: inline-block;
}
button {
border: 1px solid #AAA;
padding: 5px 15px;
border-radius: 4px;
outline: none;
}
button:hover {
background-color: #F0F0F0;
}
button:active {
background-color: #F9F9F9;
}
th,td {
border: solid #CCC;
border-width: 1px 0 0 1px;
padding: 2px 5px;
}
th {
background-color: #F0F0F0;
}
td.true {
color: green;
}
td.false {
color: red;
}
tr:hover td {
background-color: #F0F0F0;
}
table {
border: solid #CCC;
border-width: 0 1px 1px 0;
margin-top: 10px;
}
</style>
</head>
<body>
<div>
<div class="rows">
<label>Variables (comma separated)</label>
<input type="text" id="vars" value="a,b,c">
</div>
<div class="rows">
<label>Expressions (comma separated)</label>
<input type="text" id="expression" value="!( a || b || c ), (!a && !b && !c)">
</div>
<div class="rows">
<button id="getResult">Generate truth table</button>
</div>
</div>
<div id="result"></div>
<script>
var vars = ['a','b','c']
,expressions = ['! ( a || b || c )', '(!a && !b && !c)'];
document.getElementById('getResult').addEventListener('click', ()=>{
var len = vars.length
,splitBy = Math.round(len/2)
,trueSet
,trues = []
,falses = []
,truthData = [];
vars = document.getElementById('vars').value.split(',');
expressions = document.getElementById('expression').value.split(',');
truthData.push(truth(vars, vars, true));
for(var i=1; i<=splitBy; i++) {
trueSet = reduceToCombinations(permut(vars, i));
trueSet.forEach((truthSrc)=>{
trues = truth(vars, truthSrc);
truthData.push(trues);
});
}
truthData.push(truth(vars, vars));
writeTruthTable(truthData);
});
function truth(set, truths, reverse) {
var w = {};
set.forEach(v=>w[v]=(truths.indexOf(v)>=0 ? true : false)^reverse);
return w;
}
function reduceToCombinations(arr) {
var i=1
,lastEl;
arr = arr.map(v=>{return v.split('').sort().join('')}).sort();
lastEl = arr[0];
while(i<arr.length) {
if(arr[i] == lastEl) {
arr.splice(i,1);
} else {
lastEl = arr[i];
i++;
}
}
arr = arr.map(v=>{return v.split('')});
return arr;
}
function writeTruthTable(truthData) {
var table = '<table cellpadding=0 cellspacing=0>'
,keys
,vals
,exprRes;
table += '<thead><tr>';
vars.forEach(v=>{
table += '<th>';
table += v;
table += '</th>';
});
expressions.forEach(v=>{
table += '<th>';
table += v;
table += '</th>';
});
table += '</tr></thead>';
truthData.forEach((v)=> {
vals = [];
keys = [];
table += '<tr>';
console.log(v);
for(i in v){
vals.push(v[i]);
keys.push(i);
table += '<td>';
table += v[i];
table += '</td>';
};
for(var i = 0; i<keys.length; i++) {
eval(`var ${keys[i]} = ${vals[i]};`);
}
expressions.forEach((expr)=>{
exprRes = eval(expr);
table += `<td class="${exprRes}">`;
table += exprRes ? 'T' : 'F';
table += '</td>';
});
table += '</tr>';
});
table += '</table>';
document.getElementById('result').innerHTML = table;
}
function permut(arr, c) {
var buf = []
,len
,arrSlice
,permArr
,proArr;
if(c<=1) {
return arr;
} else {
len = arr.length;
for(var i=0;i<len;i++) {
arrSlice = arr.slice(0,i).concat(arr.slice(i+1));
permArr = permut(arrSlice,c-1);
proArr = [];
for(var y=0; y<permArr.length; y++) {
proArr.push([arr[i]].concat(permArr[y]).join(''));
}
buf.push(...proArr);
}
}
return buf;
}
</script>
</body>
</html>'HTML' 카테고리의 다른 글
| Javascript에서 Canvas 사용하기 (0) | 2021.10.20 |
|---|---|
| HTML 기본 Template (1) | 2021.10.19 |
| Javascript로 2차원 배열 만드는 방법 (0) | 2021.10.10 |
| HTML, 진짜 쉬운 스도쿠 (0) | 2021.09.29 |
| HTML, 타일게임(2048) (0) | 2021.09.28 |
댓글