Javascript Fundamentals

JavaScript Fundamentals: Adding Interactivity to Your Website

JavaScript is the programming language that makes websites interactive. Let's explore the core concepts every web developer should know.

1. Including JavaScript in HTML

You can add JavaScript to your HTML in two ways:

Internal JavaScript

<script>
  // Your JavaScript code here
  alert('Hello World!');
</script>

External JavaScript

<script src="script.js"></script>

2. Basic JavaScript Concepts

Variables

let message = 'Hello';
const PI = 3.14;
var count = 0;

Functions

function greet(name) {
  return 'Hello ' + name;
}

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

DOM Manipulation

// Change content
document.getElementById('demo').innerHTML = 'New content';

// Handle click event
document.querySelector('button').addEventListener('click', function() {
  alert('Button clicked!');
});

3. Simple Project: Interactive Counter

Let's create a simple counter that increments when a button is clicked:

<div>
  <p id="counter">0</p>
  <button id="increment">Increment</button>
</div>

<script>
  let count = 0;
  const counter = document.getElementById('counter');
  const btn = document.getElementById('increment');
  
  btn.addEventListener('click', () => {
    count++;
    counter.textContent = count;
  });
</script>

This is just the beginning of what you can do with JavaScript. Stay tuned for more advanced tutorials!