What is Input and Output?

• Input is data that users tell a program, like typing a name or entering something during a conversation.
• Output is the result that a program responds with after processing the input.
• A common example is Input typing a name, and Output showing Hello as the response.
• Think of Input as information sent to a program, while Output is the information the program responds with, like showing Hello after receiving the name.

Displaying Output with console.log()

console.log() outputs information and displays messages in the developer console. The developer console opens by pressing F12 in many web browsers.

 Basic Output

javascript

// Output text

console.log("Learning JavaScript");

// Output integers and decimals

console.log(100);

console.log(9.81);

// Output a variable

let city = "London";

console.log(city);

// Output multiple values

let product = "Laptop";

let price = 799;

console.log("Product:", product, "Price:", price);

More Console Methods

console.log()

Displays general information in the developer console.

JavaScript

console.log("Page loaded successfully");

console.warn()

Displays warning messages, which often appear highlighted in yellow.

JavaScript

console.warn("Low disk space detected");

console.error()

Displays error messages, which often appear highlighted in red.

JavaScript

console.error("Failed to load image");

console.info()

Displays informational messages in the developer console.

JavaScript

console.info("User signed in");

console.table()

Displays arrays or objects in a table format for easier reading.

JavaScript

let books = [

  { title: "JavaScript Basics", pages: 220 },

  { title: "CSS Guide", pages: 180 }

];

console.table(books);

Getting User Input in Web Browsers

prompt() – Ask for Text

Displays a dialog box that lets the user enter text and returns the input as a string.

JavaScript

let country = prompt("Which country do you live in?");

console.log("Country:", country);

confirm() – Yes or No

Displays a dialog box with OK and Cancel buttons and returns true or false.

JavaScript

let isMember = confirm("Are you a registered member?");

console.log(isMember);

alert() – Show a Message

Displays a dialog box that shows a message to the user.

JavaScript

alert("Your profile has been updated.");

HTML Form Input

Web applications use HTML forms and JavaScript event handlers to collect user input. HTML forms provide a user experience for entering data, while JavaScript event handlers process the submitted information.

HTML

<form>

  <input type="text" id="username" placeholder="Enter your name">

  <button type="button" onclick="showName()">Submit</button>

</form>

<script>

function showName() {

  let username = document.getElementById("username").value;

  console.log(username);

}

</script>

Input in Node.js

JavaScript running on the server with Node.js uses methods to receive user input. One example uses the readline module to read input from the terminal.

JavaScript

const readline = require("readline");

const rl = readline.createInterface({

  input: process.stdin,

  output: process.stdout

});

rl.question("Enter your favorite fruit: ", (fruit) => {

  console.log("Fruit:", fruit);

  rl.close();

});

Basic Input and Output Patterns

Simple Calculator

Gets two numbers as input, performs a calculation, and displays the result.

JavaScript

let price = Number(prompt("Enter the item price:"));

let tax = Number(prompt("Enter the tax amount:"));

let total = price + tax;

alert("Total: " + total);

Age Checker

Takes a user’s age as input and displays a message based on a condition.

JavaScript

let score = Number(prompt("Enter your score:"));

if (score >= 50) {

  console.log("You passed.");

} else {

  console.log("You did not pass.");

}

Confirmation Flow

Uses a confirmation dialog to perform different actions based on the user’s choice.

JavaScript

let saveFile = confirm("Do you want to save your changes?");

if (saveFile) {

  console.log("Changes saved.");

} else {

  console.log("Changes not saved.");

How to Debug Code with console.log()

console.log() displays variable values and program flow, making it easier to identify errors during code execution.

JavaScript

function calculateArea(length, width) {

  // Display the input values

  console.log("Length:", length);

  console.log("Width:", width);

  // Calculate the area

  let area = length * width;

  // Display the calculated result

  console.log("Area:", area);

  // Return the final value

  return area;

}

// Call the function

calculateArea(8, 5);

What Are the Key Takeaways?

• Input provides information to programs, while Output displays information to users.
• console.log() is the standard way to create output and debug JavaScript code by displaying values and messages.
• console.warn() displays warnings, and console.error() displays errors in the developer console.
• prompt() gets text input and always returns a string, while confirm() gets yes/no input and returns true/false.
• alert() shows a simple message popup, and Real web apps use HTML forms to provide a better user experience.