Code Example: JavaScript Basics

JavaScript is a powerful programming language that allows you to create interactive and dynamic web pages. In this article, we will explore some basic JavaScript concepts and provide code examples to help you understand how it works.

1. Variables and Data Types

Variables are used to store data values. In JavaScript, you can declare a variable using the let, const, or var keywords. Here’s an example:

// Declare a variable
let greeting = "Hello, World!";

// Display the variable
console.log(greeting); // Output: Hello, World!

Data Types

JavaScript has several data types, including:

  • String: Represents text, e.g., "Hello".
  • Number: Represents integers or decimals, e.g., 42 or 3.14.
  • Boolean: Represents true or false.
  • Array: Represents a collection of values, e.g., [1, 2, 3].
  • Object: Represents a collection of key-value pairs, e.g., {name: "John"}.
// Examples of different data types
let str = "Hello";
let num = 42;
let bool = true;
let arr = [1, 2, 3];
let obj = {name: "John"};

console.log(str, num, bool, arr, obj);

2. Functions

Functions are reusable blocks of code that perform a specific task. You can define a function using the function keyword.

// Define a function
function addNumbers(a, b) {
  return a + b;
}

// Call the function
let result = addNumbers(5, 3);
console.log(result); // Output: 8

Function Parameters

Functions can accept parameters, which are values passed into the function when it is called.

// Function with parameters
function greet(name) {
  return "Hello, " + name + "!";
}

// Call the function with a parameter
let greeting = greet("Alice");
console.log(greeting); // Output: Hello, Alice!

3. Conditionals and Loops

If-Else Statement

Conditionals allow you to execute different blocks of code based on certain conditions.

// If-Else Statement
let age = 18;

if (age >= 18) {
  console.log("You are eligible to vote.");
} else {
  console.log("You are not eligible to vote.");
}

Switch Statement

The switch statement is used to perform different actions based on different conditions.

// Switch Statement
let day = "Monday";

switch (day) {
  case "Monday":
    console.log("It's the start of the week.");
    break;
  case "Friday":
    console.log("It's the end of the week.");
    break;
  default:
    console.log("It's another day.");
}

For Loop

Loops are used to execute a block of code multiple times. The for loop is commonly used when you know how many times you want to loop.

// For Loop
for (let i = 0; i < 5; i++) {
  console.log("The value of i is: " + i);
}

While Loop

The while loop is used when you want to loop until a certain condition is met.

// While Loop
let count = 0;

while (count < 5) {
  console.log("Count: " + count);
  count++;
}

4. Arrays and Objects

Arrays

An array is a special type of variable that can hold multiple values.

// Create an array
let fruits = ["apple", "banana", "orange"];

// Access array elements
console.log(fruits[0]); // Output: apple

// Modify array elements
fruits[2] = "grape";
console.log(fruits); // Output: ["apple", "banana", "grape"]

Objects

An object is a collection of key-value pairs.

// Create an object
let person = {
  name: "John",
  age: 30,
  occupation: "Engineer"
};

// Access object properties
console.log(person.name); // Output: John

// Modify object properties
person.age = 31;
console.log(person); // Output: {name: "John", age: 31, occupation: "Engineer"}

5. Event Handling

JavaScript allows you to handle user interactions on web pages. For example, you can create functions that are triggered when a user clicks a button or submits a form.

<!DOCTYPE html>
<html>
<head>
  <title>Event Handling Example</title>
</head>
<body>
  <button onclick="displayText()">Click Me</button>

  <script>
    // Function to handle click event
    function displayText() {
      alert("Hello, you clicked the button!");
    }
  </script>
</body>
</html>

6. Frequently Asked Questions

Q1: What is JavaScript used for?

JavaScript is primarily used for creating interactive and dynamic web pages. It can be used to manipulate HTML and CSS, handle user input, and communicate with servers.

Q2: How do I add JavaScript to an HTML page?

You can add JavaScript to an HTML page by placing it within <script> tags. You can either include the script directly in the HTML file or link to an external JavaScript file.

Q3: What is the difference between let and const?

let is used to declare variables that can be reassigned, while const is used to declare variables that cannot be reassigned once they are set.

Q4: What is a function in JavaScript?

A function is a reusable block of code that performs a specific task. It can take inputs (parameters), process them, and return an output.

Q5: How do I debug JavaScript code?

You can use the browser’s developer tools to debug JavaScript code. You can set breakpoints, inspect variables, and see the execution flow of your code.

Conclusion

In this article, we have covered some basic JavaScript concepts, including variables, data types, functions, conditionals, loops, arrays, objects, and event handling. By practicing these examples, you can gain a solid foundation in JavaScript programming. Keep experimenting and exploring to enhance your skills!

Table of Contents

→ Index
Scroll to Top