Input & Output

Programs need to communicate! Input is how users give information to your program, and output is how your program shows results back to users.

What is Input and Output?

Think of a program like a conversation. Input is when you tell the program something (like typing your name), and output is when the program responds (like showing "Hello, [your name]!").

Output with console.log()

The most common way to output information in JavaScript is console.log(). It displays messages in the browser's developer console (press F12 to see it).

// Basic output
console.log("Hello, World!");

// Output numbers
console.log(42);
console.log(3.14);

// Output variables
let message = "Welcome!";
console.log(message);

// Output multiple things
let name = "Alice";
let age = 25;
console.log("Name:", name, "Age:", age);

Try It Yourself

More Console Methods

The console has several useful methods for different situations:

// Regular log
console.log("Normal message");

// Warnings (shows in yellow)
console.warn("Something might be wrong!");

// Errors (shows in red)
console.error("Something went wrong!");

// Info
console.info("FYI: Server is running");

// Tables (great for arrays and objects)
let users = [
  {name: "Alice", age: 25},
  {name: "Bob", age: 30}
];
console.table(users);

Input in Web Browsers

In web browsers, there are a few built-in ways to get input from users:

prompt() - Ask for Text

// Shows a popup asking for input
let name = prompt("What is your name?");
console.log("Hello, " + name + "!");

// With a default value
let color = prompt("Favorite color?", "blue");

let ageString = prompt("How old are you?");  // "25"
let age = Number(ageString);                  // 25
// Or in one step:
let age = Number(prompt("How old are you?"));

confirm() - Yes or No

// Shows OK/Cancel popup, returns true or false
let wantsNewsletter = confirm("Subscribe to our newsletter?");

if (wantsNewsletter) {
  console.log("Thanks for subscribing!");
} else {
  console.log("Maybe next time!");
}

alert() - Show a Message

// Shows a simple popup message
alert("Welcome to our website!");
alert("Your order has been placed.");

HTML Form Input

In real web applications, we usually use HTML forms and JavaScript event handlers to get input. This provides a much better user experience than popups:

// HTML
<input type="text" id="nameInput" placeholder="Enter your name">
<button id="greetBtn">Greet Me</button>
<p id="output"></p>

// JavaScript
document.getElementById("greetBtn").addEventListener("click", function() {
  let name = document.getElementById("nameInput").value;
  document.getElementById("output").textContent = "Hello, " + name + "!";
});

Input in Node.js

If you're running JavaScript on a server (Node.js), you'd use different methods for input. Here's a simple example using the readline module:

const readline = require('readline');

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

rl.question('What is your name? ', (name) => {
  console.log("Hello, " + name + "!");
  rl.close();
});

Common I/O Patterns

let num1 = Number(prompt("First number:"));
let num2 = Number(prompt("Second number:"));
let sum = num1 + num2;
alert("The sum is: " + sum);

let age = Number(prompt("How old are you?"));
if (age >= 18) {
  console.log("You are an adult.");
} else {
  console.log("You are a minor.");
}

let proceed = confirm("Are you sure you want to delete this?");
if (proceed) {
  console.log("Item deleted.");
} else {
  console.log("Deletion cancelled.");
}

Debugging with console.log()

One of the most important uses of console.log() is debugging—figuring out what your code is doing:

function calculateDiscount(price, percentage) {
  console.log("Input price:", price);           // See the input
  console.log("Discount %:", percentage);       // Check parameters

  let discount = price * (percentage / 100);
  console.log("Calculated discount:", discount); // Check calculation

  let finalPrice = price - discount;
  console.log("Final price:", finalPrice);       // Check result

  return finalPrice;
}

calculateDiscount(100, 20);  // Watch the console!

Quick Quiz

Key Takeaways

• Output is how programs display information to users
• Input is how users provide information to programs
• console.log() is the standard way to output and debug
• Use console.warn() and console.error() for warnings and errors
• prompt() gets text input (always returns a string!)
• confirm() gets yes/no input (returns true/false)
• alert() shows a simple message popup
• Real web apps use HTML forms for better user experience

What's Next?

Now that you know how programs communicate with users, you're ready to build interactive applications! Continue exploring our other concepts to expand your programming skills.