Code not running synchronized in javascript

Question

I am kinda new in javascript programming. I've been working for years in classic languages like C++/JAVA/Python etc, and i cannot find a way to understand the way that the code is assigned to be ran in javascript.

I wanted to make a tetris game in javascript cause i have more design advantages.

A portion of code looks like this:

function output(){
    for(var i=0;i<14;i++)
    {
        for(var j=0;j<12;j++){
            if(game[i][j]==0)
                table.rows[i].cells[j].style.backgroundColor = "black";
            if(game[i][j]==1) // rosu line
                table.rows[i].cells[j].style.backgroundColor = "red";
            if(game[i][j]==2) // galben square
                table.rows[i].cells[j].style.backgroundColor = "yellow";
            if(game[i][j]==3) // verde lshape
                table.rows[i].cells[j].style.backgroundColor = "green";
            if(game[i][j]==4) // albastru jshape
                table.rows[i].cells[j].style.backgroundColor = "blue";
            if(game[i][j]==5) // cyan tee
                table.rows[i].cells[j].style.backgroundColor = "violet";
            if(game[i][j]==6) // violet zshape
                table.rows[i].cells[j].style.backgroundColor = "cyan";
            if(game[i][j]==7) // orange lshape
                table.rows[i].cells[j].style.backgroundColor = "orange";
        }
    }
}
var rand;
function create(){
    rand = Math.floor(Math.random() * 7);
    if(rand == 0)
        stack = line;
   if(rand == 1)
        stack = square;
    if(rand == 2)
        stack = lshape;
    if(rand == 3)
        stack = jshape;
    if(rand == 4)
        stack = tee;
    if(rand == 5)
        stack = zshape;
    if(rand == 6)
        stack = lshape;
    rand++;
    for(i=0;i<=3;i++)
        for(j=0;j<=3;j++)
            {
                if(game[i][j+5] != 0)
                    game_over = 1;
            }
    for(var i=0;i<4;i++)
    {
        for(var j=0;j<4;j++)
            {
                game[i][j+5] = stack[i][j]*rand;
            }
    }
    ci = 0;
    cj = 5;

    piesa_ok = 1;
}
function main(){
    while(good_piece)
    {
        create(); // it contains a statement that modifies the good_piece variable
        output(); // changes some lines from a table in html
    } 
    if(!good_piece)
        alert("game over!");
}

The following code displays the game over alert and then it displays the modified table i changed using the output function. What do i need to do in order to obtain a code that runs in the order of writing, line by line?

PS : main runs as an onclick event:

<button id="start_game" type="submit" style="text-align: center" onclick="main();">CLICK TO START THE GAME</button>

Answer 1

JavaScript running in browsers is single-threaded, so the code you wrote does execute exactly in the order you expect. However, page updates are not done synchronously, while alert calls are synchronous.

That means that when the browser executes your output method it updates the DOM internally and probably sets some sort of dirty flag telling the browser it needs to update the page, but it doesn't actually do it synchronously. It will wait until your JavaScript code is done (after your alert call), and execution goes back to the event loop built into the browser. Then it will actually update the page.

I think your confusion stems from the fact that the browser operates as an event loop: You just handle events, make updates to the DOM, and return execution to the browser as quick as possible to keep the user experience fluid. There is no main and you don't want to have an infinite loop in there.