Introduction to Javascript - JS 101

JavaScript is the programming powerhouse that’s powering everything from your favorite interactive websites to the next big mobile app.

Born in just one week, JavaScript’s come a long way from its humble beginnings as a browser sidekick. Today, it’s the master of the web, breathing life into dynamic web pages, crafting complex web applications, and even venturing into the backend with Node.js.

Javascript is

Single-threaded – But has Promise for Async stuff
Interpreted or just-in-time compiled? Both!
Prototype-based
Dynamic and ready for anything
Garbage collected – no memory mess to stress

Enough theory, let’s build something that gets you hands-on experience with Javascript.

Experimenting

I’ll try my best to make this fun and interesting. All these experiments don’t require you to install anything new, just your regular browser Google Chrome, Edge, or Firefox. You can just open the developer tools (Guide on where to find it). Let’s begin now.

Experiment 1: Let’s Rainbowify Google Search

Imagine typing in “cats” and seeing a rainbow explosion of results! This is where you’ll learn to change the color of text based on what you type.

Hint: Use the window.onload and document.getElementById functions to find the search bar element. Then, play with the style.color property to unleash the rainbow!

window.onload = function() {
  const searchBar = document.getElementById("gbqfq");
  searchBar.addEventListener("input", () => {
    const colors = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"];
    const randomColor = colors[Math.floor(Math.random() * colors.length)];
    searchBar.style.color = randomColor;
  });
};

Don’t be afraid to make mistakes. Every bug you fix is a step closer to becoming a JavaScript Master

Experiment 2: Interactive Countdown Timer

Tired of staring at a plain old clock? Build your countdown timer for anything – your coffee break, a study session, or even the next pizza delivery! You’ll use setInterval to update the timer every second, and maybe even throw in some fun animations for a countdown party.

let timerCount = 10; // Set your countdown time here
const countdownDisplay = document.getElementById("countdown");

function startCountdown() {
  setInterval(() => {
    countdownDisplay.textContent = timerCount;
    timerCount--;
    if (timerCount < 0) {
      clearInterval(); // Stop the countdown when it reaches 0
      countdownDisplay.textContent = "Time's up!";
    }
  }, 1000); // Update every second
}

// Call the startCountdown function to initiate the countdown

Experiment 3: Speakify Google

Make Google talk to you! Learn how to use the TextToSpeech API to turn search results into spoken words. Imagine asking Google “What’s the weather?” and hearing the answer in a funny robot voice. Bonus points for making it sing Happy Birthday to you!

function speakResults() {
  const results = document.getElementsByClassName("g"); // Assuming search results have this class
  const firstResultText = results[0].textContent;
  const utterance = new SpeechSynthesisUtterance(firstResultText);
  speechSynthesis.speak(utterance);
}

Experiement: 4 Dancing Emojis

Turn those static emojis into a lively ballet! Use addEventListener to listen for mouse clicks on emoji buttons, then use style.transform it to make them jump, spin, or do the cha-cha. You’ll be the coolest kid in the browser with your emoji dance party.

const emojiButtons = document.querySelectorAll(".emoji-button"); // Assuming emoji buttons have this class

emojiButtons.forEach(button => {
  button.addEventListener("click", () => {
    button.style.transform = "rotate(360deg)"; // Add more transformations for fun!
  });
});

Experiment: 5 Secret Message Decoder

Want to be a secret agent? Build a simple decoder that scrambles and unscrambles messages. You’ll learn about string manipulation using split, join, and maybe even some basic encryption techniques. Remember, with great coding power comes great responsibility – use it for good!

These are just a few ideas to get your coding engines revving. Don’t be afraid to experiment, break things (safely!), and have fun! Remember, coding is like a delicious cake – the more you experiment, the tastier it gets. So, grab your coding spoon and start baking some browser magic!

function scrambleMessage(message) {
  const scrambled = message.split("").reverse().join(""); // Simple example, explore more techniques!
  return scrambled;
}

function unscrambleMessage(scrambled) {
  return scrambleMessage(scrambled); // Use the same function for both scrambling and unscrambling
}

Bonus tip: Check out online resources like CodePen and JSFiddle for beginner-friendly coding playgrounds. They’ll help you test your code snippets without messing with your actual website.

Don’t forget to have fun! Experiment, make mistakes, and learn from the awesome JavaScript community.

Introduction to Javascript – JS 101