HTML JavaScript
In this page:
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.
Note: You can write your script directly inside script tags, or use the src attribute to load external script files.
Warning: Do not place HTML tags inside your script block, as the JavaScript engine will fail to parse them.
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.
Note: Use document.getElementById to quickly target and update specific elements on your page.
Warning: Ensure the element is fully loaded before your script tries to target it, or the script will return an error.
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.
Note: Save your external scripts in a file named app.js inside a dedicated js folder in your project.
Warning: External script files should only contain raw JavaScript code; never write HTML tags inside a .js file.
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.
Note: Use the defer attribute on your script tags to let the browser load your page layout and download your script file at the same time.
Warning: If you load scripts without defer, any elements located below the script tag will not be accessible to your code when it runs.
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.
Note: Use the onclick attribute for quick testing, but move to advanced event listeners in your external script files as your project grows.
Warning: Make sure your event handler function names match your script definitions exactly, as typos will prevent your buttons from working.
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.
Note: Use defer for most scripts — it downloads in background and runs after HTML is parsed.
Warning: Scripts in the head without defer or async block page rendering making your site feel slow.
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: