#Calling a js function before linking to the js file?

2 messages · Page 1 of 1 (latest)

true dragon
#

Hi all,
I've noticed in the "build a passenger counter app" section(link is https://scrimba.com/learn/learnjavascript/set-the-count-to-0-cof1d432198ea091cc2c690f4), in the HTML file index.html, onclick="increment()" and onclick="save" appear before <script src="index.js"></script>

My questions are:

  1. It works but it's a bit counter-intuitive cos I thought we need to link to the js file first?
  2. why <script src="index.js"></script> is in the <body> section instead of <head>? I was under the impression that linking to external css and js files should be in the <head> section...

Any help would be appreciated,
Tony

example.PNG
hexed zodiac
#

Programs (for the most part) read code line by line top to bottom, so what happens here is the program reads through the html file top to bottom and renders all that out to the screen, THEN reads the javascript file from top to bottom.

The reason why you want the script tag at the end of the body is because if your javascript file has something like document.getElementById(btn), you don't want the program to try to run that code before the button has been rendered to the screen. After all, how can the javascript do anything with that button if the button doesn't exist yet?

The exception to this is if you give the script tag the defer attribute and place it in the head. Doing this is basically saying to the program "I'm placing this script tag here, but don't do anything with it until you've finished rendering the html to the screen"

As for the onClick attributes in the html file, those aren't running any javascript straight away. Instead think of it more like a promise you're making to the computer. When you do an onClick attribute like this you are saying "There is a function in the javascript file that is linked to it, I promise it's there, you'll find it when you run the javascript file and someone clicks the button"