🚀 JavaScript Fundamentals

Presentation 1: Getting Started with Web Development

📚 Learning Outcomes

Understand what JavaScript is and its importance
See JavaScript in action with an interactive demo
Learn the difference between frontend and backend development
Set up development environment on Windows
Write and run your first JavaScript program
Learn basic Git commands for version control

💡 Why This Matters

JavaScript is the programming language of the web. It runs on browsers, servers (Node.js), and mobile devices. Mastering fundamentals is your first step toward becoming a web developer!

Slide 1 of 7

💡 JavaScript in Action

Interactive Light Bulb Demo

See What JavaScript Can Do

Below is a simple example of JavaScript changing HTML content dynamically. Click the buttons to turn the light bulb on and off!

What Can JavaScript Do?

JavaScript can change HTML attribute values.

In this case JavaScript changes the value of the src (source) attribute of an image.

How It Works

This example uses JavaScript to:

Find an HTML element by its ID (getElementById('myImage'))
Change the image source (src attribute) when buttons are clicked
Respond to user interactions (onclick event)

This is just a small taste of what JavaScript can do. Throughout this course, you'll learn how to create much more complex and interactive web applications!

Slide 2 of 7

🌐 Web Development Path

Frontend vs Backend Development

Your Path to Becoming a Web Developer

To become a web developer, follow these steps in order:

1. HTML

Create your first web page with the standard markup language for web content.

2. CSS

Style your web page with beautiful colors, fonts, and layouts.

3. JavaScript

Make your web pages dynamic and interactive for users.

After mastering HTML, CSS, and JavaScript, you can publish your website for the world to see!

Frontend vs Backend Development

Frontend Development

Client-side - How a web page looks

What users see and interact with
HTML, CSS, JavaScript
Frameworks: React, Angular, Vue
Creates static websites

Hello, Front-End Developer!

Backend Development

Server-side - How a web page works

Server, database, application logic
Languages: PHP, Python, Java, Node.js
Database: SQL, MongoDB
Makes websites dynamic

Manages data and business logic

Full-Stack Developers work with both frontend and backend technologies!

Slide 3 of 7

🛠️ Environment Setup

Tools We'll Use

Windows PowerShell

Yandex Browser

jseditor.io

Git

PowerShell Setup Commands:


# Open PowerShell as Administrator
# Navigate to your working directory
cd Documents
mkdir javascript-course
cd javascript-course
mkdir presentation1
cd presentation1

# Create your first JavaScript file
echo "console.log('Hello World!');" > app.js

# Run with Node.js
node app.js

Alternative: Use JSEditor.io

For quick testing, use jseditor.io - no setup required!

Slide 4 of 7

👋 Your First JavaScript Program

Hello World & Basic Output

Open jseditor.io and try this code:


// Presentation 1 - Basic JavaScript
console.log("=== JavaScript Fundamentals ===");
console.log("Hello World! 🌍");
console.log("Welcome to JavaScript Programming!");

// Basic calculations
console.log("2 + 2 = " + (2 + 2));
console.log("10 * 5 = " + (10 * 5));
console.log("100 / 4 = " + (100 / 4));

// String concatenation
console.log("Hello " + "there " + "friend!");

💡 Tip: The console.log() function prints output to the console.

Slide 5 of 7

💻 Lab Work: Personal Profile

Build a Personal Introduction Program

Create a program that displays your personal information:


// Lab Exercise: Personal Profile
console.log("=== Personal Profile ===");

// Your personal information
const firstName = "Maria";
const lastName = "Johnson";
const age = 22;
const occupation = "Web Developer";
const favoriteLanguage = "JavaScript";

// Display the information
console.log("Full Name: " + firstName + " " + lastName);
console.log("Age: " + age);
console.log("Occupation: " + occupation);
console.log("Favorite Programming Language: " + favoriteLanguage);
console.log(" ");
console.log("Nice to meet you! 😊");

// Calculate years until 30
const yearsUntil30 = 30 - age;
console.log("Years until 30: " + yearsUntil30);

✅ Challenge: Add more personal information and calculations!

Slide 6 of 7

📁 Git Practice & Next Steps

Version Control with Git


# Initialize git in your project folder
git init

# Check the status of your files
git status

# Add all files to staging
git add .

# Commit your changes with a message
git commit -m "Completed Presentation 1: JavaScript fundamentals"

# Push to gitea.techshare.cc (replace with your repo)
git remote add origin https://gitea.techshare.cc/your-username/js-course.git
git branch -M main
git push -u origin main

🎯 What We Learned Today

✓ Saw JavaScript in action with interactive demo
✓ Learned about frontend vs backend development
✓ JavaScript environment setup
✓ Basic syntax and console output
✓ Variables (let) and constants (const)
✓ Building a personal profile program
✓ Basic Git workflow

🚀 Next Session: Operators, Arrays, and more data manipulation!

Slide 7 of 7