Skillversitas

What Is JavaScript

What Is JavaScript?

JavaScript is a high-level programming language used to make web pages interactive and dynamic. Originally created in 1995 by Brendan Eich at Netscape, JavaScript has since grown into one of the most popular programming languages in the world.

Unlike HTML, which is only for structure, and CSS, which is for appearance, JavaScript is responsible for a web page's behavior and interactivity. Without JavaScript, a website is just a static document with no ability to respond to users.

// Simple example: print a message to the console
console.log("Welcome to Skillversitas!");

Why Is JavaScript Important?

JavaScript has become an extremely important language for several reasons:

  1. Multi-platform — Can be used in browsers, servers, mobile, and IoT
  2. Easy to learn — Relatively simple syntax for beginners
  3. Large ecosystem — Millions of libraries and frameworks available
  4. Active community — Many developers use and contribute to it
  5. Full-stack — Can be used for the frontend AND the backend

Where Is JavaScript Used?

1. Web Development (Frontend)

JavaScript is the backbone of modern web development. Almost every interactive website uses JavaScript.

// Example: change text when a button is clicked
document.getElementById("button").addEventListener("click", function() {
    document.getElementById("message").textContent = "You have logged in!";
});

2. Web Development (Backend)

With Node.js, JavaScript can run on a server without a browser.

// Simple example of a Node.js server
const http = require('http');

const server = http.createServer((req, res) => {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Welcome to the Academic Portal!');
});

server.listen(3000);

3. Mobile Development

Frameworks like React Native and Ionic allow you to build mobile apps with JavaScript.

4. Game Development

Libraries like Phaser.js and Three.js are used to build browser-based games.

5. Desktop Applications

Electron makes it possible to build desktop apps like VS Code, Slack, and Discord using JavaScript.

Case Study: Dynamic Form Validation in an Academic Portal

Imagine a university academic portal that requires a course enrollment form. Students must enter their student ID, select their courses, and enter their GPA. JavaScript can be used to:

  • Validate the student ID format in real time
  • Prevent students from enrolling in courses that do not match their prerequisites
  • Show an error message if the form is incomplete
  • Submit data without reloading the page
// Example: validate a student ID in an academic portal
function validateStudentId(studentId) {
    // Student ID must be 10 digits
    const regex = /^\d{10}$/;

    if (!regex.test(studentId)) {
        return {
            valid: false,
            message: "Student ID must be 10 digits!"
        };
    }

    // Check the enrollment year from the student ID
    const enrollmentYear = "20" + studentId.substring(0, 2);
    const currentYear = new Date().getFullYear();

    if (enrollmentYear > currentYear) {
        return {
            valid: false,
            message: "Enrollment year is not valid!"
        };
    }

    return {
        valid: true,
        message: "Student ID is valid!"
    };
}

// Usage
const studentIdInput = "2024100123";
const result = validateStudentId(studentIdInput);

if (result.valid) {
    console.log("✅ " + result.message);
} else {
    console.log("❌ " + result.message);
}

Example Explanation

The validateStudentId function above performs two stages of validation:

  1. Format validation — Uses a regex to ensure the student ID consists of 10 digits
  2. Logic validation — Extracts the enrollment year from the student ID and checks that it makes sense

Another Example: Enrollment Form Validation

// Example: validate a course enrollment form
const enrollmentForm = {
    studentId: "2024100123",
    name: "John Smith",
    courses: ["Web Programming", "Database", "Algorithms"],
    gpa: 3.75
};

function validateForm(form) {
    const error = [];

    if (!form.studentId || form.studentId.length !== 10) {
        error.push("Student ID must be 10 characters!");
    }

    if (!form.name || form.name.length < 3) {
        error.push("Name must be at least 3 characters!");
    }

    if (!form.courses || form.courses.length === 0) {
        error.push("Select at least 1 course!");
    }

    if (form.courses.length > 6) {
        error.push("Maximum 6 courses per semester!");
    }

    if (form.gpa < 0 || form.gpa > 4) {
        error.push("GPA must be between 0 and 4!");
    }

    return {
        valid: error.length === 0,
        errors: error
    };
}

const validationResult = validateForm(enrollmentForm);
console.log(validationResult);
// { valid: true, errors: [] }

Summary

Aspect Description
Name JavaScript (JS)
Type High-level, interpreted programming language
Paradigm Multi-paradigm (procedural, OOP, functional)
Standard ECMAScript (ES)
Execution Browser (via V8/SpiderMonkey/JSC engine) or Node.js
File ext .js, .mjs, .jsx (React)

JavaScript is far more than a language for making browser alerts. It is a vast ecosystem that spans the frontend, backend, mobile, desktop, and even IoT. From a university's academic portal to large enterprise applications, JavaScript is everywhere.

In the next chapter, we will explore the history of JavaScript and how the language has evolved into what it is today.