CodeKilla - Programming Concepts Interactive Lab

Introduction to Programming

Understanding the fundamentals of how computers execute instructions

What is Programming?

Programming is the process of creating instructions that a computer can execute to perform specific tasks. It's like writing a recipe, but for computers!

Program Execution Workflow

1 Write Code: Developer creates source code in a programming language

↓

2 Compilation/Interpretation: Code is translated to machine-readable format

↓

3 Execution: CPU processes the instructions

↓

4 Output: Program produces results (display, file, network, etc.)

Key Programming Paradigms

Procedural

📋

Step-by-step instructions

Object-Oriented

🎯

Objects & classes

Functional

⚡

Pure functions

Variables

Containers for storing data values that can change during program execution

Understanding Variables

A variable is like a labeled box that can hold different values. You can store data, retrieve it, and change it.

Variable Lifecycle

1 Declaration: let name; - Reserve memory

↓

2 Initialization: name = "Ashok"; - Assign initial value

↓

3 Usage: console.log(name); - Read value

↓

4 Modification: name = "Ashok"; - Change value

Interactive Variable Demo

Declare and initialize a variable to see it in action!

Try It Yourself - Variables

JavaScript

Constants

Immutable values that cannot be changed after initialization

Constants vs Variables

Feature	Variable (let)	Constant (const)
Can be reassigned?	✓ Yes	✗ No
Must initialize?	✗ Optional	✓ Required
Use case	Values that change	Values that stay fixed

Try It Yourself - Constants

JavaScript

Data Types

Different kinds of data that can be stored and manipulated

Primitive Data Types

Number

42

Integers & decimals

String

"Hello"

Text data

Boolean

true

True or false

Undefined

undefined

No value assigned

Null

null

Intentionally empty

Try It Yourself - Data Types

JavaScript

Operators

Symbols that perform operations on values and variables

Operator Types

Type	Operators	Example	Result
Arithmetic	+ - * / %	10 + 5	15
Comparison	== != < > <= >=	10 > 5	true
Logical	&& \|\| !	true && false	false
Assignment	= += -= *= /=	x += 5	x = x + 5

Interactive Calculator

Result will appear here

Try It Yourself - Operators

JavaScript

Comments

Documentation within code that is ignored by the computer

Why Use Comments?

Comments help explain code to other developers (and your future self!):

Explain complex logic
Document function parameters and return values
Leave TODOs and notes
Temporarily disable code during debugging

Try It Yourself - Comments

JavaScript

If Statements

Making decisions in code based on conditions

Conditional Logic Workflow

If-Else Decision Flow

1 Condition Check: Evaluate boolean expression

↓

2 True Branch: Execute code in if block

OR

3 False Branch: Execute code in else block

↓

4 Continue: Resume normal execution

Interactive Decision Demo

Enter an age to check voting eligibility

Try It Yourself - If Statements

JavaScript

Loops

Repeating code execution multiple times

Loop Types

For Loop

🔄

Fixed iterations

While Loop

⟳

Condition-based

Do-While Loop

↻

Execute then check

Loop Algorithm Visualization

1 Initialize counter: i = 0

2 Check condition: i < 5?

3 Execute loop body: console.log(i)

4 Increment: i++

5 Repeat from step 2

Try It Yourself - Loops

JavaScript

Arrays

Ordered collections of elements stored in a single variable

Array Visualization

Index 0

🍎

"apple"

Index 1

🍌

"banana"

Index 2

🍊

"orange"

Arrays use zero-based indexing: first element is at index 0

Common Array Operations

Operation	Method	Description
Add to end	`push()`	Adds element to end of array
Remove from end	`pop()`	Removes and returns last element
Add to start	`unshift()`	Adds element to beginning
Remove from start	`shift()`	Removes and returns first element
Find length	`length`	Returns number of elements

Try It Yourself - Arrays

JavaScript

Strings

Sequences of characters used to represent text

String Operations

Enter text to analyze

Try It Yourself - Strings

JavaScript

Functions

Reusable blocks of code that perform specific tasks

Function Workflow

Function Execution Flow

1 Function Call: Invoke function with arguments

↓

2 Parameter Binding: Arguments mapped to parameters

↓

3 Execute Body: Run function code

↓

4 Return Value: Send result back to caller

Try It Yourself - Functions

JavaScript

Recursion

Functions that call themselves to solve problems

Recursion Algorithm

Factorial(5) Recursion

1 Call: factorial(5) → 5 * factorial(4)

↓

