JavaScript Introduction

Introduction to JavaScript

JavaScript is a versatile and powerful programming language, primarily known as the scripting language for Web pages. However, it’s also widely used in many non-browser environments thanks to Node.js. It’s essential for creating dynamic, interactive, and user-friendly web experiences.

This page provides a glimpse into what JavaScript can do.

JavaScript Can Change HTML Content

JavaScript can dynamically alter the content of HTML elements. One common way is by using methods like getElementById() to find an element and then changing its innerHTML or textContent property.

Example:

<!DOCTYPE html>
<html>
<body>

<p id="demo">This is a demonstration paragraph.</p>

<button onclick="changeText()">Click me to change text!</button>

<script>
function changeText() {
  const demoElement = document.getElementById("demo");
  demoElement.innerHTML = "Hello JavaScript! The text has changed.";
}
</script>

</body>
</html>

In this example, clicking the button calls the changeText() function, which updates the content of the paragraph with the ID “demo”.

JavaScript Can Change HTML Attributes

JavaScript can also modify the attributes of HTML elements, such as the src attribute of an image or the href attribute of a link.

Example: Changing an image source

<!DOCTYPE html>
<html>
<body>

<img id="myImage" src="initial_image.png" alt="An image" width="100" height="100">
<br>
<button onclick="changeImage()">Change Image</button>

<script>
let isImageOne = true;
function changeImage() {
  const imageElement = document.getElementById("myImage");
  if (isImageOne) {
    imageElement.src = "new_image.png";
    imageElement.alt = "New Image";
  } else {
    imageElement.src = "initial_image.png";
    imageElement.alt = "Initial Image";
  }
  isImageOne = !isImageOne;
  // Note: For this to work, 'initial_image.png' and 'new_image.png'
  // would need to be actual image files accessible by the browser.
  // As placeholder images are not available, this example illustrates the concept.
  // You can try replacing with valid image URLs like:
  // imageElement.src = 'https://via.placeholder.com/100/0000FF/808080?Text=New';
}
</script>

</body>
</html>

JavaScript Can Change HTML Styles (CSS)

JavaScript can dynamically change the CSS styles of HTML elements, allowing for visual effects and responsive designs.

Example:

<!DOCTYPE html>
<html>
<body>

<p id="styleDemo">This text will change style.</p>

<button onclick="changeStyle()">Change Style</button>

<script>
function changeStyle() {
  const styleDemoElement = document.getElementById("styleDemo");
  styleDemoElement.style.color = "blue";
  styleDemoElement.style.fontSize = "24px";
  styleDemoElement.style.fontWeight = "bold";
}
</script>

</body>
</html>

JavaScript Can Validate Data

JavaScript is often used for client-side form validation, providing immediate feedback to users before data is sent to a server. This improves user experience but should not replace server-side validation for security.

Example: Simple input validation

<!DOCTYPE html>
<html>
<body>

<p>Please input a number between 1 and 10:</p>
<input id="numInput" type="number">
<button onclick="validateInput()">Validate</button>
<p id="validationMessage"></p>

<script>
function validateInput() {
  const numInputElement = document.getElementById("numInput");
  const messageElement = document.getElementById("validationMessage");
  const number = parseInt(numInputElement.value);

  if (isNaN(number)) {
    messageElement.textContent = "Please enter a valid number.";
    messageElement.style.color = "red";
  } else if (number >= 1 && number <= 10) {
    messageElement.textContent = "Input is valid!";
    messageElement.style.color = "green";
  } else {
    messageElement.textContent = "Number must be between 1 and 10.";
    messageElement.style.color = "red";
  }
}
</script>

</body>
</html>

HTML5 also offers built-in validation attributes (e.g., required, type="email", min, max, pattern) that work with the Constraint Validation API, which JavaScript can further interact with.

Key Facts about JavaScript

• Not Java: JavaScript and Java are completely different languages, both in concept and design, despite the similar name.
• ECMAScript Standard: JavaScript was invented by Brendan Eich at Netscape in 1995. It was later standardized as ECMAScript. ECMA-262 is the official standard name.
• Evolution: ECMAScript is updated annually. ES2015 (also known as ES6) was a major milestone, introducing significant new features like let/const, arrow functions, classes, modules, promises, and more. Subsequent annual releases continue to add enhancements.

JavaScript is a dynamic, interpreted (or just-in-time compiled) language with first-class functions. It supports object-oriented, imperative, and functional programming styles.