CODEWITHSUNDEEP
javascript
Dimitar Spasovski
Dimitar Spasovski

Reputation: 2132

loading of functions in javascript

I am new to javaScript, started learning it a few days ago. So i was learning about functions and most of the tutorials i was reading said that functions should be put in the script tag that is in the head tag so they can be loaded first. What does that mean ? Because I wrote this code

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>

<script>
function1();
function function1 () {
document.getElementById("demo").innerHTML="HEY";
}
</script>
</body>
</html>

and the code works. The thing is I don't understand how. How can you call a function that hasn't been "loaded" yet? Does the browser read the script tag in a different way than the rest of the HTML document? Can anyone explain how does it work ?

Upvotes: 2

Views: 94

Answers (3)

Winestone
Winestone

Reputation: 1500

This is mainly an optimization thing, script tags can be placed in many places (not only the head). In the old days, they are placed at the end of the body to optimize loading of the page and so the browser can show the page before parsing the javascript, so the page appears more responsive.

Now, javascript is generally placed in a separate file and it is recommended to place them in the head and use add either an async or a defer tag to them (you cannot async or defer inline javascript).

Declaring a function like:

myFuncName(); //Valid
function myFuncName () {}

Makes it available to be called in the entire scope in which it is defined. Meanwhile assigning a function to a variable does not allow this to happen:

myFuncName(); //Invalid
var myFuncName = function () {};

Sources and further reading:

Upvotes: 1

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

The way you are coding is correct script must be at the bottom

According to Yahoo's Best Practices for Speeding Up Your Web Site

Put Scripts at the Bottom tag: javascript The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames. In some situations it's not easy to move scripts to the bottom. If, for example, the script uses document.write to insert part of the page's content, it can't be moved lower in the page. There might also be scoping issues. In many cases, there are ways to workaround these situations. An alternative suggestion that often comes up is to use deferred scripts. The DEFER attribute indicates that the script does not contain document.write, and is a clue to browsers that they can continue rendering. Unfortunately, Firefox doesn't support the DEFER attribute. In Internet Explorer, the script may be deferred, but not as much as desired. If a script can be deferred, it can also be moved to the bottom of the page. That will make your web pages load faster. top | discuss this rule

source: Best Practices for Speeding Up Your Web Site

According to Google Apps Script Best Practices

Load JavaScript last. Many web developers recommend loading JavaScript code at the bottom of the page to increase responsiveness, and this is even more important with the HTML service. In the NATIVE sandbox mode, all scripts you load are scanned and sanitized client-side, which may take a couple of seconds. Moving your tags to the end of your page will let HTML content render before the JavaScript is processed, allowing you to present a spinner or other message to the user.

Source: Load JavaScript last

Variable and Function Hoisting in JavaScript

<script>

function function1 () {
     document.getElementById("demo").innerHTML="HEY";
}

function1();
</script>

Upvotes: 1

bigonez
bigonez

Reputation: 111

The script tag is a whole block. The funtion1() was called after the whole script tag loaded.

Upvotes: 1

Related Questions