Jump to content

Debugging!


debakun

Recommended Posts

So i created a program which will help me to encode any sentence or paragraph. So when i made a decompiler it wont work.Please help me out here.Thank you!

 

<!DOCTYPE html>
<html>
<body>
<p id="demo"><button onclick="code()">Encode</button></p>
<P><button onclick="decode()">Decode</button></p>
<script>
function code(){
var word=prompt("Enter Sentence to Code");
var length= word.length;
var hey= length/2;
var lol=Math.floor(hey);
for(i=0;i<length;i++){
var mampi = word.substring(i,i+1);
if(mampi==="a"){
document.write("86832");
}
else if(mampi==="b"){
document.write("11111");
}
else if(mampi==="c"){
document.write("10101");
}
else if(mampi==="d"){
document.write("13364");
}
else if(mampi==="e"){
document.write("54272");
}
else if(mampi==="f"){
document.write("48382");
}
else if(mampi==="g"){
document.write("94702");
}
else if(mampi==="h"){
document.write("47029");
}
else if(mampi==="i"){
document.write("74302");
}
else if(mampi==="j"){
document.write("10111");
}
else if(mampi==="k"){
document.write("13831");
}
else if(mampi==="l"){
document.write("12434");
}
else if(mampi==="m"){
document.write("13338");
}
else if(mampi==="n"){
document.write("14352");
}
else if(mampi==="o"){
document.write("15356");
}
else if(mampi==="p"){
document.write("55316");
}
else if(mampi==="q"){
document.write("37417");
}
else if(mampi==="r"){
document.write("16478");
}
else if(mampi==="s"){
document.write("99190");
}
else if(mampi==="t"){
document.write("23374");
}
else if(mampi==="u"){
document.write("23741");
}
else if(mampi==="v"){
document.write("22473");
}
else if(mampi==="w"){
document.write("26433");
}
else if(mampi==="x"){
document.write("23454");
}
else if(mampi==="y"){
document.write("57439");
}
else if(mampi==="z"){
document.write("26143");
}
else if(mampi===" "){
document.write("00000");
}
else if(mampi==="A"){
document.write("01111");
}
else if(mampi==="B"){
document.write("00101");
}
else if(mampi==="C"){
document.write("13304");
}
else if(mampi==="D"){
document.write("50272");
}
else if(mampi==="E"){
document.write("40382");
}
else if(mampi==="F"){
document.write("9e702");
}
else if(mampi==="G"){
document.write("47h29");
}
else if(mampi==="H"){
document.write("7E302");
}
else if(mampi==="I"){
document.write("10011");
}
else if(mampi==="J"){
document.write("0a831");
}
else if(mampi==="K"){
document.write("12034");
}
else if(mampi==="L"){
document.write("00338");
}
else if(mampi==="M"){
document.write("14052");
}
else if(mampi==="N"){
document.write("15056");
}
else if(mampi==="O"){
document.write("55016");
}
else if(mampi==="P"){
document.write("30417");
}
else if(mampi==="Q"){
document.write("16M78");
}
else if(mampi==="R"){
document.write("921A9");
}
else if(mampi==="S"){
document.write("G3542");
}
else if(mampi==="T"){
document.write("230W1");
}
else if(mampi==="U"){
document.write("2A473");
}
else if(mampi==="V"){
document.write("26Aa3");
}
else if(mampi==="W"){
document.write("23D54");
}
else if(mampi==="X"){
document.write("57A39");
}
else if(mampi==="Y"){
document.write("QB143");
}
else if(mampi==="Z"){
document.write("KKFD3");
}
else if(mampi==="Z"){
document.write("KKFD3");
}
else if(mampi===","){
document.write("mac00");
}
else if(mampi==="."){
document.write("B4[](");
}
else if(mampi==="+"){
document.write("+1+2*");
}
else if(mampi==="-"){
document.write("-----");
}
else if(mampi==="*"){
document.write("*****");
}
else if(mampi==="/"){
document.write("/////");
}
else if(mampi==="1"){
document.write("1234q");
}else if(mampi==="2"){
document.write("ddh21");
}else if(mampi==="3"){
document.write("bbdjz");
}else if(mampi==="4"){
document.write("K1113");
}else if(mampi==="5"){
document.write("53FD3");
}else if(mampi==="6"){
document.write("11111");
}else if(mampi==="7"){
document.write("94932");
}else if(mampi==="8"){
document.write("W4322");
}else if(mampi==="9"){
document.write("E42SD");
}else if(mampi==="0"){
document.write("-000-");
}else if(mampi==="Z"){
document.write("KKFD3");
}
}
}
function decode(){
var word=prompt("Enter code to decode");
for(i=0;i<length;i=i+5){
var mampi = word.substring(i,i+5);
if(mampi==="86832"){
document.write("a");
}
else if(mampi==="11111"){
document.write("b");
}
else if(mampi==="10101"){
document.write("c");
}
else if(mampi==="13364"){
document.write("d");
}
else if(mampi==="54272"){
document.write("e");
}
else if(mampi==="48382"){
document.write("f");
}
else if(mampi==="94702"){
document.write("g");
}
else if(mampi==="47029"){
document.write("h");
}
else if(mampi==="74302"){
document.write("i");
}
else if(mampi==="10111"){
document.write("j");
}
else if(mampi==="13831"){
document.write("k");
}
else if(mampi==="12434"){
document.write("l");
}
else if(mampi==="13338"){
document.write("m");
}
else if(mampi==="14352"){
document.write("n");
}
else if(mampi==="15356"){
document.write("o");
}
else if(mampi==="55316"){
document.write("p");
}
else if(mampi==="37417"){
document.write("q");
}
else if(mampi==="16478"){
document.write("r");
}
else if(mampi==="99190"){
document.write("s");
}
else if(mampi==="23374"){
document.write("t");
}
else if(mampi==="23741"){
document.write("u");
}
else if(mampi==="22473"){
document.write("v");
}
else if(mampi==="26433"){
document.write("w");
}
else if(mampi==="23454"){
document.write("x");
}
else if(mampi==="57439"){
document.write("y");
}
else if(mampi==="26143"){
document.write("z");
}
else if(mampi==="00000"){
document.write(" ");
}
else if(mampi==="01111"){
document.write("A");
}
else if(mampi==="00101"){
document.write("B");
}
else if(mampi==="13304"){
document.write("C");
}
else if(mampi==="50272"){
document.write("D");
}
else if(mampi==="40382"){
document.write("E");
}
else if(mampi==="V"){
document.write("F");
}
else if(mampi==="47h29"){
document.write("G");
}
else if(mampi==="7E302"){
document.write("H");
}
else if(mampi==="10011"){
document.write("I");
}
else if(mampi==="0a831"){
document.write("J");
}
else if(mampi==="12034"){
document.write("K");
}
else if(mampi==="00338"){
document.write("L");
}
else if(mampi==="14052"){
document.write("M");
}
else if(mampi==="15056"){
document.write("N");
}
else if(mampi==="55016"){
document.write("O");
}
else if(mampi==="30417"){
document.write("P");
}
else if(mampi==="16M78"){
document.write("Q");
}
else if(mampi==="921A9"){
document.write("R");
}
else if(mampi==="G3542"){
document.write("S");
}
else if(mampi==="230W1"){
document.write("T");
}
else if(mampi==="2A473"){
document.write("U");
}
else if(mampi==="26Aa3"){
document.write("V");
}
else if(mampi==="23D54"){
document.write("W");
}
else if(mampi==="57A39"){
document.write("X");
}
else if(mampi==="QB143"){
document.write("Y");
}
else if(mampi==="KKFD3"){
document.write("Z");
}
else if(mampi==="Z"){
document.write("KKFD3");
}
else if(mampi==="mac00"){
document.write(",");
}
else if(mampi==="B4[]()"){
document.write(".");
}
else if(mampi==="+1+2*"){
document.write("+");
}
else if(mampi==="-----"){
document.write("-");
}
else if(mampi==="*****"){
document.write("*");
}
else if(mampi==="/////"){
document.write("/");
}
else if(mampi==="1234q"){
document.write("1");
}else if(mampi==="ddh21"){
document.write("2");
}else if(mampi==="bbdjz"){
document.write("3");
}else if(mampi==="K1113"){
document.write("4");
}else if(mampi==="53FD3"){
document.write("5");
}else if(mampi==="11111"){
document.write("6");
}else if(mampi==="94932"){
document.write("7");
}else if(mampi==="W4322"){
document.write("8");
}else if(mampi==="E42SD"){
document.write("9");
}else if(mampi==="-000-"){
document.write("0");
}else if(mampi==="Z"){
document.write("KKFD3");
}
}
}
</script>
</body>
</html>
Link to comment
Share on other sites

