CodeLab Academy

Where your innovation journey begins!

Programming with JavaScript

Instructor: Negasi Kiflom (Senior Software Engineer and Architect)
 CodeLab Academy
Where your innovation journey begins!

Course Outline

1. What is programming?

2. Programming with Scratch

2.1. What is Scratch

2.2. Learning by building a simple game

 CodeLab Academy
Where your innovation journey begins!

Course Outline

3. Programming with JavaScript

3.1. History of JavaScript

3.2. Data Types and Variables

3.3. Data Structure

3.4. Functions

3.5. Conditionals

3.6. Loops
 CodeLab Academy
Where your innovation journey begins!

1. What is Programming?

- Is giving instructions to a computer to make it perform specific tasks.

- Example tasks are like playing music, sending text, etc.

- The set of instructions you write for the computer is called Code

- Instructions are written in special languages called programming languages.

- Popular programming languages are: JavaScript, Python, Java, C#, etc

 CodeLab Academy
Where your innovation journey begins!

… Cont’d

- E.g. console.log(“Hello, World!”)

- Explanation

- Task is printing “Hello, World”

- “console.log” is the instruction that tells the computer to display the text

- The computer follows this simple instruction and shows Hello, World! on the screen.
 CodeLab Academy
Where your innovation journey begins!

2. Introduction with Scratch

- Is block-based visual programming language

- Link: https://scratch.mit.edu/

- Let’s dive into coding

 CodeLab Academy
Where your innovation journey begins!

3. Programming with JavaScript

3.1. Intro and History of JavaScript

- JS was created by Brendan Eich at Netscape in just 10 days!

- It is a programming language used to make websites interactive

- Interactivity is you can do things on the page, and the page responds to your actions

- For example:
- Click a Button: When you click a button, something happens (e.g., a confirmation message pops up or
the button changes color).
 CodeLab Academy
Where your innovation journey begins!

… Cont’d

<button onclick="sayHello()">Click Me!</button> // Button element

// The function linked to the above button

<script>

function sayHello() {

alert("Hello, World!");

</script>
 CodeLab Academy
Where your innovation journey begins!

… Cont’d

3.2. Data Types and Variables

- Data types are the basic building blocks of data, representing a single kind of information

- JavaScript has several primitive data types, including:

● String: Represents text data, like "Hello"
● Boolean: Represents a truth value, either true or false
● Number: Represents numeric data, like 42 or 3.14
● Null: Represents an intentional absence of a value
● Undefined: Represents a variable that has been declared but not assigned a value
● Symbol: Represents unique values (usually for object keys)
 CodeLab Academy
Where your innovation journey begins!

… Cont’d

- Variable is like a labeled box that holds information you want to use in a program
- It allows you to store a value (like a number, word, or answer) and refer to it by name later.

How to Create Variables in JavaScript

1. let: used when the value might change.

let score = 0;
// Updates score to 10
score = score + 10;
// Outputs: Score: 10
console.log("Score:", score);
 CodeLab Academy
Where your innovation journey begins!

… Cont’d
2. const: used when the value will never change.

const birthday = 2000;

// Tries to update score to 10
birthday = birthday + 10;
// Error - You can’t update a const variable
 CodeLab Academy
Where your innovation journey begins!

… Cont’d

3.3. Data Structure (DS)

- DS is like wardrobe, kitchen cabinet in your home

- It is for storing data in a structured way

 CodeLab Academy
Where your innovation journey begins!

… Cont’d

Examples of Data Structure:

1. Array: is a collection of items stored in a specific order.

○ Think of it as a list or a row of boxes, where each box holds an item and has an index (a position number).
○ Example:- const students = [“Negasi”, “Kirubel”, “Mubarek”, “Fermina” ]
○ Accessing an item:- const thirdStudent = students[3] =====>>>> “Mubarek”

0 1 2 3 4 Index

Items
Negasi Kirubel Henok Mubarek Fermina
 CodeLab Academy
Where your innovation journey begins!

… Cont’d

2. Object: is a collection of data organized by keys and values.

○ Think of an object as a dictionary where each key has a corresponding value.
○ Remember how the DOM works?
○ Example: let person = {

name: "John",
age: 25,
city: "New York"
};

console.log(person.name); // Output: "John"

console.log(person.age); // Output: 25
 CodeLab Academy
Where your innovation journey begins!

… Cont’d

3.4. Functions

- Functions are a set of reusable instructions that perform specific tasks.

- Think of them like recipes: you write the steps once and reuse them whenever needed.

- Instead of repeating the same steps over and over, you simply "call" the function.

- By bundling tasks into functions, you simplify your code and make it more efficient and organized.
 CodeLab Academy
Where your innovation journey begins!

… Cont’d

Example: Functions

function greet() {

console.log("Hello!");

greet(); // This runs the function and prints "Hello!"

 CodeLab Academy
Where your innovation journey begins!

… Cont’d

3.5. Conditional

- Conditionals allow your program to make decisions based on specific conditions (true or false).

- Use `if` to check a condition, and if it's true, the code inside will run.

- Add `else if` to check another condition if the first one isn't met.

- Use `else` to handle all other cases when no previous conditions are true.
 CodeLab Academy
Where your innovation journey begins!

… Cont’d

Example: Conditionals
 CodeLab Academy
Where your innovation journey begins!

… Cont’d

3.6. Loops

- Loops allow your program to repeat a task multiple times automatically.

- A `for` loop runs a set of instructions a specific number of times.

- A `while` loop keeps running as long as a condition is true.

- Loops help you avoid repeating code manually, making tasks like counting or going through lists easier.
 CodeLab Academy
Where your innovation journey begins!

… Cont’d

Example: Loops
 CodeLab Academy
Where your innovation journey begins!

Assignment

1. Study other data structures

2. Study object-oriented programming with JS.

 CodeLab Academy
Where your innovation journey begins!

Thank You
CodeLab Academy
Where your innovation journey begins!