PDA

View Full Version : Total Newbie to JavaScript - stuck on this assignment



Brom2855
Feb 28th, 2019, 06:34 PM
Just registered here. College student studying cybersecurity and one of the 2-year degree requirements is a web scripting tech class; I'm taking a JavaScript one. Instructor's approach is basically, during class time, he walks us through most of a program's coding, then says what coding is ours to figure out and sets a due date. There's no discussion whatsoever about how to use the various things like loops and all, so as a kinesthetic learner, it's a lot of gibberish.

I have no trouble reading and understanding what code does, it's actually knowing how to code it that defeats me. As a methodological thinker, it just cannot click, so have to be shown how exactly to get it correct and working. Concepts aren't any trouble, but the actual coding typically leaves me frustrated. Know programmers work in teams, so decided to come here and ask your help.

Now, the project (LetterCode) JavaScript follows:


var $ = function(id) {
return document.getElementById(id);
};
window.onload = function() {
$("btnClear").onclick = fnClear;
$("btnDecode").onclick = fnDecode;
$("btnEncode").onclick = fnEncode;
};

function fnDecode() {
var msg = $("textin").value;
if (msg === "") {
$("textin_span").value ="Please type a message to encode or decode!";
$("textin").focus();
return;
} else {
$("textin_span").value = "";
}
var nums = msg.split(",");
var c;
var outstr = "";

for(var i=0; i < nums.length; i++) {
var n2 = parseInt(nums[i]);
if (isNaN(n2)) {
outstr += "?";
} else if (isNallN(nums[i])) {

} else if (n2===0) {
outstr += " ";
} else if (n2 < 1 || n2 >26) {
outstr += "?";
} else {
outstr += String.fromCharCode(n2+64);
}
}
$("textout").value = outstr;
}

function isNallN(s) {
//parse string checks that all characters are digits
}
function fnEncode() {
var msg = $("textin").value.toUpperCase();
$("textin").value = msg;

var outstr = "";
var c;

for (var i=0; i<msg.length; i++) {
c = msg.charCodeAt(i);
var x = msg.charCodeAt(i); //this will pull the character at position "i"
//as a string, useful for
}
}

function fnClear() {
$("title").reset();
$("textin").value = "";
$("textout").value = "";
};

The web page's coding (all prepared for me in advance, so no errors) follows:

<!DOCTYPE html >
<html>
<head>
<title>Letter Code Converter</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="lettercode.css">
<script src="translate.js"></script>
</head>
<body>
<div id="title">
<h1>Letter Code Converter</h1>
</div>
<div id="content">
<p><b>Enter Message To Encode or Decode:</b><br>
<textarea rows="7" cols="68" id="textin"></textarea><br>
(for decode, separate numbers with commas)<br>
<span id="textin_span"></span></p>
<br>
<p>
<input type="button" value="Decode" id="btnDecode" />
<input type="button" value="Encode" id="btnEncode" />
<input type="button" value="Clear" id="btnClear" />
</p>
<br>
<p><b>Result:</b><br>
<textarea rows="9" cols="68" id="textout" readonly></textarea></p>
<br><br>
</div>
</body>
</html>

Ok, program basically is to convert 1-26 to A-Z and vice versa, give a ? to anything that doesn't fall into the two accepted ranges.

Started trying the fnClear, but it does not work. Copied and pasted same syntax from a previous JS I got working, changed the names to the textboxs in this project, yet it isn't working. What am I doing wrong? Stuff like this is why dislike this JS class, face problems that I've never seen before all the time; the .value and .innerHTML both did nothing.

Never used a for loop either. As per thread title, this is a lot of new stuff and doesn't make sense. Since studying cybersecurity w/ intent to become cybersec analyst, being able to code is pointless--only need to be able to read and understand the code, or so I've learned.

Appreciate any help.

Shaka Zorba
Feb 28th, 2019, 08:26 PM
for(var i=0; i < nums.length; i++) {
var n2 = parseInt(nums[i]);
if (isNaN(n2)) {
outstr += "?";
} else if (isNallN(nums[i])) { get rid of this line

} else if (n2===0) {
outstr += " ";
} else if (n2 < 1 || n2 >26) {
outstr += "?";
} else {
outstr += String.fromCharCode(n2+64);
}
}



for (var i=0; i<msg.length; i++) {
c = msg.charCodeAt(i);
var x = msg.charCodeAt(i); //this will pull the character at position "i"
//as a string, useful for
}you have not provided a way to get the
charCodes into textout



function fnClear() {
$("title").reset();get rid of this line
$("textin").value = "";
$("textout").value = "";
};

sunfighter
Feb 28th, 2019, 09:37 PM
Using SZ explanation you need to sub this:


for (var i=0; i<msg.length; i++) {
c = msg.charCodeAt(i);
var x = msg.charCodeAt(i);
if(!(isNaN(x))) outstr += x-64;
$("textout").value = outstr;
}
BUT in your decoding how do you distinguish between 23 being BC and W?

