582 lines
19 KiB
HTML
582 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>JavaScript Fundamentals - Presentation 1</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
line-height: 1.6;
|
|
color: #333;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.slide {
|
|
background: white;
|
|
border-radius: 15px;
|
|
padding: 40px;
|
|
margin: 20px auto;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
|
display: none;
|
|
min-height: 80vh;
|
|
}
|
|
|
|
.active {
|
|
display: block;
|
|
}
|
|
|
|
h1 {
|
|
color: #2c3e50;
|
|
border-bottom: 3px solid #3498db;
|
|
padding-bottom: 10px;
|
|
margin-bottom: 20px;
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
h2 {
|
|
color: #34495e;
|
|
margin: 20px 0 15px;
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
h3 {
|
|
color: #2980b9;
|
|
margin: 15px 0 10px;
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
.learning-outcomes, .setup, .exercise, .why-it-matters, .demo-section {
|
|
background: #f8f9fa;
|
|
padding: 25px;
|
|
border-left: 4px solid #3498db;
|
|
margin: 20px 0;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.demo-section {
|
|
border-left-color: #e74c3c;
|
|
}
|
|
|
|
code {
|
|
background: #2c3e50;
|
|
color: #ecf0f1;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
display: block;
|
|
margin: 10px 0;
|
|
font-family: 'Consolas', monospace;
|
|
overflow-x: auto;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.btn {
|
|
background: #3498db;
|
|
color: white;
|
|
padding: 12px 25px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
margin: 10px 5px;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn:hover {
|
|
background: #2980b9;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.btn-demo {
|
|
background: #e74c3c;
|
|
}
|
|
|
|
.btn-demo:hover {
|
|
background: #c0392b;
|
|
}
|
|
|
|
.nav {
|
|
text-align: center;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.tool-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 15px;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.tool-item {
|
|
background: #e8f4fc;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.light-demo {
|
|
text-align: center;
|
|
padding: 30px;
|
|
background: #f5f5f5;
|
|
border-radius: 10px;
|
|
margin: 20px 0;
|
|
border: 2px solid #ddd;
|
|
}
|
|
|
|
.light-demo img {
|
|
margin: 20px 0;
|
|
border: 2px solid #333;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.web-dev-path {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.path-step {
|
|
flex: 1;
|
|
min-width: 250px;
|
|
background: #e8f4fc;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
.path-step h4 {
|
|
color: #2c3e50;
|
|
margin-bottom: 10px;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.frontend-backend {
|
|
display: flex;
|
|
gap: 20px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.frontend, .backend {
|
|
flex: 1;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
color: white;
|
|
}
|
|
|
|
.frontend {
|
|
background: #3498db;
|
|
}
|
|
|
|
.backend {
|
|
background: #e74c3c;
|
|
}
|
|
|
|
ul {
|
|
margin-left: 20px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
li {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 8px;
|
|
background: #ecf0f1;
|
|
border-radius: 4px;
|
|
margin: 20px 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress {
|
|
height: 100%;
|
|
background: #3498db;
|
|
width: 16.66%;
|
|
transition: width 0.5s ease;
|
|
}
|
|
|
|
.slide-counter {
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
color: #7f8c8d;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.slide {
|
|
padding: 20px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.web-dev-path, .frontend-backend {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="slide active" id="slide1">
|
|
<h1>🚀 JavaScript Fundamentals</h1>
|
|
<h2>Presentation 1: Getting Started with Web Development</h2>
|
|
|
|
<div class="progress-bar">
|
|
<div class="progress" style="width: 16.66%"></div>
|
|
</div>
|
|
|
|
<div class="learning-outcomes">
|
|
<h3>📚 Learning Outcomes</h3>
|
|
<ul>
|
|
<li>Understand what JavaScript is and its importance</li>
|
|
<li>See JavaScript in action with an interactive demo</li>
|
|
<li>Learn the difference between frontend and backend development</li>
|
|
<li>Set up development environment on Windows</li>
|
|
<li>Write and run your first JavaScript program</li>
|
|
<li>Learn basic Git commands for version control</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="why-it-matters">
|
|
<h3>💡 Why This Matters</h3>
|
|
<p>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!</p>
|
|
</div>
|
|
|
|
<div class="nav">
|
|
<button class="btn" onclick="showSlide(2)">Next →</button>
|
|
</div>
|
|
|
|
<div class="slide-counter">Slide 1 of 7</div>
|
|
</div>
|
|
|
|
<div class="slide" id="slide2">
|
|
<h1>💡 JavaScript in Action</h1>
|
|
<h2>Interactive Light Bulb Demo</h2>
|
|
|
|
<div class="progress-bar">
|
|
<div class="progress" style="width: 33.33%"></div>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<h3>See What JavaScript Can Do</h3>
|
|
<p>Below is a simple example of JavaScript changing HTML content dynamically. Click the buttons to turn the light bulb on and off!</p>
|
|
|
|
<div class="light-demo">
|
|
<h2>What Can JavaScript Do?</h2>
|
|
<p>JavaScript can change HTML attribute values.</p>
|
|
<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>
|
|
|
|
<button class="btn btn-demo" onclick="document.getElementById('myImage').src='https://www.w3schools.com/js/pic_bulbon.gif'">Turn on the light</button>
|
|
|
|
<img id="myImage" src="https://www.w3schools.com/js/pic_bulboff.gif" style="width:100px">
|
|
|
|
<button class="btn btn-demo" onclick="document.getElementById('myImage').src='https://www.w3schools.com/js/pic_bulboff.gif'">Turn off the light</button>
|
|
</div>
|
|
|
|
<h3>How It Works</h3>
|
|
<p>This example uses JavaScript to:</p>
|
|
<ul>
|
|
<li>Find an HTML element by its ID (<code>getElementById('myImage')</code>)</li>
|
|
<li>Change the image source (<code>src</code> attribute) when buttons are clicked</li>
|
|
<li>Respond to user interactions (<code>onclick</code> event)</li>
|
|
</ul>
|
|
|
|
<p>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!</p>
|
|
</div>
|
|
|
|
<div class="nav">
|
|
<button class="btn" onclick="showSlide(1)">← Previous</button>
|
|
<button class="btn" onclick="showSlide(3)">Next →</button>
|
|
</div>
|
|
|
|
<div class="slide-counter">Slide 2 of 7</div>
|
|
</div>
|
|
|
|
<div class="slide" id="slide3">
|
|
<h1>🌐 Web Development Path</h1>
|
|
<h2>Frontend vs Backend Development</h2>
|
|
|
|
<div class="progress-bar">
|
|
<div class="progress" style="width: 50%"></div>
|
|
</div>
|
|
|
|
<div class="why-it-matters">
|
|
<h3>Your Path to Becoming a Web Developer</h3>
|
|
<p>To become a web developer, follow these steps in order:</p>
|
|
|
|
<div class="web-dev-path">
|
|
<div class="path-step">
|
|
<h4>1. HTML</h4>
|
|
<p>Create your first web page with the standard markup language for web content.</p>
|
|
</div>
|
|
<div class="path-step">
|
|
<h4>2. CSS</h4>
|
|
<p>Style your web page with beautiful colors, fonts, and layouts.</p>
|
|
</div>
|
|
<div class="path-step">
|
|
<h4>3. JavaScript</h4>
|
|
<p>Make your web pages dynamic and interactive for users.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p>After mastering HTML, CSS, and JavaScript, you can publish your website for the world to see!</p>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<h3>Frontend vs Backend Development</h3>
|
|
|
|
<div class="frontend-backend">
|
|
<div class="frontend">
|
|
<h4>Frontend Development</h4>
|
|
<p><strong>Client-side</strong> - How a web page looks</p>
|
|
<ul>
|
|
<li>What users see and interact with</li>
|
|
<li>HTML, CSS, JavaScript</li>
|
|
<li>Frameworks: React, Angular, Vue</li>
|
|
<li>Creates static websites</li>
|
|
</ul>
|
|
<p><strong>Hello, Front-End Developer!</strong></p>
|
|
</div>
|
|
|
|
<div class="backend">
|
|
<h4>Backend Development</h4>
|
|
<p><strong>Server-side</strong> - How a web page works</p>
|
|
<ul>
|
|
<li>Server, database, application logic</li>
|
|
<li>Languages: PHP, Python, Java, Node.js</li>
|
|
<li>Database: SQL, MongoDB</li>
|
|
<li>Makes websites dynamic</li>
|
|
</ul>
|
|
<p><strong>Manages data and business logic</strong></p>
|
|
</div>
|
|
</div>
|
|
|
|
<p><strong>Full-Stack Developers</strong> work with both frontend and backend technologies!</p>
|
|
</div>
|
|
|
|
<div class="nav">
|
|
<button class="btn" onclick="showSlide(2)">← Previous</button>
|
|
<button class="btn" onclick="showSlide(4)">Next →</button>
|
|
</div>
|
|
|
|
<div class="slide-counter">Slide 3 of 7</div>
|
|
</div>
|
|
|
|
<div class="slide" id="slide4">
|
|
<h1>🛠️ Environment Setup</h1>
|
|
|
|
<div class="progress-bar">
|
|
<div class="progress" style="width: 66.66%"></div>
|
|
</div>
|
|
|
|
<div class="setup">
|
|
<h3>Tools We'll Use</h3>
|
|
<div class="tool-list">
|
|
<div class="tool-item">Windows PowerShell</div>
|
|
<div class="tool-item">Yandex Browser</div>
|
|
<div class="tool-item">jseditor.io</div>
|
|
<div class="tool-item">Git</div>
|
|
</div>
|
|
|
|
<h4>PowerShell Setup Commands:</h4>
|
|
<code>
|
|
# 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
|
|
</code>
|
|
|
|
<h4>Alternative: Use JSEditor.io</h4>
|
|
<p>For quick testing, use <a href="https://jseditor.io" target="_blank">jseditor.io</a> - no setup required!</p>
|
|
</div>
|
|
|
|
<div class="nav">
|
|
<button class="btn" onclick="showSlide(3)">← Previous</button>
|
|
<button class="btn" onclick="showSlide(5)">Next →</button>
|
|
</div>
|
|
|
|
<div class="slide-counter">Slide 4 of 7</div>
|
|
</div>
|
|
|
|
<div class="slide" id="slide5">
|
|
<h1>👋 Your First JavaScript Program</h1>
|
|
|
|
<div class="progress-bar">
|
|
<div class="progress" style="width: 83.33%"></div>
|
|
</div>
|
|
|
|
<div class="exercise">
|
|
<h3>Hello World & Basic Output</h3>
|
|
<p>Open <a href="https://jseditor.io" target="_blank">jseditor.io</a> and try this code:</p>
|
|
|
|
<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!");
|
|
</code>
|
|
|
|
<p><strong>💡 Tip:</strong> The <code>console.log()</code> function prints output to the console.</p>
|
|
</div>
|
|
|
|
<div class="nav">
|
|
<button class="btn" onclick="showSlide(4)">← Previous</button>
|
|
<button class="btn" onclick="showSlide(6)">Next →</button>
|
|
</div>
|
|
|
|
<div class="slide-counter">Slide 5 of 7</div>
|
|
</div>
|
|
|
|
<div class="slide" id="slide6">
|
|
<h1>💻 Lab Work: Personal Profile</h1>
|
|
|
|
<div class="progress-bar">
|
|
<div class="progress" style="width: 100%"></div>
|
|
</div>
|
|
|
|
<div class="exercise">
|
|
<h3>Build a Personal Introduction Program</h3>
|
|
<p><strong>Create a program that displays your personal information:</strong></p>
|
|
|
|
<code>
|
|
// 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);
|
|
</code>
|
|
|
|
<p><strong>✅ Challenge:</strong> Add more personal information and calculations!</p>
|
|
</div>
|
|
|
|
<div class="nav">
|
|
<button class="btn" onclick="showSlide(5)">← Previous</button>
|
|
<button class="btn" onclick="showSlide(7)">Next →</button>
|
|
</div>
|
|
|
|
<div class="slide-counter">Slide 6 of 7</div>
|
|
</div>
|
|
|
|
<div class="slide" id="slide7">
|
|
<h1>📁 Git Practice & Next Steps</h1>
|
|
|
|
<div class="progress-bar">
|
|
<div class="progress" style="width: 100%"></div>
|
|
</div>
|
|
|
|
<div class="setup">
|
|
<h3>Version Control with Git</h3>
|
|
<code>
|
|
# 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
|
|
</code>
|
|
</div>
|
|
|
|
<div class="learning-outcomes">
|
|
<h3>🎯 What We Learned Today</h3>
|
|
<ul>
|
|
<li>✓ Saw JavaScript in action with interactive demo</li>
|
|
<li>✓ Learned about frontend vs backend development</li>
|
|
<li>✓ JavaScript environment setup</li>
|
|
<li>✓ Basic syntax and console output</li>
|
|
<li>✓ Variables (let) and constants (const)</li>
|
|
<li>✓ Building a personal profile program</li>
|
|
<li>✓ Basic Git workflow</li>
|
|
</ul>
|
|
|
|
<p><strong>🚀 Next Session:</strong> Operators, Arrays, and more data manipulation!</p>
|
|
</div>
|
|
|
|
<div class="nav">
|
|
<button class="btn" onclick="showSlide(6)">← Previous</button>
|
|
<button class="btn" onclick="showSlide(1)">Restart</button>
|
|
</div>
|
|
|
|
<div class="slide-counter">Slide 7 of 7</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function showSlide(slideNumber) {
|
|
// Hide all slides
|
|
document.querySelectorAll('.slide').forEach(slide => {
|
|
slide.classList.remove('active');
|
|
});
|
|
|
|
// Show the selected slide
|
|
document.getElementById('slide' + slideNumber).classList.add('active');
|
|
|
|
// Update progress bar
|
|
const progress = document.querySelector('.progress');
|
|
const percentage = (slideNumber / 7) * 100;
|
|
progress.style.width = percentage + '%';
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |