Kaip sukurti kalkuliatorių naudojant JavaScript? (Paprasti pavyzdžiai)

JavaScript yra viena iš populiariausių programavimo kalbų, kuri naudojama kuriant dinamiškas ir interaktyvias svetaines. Jei norite išmokti kurti savo įrankius ir programas, kalkuliatoriaus sukūrimas yra puikus pirmas žingsnis. Šiame straipsnyje paaiškinsime, kaip sukurti paprastą kalkuliatorių naudojant tik JavaScript. Taip pat pateiksime pavyzdžių, kurie padės geriau suprasti, kaip veikia ši technologija.

1. Pagrindinė kalkuliatoriaus struktūra

Pirmas žingsnis kuriant kalkuliatorių yra sukurti HTML struktūrą, kurioje bus rodomi visi kalkuliatoriaus mygtukai ir ekrano langas, kuriame bus rodoma įvestis ir rezultatai. HTML leis mums sukurti šią struktūrą, o JavaScript užtikrins, kad kalkuliatorius reaguotų į vartotojo įvestį ir atliktų skaičiavimus.

    
    
    


    

        
        

            1
            2
            3
            +
            4
            5
            6
            -
            7
            8
            9
            *
            0
            .
            C
            =
        
    

    

2. JavaScript: Prijungimas prie HTML ir skaičiavimų atlikimas

Po to, kai turime struktūrą, turime sukurti funkcijas, kurios atliks operacijas su vartotojo įvestimis. JavaScript čia atlieka svarbų vaidmenį, nes jis leidžia mums valdyti vartotojo įvestį ir atlikti matematinius veiksmus. Pažvelkime į pagrindines funkcijas, kurias turime sukurti:

• appendToDisplay: Ši funkcija prideda mygtuko vertę į kalkuliatoriaus ekraną (įvesties lauką).
• clearDisplay: Ši funkcija išvalo ekrano lauką.
• calculate: Ši funkcija atlieka skaičiavimus pagal vartotojo įvestį ir rodo rezultatą ekrane.

3. Pagrindinis JavaScript kodas

Štai paprastas JavaScript kodas, kuris leis jūsų kalkuliatoriui pradėti veikti:

let display = document.getElementById('display');

// Funkcija, kuri prideda simbolius į ekraną
function appendToDisplay(value) {
    display.value += value;
}

// Funkcija, kuri išvalo ekraną
function clearDisplay() {
    display.value = '';
}

// Funkcija, kuri atlieka skaičiavimus ir rodo rezultatą
function calculate() {
    try {
        display.value = eval(display.value);
    } catch (e) {
        display.value = 'Klaida';
    }
}

Šiame kode mes naudojame `eval()` funkciją, kuri analizuoja ir įvykdo string tipo skaičiavimus. Tai leidžia mums atlikti matematines operacijas, kurias įveda vartotojas, tačiau svarbu būti atsargiems su `eval()`, nes ji gali sukelti saugumo spragų, jei yra naudojama su nepatikimais duomenimis.

4. Kalkuliatoriaus stilius naudojant CSS

Kai HTML ir JavaScript dalys jau paruoštos, atėjo laikas suteikti kalkuliatoriui gražų ir funkcionalų dizainą. Naudojant CSS, galime lengvai sukurti tinkamą išdėstymą ir stilius. Štai paprastas CSS pavyzdys:

.calculator {
    width: 260px;
    margin: 100px auto;
    padding: 20px;
    border: 2px solid #333;
    border-radius: 10px;
    background-color: #f4f4f4;
}

#display {
    width: 100%;
    height: 40px;
    font-size: 20px;
    text-align: right;
    margin-bottom: 10px;
    padding: 5px;
    border: 1px solid #ccc;
}

.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.button {
    background-color: #007bff;
    color: white;
    font-size: 20px;
    padding: 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.button:hover {
    background-color: #0056b3;
}

5. Galutiniai patarimai ir išvados

Jūs dabar žinote, kaip sukurti paprastą kalkuliatorių naudodami HTML, CSS ir JavaScript. Tai yra puikus projektas, skirtas pradedantiesiems, kad suprastumėte pagrindinius žingsnius ir koncepcijas, reikalingas kuriant interaktyvias svetaines. Nepamirškite, kad kalkuliatorius gali būti išplėstas, pridėjus daugiau funkcijų, tokių kaip istorija, trigonometrinės funkcijos ar kitos matematinės operacijos.

Šis projektas taip pat suteikia galimybę tobulinti savo žinias apie JavaScript ir sužinoti, kaip naudoti šią kalbą interaktyviems projektams kurti. Vykdykite šiuos žingsnius ir kūrybiškai eksperimentuokite su savo kalkuliatoriumi – sėkmės programavimo kelionėje!