JavaScriptUsage of script tag

script tag

Top-level objects are shared between script tags.

<script>
    var a = 1;
</script>

<script>
    console.log(a); // 1
</script>

But the hoisting mechanism of global variable scope does not apply in these boundaries:

<script>
    foo();
</script>

<script>
    function foo() {<!-- -->
        console.log('foo');
    }
</script>

But the following two pieces of code are fine:

<script>
    foo();
    function foo() {<!-- -->
        console.log('foo');
    }
</script>

<script>
    function foo() {<!-- -->
        console.log('foo');
    }
</script>

<script>
    foo();
</script>

If an error occurs in the code in the script (whether it is inline code or external code), it will stop like a stand-alone JS program, but subsequent code in the script will still continue to run without being affected.

There is one difference between inline code and code in external files, that is, the string cannot appear in inline code. Once it appears, it is considered the end of the code block. So be very careful with code like the following:

<script>
    var code = "<script>alert('Hello World')</script>";
</script>

The above code seems to have no problem, but in the string constant will be treated as an end tag, thus causing an error.

Common workarounds are:

'</' + 'script>';

Using the escape character \ also works:

<script>
    function sayScript() {<!-- -->
        console.log('<\/script>'); // Use escape characters
    }
</script>

Another thing to note is that we parse the code in the external file based on the character set attribute of the code file, while the inline code uses the character set of the page file in which it is located.

The script tag of inline code does not have a charset attribute.

Attributes of the script tag

1. src: Optional. Specify an external script file.
2. async: Optional. Indicates an asynchronous loading script, which will be executed immediately after loading is completed. Only valid for external script files.
3. defer: Optional. Indicates that the script is loaded asynchronously and is executed after the document is completely parsed and displayed. Only valid for external script files.
4. crossorigin: Optional. Configure CORS (Cross-Origin Resource Sharing) settings for related requests. CORS is not used by default. crossorigin="anonymous" indicates that the credentials flag will not be set for file requests. crossorigin="use-credentials" indicates that file requests will have the credentials flag set, meaning that outbound requests will include credentials.
5. integrity: Optional. Allows comparison of received resources with specified cryptographic signatures to verify subresource integrity (SRI). If the signature of the received resource does not match the signature specified by this attribute, the page will report an error and the script will not be executed. This attribute can be used to ensure that a Content Delivery Network (CDN) does not serve malicious content.

Usage of script tag

The tags Contains other JS code. If both are provided, the browser will only download and execute the external script file, ignoring inline code.

Much like the element, the