 Okay, so let's start writing some JavaScript and again before I explain things, I typically show you what you can do Here we have an example where we define an HTML button With text click on it doesn't matter and then we define on click So whenever we click on this button we do window alert test So this is one way of doing JavaScript and I can just show you that You can just define a new file and say simple example So it's an HTML file and we do write HTML here. So I just do the the basic structure I Do my head Title tag And Then I get into the body and here I just say button Type is a button and on click I execute window.alert Test and the text of the button is click. So if I open this And I can make it a bit larger Open this you will see what you would hopefully expect to see There is our button Doesn't look very exciting if I click on it I get this alert window that says test and I can click okay, and then it disappears again If I do it again, it happens and actually now Firefox already says please block alert windows from this. It's annoying So now nothing happens That's a browser functionality that has nothing to do with what we just programmed So basically what we did now is we put JavaScript into the HTML in in an attribute And this means we are reacting to an HTML event here to the on click event And this is already an example of what event driven means, right? So we react to a user event. We'll get back to that later Then the other definition you can do is an internal definition Which is quite similar to CSS, but instead of style you have script tags And those can be in the head or the body so Again, let's do this Here's my button and I let's say I just add some script tags Let's say window.alert Test 2 And now the the interesting thing is of course here. There is no event It doesn't say when this executes and this means it executes as soon as the browser parses this and the browser Remember starts from the top builds the DOM and once it gets here. It does alert So if we test this I Get the alert directly when I load test 2 and now when I click I get test This is interesting because you can see how this happens if I move the script tags before the button and Reload now you see the alert window comes before the button is here So the browser has only gotten until line 6 here and it has not yet put the button onto the screen So only when I click test the button appears So this shows you that it goes Basically in the order that the JavaScript is parsed Finally you can do the same with an external definition so you can again have your script tags But this time you define a source so instead of putting code in here You just define a JavaScript file and put everything there Same story. It can be in the head. It can be in the body. It can be it will be executed once it is parsed and This is analog to CSS so you can put exactly the same into internal external definitions and the recommendations are also similar that for Readability for modularization. You should put things into external files So as a summary you can have JavaScript as a part of an HTML attribute as Triggered by an event you can have as an internal definition You can have it as an external definition in its own file and of course Same as with CSS you can have multiple definitions at all levels. You can have three Events that trigger something you can have four internal definitions five JavaScript files. This is possible It's also very common, especially when you use libraries And similar to CSS as I already said for modularization for readability It's best to have external files because then you can reuse them across different HTML pages You can change it in one in a single place and you don't mix HTML and JavaScript code in the same file Now We discussed that for internal and external definitions the code is parsed as soon as we get to the script tags or The script so the question is where is it best to put the script tags? because Of course, it's good to have our JavaScript executed as soon as possible but is it good that it's getting executed before the page loads or so on so there are different options and The important thing is as you have seen with the button example the construction of the DOM stops until the script is completely loaded And in our case we had an alert window. So it even blocked The DOM construction until I click on okay And this means if your script is large or if you do something similar to what I just did If you have something that blocks and waits for the user then the website freezes nothing happens And this is a bad user experience typically because if you let's say you load a 200 megabyte JavaScript file And until then nothing happens. So the user thinks your website is broken And because of that the recommendation in the past used to be put it in the bottom of your body So put the scripts at the very end that means all the HTML elements are loaded You can see the whole website and only then it's starting to freeze basically. It's starting to load the JavaScript This is the old way of doing it it's still fine Nowadays there they have added in HTML 5 two different attributes that you can add That basically say if you use async for example, it says, please load the JavaScript file asynchronously in the background and This is practical because it directly starts loading but at the same time it doesn't block your DOM construction So the recommendation nowadays is to say put it in the head and use these attributes the important thing is to know That this can be a bit tricky, this is why we don't cover it in detail But imagine you have multiple scripts that depend on each other then Loading them asynchronously is a bit difficult because it could happen that one script is loaded before the other one Even though it should be the other way around and so on so you have to be a bit careful about it And the other thing is what happens if your JavaScript code changes the DOM while it's being constructed So those things are a bit tricky But basically you can do more advanced things today for this course is not so relevant I would say put it wherever it is Wherever you feel like it's okay to go with the old recommendation and say put it in the bottom It's good enough for here But for the future when you build more advanced applications you should be aware of that these two attributes exist