Where to write
Inside the script tag
HTML provides us with numerous tags to do numerous things. For example <p> is used to give margined paragraphs, <b> is used to make text bold, <audio> is used to embed audio files on a webpage and so on.
<!DOCTYPE html> <html lang="en"> <head> <script> // code can go over here </script> </head> <body> <script> // code can go over here </script> </body> </html>
The <script> tag can go inside the <head> or the <body> tag, or even both. The choice between these largely depends on your use case, and sometimes preference too. We'll discuss all these points in detail as this course progresses so you can well ignore them for now.
Separate .js file
// script.js // code can go here
The file can then be linked on a HTML page using the src attribute on the <script> tag as shown below:
<!DOCTYPE html> <html lang="en"> <body> <script src="script.js"></script> </body> </html>
True or False?
We'll use the statement document.write() to print some text on an HTML page. First considering it within the tag:
And then in a separate file:
Both of these codes do exactly the same thing i.e output text to an HTML page. Well trivially they are exactly the same; just that one goes in the tag whereas the other in a file.
And in this very way we can keep on adding statements in our code to ultimately form a whole useful and functional script.
Deciding between these two
- Tag: The tag is usually and most preferably used when oe want to write code for a specific page. The code you put there wouldn't obviously be repeated on several pages - it is specfic to the webpage it dwells in.
- Seperate file: The file should be used when you know that the code will be used on several pages. It seems reasonable to put repeating code under a seperate file so that if an error occurs you only have to make changes in one file.
Consider having code inside a script tag that is copy pasted on six pages. Now if an error occurs you would have to manually go to every page and rectify the issue. Seems complicated and time consuming. Huh?
Most of the websites made today use a combination of both.
Frankly speaking, the answer to this question is also fairly use-oriented i.e it depends on what you want to do and how you want to do it. For example if you're to develop a library you'll obviously write its code inside a separate .js file, but if you're to say hello to the users on your home page then you'll probably go with the <script> tag.
We will use the console in many of the coming chapters to execute commands directly or view messages logged in there. It is highly flexible in that we can view arrays, objects, details about constructors and a lot more for our program as we will see later.
How to access it?
- For Chrome navigate to the top-right Options button, then go to More Tools and finally to Developer Tools. You can also simply press Ctrl + Shift + I. After this choose the Console tab.
- For Microsoft Edge navigate to the top-right More Settings button, then go to Developer Tools. You can also simply press Ctrl + Shift + I. After this choose the Console tab.