Mesela şu sayfayı node.js ile nasıl çalıştırabiliriz?
<!DOCTYPE html>
<html>
<head>
<title>Hesap Makinesi</title>
</head>
<body>
<h1>Hesap Makinesi</h1>
<label for="sayi1">Sayı 1:</label>
<input type="text" id="sayi1"><br><br>
<label for="operator">İşlem:</label>
<select id="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select><br><br>
<label for="sayi2">Sayı 2:</label>
<input type="text" id="sayi2"><br><br>
<button onclick="hesapla()">Hesapla</button><br><br>
<div id="sonuc"></div>
</body>
</html>
<script>
// Hesaplama fonksiyonu
function hesapla() {
let sayi1 = parseFloat(document.getElementById('sayi1').value);
let sayi2 = parseFloat(document.getElementById('sayi2').value);
let operator = document.getElementById('operator').value;
let sonuc;
if (operator === '+') {
sonuc = sayi1 + sayi2;
} else if (operator === '-') {
sonuc = sayi1 - sayi2;
} else if (operator === '*') {
sonuc = sayi1 * sayi2;
} else if (operator === '/') {
sonuc = sayi1 / sayi2;
}
document.getElementById('sonuc').innerHTML = 'Sonuç: ' + sonuc;
}
// HTML'de button click event'i ile çağrılacak
</script>
Verdiğiniz örnek için nodejs kullanmaya gerek yok tabi ama mantığı anlamanız açısından
index.html dosyası ana klasörde public içinde olması lazım
<!DOCTYPE html>
<html>
<head>
<title>Hesap Makinesi</title>
</head>
<body>
<h1>Hesap Makinesi</h1>
<label for="sayi1">Sayı 1:</label>
<input type="text" id="sayi1"><br><br>
<label for="operator">İşlem:</label>
<select id="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select><br><br>
<label for="sayi2">Sayı 2:</label>
<input type="text" id="sayi2"><br><br>
<button onclick="hesapla()">Hesapla</button><br><br>
<div id="sonuc"></div>
</body>
</html>
<script>
async function hesapla() {
try {
let sayi1 = parseFloat(document.getElementById('sayi1').value);
let sayi2 = parseFloat(document.getElementById('sayi2').value);
let operator = document.getElementById('operator').value;
const response = await fetch('/hesapla', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
sayi1: sayi1,
sayi2: sayi2,
operator:operator
})
});
const data = await response.json();
document.getElementById('sonuc').innerHTML = 'Sonuç: ' + JSON.stringify(data.sonuc);
} catch (error) {
console.error('Hata:', error);
}
}
</script>hesap.js
const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const app = express();
app.use(express.static(path.join(__dirname, 'public')));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'index.html'));
});
app.post('/hesapla', (req, res) => {
let sayi1 = parseFloat(req.body.sayi1);
let sayi2 = parseFloat(req.body.sayi2);
let operator = req.body.operator;
let sonuc;
if (operator === '+') {
sonuc = sayi1 + sayi2;
} else if (operator === '-') {
sonuc = sayi1 - sayi2;
} else if (operator === '*') {
sonuc = sayi1 * sayi2;
} else if (operator === '/') {
sonuc = sayi1 / sayi2;
}
res.json({"sonuc":sonuc});
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Sunucu ${PORT} portunda çalışıyor...`));Klasör yapısı bu şekilde olmalı
express,path,body-parser kütüphanelerini yüklemeniz gerekli.
localhost:3000 üzerinden erişebilirsiniz.
index.html dosya olarak okunup
app.get('/'...) kısmında kullanıcıya döndürülüyor.
Javascript fonksiyonu post isteği atıyor bu hesap.js içindeki app.post('/hesapla' ...) kısmında hesaplanıp kullanıcıya sonuç döndürülüyor hesaplama fonksiyonu kullanıcıya gösterilmiyor sadece sonuç dönüyor.