I created a program to help me code my sentences.Please help me debug this program. The compiler works just fine but the decompiler wont!!Thank you!! :sorry:

<!DOCTYPE html>
<html>
<body>
<p id="demo"><button onclick="code()">Encode</button></p>
<P><button onclick="decode()">Decode</button></p>
<script>
function code(){
var word=prompt("Enter Sentence to Code");
var length= word.length;
var hey= length/2;
var lol=Math.floor(hey);
for(i=0;i<length;i++){
var mampi = word.substring(i,i+1);
if(mampi==="a"){
document.write("86832");
}
else if(mampi==="b"){
document.write("11111");
}
else if(mampi==="c"){
document.write("10101");
}
else if(mampi==="d"){
document.write("13364");
}
else if(mampi==="e"){
document.write("54272");
}
else if(mampi==="f"){
document.write("48382");
}
else if(mampi==="g"){
document.write("94702");
}
else if(mampi==="h"){
document.write("47029");
}
else if(mampi==="i"){
document.write("74302");
}
else if(mampi==="j"){
document.write("10111");
}
else if(mampi==="k"){
document.write("13831");
}
else if(mampi==="l"){
document.write("12434");
}
else if(mampi==="m"){
document.write("13338");
}
else if(mampi==="n"){
document.write("14352");
}
else if(mampi==="o"){
document.write("15356");
}
else if(mampi==="p"){
document.write("55316");
}
else if(mampi==="q"){
document.write("37417");
}
else if(mampi==="r"){
document.write("16478");
}
else if(mampi==="s"){
document.write("99190");
}
else if(mampi==="t"){
document.write("23374");
}
else if(mampi==="u"){
document.write("23741");
}
else if(mampi==="v"){
document.write("22473");
}
else if(mampi==="w"){
document.write("26433");
}
else if(mampi==="x"){
document.write("23454");
}
else if(mampi==="y"){
document.write("57439");
}
else if(mampi==="z"){
document.write("26143");
}
else if(mampi===" "){
document.write("00000");
}
else if(mampi==="A"){
document.write("01111");
}
else if(mampi==="B"){
document.write("00101");
}
else if(mampi==="C"){
document.write("13304");
}
else if(mampi==="D"){
document.write("50272");
}
else if(mampi==="E"){
document.write("40382");
}
else if(mampi==="F"){
document.write("9e702");
}
else if(mampi==="G"){
document.write("47h29");
}
else if(mampi==="H"){
document.write("7E302");
}
else if(mampi==="I"){
document.write("10011");
}
else if(mampi==="J"){
document.write("0a831");
}
else if(mampi==="K"){
document.write("12034");
}
else if(mampi==="L"){
document.write("00338");
}
else if(mampi==="M"){
document.write("14052");
}
else if(mampi==="N"){
document.write("15056");
}
else if(mampi==="O"){
document.write("55016");
}
else if(mampi==="P"){
document.write("30417");
}
else if(mampi==="Q"){
document.write("16M78");
}
else if(mampi==="R"){
document.write("921A9");
}
else if(mampi==="S"){
document.write("G3542");
}
else if(mampi==="T"){
document.write("230W1");
}
else if(mampi==="U"){
document.write("2A473");
}
else if(mampi==="V"){
document.write("26Aa3");
}
else if(mampi==="W"){
document.write("23D54");
}
else if(mampi==="X"){
document.write("57A39");
}
else if(mampi==="Y"){
document.write("QB143");
}
else if(mampi==="Z"){
document.write("KKFD3");
}
else if(mampi==="Z"){
document.write("KKFD3");
}
else if(mampi===","){
document.write("mac00");
}
else if(mampi==="."){
document.write("B4[](");
}
else if(mampi==="+"){
document.write("+1+2*");
}
else if(mampi==="-"){
document.write("-----");
}
else if(mampi==="*"){
document.write("*****");
}
else if(mampi==="/"){
document.write("/////");
}
else if(mampi==="1"){
document.write("1234q");
}else if(mampi==="2"){
document.write("ddh21");
}else if(mampi==="3"){
document.write("bbdjz");
}else if(mampi==="4"){
document.write("K1113");
}else if(mampi==="5"){
document.write("53FD3");
}else if(mampi==="6"){
document.write("11111");
}else if(mampi==="7"){
document.write("94932");
}else if(mampi==="8"){
document.write("W4322");
}else if(mampi==="9"){
document.write("E42SD");
}else if(mampi==="0"){
document.write("-000-");
}else if(mampi==="Z"){
document.write("KKFD3");
}
}
}
function decode(){
var word=prompt("Enter code to decode");
for(i=0;i<length;i=i+5){
var mampi = word.substring(i,i+5);
if(mampi==="86832"){
document.write("a");
}
else if(mampi==="11111"){
document.write("b");
}
else if(mampi==="10101"){
document.write("c");
}
else if(mampi==="13364"){
document.write("d");
}
else if(mampi==="54272"){
document.write("e");
}
else if(mampi==="48382"){
document.write("f");
}
else if(mampi==="94702"){
document.write("g");
}
else if(mampi==="47029"){
document.write("h");
}
else if(mampi==="74302"){
document.write("i");
}
else if(mampi==="10111"){
document.write("j");
}
else if(mampi==="13831"){
document.write("k");
}
else if(mampi==="12434"){
document.write("l");
}
else if(mampi==="13338"){
document.write("m");
}
else if(mampi==="14352"){
document.write("n");
}
else if(mampi==="15356"){
document.write("o");
}
else if(mampi==="55316"){
document.write("p");
}
else if(mampi==="37417"){
document.write("q");
}
else if(mampi==="16478"){
document.write("r");
}
else if(mampi==="99190"){
document.write("s");
}
else if(mampi==="23374"){
document.write("t");
}
else if(mampi==="23741"){
document.write("u");
}
else if(mampi==="22473"){
document.write("v");
}
else if(mampi==="26433"){
document.write("w");
}
else if(mampi==="23454"){
document.write("x");
}
else if(mampi==="57439"){
document.write("y");
}
else if(mampi==="26143"){
document.write("z");
}
else if(mampi==="00000"){
document.write(" ");
}
else if(mampi==="01111"){
document.write("A");
}
else if(mampi==="00101"){
document.write("B");
}
else if(mampi==="13304"){
document.write("C");
}
else if(mampi==="50272"){
document.write("D");
}
else if(mampi==="40382"){
document.write("E");
}
else if(mampi==="V"){
document.write("F");
}
else if(mampi==="47h29"){
document.write("G");
}
else if(mampi==="7E302"){
document.write("H");
}
else if(mampi==="10011"){
document.write("I");
}
else if(mampi==="0a831"){
document.write("J");
}
else if(mampi==="12034"){
document.write("K");
}
else if(mampi==="00338"){
document.write("L");
}
else if(mampi==="14052"){
document.write("M");
}
else if(mampi==="15056"){
document.write("N");
}
else if(mampi==="55016"){
document.write("O");
}
else if(mampi==="30417"){
document.write("P");
}
else if(mampi==="16M78"){
document.write("Q");
}
else if(mampi==="921A9"){
document.write("R");
}
else if(mampi==="G3542"){
document.write("S");
}
else if(mampi==="230W1"){
document.write("T");
}
else if(mampi==="2A473"){
document.write("U");
}
else if(mampi==="26Aa3"){
document.write("V");
}
else if(mampi==="23D54"){
document.write("W");
}
else if(mampi==="57A39"){
document.write("X");
}
else if(mampi==="QB143"){
document.write("Y");
}
else if(mampi==="KKFD3"){
document.write("Z");
}
else if(mampi==="Z"){
document.write("KKFD3");
}
else if(mampi==="mac00"){
document.write(",");
}
else if(mampi==="B4[]()"){
document.write(".");
}
else if(mampi==="+1+2*"){
document.write("+");
}
else if(mampi==="-----"){
document.write("-");
}
else if(mampi==="*****"){
document.write("*");
}
else if(mampi==="/////"){
document.write("/");
}
else if(mampi==="1234q"){
document.write("1");
}else if(mampi==="ddh21"){
document.write("2");
}else if(mampi==="bbdjz"){
document.write("3");
}else if(mampi==="K1113"){
document.write("4");
}else if(mampi==="53FD3"){
document.write("5");
}else if(mampi==="11111"){
document.write("6");
}else if(mampi==="94932"){
document.write("7");
}else if(mampi==="W4322"){
document.write("8");
}else if(mampi==="E42SD"){
document.write("9");
}else if(mampi==="-000-"){
document.write("0");
}else if(mampi==="Z"){
document.write("KKFD3");
}
}
}
</script>
</body>
</html>
Link to comment
Share on other sites

