How do I read this javascript diagram?

Question

I'm currently reading Javascript: The Good Parts and I'm having trouble understanding their "grammar" diagrams.

The first one is Whitespace

I'm not quite sure how to read it, perhaps some code will help me understand?

Thanks for the help in advanced guys.

Answer 1

Start at the left-most || and continue right. The first bar down (Immediately next to your start point) cannot be followed because the curve does not originate from the left (The direction you are traveling.) If you look at where it comes from, it should be easy to tell it represents a while loop:

while (!EOF) {} // While there's still text to parse

The second line can be followed because the curve originates from the left (Following your current directory.) This line represents this if-else statement:

if (char == '/') {}       // Forward slash
else if (char == '\n') {} // Line end
else if (char == '\t') {} // Tab
else if (char == ' ') {}  // Space

Space, tab and end line both both end the function and either return or continue immediately. However, if the character is a Forward Slash, it needs to check whether it's single line (//) or multiline (/* */):

*char++;                 // Move to next character
if (char == '*') {}      // Multi line
else if (char == '/') {} // Single line

If it's a single line it reads until the end of the line and continues. If it is a multiline it reads in a similar manner until it finds '*' followed by '/' and then continues.