Execute function when the page loads the Javascript redirection

JavaScript: Integration in HTML with the element

Here is a JavaScript documentation by molily. At the moment it is still patchy, but it is gradually growing. Comments and feedback are welcome by email.

To the table of contents

Preliminary remark

There are many ways to embed JavaScript in HTML documents. Only a few common ones are presented and recommended in this introduction. This chapter assumes that HTML and JavaScript are separated as far as possible and that JavaScripts are added independently. The background to this approach can be found in the chapter Sensible Use of JavaScript.

The script element

The HTML element is used to integrate JavaScript code into an HTML document. This may appear in the head (element) as well as in the body (element) of an HTML document. It can either contain JavaScript code directly, as in this example:

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Dokument mit integriertem JavaScript</title> </head> <body> <h1>Dokument mit integriertem JavaScript</h1> <script> window.alert ("Hello world!"); </script> </body> </html>

Or it can be blank and point to an external file with JavaScript code. You should prefer this mode of use and store your JavaScripts in separate files if possible.

To do this, write your JavaScript code in a separate file and save it with the file extension. At the end of the document, note an element that informs the browser of the external JavaScript file. To do this, note the address (URL) under which the script can be called up in the attribute.

Document with external JavaScript

Document with external JavaScript

You can now write down JavaScript statements, functions, objects, and so on in the file. As a test, write the following instruction in the JavaScript file:

window.alert ('Hello world!');

You can also integrate several scripts with this method. To do this, place several elements one below the other.

Note that these integrated files must contain JavaScript code directly. HTML code must not appear in it - it is of course still allowed in JavaScript strings. In particular, it is not necessary to repackage the JavaScript code in the separate file in an element. This would result in the browser not executing the JavaScript code correctly.

You can store your script files - just like style sheets, graphics, etc. - in subdirectories and even on other web servers. As long as the specified URL is correct, a JavaScript-enabled browser will download and execute it when viewing the document.

Execution of script elements

With the element you can embed scripts in the document header as well as in the document body. The execution of the script code follows certain rules, which we will consider below.

As soon as the browser receives the HTML document from the web server, it begins to process the source text and transfer it to an internal memory structure, the Document Object Model (DOM). The browser module responsible for this is called itself and the processing process.

As soon as the parser encounters an element, the parsing of the HTML document is stopped and the JavaScript code within the element is executed. This also applies to external JavaScript files: the HTML parser stops, loads the external JavaScript file from the web server, executes the JavaScript code and only then continues processing the rest of the HTML source text.

This procedure of executing the JavaScript code directly when reading the HTML document has various consequences.

Scripts have access to the objects of previously integrated scripts

The JavaScript code in elements or the external script code is executed in the order in which the elements are noted in the HTML source text. If you have different scripts that build on each other, you have to integrate them one after the other.

<script src="grundlagenscript.js"></script> <script src="aufbauscript.js"></script> <script> // Anwendung der Scripte helferfunktion(); </script>

The example integrates three scripts, the first two as external files, the third directly in the HTML code. The browser executes the scripts in the order in which they are integrated. Therefore, later scripts can use the objects, functions and variables that were defined by the previously integrated scripts.

In the example it is first integrated, downloaded and executed. The subsequent script from the file can use the functions noted in it. Finally, the third script can use a function that was defined in.

External scripts delay the structure of the document

That the browser does not have the integrated scripts first to, but already while of reading in the HTML code has advantages and disadvantages.

On the one hand, scripts are executed as quickly as possible and it is guaranteed that an external script is executed before a subsequent internal script is processed.

On the other hand, page loading slows down when large external script files are downloaded from the web server.

It is therefore recommended to put all of the elements in the necessary order at the end of the document to place. This means that the structure of the document is not interrupted by downloading and executing JavaScript.

Scripts can add to the document while it is being loaded

