Outdated JavaScript Books: What to Toss

If your JavaScript book was published before 2016, it likely doesn't cover modern JavaScript (often called ES6 or ECMAScript 2015 and later). These books may teach outdated techniques like var instead of let and const, lack arrow functions, classes, promises, and newer syntax like template literals. Modern JavaScript is cleaner, faster, and easier to work with—especially for beginners.

What Can JavaScript Do?

JavaScript is a powerful scripting language that runs in the browser. It can:

• Change HTML and CSS after the page loads
• Respond to user actions like clicks, typing, or mouse movement
• Validate form input before it's sent to the server
• Create animations and interactive graphics
• Send and receive data from servers (AJAX / APIs)
• Build entire web apps (like calculators, games, or dashboards)

First JavaScript Example

This code writes a message to the browser console:

<script>
  console.log("Hello, world!");
</script>

Basic Concepts You Should Know

• Variables: Store data. Use let or const.
• Functions: Group code into reusable blocks.
• Events: Trigger code when the user does something.
• DOM: JavaScript can read and change HTML with the Document Object Model.
• Objects: Used to group related values and functions.
• Arrays: Store lists of items.
• Conditionals: Make decisions using if, else, and switch.
• Loops: Repeat actions with for, while, or forEach.
• Scope: Determines where variables and functions are accessible (global vs local).
• Template Literals: Embed variables in strings using backticks and ${}.
• Arrow Functions: A compact way to write functions using =>.
• Classes: Define reusable blueprints for objects.

20 Useful JavaScript Snippets (Commented)

// 1. Alert popup
alert("Welcome to my site!");

// 2. Change text of an element
// HTML: 
Old Text
document.getElementById("demo").innerText = "New Text";

// 3. Toggle visibility of an element
let box = document.getElementById("box");
box.style.display = (box.style.display === "none") ? "block" : "none";

// 4. Click event
// HTML: Click Me
document.getElementById("btn").addEventListener("click", function() {
  alert("Button clicked!");
});

// 5. Form validation
let name = document.getElementById("name").value;
if(name === "") {
  alert("Name is required");
}

// 6. Current date
let now = new Date();
console.log(now.toString());

// 7. Loop array
let colors = ["red", "green", "blue"];
colors.forEach(color => console.log(color));

// 8. Fade in element
// CSS: .fade-in { opacity: 1; transition: opacity 1s; }
document.getElementById("fadeTarget").classList.add("fade-in");

// 9. Prompt input
let user = prompt("What is your name?");
alert("Hello, " + user);

// 10. Random number
let number = Math.floor(Math.random() * 10) + 1;
console.log(number);

// 11. Change background color
document.body.style.backgroundColor = "lightblue";

// 12. Count clicks on a button
let count = 0;
document.getElementById("clickMe").onclick = () => {
  count++;
  console.log("Clicked " + count + " times");
};

// 13. Change image source
// HTML: 
document.getElementById("myImg").src = "new.jpg";

// 14. Add item to list
let ul = document.getElementById("myList");
let li = document.createElement("li");
li.textContent = "New item";
ul.appendChild(li);

// 15. Set a timer
setTimeout(() => {
  alert("Time's up!");
}, 3000);

// 16. Update clock
document.getElementById("clock").innerText = new Date().toLocaleTimeString();

// 17. Mouseover effect
document.getElementById("hoverMe").onmouseover = () => {
  console.log("Mouse is over");
};

// 18. Scroll event
window.onscroll = () => {
  console.log("Scrolling...");
};

// 19. Use template literal
let firstName = "Sam";
console.log(`Hello, ${firstName}!`);

// 20. Use arrow function
let square = x => x * x;
console.log(square(4));

Using the Same Menu in Multiple HTML Files

If you want the same navigation menu on many pages, you have three options:

Option 1: Manual Copy

Paste the same menu HTML into each file. Simple but hard to maintain.

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="tutorial.html">Tutorial</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

Option 2: JavaScript Include

Store your menu in menu.html and load it using JavaScript:

// In your main HTML file
<div id="menu-placeholder"></div>
<script>
fetch("menu.html")
  .then(response => response.text())
  .then(data => {
    document.getElementById("menu-placeholder").innerHTML = data;
  });
</script>

Option 3: PHP Includes

If your host supports PHP, create menu.php and include it in each page:

<?php include 'menu.php'; ?>

Change file extensions from .html to .php.

Tip: Use Option 2 if you're on basic hosting without PHP. Use Option 3 for professional websites with server-side support.

Common JavaScript Commands

Here is a list of some common JavaScript keywords and functions you will use often:

• let / const – Declare variables (changeable or constant)
• function – Define reusable code blocks
• console.log() – Print to the browser console for debugging
• document.getElementById() – Access an HTML element by its ID
• addEventListener() – Attach a function to run when an event occurs
• setTimeout() – Run code once after a delay
• setInterval() – Run code repeatedly with a delay between runs
• alert() – Show a popup alert box
• prompt() – Ask the user to enter something
• Math.random() – Generate a random number between 0 and 1
• Array.forEach() – Loop through an array
• if / else – Run different code depending on conditions
• return – Send back a result from a function

How to Comment in JavaScript

Comments are lines of text that JavaScript ignores when it runs. They're useful for explaining code.

• Single-line comment:

// This is a comment

• Multi-line comment:

/*
  This is a multi-line comment
  It can go over many lines
*/

You're now ready to build your own JavaScript programs. Try experimenting with these snippets by copying them into an HTML document with a <script> tag. You can also explore:

• How to write JavaScript in external files (e.g., <script src="script.js"></script>)
• How to use modern tools like browser developer tools to test code
• Learning frameworks like React, Vue, or Svelte for advanced apps