10 Replies - 648 Views - Last Post: 07 August 2014 - 11:34 AM

#1 codePenguin  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 06-August 14

Javascript .shift purpose

Posted 07 August 2014 - 05:18 AM

var sprite = document.querySelector('.sprite'),
              key={left:false, right:false},
              trans=0,
              property=getTransformProperty(sprite);
              
              function getTransformProperty(element){
              var properties=['transform',
                               'webkit-transform',
                                '-ms-transform',]}]
              var p;
              while (p=properties.shift()){
              if(typed element.style[p]!='undefined'){
              return p;
           }
         }
             return false;}
         function translate() {
		sprite.style[property] = 'translateX(' + trans + 'px)';
	}

	function walk(e) {
		var keyCode = e.keyCode;
		if (keyCode === 39) {
			key.right = true;
		} else if (keyCode === 37) {
			key.left = true;
		}
    if (key.right === true) {
			trans += 10;
			translate();
			sprite.classList.remove('left');
			sprite.classList.add('right');
			sprite.classList.add('walk-right');
		} else if (key.left === true) {
			trans -= 10;
			translate();
			sprite.classList.remove('right');
			sprite.classList.add('left');
			sprite.classList.add('walk-left');
		}
	}

	function stop(e) {
		var keyCode = e.keyCode;
		if (keyCode === 39) {
			key.right = false;
		} else if (keyCode === 37) {
			key.left = false;
		}
		if (key.right === false) {
			sprite.classList.remove('walk-right');
		} if (key.left === false) {
			sprite.classList.remove('walk-left');
		}
	}

	document.addEventListener('keydown', walk, false);
	document.addEventListener('keyup', stop, false);

})();


This question is to do with the variable p and the use of the properties.shift() as I understand it the .shift principle is used to remove the first item of and array and then return that item, so my question is, what is the .shifts purpose here and is there an alternative that is better to use? I am new to JS and would appreciate any help or light in this regard - thanks in advance :)/>

This post has been edited by andrewsw: 07 August 2014 - 05:26 AM
Reason for edit:: Added code tags


Is This A Good Question/Topic? 0
  • +

Replies To: Javascript .shift purpose

#2 BetaWar  Icon User is online

  • #include "soul.h"
  • member icon

Reputation: 1154
  • View blog
  • Posts: 7,166
  • Joined: 07-September 06

Re: Javascript .shift purpose

Posted 07 August 2014 - 07:48 AM

Well, look at it in the context it is being used in:
while (p=properties.shift()){


What would you expect it to be doing?
Was This Post Helpful? 0
  • +
  • -

#3 codePenguin  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 06-August 14

Re: Javascript .shift purpose

Posted 07 August 2014 - 08:01 AM

Ok, So am I right in thinking that the properties variable above is the the 'array' the .shift is there as a precaution that if incompatible or there's an issue of some sort it will return as undefined? I am trying to understand the code from all angels so that it really sinks in and I can get to grips with JS, is there any advice to get a better understanding? or is it all down to practice? ~Thanks soo much for all you help it is much appreciated

This post has been edited by Dormilich: 07 August 2014 - 08:46 AM
Reason for edit:: removed previous quote

Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3515
  • View blog
  • Posts: 11,999
  • Joined: 12-December 12

Re: Javascript .shift purpose

Posted 07 August 2014 - 08:18 AM

Quote

is there any advice to get a better understanding? or is it all down to practice?

Reading a book or taking tutorials will be far more productive than attempting to interpret (and guess) what someone else's (clumsy) code is doing.
Was This Post Helpful? 1
  • +
  • -

#5 BetaWar  Icon User is online

  • #include "soul.h"
  • member icon

Reputation: 1154
  • View blog
  • Posts: 7,166
  • Joined: 07-September 06

Re: Javascript .shift purpose

Posted 07 August 2014 - 09:03 AM

So, on line 7, they set the properties variable to an array which would make checking it it was an array right afterwards redundant and unnecessary.

Also, notice the while on line 11, that's not just checking if p is undefined or not, but also looping. If you look at what shift does, you see that it returns either the 0th element (which is also removed), or if there are no elements then it returns undefined.

Now, I would agree with @andrewsw, reading some basic tutorials will get you up to speed a lot faster than trying to guess at what code does. Javascript is one of those languages that can be cryptic at times, so learning the fundamentals is strongly advised.
Was This Post Helpful? 1
  • +
  • -

#6 codePenguin  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 06-August 14

Re: Javascript .shift purpose

Posted 07 August 2014 - 09:31 AM

This is exactly my problem, I have looked at tutorials trying to get my head around the basics and they make sense, the trouble is with the basic language fundamentals the mechanics are there, so for example, a function takes parameters that make it perform something, but there is no real set points as to what that could be, in context looking at CSS for example, to set the background of anything it will always take the condition of the identifier and then either a background or background-image parameter followed by the link to the image or color,this is set there is no real variation unless you set it in the HTML as an image tag within the tags. The JS problem I am having is the layout is structured enough, however, anything seems to go with regards to its contents, for example, the above code is supposed to run a walk cycle on a sprite on the pressing of the left and right keys, it does this, however, it is clear to me now, with the help of this forums experts, that the code is clumsy and unnecessarily cryptic which makes it even more difficult to decipher and understand making it difficult to get my head around it? so the short answer would be is there any books you guys can recommend to not only crack the best practices, but to give a true understanding on how this language works??

Thanks guys you have been great in helping a girl out
Was This Post Helpful? 0
  • +
  • -

#7 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3515
  • View blog
  • Posts: 11,999
  • Joined: 12-December 12

Re: Javascript .shift purpose

Posted 07 August 2014 - 09:51 AM

Quote

is there any books you guys can recommend to not only crack the best practices, but to give a true understanding on how this language works??


Javascript: The Definitive Guide, David Flanagan
Was This Post Helpful? 1
  • +
  • -

#8 codePenguin  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 06-August 14

Re: Javascript .shift purpose

Posted 07 August 2014 - 09:55 AM

Thanks andrewsw it is much appreciated and im grateful for the help, I shall purchase it right now :)
Was This Post Helpful? 0
  • +
  • -

