JavaScript Bookmarklet Tutorial for Beginners

Learn JavaScript fundamentals through practical bookmarklet examples - no prior coding experience required!

Welcome to JavaScript!

This tutorial will teach you JavaScript basics by creating fun and useful bookmarklets. You'll learn programming concepts while building tools you can actually use. No setup required - just your web browser!

🎓 What You'll Learn

  • • JavaScript basics: variables, functions, and loops
  • • How to interact with web pages using the DOM
  • • Creating your own bookmarklet tools
  • • Debugging and troubleshooting techniques

Lesson 1: Your First Bookmarklet

Let's start with the simplest possible bookmarklet - one that shows a message:

Hello World Bookmarklet

javascript:alert('Hello, World!');

Breaking it down:

  • javascript: - Tells the browser to run JavaScript
  • alert() - A function that shows a popup message
  • 'Hello, World!' - The text to display (in quotes)
  • ; - Ends the statement

💡 Try It Now!

  1. Copy the code above
  2. Create a new bookmark in your browser
  3. Paste the code as the URL
  4. Name it "Hello World"
  5. Click it to see the message!

Lesson 2: Working with Variables

Variables store information that we can use later. Think of them as labeled boxes:

Using Variables

javascript:(function(){
  var name = prompt('What is your name?');
  var greeting = 'Hello, ' + name + '!';
  alert(greeting);
})();

New concepts:

  • var name - Creates a variable called "name"
  • prompt() - Asks the user for input
  • + - Joins text together (concatenation)
  • (function())(); - Wraps our code safely

Lesson 3: Interacting with Web Pages

The real power of bookmarklets is changing web pages. Let's learn about the DOM (Document Object Model):

Change Page Background

javascript:(function(){
  document.body.style.backgroundColor = 'lightblue';
})();

Understanding the DOM:

  • document - The entire web page
  • body - The main content area
  • style - CSS properties
  • backgroundColor - The background color

Lesson 4: Working with Elements

Web pages are made of elements (paragraphs, images, links, etc.). Let's find and modify them:

Count All Links

javascript:(function(){
  var links = document.getElementsByTagName('a');
  alert('This page has ' + links.length + ' links');
})();

getElementsByTagName('a') finds all link elements

Highlight All Images

javascript:(function(){
  var images = document.getElementsByTagName('img');
  for(var i = 0; i < images.length; i++) {
    images[i].style.border = '5px solid red';
  }
})();

The for loop repeats code for each image

Lesson 5: If Statements and Logic

Programs make decisions using if statements. Let's create a bookmarklet that responds differently based on conditions:

Password Strength Checker

javascript:(function(){
  var password = prompt('Enter a password to check:');
  
  if(password.length < 6) {
    alert('Too short! Use at least 6 characters.');
  } else if(password.length < 10) {
    alert('OK length, but longer is better!');
  } else {
    alert('Good length!');
  }
})();

Logic concepts:

  • if - Checks if something is true
  • else if - Checks another condition
  • else - What to do if all conditions are false
  • .length - Gets the number of characters

Lesson 6: Functions - Reusable Code

Functions are like recipes - they contain steps we can reuse:

Text Transformer

javascript:(function(){
  function makeExciting(text) {
    return text.toUpperCase() + '!!!';
  }
  
  function makeQuiet(text) {
    return text.toLowerCase() + '...';
  }
  
  var input = prompt('Enter some text:');
  var choice = prompt('Make it exciting or quiet? (e/q)');
  
  if(choice === 'e') {
    alert(makeExciting(input));
  } else {
    alert(makeQuiet(input));
  }
})();

Practice Projects

Now let's combine what we've learned into useful bookmarklets:

🎨 Project 1: Reading Mode

Makes any page easier to read

javascript:(function(){
  // Change background to cream
  document.body.style.backgroundColor = '#FFFEF0';
  
  // Make all text dark and larger
  var allElements = document.getElementsByTagName('*');
  for(var i = 0; i < allElements.length; i++) {
    allElements[i].style.color = '#333';
    allElements[i].style.fontSize = '18px';
    allElements[i].style.lineHeight = '1.6';
  }
  
  // Remove distracting images
  var images = document.getElementsByTagName('img');
  for(var j = 0; j < images.length; j++) {
    images[j].style.display = 'none';
  }
})();

📊 Project 2: Word Counter

Counts words on the page

javascript:(function(){
  // Get all text from the page
  var text = document.body.innerText;
  
  // Split into words and count
  var words = text.split(/\s+/);
  var wordCount = words.length;
  
  // Calculate reading time (200 words per minute)
  var readingTime = Math.ceil(wordCount / 200);
  
  alert('Word count: ' + wordCount + '\n' +
        'Reading time: ' + readingTime + ' minutes');
})();

🔗 Project 3: Link Extractor

Lists all links on the page

javascript:(function(){
  var links = document.getElementsByTagName('a');
  var linkList = 'Links on this page:\n\n';
  
  for(var i = 0; i < links.length; i++) {
    if(links[i].href) {
      linkList += links[i].innerText + ': ' + links[i].href + '\n';
    }
  }
  
  // Create a popup with the list
  var popup = window.open('', 'Links', 'width=600,height=400');
  popup.document.write('<pre>' + linkList + '</pre>');
})();

Debugging Tips

🐛 When Things Go Wrong

  • • Check for typos - JavaScript is case-sensitive!
  • • Make sure all quotes and parentheses match
  • • Use console.log() instead of alert() for testing
  • • Open browser DevTools (F12) to see error messages
  • • Start simple and add complexity gradually

JavaScript Concepts Reference

Basic Syntax

  • var x = 5; - Create variable
  • function name() - Create function
  • if (condition) - Make decisions
  • for (i=0; i<10; i++) - Loop code
  • // comment - Add notes

DOM Methods

  • getElementById() - Find by ID
  • getElementsByTagName() - Find by tag
  • querySelector() - Find by CSS
  • .innerHTML - Get/set HTML
  • .style - Change CSS

Next Steps

Congratulations! You've learned JavaScript basics through bookmarklets. Here's how to continue your journey:

  • Practice modifying the examples to do different things
  • Combine concepts to create more complex bookmarklets
  • Learn about arrays, objects, and advanced DOM manipulation
  • Explore browser developer tools for debugging
  • Join online communities to share and learn from others

Keep Learning!

You've taken your first steps into programming. Use our generator to experiment with more complex bookmarklets, or explore advanced techniques.

Try the GeneratorAdvanced Techniques