Archiwum

Archive for Październik 2013

IE 11 DEV–grupowanie elementów w konsoli

Październik 30, 2013 Dodaj komentarz

Ten wpis będzie bardzo mocno powiązany z poprzednim, który znajdziemy pod tym adresem.

Bierzemy kod z poprzedniego odcinka I lekko modyfikujemy zostawiając jeden przycisk i dodajemy trochę wiecej informacji do konsoli z każdego przebiegu pętli:

<!DOCTYPE html>

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

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

                for (var i = 0; i < 10; i++) {
                    
                    console.log("Petla - przebieg %d", i + 1);
                    console.log("Poprzednia wartość licznika %d", licznikOdwiedzin.Licznik);

                    licznikOdwiedzin.Licznik++;
                    console.log("Nowa wartość licznika %d", licznikOdwiedzin.Licznik);

                    console.dir(licznikOdwiedzin);
                }

            }


        </script>


        <button onclick="pokazWPetli()">Drzwi frontowe</button>
                
    </body>
</html>

 

Wynik przebiegu takiego programu po wciśnięciu przycisku wygląda tak:

image

Patrząc na to trudno rozdzielić dane z jednego przebiegu pętli od drugiego, jest to podane wszystko w dość nieczytelnej formie.

Na szczęście mamy słowo kluczowe console.group które pozwala na grupowanie komunikatów po unikalnej nazwie, popatrzmy na nowy kod i jego wynik:

image

a kod wygląda tak:

<!DOCTYPE html>

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

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

                for (var i = 0; i < 10; i++) {
                    
                    var znacznik = "Petla - przebieg " + (i + 1);
                    console.group(znacznik);
                    
                    console.log("Poprzednia wartość licznika %d", licznikOdwiedzin.Licznik);

                    licznikOdwiedzin.Licznik++;
                    console.log("Nowa wartość licznika %d", licznikOdwiedzin.Licznik);

                    console.dir(licznikOdwiedzin);

                    console.groupEnd(znacznik);
                }

            }


        </script>


        <button onclick="pokazWPetli()">Drzwi frontowe</button>
                
    </body>
</html>

 

Bardzo ważne tutaj jest to by pilnować tego aby group i groupEnd miały tę samą nazwę. Teraz forma i sposób prezentacji jest dla mnie bardzo zadowalający, mam nadzieje, że Wam też się spodobała taka forma pokazywania danych zgrupowanych.

IE 11 DEV–logowanie do konsoli obiektów–console.dir

Październik 29, 2013 Dodaj komentarz

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.

IE 11 DEV–logowanie do konsoli dowolnego komunikatu–log i debug

Październik 28, 2013 Dodaj komentarz

W jednym z ostatnich odcinków wspominałem o tym jak można w łatwy sposób wyrzucić do konsoli informacje o stanie Naszej aplikacji
image

link do artykułu znajduje się tutaj.

Dzisiaj przedstawiam dwa słowa kluczowe, które pozwalają na dodanie dowolnego ciągu znaków z kodu JavaScript do konsoli i śledzenia tego co się dzieje w aplikacji.

Przedmiotowe słowa kluczowe to log i debug. Poniżej kod:

<!DOCTYPE html>

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

<script>

function metoda1() {
var imie = "Marcin";
var liczba = 1;

console.log('Metoda1 -> imie=%s a liczba=%d', imie, liczba);
}

function metoda2() {
var imie = "Marcin";
var liczba = 1;

console.debug('Metoda2 -> imie=%s a liczba=%d', imie, liczba);
}

</script>


<button onclick="metoda1()">LOG</button>
<button onclick="metoda2()">DEBUG</button>

</body>
</html>

Mamy dwie metody i dwa przyciski. Próbujemy w obu przypadkach wypisać coś do konsoli razem z formatowaniem zmiennych.

I wynik:

image

Różnica między nimi polega na tym, że debug nie wspiera formatowanych zmiennych. Sposób prezentacji danych pozostaje ten sam.

IE 11 DEV–formatowanie wiadomości dla konsoli

Październik 27, 2013 Dodaj komentarz

W jednym z ostatnich odcinków wspominałem o tym jak można w łatwy sposób wyrzucić do konsoli informacje o stanie Naszej aplikacji
image

link do artykułu znajduje się tutaj.

Dzisiaj wprowadzam do tego kodu informacje o tym, że mogę dorzucić stan zmiennych i odpowiednio go sformatować – przez co narzędzie staje się jeszcze bardziej przydatne:

<!DOCTYPE html>

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

            function metoda() {
                var imie = "Marcin";
                var liczba = 1;

                console.info('Logowanie danych imie=%s a liczba=%d', imie, liczba);
            }

        </script>


        <button onclick="metoda()">Metoda</button>
                
    </body>
</html>

 

Mamy metodę uruchamianą przyciskiem, a w niej tworzymy dwie zmienne i pokazujemy je w komunikacie do konsoli odpowiednio je formatując.

image

Wynik w konsoli jest zadowolajacy. Jeżeli interesuje Was co jeszcze przygotowali dla Nas programiści to poniżej pełna lista typów formatowania.

  • %s – string
  • %d – integer
  • %f – float
  • %i – integer
  • %o – untyped/any 

IE 11 DEV–informacje, błędy, ostrzeżenia w konsoli

Październik 26, 2013 1 komentarz