#9 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 399
  • View blog
  • Posts: 1,455
  • Joined: 15-January 14

Re: Javascript .shift purpose

Posted 07 August 2014 - 09:55 AM

I would suggest also adding to or changing the code to have the code tell you what it's doing. If you're not familiar with your browser's developer console, that's the first place to start. There are links in my signature about the various consoles. Use your console to help with debugging and exploring the code. Note that you can also type code directly into the console and execute it, or you can insert breakpoints so that the code execution will stop at that point and you can look at things like the values of variables at that point before telling it to continue.

For that while loop, add some logging statements to show you what's going on. Using console.log will send a message or variable to the console so that you can see it. First, that if statement says "typed" in it, that should be "typeof" instead, it's checking the type of the variable.

console.log('element.style:');
console.log(element.style);
while (p=properties.shift()){
  console.log('p is ' + p);
  console.log('properties is now:');
  console.log(properties);

  if(typeof element.style[p]!='undefined'){
    console.log('p was found in element.style, returning ' + p);
    return p;
  }
  else {
    console.log('p was not found in element.style');
  }
}

Was This Post Helpful? 1
  • +
  • -

#10 codePenguin  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 06-August 14

Re: Javascript .shift purpose

Posted 07 August 2014 - 10:08 AM

Thats perfect because it will give me the working practice on what works and what doesn't within JS giving me concrete formulas and content that I can both understand and use in varied situations, couple that with a good book like Javascript the definitive guide I should be onto a winner, the only other question I have got though is with the layout of the script it will follow a specific framework, so it will be structured a certain way, however, how do you know what to write where, when the JS content of those structures is so varied? take the above code for example, the original example used functions and a do while loop to perform a task yet above is a console log selection of commands that make a lot more sense and seem cleaner to me than writing code that nullifies the previous instructions, so how do you know for sure what to write where as it seems to me that with JS there are several different ways of writing something that does the same thing, however, there is no common denominator amongst them, the output is the same but what is behind it is completely different so how do you tell the difference as a developer of what to use when?
Was This Post Helpful? 0
  • +
  • -

#11 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 399
  • View blog
  • Posts: 1,455
  • Joined: 15-January 14

Re: Javascript .shift purpose

Posted 07 August 2014 - 11:34 AM

You're just talking about general algorithm design, which is something you learn as you get experience (there are several books about algorithm design also, probably some specific to Javascript). But yeah, a computer science teacher can give 10 students an assignment and receive 10 different programs back which all work. Much of it has to do with just what makes sense to the programmer, most people go with the first thing they think of. Whoever wrote the code above was thinking about a FIFO stack, apparently. It isn't necessary to use shift there, it would probably be more efficient to use a regular for loop to just loop over the array and test each item, there's no reason to remove the items from the array necessarily.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1