Comprehensive Beginner's Guide to JavaScript Programming
Get the basic of JavaScript programming once and for all, move on to more advance stuff.
JavaScript is a versatile and popular programming language widely used for web development. This guide will introduce you to the basics of JavaScript programming. By the end of this guide, you should be ready to move on to intermediate JavaScript concepts.
Installing JavaScript
JavaScript is built into most web browsers, so you don't need to install it separately. You can write and run JavaScript code directly in your browser's console or use a text editor to create .js files and include them in HTML files.
Executing JavaScript Code
1. Running JavaScript in the Browser Console
You can run JavaScript code interactively using your browser's console. Open your browser, press F12 or right-click on a webpage and select "Inspect," then go to the "Console" tab. Type JavaScript code directly and see the results immediately.
console.log("Hello, World!");
Output:
Hello, World!
2. Running JavaScript in HTML Files
You can write JavaScript code in an HTML file using the <script> tag.
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<script>
console.log("Hello, World!");
</script>
</body>
</html>
3. Using an Integrated Development Environment (IDE)
IDEs provide a convenient environment for writing and executing JavaScript code, with features like syntax highlighting, code completion, and debugging tools. Popular choices include Visual Studio Code, Sublime Text, and WebStorm.
JavaScript Basics
Hello, World!
Let's start with the classic first program.
console.log("Hello, World!");
Output:
Hello, World!
This line of code prints "Hello, World!" to the console. The console.log function is used to display text in the console.
Variables
Variables are used to store data values. A variable is created the moment you first assign a value to it.
let x = 10;
let y = "Hello";
console.log(x);
console.log(y);
Output:
10
Hello
Data Types
JavaScript supports various data types, including strings, numbers, booleans, arrays, and objects.
let age = 25; // Number
let isStudent = true; // Boolean
let fruits = ["apple", "banana", "cherry"]; // Array
let person = { firstName: "John", lastName: "Doe" }; // Object
console.log(typeof age); // number
console.log(typeof isStudent); // boolean
console.log(typeof fruits); // object
console.log(typeof person); // object
Output:
number
boolean
object
object
Operators
Arithmetic Operators
Arithmetic operators perform basic mathematical operations.
let x = 10;
let y = 5;
console.log(x + y); // Addition
console.log(x - y); // Subtraction
console.log(x * y); // Multiplication
console.log(x / y); // Division
console.log(x % y); // Modulus (Remainder)
console.log(x ** y); // Exponentiation
console.log(Math.floor(x / y)); // Floor division
Output:
15
5
50
2
0
100000
2
Comparison Operators
Comparison operators compare two values.
let x = 10;
let y = 5;
console.log(x == y); // Equal to
console.log(x != y); // Not equal to
console.log(x > y); // Greater than
console.log(x < y); // Less than
console.log(x >= y); // Greater than or equal to
console.log(x <= y); // Less than or equal to
Output:
false
true
true
false
true
false
Logical Operators
Logical operators are used to combine multiple conditions.
let a = true;
let b = false;
console.log(a && b); // Logical AND
console.log(a || b); // Logical OR
console.log(!a); // Logical NOT
Output:
false
true
false
Control Flow
If Statements
If statements execute a block of code based on a specified condition.
let x = 10;
if (x > 5) {
console.log("x is greater than 5");
} else if (x === 5) {
console.log("x is 5");
} else {
console.log("x is less than 5");
}
Output:
x is greater than 5
Loops
For Loop
A for loop repeats a block of code a specified number of times.
let fruits = ["apple", "banana", "cherry"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
Output:
apple
banana
cherry
While Loop
A while loop repeats a code block as long as a specified condition is true.
let i = 1;
while (i < 6) {
console.log(i);
i++;
}
Output:
1
2
3
4
5
Functions
Functions are blocks of code that perform a specific task.
function greet(name) {
return "Hello, " + name + "!";
}
console.log(greet("Alice"));
Output:
Hello, Alice!
Arrays
Arrays are used to store multiple values in a single variable.
let fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]); // Accessing the first element
Output:
apple
Objects
Objects are collections of key-value pairs, allowing you to group related data.
let car = {
make: "Toyota",
model: "Corolla",
year: 2021
};
console.log(car.make);
Output:
Toyota
This guide covers the basic concepts of JavaScript that every beginner should know.
If you enjoyed this guide, give it a like and follow us for more tech skill learning. For questions, shoot them in the comments.