# Adding JavaScript to HTML Complete guide to integrating JavaScript with HTML for interactivity and dynamic behavior. ## Methods of Adding JavaScript ### 1. External JavaScript File (Recommended) **Best for**: Production websites, reusable code, maintainable applications ```html Page Title

Hello World

``` **script.js**: ```javascript document.getElementById('changeBtn').addEventListener('click', function() { document.getElementById('heading').textContent = 'Hello JavaScript!'; }); ``` **Advantages**: - ✅ Separates content from behavior - ✅ Reusable across multiple pages - ✅ Cached by browser (faster page loads) - ✅ Easier to maintain and debug - ✅ Can be developed separately - ✅ Cleaner HTML ### 2. Inline JavaScript **Best for**: Small scripts, event handlers, quick testing ```html Inline JavaScript

Hello World

``` **Advantages**: - ✅ Quick to implement - ✅ No external HTTP request - ✅ Good for small, page-specific scripts **Disadvantages**: - ❌ Not reusable across pages - ❌ Harder to maintain - ❌ Violates Content Security Policy (CSP) - ❌ Mixes content and behavior ### 3. Inline Event Handlers **Best for**: Quick prototypes, simple interactions (not recommended for production) ```html ``` **Better approach** (external event listeners): ```html ``` ## Script Element Attributes ### Basic Script Element ```html ``` ### Important Attributes | Attribute | Purpose | Values | |-----------|---------|--------| | `src` | External file path | URL or relative path | | `type` | MIME type | `text/javascript` (default), `module` | | `async` | Async loading | Boolean (no value needed) | | `defer` | Deferred loading | Boolean (no value needed) | | `crossorigin` | CORS mode | `anonymous`, `use-credentials` | | `integrity` | SRI hash | Hash for security verification | | `nomodule` | Fallback for old browsers | Boolean | | `referrerpolicy` | Referrer header | `no-referrer`, `origin`, etc. | ## Script Loading Strategies ### 1. Default Loading (Blocking) ```html ``` **Behavior**: - Stops HTML parsing - Downloads script - Executes script immediately - Resumes HTML parsing **When to use**: Never (use `defer` or `async` instead) ### 2. Defer Loading (Recommended for Most Scripts) ```html ``` **Behavior**: 1. HTML parsing continues 2. Script downloads in parallel 3. Script executes after HTML parsing completes 4. Maintains script order **When to use**: - ✅ Scripts that manipulate DOM - ✅ Scripts that depend on full HTML - ✅ Multiple scripts with dependencies - ✅ Most common use case ### 3. Async Loading ```html ``` **Behavior**: 1. HTML parsing continues 2. Script downloads in parallel 3. Script executes as soon as downloaded (pauses HTML parsing) 4. Does NOT maintain script order **When to use**: - ✅ Independent scripts (analytics, ads) - ✅ Scripts that don't depend on DOM - ✅ Scripts that don't depend on other scripts - ❌ NOT for scripts with dependencies ### 4. Script at End of Body (Traditional) ```html Page Title

Content

More content

``` **When to use**: - ✅ When `defer` is not available - ✅ Ensures DOM is fully loaded - ❌ Less efficient than `defer` in `` ### Comparison Table | Method | Parsing | Download | Execution | Order | Use Case | |--------|---------|----------|-----------|-------|----------| | Default | Blocks | Immediate | Immediate | Yes | ❌ Avoid | | `defer` | Continues | Parallel | After parse | Yes | ✅ DOM manipulation | | `async` | Continues | Parallel | ASAP | No | ✅ Independent scripts | | End of body | Continues | After parse | Immediate | Yes | ✅ Fallback method | ## ES6 Modules ### Module Script ```html ES6 Modules
``` **main.js**: ```javascript import { greet } from './utils.js'; import { render } from './render.js'; greet('World'); render(); ``` **utils.js**: ```javascript export function greet(name) { console.log(`Hello, ${name}!`); } ``` ### Module Features ```html ``` **Module characteristics**: - ✅ Automatically in strict mode - ✅ Automatically deferred - ✅ Have their own scope (not global) - ✅ Can use `import` and `export` - ✅ Only execute once (even if imported multiple times) ## JavaScript Placement Best Practices ### In `` with `defer` ```html Page Title

