Skip to main content

External Scripts - JavaScript Interview

JavaScript Fundamentals: EXTERNAL SCRIPTS

What is an external script in JavaScript?​

View Answer:
Interview Response: An external script is a JavaScript file that is separate from the HTML file that it is used in. It is linked to the HTML file using the <script> tag and is usually saved with a .js file extension.

How do you access external script files in JavaScript development?​

View Answer:
Interview Response: To access external script files in JavaScript development, you can use the HTML <script> tag with the "src" attribute set to the file path of the external script.

Code Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
    <script src="myscript.js"></script>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>
View Answer:
Interview Response: We can access external scripts by using the script-src attribute. Both secure and non-secure domains are permissible.

Code Example:

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
    <script src="https://example.com/myscript.js"></script>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

What is the rule for putting scripts into HTML?​

View Answer:
Interview Response: As a rule, only the most straightforward scripts go into HTML pages. Complex scripts reside in separate files. The general rule for putting scripts into HTML is to include them in the <body> or <head> section using the <script> tag.

Code Example:

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
    <script>
        function myFunction() {
         console.log("I'm Simple");
        }
    </script>
  </head>
  <body>
    <h1>Hello World!</h1>
    <script src="complex.js"></script>
  </body>
</html>

What is the benefit of using a separate script file in relation to the browser?​

View Answer:
Interview Response: The benefit of using a separate file is that the browser downloads and stores the script in its cache. Instead of downloading it on every load, other pages referencing the same script take it from the cache. That reduces traffic and makes pages faster.

Code Example:

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
    <script src="myscript.js"></script>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

Can a script tag reference an external file and have code inside of it?​

View Answer:
Interview Response: No, a script tag cannot contain both an external file and code inside it.

Code Example:This is not allowed

<script src="file.js">
  console.log(1); // the content is ignored, because src is set
</script>

The example above can be split into two scripts to work:

<script src="file.js"></script>

<script>
  console.log('Now it works!');
</script>

What are the advantages of using external scripts?​

View Answer:
Interview Response: Using external scripts can help to separate your code into manageable pieces, make it easier to maintain and debug, and improve the overall performance of your website by allowing the browser to cache the script.
View Answer:
Interview Response: Yes, it is possible to link multiple external scripts within a single HTML file.

Code Example:

<!DOCTYPE html>
<html>
  <head>
  <script src="path/to/script1.js"></script>
  <script src="path/to/script2.js"></script>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

Can you include JavaScript code directly in an HTML file instead of using an external script?​

View Answer:
Interview Response: Yes, you can include JavaScript code directly in an HTML file using the <script> tag with the code enclosed in the tag. However, this is not recommended for larger scripts as it can make the HTML file difficult to read and maintain.

Code Example:

<!DOCTYPE html>
<html>
  <head>
    <script>
      function greet(name) {
        console.log("Hello, " + name + "!");
      }
    </script>
  </head>
  <body>
    <button onclick="greet('John')">Click me</button>
  </body>
</html>

Including JavaScript code directly in an HTML file can be useful for adding functionality to specific elements on the page or for small scripts that do not require their own file. However, it can lead to code duplication and decreased maintainability if used excessively. Using external scripts can help to improve code organization and reuse.

What is the difference between using an external script and including JavaScript code directly in an HTML file?​

View Answer:
Interview Response: An external script is a separate file that is loaded and cached separately, while inline scripts are directly embedded in the HTML file.

Code Example: Working with two files

// script.js
function greet(name) {
  console.log("Hello, " + name + "!");
}

Below index.html loads script.js above

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <script src="script.js"></script>
  </head>
  <body>
    <button onclick="greet('John')">Click me</button>
  </body>
</html>

Can you use external scripts in conjunction with inline scripts?​

View Answer:
Interview Response: Yes, you can use external scripts in conjunction with inline scripts. However, you should ensure that your scripts do not conflict with each other and that any necessary dependencies are loaded in the correct order.

Code Example:

<!DOCTYPE html>
<html>
  <head>
    <head>
      <script src="path/to/script.js"></script>
      <script>
        // Inline script
        console.log("This is an inline script.");
      </script>
    </head>
  </head>
  <body>
    <button onclick="greet('John')">Click me</button>
  </body>
</html>

Using external scripts in conjunction with inline scripts can be useful for adding functionality to specific elements on the page or for handling events that are specific to a particular section of the page. However, it's important to ensure that scripts are loaded and executed in the correct order to avoid unexpected behavior.

How can you ensure that your external scripts are loaded and executed correctly?​

View Answer:
Interview Response: To ensure that external scripts are loaded and executed correctly in JavaScript, we can use the onload event and the onerror event of the HTMLScriptElement object. The onload event fires when the script has been successfully loaded, while the onerror event fires when the script fails to load or encounters an error during execution.

Code: For example, to load an external script and ensure that it has been loaded and executed correctly, we can use the following code:

let script = document.createElement("script");
script.src = "path/to/script.js";

script.onload = function() {
  console.log("Script loaded and executed successfully.");
};

script.onerror = function() {
  console.error("Failed to load script.");
};

document.head.appendChild(script);

Using the onload and onerror events to ensure that external scripts are loaded and executed correctly can help to prevent errors and ensure that our code runs as intended.