CODEWITHSUNDEEP
javascripthtml
Gabo Ruiz
Gabo Ruiz

Reputation: 556

Can anyone explain to me this line of code of 140 characters?

Its extracted from a challenge on twitter where you have to make a game only with the 140 characters of a twitt.

In the snippet dont work correctly but if you save it into an .html extension file it will work. 

<body onload=d=Date.now,t=d(s=0)><p style="float:left" onclick="(e=d(++s)-t)<15e3?style.margin=e%300+' 0 0 '+e*7%300:alert(s)">X</p></body>

it has a weird syntax...

Upvotes: 2

Views: 289

Answers (4)

MinusFour
MinusFour

Reputation: 14423

Breaking it down:

<body onload=d=Date.now,t=d(s=0)>

This is just simply a body tag with an onload event handler. It's javascript code that will run once the element is loaded.

d=Date.now

Just saves the function into a window.d, which is easier to access through d.

t=d(s=0)

It's the same as doing t=Date.now(s=0). Date.now doesn't use any arguments, so it's the same as doing t=Date.now(). He's just using the function call arguments to initialize s to 0. So now, he has 3 variables:

d=Date.now;
t=Date.now(); //the timestamp when the body loads
s=0;

Then there's the p element:

<p style="float:left" onclick="(e=d(++s)-t)<15e3?style.margin=e%300+' 0 0 '+e*7%300:alert(s)">X</p>

Which has an onclick event handler:

(e=d(++s)-t)<15e3?style.margin=e%300+' 0 0 '+e*7%300:alert(s)

This is just a ternary expression (similar to if/else). Which you can break into 3 parts. The condition, the truth expression, the false expression.

The condition is:

(e=d(++s)-t)<15e3

15e3 is 15000. So you have:

(e=d(++s)-t) < 15000

The first part:

(e=d(++s)-t)

Is an assignment expression (which returns the assigned value). Doing d(++s) is the same as doing Date.now(++s). Remember that the function doesn't do anything with the arguments, he's just using the arguments in the function call to increase s by 1. Date.now is returning the timestamp right then (when you click on the p element).

It then substracts that timestamp with the previous timestamp (stored in t) and stores it in e. e is now the milliseconds between the click and since the body loaded.

So:

(e=d(++s)-t)<15e3

Is comparing the amount of miliseconds with 15000. If it's less than 15 seconds, the truth expression runs, if it's more than 15 second the false expression runs.

The truth expression is doing:

style.margin=e%300+' 0 0 '+e*7%300

It's a very simple way to move around the p element around. The boundaries are presumably 300, so e%300 will return a margin that's less than 300. The other margin is being multiplied by 7 so they are different.

style.margin works because event handlers get parsed in a very peculiar way. Basically, you can access any property of the element as if it was in scope.

The false expression:

alert(s);

Just prints the number of times you have clicked.

It didn't work on my chrome, until I added units:

<body onload=d=Date.now,t=d(s=0)><p style="float:left" onclick="(e=d(++s)-t)<15e3?style.margin=e%300+'px 0 0 '+e*7%300 + 'px':alert(s)">X</p></body>

It's a game to see how many times you can click X before 15 seconds.

Upvotes: 2

Miro
Miro

Reputation: 8650

Here's what i think the original function names were:

Basically, it check how much time is elapsed since the page load and adds margin if clicked before 15 seconds. I changed it to 5 seconds and added color red instead of margin.

<body onload="date = Date.now, time = date(clicks = 0)">
  <p onclick="(elapsed = date(++clicks)-time) < 5000 ? this.style.color='red' : alert('Clicks:'+clicks)"> Click me within 5 seconds.
  </p>
</body>

Upvotes: 1

Marian Udrea
Marian Udrea

Reputation: 111

onload function:

d is just a shortcut to the Date.now(), every time it's invoked it will produce a different result. the parameter is not related to the function in any way, Date.now() will produce the same result when called with any parameter, so

t=d(s=0)

records the time when the page was loaded, and also sets s (number of clicks) to zero.

onclick function:

this uses the shorthand format

boolean ? true case : false case

, so

(e=d(++s)-t)<15e3 ?

e is the difference between the page load time and the current time. Again the ++s parameter doesn't affect the function, but just increments the number of clicks recorded. If this difference is less than 15e3 ( aka 15000 in decimal miliseconds, or 15 seconds ) , it switches the top margin and left margin of the

element, using the "top right bottom left" margin format. You will notice that the 2 numbers in the middle stay at 0 and only the top and left are changed on click.

The random numbers for margins ( between 0 and 300 ) are given by taking the time difference and dividing it ( modulus ) by 300 for top margin, and by multiplying times 7 before doing the same math for left margin, so the numbers are not the same and the X doesn't move diagonally only.

Once 15 seconds have elapsed, the next subsequent click alerts the value of s.

Upvotes: 1

Ivan
Ivan

Reputation: 40618

The snippet you have here is HTML which contains some JS. Uglified scripts use ternary operator instead of the common if {} else {} statement. This version of the code might help understanding it:

<body onload=d=Date.now,t=d(s=0)>
    <p style="float:left" onclick="clickFunction()">X</p>
</body>

<script>

  var clickFunction = function() {

      if((e = d(++s) - t) < 15e3) {

          style.margin = e % 300 + ' 0 0 ' + e * 7 % 300;

      } else {

          alert(s);

      }

  }

</script>

Upvotes: 0

Related Questions