Content loads without blocking

``` ### Multiple Scripts with Dependencies ```html ``` ### Critical vs Non-Critical Scripts ```html ``` ## Data Attributes for JavaScript ### Storing Data in HTML ```html ``` ### Complex Data ```html
``` ## Common Integration Patterns ### 1. DOM Content Loaded Wait for HTML to fully load: ```html ``` ### 2. Window Load Event Wait for everything (including images): ```html ``` ### 3. Event Delegation ```html ``` ### 4. Form Handling ```html
``` ## CDN Integration ### Popular Libraries ```html CDN JavaScript
``` ### CDN Best Practices ```html ``` ## Script Loading Performance ### Preloading Scripts ```html ``` ### DNS Prefetch ```html ``` ### Preconnect ```html ``` ## Content Security Policy (CSP) ### Strict CSP ```html ``` ### Allowing specific sources ```html ``` ### Using nonce ```html ``` ## JavaScript Framework Integration ### React ```html React App
``` ### Vue.js ```html Vue App

{{ message }}

``` ## Error Handling ### Global Error Handler ```html ``` ### Try-Catch Blocks ```html ``` ## Best Practices ### ✅ Do 1. **Use `defer` for regular scripts** in `` 2. **Use `async` for independent scripts** (analytics, ads) 3. **Place scripts before closing ``** if `defer` not supported 4. **Use external files** for reusable code 5. **Use event listeners** instead of inline handlers 6. **Validate user input** on both client and server 7. **Use `type="module"`** for modern JavaScript 8. **Implement error handling** for better UX 9. **Minify JavaScript** for production 10. **Use SRI** for CDN scripts (`integrity` attribute) 11. **Separate concerns** (HTML, CSS, JS) 12. **Use data attributes** for passing data from HTML to JS 13. **Implement CSP** for security 14. **Test across browsers** for compatibility 15. **Use descriptive function/variable names** ### ❌ Don't 1. **Don't use inline event handlers** (violates CSP) 2. **Don't block HTML parsing** (avoid scripts in `` without `defer`) 3. **Don't use `document.write()`** (deprecated) 4. **Don't trust user input** (always validate/sanitize) 5. **Don't use global variables excessively** (use modules/closures) 6. **Don't load unnecessary libraries** (increases page size) 7. **Don't ignore browser console errors** 8. **Don't use `eval()`** (security risk) 9. **Don't forget fallbacks** for CDN resources 10. **Don't mix inline and external code** unnecessarily 11. **Don't forget to remove `console.log()`** in production 12. **Don't use deprecated features** (check browser compatibility) 13. **Don't ignore accessibility** (keyboard navigation, screen readers) 14. **Don't forget mobile optimization** 15. **Don't hardcode sensitive data** in JavaScript ## Complete Example ```html Complete JavaScript Integration

Hello World

``` **app.js**: ```javascript // Wait for DOM to be ready (note: defer already ensures this) document.addEventListener('DOMContentLoaded', function() { // Button click handler const btn = document.getElementById('changeBtn'); btn.addEventListener('click', function() { const newText = this.dataset.text; document.getElementById('heading').textContent = newText; }); // Form submission handler const form = document.getElementById('contactForm'); form.addEventListener('submit', function(e) { e.preventDefault(); const formData = new FormData(this); console.log('Form submitted:', Object.fromEntries(formData)); // Process form data // submitForm(formData); }); }); ``` ## Resources - **MDN JavaScript Guide**: https://developer.mozilla.org/en-US/docs/Web/JavaScript - **JavaScript.info**: https://javascript.info/ - **Can I Use**: https://caniuse.com/ (browser support) - **JSHint**: https://jshint.com/ (code quality) - **ESLint**: https://eslint.org/ (linting) - **Babel**: https://babeljs.io/ (transpiler) - **SRI Hash Generator**: https://www.srihash.org/