Hello World - potatoscript/javascript GitHub Wiki

💻 Hello World Example in JavaScript 🌍

The "Hello World" example is the traditional first program every programmer writes. It's a simple program that displays a message, typically to the screen. In JavaScript, this can be done using the alert() function or by manipulating the content of the webpage.

Here’s how you can create your own Hello World program in JavaScript!

Step 1: Set Up Your HTML File 📂

Before we start with the JavaScript, let’s set up an HTML page just like we did earlier. Open your code editor and create a new file named index.html (or use the one from the previous section).

Here’s the basic HTML structure that we’ll be working with:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World Example</title>
</head>
<body>

    <h1>Hello World in JavaScript!</h1>
    <button onclick="showMessage()">Click Me!</button>

    <script>
        function showMessage() {
            alert("Hello, World!");
        }
    </script>

</body>
</html>

Explanation of Code:

  1. <html> & <head>: We start with the basic HTML structure to set up the page, including the meta tags and title.
  2. <h1>: This is the main heading of the page, displaying Hello World in JavaScript!.
  3. <button>: A button is created, and when clicked, it triggers the showMessage() JavaScript function.
  4. <script>: The JavaScript code goes inside the <script> tag:
    • function showMessage(): This is a JavaScript function that runs when the button is clicked.
    • alert("Hello, World!");: This line of code creates an alert box that displays the message "Hello, World!" when the button is clicked.

Step 2: Test Your Hello World Program 🌐

  1. Save your index.html file.
  2. Open the file in your web browser by double-clicking it.
  3. Click the Click Me! button.
  4. An alert box should appear with the message "Hello, World!".

What’s Happening Behind the Scenes? 🧑‍💻

When you click the Click Me! button:

  • The onclick="showMessage()" tells the browser to run the showMessage() function.
  • Inside the showMessage() function, we have the alert() method, which shows a message box on the screen.

This is a very basic interaction in JavaScript, but it’s a great way to see how JavaScript can respond to user actions.

Step 3: Modify and Experiment 🌟

Now that you’ve created a simple Hello World example, let’s try modifying the code a little and experimenting with some changes.

  1. Change the Message: Instead of "Hello, World!", change the message inside the alert() to something like "Welcome to JavaScript!".

    alert("Welcome to JavaScript!");

  2. Display the Message in the Webpage Instead: Instead of using an alert(), let’s display the message directly on the webpage.

    <script>
    function showMessage() {
        document.body.innerHTML = "<h2>Welcome to JavaScript!</h2>";
    }
</script>

    This will change the content of the webpage when the button is clicked, replacing everything with the message.

  3. Create Multiple Buttons: Add multiple buttons to show different messages when clicked:

    <button onclick="showMessage('Hello!')">Say Hello</button>
<button onclick="showMessage('Goodbye!')">Say Goodbye</button>

    And modify the showMessage() function to display different messages:

    function showMessage(message) {
    document.body.innerHTML = "<h2>" + message + "</h2>";
}

Understanding the Code:

  • alert(): A built-in JavaScript function that creates a pop-up message box with the text you provide.
  • document.body.innerHTML: This JavaScript method allows you to change the HTML content of the page dynamically. In this case, it updates the page with a new message when the button is clicked.
  • Function Argument (message): By passing an argument to the function, we make it reusable. The message displayed will change depending on which button is clicked.

Step 4: Review the Key Concepts 🔑

By completing the Hello World example, you’ve learned some fundamental concepts in JavaScript:

  • Functions: Functions allow us to bundle code that we can reuse. Here, we used the showMessage() function to display a message when a button is clicked.
  • Events: We used the onclick event to trigger the JavaScript function when the user clicks the button.
  • Interactivity: JavaScript can manipulate the content of a webpage and respond to user actions, like clicking a button.

Summary of Key Concepts

  • JavaScript Functions: A way to organize and reuse code.
  • Events: JavaScript can respond to user actions, like button clicks.
  • Dynamic Content: JavaScript allows us to change the webpage’s content in real-time.
⚠️ **GitHub.com Fallback** ⚠️