- When a user makes an HTTP request, then browser reads the webpage and along with HTML,CSS etc. it also finds the JS scripts and executes them.
- Developing Mobile Applications & Games.
- Web Browser-based Games.
- Add interaction to websites.
- Back end web Development.
- Rich interface for Applications and web pages.
- But question is, How web Browsers are going to recognize that its a JS code ??
- To run this code you have to add an extension. Go to the left side of visual studio and click on extension or press Ctrl + Shift + X buttons.
- Afterwards, Search “Open in browser” and install the first file. Look below in the image for more detail.
- When your exertion is installed, now go back to your HTML file and press Alt + B. It will run your code.
- You will see something similar to below image, in your browser.
- It also reduces the code repetition i.e. if you are using your JS code for multiple pages.
- As you can see on the right side in the figure.
- Now go back to the “index.html” file and add the code as you can see in below figure:
- When you will refresh the web browser then it will automatically reload a JS file through source code, as shown in below figure:
- You can add <script> tag in the <head> section of your HTML file, in the start of the <body> tag and also at the start or end of the body tag.
- But I would advise you to add it at the end of the <body> tag. I will show you why it should be at the bottom of the body tag.
- Here is a basic example for you. As you can see in below image that I have added <script> tag at the start of <head> tag and add a new tag of <h1> for your understanding.
- Save these file and press ALT + B to execute this code. You will notice that as you see in the picture underneath that only <script> tag alert comes up first without loading the rest of page.
- But once I click at ok then it has loaded the rest of the page now. As indicated in the image here.
- It leaves a bad impact on users because the page is loading step by step but not at once. Now I am gonna add <script> at the bottom of the <body> tag and as you can see in image down.
- Now save it go again to the browser and reload the page. Instantly you can see the content and alert form at the same time. This is a perfect way of adding JS.