n1.md

Don't forget to hit the ⭐ if you like this repo.

JavaScript: Fundamentals

JavaScript is a widely-used programming language that is primarily used for creating interactive web pages. It provides the ability to add dynamic and interactive elements to websites, such as form validation, animations, and interactivity. Here are some fundamental concepts of JavaScript:

Variables

Variables are used to store and manipulate data in JavaScript. You can declare variables using the var, let, or const keywords.

// Declaring a variable
var name = "John";

// Changing the value of a variable
name = "Jane";

// Declaring a constant
const pi = 3.14;

Data Types

JavaScript has several built-in data types, including:

• String: Represents a sequence of characters.
• Number: Represents numeric values.
• Boolean: Represents either true or false.
• Array: Represents an ordered list of values.
• Object: Represents a collection of key-value pairs.
• Null: Represents the intentional absence of any object value.
• Undefined: Represents an uninitialized variable.

// Examples of data types
var name = "John";
var age = 25;
var isStudent = true;
var numbers = [1, 2, 3, 4, 5];
var person = { name: "John", age: 25 };
var emptyValue = null;
var undefinedValue;

Operators

JavaScript supports various operators for performing arithmetic, assignment, comparison, and logical operations.

// Arithmetic operators
var sum = 5 + 3;
var difference = 10 - 5;
var product = 2 * 4;
var quotient = 10 / 2;
var remainder = 10 % 3;

// Assignment operators
var x = 5;
x += 2; // equivalent to x = x + 2

// Comparison operators
var isEqual = 5 === 5;
var isNotEqual = 5 !== 3;
var greaterThan = 10 > 5;
var lessThan = 3 < 7;

// Logical operators
var logicalAnd = true && false;
var logicalOr = true || false;
var logicalNot = !true;

Conditional Statements

Conditional statements allow you to perform different actions based on different conditions.

var age = 18;

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

Loops

Loops are used to repeatedly execute a block of code.

// While loop
var i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

// For loop
for (var j = 0; j < 5; j++) {
  console.log(j);
}

Control Flow

Control flow refers to the order in which statements are executed in a program. JavaScript provides several control flow structures, including conditional statements (if, else if, else), loops (for, while), and switch statements.

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

// Loop
for (var i = 0; i < 5; i++) {
  console.log(i);
}

// Switch statement
var day = 2;
switch (day) {
  case 1:
    console.log("Sunday");
    break;
  case 2:
    console.log("Monday");
    break;
  // ... other cases
  default:
    console.log("Invalid day");
}

Functions

Functions are reusable blocks of code that can be invoked to perform a specific task. JavaScript functions can have parameters and return values.

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

// Function invocation
greet("John"); // Output: Hello, John!

// Function with return value
function add(a, b) {
  return a + b;
}

var result = add(3, 5);
console.log(result); // Output: 8

Objects

Objects in JavaScript are used to represent real-world entities and their properties. They consist of key-value pairs and can also contain functions, which are called methods.

// Object literal
var person = {
  name: "John",
  age: 25,
  greet: function () {
    console.log("Hello, my name is " + this.name + ".");
  },
};

console.log(person.name); // Output: John
person.greet(); // Output: Hello, my name is John.

Events

Events are actions or occurrences that happen in the browser, such as a user clicking a button or a web page finishing loading. JavaScript allows you to handle these events and define custom actions to be executed when events occur.

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

DOM Manipulation

The Document Object Model (DOM) is a programming interface that represents the structure of an HTML document. JavaScript can be used to manipulate the DOM, such as adding or modifying elements, changing styles, and handling events.

// DOM manipulation
var heading = document.getElementById("myHeading");
heading.textContent = "New Heading";
heading.style.color = "red";

Error Handling

JavaScript provides error handling mechanisms to catch and handle runtime errors. The try...catch statement is used to catch errors and execute fallback code.

// Error handling
try {
  // Code that might throw an error
  var result = 10 / 0;
} catch (error) {
  console.log("An error occurred: " + error.message);
}

Libraries and Frameworks

JavaScript has a vast ecosystem of libraries and frameworks that provide additional functionalities and simplify web development. Some popular libraries and frameworks include React, Angular, and Vue.js.

// Example using React library
import React from "react";
import

 ReactDOM from "react-dom";

function App() {
  return <h1>Hello, React!</h1>;
}

ReactDOM.render(<App />, document.getElementById("root"));

These are just a few fundamental concepts of JavaScript. The language offers many more features and functionalities for building dynamic web applications.

Note: The code examples provided here assume the usage of JavaScript in a browser environment, where the console.log function is used to print output to the console. In other environments, such as Node.js, the console.log statement may differ.

Contribution 🛠️

Please create an Issue for any improvements, suggestions or errors in the content.

You can also contact me using Linkedin for any other queries or feedback.