Try to stop using document.write(). Also see http://www.w3schools.com/jsref/jsref_indexof_array.asp

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><style></style><script>window.onerror = function(a, b, c, d){alert('Javascript Error:n'+a+'nURL: '+b+'nLine: '+c+'  Column: '+d);return true;}</script><script>'use strict';var alpha = [];var numbs = [];alpha.push('a');numbs.push('11111');alpha.push('b');numbs.push('22222');alpha.push('c');numbs.push('33333');function code(){ var str = ""; var words = prompt("Enter Sentence to Code"); var length = words.length; for(var i=0 ; i<length ; i++){  var mampi = words.substring(i,i+1);  var idx = alpha.indexOf(mampi);  if( idx >= 0 ){   str += numbs[idx];  }else{   str += '?????';  } } document.getElementById('out').textContent = str;}// end of funcfunction decode(){ var str = ""; var words = prompt("Enter code to decode"); var length = words.length; for(var i=0 ; i<length ; i=i+5){  var mampi = words.substring(i,i+5);  var idx = numbs.indexOf(mampi);  //alert(mampi +' = '+ idx);  if( idx >= 0 ){   str += alpha[idx];  }else{   str += '?';  } } document.getElementById('out').textContent = str;}//end of func</script></head><body><p id="demo"><button onclick="code()">Encode</button></p><P><button onclick="decode()">Decode</button></p> <div id="out"></div></body>    </html>
Link to comment
Share on other sites

