How many JavaScript programs run for a single webpage in a browser?

Question

JavaScript programs consist of statements and function declarations. When the JavaScript program runs, the following two steps are performed:

1. The code is scanned for feature declarations and all features. the declaration is "executed" (by creating a function object) and a named link to this function is created (so that this function can be called from an operator)

2. statements are executed (evaluated) sequentially (as they appear in the code)

Because of this, it works just fine :

<script> foo(); function foo() { return; } </script> 

Although the "foo" function is called before it is declared, it works because the function declaration is evaluated before the statement.

However, this does not work :

 <script> foo(); </script> <script> function foo() { return; } </script> 

A ReferenceError will be thrown ("foo undefined"). This leads to the conclusion that each SCRIPT element inside the HTML code of the web page represents a separate JavaScript program, and each time the HTML parser encounters the SCRIPT element, it executes the program inside this element (and then, as soon as the program is executed, the parser goes to HTML code that follows the SCRIPT element).

Again, this works :

 <script> function foo() { return; } </script> <script> foo(); </script> 

As far as I understand, a global object (which serves as a variable object in the global execution context) always exists (and remains), therefore the first JavaScript program will create a function object and create a link for it, and then the second JavaScript program will use this link to call the function. Therefore, all JavaScript programs (within the same web page) "use" the same global object, and all changes made to the global object by one JavaScript program can be observed by all JavaScript programs that are subsequently launched.

Now pay attention to this ...

 <script> // assuming that foo is not defined foo(); alert(1); </script> 

In the above case, the alert call will not be executed , because the "foo ()" operator throws a ReferenceError object (which violates the entire JavaScript program) and, therefore, all subsequent statements are not executed.

However, in this case ...

 <script> // assuming that foo is not defined foo(); </script> <script> alert(1); </script> 

Now the warning call is in progress . The first JavaScript program throws a ReferenceError (and, as a result, is interrupted), but the second JavaScript program works fine. Of course, the browser will report an error (although it did execute subsequent JavaScript programs after the error occurred).

Now my conclusions:

• each SCRIPT element in the HTML code of a web page is a separate JavaScript program. These programs run as soon as the HTML parser encounters them.
• all JavaScript programs on the same web page "use" the same Global object. This Global Object exists permanently (from the moment a web page is loaded until it is destroyed). JavaScript programs can manipulate a Global object, and all changes made to a Global object by a single JavaScript program can be observed in all subsequent JavaScript programs.
• if one of the JavaScript programs fails (due to an error), this does not interfere with the execution of subsequent JavaScript programs.

Please check this post and tell me if I misunderstood something.

In addition, I did not find any resources explaining the behavior mentioned in this post, and I assume that browser makers must have published such resources somewhere, so if you know about them, please provide links to them.

Answer 1

Dmitry Soshnikov answered your question. Each <script> element is executed as a program, as defined by the ECMAScript specification. There is one global object that each program uses on one page. And indeed it is.

Answer 2

Function raising - a process that evaluates function statements over the rest of a function - is part of the IIRC ECMAScript standard (I can’t find the link right now, but I recall discussing EMCAScript that mentions this) script tag evaluation is part of the HTML standard. He does not indicate that they are “separate programs” in many words, but he says that script elements are evaluated in the order in which they appear in the document. Therefore, the functions in the script tags are not executed: the script has not yet been evaluated. This also explains why one stop of the script does not interrupt subsequent scripts: when the current script stops evaluating, the next starts.

Answer 3

These are separate programs, but they modify a common global object.

Answer 4

Another way to think about it is with a pseudo-local or global scope. Each SCRIPT declaration has a local scope for current methods / functions, as well as access to the current (previously declared) global scope. Whenever a method / function is defined in the SCRIPT block, it is then added to the global scope and made available by the SCRIPT blocks after it.

Also, here is another link from W3C in declaring / processing / modifying SCRIPT:

Dynamic modification of a document can be modeled as follows:

• All SCRIPT elements are evaluated in the order in which the document is loaded.
• All SCRIPT constructs within a given SCRIPT element that generate SGML CDATA are evaluated. Their combined generated text is a document instead of a SCRIPT element.
• Generated CDATA is reevaluated.

This is another good resource in script / evaluation / function declaration.