DEV Community

bala senthil

Posted on Mar 17

JavaScript Basics Every Developer Must Know (Complete Beginner Guide)

#javascript #webdev #tutorial #beginners

Learn the essential JavaScript basics every developer must know, including variables, data types, functions, arrays, and DOM manipulation. This beginner-friendly guide with real-world examples will help you build a strong foundation and start creating interactive web applications.

Real-Time Example: Simple User Greeting App

This example combines variables, functions, events, and DOM manipulation—all core JavaScript basics.

HTML Syntax

<section class="d-flex justify-content-center mt-5 mb-2">
        <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Enter your name" id="userInput">
            <button onclick="greetMessage()" type="button" class="btn btn-success">Click me</button>
        </div>
</section>
<div class="d-flex justify-content-center">
     <p id="greetMessage" class="fw-bold"></p>
</div>

Script

let message = 'Welcome';

function greetMessage(){
  const inputMessage = document.getElementById('userInput').value;

  if(inputMessage === ''){
    document.getElementById('greetMessage').innerText = 'Please enter your name';
    return
  }

  document.getElementById('greetMessage').innerText = `${message} ${inputMessage}`
}

Output: Before Click

Output: After button click

Variables (let message)

Variables are used to store data that can be reused throughout your program. In this example, the message variable holds a default greeting text that is later combined with user input to create a personalized message.

Functions (greetMessage())

Functions help organize your code into reusable blocks. The greetMessage() function is triggered when the user clicks a button, making it easy to handle logic like reading input and updating the UI in one place.

DOM Manipulation (getElementById)

JavaScript can interact directly with HTML elements using the DOM (Document Object Model). With getElementById, we access elements like the input field and paragraph, allowing us to read user data and display results dynamically.

Events (onclick)

Events make web pages interactive. In this example, the onclick event listens for a button click and triggers the greetMessage() function, creating a smooth user interaction.

Conditions (if (inputMessage === ""))

Conditions allow your program to make decisions. Here, we check if the input field is empty and display a warning message instead of proceeding, improving user experience and preventing errors.

Template Literals (${message}, ${inputMessage})

Template literals provide an easy and readable way to combine strings and variables. Instead of using complex concatenation, we use backticks (`) to embed variables directly into the string for a cleaner output.

This example brings together multiple JavaScript basics to show how they work in a real-world scenario. By combining variables, functions, DOM manipulation, and events, you can create interactive and user-friendly web applications.

Check out more web development articles by clicking the link below.