Czasy kiedy wszystkie komunikaty błędów wyrzucaliśmy z kodu przez okno modalne alert mam nadzieje, że już dawno minęły. Dzisiaj mamy narzędzia dla programistów, które w mniej inwazyjny sposób potrafią zaadresować potrzebę sprawdzenia co w programie się dzieje na bieżąco.

Dzisiaj pokażę jak z kodu możemy pokazać błędy, informacje i ostrzeżenia.

image

W tym celu tworzymy bardzo prosty kod z trzema przyciskami:

<!DOCTYPE html>

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

<script>
function generujBlad() {
console.error('Błąd wygenerowany przez kod.');
}

function generujOstrzezenie() {
console.warn('Ostrzeżenie wygenerowane przez kod.');
}

function generujInformacje() {
console.info('Informacja wygenerowana przez kod.');
}

</script>


<button onclick="generujBlad()">Błąd</button>
<button onclick="generujOstrzezenie()">Ostrzeżenie</button>
<button onclick="generujInformacje()">Informacja</button>

</body>
</html>

który w efekcie działa tak:

image

Jak widać na załączonym obrazku, jak poklikamy w przyciski to w konsoli pojawiaja się komunikaty.

IE 11 DEV–inspekcja elementów strony–cz.2

Październik 25, 2013 Dodaj komentarz

W poprzednim wpisie opisałem podstawowe operacje jakie możemy robić w inspektorze kodu Internet Explorera 11 – link znajduje się tutaj.

Dzisiaj stwórzmy prostą stronę internetową, która będzie miała kilka paragrafów i listę:

image

Kod:

<!DOCTYPE html>

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

<div id="osoba">
<p>Marcin</p>
<p>Borecki</p>
</div>

<ul id="firmy">
<li>Microsoft</li>
<li>Dell</li>
</ul>

</body>
</html>
A efekt prezentuje się tak

image

w konsoli, która jest widoczna na dole narzędzi dla programistów wpiszmy $(‘firmy’)  i wciskamy ENTER – naszym oczom ukazuje się wybrany element po nazwie. $(‘nazwa’) to nic innego jak skrót do JavaScript-owej metody getElementById.

Zmieniamy lekko kod, na następujacy:

<!DOCTYPE html>

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

<div id="element1">
<p>Marcin</p>
<p>Borecki</p>
</div>

<div id="element2">
<p>Marcin</p>
<p>Borecki</p>
</div>

</body>
</html>
I to co widzimy to dwa div które nazywają sie element1 i element2. Popatrzmy na poniższy obrazek w sekcję konsoli, wpisałem tam dwa zapytania:
  • $(‘element1’) – otrzymałem w wyniku element o tej nazwie
  • $$(‘div’) – otrzymałem w wyniku wszystkie znalezione znaczniki div
 

image

IE 11 DEV–inspekcja elementów strony–cz.1

Październik 24, 2013 Dodaj komentarz

Zaczynam od pustej strony w darmowym edytorze WebMatrix 3

image

dodaje trochę elementów szkieletu, byśmy mieli na czym pracować:

<!DOCTYPE html>
 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        
        <header>
            <h1>Cudownie fajna strona internetowa</h1>
        </header>
 
        <nav>
            <ul>
                <li>
                    <a href="index.html">Strona główna</a>
                </li>
                 <li>
                    <a href="autor.html">Autor</a>
                </li>
            </ul>
        </nav>
 
        <section>
            <article>
                <header>
                    <h3>Tytuł 1</h3>
                </header>
                <div>
                    <p>Zawartość artykułu</p>
                </div>
                <footer>
                    <p>Autor: Marcin Borecki</p>
                </footer>
            </article>
            <article>
                <header>
                    <h3>Tytuł 2</h3>
                </header>
                <div>
                    <p>Zawartość artykułu</p>
                </div>
                <footer>
                    <p>Autor: Marcin Borecki</p>
                </footer>
            </article>
        </section>
        
        <footer>
            <p>Stworzone w 2013 roku przez Marcina B.</p>
        </footer>
    </body>
</html>

uruchamiamy wybierać RUN (górna lewa strona belki z przyciskami).

image

wybieramy F12

image

zostajemy na pierwszej zakładce I wybieramy ikonkę obok napisu DOM Explorer – ikona ta włącza tryb inspekcji, który pozwala na “złapanie” dowolnego elementu strony i sprawdzeniu go w oknie kodu

image

w tym wypadku złapałem link “Strona główna”, to co możemy zaobserwować to:

  • kod automatycznie znawigował się do miejsca gdzie w kodzie zdefiniowaliśmy link
  • poniżej dostaliśmy ścieżkę do tego elementu, od html->body->nav->ul->li…
  • dostaliśmy podgląd podłączonego stylu – tutaj akurat jest pokazany jego brak

 

Wróćmy do okna kodu i zmieńmy styl tego linku:

image

po czym odpalamy

image

I widzimy po prawej stronie w podglądzie stylu, dany element ma kolor czerwony!

Dodatkowo możemy wpływać na odległości I grubości poszczególnych elementów testując przy okazji układ rzeczy na stronie – mając zaznaczony dowolny element przejdźmy na zakładkę Layout I wpiszmy wartości np: do Padding i / lub Margin i obserwujmy zmiany:

image

Zmiany są dokonywane zarówno w stylu co widać w kodzie jak też kolorem mamy jasną interpretację tego która właściwość (margin/padding) powoduje jakie rozsunięcie (kolor ramki w zakładce Layout jest tożsamy z kolorem na stronie).