Powrót

Funkcje

1. Tworzenie funkcji

            
                <script>

                /* Tworzenie własnych funkcji

                function nazwaFunkcji(parametr1,  parametr2){
                    instrukcja do wykonania;
                }
        
                */


                function powitanie(){

                    console.log("Hello world");

                }


                //wywołanie funkcji poprzez wypisanie jej nazwy
                powitanie()

               
                </script>

                //wywołanie funkcji po kliknięciu na button w strukturze html

                <div>
                    <button onclick='powitanie()'>START<button>
                </div>

            
 
        

2. Zasięg zmiennych w funkcji

                
                <script>

                const klasa = "1p";
                const lekcja = true;
              
        
                document.write(" <h1>Programowanie aplikacji internetowych. Klasa: "+klasa+" </h1>");
        
                function wypiszInfo(){
        
                    if(lekcja === true){
        
                        var liczbaUczniow = 17;
                        let obecni =11;
        
                        document.write(`<h2>Ilość osób w klasie ${klasa} wynosi: ${liczbaUczniow} osób</h2>`);
        
                        document.write(`<h2>Ilość osób obecnych na lekcji wynosi: ${obecni} osób</h2>`);

                    }else{
        
                            document.write("<h2>Nie ma lekcji</h2>");

                    }//koniec bloku if
        
                        //zasięg zmiennych
        
                        console.log(liczbaUczniow);

                        //console.log(obecni); //obecni is not defined, ponieważ zmienna tworzona "let" ma zasięg blokowy (jest ograniczona {} )
        
                }//koniec funkcji
        
                //console.log(liczbaUczniow); //liczbaUczniow is not defined, ponieważ zmienna tworzona "var" ma zasięg funkcyjny
        
               
        
                wypiszInfo();

                </script>

                

               
        

3. Parametry, wartości domyślne w funkcji

                
                    <script>

                    function osoba(imie, nazwisko){

                        return imie+" "+nazwisko;
                
                        //wszystkie instrukcje po return nie są wykonywane
                
                        document.write(imie+" "+nazwisko); //ta instrukcja się nie wykona
                    }
                
                    let infoOsoba = osoba("Adam","Nowak");
                    let infoOsoba2 = osoba("Ola","Kowalska");
                
                    document.write(infoOsoba);
                    document.write(infoOsoba2);
                
                
                    //wartości domyślne
                    function wypiszImie(imie){
                        var imie = imie || "Alicja";
                        document.write(`Mam na imię ${imie}`);
                    } 
                
                    wypiszImie("Monika");
                    wypiszImie();
                
                    function wypiszImie2(imie="Piotr"){
                        document.write(`Mam na imię ${imie}`);
                    }
                
                    wypiszImie2();
                    wypiszImie2("Konstantyn");

                    </script>
              

                
     
        

3. Funkcje strzałkowe

                
                <script>

                //klasyczny zapis

                /*
                function returnName(name){
                    return "My name is "+ name;
                }
            
                */
            
                //zapis w postaci f. strzałkowej:
            
                const returnName = (name) => {
                    return "My name is "+ name;
                }
            
                document.write(returnName("Ola"));
            
                //zapis skrócony
                const returnName2 = (name) => `My name is ${name}`;
            
                document.write(returnName2("Ala"));
                

                

                </script>

                

               
        

4. Obsługa zdarzeń - sposoby wywoływania funkcji

        
            

            <button id="b1" onclick="f1()">funkcja 1 </button>
            <button id="b2">funkcja 2 </button>
            <button id="b3">funkcja 3 </button>

            <div id="wynik"></div>

            <script>

   
            //1. wywołanie funkcji poprzez onclick w html

            function f1(){
                var wynik = document.getElementById("wynik");
                wynik.innerHTML = "Uruchomiono funkcję nr 1";
            }

            //2. wywołanie funkcji z metodą adEventListener()

            let bt2 = document.querySelector("#b2");
            bt2.addEventListener("click", f2);
       
             function f2(){
                let wynik = document.querySelector("#wynik");
                wynik.innerHTML = "Uruchomiono funkcję nr 2";
            }

            //3. wywołanie funkcji po atrybucie obiektu

            let bt3 = document.querySelector("#b3");
            bt3.onclick = function(){

            let wynik = document.querySelector("#wynik");
            wynik.innerHTML = "Uruchomiono funkcję nr 3";
        
            }
            </script>