Skip to content
Internet Programming
GitHub
Next
JS Variables and Scopes

Getting Started with JavaScript

Switch to Zen Mode

Introduction to JavaScript

Section titled “Introduction to JavaScript”

Adding JavaScript to an HTML Document

Section titled “Adding JavaScript to an HTML Document”

You can add JavaScript in three ways: internal/embedded, external, and inline.

1. Inline JavaScript

Section titled “1. Inline JavaScript”

You can add JavaScript directly within an HTML element using the onclick, onmouseover, and other event attributes.

<button onclick="console.log('Hello, World!')"> Click Me </button>
html
  • The JavaScript statement(s) run when the event (e.g., onclick) is triggered.

2. Internal JavaScript

Section titled “2. Internal JavaScript”

You can also write JavaScript inside the <script> tags, usually placed in the <head> or just before the closing </body> tag. This is the most common approach for adding JavaScript directly to an HTML document.

Inside <head>:

Section titled “Inside <head>:”
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Internal JavaScript Example</title>
    <script>
        // This is the JavaScript code
        function showMessage() {
            alert('Hello from internal JavaScript!');
        }
    </script>
</head>
<body>
    <button onclick="showMessage()">Click me</button>
</body>
</html>
html

3. External JavaScript

Section titled “3. External JavaScript”
  • It’s common to place JavaScript in a separate file and link it to your HTML. This makes your code more organized and reusable.
  • This is the cleanest and most efficient method for adding JavaScript to a webpage, especially for larger projects.
Example: Linking an External JavaScript File
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>External JavaScript Example</title>
</head>
<body>
    <button onclick="showMessage()">Click me</button>


    <!-- Linking the external JavaScript file -->
    <script src="script.js" type="text/javascript"></script>
</body>
</html>
html
script.js
// script.js
function showMessage() {
    alert('Hello from external JavaScript!');
}
javascript

When to Use Each Method?

Section titled “When to Use Each Method?”
  • Inline JavaScript: Use for simple interactions tied to specific elements (small snippets).
  • Internal JavaScript: Ideal for small-to-medium projects or when you don’t want to manage multiple files.
  • External JavaScript: Best for larger projects for maintainability and separation of concerns.

Best Practices for Adding JavaScript

Section titled “Best Practices for Adding JavaScript”