⋮

Levoric Learn

Levoric Learn

Docs Frameworks Tutorials Examples Blogs
Follow Us
Twitter Facebook Instagram GitHub Discord LinkedIn

Help Center | Levoric Learn

About Us Privacy Policy Terms and Condtion
View on GitHub

JS Tutorials

What is JS?

JavaScript is a versatile and powerful programming language that is primarily used for enhancing the interactivity of web pages. It is a core technology of the World Wide Web, alongside HTML and CSS. JavaScript enables developers to create dynamically updating content, control multimedia, animate images, and pretty much everything else. JavaScript can be used to create games, interactive websites, and applications, and is an essential tool for modern web development.

Basic Concepts of JS

Before diving into more complex JavaScript concepts, it is important to understand the basic building blocks of the language. These include variables, data types, operators, and control structures.

In this article
In this article

  1. Variables and Data Types

    Variables in JavaScript are used to store data values. The keyword let is used to declare a variable, and const is used to declare a constant variable that cannot be reassigned. JavaScript supports various data types including numbers, strings, objects, and more.

    Here's an example of declaring variables in JavaScript:

    Copy to clipboard
    
let name = "John Doe";
const age = 30;
let isDeveloper = true;

    In the above example, we declared three variables: name is a string, age is a number, and isDeveloper is a boolean.

  2. Data Types

    JavaScript has several data types, including:

    • Primitive Types: Number, String, Boolean, Null, Undefined, Symbol, BigInt
    • Object Types: Object, Array, Function, Date, etc.
    Copy to clipboard
     
let number = 42;
let name = 'Alice';
let isAvailable = false;
let user = null;
let score;
let bigInt = 123456789012345678901234567890n;

  3. Operators

    JavaScript operators are used to perform operations on variables and values. The most common operators are arithmetic operators, such as addition (+), subtraction (-), multiplication (*), and division (/).

    Here is an example of using arithmetic operators in JavaScript:

    Copy to clipboard
    
let x = 10;
let y = 5;
let sum = x + y; // sum is 15
let difference = x - y; // difference is 5
let product = x * y; // product is 50
let quotient = x / y; // quotient is 2

  4. Control Structures

    Control structures are used to control the flow of execution in a program. The most common control structures in JavaScript are conditionals (if, else if, else) and loops (for, while, do while).

    Here's an example of using a conditional statement in JavaScript:

    Copy to clipboard
    
let age = 18;

if (age < 18) {
console.log("You are a minor.");
} else {
console.log("You are an adult.");
}

    In the above example, the if statement checks if the variable age is less than 18. If it is, it prints "You are a minor." to the console. Otherwise, it prints "You are an adult.".

  5. Functions

    Functions are one of the fundamental building blocks in JavaScript. A function is a reusable block of code designed to perform a particular task. JavaScript functions are defined using the function keyword, followed by a name, followed by parentheses ().

    Here's an example of a simple function in JavaScript:

    Copy to clipboard
    
function greet(name) {
return "Hello, " + name + "!";
}

let greeting = greet("Alice");
console.log(greeting); // "Hello, Alice!"

    In the above example, we defined a function named greet that takes a single parameter name and returns a greeting message. We then called the function with the argument "Alice" and logged the result to the console.

  6. Objects and Arrays

    Objects and arrays are important data structures in JavaScript. An object is a collection of properties, and an array is an ordered list of values.

    Here's an example of creating an object in JavaScript:

    Copy to clipboard
    
let person = {
firstName: "John",
lastName: "Doe",
age: 25,
greet: function() {
return "Hello, " + this.firstName + " " + this.lastName;
}
};

console.log(person.greet()); // "Hello, John Doe"

    In the above example, we created an object named person with properties firstName, lastName, age, and a method greet. The method uses this keyword to access the object's properties.

  7. Arrays

    An array is a special variable, which can hold more than one value at a time. Arrays are useful for storing lists of data, such as a list of names or a list of numbers.

    Here's an example of creating an array in JavaScript:

    Copy to clipboard
    
let fruits = ["Apple", "Banana", "Cherry"];

console.log(fruits[0]); // "Apple"
console.log(fruits[1]); // "Banana"
console.log(fruits[2]); // "Cherry"

  8. JavaScript Events

    JavaScript can respond to events on web pages, such as when a user clicks a button, moves the mouse, or submits a form. These events are actions or occurrences that happen in the browser, and JavaScript can be used to handle them.

    Here's an example of handling a button click event:

    Copy to clipboard
    
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Click Event</title>
<script>
function showAlert() {
alert("Button clicked!");
}
</script>
</head>
<body>
<button onclick="showAlert()">Click me</button>
</body>
</html>

  9. JavaScript and the DOM

    The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. JavaScript can interact with the DOM to dynamically update the content and structure of a web page.

    Here's an example of using JavaScript to manipulate the DOM:

    Copy to clipboard
    
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM Manipulation</title>
<script>
function changeText() {
document.getElementById("myText").innerHTML = "Hello, world!";
}
</script>
</head>
<body>
<p id="myText">This is a paragraph.</p>
<button onclick="changeText()">Change Text</button>
</body>
</html>

  10. JavaScript Functions as First-Class Citizens

    In JavaScript, functions are first-class citizens. This means that functions can be assigned to variables, passed as arguments to other functions, and returned from functions. This feature allows for higher-order functions, which can take other functions as arguments or return them.

    Here's an example of a higher-order function in JavaScript:

    Copy to clipboard
    
function greet(name) {
return function() {
console.log("Hello, " + name + "!");
}
}

let greetJohn = greet("John");
greetJohn(); // "Hello, John!"

  11. Asynchronous JavaScript

    Asynchronous programming is a key feature of JavaScript that allows the program to perform tasks such as fetching data from a server without blocking the execution of other tasks. JavaScript provides several ways to handle asynchronous operations, including callbacks, promises, and async/await.

    Here's an example of using a promise in JavaScript:

    Copy to clipboard
    
let promise = new Promise(function(resolve, reject) {
let success = true;
if (success) {
resolve("Operation was successful.");
} else {
reject("Operation failed.");
}
});

promise.then(function(message) {
console.log(message);
}).catch(function(message) {
console.log(message);
});

  12. ES6 Features

    ECMAScript 6 (ES6), also known as ECMAScript 2015, introduced many new features to JavaScript. Some of the key features include let and const, arrow functions, template literals, destructuring, default parameters, and more.

    Here's an example of using some ES6 features:

    Copy to clipboard
    
const greeting = "Hello";
const name = "World";

const message = `${greeting}, ${name}!`;

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

const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

let [first, second] = ["one", "two"];
console.log(first); // "one"
console.log(second); // "two"

Community

Stay up-to-date on the development of Levoric Learn and reach out to the community with these helpful resources.

Join Levoric Learn Community to stay ahead in your learning journey and keep up with the latest trends, insights, and developments in your field of interest. Our community is designed to foster collaboration, knowledge sharing, and continuous growth among enthusiasts, learners, and experts alike.

You can follow & Ask Question at levoriclearn @Twitter