learn2kode.in

Menu

JavaScript Tutorial

Menu

Introduction to JavaScript

JavaScript is one of the core technologies of the web, alongside HTML and CSS. While HTML structures a webpage and CSS styles it, JavaScript adds interactivity and logic.
With JavaScript, you can:
  • Respond to user actions (clicks, typing, scrolling)
  • Validate forms
  • Create dynamic content
  • Build interactive web apps
  • Develop backend servers (Node.js)
  • Create mobile and desktop apps
JavaScript runs directly in the browser, making it fast and widely supported across all modern devices.

Why Learn JavaScript?

JavaScript is essential for anyone who wants to become a frontend, backend, or full-stack developer.
Key benefits:
  • Beginner-friendly syntax
  • Works on both client and server
  • Massive ecosystem (React, Vue, Node.js)
  • High demand globally (US, UK, India, and beyond)

How JavaScript Works

JavaScript code is executed by the browser’s JavaScript engine (like V8 in Chrome).
Basic flow:
  • Browser loads HTML
  • CSS styles the page
  • JavaScript manipulates content and behavior
JavaScript can:
  • Read and modify HTML elements
  • Change CSS styles
  • Communicate with servers (APIs)
  • Store data locally in the browser

JavaScript Syntax Basics

JavaScript syntax defines how code is written and executed.
Example
Copy Text 
console.log("Hello, World!");
Key rules:
  • Statements end with semicolons (optional but recommended)
  • JavaScript is case-sensitive
  • Uses camelCase for variables and functions

Variables in JavaScript

Variables store data values.
JavaScript uses:
  • var (older, function-scoped)
  • let (block-scoped, recommended)
  • const (block-scoped, cannot be reassigned)
Example
Copy Text 
let name = "John";
const age = 25;

Data Types in JavaScript

JavaScript supports different types of data:

  • String → "Hello"
  • Number → 10
  • Boolean → true
  • Null → null
  • Undefined → undefined
  • Object → { name: "John" }
  • Array → [1, 2, 3]
JavaScript is dynamically typed, meaning variable types can change.

Operators

Operators perform actions on values.
Common types
  • Arithmetic (+, -, *, /)
  • Assignment (=, +=)
  • Comparison (==, ===)
  • Logical (&&, ||)
  • Unary (typeof, !)

Comments in JavaScript

Comments explain code and are ignored by the browser.
Single-line comment
Copy Text 
// This is a comment
Multi-line comment
Copy Text 
/*
  This is a multi-line comment
*/

Functions

Functions are reusable blocks of code.
Example
Copy Text 
function greet(name) {
  return "Hello " + name;
}
Functions help
  • Avoid repetition
  • Organize code
  • Improve readability

Conditionals (if, else, switch)

Conditionals execute code based on conditions.
Example
Copy Text 
if (age >= 18) {
  console.log("Adult");
} else {
  console.log("Minor");
}
They help control program flow.

Loops

Loops repeat code multiple times.

Common loops:

  • for
  • while
  • do...while
Example
Copy Text 
for (let i = 1; i <= 5; i++) {
  console.log(i);
}

Arrays

Arrays store multiple values in one variable.
Example
Copy Text 
let colors = ["red", "blue", "green"];
Arrays are useful for lists, collections, and data handling.

Objects

Objects store data as key-value pairs.
Example
Copy Text 
let user = {
  name: "Alice",
  age: 30
};
Objects represent real-world entities in code.

Strings

Strings represent text.
Example
Copy Text 
let message = "Welcome to JavaScript";
JavaScript provides powerful string methods like:
  • length
  • toUpperCase()
  • includes()

Numbers

JavaScript handles both integers and decimals using the Number type.
Example
Copy Text 
let price = 99.99;
Built-in math functions allow rounding, random numbers, and calculations.

Dates

The Date object handles date and time.
Example
Copy Text 
let today = new Date();
Useful for:
  • Timestamps
  • Scheduling
  • Time-based logic
JavaScript Syntax