oh got the dreaded else if chain, just a tip that if you find yourself making a chain like this there is usually a far more efficient way of doing this... by the way did you know that you have an encryption for "Z" in there three times? also what is the purpose the hey and lol variables? they're not used...here is a rewrite...

var encoder={	encryptKey:{"a":"86832", "b":"11111", "c":"10101", "d":"13364", "e":"54272", "f":"48382", "g":"94702", "h":"47029","i":"74302", "j":"10111", "k":"13831", "l":"12434", "m":"13338", "n":"14352", "o":"15356", "p":"55316", "q":"37417", "r":"16478", "s":"99190", "t":"23374", "u":"23741", "v":"22473", "w":"26433", "x":"23454", "y":"57439", "z":"26143", " ":"00000", "A":"01111", "B":"00101", "C":"13304", "D":"50272", "E":"40382", "F":"9e702", "G":"47h29", "H":"7E302", "I":"10011", "J":"0a831", "K":"12034", "L":"00338", "M":"14052", "N":"15056", "O":"55016", "P":"30417", "Q":"16M78", "R":"921A9", "S":"G3542", "T":"230W1", "U":"2A473", "V":"26Aa3", "W":"23D54", "X":"57A39", "Y":"QB143", "Z":"KKFD3", ",":"mac00", ".":"B4[](", "+":"+1+2*", "-":"-----", "*":"*****", "/":"/////", "1":"1234q", "2":"ddh21", "3":"bbdjz", "4":"K1113", "5":"53FD3", "6":"11111", "7":"94932", "8":"W4322", "9":"E42SD", "0":"-000-"},	decryptKey:null,	encrypt:function(inWord){		var output = "";		if(typeof inWord === "string"){			var explode = inWord.split("")			while(explode.length>0){				output += this.encryptKey[explode.shift()];			}		}		return output;	},	decrypt:function(inWord){		var output = "";		if(!this.decryptKey){			// if the decrypt key not built yet, build it now			// we wait to do it here and not hardcoded it in to save on maintainence			this.decryptKey = {};			for( var key in this.encryptKey){				//swap the key and value from encryptkey for decryptkey				this.decryptKey[this.encryptKey[key]] = key;			}		}		if(typeof inWord === "string"&&inWord.length%5==0){			while(inWord){				output += this.decryptKey[inWord.substr(0,5)];				inWord = inWord.substr(5)			}		}		return output;	}}// now the code to link the encoder to elementsvar ele = {};window.onload= function(){  var flipflop = false;   ele.demo = document.getElementById("demo")  ele.button = document.getElementById("but")  ele.button.onclick = function(){    if(flipflop  = !flipflop){      ele.button.innerHTML = ele.button.value = "Encode";      ele.demo.innerHTML = encoder.encrypt(ele.demo.innerHTML);    }else{      ele.button.innerHTML = ele.button.value = "Decode";      ele.demo.innerHTML = encoder.decrypt(ele.demo.innerHTML);        }  };};

 

<p id="demo">I am full of really cool text.</p><button id="but">Encode</button> 

good thing here is that all that code is contained inside the encoder object, theres no huge elseif chain, and both encryption functions are super fast to run back and forth. plus I created that key only once, massively reducing the risk of having a typo, while making it really easy to change both the encryption and decryption keys at the same time.

Edited by Hadien
Link to comment
Share on other sites

Hmmm... I had wanted to try an object approach. This is the best I can do...

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><style></style><script>window.onerror = function(a, b, c, d){alert('Javascript Error:n'+a+'nURL: '+b+'nLine: '+c+'  Column: '+d);return true;}</script><script>'use strict';var encryptKey = {"a":"86832", "b":"11111", "c":"10101", "d":"13364", "e":"54272", "f":"48382", "g":"94702", "h":"47029","i":"74302", "j":"10111", "k":"13831", "l":"12434", "m":"13338", "n":"14352", "o":"15356", "p":"55316", "q":"37417", "r":"16478", "s":"99190", "t":"23374", "u":"23741", "v":"22473", "w":"26433", "x":"23454", "y":"57439", "z":"26143", " ":"00000", "A":"01111", "B":"00101", "C":"13304", "D":"50272", "E":"40382", "F":"9e702", "G":"47h29", "H":"7E302", "I":"10011", "J":"0a831", "K":"12034", "L":"00338", "M":"14052", "N":"15056", "O":"55016", "P":"30417", "Q":"16M78", "R":"921A9", "S":"G3542", "T":"230W1", "U":"2A473", "V":"26Aa3", "W":"23D54", "X":"57A39", "Y":"QB143", "Z":"KKFD3", ",":"mac00", ".":"B4[](", "+":"+1+2*", "-":"-----", "*":"*****", "/":"/////", "1":"1234q", "2":"ddh21", "3":"bbdjz", "4":"K1113", "5":"53FD3", "6":"11111", "7":"94932", "8":"W4322", "9":"E42SD", "0":"-000-"};function invertKeys(eObj){ var oObj = {}; for (var k in eObj){  oObj[eObj[k]] = k; } //document.getElementById('dbg').innerHTML = '<hr/>'+JSON.stringify(oObj); return oObj;}function code(){ var str = ""; var words = prompt("Enter Sentence to Code"); var length = words.length; for(var i=0 ; i<length ; i++){  var val = encryptKey[words[i]];  if (val != undefined){    str += val;  }else{    str += '?????';  } } document.getElementById('out').textContent = str;}// end of funcfunction decode(){ var str = ""; var words = prompt("Enter code to decode"); var length = words.length; var decryptKey = invertKeys(encryptKey); for(var i=0 ; i<length ; i=i+5){  var val = decryptKey[words.substring(i,i+5)];  if (val != undefined){    str += val;  }else{    str += '?';  } } document.getElementById('out').textContent = str;}//end of func</script></head><body><p id="demo"><button onclick="code()">Encode</button></p><P><button onclick="decode()">Decode</button></p> <div id="out"></div><div id="dbg"></div></body>    </html>
Link to comment
Share on other sites

remember the four basic qualities of Object-oriented programming: Inheritance, Composition, Encapsulation, and Polymorphism.

 

Inheritance:

Theres no true Inheritance in Javascript, you can only fake it through prototypes, but If you're not planning to extend the functionality then its not worth the effort in messing with prototypes.

 

Composition:

As a general rule in any language always favor using Composition over Inheritance. though you'll end up with an explosion of classes/objects to work with compared to inheritance, your code will be a lot more flexible. Javascript lacks an <<interface>> structure and <<abstract>> reserved terms so like with inheritance you can't achieve true composition. the insensitive type-casting can let you fake it, but it doesn't place the same limitations that other languages do, so its not as stable.

 

Encapsulation:

Make sure the least amount of objects know about your object's properties and methods. the less an object knows about another object and what it has or does, the less it relys on it. if your objects/classes lack proper encapsulation a single change in one object will force you to go back and update all other objects that depend on it. and if one piece of code breaks it's likely breaking somewhere else too. Javascript makes this hard to do as well since they want to make virtually every object transparent, but you can use closures to great effect in giving your object encapsulation.

 

Polymorphism:

one great thing about Javascript is how easy it is to change the object from one to the other without much worry to datatypes, so its simply making all objects which you plan to swapping with each other to have the same function names and similar behaviors to make them polymorphic

 

 

 

Encapsulation is the easiest one to code for as it takes the least amount of pre-planning and most javascript scripts won't need for you to apply the other basic qualities.

 

 

the very first thing I would do is group all those functions with encryptKey and make them properties of an object. this is the first step to encapsulation as now the rest of your code will only directly see an encryption object and what ever that object wants to show they they dig into it. take a look at my code for the encoder{}, specifically the two functions encrypt and decrypt. nearly all the data that those functions need can be found inside the encoder object. only needed a couple properties from the string object (length, split, and substr) and array (shift). So those two functions are well encapsulated inside the object, you could change all the code outside the encoder and so long as the specifications for javascripts string and array stays the same, encoder will purr along, and I won't have to come back and change it until I want a different encoder/decoder.

 

encryptKey, code, and decode all need to wrapped into one object. You see, these functions work under the assumptions of whats in the encryptkey, it depends on them. say for example you make a new encryptKey where the each character translated to a 3 charater word instead of 5. Suddenly the decode function won't work cause its based on the assumption that its character translations will ALWAYS have five characters. decode depends on this specific encryptKey so you should encapsulate it into the encoder (you can because its not encapsulated to something else)

 

its also a pet peeve of mine that if I only plan to use a variable only once inside a scope, I shouldn't allocate it to its own variable.

you don't really need a

var length = words.length;

since its only used once in your code. so you could have gotten away with using it directly inside the for loop. your code will have less lines of code, use up less memory (even though thats not much of an argument here, it really does add up for specific data structures and larger applications) and you're less likely to have bugs in it (less code, less room for there to be mistakes).

  • Like 1
Link to comment
Share on other sites

Yes, I could have wrapped it all up in one namespace object, but I have had more trouble debugging that type of code. The onerror scheme seems to become confused by function literals and your code can either fail silently or the error message tells you there is an error on line 1 of the file. Also you have to be careful to never call a function above the point where it is declared.

 

Also a namespace of any size is ugly...

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><style></style><script>window.onerror = function(a, b, c, d){alert('Javascript Error:n'+a+'nURL: '+b+'nLine: '+c+'  Column: '+d);return true;}</script><script>'use strict';var mynamespace = {};mynamespace.encryptKey = {"a":"86832", "b":"11111", "c":"10101", "d":"13364", "e":"54272", "f":"48382", "g":"94702", "h":"47029","i":"74302", "j":"10111", "k":"13831", "l":"12434", "m":"13338", "n":"14352", "o":"15356", "p":"55316", "q":"37417", "r":"16478", "s":"99190", "t":"23374", "u":"23741", "v":"22473", "w":"26433", "x":"23454", "y":"57439", "z":"26143", " ":"00000", "A":"01111", "B":"00101", "C":"13304", "D":"50272", "E":"40382", "F":"9e702", "G":"47h29", "H":"7E302", "I":"10011", "J":"0a831", "K":"12034", "L":"00338", "M":"14052", "N":"15056", "O":"55016", "P":"30417", "Q":"16M78", "R":"921A9", "S":"G3542", "T":"230W1", "U":"2A473", "V":"26Aa3", "W":"23D54", "X":"57A39", "Y":"QB143", "Z":"KKFD3", ",":"mac00", ".":"B4[](", "+":"+1+2*", "-":"-----", "*":"*****", "/":"/////", "1":"1234q", "2":"ddh21", "3":"bbdjz", "4":"K1113", "5":"53FD3", "6":"11111", "7":"94932", "8":"W4322", "9":"E42SD", "0":"-000-"};mynamespace.init = function(){document.getElementById('enbtn').addEventListener('click',mynamespace.code);document.getElementById('debtn').addEventListener('click',mynamespace.decode);}mynamespace.decryptKey = null;mynamespace.invertKeys = function(eObj){ mynamespace.decryptKey = {}; for (var k in eObj){  mynamespace.decryptKey[eObj[k]] = k; } //document.getElementById('dbg').innerHTML = '<hr/>'+JSON.stringify(oObj);};mynamespace.code = function(){ var str = ""; var words = prompt("Enter Sentence to Code"); for(var i=0,len=words.length ; i<len ; i++){  var val = mynamespace.encryptKey[words[i]];  if (val != undefined){    str += val;  }else{    str += '?????';  } } document.getElementById('out').textContent = str;};// end of funcmynamespace.decode = function(){ var str = ""; var words = prompt("Enter code to decode"); if (mynamespace.decryptKey===null){   mynamespace.invertKeys(mynamespace.encryptKey); } for(var i=0,len=words.length ; i<len ; i=i+5){  var val = mynamespace.decryptKey[words.substring(i,i+5)];  if (val != undefined){    str += val;  }else{    str += '?';  } } document.getElementById('out').textContent = str;};//end of funcwindow.addEventListener('load',mynamespace.init);</script></head><body><p id="demo"><button id="enbtn">Encode</button></p><P><button id="debtn">Decode</button></p> <div id="out"></div><div id="dbg"></div></body>    </html>
Link to comment
Share on other sites

but I have had more trouble debugging that type of code.

I'm not sure how you're having problems with the onerror scheme not showing you were a bug is happening, what browser are you using? Works just fine in chrome, when I add a simple throw in my functions, tells me exactly the line where the error happens and everything. Personally I use Chrome's developer tools to help me locate my bugs. simply open up the console and click on the error log and it zips you to the bug.

and your code can either fail silently

There are two types of functions in OOP, "smart" functions and "dumb" functions. "dumber" functions tries to think as little as possible and only focus on one or two things. they have their own little world and the smaller it is the less likely it will fall apart."smarter" functions work by juggling multiple responsibilities at once. the smarter a function, the more it can do, the more responsibilities it has, and the more likely that things can break in it. An effective application tries to have many, many dumb functions and very few smart functions, ideally just one smart function (though we can't always get what we want).

now I could have merged my functions in the encoder into one and have them flipflop functionality instead of delegating that to the function inside the onclick handler. but my code would be less flexible as I could only work on a single group of text per page. I kept encrypt and decrypt relatively dumb so that other code blocks would have more control over it. The functions run perfectly and as expected with the given encryptKeys and as long as things stay that way its not their fault if things break. when they do break (like you add in a "!" which is not stored in the encryptKey), the fix to that problem lies outside the function. Any instance where my functions fails silently is the intention. If the string the user inputs into encrypt/decrypt is invalid then the function simply returns an empty string and it lets a smarter function worry about it. If I was actually getting an error bounced back at me from inside those functions, which can still happen if I tried, then I would have to worry about fixing the code.

My encrypt/decrypt could be dumber if I really wanted to break it out even more, but I really don't need the extra control it would afford. if it mattered and I wanted to create an entire framework for encryption then sure I would be breaking down functions left and right.

Also you have to be careful to never call a function above the point where it is declared.

Not sure how this argument is against using Objects. Thats true even when your not using objects. With the right coding habits this should almost never happen anyways.

Also a namespace of any size is ugly...

This is javascript so pretty much every object in exsistence will have a namespace of any size its just the nature of the language. you can dig deep into the Object functions and exert more control on your new objects, but you usually don't need to waste the time.

Beside its far better encapsulating related data into single object namespaces than having it all in the global space where its more likely to collide with another variable using the same name.

Link to comment
Share on other sites

When I try to replace my long ugly namespace I find "this" to be unreliable...

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><style></style><script>window.onerror = function(a, b, c, d){alert('Javascript Error:n'+a+'nURL: '+b+'nLine: '+c+'  Column: '+d);return true;}</script><script>'use strict';var mynamespace = {xyz: null,encryptKey: { "a":"86832", "b":"11111", "c":"10101" },init: function(){ var that = mynamespace; document.getElementById('dbg').innerHTML = JSON.stringify( this.encryptKey )                                   +'<hr/>'+ JSON.stringify( that.encryptKey )                                  +'<hr/>'+ JSON.stringify( mynamespace.encryptKey );}}window.addEventListener('load',mynamespace.init);</script></head><body><div id="dbg"></div></body>    </html>

...so I don't completely understand "this." In some situations it seems to work and yet at other times (such as in the above code) it does not seem to work. When writing Java or C# you can use "this" inside an object and it always gives you that object instance.

Link to comment
Share on other sites

the reason I didn't run into that problem in my code was because of how I wrote my event handlers that link to the methods. in your script you use add event listener

window.addEventListener('load',mynamespace.init);

here you have addEventListener reference the init function to window directly. addEventListener forces the this reference to point to the window object when it runs init

 

in my script I wrapped the object methods inside a custom tailored callback function...

  /*.....*/ele.button.onclick = function(){    if(flipflop  = !flipflop){      ele.button.innerHTML = ele.button.value = "Encode";      ele.demo.innerHTML = encoder.encrypt(ele.demo.innerHTML);    }else{      ele.button.innerHTML = ele.button.value = "Decode";      ele.demo.innerHTML = encoder.decrypt(ele.demo.innerHTML);        }  };/*.....*/

inside the onclick handler the "this" reference is pointing to the button which triggered the handler. but that doesn't matter because I call the encrypt/decrypt functions without passing on the this reference. The "this" that points to the button remains in this scope, while the "this" thats used in both crypt functions point to encoder since thats the object holding them and I'm not using any form of call or apply (this includes addEventListener).

 

 

If you still want to use addEventListener then wrap the function reference inside another function

window.addEventListener('load',    function(){        //in this scope "this" will still point to the window object cause addEventListener forces it to.        // but inside the init() "this" will point to mynamespace. it'll be preserved.        mynamespace.init()    };

or simply use bind to ensure this is using the right pointer

window.addEventListener('load',mynamespace.init.bind(mynamespace));
Link to comment
Share on other sites

The problem is that for an event handler 'this' is useful for identifying the element that made the call. So I would also need to get comfortable using something like evt.target rather than 'this' to discover what button was clicked or what element originated the event.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...