External JavaScript File

JavaScript code can be stored in separate files with the .js extension. Using external files is a recommended practice, especially for larger projects. To include an external JavaScript file, use the src attribute in the <script> tag:

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

EXAMPLE

                        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Using an External JavaScript File</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="file.js"></script>
</head>
<body>
    <div onclick="showMessage()">
        <p>Click me to display a message!</p>
        <span id="message" style="display: none">
            Welcome to my JavaScript tutorial!
        </span>
    </div>
</body>
</html>
    
                    

RESULT

Including an External File

An external JavaScript file can be included in the <head> or <body> section of an HTML document. Important points to remember:

External JavaScript files must not contain <script> tags.
A single script can include multiple external files.
External files are cached, speeding up page loading.
Separating JavaScript code from HTML improves readability and maintainability.

Calling JavaScript Files

External JavaScript files can be referenced in three ways:

With a full URL (for external libraries and CDN):

<script src="https://vadnica.org/js/script.js"></script>

With a relative path (for files in the project structure):
```
<script src="/js/script.js"></script>
    
```
With a local name (for files in the same directory):
```
<script src="script.js"></script>
    
```