Welcome to JavaScript Learning

JavaScript is a versatile programming language widely used for web development. It enables you to create dynamic and interactive web applications.

Getting Started with JavaScript

To start learning JavaScript, you only need a web browser and a text editor. JavaScript runs directly in the browser, allowing you to experiment and see results in real-time.

Hello World in JavaScript

Let's start with a simple "Hello, World!" program in JavaScript:

console.log("Hello, World!");

This code prints "Hello, World!" to the browser's console. The console.log function is used to output data to the console.

JavaScript Features

Variables and Data Types

JavaScript supports various data types, including numbers, strings, booleans, objects, arrays, and more. Variables are declared using var, let, or const.

Functions

Functions are blocks of code that can be called and reused. They can take parameters and return values.

function add(a, b) {
  return a + b;
}

Conditional Statements (if-else)

Conditional statements are used to make decisions in your code.

if (condition) {
  // Code to run if the condition is true
} else {
  // Code to run if the condition is false
}

Loops (for, while, do-while)

Loops allow you to repeatedly execute a block of code.

// For Loop
for (let i = 0; i < 5; i++) {
  // Code to repeat
}

// While Loop
let i = 0;
while (i < 5) {
  // Code to repeat
  i++;
}

// Do-While Loop
let i = 0;
do {
  // Code to repeat
  i++;
} while (i < 5);

Objects and Object-Oriented Programming

JavaScript is an object-oriented language. You can create and work with objects, which can have properties and methods.

// Object with properties and methods
const person = {
  name: "Alice",
  age: 30,
  greet: function() {
    console.log("Hello, I'm " + this.name);
  }
};

DOM Manipulation

The Document Object Model (DOM) allows you to interact with HTML elements and change their content and attributes dynamically.

// Select and modify an HTML element
const element = document.getElementById("myElement");
element.innerHTML = "New content";

Asynchronous JavaScript (Promises and Async/Await)

JavaScript supports asynchronous programming using Promises and the async/await syntax.

// Example using Promises
const fetchData = fetch("https://api.example.com/data");
fetchData
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

// Example using async/await
async function fetchData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

Modules and ES6 Features

ES6 (ECMAScript 2015) introduced several features such as modules, arrow functions, template literals, and more to enhance JavaScript development.

JavaScript is a rich and dynamic language, and these are just the basics. You can explore further, including libraries and frameworks, to build web applications, games, mobile apps, and even server-side applications.

Promises in JavaScript

Promises are a way to handle asynchronous operations in JavaScript. They represent a value which might be available now or in the future. Promises have three states: pending, resolved (fulfilled), or rejected.

// Example using Promises
const fetchData = fetch("https://api.example.com/data");
fetchData
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

// Example using async/await
async function fetchData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

More JavaScript Features

ES6 Modules

ES6 introduced native support for modules. You can use import and export to organize your code into reusable modules.

// Math.js (Export)
export function add(a, b) {
  return a + b;
}

// App.js (Import)
import { add } from './Math.js';

Arrow Functions

Arrow functions provide a concise syntax for writing anonymous functions. They automatically bind the this value to the surrounding context.

const add = (a, b) => a + b;

Template Literals

Template literals allow you to embed expressions inside strings, making it easy to create dynamic strings.

const name = "Alice";
const greeting = `Hello, ${name}!`;

Spread and Rest Operators

The spread operator (...) is used to expand elements from arrays and objects. The rest operator gathers elements into arrays.

// Spread Operator
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];

// Rest Operator
function sum(...numbers) {
  return numbers.reduce((acc, num) => acc + num, 0);
}