JavaScript - Window Object - The alert() method

Submitted by Mi-K on Wednesday, August 24, 2011 - 7:29am

In this JavaScript tutorial we will see that the behaviour of the JavaScript alert() method is sometimes not that we can hope.

First of all, let's create a new directory named js and add the myAlert.js script inside:

// js/myAlert.js
alert('9');

Then in our index.html we add this one:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Alert testing</title>
<script type="text/javascript" src="js/myAlert.js">
    alert('1');
    document.write(':D');
</script>
<script type="text/javascript">
    window.alert('2');
    function gogogo() {
        alert('4');
    }
</script>
</head>
<body onload="alert('3');gogogo();">
<script type="text/javascript">
    alert('5');
</script>
Some text.
<script type="text/javascript">
    alert('6');
</script>
</body>
</html>

In this example it is expected that the alert() methods are called in this order:

9 - 1 - 2 - 3 - 4 - 5 - 6

Well nay.
Actually, we have as result:

9 - 2 - 5 - 6 - 3 - 4

Weird, isn't it?
The call of the myAlert.js file is in the src property of the <script> tag.
It means that all what is between the <script> and </script> tag are not called because there is already a src property.
So you can add all that you want, it will be never executed.

But after the execution of the two JS functions inside the <body> tag, the functions, in the onload property of the <body> tag, are executed.
So the functions inside the <body> are executed before ones on the onload property of this same <body> tag.