Basics of JavaScript

Learning Objectives

• Write your first JavaScript program
• Understand values and data types
• Learn program structure
• Complete coding challenges

Section 2.1: Your First Program

Getting Started

The simplest way to run JavaScript is using console.log() to display output:

console.log("Hello, World!");

What Happens?

• console.log() is a function that prints text to the console
• "Hello, World!" is the message to display
• Semicolon ; ends the statement (optional in many cases)

Running JavaScript

• Browser Console : Press F12, go to Console tab
• Node.js : Install Node.js, run node filename.js
• Online Editor : Use CodePen, JSFiddle, or Replit

Section 2.2: Values and Types

What are Values?

Values are pieces of data that your program works with.

Data Types in JavaScript

• Whole numbers: 42, 0, -10
• Decimals: 3.14, 2.5, -0.5

console.log(42);
console.log(3.14);
console.log(2 + 3);  // 5

• Text enclosed in quotes: "Hello" or 'world'
• Can contain any text

console.log("JavaScript");
console.log('I love coding');
console.log("123");  // This is text, not a number

• Only two values: true or false
• Used for making decisions

console.log(true);
console.log(false);
console.log(5 > 3);   // true
console.log(2 > 5);   // false

• null: Empty/no value
• undefined: Value not yet defined
• NaN: Not a Number (result of invalid math)

console.log(null);
console.log(undefined);
console.log(0/0);  // NaN

Type Checking

Use typeof to check a value's type:

console.log(typeof 42);        // "number"
console.log(typeof "hello");   // "string"
console.log(typeof true);      // "boolean"
console.log(typeof undefined); // "undefined"

Section 2.3: Program Structure

Statements

A statement is a complete instruction for the computer:

console.log("First instruction");
console.log("Second instruction");
console.log("Third instruction");

Comments

Comments are notes in your code that JavaScript ignores:

// Single-line comment
console.log("Hello"); // Comment at end

/* Multi-line comment
   can span multiple lines
   useful for longer explanations */

Simple Operations

console.log(10 + 5);    // 15 (addition)
console.log(10 - 3);    // 7 (subtraction)
console.log(4 * 5);     // 20 (multiplication)
console.log(20 / 4);    // 5 (division)
console.log(17 % 5);    // 2 (modulo - remainder)
console.log(2   3);    // 8 (exponentiation)

console.log("Hello" + " " + "World");  // Hello World
console.log("2" + "3");                 // "23" (string concat)
console.log(2 + 3);                     // 5 (number addition)

Section 2.4: Coding Challenges

Challenge 2.1: Presentation

Task : Write a program that displays:

• Your name
• Your age
• Your favorite hobby
• A fun fact about you

Expected Output:

Name: John
Age: 18
Hobby: Gaming
Fact: I love JavaScript!

Challenge 2.2: Minimalistic Calculator

Task : Write a program that performs calculations and displays results:

Expected Output:

10 + 5 = 15
20 - 8 = 12
4 * 6 = 24
50 / 2 = 25
17 % 5 = 2

Challenge 2.3: Predict the Displayed Values

Task : Predict what each line will display:

console.log(5 + 3);
console.log("5" + 3);
console.log(true + true);
console.log("Hello" + false);
console.log(typeof(10 + "5"));

Key Takeaways

✅ JavaScript programs consist of statements
✅ Values have types: number, string, boolean, null, undefined
✅ Use console.log() to display output
✅ Comments document your code
✅ Arithmetic operations work with numbers
✅ String concatenation combines text

Summary

In this module, you learned:

• How to write your first JavaScript program
• About data types and values
• How to structure a program
• Arithmetic and string operations
• How to use console.log() for output

Quiz Questions

• What does console.log() do?
• Name 4 data types in JavaScript
• What is the difference between 5 and "5"?
• What does the + operator do with strings?
• How do you check the type of a value?

Next Module : Module 3 - Play with Variables