Brom2855
Feb 28th, 2019, 11:13 PM
Using SZ explanation you need to sub this:


for (var i=0; i<msg.length; i++) {
c = msg.charCodeAt(i);
var x = msg.charCodeAt(i);
if(!(isNaN(x))) outstr += x-64;
$("textout").value = outstr;
}
BUT in your decoding how do you distinguish between 23 being BC and W?

Oh, I'm using Netbeans. Instructor did the fnDecode, and it seems the " else if (n2 < 1 || n2 >26)" line handles that. Any values outside range is set to return a "?".

Brom2855
Feb 28th, 2019, 11:21 PM
for(var i=0; i < nums.length; i++) {
var n2 = parseInt(nums[i]);
if (isNaN(n2)) {
outstr += "?";
} else if (isNallN(nums[i])) { get rid of this line

} else if (n2===0) {
outstr += " ";
} else if (n2 < 1 || n2 >26) {
outstr += "?";
} else {
outstr += String.fromCharCode(n2+64);
}
}



for (var i=0; i<msg.length; i++) {
c = msg.charCodeAt(i);
var x = msg.charCodeAt(i); //this will pull the character at position "i"
//as a string, useful for
}you have not provided a way to get the
charCodes into textout



function fnClear() {
$("title").reset();get rid of this line
$("textin").value = "";
$("textout").value = "";
};


That got the btnClear working as desired. Now, the code that's still not making sense:

var nums = msg.split(",");
var c;
var outstr = "";

for(var i=0; i < nums.length; i++) {
var n2 = parseInt(nums[i]);
if (isNaN(n2)) {
outstr += "?";
} else if (isNallN(nums[i])) {
outstr += "This ain't a number pal!";
} else if (n2===0) {
outstr += " ";
} else if (n2 < 1 || n2 >26) {
outstr += "?";
} else {
outstr += String.fromCharCode(n2+64);
}
}
$("textout").value = outstr;
}

function isNallN(s) {
var isNum = /^\d+\,\d+$/.test(value);
}

Professor's instructions were to have the isNallN call the function of same name, basically check the digits entered are all numbers so that, for example, something like 1a or S9 isn't accepted. I already tried a global variable, then giving the two local variables same name and even set the unused variable c to call the isNallN function, but nothing. No idea what I'm doing wrong.

Shaka Zorba
Mar 1st, 2019, 12:07 AM
maybe like this ...




function isNallN(s) {
var isValid = false;
var regex = /^[0-9\s]*$/;
isValid = regex.test(s);
return isValid;
}



now I am confused a little
if that doesn't work try
like this …




function isNallN(s) {
var isValid = false;
var regex = /^[0-9\s]*$/;
isValid = regex.test(s);
return !isValid;
}

deathshadow
Mar 1st, 2019, 06:32 AM
Gah, seeing stuff like this makes me SO glad I'm far too old to go and take courses on this stuff anymore. You put me alone in a room with your teacher for five minutes, I guarantee somebody would be leaving on a gurney.

The decade out of date http-equiv charset declaration, TITLE before the charset declaration, lack of a MEDIA target on the stylesheet LINK, outdated use of the TYPE attribute on LINK, blocking SCRIPT in the HEAD, likely a DIV for nothing around the H1, what makes INPUT tags a grammatical paragraph? Why are scripting only elements static in the markup? What makes "result:" a proper name or legal entity? The HTML alone is cringe-worthy and indicative your teacher hasn't taught you enough HTML to even be using JavaScript yet. It's no wonder you're having problems.

Much less the goofy wrapper for getElementById that has you getting multiple times, or the use of JavaScript to clear a form, something you wouldn't need if you had a FORM and a <button type="clear">

In all likelihood your HTML should be something more along the lines of this:



<!DOCTYPE html><html><head><meta charset="utf-8">
<meta
name="viewport"
content="width=device-width,height=device-height,initial-scale=1"
>
<link
rel="stylesheet"
href="letterCodeConverter.screen.css"
media="screen"
>
<title>Letter Code Converter</title>
</head><body>

<h1>Letter Code Converter</h1>

<noscript>
<p>
This page requries JavaScript to function. Please either enable it or revisit this site in a Scripting capable browser.
</p>
</noscript>
<script src="letterCodeConverter.js"></script>
</body></html>


With EVERYTHING else added to the page via that script... which would go something like this:



