JavaScript Confusions

  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8415
  • Loc: USA

Post 3+ Months Ago

I finally received my JavaScript book, so this means that I will begin learning JavaScript. That also means that I would start posting my errors here and asking for explanations on things I don't understand. So, instead of creating a ton of topics dedicating to one question, I'm dedicating this thread to all of my questions. Hope that this doesn't get confusing :lol:

What is the difference between ECMAScripts and JavaScript? I used to think that ECMAScript was just another name for JavaScript, but the book I'm reading keeps referring to them as two different entities. It keeps talking about JavaScript 1.5 and ECMAScript v3... are they really a separate entity?
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

Javascript is basically an implementation, or slang, of ECMAScript.

Say you have English, then you have the slang version of English with little quirks that everyone in a neighborhood uses.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8415
  • Loc: USA

Post 3+ Months Ago

Oh, I see... so I'm actually learning a slang version of ECMAScript.

Another 'confusion'. It's about lambda functions this time. I remember that Joebert has once used the term (lambda function), and now that I know how one looks, I don't really know how to use it.

JAVASCRIPT Code: [ Select ]
<script language="javascript">
var square = function(x) { return x*x; }
 
document.write(square);
</script>
  1. <script language="javascript">
  2. var square = function(x) { return x*x; }
  3.  
  4. document.write(square);
  5. </script>

All that does is prints function(x) { return x*x; } on the screen. I'm confused with this thing. It probably doesn't matter this far into the book, I'm just stumped over the lambda functions and I don't see any use whatsoever in it right now.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

wikipedia has a pretty good explanation of it:

http://en.wikipedia.org/wiki/Lambda_calculus
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8415
  • Loc: USA

Post 3+ Months Ago

I'm sorry, but I just wanted to know how a lambda function could be useful in JavaScript. Thanks for that reply though.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8415
  • Loc: USA

Post 3+ Months Ago

I've got another question...
JAVASCRIPT Code: [ Select ]
<script language="javascript">
var text = 'This is some text for this program!';
 
var boxes = ['box1','box2'];
 
var number = Math.random();
 
document.write("<p>" + number + "</p>");
 
if(number > .5)
    var box = boxes[0];
else
    var box = boxes[1];
 
onload = function()
{
    var element = document.getElementById(box);
 
    element.innerHTML = text;
}
 
</script>
<div id="box1" style="width: 100%; height: 50px; background-color: #cecece; text-align: center; font-size: 50px; font-weight: 3px;">...</div>
<div id="box2" style="width: 100%; height: 50px; background-color: #000000; color: #ffffff; text-align: center; font-size: 50px; font-weight: 3px;">...</div>
  1. <script language="javascript">
  2. var text = 'This is some text for this program!';
  3.  
  4. var boxes = ['box1','box2'];
  5.  
  6. var number = Math.random();
  7.  
  8. document.write("<p>" + number + "</p>");
  9.  
  10. if(number > .5)
  11.     var box = boxes[0];
  12. else
  13.     var box = boxes[1];
  14.  
  15. onload = function()
  16. {
  17.     var element = document.getElementById(box);
  18.  
  19.     element.innerHTML = text;
  20. }
  21.  
  22. </script>
  23. <div id="box1" style="width: 100%; height: 50px; background-color: #cecece; text-align: center; font-size: 50px; font-weight: 3px;">...</div>
  24. <div id="box2" style="width: 100%; height: 50px; background-color: #000000; color: #ffffff; text-align: center; font-size: 50px; font-weight: 3px;">...</div>
I've got the following code. I created it myself with a little help of google. It works, but I just have one question.

Why does it have to have the following highlighted lines in it to work properly?
JAVASCRIPT Code: [ Select ]
onload = function()
{
    var element = document.getElementById(box);
 
    element.innerHTML = text;
}
  1. onload = function()
  2. {
  3.     var element = document.getElementById(box);
  4.  
  5.     element.innerHTML = text;
  6. }
Without those highlighted lines of javascript, the code doesn't write anything in those divs.....
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

well, I hope I get this right considering I'm still learning javascript myself. Whenever you call a function without the onload event, the function is running before the rest of the page loads. So basically with this function, without the onload event, javascript would look for "#box" before it had been loaded onto the page, javascript wouldn't find the box because it hasn't loaded yet, and therefor wouldn't run the function. the onload event tells javascript to wait until everything is loaded before running the function.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8415
  • Loc: USA

Post 3+ Months Ago

I think that you are right.. the following works without the onload function.
JAVASCRIPT Code: [ Select ]
<div id="box1" style="width: 100%; height: 50px; background-color: #cecece; text-align: center; font-size: 50px; font-weight: 3px;">...</div>
<div id="box2" style="width: 100%; height: 50px; background-color: #000000; color: #ffffff; text-align: center; font-size: 50px; font-weight: 3px;">...</div>
<script language="javascript">
var text = 'This is some text for this program!';
 
