Script " Einnahmen / Ausgaben berechnen "

Dave · 10. Mai 2016

Hallo

Ich habe ein Buch über Javascript, das Buch habe ich kurz studiert und ich verstehe es, die Scripte verstehe ich, aber ich kenne mich immer noch zu wenig aus mit der Materie.Ich möchte ein Javascript in / bei einer HTML Seite machen mit dem ich meine monatlichen Einnahmen und Ausgaben berechnen kann, unten will ich dann noch ein Javascript zum drucken der Webseite einfügen.

[Blockierte Grafik: https://img1.picload.org/image/rgoadalc/scripterklaerungzugeschnitten.jpg]

Kann man sowas mit Javascript umsetzen oder ist eine andere Scriptsprache erforderlich?

Basi · 10. Mai 2016

Wenn du nichts speichern und später wieder aufrufen möchtest ist das recht einfach umzusetzen. Wenn du das jedoch möchtest, brauchst du zusätzlich PHP und eventuell eine SQL Datenbank.

Ich habe das mal rein von der Programmlogik umgesetzt. Für learning by doing schlage ich vor du schaust es dir an und fragst nach sobald du etwas nicht verstehst. Bis ins Detail erklären ist leider zu aufwändig.

Im Großen und Ganzen gibt es 3 große Funktionen: Eine Reihe hinzufügen, die Summe ermitteln und die Summe ausgeben.

Was dir eventuell nicht bekannt vorkommt ist die Art, wie ich Funktionen definiert habe. Javascript Funktionen sind im Grunde Klassen. In Zeile 1 definiere ich die Funktion FinanceCalculator, in Zeile 134 ertselle ich mittels dem new Keyword eine Instanz der Klasse. Mittels FinanceCalculator.prototype.funktionsname fügt man zu dieser Klasse neue Funktionen hinzu, die dann mithilfe der in Zeile 134 erstellten Variable, oder innerhalb der Klasse mit dem this Keyword aufgerufen werden.

Wie gesagt: Falls Fragen auftauchen, raus damit.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Finanzrechner</title>
<style>




table {
    border-collapse: collapse;
}




td, th {
    padding: 3px;
}




tr:last-child {
    font-weight: bold;
}




#sum {
    text-align: right;
}




#add {
    text-align: center;
    cursor: pointer;
}




input[name^=value]{
    text-align: right;
}




</style>
<script src="finanzrechner.js"></script>
</head>
<body>
    <table border="1">
        <tr>
            <th>Umsatz</th>
            <th>Betrag</th>
            <th title="Ertrag">E</th>
            <th title="Aufwand">A</th>
        </tr>
        <tr>
            <td>Übertrag</td>
            <td colspan="3">
                <input type="text" name="transfer">    
            </td>
        </tr>
        <tr id="lastRow">
            <td id="sum" colspan="2">0,00</td>
            <td id="add" colspan="2">+</td>
        </tr>
    </table>
    <input type="button" value="Drucken" id="print">
</body>
</html>

Alles anzeigen

JavaScript

var FinanceCalculator = function(sum, add)
{
    this.transfer = document.getElementsByName("transfer")[0];
    this.sum = this.clearNumber(this.transfer.value);
    this.count = 0;
    this.values = Array();
    this.lastRow = document.getElementById("lastRow");
    this.result = document.getElementById(sum);

    document.getElementById(add).addEventListener("click", function () {
        this.addRow();        
    }.bind(this));

    this.transfer.addEventListener("keyup", function () {
        this.calculateSum();
    }.bind(this));

    this.addRow();
}




FinanceCalculator.prototype.createElement = function(htmlName, attributes)
{
    var element = document.createElement(htmlName);
    if("undefined" === typeof attributes)
        return element;




    for(var key in attributes)
    {
        if(!attributes.hasOwnProperty(key))
            continue;
        element.setAttribute(key, attributes[key]);
    }

    return element;
}




FinanceCalculator.prototype.insertRow = function(element, target)
{
    target.parentNode.insertBefore(element, target);
    return;
}




FinanceCalculator.prototype.addRow = function()
{
    var input, td, tr = this.createElement("tr");

    td = this.createElement("td");
    input = this.createElement("input", {type:"text", name:"description" + this.count});

    td.appendChild(input);
    tr.appendChild(td);

    td = this.createElement("td");
    input = this.createElement("input", {type:"text", name:"value" + this.count});    
    input.addEventListener("keyup", function () {
        this.calculateSum();
    }.bind(this));

    td.appendChild(input);
    tr.appendChild(td);

    td = this.createElement("td");
    input = this.createElement("input", {type:"radio", name:"gain" + this.count, value:true, checked:"checked"});
    input.addEventListener("change", function () {
        this.calculateSum();
    }.bind(this));

    td.appendChild(input);
    tr.appendChild(td);

    td = this.createElement("td");
    input = this.createElement("input", {type:"radio", name:"gain" + this.count, value:false});
    input.addEventListener("change", function () {
        this.calculateSum();
    }.bind(this));

    td.appendChild(input);
    tr.appendChild(td);

    this.values.push(
        Array
        (
            tr.getElementsByTagName("input")[1],
            tr.getElementsByTagName("input")[2]
        )
    );




    this.insertRow(tr, this.lastRow);
    this.count++;
    return;
}




FinanceCalculator.prototype.clearNumber = function(val)
{
    if(!val)
        return 0;
    val = val.replace(",", ".").replace(/[^\d.-]/g, '');
    return parseFloat(val);
}




FinanceCalculator.prototype.calculateSum = function()
{
    this.sum = this.clearNumber(this.transfer.value);

    for(var i = 0; i < this.values.length; i++)
    {
        var amount = this.clearNumber(this.values[i][0].value);
        if(this.values[i][1].checked)
            this.sum += amount;
        else
            this.sum -= amount;
    }

    if(isNaN(this.sum))
        this.sum =  this.transfer.value;




    this.sum = this.sum.toFixed(2);
    this.printResult();
    return;
}




FinanceCalculator.prototype.printResult = function()
{
    if(this.sum < 0)
        this.result.style.color = "red";
    else
        this.result.style.color = "black";

    this.result.innerHTML = this.sum.replace(".", ",");
    return;
}




window.addEventListener("load", function () {
    var FC = new FinanceCalculator("sum", "add"); 

    document.getElementById("print").addEventListener("click", function () {
        window.print();
    });
});

Alles anzeigen

Script " Einnahmen / Ausgaben berechnen "

Jetzt mitmachen!

Teilen