JAVASCRIPT tag name HTML of JS script

JAVASCRIPT tag name HTML of JS script online ar3school tutorials 2023

In JavaScript, the term "tag" typically refers to HTML elements or, more specifically, to HTML tags that are used to structure and display content on web pages. 

JavaScript is often used to interact with and manipulate these HTML elements, including those identified by their HTML tags. Here are some common ways JavaScript interacts with HTML tags:

The <script> Tag

In HTML, JavaScript code is inserted between <script> and </script> tags.

Example

<script>

document.getElementById("demo").innerHTML = "My First JavaScript";

</script>

JavaScript Functions and Events

A JavaScript function is a block of JavaScript code, that can be executed when "called" for.

For example, a function can be called when an event occurs, like when the user clicks a button.

External JavaScript

Scripts can also be placed in external files:

External file: myScript.js

function myFunction() {

  document.getElementById("demo").innerHTML = "Paragraph changed.";

}

External scripts are practical when the same code is used in many different web pages.

JavaScript files have the file extension .js.

To use an external script, put the name of the script file in the src (source) attribute of a <script> tag:

Example

<script src="myScript.js"></script>

Selecting HTML Elements:

JavaScript can select HTML elements in various ways, such as by their tag name, class, or ID. The document.querySelector() and document.querySelectorAll() methods are commonly used for this purpose.

// Selecting an element by its tag name (e.g., <div>)

const divElement = document.querySelector('div');

// Selecting elements by their class (e.g., <div class="my-class">)

const elementsWithClass = document.querySelectorAll('.my-class');

// Selecting an element by its ID (e.g., <div id="my-id">)

const elementWithId = document.querySelector('#my-id');

Manipulating HTML Content:

 JavaScript can modify the content within HTML elements identified by their tags. You can change text, and attributes, and even add or remove elements dynamically.

// Changing the text content of an element

divElement.textContent = 'New content';

// Changing an element's attribute (e.g., src for <img>)

const imageElement = document.querySelector('img');

imageElement.src = 'new-image.jpg';

// Creating a new HTML element and appending it

const newDiv = document.createElement('div');

newDiv.textContent = 'Newly created div';

document.body.appendChild(newDiv);

Event Handling: 

JavaScript can be used to attach event handlers to HTML elements, making them respond to user interactions (e.g., clicks, mouseovers) or other events (e.g., form submissions).

// Adding a click event listener to a button element

const button = document.querySelector('button');

button.addEventListener('click', function() {

  alert('Button clicked!');

});

Dynamic Styling:

 JavaScript can change the style properties of HTML elements, allowing you to create dynamic and interactive user interfaces.

// Changing an element's CSS style properties

divElement.style.backgroundColor = 'blue';

divElement.style.color = 'white';

Form Handling:

 JavaScript is often used to work with form elements, validate user input, and submit data to a server.

// Accessing form elements and handling form submission

const form = document.querySelector('form');

form.addEventListener('submit', function(event) {

  event.preventDefault(); // Prevents the default form submission

  // Validate and process form data here

});

These are some common ways JavaScript interacts with HTML elements using tags. JavaScript's ability to manipulate and interact with the Document Object Model (DOM) is fundamental to building dynamic and interactive web applications.