11 and 12: Explanation Required


#1

Hi,

Could someone explain what the code (A) below, everything after switch, means, I have completed the tasks but just want to know what that line of code actually means.

Also, why is that you can't for example use (C), instead of (B)?

(A)
switch(parseInt(key.which,10)) {

(B)
case 39:
	    $('img').animate({left: "+=10px"}, "fast");
	    break;

(C)
case 39:
	    $('img').animate({right: "-=10px"}, "fast");
	    break;


#2

Hi Satty10,

This post should explain your first question:

MDN: parseInt()

The function takes a string argument and displays it as an integer of the base indicated by the radix, as in base 10, our common decimal number system.

key.which is a variable of the keyboard event object. It may be a string, or it may be number, but parseInt() ensures it is a number at this point.
- Via @mtf

And about using right, according to the jQuery docs for animate(), you should be able to. I expect it's just something with Codecademy that doesn't let you use right or bottom ¯\_(ツ)_/¯


#3

If the viewport is seen as Q IV in a coordinate plane. the origin is at top left. With x along the horizontal axis, less than zero is out of the viewport on the left, greater than window width is out of the viewport on the right. If we start moving the reference point (origin) around, everything gets pretty confusing in short order.

In this picture, with y along the vertical axis, less than zero is out of the viewport on the top, and greater than window height is out of the viewport on the bottom. y is in absolute terms (positive) despite being in a negative quadrant (Q IV).

The initial CSS has position set as relative which defaults to top left. Consequently this is the starting value, and animate shifts the object relative to this point, This is the constraining factor, and why we must use left and top. The object does not have any right or bottom reference axies.


#4

@satty10,
If you read
https://api.jquery.com/keydown/

and
http://api.jquery.com/category/events/event-object/
event.which
For key or mouse events, this property indicates the specific key or button that was pressed

and
http://api.jquery.com/event.which/
you will know that the which property
is a number Value
you will see that a parseInt() is not really needed.....
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt


#5

Trial sample...

$(document).ready(function() {
    var $p = $('<p>');
    var $img = $('<img>')
        .attr('src',"https://s3.amazonaws.com/codecademy-images/discuss_cc-logo.png")
        .css({'right': "0",'top':"30"});
    $img.appendTo($p);
    $p.appendTo('body');
});

Paste this into lesson 9 script.js tab. You can save it, and pass without disruption. It illustrates right and top Notice that the right property is ignored, while the top property is applied?


#6

The author included it, and ever since we've had to explain it. Given that this is not a good example to spring that function on a learner, it's been all the more awkward to justify its usage. All we can do is explain what it does, and why we would use it. In this case we are pretending that the value of which might not be an integer, even while we know that it is an ordinal, and therefore an integer.


#7

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.