var boxes = ['box1','box2'];
 
var number = Math.random();
 
document.write("<p>" + number + "</p>");
 
if(number > .5)
    var box = boxes[0];
else
    var box = boxes[1];
 
var element = document.getElementById(box);
 
element.innerHTML = text;
 
</script>
  1. <div id="box1" style="width: 100%; height: 50px; background-color: #cecece; text-align: center; font-size: 50px; font-weight: 3px;">...</div>
  2. <div id="box2" style="width: 100%; height: 50px; background-color: #000000; color: #ffffff; text-align: center; font-size: 50px; font-weight: 3px;">...</div>
  3. <script language="javascript">
  4. var text = 'This is some text for this program!';
  5.  
  6. var boxes = ['box1','box2'];
  7.  
  8. var number = Math.random();
  9.  
  10. document.write("<p>" + number + "</p>");
  11.  
  12. if(number > .5)
  13.     var box = boxes[0];
  14. else
  15.     var box = boxes[1];
  16.  
  17. var element = document.getElementById(box);
  18.  
  19. element.innerHTML = text;
  20.  
  21. </script>

Thanks.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

Quote:
Oh, I see... so I'm actually learning a slang version of ECMAScript.


Yes, but the neighborhood in this case is the entire Internet and a handful of desktop applications. :)

--

As for lambda functions, or anonymous functions which is a much easier term to remember them by, it used to be that you would define them attached to a legacy event such as onclick, onmousemove, etc.

Code: [ Select ]
element.onclick = function() {}


However with people, libraries, etc moving to the likes of addEventListener/attachEvent you generally don't use that much anymore.

There is still however, a use for them in array sorting.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

And since I hadn't seen those last few posts until I replied,

Quote:
Why does it have to have the following highlighted lines in it to work properly?


Looks like you guys have that figured out, I just want to point something out.

When you define something in what seems like a "global" content [context], it's actually going into the "window" context. So in the case of that piece of code you have "onload = ..." is like putting down "window.onload = ..."
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8415
  • Loc: USA

Post 3+ Months Ago

Oh, I see... I once tried that using 'document.onload = ..." but that didn't work... I understand why now.

I have another question now.
JAVASCRIPT Code: [ Select ]
<div id="box1" style="width: 100%; height: 50px; background-color: #cecece; text-align: center; font-size: 50px; font-weight: 3px;">...</div>
<div id="box2" style="width: 100%; height: 50px; background-color: #000000; color: #ffffff; text-align: center; font-size: 50px; font-weight: 3px;">...</div>
<script language="javascript">
var text = 'This is some text for this program!';
 
var boxes = ['box1','box2'];
 
var element = document.getElementById(boxes[0]);
 
document.write(element.innerHTML);
 
if(element.innerHTML == '...')
    var element = document.getElementById(boxes[0]);
else
    var element = document.getElementById(boxes[1]);
 
element.innerHTML = text;
</script>
  1. <div id="box1" style="width: 100%; height: 50px; background-color: #cecece; text-align: center; font-size: 50px; font-weight: 3px;">...</div>
  2. <div id="box2" style="width: 100%; height: 50px; background-color: #000000; color: #ffffff; text-align: center; font-size: 50px; font-weight: 3px;">...</div>
  3. <script language="javascript">
  4. var text = 'This is some text for this program!';
  5.  
  6. var boxes = ['box1','box2'];
  7.  
  8. var element = document.getElementById(boxes[0]);
  9.  
  10. document.write(element.innerHTML);
  11.  
  12. if(element.innerHTML == '...')
  13.     var element = document.getElementById(boxes[0]);
  14. else
  15.     var element = document.getElementById(boxes[1]);
  16.  
  17. element.innerHTML = text;
  18. </script>

Before I tell you what the problem is, I want to explain what I want to do. I want to make it so that the text 'This is some text for this program!' would go between box1 and box2. If at first refresh it's at box1 then the second refresh it would be in box2 and then back to box1 and so on. Not random anymore.

What's happening with this code though is that the text stays at the top one and that's it... it doesn't move back and forth with those.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

In order to alternate between refreshes, you'll have to use cookies to keep track of what happened on the last page load.

Basically what you'll do is look for your cookie, if it doesn't exist or the value of your cookie is "box1", then you will set the value of the cookie to "box2" and work with box two. Otherwise you will set the cookie to "box1" and work with box one.

Has your book gone on to cookies yet ?
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8415
  • Loc: USA

Post 3+ Months Ago

