Introduction to JavaScript

Welcome to the JavaScript tutorial! JavaScript is the programming language of the web. In this tutorial, you'll learn how to make your websites interactive, dynamic, and user-friendly.

What is JavaScript?

JavaScript is a high-level, interpreted programming language that allows you to implement complex features on web pages. It's the third layer of standard web technologies, alongside HTML (content) and CSS (presentation). JavaScript enables you to create dynamically updating content, control multimedia, animate images, and much more.

Why Learn JavaScript?

Makes websites interactive and dynamic
Essential for modern web development
Works on both client and server sides (Node.js)
Huge demand in the job market
Versatile for web, mobile, and desktop applications

Your First JavaScript Code

Let's start with a simple JavaScript example:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>My First JavaScript</title>

</head>

<body>

    <h1>Hello, JavaScript!</h1>

    <p id="demo">This is a paragraph.</p>

    <button onclick="changeText()">Click Me!</button>

    <script>

        function changeText() {

            document.getElementById("demo").innerHTML = "JavaScript changed this text!";

        }

    </script>

</body>

</html>

Key Points to Remember

JavaScript is case-sensitive (myVariable is different from myvariable)
JavaScript statements end with semicolons (;)
JavaScript can be placed in <script> tags or external .js files
JavaScript can change HTML content, attributes, and styles
JavaScript can respond to user events like clicks, form submissions, etc.

JavaScript Versions

JavaScript has evolved significantly over the years. The modern version, often called ES6 or ECMAScript 2015 and beyond, introduced many powerful features like arrow functions, template literals, destructuring, and more. In this tutorial, we'll focus on modern JavaScript while noting important compatibility considerations.

Practice Exercise

Try creating your own HTML file with the JavaScript example above. Save it and open it in your web browser. Click the button and see what happens!

Hint!

You can use the browser console (F12 or right-click > Inspect > Console) to test JavaScript code directly. Try typing console.log("Hello, JavaScript!"); in the console.