2 Call: factorial(4) → 4 * factorial(3)

↓

3 Call: factorial(3) → 3 * factorial(2)

↓

4 Base Case: factorial(1) → returns 1

↑

5 Unwind: 3 * 2 * 1 = 6 → 4 * 6 = 24 → 5 * 24 = 120

Try It Yourself - Recursion

JavaScript

Scope

The accessibility and visibility of variables in different parts of code

Scope Levels

🌍 Global Scope

Accessible everywhere in the program

🏠 Function Scope

Accessible only within the function

📦 Block Scope

Accessible only within the block { }

Try It Yourself - Scope

JavaScript

Type Casting

Converting values from one data type to another

Type Conversion Examples

String → Number

"42" → 42

Number("42")

Number → String

42 → "42"

String(42)

Boolean → Number

true → 1

Number(true)

Number → Boolean

0 → false

Boolean(0)

Try It Yourself - Type Casting

JavaScript

Bits and Bytes

The fundamental units of digital information

Understanding Bits and Bytes

1 Byte = 8 Bits

1

0

1

0

1

0

1

Each bit can be 0 or 1

Unit	Size	Example
Bit	1 bit	0 or 1
Nibble	4 bits	1011
Byte	8 bits	10110101
Kilobyte (KB)	1024 bytes	Small text file
Megabyte (MB)	1024 KB	High-res image
Gigabyte (GB)	1024 MB	HD movie

Interactive Byte Builder

Click bits to toggle them on/off:

0

Binary: 00000000 | Decimal: 0

Number Systems Overview

Understanding different bases for representing numbers

What is a Number System?

A number system is a way of representing numbers using a specific set of symbols or digits. The base (or radix) determines how many unique digits are available.

Common Number Systems

2 Binary (Base-2): Uses only 0 and 1. Foundation of all digital computing.

8 Octal (Base-8): Uses 0-7. Commonly used in Unix file permissions.

10 Decimal (Base-10): Uses 0-9. The standard system humans use daily.

16 Hexadecimal (Base-16): Uses 0-9 and A-F. Compact representation of binary.

Number System Comparison

Decimal	Binary (Base-2)	Octal (Base-8)	Hexadecimal (Base-16)
0	0000	0	0
1	0001	1	1
2	0010	2	2
3	0011	3	3
4	0100	4	4
5	0101	5	5
6	0110	6	6
7	0111	7	7
8	1000	10	8
9	1001	11	9
10	1010	12	A
11	1011	13	B
12	1100	14	C
13	1101	15	D
14	1110	16	E
15	1111	17	F
16	10000	20	10
20	10100	24	14
32	100000	40	20
64	1000000	100	40
100	1100100	144	64
255	11111111	377	FF

Positional Notation Formula

Any number in any base can be calculated using positional notation:

                            Number = dn × basen + dn-1 × basen-1 + ... + d1 × base1 + d0 × base0
                        

Example: 1011₂ = 1×2³ + 0×2² + 1×2¹ + 1×2⁰ = 8 + 0 + 2 + 1 = 11₁₀

Example: 2A₁₆ = 2×16¹ + 10×16⁰ = 32 + 10 = 42₁₀

Real-World Applications

Binary

💾

Computer memory, logic gates, networking

Octal

🔐

Unix permissions (chmod 755)

Decimal

🧮

Everyday counting, finance, measurements

Hexadecimal

🎨

