Javascript help (noob sry) - Page 2

asher001 · 31st August 2012, 11:00 PM

I hate to be the one to say this, but the advice so far hasn't been good.

JavaScript doesn't have associative arrays. If you want to do associative, use objects.

Additionally, putting stuff like onclick in the HTML is terrible practice. It was commonplace 10 years ago but really isn't the way to do things. The same goes for putting style attributes in your tags too btw.

Here's an example of the way you should be doing it.

HTML:

Code:

<!DOCTYPE html>
<meta charset="utf-8">
<title>Currency Converter</title>

	<section>
		<form>
			<label for="inputVal">AU$</label>
			<input id="inputVal" type="text">
			<br>
			
			<label for="foreign">To:</label>
			<select id="foreign">
				<option>US
				<option>UK
				<option>HK
				<option>SP
				<option>JP
				<option>NZ
				<option>AU
			</select>
			<p>
				Result: <span id="result"></span>
			</p>
		</form>
	</section>

<script src="convert.js"></script>

convert.js

Code:

(function x() {

	var exchange = {
		US: 1.054,
		UK: 0.672,
		HK: 8.170,
		SP: 1.310,
		JP: 82.48,
		NZ: 1.300,
		AU: 1.00
	};

	document.getElementById('inputVal').addEventListener('keyup', convert);
	document.getElementById('foreign').addEventListener('change', convert);

	function convert() {
		var input = +document.getElementById('inputVal').value;
		if (!isNaN(input)) {
			document.getElementById('result').innerHTML = (input * exchange[document.getElementById('foreign').value]).toFixed(2);
		}
	}

}());

Just in case you're wondering about the JS... I used two event handlers instead of a single one on the form because I need 'change' to detect the select menu but change only works on a text input after blur, so I used keyup for that.

The convert function checks that a number has been input, then multiplies it by the required exchange rate before writing the output to the results span.

I've wrapped the lot in a function just so that the global object isn't getting hammered with stuff, but this of course is optional.

Leigh M · 31st August 2012, 11:06 PM

Thanks for contributing, great stuff to think about and look over. My knowledge of JS is basically none, would like to know more.

Just a quick question, what program do you use to write up your code?

asher001 · 31st August 2012, 11:18 PM

Quote:

Originally Posted by Leigh M

Thanks for contributing, great stuff to think about and look over. My knowledge of JS is basically none, would like to know more.

Just a quick question, what program do you use to write up your code?

I use Sublime Text 2. It is AMAZING.

JS is a cool language, lots of crap in it, but plenty of really good parts too. The biggest error people make with JS is approaching it like it is just another C-family language because it shares the syntax. It is not another C-family language, it is really different.

Leigh M · 31st August 2012, 11:20 PM

Quote:

Originally Posted by asher001

I use Sublime Text 2. It is AMAZING.

JS is a cool language, lots of crap in it, but plenty of really good parts too. The biggest error people make with JS is approaching it like it is just another C-family language because it shares the syntax. It is not another C-family language, it is really different.

Ah kk will give it a try, I only really know basic html, trying to expand a little

cyclobs · 1st September 2012, 1:09 AM

Quote:

Originally Posted by asher001

stuff

Good to hear!

My JS is pretty basic, but i disagree with you about the styling in tags and events stuff.

But really it's down to personal preference on how you do things.

asher001 · 1st September 2012, 2:36 PM

Quote:

Originally Posted by cyclobs

Good to hear!

My JS is pretty basic, but i disagree with you about the styling in tags and events stuff.

But really it's down to personal preference on how you do things.

Sure, both work, but there are best practices. Ideally you want your site structure, layout, and code separate; it makes it much easier to make changes and is far more maintainable.

Leigh M · 5th September 2012, 12:47 AM

Also for those that know about making web pages etc, how you think this is going so far, put it together today with just the simple html and css that I know, any suggestions or help on what I'm doing wrong/what I could do instead etc.

Still messing around with it and content just there for filler at the moment.

http://shabutie.com/site/index.html
(best viewed in google chrome or firefox)

asher001 · 5th September 2012, 6:07 AM

Quote:

Originally Posted by Leigh M

Also for those that know about making web pages etc, how you think this is going so far, put it together today with just the simple html and css that I know, any suggestions or help on what I'm doing wrong/what I could do instead etc.

Still messing around with it and content just there for filler at the moment.

http://shabutie.com/site/index.html
(best viewed in google chrome or firefox)

Leigh, you'll want to use a validator to check that your HTML is ok, it will point out the errors which can cause problems. http://validator.w3.org

Leigh M · 5th September 2012, 10:52 PM

sweet thanks, fixed up a couple of my no px in css but not sure what those errors are from the > stuff

Robstar · 6th September 2012, 10:32 AM

You need to end your break tags like this:
<br />
Also you have <h4> inside <p> where it should be instead of <p>

asher001 · 6th September 2012, 8:02 PM

Quote:

Originally Posted by Robstar

You need to end your break tags like this:
<br />

Not in HTML5. Trailing slashes for tags that are for void elements are crap. They are useless, I'm glad they are no longer needed.

Robstar · 7th September 2012, 9:27 AM

Quote:

Originally Posted by asher001

Not in HTML5. Trailing slashes for tags that are for void elements are crap. They are useless, I'm glad they are no longer needed.

Agreed but he's using XHTML Transitional

31st August 2012, 11:00 PM	#16
asher001 Member Join Date: Nov 2010 Posts: 292	I hate to be the one to say this, but the advice so far hasn't been good. JavaScript doesn't have associative arrays. If you want to do associative, use objects. Additionally, putting stuff like onclick in the HTML is terrible practice. It was commonplace 10 years ago but really isn't the way to do things. The same goes for putting style attributes in your tags too btw. Here's an example of the way you should be doing it. HTML: Code: <!DOCTYPE html> <meta charset="utf-8"> <title>Currency Converter</title> <section> <form> <label for="inputVal">AU$</label> <input id="inputVal" type="text"> <br> <label for="foreign">To:</label> <select id="foreign"> <option>US <option>UK <option>HK <option>SP <option>JP <option>NZ <option>AU </select> <p> Result: <span id="result"></span> </p> </form> </section> <script src="convert.js"></script> convert.js Code: (function x() { var exchange = { US: 1.054, UK: 0.672, HK: 8.170, SP: 1.310, JP: 82.48, NZ: 1.300, AU: 1.00 }; document.getElementById('inputVal').addEventListener('keyup', convert); document.getElementById('foreign').addEventListener('change', convert); function convert() { var input = +document.getElementById('inputVal').value; if (!isNaN(input)) { document.getElementById('result').innerHTML = (input * exchange[document.getElementById('foreign').value]).toFixed(2); } } }()); Just in case you're wondering about the JS... I used two event handlers instead of a single one on the form because I need 'change' to detect the select menu but change only works on a text input after blur, so I used keyup for that. The convert function checks that a number has been input, then multiplies it by the required exchange rate before writing the output to the results span. I've wrapped the lot in a function just so that the global object isn't getting hammered with stuff, but this of course is optional. Last edited by asher001; 31st August 2012 at 11:07 PM.

6th September 2012, 10:32 AM	#25
Robstar Member Join Date: Dec 2004 Location: Sydney Posts: 926	You need to end your break tags like this: <br /> Also you have <h4> inside <p> where it should be instead of <p>