Yeah... it mentioned cookies once or twice... I guess I'll have to read on before I can continue with this. Thanks for the reply. Don't know why I haven't thought about cookies.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8415
  • Loc: USA

Post 3+ Months Ago

I have the following piece of code:
JAVASCRIPT Code: [ Select ]
var own_prod = document.getElementById('own_' + product);
 
var owned = own_prod.innerHTML
 
own_prod.innerHTML += parseFloat(quantity - 0);
 
  1. var own_prod = document.getElementById('own_' + product);
  2.  
  3. var owned = own_prod.innerHTML
  4.  
  5. own_prod.innerHTML += parseFloat(quantity - 0);
  6.  
I'm just trying to add a number to a number. Instead of adding though, it concatenates.

What's annoying is that I have the following code:
JAVASCRIPT Code: [ Select ]
var own_prod = document.getElementById('own_' + product);
 
var owned = own_prod.innerHTML
 
own_prod.innerHTML -= quantity;
  1. var own_prod = document.getElementById('own_' + product);
  2.  
  3. var owned = own_prod.innerHTML
  4.  
  5. own_prod.innerHTML -= quantity;
And it works perfectly :(

Any help? Thanks :)
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8415
  • Loc: USA

Post 3+ Months Ago

The following fix my issue:
JAVASCRIPT Code: [ Select ]
own_prod.innerHTML = parseInt(own_prod.innerHTML) + parseInt(quantity);
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

While you're on the subject of parseInt, it's always nice to know you can pass parseInt a second radix argument.

The easiest way I can describe how it works is to use hexadecimal numbers. Say for instance you have the following hex string.

Code: [ Select ]
FF


Looks a lot like something you'ld use for a CSS color value, right ?

Anywho, if you pass 16 as the second argument to parseInt, it will tell you the real number that hex string translates to.

Code: [ Select ]
var N = parseInt('ff', 16); // N = 255
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8415
  • Loc: USA

Post 3+ Months Ago

Thanks for that explanation. I don't know if you used documentation for that or not, and if you didn't, you certainly know JavaScript very well.

I read that in my JavaScript book, so I had an idea about it. But anything that would help me learn JavaScript is appreciated. Thanks.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8415
  • Loc: USA

Post 3+ Months Ago

I have one question.

I have the following code:
JAVASCRIPT Code: [ Select ]
onload = function()
{
    newGame();
}
 
function newGame()
{
    var cash = document.getElementById('cash_owned');
   
    cash.innerHTML = '200';
}
  1. onload = function()
  2. {
  3.     newGame();
  4. }
  5.  
  6. function newGame()
  7. {
  8.     var cash = document.getElementById('cash_owned');
  9.    
  10.     cash.innerHTML = '200';
  11. }
But that doesn't do anything.

Any help? I tried moving the function newGame(); in front of that onload function, but it didn't work anyway.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

Does your browsers error console mention any javascript errors ?
  • mk27
  • Proficient
  • Proficient
  • User avatar
  • Posts: 334

Post 3+ Months Ago

joebert wrote:
Does your browsers error console mention any javascript errors ?


Yo, you definitely want to be using the "firebug" plugin for firefox when programming js.

Bogey wrote:
JAVASCRIPT Code: [ Select ]
onload = function()
 
  1. onload = function()
  2.  
But that doesn't do anything.


You probably have to use document.body.onload or window.onload, presuming your script is loaded in <head> which is the only way this will work. The way I would normally do this is to use the <body> tag:
Code: [ Select ]
<body onload="newGame()">


Although more often I just include an initialization script at the end of the page:
Code: [ Select ]
<script type="text/javascript">
[set some variables]
init(); /* from script loaded in the head */
</script>
</body>
  1. <script type="text/javascript">
  2. [set some variables]
  3. init(); /* from script loaded in the head */
  4. </script>
  5. </body>

This way, if you want assign some attributes (et al.) in your js script you can do that in the init() function, and be sure all your elements actually exist regardless of browser.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8415
  • Loc: USA

Post 3+ Months Ago

Neither of those works, and while the onload as the body attribute works, it is not valid XHTML. Maybe I shouldn't worry about that while learning JavaScript... I'm just trying to figure out how to make that work.

@Joebert: No. I'm probably going to get firebug.
  • mk27
  • Proficient
  • Proficient
  • User avatar
  • Posts: 334

Post 3+ Months Ago

Bogey wrote:
the onload as the body attribute works, it is not valid XHTML.


Ah. The second option will pass xhtml strict, and is in fact is the most robust/foolproof & useful. Of course, then you may p-off some people who are very anal about not including too much javascript in the page source. :lol: Which only matters if such people matter in your situation (I guess it all depends how much you want to contort yourself).

Post Information

  • Total Posts in this topic: 22 posts
  • Users browsing this forum: No registered users and 86 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.