Colors (#FF5733), memory addresses

Binary Numbers (Base-2)

Base-2 number system using only 0s and 1s

Binary to Decimal Conversion

Binary: 1011 → Decimal: 11

Position	3	2	1	0
Power of 2	2³ = 8	2² = 4	2¹ = 2	2⁰ = 1
Binary digit	1	0	1	1
Calculation	1 × 8 = 8	0 × 4 = 0	1 × 2 = 2	1 × 1 = 1

Sum: 8 + 0 + 2 + 1 = 11

Binary Converter

Result will appear here

Try It Yourself - Binary

JavaScript

Octal Numbers (Base-8)

Number system using digits 0-7

Understanding Octal

Octal is a base-8 number system that uses digits 0 through 7. Each position represents a power of 8.

Octal: 157₈ → Decimal: 111₁₀

Position	2	1	0
Power of 8	8² = 64	8¹ = 8	8⁰ = 1
Octal digit	1	5	7
Calculation	1 × 64 = 64	5 × 8 = 40	7 × 1 = 7

Sum: 64 + 40 + 7 = 111₁₀

Octal in Unix/Linux Permissions

Octal is commonly used for file permissions in Unix-based systems:

Octal	Binary	Permissions	Description
0	000	---	No permissions
1	001	--x	Execute only
2	010	-w-	Write only
3	011	-wx	Write + Execute
4	100	r--	Read only
5	101	r-x	Read + Execute
6	110	rw-	Read + Write
7	111	rwx	All permissions

Example: chmod 755
7 (Owner: rwx) | 5 (Group: r-x) | 5 (Others: r-x)

Interactive Octal Converter

Result will appear here

Try It Yourself - Octal

JavaScript

Binary-Octal Relationship

Each octal digit represents exactly 3 binary digits (bits):

0

000

1

001

2

010

3

011

4

100

5

101

6

110

7

111

Example: Binary 101110₂ = Octal 56₈ (group: 101 | 110 = 5 | 6)

Decimal Numbers (Base-10)

The standard number system used in everyday life

Understanding Decimal

Decimal is a base-10 number system that uses digits 0 through 9. It's the most familiar number system because it's what we use in daily life. The name "decimal" comes from the Latin word "decem," meaning ten.

Decimal Number: 3,456

Position	Thousands	Hundreds	Tens	Ones
Power of 10	10³ = 1000	10² = 100	10¹ = 10	10⁰ = 1
Digit	3	4	5	6
Value	3 × 1000 = 3000	4 × 100 = 400	5 × 10 = 50	6 × 1 = 6

Sum: 3000 + 400 + 50 + 6 = 3,456

Why Base-10?

Humans likely adopted base-10 because we have 10 fingers, making it natural for counting.

Historical

👋

10 fingers = base-10

Universal

🌍

Used worldwide

Intuitive

🧠

Easy to learn

Decimal Arithmetic

Result will appear here

Decimal Representations

Type	Example	Description
Integer	42	Whole numbers
Decimal/Float	3.14159	Numbers with fractions
Scientific Notation	6.022e23	Very large/small numbers
Percentage	75%	Parts per hundred
Negative	-10	Below zero

Try It Yourself - Decimal Operations

JavaScript

Hexadecimal Numbers (Base-16)

Base-16 number system using 0-9 and A-F

Hexadecimal Chart

Decimal	Binary	Hexadecimal
0	0000	0
1	0001	1
10	1010	A
11	1011	B
12	1100	C
13	1101	D
14	1110	E
15	1111	F
16	10000	10
255	11111111	FF

Color Hex Codes

Hexadecimal is commonly used in web colors:

Red

#FF0000

Green

#00FF00

Blue

#0000FF

Gold

#FFD700

Try It Yourself - Hexadecimal

JavaScript

Universal Base Converter

Convert numbers between any number systems (Base 2-36)

Multi-Base Converter

                            Enter a number to convert it to multiple bases
                        

Custom Base Converter

Convert between any bases from 2 to 36

Understanding Different Bases

Base	Name	Digits Used	Example
2	Binary	0, 1	1010₂ = 10₁₀
3	Ternary	0, 1, 2	102₃ = 11₁₀
4	Quaternary	0-3	22₄ = 10₁₀
5	Quinary	0-4	20₅ = 10₁₀
6	Senary	0-5	14₆ = 10₁₀
7	Septenary	0-6	13₇ = 10₁₀
8	Octal	0-7	12₈ = 10₁₀
10	Decimal	0-9	10₁₀ = 10₁₀
12	Duodecimal	0-9, A-B	A₁₂ = 10₁₀
16	Hexadecimal	0-9, A-F	A₁₆ = 10₁₀
20	Vigesimal	0-9, A-J	A₂₀ = 10₁₀
32	Base32	A-Z, 2-7 (standard)	Used in encoding
36	Base36	0-9, A-Z	A₃₆ = 10₁₀
60	Sexagesimal	Complex symbols	Used in time (60 min)

Conversion Algorithm Visualization

Base Conversion Algorithm (Any Base → Decimal → Any Base)

1 Parse Input: Read number in source base (e.g., "1A" in base-16)

↓

2 Convert to Decimal: Use positional notation (1×16¹ + 10×16⁰ = 26)

↓

3 Convert to Target Base: Repeatedly divide by target base

↓

4 Read Remainders: Collect remainders in reverse order

↓

5 Format Output: Convert digits to appropriate symbols

Try It Yourself - Base Conversion

JavaScript

// JavaScript provides built-in base conversion
let decimal = 42;

console.log("Decimal:", decimal);
console.log("Binary (base-2):", decimal.toString(2));
console.log("Ternary (base-3):", decimal.toString(3));
console.log("Octal (base-8):", decimal.toString(8));
console.log("Hexadecimal (base-16):", decimal.toString(16).toUpperCase());
console.log("Base-36:", decimal.toString(36).toUpperCase());

// Convert from any base to decimal
console.log("\nConverting TO decimal:");
console.log("Binary '101010' =", parseInt('101010', 2));
console.log("Octal '52' =", parseInt('52', 8));
console.log("Hex 'A5' =", parseInt('A5', 16));
console.log("Base-36 '16' =", parseInt('16', 36));

// Custom conversion function
function convertBase(num, fromBase, toBase) {
    return parseInt(num, fromBase).toString(toBase).toUpperCase();
}

console.log("\nCustom conversions:");
console.log("1010 (base-2) to base-8:", convertBase('1010', 2, 8));
console.log("FF (base-16) to base-2:", convertBase('FF', 16, 2));
console.log("777 (base-8) to base-16:", convertBase('777', 8, 16));

Real-World Applications of Different Bases

Base-2 (Binary)

💻

All digital computers

Base-8 (Octal)

🔧

Unix permissions

Base-10 (Decimal)

📊

Human counting

Base-12 (Dozen)

🥚

Eggs, inches (12/foot)

Base-16 (Hex)

🎨

Colors, memory addresses

Base-60 (Sexagesimal)

⏰

Time, angles (60 sec/min)

Boolean Algebra

Logic operations with true and false values

Boolean Operators

AND (&&) - Both must be true

A	B	A && B
false	false	false
false	true	false
true	false	false
true	true	true

OR (||) - At least one must be true

A	B	A \|\| B
false	false	false
false	true	true
true	false	true
true	true	true

NOT (!) - Inverts the value

A	!A
false	true
true	false

Try It Yourself - Boolean Algebra

JavaScript

Input and Output

Getting data from users and displaying results

I/O Workflow

Input → Process → Output

1 Input: Receive data from user (keyboard, mouse, file, etc.)

↓

2 Validation: Check if input is valid and safe

↓

3 Processing: Perform operations on the data

↓

4 Output: Display results to user (console, screen, file, etc.)

Interactive I/O Demo

Enter your information to see the output

Common Output Methods

Method	Description	Example
`console.log()`	Print to console	console.log("Hello")
`alert()`	Show popup dialog	alert("Warning!")
`document.write()`	Write to HTML page	document.write("Text")
`innerHTML`	Update HTML element	elem.innerHTML = "New"

CodeKilla Programming Lab

Introduction to Programming

What is Programming?

Program Execution Workflow

Key Programming Paradigms

Variables

Understanding Variables

Variable Lifecycle

Interactive Variable Demo

Try It Yourself - Variables

Constants

Constants vs Variables

Try It Yourself - Constants

Data Types

Primitive Data Types

Try It Yourself - Data Types

Operators

Operator Types

Interactive Calculator

Try It Yourself - Operators

Comments

Why Use Comments?

Try It Yourself - Comments

If Statements

Conditional Logic Workflow

If-Else Decision Flow

Interactive Decision Demo

Try It Yourself - If Statements

Loops

Loop Types

Loop Algorithm Visualization

Try It Yourself - Loops

Arrays

Array Visualization

Common Array Operations

Try It Yourself - Arrays

Strings

String Operations

Try It Yourself - Strings

Functions

Function Workflow

Function Execution Flow

Try It Yourself - Functions

Recursion

Recursion Algorithm

Factorial(5) Recursion

Try It Yourself - Recursion

Scope

Scope Levels

🌍 Global Scope

🏠 Function Scope

📦 Block Scope

Try It Yourself - Scope

Type Casting

Type Conversion Examples

Try It Yourself - Type Casting

Bits and Bytes

Understanding Bits and Bytes

1 Byte = 8 Bits

Interactive Byte Builder

Number Systems Overview

What is a Number System?

Common Number Systems

Number System Comparison

Positional Notation Formula

Real-World Applications

Binary Numbers (Base-2)

Binary to Decimal Conversion

Binary: 1011 → Decimal: 11

Binary Converter

Try It Yourself - Binary

Octal Numbers (Base-8)

Understanding Octal

Octal: 157₈ → Decimal: 111₁₀

Octal in Unix/Linux Permissions

Interactive Octal Converter

Try It Yourself - Octal

Binary-Octal Relationship

Decimal Numbers (Base-10)

Understanding Decimal