Javascript Input/Output methods

Lesson Content

Javascript Input/Output Methods

Introduction

In JavaScript, printing output and collecting user input are essential skills that every programmer should know. This lesson will explore various methods for printing output and collecting input in JavaScript, including console.log(), alert(), prompt(), confirm() and more. By the end of the lesson, you will have a solid understanding of these fundamental concepts and be able to apply them in your own projects. Let’s get started!

Overview

By the end of this lesson, you should be able to:

- Understand the purpose of console.log() and know how to use it for printing output to the console.
- Understand the purpose of alert() and know how to use it for displaying popup boxes with messages.
- Understand the purpose of prompt() and know how to use it for collecting input from users through popup boxes.
- Understand the purpose of confirm() and know how to use it for displaying popup boxes with confirmation prompts.

Using console.log()

console.log() is a command that programmers use to display information or messages in the console of a web browser. It’s like writing a note to yourself, but instead of on paper, you write it in the console of your web browser.

You can use console.log() to see what’s happening in your code and to debug any issues that you might be having. It’s a helpful tool for programmers to understand what’s going on behind the scenes. It can be used for a variety of things from debugging code to test programs. Here is how we write the command:

console.log("Hello World")
// This will shows "Hello World" in the console

console.log(5)
// This will show 5 in the console

Go ahead and copy this code into your console. Make sure that Hello World and 5 show up in the console. As you can see, console.log() is used to display a message in the console. The console is also where you will find any error messages, so it’s always good practice to have it open while programming!

Using alert()

console.log() is something that can be seen by the developer of the site and even the user, but what if we wanted to incorporate a quick message that will alert the user? Thankfully, JavaScript allows us to use the alert() function. Here is the syntax of alert().

alert(message)

alert() is a built-in function in JavaScript that displays a dialog box with a message and an OK button. When it is called, any running code is paused until the user presses the “OK” button. Here are some examples of it being used:

alert("Our Website uses cookies, please acknowledge this")

alert("Do you agree to our terms of service?")

These are just some made-up examples. You can use alert() to tell users of your website something important.

Using prompt()

alert() allows the user to acknowledge a specific request. However, what if we wanted to ask a user a question and collect their input? Luckily, JavaScript gives us the prompt() method which allows us to do just this! Here is the syntax of prompt().

prompt(message)

prompt() is a built-in function in JavaScript that displays a dialog box with a message, an input field for the user to enter a value, and OK and Cancel buttons. Just like with alert(), any running code will also be stopped.

When the user enters a value and presses “submit”, we can actually store that value in a variable! Below is the syntax of we accomplish this. We will be learning in this our next lesson on variables. For now, just take a look at what each of the methods do and the syntax behind them.

In this example, we are looping through our list numlist, and multiplying every number by 2 and then logging that. Notice how we declare the variable inside our condition just like with a regular for loop!

Using confirm()

The last input/output method that we will learn about in this lesson will be the confirm() method. Here is the syntax for confirm():

confirm(message)

When the confirm() function is called, a dialog box is displayed in the user’s browser with the specified message and the two buttons. If the user clicks the “OK” button, the function returns true. If the user clicks the “Cancel” button, the function returns false. In the next lesson, we will learn about how to use these values to execute some code. For this lesson, just understand the syntax!

Find an issue/typo/error with our content? Please report it here

Lesson Content