diff --git a/Presentation_m2s1_Javascript_fundamentals_1.html b/Presentation_m2s1_Javascript_fundamentals_1.html new file mode 100644 index 0000000..3f44969 --- /dev/null +++ b/Presentation_m2s1_Javascript_fundamentals_1.html @@ -0,0 +1,582 @@ + + + + + + JavaScript Fundamentals - Presentation 1 + + + +
+
+

🚀 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
+
+
+ + + + \ No newline at end of file diff --git a/Presentation_m2s1_Javascript_fundamentals_2.html b/Presentation_m2s1_Javascript_fundamentals_2.html new file mode 100644 index 0000000..de69166 --- /dev/null +++ b/Presentation_m2s1_Javascript_fundamentals_2.html @@ -0,0 +1,728 @@ + + + + + + JavaScript History & Evolution + + + +
+
+

📜 The History of JavaScript

+

From 10-Day Prototype to World's Most Popular Language

+ +
+
+
+ +
+

The Birth of JavaScript

+

JavaScript was created around April 1995 by Brendan Eich, who was working at Netscape Communications Corporation.

+ +
+
+
+

1995 - The 10-Day Challenge

+

Brendan Eich was given only 10 days to design and code a working prototype of a programming language that could run in the browser.

+

Netscape was in fierce competition with Microsoft and needed to release their browser quickly.

+
+
+ +
+
+

Original Goal

+

Create a language that appealed to non-professional programmers, similar to Microsoft Visual Basic's accessibility.

+

Initially called LiveScript, it was renamed to JavaScript to capitalize on Java's popularity.

+
+
+
+ +
+

"Learning JavaScript used to mean you weren't a serious developer. Today, not learning JavaScript means the same thing."

+

- Tim O'Reilly, Founder of O'Reilly Media

+
+
+ +
+ +
+ +
Slide 1 of 7
+
+ +
+

🚀 JavaScript's Evolution

+

From Simple Scripts to Full Applications

+ +
+
+
+ +
+

The Early Years (1995-2005)

+

In the beginning, JavaScript was designed primarily for:

+
    +
  • Adding simple interactions to web pages
    • +
  • Basic form validation
    • +
  • Image rollovers and simple animations
    • +
+

It wasn't considered a "serious" programming language by many developers.

+ +
+
+
+

2005 - The jQuery Revolution

+

jQuery and AJAX were released, making JavaScript much more powerful and easier to use.

+

Developers could now easily:

+
    +
  • Manipulate the DOM
    • +
  • Make asynchronous requests
    • +
  • Create rich interactive experiences
    • +
+
+
+ +
+
+

2008 - Modern Browsers Emerge

+

Google launched Chrome with its powerful V8 JavaScript engine.

+

Facebook began driving massive web adoption, requiring more sophisticated front-end capabilities.

+
+
+
+
+ +
+ + +
+ +
Slide 2 of 7
+
+ +
+

💪 The Modern JavaScript Era

+

Breaking Browser Boundaries

+ +
+
+
+ +
+

Browser APIs & Server-Side JavaScript

+ +
+
+
+

Browser APIs

+

Browsers began exposing powerful APIs to JavaScript:

+
    +
  • Geolocation API
    • +
  • Canvas for graphics
    • +
  • Local Storage
    • +
  • Device APIs
    • +
+

This allowed web applications to behave more like native desktop applications.

+
+
+ +
+
+

2009 - Node.js Changes Everything

+

Ryan Dahl created Node.js, allowing JavaScript to run on the server.

+

This was a revolutionary development because:

+
    +
  • Developers could use one language for both frontend and backend
    • +
  • JavaScript could now compete with PHP, Python, Java, Ruby
    • +
  • Full-stack JavaScript development became possible
    • +
+
+
+
+ +
+

Today's JavaScript Ecosystem

+

JavaScript now powers:

+
    +
  • Web Applications - Frontend frameworks like React, Angular, Vue
    • +
  • Server Applications - Node.js, Express.js
    • +
  • Mobile Apps - React Native, Ionic, NativeScript
    • +
  • Desktop Apps - Electron
    • +
  • Internet of Things - JavaScript on microcontrollers
    • +
+
+
+ +
+ + +
+ +
Slide 3 of 7
+
+ +
+

🎯 Why Learn JavaScript?

+

4 Compelling Reasons

+ +
+
+
+ +
+
+

🌐 Browser Dominance

+

JavaScript is the only programming language that runs natively in all web browsers. If you want to create interactive web experiences, you must learn JavaScript.

+
+ +
+

📚 Learning Curve

+

JavaScript is relatively easy to start with basic concepts, though it has depth and complexity for advanced development. This makes it accessible for beginners.

+
+ +
+

💼 Essential for Web Apps

+

Modern web applications require JavaScript. From simple websites to complex SPAs (Single Page Applications), JavaScript is fundamental.

+
+ +
+

