2

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 ?

Dimitar Spasovski
  • 2,023
  • 9
  • 29
  • 45

3 Answers3

1

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>
Gildas.Tambo
  • 22,173
  • 7
  • 50
  • 78
  • "The defer attribute is supported in all major browsers." - http://www.w3schools.com/tags/att_script_defer.asp :) – Winestone Oct 11 '14 at 09:19
  • W3school is very bad never use it http://www.w3fools.com/ please use https://developer.mozilla.org/en-US/ – Gildas.Tambo Oct 11 '14 at 09:20
  • https://developer.mozilla.org/en/docs/Web/HTML/Element/script#Browser_compatibility, seems pretty compatible to me – Winestone Oct 11 '14 at 09:25
  • erm... by loading javascript last they don't mean:"call functions last" – towc Oct 11 '14 at 09:31
  • 1
    I already knew about it. I simply don't see how the script tag loading has anything to do with this – towc Oct 11 '14 at 09:36
  • @ towc well that s up to you if you want to write readable code and Fast, Memory-Efficient JavaScript. I will not force you to change the way you code but if you have time and want to learn more read this http://www.smashingmagazine.com/2012/11/05/writing-fast-memory-efficient-javascript/ – Gildas.Tambo Oct 11 '14 at 09:42
1

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:

Community
  • 1
  • 1
Winestone
  • 1,500
  • 9
  • 19
1

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

bigonez
  • 111
  • 2