JavaScript

Running JavaScript

JavaScript is the engine that powers interactivity on the web. When building web pages with HTML and CSS, you'll use JavaScript to handle user actions, manipulate content, make requests, and much more.

JavaScript code is integrated into HTML using the <script> element. There are two ways of doing so:

Running Inline JavaScript
Running External JavaScript

Running Inline JavaScript

Inline JavaScript refers to code written directly within an HTML document, rather than in a separate .js file. This approach is often used for simple scripts, quick tests, or event handling directly tied to specific HTML elements. There are several ways to run this type of code:

1. Creating an HTML File

This is the most fundamental method. You embed JavaScript directly into an HTML file using <script> tags or within HTML event handler attributes (like onclick, onload, etc.).

How it works:
- Create a text file with an .html extension (e.g., myPage.html).
- Write your HTML structure.
- Insert JavaScript code:
  - Between <script> and </script> tags, typically placed before the closing </body> tag or within the <head>.
  - Or directly inside an HTML tag as the value of an event handler attribute (e.g., <button onclick="alert('Hello!')">).
- Save the file and open it using any web browser. The browser will parse the HTML, find the JavaScript code, and execute it.

Example (myPage.html):

<!DOCTYPE html>
<html>
<head>
    <title>Inline JS Test</title>
</head>
<body>

    <h1>My Web Page</h1>

    <button onclick="alert('Button clicked!')">Click Me</button>

    <script>
        // This script runs when the browser parses this part of the page
        console.log('Hello from the inline script tag!');
        let pageTitle = document.title;
        console.log('The page title is:', pageTitle);
    </script>

</body>
</html>

You'll see the heading and button. Clicking the button triggers the alert. Messages from console.log will appear in the Browser's Developer Console described below.

2. Browser's Developer Console

Every modern web browser includes its set of developer tools, which feature a console. The console allows you to type and execute JavaScript commands directly within the context of the currently loaded web page.

How it works:
- Open any web page in your browser (it could even be the myPage.html file from the previous example, or any website).
- Open the Developer Tools via F12 (Windows/Linux) or Option + Command + J (Mac) and navigate to the "Console" tab.
- Type any valid JavaScript code directly into the console prompt and press Enter. The code executes immediately.
```
// Type these lines one by one into the console and press Enter

alert('Hello directly from the console!');

console.log(document.URL); // Shows the URL of the current page

document.body.style.backgroundColor = 'lightgrey'; // Changes the background color of the current page
```

Open your browser's console on any webpage and type these commands. You'll see the immediate effects (an alert, logged output, page style change).

While this isn't strictly running inline code, it's a way to execute arbitrary JavaScript snippets as if they were inline on the current page.

3. Code Playgrounds

Websites like JSFiddle, CodePen, Replit, JSBin, and others provide online environments specifically designed for quickly writing and testing HTML, CSS, and JavaScript snippets.

You can place the inline code in the HTML tab of these tools and it will work fine. Some code playgrounds do block embeds in HTML section for security reasons in which case you would need to place the HTML and JS code in their respective panels.

These tools are excellent for quick experiments, sharing code examples, and testing ideas without setting up local files.

Running External JavaScript Code

JavaScript inline code is fine for small scripts or learning, but this quickly becomes a mess as you work in the same file. Instead, you’ll want to place your JS code in a new external file like main.js and then reference it in a <script src> element.

To start, create a separate .js file (like main.js) where you'll write your JavaScript code without any <script> tags.

main.js:

// Contents of simple.js
    console.log('Hello from my JavaScript file!');
    
    function sayHello() {
        alert('Hello, JavaScript!');
        }

Then in your HTML file, add <script src="main.js"></script> just before the closing </body> tag.

myPage.html:

  <!DOCTYPE html>
  <html>
      <head>
      <title>My First JavaScript Page</title>
   </head>
  <body>

      <h1>My First JavaScript Page</h1>

      <button onclick="sayHello()">Click Me</button>

      <p>Open the browser's console to see a message!</p>

      <!-- Linking JavaScript file created in the same directory -->
       <script src="simple.js"></script>

   </body>
  </html>

Now open the file myPage.html and you'll see that your JavaScript code has loaded in too.

This is the standard and recommended approach for anything more than simple scripts and has a lot of benefits like:

Cleaner organization
Better caching (browser can cache the JS file separately)
Easier maintenance for larger projects
Follows the principle of separation of concerns

Since browsers run code from top to bottom, the <script> element is usually placed before the closing tag of <body> but for even better performance, you can alternatively place the script in the <head> section with the defer attribute: <script src="main.js" defer></script>. This tells the browser to download the script immediately but wait to run it until the page is ready.

Previous Next