What is Vanilla JavaScript: A Brief Introduction with Examples

Sharing is caring!

In the world of web development, JavaScript is a key player. It empowers websites with interactivity and dynamic functionality. While frameworks and libraries like React and Angular have gained popularity, it’s essential to have a strong foundation in pure JavaScript, also known as Vanilla JS. This blog post will provide you with a brief introduction to Vanilla JS, along with practical examples to help you grasp its core concepts.

• Variables and Data Types

Variables are fundamental to any programming language, and Vanilla JS is no exception. In JavaScript, you can declare variables using the “var,” “let,” or “const” keywords.

Here’s an example

var name = "John";
let age = 25;
const PI = 3.14;

JavaScript supports various data types, such as strings, numbers, booleans, arrays, objects, and more. Understanding these data types is crucial when working with JavaScript.

• Conditional Statements and Loops

Conditional statements and loops allow you to control the flow of your code. The most common conditional statement in JavaScript is the “if” statement.

Here’s an example

let num = 10;

if (num > 0) {
  console.log("The number is positive.");
} else if (num < 0) {
  console.log("The number is negative.");
} else {
  console.log("The number is zero.");
}

For loops and while loops are used to iterate over arrays or perform repetitive tasks.

Here’s an example of a for loop

for (let i = 0; i < 5; i++) {
  console.log(i);
}

• Functions

Functions are reusable blocks of code that perform specific tasks. They help organize your code and make it more maintainable. In JavaScript, you can define functions using the “function” keyword. Here’s an example

function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("Alice");

You can also use arrow functions, introduced in ES6, for more concise syntax

const greet = (name) => {
  console.log(`Hello, ${name}!`);
}

greet("Bob");

DOM Manipulation

The Document Object Model (DOM) allows you to manipulate HTML elements using JavaScript. You can select elements, modify their properties, and respond to user interactions.

Here’s an example

<button id="myButton">Click Me</button>

const button = document.getElementById("myButton");
button.addEventListener("click", function() {
  console.log("Button clicked!");
});

In the above example, we select the button element using its ID and add an event listener to log a message when it is clicked.

• AJAX and Fetch

Asynchronous JavaScript and XML (AJAX) enable you to send and receive data from a server without reloading the entire web page. The “fetch” API is commonly used to make AJAX requests. Here’s an example

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log(error);
  });

This code sends a GET request to an API endpoint and logs the response data to the console.

Conclusion

Vanilla JavaScript forms the foundation for web development. By understanding its core concepts, you’ll be better equipped to work with popular JavaScript frameworks and libraries. In this blog post, we covered variables, data types, conditional statements, loops, functions, DOM manipulation, and AJAX using practical examples. This knowledge will help you enhance your JavaScript skills and build interactive web applications with ease. Happy coding!