Online JavaScript Compiler

About Diversify India’s JavaScript Compiler

Diversify India’s JavaScript Compiler is a free, online JavaScript editor and runtime environment that allows you to write, run, and test your JavaScript code. It features a custom console built with HTML, CSS, and JavaScript, offering functionality similar to the console available in standard developer tools.

Additionally, the tool provides editors for HTML and CSS, allowing users to experiment with the Document Object Model (DOM) API and web development concepts.

Key Features

1. Our custom console supports the following standard commands:
   • console.assert(): Tests if an expression is true. Logs an error if the condition is false.
   • console.clear(): Clears the console.
   • clear(): Alias for clearing the console.
   • console.count(): Logs the number of times a particular label has been counted.
   • console.countReset(): Resets the counter associated with a label.
   • console.debug(): Alias for console.log().
   • console.dir(): Alias for console.log().
   • console.dirxml(): Alias for console.log().
   • console.error(): Logs error messages.
   • console.info(): Alias for console.log().
   • console.log(): Logs general output to the console.
   • console.table(): Displays tabular data as a table.
   • console.time(): Starts a timer with a label.
   • console.timeLog(): Logs the current timer value.
   • console.timeEnd(): Stops the timer and logs the total time.
   • console.trace(): Outputs a stack trace.
   • console.warn(): Logs warnings.
2. Additional Console Functionality:
   • Format Specifiers: Supports placeholders like %d, %s, and %o in console.log().
   • Partial Support for Symbols: Displays symbols as object keys but may only show one key when symbols share the same string representation.
3. Performance Optimizations:
   • Hidden object keys are not displayed in console.log() to prevent lag when logging large objects.
   • Browser-based execution ensures real-time output without delays.
4. Support for Latest JavaScript Features:
   • To access the newest ECMAScript features, simply update your browser.
   • You can write code in the JavaScript editor or use the <script> tag in the HTML editor.
5. User-Friendly Features:
   • Run Code: Click the “Run” button to execute your code.
   • Reset Context: Use the “Reset” button to restore the default execution context if critical properties (e.g., console) are deleted.
   • Save and Clear Code: Save your work or clear the saved data from your browser.
   • Offline Mode: Once loaded, our online JS compiler works without an internet connection.
   • Show/Hide Console: Toggle between the console view and browser view for convenience.
6. HTML and CSS Editors:
   • Practice DOM manipulation by writing HTML and CSS alongside JavaScript.
   • Experiment with web development concepts in a sandboxed environment for added security.

Security and Privacy

• Sandboxed Environment: Code runs in a secure sandbox to protect against malicious behavior.
• Client-Side Implementation: Your code and data remain private, as no server-side interaction is involved.

About JavaScript (EcmaScript)

JavaScript is a high-level, dynamic programming language that empowers developers to build interactive and dynamic web applications. It is widely used for both client-side and server-side development.

JavaScript Examples

// The classic first program in any language.
console.log("Hello World");

// Showcasing var, let, and const.
let name = "Ram";
const age = 25;
var country = "India";
sex = "Male";

console.log(name, age, country, sex);

// Demonstrating basic decision-making.
let number = 10;

if (number > 5) {
    console.log("Number is greater than 5");
} else {
    console.log("Number is 5 or less");
}

// Using a loop to print numbers.
for (let i = 1; i <= 5; i++) {
    console.log(`Number: ${i}`);
}

// Creating and using functions.
function greet(name) {
    return `Hello, ${name}!`;
}

console.log(greet("Sita"));

// A modern syntax for defining functions.
const add = (a, b) => a + b;

console.log(add(5, 3)); // Output: 8

// Defining and accessing properties of an object.
const person = {
    name: "Vishnu",
    age: 25,
    greet() {
        return `Hi, I'm ${this.name}`;
    }
};

console.log(person.greet());

// Working with arrays and their methods.
const fruits = ["Apple", "Banana", "Cherry"];

fruits.push("Date"); // Add a fruit
console.log(fruits);

fruits.pop(); // Remove the last fruit
console.log(fruits);

// Handling asynchronous operations.
const fetchData = new Promise((resolve, reject) => {
    setTimeout(() => resolve("Data fetched!"), 2000);
});

fetchData.then((data) => console.log(data));

// Simplifying asynchronous code.
const fetchData = () => {
    return new Promise((resolve) => {
        setTimeout(() => resolve("Completed!"), 2000);
    });
};

const getData = async () => {
    const data = await fetchData();
    console.log(data);
};

getData();

// Using classes and inheritance.
class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(`${this.name} makes a noise.`);
    }
}

class Dog extends Animal {
    speak() {
        console.log(`${this.name} barks.`);
    }
}

const dog = new Dog("Tommy");
dog.speak(); // Output: Tommy barks.

// Handling user interactions.
const button = document.querySelector("button");

button.addEventListener("click", () => {
    alert("Button Clicked!");
});

// Changing HTML content dynamically.
document.body.textContent = "Hello JavaScript!";

// Timers in JavaScript.
setTimeout(() => console.log("This runs after 2 seconds"), 2000);

let counter = 0;
const interval = setInterval(() => {
    counter++;
    console.log(`Counter: ${counter}`);
    if (counter === 5) clearInterval(interval);
}, 1000);

// Replace all word characters (alphanumeric characters or underscores) in a string with 0.
"Hello 123 @$ World _99!".replace(/\w/g, "0");