Module 1: JavaScript Fundamentals

Learn the basics of JavaScript programming, including variables, functions, and control flow.

Overview

This module introduces you to the fundamentals of JavaScript programming. You'll learn about variables, data types, operators, and how to write basic JavaScript code.

Learning Objectives

Understand JavaScript variables and data types
Work with JavaScript operators
Create and manipulate strings and numbers
Understand basic program flow and execution
Use console.log() for debugging

Lesson Content

JavaScript Basics

JavaScript is a high-level, interpreted programming language that is one of the core technologies of the web.

Variables and Data Types

JavaScript has several data types:

String: Text values like "Hello World"
Number: Numeric values like 42 or 3.14
Boolean: true or false
Null: Intentional absence of value
Undefined: Variables that have been declared but not assigned
Object: Collections of related data

Code Examples

// Variables
let name = "John";
const age = 30;
var isStudent = true;

// Basic operations
let x = 10;
let y = 5;
console.log(x + y);  // Addition: 15
console.log(x - y);  // Subtraction: 5
console.log(x * y);  // Multiplication: 50
console.log(x / y);  // Division: 2

// String operations
let firstName = "Jane";
let lastName = "Doe";
let fullName = firstName + " " + lastName;
console.log(fullName);  // "Jane Doe"

Practice Exercises

Try these exercises to reinforce your understanding of JavaScript fundamentals:

Create variables for your name, age, and whether you are a student.
Calculate and log the area of a rectangle with variables for length and width.
Concatenate your first and last name with a space in between.
Convert a temperature from Celsius to Fahrenheit using variables.

Exercise 1: Variables

Create variables for your name, age, and student status:

// Type your code here
let name = "";
let age = 0;
let isStudent = false;

// Display your variables
console.log("Name:", name);
console.log("Age:", age);
console.log("Student status:", isStudent);

Exercise 2: Rectangle Area

Calculate the area of a rectangle:

// Define your variables
let length = 10;
let width = 5;

// Calculate the area
let area = length * width;

// Display the result
console.log("Rectangle dimensions:", length, "x", width);
console.log("Area:", area);

Exercise 3: String Concatenation

Concatenate your first and last name:

// Define your variables
let firstName = "John";
let lastName = "Doe";

// Concatenate with a space between
let fullName = firstName + " " + lastName;

// Display the result
console.log("First name:", firstName);
console.log("Last name:", lastName);
console.log("Full name:", fullName);

Exercise 4: Temperature Conversion

Convert Celsius to Fahrenheit (Formula: F = C × 9/5 + 32):

// Define temperature in Celsius
let celsius = 25;

// Convert to Fahrenheit
let fahrenheit = celsius * 9/5 + 32;

// Display the result
console.log(celsius + "°C is equal to " + fahrenheit + "°F");

Guided Project: First Steps into JavaScript

Welcome to your first Guided Project video! This video will cover several essential topics related to setting up a webpage, including creating a basic HTML scaffold and adding JavaScript to your page. We will also discuss important concepts such as values, variables, and evaluating expressions in the console. Understanding these concepts will build a strong foundation for you to build on throughout this course and help you develop the skills you need to create dynamic and engaging web pages. Learning new skills can be challenging, but don't be discouraged - with practice and persistence you'll be able to master these concepts in no time!

Solution

Here is the solution to the Guided Project:

                        
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>First Steps into JavaScript Guided Project</title>
        <style>

        </style>
    </head>

    <body>
        <h1>First Steps into JavaScript Guided Project</h1>

        <script>
            let num = 6
            console.log(num)
            num++
            console.log(num)
            num += 2
            console.log(num)
            const anotherNum = 7
            anotherNum += 3

            let retirementAge = 65
            let actualAge = 67
            let lovesJS = false

            let isRetired = actualAge >= retirementAge
            console.log('isRetired -->', isRetired)
            console.log(isRetired && lovesJS)
            console.log(isRetired || lovesJS)

            {
                let foo = 'foo'
                console.log(foo)
            }
        </script>
    </body>
</html>

Additional Resources

MDN JavaScript Guide JavaScript.info W3Schools JavaScript Tutorial