Bilişim Sınıfı Çalışmaları 3.Ders - Computer Science Class Activities, Lesson 3

Bilişim Sınıfı Çalışmaları 3.Ders - Computer Science Class Activities, Lesson 3

5.Sınıf:

6.Sınıf:

Etkinlik Materyallerine Ulaşmak İçin Tıkla

Kapsamlı Kapasite Hesaplayıcı Kodları:

<!DOCTYPE html>

<head>

<title>Gökkuşağı Temalı Kapasite Hesaplayıcı</title>

<style>

/* Arka plana canlı gökkuşağı renkleri ve hareket efekti ekliyoruz */

body {

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);

background-size: 400% 400%;

animation: rainbowBackground 15s ease infinite;

color: #333;

margin: 0;

padding: 20px;

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

box-sizing: border-box;

}

/* Gökkuşağının yavaşça dalgalanmasını sağlayan animasyon */

@keyframes rainbowBackground {

0% { background-position: 0% 50%; }

50% { background-position: 100% 50%; }

100% { background-position: 0% 50%; }

}

/* Ana panel: Arkadaki gökkuşağını hafifçe süzmesi için buzlu cam efekti uygulandı */

.container {

max-width: 700px;

width: 100%;

background: rgba(255, 255, 255, 0.85);

backdrop-filter: blur(10px);

-webkit-backdrop-filter: blur(10px);

padding: 30px;

border-radius: 16px;

box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);

border: 1px solid rgba(255, 255, 255, 0.4);

}

h1 {

color: #2c3e50;

text-align: center;

font-size: 26px;

margin-bottom: 20px;

text-shadow: 1px 1px 2px rgba(255,255,255,0.8);

}

.info-box {

background-color: rgba(232, 244, 248, 0.9);

border-left: 5px solid #3498db;

padding: 12px;

margin-bottom: 20px;

border-radius: 4px;

font-size: 14px;

font-weight: 500;

}

label {

font-weight: bold;

display: block;

margin-bottom: 8px;

color: #34495e;

}

textarea {

width: 100%;

height: 120px;

padding: 12px;

font-size: 16px;

border: 2px solid rgba(189, 195, 199, 0.6);

border-radius: 8px;

box-sizing: border-box;

resize: vertical;

background: rgba(255, 255, 255, 0.9);

transition: border-color 0.3s;

}

textarea:focus {

border-color: #3498db;

outline: none;

background: #ffffff;

}

.results-panel {

margin-top: 25px;

background: rgba(248, 249, 250, 0.9);

border-radius: 10px;

padding: 15px;

border: 1px solid rgba(226, 232, 240, 0.8);

}

.result-item {

display: flex;

justify-content: space-between;

padding: 12px 0;

border-bottom: 1px solid rgba(237, 242, 247, 0.8);

}

.result-item:last-child {

border-bottom: none;

}

.result-label {

font-weight: 600;

color: #4a5568;

}

.result-value {

font-weight: 700;

font-family: 'Courier New', Courier, monospace;

font-size: 16px;

text-align: right;

}

/* Sonuç renkleri gökkuşağı konseptine uygun olarak canlı tonlarda seçildi */