With this method, a script can directly influence the document while it is being loaded and set the course. accepts HTML code as a string. It inserts the HTML code into the document where the associated element is.

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Zugriff auf das DOM während dem Parsen des Dokuments</title> <script> document.write (""); </script> </head> <body> <script> document.write ("

" + "Reload the page using JavaScript <\ / a> <\ / p>"); </script> </body> </html>

The example contains two scripts with calls. These write HTML elements into the document, once a reference to a stylesheet and once a paragraph of text with a JavaScript link.

rarely makes sense with Unobtrusive JavaScript. There is content that should only be visible when JavaScript is available, as it is based on JavaScript functionality. In the example this is a link that reloads the page using JavaScript. However, you should insert such content dynamically into the document without. We will get to know the necessary techniques for this.

has two possible use cases, one of which we got to know: The addition of a document while the browser reads the HTML code. But when to When the HTML code is read in, the method has a completely different effect: it overwrites the entire content of the document. It is therefore not suitable for making targeted changes to the existing document via JavaScript.

A script has access to the elements in front of the associated element

The most common task of JavaScripts is to access the document via the DOM interface. This makes the elements and their text content accessible as node objects.

As already mentioned, a script is executed while the HTML document is being read. At this point in time it does not yet have access to the entire DOM element tree. Instead, it can only access a sub-tree, namely the elements that in front the associated element and have therefore already been read.

<head> <title> Access to the DOM while the document is being parsed <body> <h1 id = "heading"> Example heading

The example contains three scripts that each attempt to access the document title (element), the document body (element) and a heading (element). Depending on where the script and the addressed element are located, access to the element is possible or not.

Access only works if the element you are looking for precedes the respective script and has already been read. The element does not have to be completed yet. In the example, a script in the element can already access the element that is open but not yet closed. The script also has access to the previous sibling elements (in the example the element), but not to the following.

Perhaps you now understand why we put external scripts at the end of the document: This gives you access to the entire document.

Load scripts in the background

As described, scripts are executed when the document is read. The order of execution is the same as the order of the scripts in the document. The big disadvantage is that downloading and executing the scripts slows down the build-up of the page.

In order to improve the loading speed, we got to know a trick: scripts are swapped out and the elements are moved to the end of the document. This will not slow down the processing of the rest of the document content.

However, this trick has the disadvantage that the browser only notices the scripts when the HTML document has been downloaded and read in almost completely. The browser only starts downloading and executing the scripts late. This delay can lead to undesirable effects.

With unobtrusive JavaScript it is common for scripts to change the document and add functions. If this happens a few seconds after the page is displayed for the first time, the page suddenly changes while the user is already reading the page.

HTML therefore makes it possible to make a script known to the browser as early as possible, but only to execute it later. This allows the browser to download the script in the background. The reading of the document is not delayed.

The downloading of the script and the reading in of the document thus run side by side at the same time. The script does not block the processing of the document. The browser does not wait for the script to download and run.

There are two additional HTML attributes that you can give to the element: and.

: Run the script as soon as the document is loaded

is an attribute with no value. You simply note in the attribute list in the start tag:

If the attribute is set, the browser will download the script as soon as possible. In the meantime, the reading and the structure of the document continues. The browser only executes the script as soon as the document has finished loading.

The English word defer means "to delay". The browser delays the execution of the script until the HTML code has been successfully transferred and read.

This means that the script has guaranteed access to the entire DOM element tree. In this respect, it behaves like a script that is included at the end of the document. The difference is that the browser can start downloading early. This can accelerate the page loading enormously.

The position of such a script in the document has no influence on when it is executed. The point in time is guaranteed, namely after the document has been read.

So that the browser downloads the script as early as possible in the background, you should note the associated script element in:

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Dokument mit defer-Script</title> <script src="script.js" defer></script> </head> <body> <h1>Dokument mit defer-Script</h1> </body> </html>

The attribute only works with external, outsourced scripts. If you specify it, you must also specify an attribute. does not work with JavaScript code integrated directly into the document.

If there are several scripts in the document, they are guaranteed to be executed in the order in which they are noted in the document:

<script src="script1.js" defer></script> <script src="script2.js" defer></script>

In the example above, the browser downloads scripts 1 and 2 in parallel. Both are executed when the document is finished, first script 1 and then script 2.

A script that you also load must not be used. If you want to add to the document, you have to use the DOM interface instead.

: Run script as soon as they are downloaded

The second attribute,, is also an attribute with no value:

also causes the browser to download the script as soon as possible. The reading of the document is not interrupted.

The difference to is now as follows: The script with is executed as soon as it has been downloaded. The browser does not wait until the document has been completely scanned before it is executed.

stands for the English asynchronouswhich means here asynchronous, temporally detached and decoupled. The script execution is detached from the document structure.

The script will be executed as soon as possible. It has access to the elements that have already been read in at this point in time. Which these are is arbitrary and can differ from time to time.

In such a script, you should not assume that certain elements have already been read and that DOM access is possible. is therefore only suitable for special scripts that do not access the document precisely via the DOM interface.

One example is visitor counting scripts. These collect data and, if necessary, send them to the server, but do not require access to the content in the document body (element).

In most cases you should place your elements at the end of the document - without and - or in the document header.

The element

The element is intended as a counterpart: it allows alternative content for programs that do not support scripts to be inserted into the document. Browsers in which JavaScripts are deactivated or not available display the alternative content. The content is also aimed at programs such as search engine robots, which process the document automatically without paying attention to the scripts.

<noscript> <p>Dieser Absatz ist gehört zum Inhalt des Dokuments, ist aber im Browser nur zu sehen, wenn JavaScript deaktiviert oder nicht zur Verfügung steht.</p> </noscript>

The purpose of is to make the information accessible that would otherwise only be accessible with the help of the script or even inserted by the script. This downward compatibility of a website and the accessibility of all content without JavaScript is desirable. However, this procedure bridles the horse from behind.

Unobtrusive JavaScript recommends a different approach: All information is already in the document. It is therefore easy to use without JavaScript. Additional functions are built in using JavaScript, which simplify and improve the operation and reading of the content.

The element is therefore irrelevant in Unobtrusive JavaScript. In fact, its use is not recommended. Because it tempts to weld JavaScript logic tightly to the HTML code instead of separating them cleanly. Design your website in such a way that all content is accessible and all functions are available without JavaScript. Your JavaScripts then join in and modify the document accordingly.

So instead of inserting content that is only relevant without JavaScript, you should write it down in the document in the normal way without. If the content is not required when JavaScript is activated, you can use JavaScript to change it or hide it entirely.

So in most cases you won't need it. There are a few special cases in which it is appropriate: For example, if the website is a pure JavaScript web application that does not (yet) offer an alternative version. Then you can add a note that the website requires a JavaScript-capable browser.