External Java Script Demo Example
Then, in the <script> element’s src property, utilize the JavasScript source code file URL.
<script src="js/exscr.js"></script> <script src="js/service.js"></script>
The async and defer properties
- These properties only apply to external script files.
- The async property does not guarantee that the script files will run in the order they appear.
Demo Example: async
<script async src="exscr.js"></script> <script async src="service.js"></script>
Because the service.js file may run before the exscr.js file, you must guarantee no dependence between them.
Demo Example: defer
If the defer attribute is present, it instructs the web browser to run the script file after processing the content.
Even though we included the <script> element in the <head> section, the script will not run until the browser receives the ending tag <html>.
- It aids in the reusability of code across several HTML files and facilitates code readability.
- It saves time since web browsers cache external js files, decreasing page loading time even further.
- It allows site designers and developers to work with HTML and js files concurrently and independently, avoiding code conflicts.
- The code becomes shorter since we need to indicate the location of the js file.
- Using the URL of the js file, the thief may get the coder’s code.
- If two .js files are interdependent, a failure in one may influence the execution of the other dependent file.
- The web browser must perform an additional HTTP request to obtain the js code.
- A little to major modification in the js code may result in unexpected outcomes in all dependent files.