JS Introduction – Basics

JavaScript is a versatile and powerful programming language primarily used for creating interactive web pages. It’s the language of the web, enabling dynamic content and engaging user experiences. If you’re new to programming, understanding the fundamentals of JavaScript is a fantastic starting point. This tutorial will cover the essential basics, giving you a solid foundation to begin your JavaScript journey.

What is JavaScript?

JavaScript is primarily a scripting language. This means it’s not a compiled language like C++ or Java, where the code is translated into machine code before execution. Instead, JavaScript is executed directly by a web browser (like Chrome, Firefox, or Safari) or a JavaScript runtime environment (like Node.js). It’s often used to add interactivity and behavior to websites, applications, and even mobile apps.

Basic Syntax

Let's start with the core syntax. Here's a breakdown of essential elements:

• Variables: Variables are used to store data. You declare a variable by assigning it a value.

  let myName = "Alice";
  let age = 30;
  console.log(myName);
  console.log(age);
  

• Data Types: JavaScript has several data types:
  • Number: Represents numbers (e.g., 10, 3.14).
  • String: Represents text (e.g., "Hello", "JavaScript").
  • Boolean: Represents truth values (true or false).
  • Object: Represents collections of key-value pairs (e.g., { name: "Bob", age: 25 }).
  • Array: An ordered list of values (e.g., [1, 2, 3]).
• Comments: Comments are used to explain your code. They are ignored by the JavaScript interpreter.

  // This is a comment.
  let x = 10; // This is a comment
  

Basic Operations

• Assignment: Assigning a value to a variable.

  let message = "Welcome to JavaScript!";
  console.log(message);
  

• Arithmetic Operators: Used for performing calculations.

  let sum = 5 + 3;
  console.log(sum);
  

• Comparison Operators: Used to compare values.

  let isEven = 10 % 2 === 0; // Check if 10 is even
  console.log(isEven);
  

Control Flow

JavaScript offers control flow statements to control the order in which code is executed.

• if Statements: Execute code conditionally.

  let score = 75;
  if (score >= 70) {
    console.log("You passed!");
  } else {
    console.log("You need to improve your score.");
  }
  

• for Loops: Repeat a block of code a specific number of times.

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

• while Loops: Repeat a block of code as long as a condition is true.

  let count = 0;
  while (count < 3) {
    console.log(count);
    count++;
  }
  

Working with DOM (Document Object Model)

The DOM is a way for JavaScript to interact with HTML elements in a web page. You can manipulate the DOM to change the content and structure of a webpage.

// Get the body element
let body = document.body;

// Change the text content of the body
body.innerHTML = "<h1>Hello, world!</h1>";

// Add a new element to the body
document.body.appendChild(new Element("p"));

Basic Events

Events are actions that happen when something happens on a webpage. JavaScript can listen for these events and respond to them.

// Click event
document.getElementById("myButton").addEventListener("click", function() {
  alert("Button clicked!");
});

// Mouseover event
document.getElementById("myElement").addEventListener("mouseover", function() {
  console.log("Mouse over!");
});