Javascript kalkulator

Javascript je jedan od najpopularnih programskih jezika s kojim je moguće napraviti puno sa relativno malo koda. U ovom primjeru vidimo kako u javascript-u možemo napraviti jednostavni kalkulator bez upotrebe dodatnih fremeworka. Kako kalkulator radi pogledajte na demo stranici

Pogledajte u editoru

 

U html dijelu izradimo tablicu u kojoj se nalaze gumbi brojeva i matematičkih operatora, a korisnik upisuje vrijednosti u text box klikom ma određeni gumb. Prilikom klika na button u u onclik event-u pozivamo funkciju u kojoj se šalje vrijednost value (this.value) tj. vrijednost označena na gumbu. Klikom na gumb c vrijednost u textbox-u postavljamo na nula i bool variablu resrart postavljamo na true

Variablom var t = document.getElementById("i1");  selektiramo text box i1 te zatim čitamo vrijednost textboxa-a sa t.value. Kada korisnik klikne na gumb jednako  (izračun dobivamo pomoču naredbe eval) pozivamo  funkciju jednako 

function jednako() {

            var r1 = t.value.replace('×', '*').replace('÷', '/')

            t.value = eval(r1)             //restart = true        

}



<!DOCTYPE html>
<html>

<head>
    <title>Kalkulator javascript</title>

    <style>
        .it {
            width: 225px;
            font-size: 16px;
            padding: 5px;
            text-align: right;
        }

        .iw {
            width: 55px;
            height: 55px;
            font-size: 25px;
        }
    </style>
</head>

<body>


    <h1>Kalkulator</h1>
    <p></p>
    <table>
        <tr>
            <td colspan="4"><input class="it" type="text" value="0" id="i1"></td>
        </tr>

        <tr>
            <td><input type="button" class="iw" value="c" onclick="c()"></td>
            <td><input type="button" class="iw" value="" onclick="l()"></td>
            <td><input type="button" class="iw" value="" onclick="l()"></td>
            <td><input type="button" class="iw" value="÷" onclick="l(this.value)"></td>
        </tr>

        <tr>
            <td><input type="button" class="iw" value="7" onclick="l(this.value)"></td>
            <td><input type="button" class="iw" value="8" onclick="l(this.value)"></td>
            <td><input type="button" class="iw" value="9" onclick="l(this.value)"></td>
            <td><input type="button" class="iw" value="×" onclick="l(this.value)"></td>
        </tr>
        <tr>
            <td><input type="button" class="iw" value="4" onclick="l(this.value)"></td>
            <td><input type="button" class="iw" value="5" onclick="l(this.value)"></td>
            <td><input type="button" class="iw" value="6" onclick="l(this.value)"></td>
            <td><input type="button" class="iw" value="-" onclick="l(this.value)"></td>
        </tr>
        <tr>
            <td><input type="button" class="iw" value="1" onclick="l(this.value)"></td>
            <td><input type="button" class="iw" value="2" onclick="l(this.value)"></td>
            <td><input type="button" class="iw" value="3" onclick="l(this.value)"></td>
            <td><input type="button" class="iw" value="+" onclick="l(this.value)"></td>
        </tr>
        <tr>
            <td><input type="button" class="iw" value="±" onclick="p()"></td>
            <td><input type="button" class="iw" value="0" onclick="l(this.value)"></td>
            <td><input type="button" class="iw" value="." onclick="l(this.value)"></td>
            <td><input type="button" class="iw" value="=" onclick="jednako()"></td>
        </tr>

    </table>


    <script>

        var restart = true
        var t = document.getElementById("i1");

        function l(c) {
            if (restart == true) {
                t.value = c
                restart = false
            }
            else { t.value += c }
        }
        function jednako() {
            var r1 = t.value.replace('×', '*').replace('÷', '/')
            t.value = eval(r1)
            //restart = true
        }
        function c() {
            t.value = '0'
            restart = true
        }
        function p() {
            if (!t.value.startsWith('-')) {
                t.value = '-' + t.value
            }
        }

    </script>
</body>

</html>


Budućnost programiranja

Općenito, budućnost programiranja vjerojatno će karakterizirati stalne inovacije i brze promjene, budući da programeri nastavljaju pomicati granice onoga što je moguće u svijetu tehnologije.

Neuronska mreža

neuronska mreža je moćan alat za obradu podataka i stvaranje modela, te se koristi u mnogim različitim aplikacijama

Baze

Koriste u kombinaciji s programskim jezicima poput SQL-a i sistemima za upravljanje bazama podataka kako bi se omogućilo brzo i sigurno upravljanje podacima.

fractal tree

The drawTree function is called recursively to draw smaller branches, which in turn spawn even smaller branches, creating the fractal pattern.

Canvas API

Canvas API je jedna od ključnih tehnologija HTML5 koja omogućuje web stranicama da postanu interaktivne i dinamičke.

Kolekcije

Javascript Map omogućuje stvaranje kolekcija koje imaju ključ i vrijednost

Top 5

trenutno su među top 5 programskih jezika

Algoritmi za sortiranje

Algoritmi za sortiranje su ključni za organiziranje podataka u najboljem redoslijedu.