Kod


     <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <style>
        #gora{
            background: aqua;
            min-height: 200px;
            text-align: center;
            padding-top: 50px;
            font-size: 5em;
            color: rgb(red, green, blue);
        }
        #dol{
            background: bisque;
            min-height: 150px;
            text-align: center;
            padding-top: 30px;
        }
        button{
            width: 200px;
            height: 100px;
            font-size: 2em;
        }
    </style>
</head>
<body>
    <!-- metoda 1 - przypisanie do znacznika -->
    <br>
    <img src="https://picsum.photos/200" width="100" onclick='wypiszTekst("ola ma psa")'>
    <br>
    <img src="https://picsum.photos/200" width="100" onclick='wypiszTekst("ola ma psa")'>
    <br>
    <p id="p1">To jest akapit</p>
    <br>
    <input type="text"  id="t1" value="">
    <p id="paragraf1">Paragraf1</p>
    <p id="paragraf2">Paragraf2</p>
    <p id="paragraf3">Pokaż wysokość okna</p>
    <script>
        // function wypiszTekst(tekst) {
        //     alert(tekst)
        // }
        // const wypiszTekst = (tekst) => {
        //     alert("Brak testku")
        // }

        //  to jest postać stezałkowa fukncji z linii 23 do 25
        const wypiszTekst = (tekst) => {
            alert(tekst)
        }
        function f2() {
            document.getElementById('p1').innerText +="napis"
            document.getElementById('p1').value = "napis"
        }
        function f3() {
            alert(window.innerHeight)
        }
        function wypisz() {
            alert("ala ma kota")
        }
        // Metoda 3 - addEventListener
        document.addEventListener("click", function () {
            document.getElementById('paragraf1').innerHTML = "inny text"
        })
        // Metoda 3 - sekcja elelemtu + zdarzenie
        document.getElementById('paragraf3').onclick = f3 // referencja!!

        document.getElementById('t1').addEventListener("keypress",function (event) {
            var klawisz = event.keyCode
            // alert(klawisz)
            document.getElementById("p1").innerHTML += String.fromCharCode(klawisz) + " ";
        })
    </script>
    <section id="gora"></section>
    <section id="dol">
        <button id="klik">Kilknij raz</button>
    </section>
    <script>
        let wynik = document.getElementById("gora")
        let przycisk = document.getElementById("klik")
        function klikraz() {
            przycisk.innerText = "już kliknięto"
            wynik.innerText=`wylosowałeś klucz ${Math.round(Math.random()*10000)}`
            przycisk.removeEventListener("click",klikraz)
        }
        przycisk.addEventListener("click",klikraz)
        przycisk.addEventListener("mouseover",()=>{
            przycisk.style.backgroundColor = `rgb(${Math.round(Math.random()*255)},${Math.round(Math.random()*255)} ,${Math.round(Math.random()*255)} )`
        })
    </script>
</body>
</html>