🚀 Career Opportunities

+

There's high demand for JavaScript developers across frontend, backend, and full-stack roles. Learning JavaScript opens doors to numerous career paths.

+
+
+ +
+

Career Paths with JavaScript

+

Mastering JavaScript can lead to various roles:

+
    +
  • Frontend Developer - Building user interfaces with React, Angular, or Vue
    • +
  • Backend Developer - Creating servers and APIs with Node.js
    • +
  • Full-Stack Developer - Handling both frontend and backend
    • +
  • Mobile Developer - Building apps with React Native
    • +
  • DevOps Engineer - Working with JavaScript-based tools
    • +
+
+ +
+ + +
+ +
Slide 4 of 7
+
+ +
+

⚔️ JavaScript vs Java

+

Understanding the Difference

+ +
+
+
+ +
+

The Name Confusion

+

JavaScript was originally named LiveScript, but was renamed to JavaScript for marketing reasons.

+

Java was extremely popular at the time, and Netscape hoped the similar name would attract developers.

+

Important: JavaScript and Java are completely different languages with different purposes, syntax, and use cases.

+
+ +
+
+

JavaScript

+
    +
  • Dynamic, interpreted scripting language
    • +
  • Runs in browsers and on servers (Node.js)
    • +
  • Prototype-based object orientation
    • +
  • Dynamic typing (variables can change types)
    • +
  • Event-driven and functional programming features
    • +
  • Primarily used for web development
    • +
+
+ +
+

Java

+
    +
  • Static, compiled programming language
    • +
  • Runs on Java Virtual Machine (JVM)
    • +
  • Class-based object orientation
    • +
  • Static typing (variables have fixed types)
    • +
  • Traditional object-oriented programming
    • +
  • Used for enterprise applications, Android apps, etc.
    • +
+
+
+ +
+

Key Takeaway

+

You don't need to know Java to learn JavaScript (or vice versa). They are separate languages with different learning paths and applications.

+
+ +
+ + +
+ +
Slide 5 of 7
+
+ +
+

🔧 Full-Stack JavaScript Development

+

One Language, Entire Application

+ +
+
+
+ +
+

What is a Full-Stack JavaScript Developer?

+

A full-stack JavaScript developer can build both client-side (frontend) and server-side (backend) software using JavaScript.

+

In addition to HTML and CSS, they work with:

+
+ +
+
+

Client Software (Front End)

+
    +
  • HTML & CSS
    • +
  • JavaScript (ES5/ES6+)
    • +
  • React / Angular / Vue
    • +
  • jQuery
    • +
  • HTML DOM
    • +
  • JSON & XML
    • +
  • Bootstrap / W3.CSS
    • +
  • Redux / GraphQL
    • +
  • Webpack / Grunt / Gulp
    • +
+
+ +
+

Server Software (Back End)

+
    +
  • Node.js
    • +
  • Express.js
    • +
  • Databases (MongoDB, SQL)
    • +
  • REST APIs
    • +
  • Authentication
    • +
  • Web Sockets
    • +
  • Server Deployment
    • +
  • Cloud Platforms (AWS, Azure)
    • +
  • Testing (Jest, Mocha)
    • +
+
+
+ +
+

The Full-Stack Advantage

+

With JavaScript across the entire stack, developers can:

+
    +
  • Use the same language for frontend and backend
    • +
  • Share code between client and server
    • +
  • Context-switch less between different syntax
    • +
  • Build applications more efficiently
    • +
  • Participate in both frontend and backend discussions
    • +
+
+ +
+ + +
+ +
Slide 6 of 7
+
+ +
+

🚀 Your JavaScript Journey

+

From Beginner to Professional Developer

+ +
+
+
+ +
+

JavaScript's Incredible Journey

+

From a 10-day prototype to the world's most popular programming language, JavaScript has come a long way.

+ +
+
+
+

1995 - The Beginning

+

Created in 10 days by Brendan Eich at Netscape

+

Simple scripting for web pages

+
+
+ +
+
+

2005 - jQuery Era

+

Made JavaScript powerful and accessible

+

DOM manipulation became easy

+
+
+ +
+
+

2009 - Node.js Revolution

+

JavaScript broke out of the browser

+

Full-stack development became possible

+
+
+ +
+
+

Today - Universal Language

+

Web, mobile, desktop, servers, IoT

+

Massive ecosystem and community

+
+
+
+
+ +
+

Your Path Forward

+

By learning JavaScript, you're not just learning a programming language - you're gaining access to:

+
    +
  • Web Development - Create interactive websites and web applications
    • +
  • Mobile Development - Build cross-platform mobile apps
    • +
  • Backend Development - Create servers and APIs
    • +
  • Career Opportunities - Join one of the largest developer communities
    • +
+

JavaScript is your gateway to modern software development!

+
+ +
+ + +
+ +
Slide 7 of 7
+
+
+ + + + \ No newline at end of file