JavaScript Confusions

  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post February 1st, 2010, 5:14 pm

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?
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post February 1st, 2010, 5:14 pm

  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post February 1st, 2010, 6:04 pm

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.
Strong with this one, the sudo is.
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post February 1st, 2010, 6:11 pm

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.
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post February 1st, 2010, 6:32 pm

wikipedia has a pretty good explanation of it:

http://en.wikipedia.org/wiki/Lambda_calculus
Use your words like arrows to shoot toward your goal.
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post February 2nd, 2010, 3:45 pm

I'm sorry, but I just wanted to know how a lambda function could be useful in JavaScript. Thanks for that reply though.
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post February 2nd, 2010, 4:19 pm

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.....
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post February 2nd, 2010, 4:28 pm

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.
Use your words like arrows to shoot toward your goal.
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post February 2nd, 2010, 4:41 pm

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.
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post February 2nd, 2010, 4:53 pm

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.
Strong with this one, the sudo is.
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post February 2nd, 2010, 4:59 pm

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 = ..."
Strong with this one, the sudo is.
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post February 2nd, 2010, 5:06 pm

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.
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post February 2nd, 2010, 5:45 pm

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 ?
Strong with this one, the sudo is.
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post February 2nd, 2010, 5:47 pm

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.
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post February 2nd, 2010, 9:56 pm

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 :)
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post February 2nd, 2010, 10:47 pm

The following fix my issue:
JAVASCRIPT Code: [ Select ]
own_prod.innerHTML = parseInt(own_prod.innerHTML) + parseInt(quantity);
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post February 2nd, 2010, 10:47 pm

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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.