.highlight-char { color: #2c3e50; }

.highlight-bit { color: #e53e3e; }

.highlight-byte { color: #d69e2e; }

.highlight-kb { color: #319795; }

.highlight-mb { color: #3182ce; }

.highlight-gb { color: #805ad5; }

</style>

</head>

<body>

<h1>🌈 Kapsamlı Kapasite Hesaplayıcı 🌈</h1>

<strong>Bilgi:</strong> Yazdığınız her karakter 1 Byte (8 Bit) yer kaplar. Üst birimlere geçilirken değerler her adımda 1024'e bölünür.

</div>

<label for="textInput">Metni, İsmini veya Kodunu Buraya Yazın:</label>

<span class="result-label">Karakter Sayısı:</span>

</div>

<span class="result-label">Kapladığı Alan (Bit):</span>

</div>

<span class="result-label">Kapladığı Alan (Byte):</span>

</div>

<span class="result-label">Kapladığı Alan (Kilobyte - KB):</span>

</div>

<span class="result-label">Kapladığı Alan (Megabyte - MB):</span>

</div>

<span class="result-label">Kapladığı Alan (Gigabyte - GB):</span>

</div>

function formatNumber(num) {

if (num === 0) return "0";

// Çok küçük sayılarda bilimsel gösterimi engellemek için hassas dönüştürme

if (num < 0.000001) {

return num.toFixed(12).replace(/\.?0+$/, "");

}

return num.toLocaleString('tr-TR', { maximumFractionDigits: 10 });

}

function calculateStorage() {

const text = document.getElementById('textInput').value;

const characterCount = text.length;

const byteCount = characterCount;

const bitCount = byteCount * 8;

const kbCount = byteCount / 1024;

const mbCount = kbCount / 1024;

const gbCount = mbCount / 1024;

document.getElementById('charCount').innerText = characterCount;

document.getElementById('bitCount').innerText = formatNumber(bitCount) + " Bit";

document.getElementById('byteCount').innerText = formatNumber(byteCount) + " B";

document.getElementById('kbCount').innerText = formatNumber(kbCount) + " KB";

document.getElementById('mbCount').innerText = formatNumber(mbCount) + " MB";

document.getElementById('gbCount').innerText = formatNumber(gbCount) + " GB";

}

</script>

</body>

</html>

  Dosya Uzantısı Uygulaması Kodları:

<!DOCTYPE html>

<head>

<title>Gökkuşağı Temalı Dosya Uzantısı Rehberi</title>

<style>

/* Arka plana hareketli gökkuşağı efekti */

body {

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);

background-size: 400% 400%;

animation: rainbowBackground 15s ease infinite;

color: #333;

margin: 0;

padding: 20px;

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

box-sizing: border-box;

}

@keyframes rainbowBackground {

0% { background-position: 0% 50%; }

50% { background-position: 100% 50%; }

100% { background-position: 0% 50%; }

}

/* Buzlu cam görünümlü ana panel */

.container {

max-width: 750px;

width: 100%;

background: rgba(255, 255, 255, 0.88);

backdrop-filter: blur(10px);

-webkit-backdrop-filter: blur(10px);

padding: 30px;

border-radius: 16px;

box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);

border: 1px solid rgba(255, 255, 255, 0.4);

}

h1, h2 {

color: #2c3e50;

text-align: center;

margin-top: 0;

}

.info-box {

background-color: rgba(232, 244, 248, 0.9);

border-left: 5px solid #3498db;

padding: 12px;

margin-bottom: 20px;

border-radius: 4px;

font-size: 14px;

line-height: 1.5;

}

.section {

background: rgba(248, 249, 250, 0.9);

border: 1px solid rgba(226, 232, 240, 0.8);

padding: 20px;

border-radius: 10px;

margin-bottom: 20px;

}

label {

font-weight: bold;

display: block;

margin-bottom: 8px;

color: #34495e;

}

.input-group {

display: flex;

gap: 10px;

align-items: center;

margin-bottom: 10px;

}

input[type="text"], select {

padding: 10px;

font-size: 16px;

border: 2px solid rgba(189, 195, 199, 0.6);

border-radius: 6px;

background: #fff;

box-sizing: border-box;

}

input[type="text"] { flex: 2; }

select { flex: 1; }

.error-message {

color: #e53e3e;

font-weight: bold;

font-size: 14px;

margin-top: 5px;

display: none;

}

.results-panel {

background: #fff;

border-radius: 8px;

padding: 15px;

border: 1px solid #edf2f7;

margin-top: 15px;

}

.result-item {

display: flex;

justify-content: space-between;

padding: 8px 0;

border-bottom: 1px solid #edf2f7;

}

.result-item:last-child { border-bottom: none; }

.result-label { font-weight: 600; color: #4a5568; }

.result-value { font-weight: 700; color: #2b6cb0; }

.highlight { color: #e53e3e; }

.badge {

display: inline-block;

padding: 4px 8px;

background: #319795;

color: white;

border-radius: 4px;

font-size: 14px;

}

</style>

</head>

<body>

<h1>🌈 Dosya Uzantıları Rehberi 🌈</h1>

<strong>Dosya Yapısı Bilgisi:</strong> <br>

1. Kısım: <strong>Dosya Adı</strong> (İçinde <code>? * / \ : < > | "</code> karakterleri kullanılamaz)<br>

2. Kısım: <strong>Nokta (.) işareti</strong> (Tüm dosyalarda bulunur)<br>

3. Kısım: <strong>Dosya Uzantısı</strong> (Dosyanın türünü ve hangi programla açılacağını belirtir)

</div>

<h2>1. Dosya İsmi Oluşturucu & Analiz Et</h2>

<label for="fileNameInput">Dosya Adı ve Uzantısı Yazın:</label>

<option value="mp3">mp3 (Müzik)</option>

<option value="jpg">jpg (Resim)</option>

<option value="png">png (Resim)</option>

<option value="gif">gif (Hareketli Resim)</option>

<option value="txt">txt (Metin)</option>

<option value="mp4">mp4 (Film/Video)</option>

<option value="pptx">pptx (Sunum)</option>

<option value="xlsx">xlsx (Excel)</option>

<option value="pdf">pdf (Kitap/Doküman)</option>

<option value="rar">rar (Sıkıştırılmış)</option>

<option value="apk">apk (Android Uygulaması)</option>

</select>

</div>

<div class="error-message" id="errorDiv">⚠️ Dosya adında ? * / \ : < > | " karakterleri kullanılamaz!</div>

<span class="result-label">Oluşturulan Tam Dosya:</span>

</div>

<span class="result-label">1. Kısım (Dosya Adı):</span>

</div>

<span class="result-label">2. Kısım (Ayırıcı):</span>

</div>

<span class="result-label">3. Kısım (Dosya Uzantısı):</span>

</div>

<span class="result-label">Dosya Türü / Açıklaması:</span>

<span class="badge" id="fileTypeDesc">Seçim yapın</span>

</div>

<h2>2. Hızlı Uzantı Sorgulama</h2>

<label for="searchExtInput">Sadece Uzantı Yazın (Örn: mp3, pdf, jpeg):</label>

Uzantı yazarak türünü hemen öğrenin.

</div>

// Kullanıcının verdiği uzantı veritabanı eşleştirmesi

const extensionDb = {

"docx": "Word Belgesi Dosyası",

"doc": "Eski Model Word Belgesi Dosyası",

"mp3": "Müzik / Ses Dosyası",

"jpg": "Resim / Fotoğraf Dosyası",

"jpeg": "Resim / Fotoğraf Dosyası",

"png": "Şeffaf Arka Plan destekli Resim Dosyası",

"gif": "Hareketli Resim / Animasyon Dosyası",

"txt": "Ham Metin (Not Defteri) Dosyası",

"avi": "Film / Video Dosyası",

"mp4": "Film / Video Dosyası",

"ts": "Yayın / Film Dosyası",

"mpeg": "Film / Video Dosyası",

"ppt": "Eski Model PowerPoint Sunum Dosyası",

"pptx": "PowerPoint Sunum Dosyası",

"xls": "Eski Model Excel Tablo Dosyası",

"xlsx": "Excel Tablo Dosyası",

"pdf": "Taşınabilir Kitap / Doküman Dosyası",

"rar": "Sıkıştırılmış Arşiv Dosyası",

"zip": "Sıkıştırılmış Dosya Klasörü",

"iso": "Sıkıştırılmış Disk Kalıbı Dosyası",

"apk": "Android Uygulama Yükleme Dosyası"

};

function analyzeFile() {

let nameInput = document.getElementById('fileNameInput').value;

const extSelect = document.getElementById('extensionSelect').value;

const errorDiv = document.getElementById('errorDiv');

// Yasaklı karakter kontrolü için Düzenli İfade (Regex)

const invalidChars = /[?*\/\\:<>|"]/;

if (invalidChars.test(nameInput)) {

errorDiv.style.display = 'block';

// Yasaklı karakterleri temizle

nameInput = nameInput.replace(/[?*\/\\:<>|"]/g, '');

document.getElementById('fileNameInput').value = nameInput;

} else {

errorDiv.style.display = 'none';

}

const activeName = nameInput || "İsimsiz";

// Ekrana yazdırma işlemleri

document.getElementById('fullFileName').innerText = activeName + "." + extSelect;

document.getElementById('partName').innerText = activeName;

document.getElementById('partDot').innerText = ". (Nokta İşareti)";

document.getElementById('partExt').innerText = "." + extSelect;

document.getElementById('fileTypeDesc').innerText = extensionDb[extSelect];

}

function searchExtension() {

let searchVal = document.getElementById('searchExtInput').value.trim().toLowerCase();

// Eğer kullanıcı kazara başına nokta koyarak yazdıysa (".mp3" gibi), noktayı kaldırıyoruz

if (searchVal.startsWith('.')) {

searchVal = searchVal.substring(1);

}

const resultBox = document.getElementById('searchResultBox');

if (searchVal === "") {

resultBox.innerHTML = "Uzantı yazarak türünü hemen öğrenin.";

resultBox.style.backgroundColor = "#fff";

return;

}

if (extensionDb[searchVal]) {

resultBox.innerHTML = `🔍 <strong>.${searchVal.toUpperCase()}</strong> uzantısı bir <strong>${extensionDb[searchVal]}</strong> türüdür.`;

resultBox.style.backgroundColor = "#e8f8f5";

} else {

resultBox.innerHTML = `❌ <strong>.${searchVal.toUpperCase()}</strong> uzantısı listede bulunamadı.`;

resultBox.style.backgroundColor = "#fce4d6";

}

// Sayfa ilk yüklendiğinde varsayılan analiz çalışsın

analyzeFile();

</script>

</body>

</html>

Bilişim Sınıfı Çalışmaları 3.Ders - Computer Science Class Activities, Lesson 3

Blogda Ara

🔧 Tinkercad

🤖 Arduinom

Not Defteri

📚 Kitap Tavsiyeleri

Ders Paylaşımları

My Quizizz

Bilişim Sınıf Panosu [tıkla]

Menu