• JavaScript Basics

  • Operators in JavaScript

  • Conditional Statements in JavaScript

  • JavaScript Strings

  • JavaScript Arrays

  • JavaScript Loop

  • JavaScript Functions

  • Conclusion

JavaScript Script Tag

<script> Tag in JavaScript

The <script> tag in HTML allows us to embed JavaScript code directly into a webpage. This is how JavaScript is connected to HTML, letting you add interactive functionality, such as dynamic text or clickable buttons.

JavaScript with <script> Tags

To insert JavaScript code, place it between opening and closing <script> tags:

javascript
1<script>
2  document.getElementById("content").textContent = "This is my first JavaScript example!";
3</script>

Here, JavaScript finds the HTML element with an id of "content" and changes its text.

Note on Type Attribute

Older JavaScript examples sometimes include type="text/javascript" within <script> tags, but this is unnecessary now, as JavaScript is the default scripting language for HTML.

JavaScript Functions and Events

In JavaScript, functions are blocks of reusable code that run only when called. A function can respond to various events, such as a user clicking a button or moving their mouse. Here’s a simple example where a function is triggered by a button click:

javascript
1function displayMessage() {
2  document.getElementById("message").textContent = "You clicked the button!";
3}

To trigger this function, you could link it to a button:

javascript
1<button onclick="displayMessage()">Click me</button>

<script> Tags in HTML

JavaScript code can be placed in both the <head> and <body> sections of an HTML page. Where you place it can affect how the page loads and performs.

JavaScript <head>

Placing JavaScript in the <head> section is useful for functions that should be available right from the start, even before the rest of the page loads. Here’s an example where the script is placed in the <head>:

javascript
1<!DOCTYPE html>
2<html>
3<head>
4  <script>
5    function changeText() {
6      document.getElementById("example").textContent = "Text changed from JavaScript!";
7    }
8  </script>
9</head>
10<body>
11  <h2>JavaScript in Head Example</h2>
12  <p id="example">This text will change when the button is clicked.</p>
13  <button onclick="changeText()">Click to Change Text</button>
14</body>
15</html>

JavaScript <body>

When placed in the <body>, JavaScript can work directly with elements already rendered on the page, improving performance. Here’s an example:

javascript
1<!DOCTYPE html>
2<html>
3<body>
4  <h2>JavaScript in Body Example</h2>
5  <p id="example">This text will also change with JavaScript.</p>
6  <button onclick="changeContent()">Click Me</button>
7  
8  <script>
9    function changeContent() {
10      document.getElementById("example").textContent = "Changed from JavaScript in the body!";
11    }
12  </script>
13</body>
14</html>

Placing JavaScript at the end of <body> often improves load times because it lets the HTML content load before processing JavaScript.

JavaScript External Files

External JavaScript files allow you to keep JavaScript code separate from HTML, making both easier to read and maintain. This is particularly useful when the same JavaScript code is used across multiple pages.

Create an External JavaScript File

To create an external JavaScript file, save your code with a .js extension, such as scripts.js:

javascript
1function updateParagraph() {
2  document.getElementById("info").textContent = "This content was updated using external JavaScript!";
3}

Link to it in HTML with the src attribute inside the <script> tag:

javascript
1<script src="scripts.js"></script>

You can place this <script> tag in either the <head> or <body> sections, as needed. External JavaScript files don’t require <script> tags within the file itself.

Multiple External Scripts

To include multiple JavaScript files, add each with its own <script> tag:

javascript
1<script src="main.js"></script>
2<script src="helpers.js"></script>

JavaScript External Files with Different Paths

You can reference external scripts in three ways:

  1. Full URL: Direct link to a remote server file:
javascript
1<script src="https://example.com/scripts/library.js"></script>

2. Relative Path: Points to a specific folder:

javascript
1<script src="/assets/js/scripts.js"></script>

3. No Path: Looks for the file in the same directory:

javascript
1<script src="localScript.js"></script>

Frequently Asked Questions