HTML JavaScript
In this page:
<script>
// JavaScript code
</script>
<script src="script.js"></script>The script Tag
The script tag is used to embed or reference client-side JavaScript on your webpage. The browser reads the script tag and runs the code inside it to make your page interactive.
- You can write your script directly inside script tags, or use the src attribute to load external script files.
- Accepted attributes:
- src — URL of an external script
- type — module | importmap | text/javascript (default) | other data block type
- async — boolean; run when downloaded
- defer — boolean; run after parsing
- crossorigin — anonymous | use-credentials
- integrity — hash for Subresource Integrity
Example: The script Tag
<script>
console.log("Hello from JavaScript");
</script>Targeting and Modifying HTML Elements
JavaScript interacts with your webpage by targeting HTML elements and modifying their content or style attributes dynamically, allowing your page to respond to user actions in real-time.
Example: Targeting and Modifying HTML Elements
<p id="message">Original text</p>
<script>
document.getElementById('message').textContent = 'Updated text';
</script>Linking External JavaScript Files
As your website's features grow, writing scripts directly in your HTML files can make them cluttered and hard to maintain. Linking to an external .js file keeps your code organized and easy to reuse across multiple pages.
- Save your external scripts in a file named app.js inside a dedicated js folder in your project.
- Accepted attributes:
- src — URL of the script file
- defer — boolean
- async — boolean
- type — module | text/javascript
Example: Linking External JavaScript Files
<script src="app.js"></script>Managing Script Placement and Loading
By default, browsers pause loading your webpage layout to download and run script files, which can slow down your site's loading speed.
To keep your pages loading quickly, you can place your script tags at the very bottom of the page or use defer and async attributes to load them in the background.
Example: Managing Script Placement and Loading
<script src="app.js" defer></script>Handling Simple User Interactions
You can use JavaScript to trigger custom actions on your page in response to user interactions, like clicking a button or typing inside an input box, using standard event listeners.
Example: Handling Simple User Interactions
<button onclick="alert('Clicked!')">Click me</button>Script Loading Strategies
Where and how you load JavaScript affects your page speed significantly. The defer and async attributes control when the browser downloads and executes your scripts.
- Use defer for most scripts — it downloads in background and runs after HTML is parsed.
- Accepted values:
- (none) — blocks parsing, runs immediately
- async — download in parallel, run as soon as ready
- defer — download in parallel, run after parsing in order
- type=module — deferred by default
Example: Script Loading Strategies
<script src="app.js" defer></script>
<script src="tracker.js" async></script>- Attempting to write HTML layout tags directly inside your external .js script files.
- Targeting elements with your script before the browser has finished loading them, resulting in null pointer errors.
- Forgetting to load scripts with defer, which causes slow page load speeds.
- The script tag is used to write inline JavaScript or to link to an external .js file.
- JavaScript can dynamically update your webpage content and styles in real-time.
- Use the defer attribute or place your script tags at the bottom of the page to keep your site loading quickly.
Standard client-side JavaScript execution is supported by all modern and legacy web browsers natively.
Chapter Quiz — Complete all 12 topics to unlock
0/12 topics done
Complete these topics first: