BETA
Aby się zalogować, najpiew wybierz portal.
Aby się zarejestrować, najpiew wybierz portal.
Podaj słowa kluczowe
Słowa kluczowe muszą mieć co najmniej 3 sąsiadujące znaki alfanumeryczne
Pole zawiera niedozwolone znaki

Baza wiedzy











Internet Explorer 11 - logowanie do konsoli obiektów przez console.dir

10-03-2014 14:24 | Marcin Borecki
Dzisiaj chciałbym trochę opowiedzieć o tym jak logować do konsoli całe obiekty, tak byśmy mieli podgląd nie tylko na same zmienne co już prezentowałem w poprzednich artykułach, ale całe złożone elementy.

Zaczniemy od prostego kodu z dwoma przyciskami:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        
        <script>

            function pokazOsobe() {
                var osoba = {
                    "Imie": "Marcin",
                    "Nazwisko": "Borecki",
                    "Wiek": "26"
                };

                console.dir(osoba);
            }


            function pokazWPetli() {
                var licznikOdwiedzin = {
                    "Drzwi": "Frontowe",
                    "Licznik": "0"
                };

                for (var i = 0; i < 10; i++) {
                    licznikOdwiedzin.Licznik++;
                    console.dir(licznikOdwiedzin);
                }

            }


        </script>


        <button onclick="pokazOsobe()">Pokaż osobę</button>
        <button onclick="pokazWPetli()">Drzwi frontowe</button>
                
    </body>
</html>

 

Kod realizuje następujące zadania:

  • Mamy dwa przyciski, które są podpięte do funkcji pokazOsobe I pokazWPetli
  • Funkcja pokazOsobe definiuje obiekt JSONowy, a w nim Imie I Nazwisko. Do konsoli logujemy obiekt poprzez wpisanie console.dir
  • Funkcja pokazWPetli wykorzystuje tą samą metodę, lecz robi to w pętli pokazując zmiany na obiekcie w trakcie działania programu. 

Poniżej prezentuję jak wygląda działanie console.dir na jednym obiekcie – widzimy dokładnie definicję obiektu oraz zmienne:

image

Klikając w drugi przycisk uzyskujemy podobny efekt:

image

Widzimy to, żę obiekty można zwijać i rozwijać – zwiększa to czytelność tego co serwuje nam konsola jako wynik działania Naszego małego programu.

Komentarze 0

pkt.

Zaloguj się lub Zarejestruj się aby wykonać tę czynność.