Uzdevumi 9. klasei¶

Vienkāršas html darbības ar Javascript¶

Darbīgas pogas¶

Uzdevums

Pabeidz Javascript funkcijas, kas izveido pogām atbilstošu funkcionalitāti:

nospiežot pogu ar nosaukumu "Mainīt vārdu", nomainās teksts elementā ar id "mainams" uz “Cits vārds”. Šīs ppgas efekts vienmēr būs vienāds - pēc pirmās reizes vair nekas nemainīsies.
nospiežot pogu ar nosaukumu "Jauns teksts", elementam ar id "teksts" tiek pievienots klāt papildus teksts “Vairāk teksta...”. Šis pogas efekts turpina papildināt tekstu katru reizi, kad poga tiek nospiesta
nospiežot pogu ar nosaukumu "Skaitītājs", par 1 palielinās skaitli, atrodams elementā ar id "skaititajs". Šis pogas efekts turpina palielināt skaitītāju par 1 katru reizi, kad poga tiek nospiesta

Programmas kods

HTML/JS

<!DOCTYPE html>
<html lang="lv">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <div class="row text-center">
            <h1>Darbīgas pogas</h1>
        </div>
        <div class="row">
            <div class="col-12">
                <button onclick="mainitTekstu()" type="button" class="btn btn-outline-info btn-lg">Mainīt vārdu</button>
                <button onclick="pieliktTekstu()" id="beigas" type="button" class="btn btn btn-dark">Jauns
                    teksts</button>
                <button onclick="skaititajs()" id="beigas" type="button"
                    class="btn btn-primary btn-sm">Skaitītājs</button>
            </div>
        </div>
        <div class="row">
            <div class="col-6">
                <p id="mainams">Vārds</p>
                <p id="teksts">Te būs teksts!</p>
            </div>
            <div class="col-6">
                <p>Skaitītājs: <span id="skaititajs">0</span></p>
            </div>
        </div>
    </div>
    </div>
    <script>
        function mainitTekstu() {
            // nomaina tekstu elementā ar id "mainams" uz “Cits vārds”
        }
        function pieliktTekstu() {
            // elementam ar id "teksts" pievieno klāt tekstu “Vairāk teksta...”
        }
        function skaititajs() {
            // par 1 palielina skaitli, atrodams elementā ar id "skaititajs"
        }
    </script>
</body>

</html>

Darbu saraksts¶

Uzdevumi

Papildini doto HTML dokumentu ar JavaScript, lai dotajā darbu sarakstā varētu pievienot darāmos darbus, ierakstot tos laukā ar id "ievade" un nospiežot pogu "Pievienot".
Papildini Javascript, lai varētu darbu pievienot nospiežot Enter taustiņu!
Papildini Javascript, lai šis saraksts saglabātos lokāli pārlūkprogrammā. Izmanto localStorage (https://www.w3schools.com/jsref/prop_win_localstorage.asp)
Papildini Javascript ar iespēju lejupielādēt šo sarakstu kā teksta datni.

Programmas kods

HTML/JS

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <div class="row text-center">
            <h1>Funkcijas</h1>
        </div>
        <div class="row text-center">
            <div class="col-6 offset-3">
                <h2> Darāmie darbiņi:</h2>
                <ul id="daramie-darbi">
                    <li>iznest miskasti</li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-6 offset-3">
                <input type="text" class="form-control" id="ievade" placeholder="Jauns darbiņš">
                <button type="button" class="btn btn-primary" id="pievieno">Pievieno</button>
            </div>
        </div>
    </div>
</body>

</html>

Funkcionalitātes piemēri¶

Teksta datnes lejupielāde¶

Paraugs

Javascript koda piemērs, lai lejupielādētu datus kā teksta datni.

Programmas kods

JS

function lejupielade() {
    let datnesNosaukums = "nosaukums.txt";
    let teksts = "Mans teksts!";
    let datne = document.createElement("a");
    datne.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(teksts));
    datne.innerText = "Lejupielādēt datus"
    datne.setAttribute('download', datnesNosaukums);

    datne.style.display = 'none';
    document.body.appendChild(datne);

    datne.click();

    document.body.removeChild(datne);
}

CSV datnes lejupielāde¶

Paraugs

Javascript koda piemērs, lai lejupielādētu datus kā csv datni.

Programmas kods

JS

function lejupielade() {
    // nepieciešams savienojamībai ar MS Excel
    const universalBOM = "\uFEFF"
    // iegūstam datus no kaut kurienes,
    // piemēram localStorage, html elementa utml
    // šeit tie ir vienkārši mainīgajā dati divdimensiju masīvā
    const dati = [  ["laiks","teksts"],
                    ["10:00","labrīt"],
                    ["12:00","ejam ēst!"]
                 ];

    const datnesNosaukums = "nosaukums.csv";

    // pārveidojam datus csv formātā
    let csvDati = '';
    for (let rinda of dati) {   
        csvDati += rinda.join(".") + '\n';
    }

    // izveidojam elementu
    let datne = document.createElement("a");
    // elementam pievienojam datus
    datne.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(universalBOM+csvDati));
    // elementam pievienojam nepieciešamās īpašības
    datne.innerText = "Lejupielādēt datus"
    datne.setAttribute('download', datnesNosaukums);
    datne.style.display = 'none';
    // pievienojam elementu html lapai
    document.body.appendChild(datne);
    // simulējam noklišķināšanu uz linka
    datne.click();
    // novācam vairs nevajadzīgo elementu
    document.body.removeChild(datne);
  }

JavaScript localStorage pielietojums¶

Paraugs

Javascript koda piemērs, lai saglabātu datus pārlūkprogrammā.

Programmas kods

JS

function skaititajs() {
    if (localStorage.skaititajs) {
        localStorage.skaititajs = Number(localStorage.skaititajs) + 1
    } else {
        localStorage.skaititajs = 1;
    }

    document.getElementById("rezultats").innerText = "Tu esi nospiedis pogu " + localStorage.skaititajs + " reizes";
  }

JavaScript laika apstrāde¶

Paraugs

Javascript koda piemērs laika noteikšanai un lietošanai.

Programmas kods

JS

// pašreizejais laiks piemērotā formātā procesa pierakstam (log):
// "29/12/2020, 15:56:11"
let tagad = new Date(Date.now()).toLocaleString();
// tikai stundas:minūtes:sekundes:
let laiks = tagad.split(" ")[1]
// tikai datums
let datums = tagad.split(" ")[0]

// pašreizējais laiks pilnā formātā:
// Tue Dec 29 2020 15:58:29 GMT+0200 (Eastern European Standard Time)
let laiks = new Date(Date.now());

// nedēļas diena 0-6 (0 - svētdiena, 1 - pirmdiena utt.)
let nedelasDiena = laiks.getDay();
// mēnesis 0-11 (janvaris ir 0 mēnesis, decembris - 11)
let menesis = laiks.getMonth();
// mēneša diena (1-31)
let menesaDiena = laiks.getDate();