But First …
Step by Step
.html file with your editor.
<!doctype html> <html> <head> <title>My Web Page</title> </head> <body> <h1>My Web Page</h1> <p>Well hello there.</p> </body> </html>
<script></script> element. There are two ways to do this:
You can embed
<script></script> element anywhere in the HTML document
<body></body> but we usually put them near the end of the body. Scripts will run at the point they are included so this prevents our page from lagging when it is loaded.
💬 These days there are things you can add to
scriptto change this behavior, but we’ll keep things simple for now.
So let’s put our
<script></script> at the bottom. And just put
console.log('hello') inside to test it.
<!doctype html> <html> <head> <title>My Web Page</title> </head> <body> <h1>My Web Page</h1> <p>Well hello there.</p> <script>console.log('hello')</script> </body> </html>
Now let’s test it.
First create the file.
It can just be a simple text file. You don’t have to do anything else to it (like change the permissions mode).
Now open that
main.js file up and add something simple for now.
Now we need to source the file from our
index.html page in the opening
<script> tag and remove the code between the
⚠️ Don’t forget the closing
</script>tag. I know it is annoying that we need it even though there is nothing between the tags but that’s the way it goes. HTML is very old and has a lot of inherited quirks in it.