Javascript

The script tag attributes

JavaScript comes with the script tag, or rather the script tag enables JavaScript to be executed within HTML. You cannot have one without the other. With the script tag, JavaScript blends perfectly with HTML, but it has some peculiarities, which I’m going to discuss below.

<script>
//your JavaScript code here
</script>

The Script TAG

The script element can be alone, or it can contain some attributes. Nothing is mandatory, some are assumed by the browser when omitted and others require some explanation before use.

SRC=”whereismyscript.js”

Indicates the location of your script, this can be local (on your own server), or global (https://code.jquery.com/jquery-3.1.0.js)

Async or DEFER

Both are optional, and mutually exclusive. Meaning, you don’t have to use them, but if you do, you can only use one, not both.

The normal behavior when loading a HTML page is that when you encounter a script tag, you load the script, and then continue with the rest. The result is unwanted because your page appears to freeze until everything is loaded. Async and defer are both solutions to this problem.

If you want to load the page before your scripts execute, you can put your script tags at the bottom of the <body> tag. Async, enables you to start loading your scripts at the start of the page, but it puts them on another thread and thus allows the rest of your page to keep loading. Defer says that the script tag can only load when all the document’s content is parsed and displayed.

You don’t know when a script will finish loading when you use async. So only use async on indepent scripts. For example: If a script depends on another script to run before it can run itself, then it is vital that it does so. Async has a tendency of screwing up these scenarios.

Defer scripts load in order, hopefully, but this is not always the case, so use only one defer if possible. If you put your script at the bottom of the body tag, then you’re triggering the same behavior as the body tag.

Integrety

This attribute is a new one, and not totally compatible with all the major browsers yet. Use it when you need scripts from a third source (cdn’s). You get scripts from a third party for speed and bandwidth benefits, but what if an attacker takes over the third party and inserts some malicious code into the extarnal script?

The integrety tag will ensure that the file you recieve is the one you want. If it doesn’t match, then the browser will return a network error.

<script src=”https://code.jquery.com/jquery-3.1.0.js” integrity=”sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=” crossorigin=”anonymous”></script>

crossorigin

Another new one. If you need credentials for an external script, then you need the crossorigin attribute. It defaults to ‘anonymous’ and this is the normal behavior. Set it to ‘use-credentials’ when credentials are needed.

Deprecated attributes

type=”text/Javascript”

The type attribute is optional, or rather the browser will assume the standard value ‘text/javascript’ when you don’t write it (only in HTML5). Known as the MIME type, it indicates the content type of the scripting language you use inside the script tag.

Other variations are “text/ecmascript”, “application/javascript”, “application/ecmascript” and even “application/x-javascript”. In effect, the attribute is deprecated, but still used.

If you write something invalid in type, the browser will ignore the inside of the script tag. BUT!, You can still access the data inside it with JavaScript. This is used in some situations and some template libraries use this hack as well.

Language=”Javascript1.2″

Avoid this attribute, it’s deprecated and ignored by all browsers. Older browsers used the language attribute until the type attribute replaced it. The current browsers ignore this attribute, if you’re lucky.

CHARSET

Don’t use it. period.

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *