Javascript tutorial

JavaScript is a powerful, versatile programming language widely used for web development. In this 15-minute guide, we’ll cover the basics of JavaScript, focusing on key concepts like variables, functions, conditionals, loops, and events. By the end, you’ll have a solid foundation to start writing your own JavaScript code.

Table of Contents:

  1. What is JavaScript?
  2. Basic Syntax
  3. Variables
  4. Functions
  5. Conditionals
  6. Loops
  7. Events

1. What is JavaScript?

JavaScript is a scripting language that enables dynamic content on websites. It can manipulate HTML and CSS, allowing for interactivity like form validation, animations, and user input handling.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Basic JavaScript Example</title>
</head>
<body>
    <h1 id="header">Hello, World!</h1>
    <button onclick="changeText()">Click Me</button>

    <script>
        function changeText() {
            document.getElementById("header").innerText = "You clicked the button!";
        }
    </script>
</body>
</html>

In this example, when the button is clicked, the text in the <h1> element changes.

2. Basic Syntax

JavaScript code is written inside <script> tags in HTML or in external .js files. Statements end with a semicolon (;), and the language is case-sensitive.

3. Variables

Variables store data values and can be declared using var, let, or const.

  • var is function-scoped.
  • let is block-scoped.
  • const is block-scoped but used for constant values.

Example:

let name = "John";   // Declares a variable using let
const age = 25;      // Declares a constant

4. Functions

Functions are blocks of code designed to perform a specific task. They can take parameters and return values.

Example:

function greetUser(name) {
    return "Hello, " + name;
}

let greeting = greetUser("Alice");
console.log(greeting);  // Output: "Hello, Alice"

Here, the greetUser function takes a parameter name and returns a greeting message.

5. Conditionals

Conditional statements allow decision-making in JavaScript based on certain conditions. The most common statements are if, else if, and else.

Example:

let time = 15;

if (time < 12) {
    console.log("Good morning!");
} else if (time < 18) {
    console.log("Good afternoon!");
} else {
    console.log("Good evening!");
}
// Output: "Good afternoon!"

6. Loops

Loops are used to execute a block of code repeatedly. Common loops include for, while, and do...while.

Example of a for loop:

for (let i = 1; i <= 5; i++) {
    console.log(i);
}
// Output: 1, 2, 3, 4, 5

7. Events

JavaScript can respond to user interactions, known as events, such as clicks, key presses, or page loads.

Example of an event listener:

document.getElementById("myButton").addEventListener("click", function() {
    alert("Button clicked!");
});

In this example, an alert box will appear when the button with the ID myButton is clicked.

Conclusion

In this brief tutorial, we’ve introduced the basics of JavaScript, including variables, functions, conditionals, loops, and events. JavaScript is a vast language, but with these core concepts, you’re ready to start building interactive web pages. Continue practicing, and you’ll soon be creating dynamic, user-friendly websites!

Next Steps:

  • Experiment with DOM manipulation.
  • Explore JavaScript frameworks like React or Vue.
  • Learn about JavaScript ES6 features like arrow functions and promises.
Scroll to Top