JavaScript Tutorial — Complete Beginner's Guide with Examples

JavaScript Tutorial — Complete Beginner's Guide with Examples

JavaScript Tutorial — Complete Beginner's Guide with Examples | TipsInLearning
Home JavaScript Tutorial
Web Development

JavaScript Tutorial

Master JavaScript from scratch — learn variables, functions, DOM manipulation, and events. Complete beginner-friendly guide with practical examples.

12 min read
Beginner
Programming
Free Course

Contents

Course ProgressJavaScript
What You'll Learn
JavaScript fundamentals
Variables and data types
Functions and scope
DOM manipulation
Event handling
Practical examples

JavaScript Introduction

JavaScript is a programming language that makes websites interactive. It runs in browsers and lets you respond to user actions, validate forms, change HTML content dynamically, and update page styles.

Why learn JavaScript?

  • Essential for web development — Required skill for all modern websites
  • High demand — Most sought-after programming skill
  • Beginner friendly — Easy to start, powerful to master

JavaScript Where To

JavaScript can be placed in three different locations in your HTML: inline in elements, inside <script> tags in the HTML, or in external .js files.

Internal JavaScript

Write JavaScript directly inside <script> tags in your HTML file:

HTML — Internal Script
<script>
  let name = "John";
  alert("Hello " + name);
</script>

External JavaScript

Create a separate .js file and link it to your HTML:

HTML — External Script Link
<script src="script.js"></script>

Inline JavaScript

JavaScript inside HTML attributes (not recommended for large projects):

HTML — Inline JavaScript
<button onclick="alert('Clicked!')">Click Me</button>

JavaScript Output

There are several ways to display output in JavaScript: using the console, alert dialogs, HTML content, or browser document.

Methods to display output

JavaScript — Output Methods
// 1. Console (for debugging)
alert("This is an alert box");

// 2. Alert dialog
alert("Hello World");

// 3. Change HTML content
document.getElementById("demo").innerHTML = "Hello!";

// 4. Write to document
document.write("Hello World");
Best Practice: Use console for debugging, innerHTML for changing page content, and avoid document.write() as it overwrites the entire page.

Getting Started

JavaScript can be added to HTML using <script> tags. Internal scripts go in the HTML file, while external scripts are in separate .js files.

HTML — Include JavaScript
<!DOCTYPE html>
<html>
<body>
  <h1>Hello World</h1>
  
  <script>
    let message = "Hello JavaScript";
  </script>
</body>
</html>

Variables & Data Types

Variables store data values. Use let or const in modern JavaScript. const prevents reassignment, while let allows variable changes.

JavaScript — Variables
let name = "John";
let age = 25;
let isActive = true;

const PI = 3.14159;

Data types

TypeExampleDescription
String"Hello"Text data
Number42, 3.14Integer or decimal
Booleantrue, falseTrue or false value
Array[1,2,3]List of values
Object{name: "John"}Key-value pairs

Operators

Operators perform operations on variables. Arithmetic operators include +, -, *, /, and %. Comparison operators (==, ===, >, <) check values.

JavaScript — Operators
let a = 10, b = 5;

let sum = a + b;        // 15
let product = a * b;     // 50
let isGreater = a > b;    // true

Conditional Statements

Use if, else if, and else to execute code based on conditions. This controls program flow based on different scenarios.

JavaScript — Conditionals
let age = 20;

if (age >= 18) {
  let status = "Adult";
} else {
  let status = "Minor";
}

Loops

for loops repeat code a set number of times. while loops continue until a condition is false. Use forEach to loop through arrays.

JavaScript — Loops
// For loop: repeat 5 times
for (let i = 0; i < 5; i++) {
  // Code repeats
}

// Loop through array
let fruits = ["apple", "banana"];
fruits.forEach(function(fruit) {
  // Process each fruit
});

Functions

Functions are reusable code blocks that perform specific tasks. They can accept parameters (inputs) and return values (outputs).

JavaScript — Functions
// Function declaration
function greet(name) {
  return "Hello, " + name;
}

greet("John"); // Returns: "Hello, John"

// Arrow function (modern syntax)
const add = (a, b) => a + b;

DOM Manipulation

The DOM represents HTML as a tree. JavaScript can select elements using getElementById(), querySelector(), and modify their content, styles, and properties.

JavaScript — DOM Methods
// Select elements
let elem = document.getElementById("myId");
let el = document.querySelector(".myClass");

// Change text
elem.textContent = "New text";
elem.innerHTML = "<b>Bold</b>";

// Modify styles
elem.style.color = "red";
elem.classList.add("active");

Event Handling

Events trigger when users interact with the page (click, type, submit). Use addEventListener() to respond to events with JavaScript code.

JavaScript — Events
let btn = document.getElementById("myBtn");

// Click event
btn.addEventListener("click", function() {
  alert("Button clicked!");
});

// Arrow function syntax
btn.addEventListener("click", () => {
  alert("Clicked!");
});

Best Practices

1
Use meaningful names
Write code that's easy to understand
2
Keep functions small
Each function should do one thing well
3
Use const by default
Only use let when value must change
Key Takeaways
1JavaScript makes websites interactive and responsive to users
2Variables store data; use let/const for modern JavaScript
3Functions are reusable code blocks that accept parameters
4DOM manipulation changes HTML content and styles dynamically
5Events respond to user actions like clicks and form submissions
6Practice writing code regularly to master JavaScript

Frequently Asked Questions

JavaScript is a programming language that runs in browsers and makes websites interactive. It responds to user actions, validates forms, and dynamically changes page content.

Variables store data values. Use let or const to declare variables. const prevents reassignment while let allows changes.

A function is a reusable code block that performs a task. Functions can accept parameters and return values.

DOM manipulation is changing HTML elements and their properties using JavaScript.

Events are triggered by user actions like clicks, typing, or form submissions. Use addEventListener to respond.

Start with basics, build small projects, use browser console to test code, and practice regularly.

Post a Comment