EPISODE 2: Your First "Hello World!"

Objectives

• How to use browser tools.

• Say “Hello World!“.

• Get more comfortable with the console.

How to use browser tools

Browser developer tools, often referred to as DevTools, are a special set of tools integrated directly into web browsers and provide a powerful suite of features for debugging, profiling, and inspecting web applications, especially those built with JavaScript.

Accessing Browser DevTools:

To access these browser tools one should follow the steps below.

• Keyboard Shortcut:

  • Windows/Linux: Ctrl + Shift + I or F12

  • macOS: Cmd + Option + I

• Context Menu: Right-click anywhere on a webpage and select "Inspect" or "Inspect Element."

Say “Hello World!“

Now we’re about to write our very first JavaScript code, exciting right? I’ll run you through it step by step right from opening the console so you don’t get lost at any point.

1. Open your browser and right-click anywhere.

2. Scroll down and select “inspect“.

3. Select “console“.

4. Now to write your first code, write the code below on your console.

    alert("Hello World!");
   

5. Then click enter and you’ll get a pop up saying “Hello World!“ as seen in the image below.

   

   Congratulations🥂 , you just wrote your first line of JavaScript code.

Get more comfortable with the console

To get a bit more used to using the browser console we’ll write some more lines of code to do something else, just basic stuff. Enter the code below in your console.

1. First of all call a variable "js" and give it a text value “amazing”.

    let js = 'amazing';
   

2. Then write an if statement to give an alert if js is actually amazing.

    if (js === 'amazing') alert('JavaScript is COOL!');
   

   You should be getting a pop up saying “JavaScript is COOL! “ like in the image below.

   

With all that you should now be comfortable writing code in the browser DevTools environment. All the logic used above will be unraveled as the series unfolds so stay tuned.

OUTRO

That’s all for the chapter 2, now you have successfully written and executed your first JS code. This blog series isn’t just for experienced JS programmers, to give them a recap, as seen in this episode it also provides well-detailed lessons and guides to help anyone become an expert in JS, from the very basics to the advanced stuff. In the next episode we’ll show you how to write JS code on a code editor.