What does a line beginning with a dot mean?

Question

I was reading through the Crafty tutorial and came across a code snippet that I can't find documentation for. It is so hard to search for punctuation.

The lines in question, 11 and 12, follow the Crafty.e line and begin with .text and .css. What object do those properties belong to?

//the loading screen that will display while our assets load
Crafty.scene("loading", function () {
    //load takes an array of assets and a callback when complete
    Crafty.load(["sprite.png"], function () {
        Crafty.scene("main"); //when everything is loaded, run the main scene
    });

    //black background with some loading text
    Crafty.background("#000");
    Crafty.e("2D, DOM, Text").attr({ w: 100, h: 20, x: 150, y: 120 })
            .text("Loading")
            .css({ "text-align": "center" });
});

//automatically play the loading scene
Crafty.scene("loading");

Where would this be in the specification?

Answer 1

A line starting with a . is simply a function/property being called on the previous function/line's object.

---

In your specific case,

Crafty.e("2D, DOM, Text").attr({ w: 100, h: 20, x: 150, y: 120 })
      .text("Loading")
      .css({ "text-align": "center" });

.text("Loading") is just a function call on the result of Crafty.e(...).

Similarly, .css({ "text-align": "center" }) is simply a function call on the result of the previous line's .text("Loading").

Because it's in the same line, the .attr(...) call isn't outwardly visible, but it is the exact same things as the others in their own lines.

---

In expanded terms, the sample above is the same as doing this:

var eResult = Crafty.e("2D, DOM, Text");
var attrResult = eResult.attr({ w: 100, h: 20, x: 150, y: 120 });
var textResult = attrResult.text("Loading");
var cssResult = textResult.css({ "text-align": "center" });

---

As others have stated, this is simply a method of chaining calls to the same object - however, be aware(!) that this isn't always possible in all programming languages. jQuery and many other JavaScript framework/libraries have taken this approach to make development easier/smoother, therefore, it is widespread in JavaScript development.

In JavaScript specifically, the real statement termination is a ; (semicolon). What this means is that a single statement can span several lines.

Answer 2

The author of this code is probably just trying to make it more readable. The . at the beginning of the line simply continues the previous line.

So this...

Crafty.e("2D, DOM, Text").attr({ w: 100, h: 20, x: 150, y: 120 })
            .text("Loading")
            .css({ "text-align": "center" });

...is the same as having it all on one line:

Crafty.e("2D, DOM, Text").attr({ w: 100, h: 20, x: 150, y: 120 }).text("Loading").css({ "text-align": "center" });

The semi-colon at the end of the line terminates the statement.

However, by writing it the way the author did, it is easier to see that you're taking the results from the attr function and feeding it into the text function, and those results finally into the css function. Well...easier for me to read anyway. Readability can be very subjective.

This is called function chaining, and is described with some examples in this blog post.