1

I am learning javascript and to tell the truth, some parts don't make sense to me. like this one. I wrote this block of code first : 

<body>
<script type="text/javascript">
function people(name, age){
this.name = name;
this.age = age;
this.ret = yearsLeft;
}

function yearsLeft(){
var numYears = 65 - this.age;
return numYears;
}         

var sam = new people("sam forest", 39);
var billy = new people("billy wood", 45);

document.write(billy.ret());
</script>
</body>

and I got the result. However I wrote this one after the first one and I got the same result:

<head>
 <title>Javascript</title>

 <script type="text/javascript">
 function people(name, age){
 this.name = name;
 this.age = age;
 this.ret = yearsLeft;
 }

 function yearsLeft(){
 var numYears = 65 - this.age;
 return numYears;
 }        

 var sam = new people("sam forest", 39);
 var billy = new people("billy wood", 45);
 </script>
 </head>
 <body>
 <script type="text/javascript">

 document.write(billy.ret());
 </script>
 </body>

Here is my question, what is the difference , when I get the same result in both ways?

Sam Malekahmadi
  • 23
  • 3
  • 4
    Possible duplicate of [Where to place Javascript in a HTML file?](http://stackoverflow.com/questions/196702/where-to-place-javascript-in-a-html-file) – Angelos Chalaris Mar 06 '17 at 08:48

3 Answers3

0

From Yahoo's Best Practices for Speeding Up Your Web Site:

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.

Therefore, in general, it is preferrable to put them at the bottom. However, it isn't always possible, and it often doesn't make that much of a difference anyway.

Stevie G
  • 5,638
  • 1
  • 10
  • 16
0

In many cases the result is the same, but there's a relevant difference due to the way web browser render html pages.

Since a browser reads the page content top-to-bottom, placing the javascript code within the <head> tag will cause the actual page content to be displayed after the browser has finished parsing the script. Placing it just before the </body> tag instead will let the browser display the content faster, which is usually desirable.

Another implication of the top-to-bottom rendering is related to SEO optimization: since most crawlers will inspect a fixed number of bytes at the top of a page, having those first bytes filled with javascript code will prevent the crawler from accessing the actual page content, therefore reducing the benefits of whatever you've SEO-wise.

Stefano Zanini
  • 5,876
  • 2
  • 13
  • 33
0

Because you're doing pretty much the same thing. The browser is going to evaluate your javascript code sequentially, and, if it's just statements, as you putted, they're going to be executed.

So, one thing you need to pay attention is that the browser is going to evaluate your hole document (html, css, javascript), and the javascript statements that are not function definitions are going to be executed right away.

Andre Paschoal
  • 332
  • 2
  • 7