(function(d) {

function make(tagName, attr) {
var e = d.createElement('tagName');
if (attr) for (var i in attr) {
switch (i) {
case 'last':
attr[i].appendChild(e);
break;
case 'content':
e.appendChild(
('object' == typeof attr[i]) ?
attr[i] :
d.createTextNode(attr[i])
);
break;
default:
e.setAttribute(i, attr[i]);
}
}
return e;
} // make

var form = make('form', { last : d.body });
make('label', {
content : 'Enter message to Encode or Decode',
for : 'textIn',
last : form // always do last last
});
var textIn = make('textarea', {
id : 'textIn',
rows : 7,
cols : 68,
last : form
});
make('br', { last : d.body });
make('button', {
content : 'Decode',
click : decode,
type : 'button',
last : form
});
make('button', {
content : 'Encode',
click : encode,
type : 'button',
last : form
});
make('button', {
content : 'Clear',
type : 'clear',
last : form
});
make('br', { last : form });
make('label', {
content : 'Result:',
for : 'textOut',
last : form
});
var textOut = make('textarea', {
id : 'textOut',
cols : 68,
rows : 9,
readonly : 'readonly', // XML compatible version, just in case!
last : form
});

function encode(e) {
// no clue what 'encode' is in use
}

function decode(e) {
// no clue what 'encode' is in use
}

})(document);

But again, what it's actually trying to do is beyond me, as I literally cannot figure out what that's even supposed to be doing.

Brom2855
Mar 2nd, 2019, 07:30 PM
maybe like this ...




function isNallN(s) {
var isValid = false;
var regex = /^[0-9\s]*$/;
isValid = regex.test(s);
return isValid;
}



now I am confused a little
if that doesn't work try
like this …




function isNallN(s) {
var isValid = false;
var regex = /^[0-9\s]*$/;
isValid = regex.test(s);
return !isValid;
}



2nd one did the job. Thanks!

Brom2855
Mar 2nd, 2019, 07:33 PM
Gah, seeing stuff like this makes me SO glad I'm far too old to go and take courses on this stuff anymore. You put me alone in a room with your teacher for five minutes, I guarantee somebody would be leaving on a gurney.

The decade out of date http-equiv charset declaration, TITLE before the charset declaration, lack of a MEDIA target on the stylesheet LINK, outdated use of the TYPE attribute on LINK, blocking SCRIPT in the HEAD, likely a DIV for nothing around the H1, what makes INPUT tags a grammatical paragraph? Why are scripting only elements static in the markup? What makes "result:" a proper name or legal entity? The HTML alone is cringe-worthy and indicative your teacher hasn't taught you enough HTML to even be using JavaScript yet. It's no wonder you're having problems.

Much less the goofy wrapper for getElementById that has you getting multiple times, or the use of JavaScript to clear a form, something you wouldn't need if you had a FORM and a <button type="clear">

In all likelihood your HTML should be something more along the lines of this:



<!DOCTYPE html><html><head><meta charset="utf-8">
<meta
name="viewport"
content="width=device-width,height=device-height,initial-scale=1"
>
<link
rel="stylesheet"
href="https://www.codingforums.com/letterCodeConverter.screen.css"
media="screen"
>
<title>Letter Code Converter</title>
</head><body>

<h1>Letter Code Converter</h1>

<noscript>
<p>
This page requries JavaScript to function. Please either enable it or revisit this site in a Scripting capable browser.
</p>
</noscript>
<script src="letterCodeConverter.js"></script>
</body></html>


With EVERYTHING else added to the page via that script... which would go something like this:



(function(d) {

function make(tagName, attr) {
var e = d.createElement('tagName');
if (attr) for (var i in attr) {
switch (i) {
case 'last':
attr[i].appendChild(e);
break;
case 'content':
e.appendChild(
('object' == typeof attr[i]) ?
attr[i] :
d.createTextNode(attr[i])
);
break;
default:
e.setAttribute(i, attr[i]);
}
}
return e;
} // make

var form = make('form', { last : d.body });
make('label', {
content : 'Enter message to Encode or Decode',
for : 'textIn',
last : form // always do last last
});
var textIn = make('textarea', {
id : 'textIn',
rows : 7,
cols : 68,
last : form
});
make('br', { last : d.body });
make('button', {
content : 'Decode',
click : decode,
type : 'button',
last : form
});
make('button', {
content : 'Encode',
click : encode,
type : 'button',
last : form
});
make('button', {
content : 'Clear',
type : 'clear',
last : form
});
make('br', { last : form });
make('label', {
content : 'Result:',
for : 'textOut',
last : form
});
var textOut = make('textarea', {
id : 'textOut',
cols : 68,
rows : 9,
readonly : 'readonly', // XML compatible version, just in case!
last : form
});

function encode(e) {
// no clue what 'encode' is in use
}

function decode(e) {
// no clue what 'encode' is in use
}

})(document);

But again, what it's actually trying to do is beyond me, as I literally cannot figure out what that's even supposed to be doing.

Had a couple Java classes with this instructor before; he's not worried at all, to my knowledge, about preparing students for actual programming jobs, just get assignments passed out as per his job description. There's little creativity insofar as he's concerned w/ programming, and he's unconcerned about using up-to-date Java/HTML/JavaScript in his lessons. Old guy, so I suspect he's just doing this more for paycheck.

Just has me thankful not studying web design under him. He's not good at teaching how to push oneself at this stuff.