<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src = 'Output_Script/test.js'></script>
<script>
console.log('main.html script tag')
console.log('sample : ', sample)
</script>
</head>
<body>
</body>
</html>test.js
console.log('test file')
const sample = 10
### Key Elements
- **External JavaScript File**: The document includes a script file located at `'Output_Script/test.js'`. For this to work correctly, the path to `test.js` must be relative to the location of the HTML document, or an absolute path must be provided. This script is expected to define or do something that makes `sample` available to any subsequent scripts on the page.
- **Inline Script**: Following the inclusion of the external script, there's an inline script that:
- Logs a message `'main.html script tag'` to the console.
- Tries to log the value of `sample`, indicating that `sample` is expected to be something defined in `test.js`. The code `console.log('sample : ', sample)` implies that `sample` is either a variable, function, or object that should be accessible at this point in the script execution order.
### Execution Order and Accessibility
- When the browser loads the HTML document, it processes the elements in the order they appear. This means it will first attempt to load and execute the script from `'Output_Script/test.js'` before executing the inline script content.
- For the inline script to successfully log `sample`, the external script must successfully load, and `sample` must be defined in the global scope within `test.js`. If `test.js` fails to load, or if `sample` is not defined or is defined inside a scope that's not accessible to the inline script (such as inside a function without attaching it to the global object), a ReferenceError will occur when attempting to log `sample`.
### Conclusion
This document showcases a basic pattern for including and utilizing external JavaScript files in HTML documents. For this pattern to work as intended, the external JavaScript file must be correctly linked, accessible, and properly define any variables or functions meant to be used by subsequent scripts.
'개념 > 혼자 공부하는 Javascript' 카테고리의 다른 글
| chapter 6) Array_Copy (0) | 2024.12.14 |
|---|---|
| chapter 6) check undefined type (1) | 2024.12.13 |
| chapter 6) method inside of this keyword (0) | 2024.12.11 |
| chapter 5) callback (1) | 2024.12.10 |
| chapter 5) expansion operator (2) | 2024.12.09 |