JS 101 Fundamentals

Introduction to JavaScript programming language, its syntax and basic concepts.

2025-02-14T05:03:55.160Z Back to posts

Introduction to JavaScript

JavaScript is a high-level, dynamic, and interpreted programming language that is widely used for client-side scripting on the web. It was created by Brendan Eich in 1995 while he was working at Netscape Communications.

Why JavaScript?

  • Dynamic Nature: JavaScript allows you to change the behavior of your code dynamically, making it easier to create interactive and responsive web pages.
  • Ubiquity: JavaScript is supported by all modern browsers and is widely used for both front-end and back-end development.
  • Versatility: JavaScript can be used for creating desktop applications, mobile apps, and server-side applications using technologies like Node.js.

Basic Syntax

JavaScript syntax is relatively simple and easy to learn. Here are some basic elements of JavaScript syntax:

Variables

// Declare a variable
let name = "John Doe";

// Assign a value to a variable
name = "Jane Doe";

Data Types

JavaScript has several built-in data types, including:

  • number: Whole numbers or decimal numbers
  • string: Sequences of characters
  • boolean: True or false values
  • null: Represents the absence of any object value
  • undefined: Represents an uninitialized variable
// Declare a number variable
let age = 30;

// Declare a string variable
let name = "John Doe";

// Declare a boolean variable
let isAdmin = true;

Operators

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

// Arithmetic operators
let sum = 10 + 5; // Addition
let difference = 10 - 5; // Subtraction
let product = 10 * 5; // Multiplication
let quotient = 10 / 5; // Division

// Comparison operators
let isGreater = 10 > 5; // Greater than
let isEqual = 10 === 5; // Equal to
let isNotEqual = 10 !== 5; // Not equal to

// Logical operators
let isAdmin = true;
let isModerator = false;

let canManage = isAdmin && isModerator; // Logical AND
let canView = isAdmin || isModerator; // Logical OR

Control Structures

Control structures determine the flow of your program’s execution.

// If-else statement
if (isAdmin) {
console.log("You are an admin.");
} else {
console.log("You are not an admin.");
}

// Switch statement
let day = "Monday";
switch (day) {
case "Monday":
console.log("Today is Monday.");
break;
case "Tuesday":
console.log("Today is Tuesday.");
break;
default:
console.log("Today is not Monday or Tuesday.");
}

Functions

Functions allow you to reuse code and make your programs more modular.

// Function declaration
function greet(name) {
return `Hello, ${name}!`;
}

// Function expression
let sayGoodbye = function (name) {
return `Goodbye, ${name}!`;
};

// Function call
console.log(greet("John Doe")); // Output: Hello, John Doe!
console.log(sayGoodbye("Jane Doe")); // Output: Goodbye, Jane Doe!

Objects

Objects are collections of properties that can be used to store and manipulate data.

// Object literal
let person = {
name: "John Doe",
age: 30,
occupation: "Software Engineer"
};

// Accessing object properties
console.log(person.name); // Output: John Doe
console.log(person.age); // Output: 30

// Updating object properties
person.occupation = "Backend Developer";
console.log(person.occupation); // Output: Backend Developer

Arrays

Arrays are collections of values that can be used to store and manipulate data.

// Array literal
let colors = ["Red", "Green", "Blue"];

// Accessing array elements
console.log(colors[0]); // Output: Red
console.log(colors[colors.length - 1]); // Output: Blue

// Updating array elements
colors.push("Yellow");
console.log(colors); // Output: [ 'Red', 'Green', 'Blue', 'Yellow' ]

Events

Events are used to respond to user interactions, such as mouse clicks or keyboard input.

// Add event listener to an element
document.getElementById("myButton").addEventListener("click", function () {
console.log("Button clicked!");
});

// Remove event listener from an element
document.getElementById("myButton").removeEventListener("click", function () {
console.log("Button removed from event listener!");
});

Conclusion

JavaScript is a powerful and versatile programming language that is widely used for client-side scripting on the web. It has a rich syntax, various data types, operators, control structures, functions, objects, arrays, and events. With practice and experience, you can master JavaScript and build robust, interactive, and responsive web applications.