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 numbersstring
: Sequences of charactersboolean
: True or false valuesnull
: Represents the absence of any object valueundefined
: 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.