Scott Tiger Tech Blog

Blog technologiczny firmy Scott Tiger S.A.

Archiwum: 'Języki programowania' Kategorie

Sztuczki i triki w języku JavaScript

Autor: Piotr Karpiuk o 21. lipca 2016

Poniżej kilka znanych mi idiomów ułatwiających programowanie w języku JavaScript. Prośba do czytelników o podawanie w komentarzach własnych propozycji.

+"15" // 15

Ale uwaga, +"15px" zwróci NaN, podczas gdy parseInt("15px") zwróci 15.


+new Date() // 1479390755672

Zamiana daty na liczbę milisekund od 1970-01-01 00:00.000.


typeof cokolwiek; // undefined

Tutaj nie wystąpi błąd, pomimo użycia niezadeklarowanej zmiennej.


var arr = Array.prototype.slice.call( arguments )
var arr = Array.from( arguments ) // ES6

Standardowy mechanizm zamiany przypominającej tablicę zmiennej arguments (parametry aktualne wywołania funkcji) na prawdziwą tablicę JavaScript.

Czytaj więcej »

Napisany w JavaScript | Brak komentarzy »

Dziwactwa JavaScriptu

Autor: Piotr Karpiuk o 18. lipca 2016

Programując w JavaScripcie i czytając różne książki na temat tego języka, natknąłem się na szereg mało intuicyjnych i dość zabawnych zachowań interpretera. Poniżej moja lista – jeśli ktoś ma inne propozycje, proszę o komentarz.

[1,3,20].sort() // [1,20,3]

Wyjaśnienie: Domyślny komparator sortuje leksykograficznie.


var a = [1,2,3];
var b = [1,2,3];
var c = "1,2,3";

a == c; // true
b == c; // true
a == b; // false

Wyjaśnienie: Zwracaj szczególną uwagę na reguły porównywania za pomocą operatorów == i ===, jeżeli porównujesz dwie wartości typów innych niż proste, takie jak obiekty (typ object, łącznie z function i array). Ponieważ wartości te są w rzeczywistości przechowywane przez odniesienie, więc oba operatory == i === po prostu sprawdzają, czy odniesienia są takie same; nie sprawdzają faktycznych wartości wskazywanych przez te odniesienia. Z kolei gdy porównujemy typ prosty (np. łańcuch) z obiektem (np. tablicą), tablica jest konwertowana do łańcucha przez po prostu połączenie przecinkami (,) wszystkich wartości.


Czytaj więcej »

Napisany w JavaScript | Brak komentarzy »

Narzędzia dewelopera w Google Chrome

Autor: Piotr Karpiuk o 5. lipca 2016

Dzisiejszy artykuł będzie narzędziach, jakie przeglądarka Google Chrome udostępnia programistom do debugowania i monitorowania aplikacji webowych, pod przyciskiem F12. Dla tych co mają dużo czasu, pełny opis możliwości jest dostępny na stronach Google’a: https://developers.google.com/web/tools/chrome-devtools/. Tutaj zakładam że Czytelnik ma już jakieś pojęcie o tych narzędziach, zapewne już z nich korzysta w jakimś zakresie i chciałby możliwie szybko poszerzyć swoją wiedzę o różne przydatne i ciekawe triki, które pojawiły się ostatnimi czasy, lub były od dawna ale nie są oczywiste.

Task Manager

Kombinacja klawiszy Shift+ESC otwiera managera zadań, w którym możemy zobaczyć zużycie zasobów komputera z rozbiciem na poszczególne zakładki przeglądarki:

Edycja drzewa DOM

Czytaj więcej »

Napisany w Google Chrome, JavaScript, Nowoczesne przeglądarki WWW, WWW | Brak komentarzy »

JavaScript: Obietnice (ang. Promises)

Autor: Piotr Karpiuk o 26. maja 2014

JavaScript jest zasadniczo jednowątkowy, a wszelkie operacje I/O są wykonywane asynchronicznie. W rezultacie nasz kod wymagający kontaktu ze światem zewnętrznym staje się skomplikowany, zwłaszcza gdy uwzględnimy jeszcze obsługę błędów. Zawarty w specyfikacji EcmaScript 6 mechanizm obietnic (zaimplementowany w najnowszej wersji wiodących przeglądarek) pozwala pisać kod asynchroniczny w stylu bardziej synchronicznym.

Obietnica (ang. promise) w postaci obiektu klasy Promise reprezentuje wynik operacji asynchronicznej (wartość zwracaną w przypadku sukcesu lub błąd w razie porażki), który może nie być osiągalny na razie, ale z czasem będzie.

Obietnice możemy składać (ang. chain) ze sobą wykonując zestaw operacji asynchronicznych jedna za drugą (szeregowo) lub równolegle — w tym drugim przypadku będziemy mogli podjąć jakąś aktywność po zakończeniu wszystkich zleconych operacji. W takich łańcuchach obietnic błędy są propagowane, więc możemy na samym końcu łańcucha zdefiniować funkcję przechwytującą wszystkie możliwe błędy.

Wyobraźmy sobie kod wyświetlający powieść, przy czym poszczególne rozdziały ładowane są osobno po kolei, a najpierw pobieramy plik z URLami rozdziałów:

try {
  var story = getJSONSync('story.json');
  addHtmlToPage(story.heading);

  story.chapterUrls.forEach(function(chapterUrl) {
    var chapter = getJSONSync(chapterUrl);
    addHtmlToPage(chapter.html);
  });

  addTextToPage("All done");
}
catch (err) {
  addTextToPage("Argh, broken: " + err.message);
}

document.querySelector('.spinner').style.display = 'none';

Wszystko wygląda tu pięknie z dokładnością do tego, że synchroniczne operacje I/O blokują całą przeglądarkę. Implementacja tego z wykorzystaniem asynchronicznego I/O bardzo by nam ten kod zagmatwała.

Dzięki użyciu obietnic asynchroniczny kod może wyglądać następująco:

getJSON('story.json').then(function(story) {
  addHtmlToPage(story.heading);
  return Promise.all(
    story.chapterUrls.map(getJSON)
  );
}).then(function(chapters) {
  chapters.forEach(function(chapter) {
    addHtmlToPage(chapter.html);
  });
  addTextToPage("All done");
}).catch(function(err) {
  addTextToPage("Argh, broken: " + err.message);
}).then(function() {
  document.querySelector('.spinner').style.display = 'none';
});

Dodatkowym zyskiem widocznym na powyższym listingu (Promise.all()) jest równoczesne wykonywanie się asynchronicznych operacji wejścia/wyjścia pobierania rozdziałów. Gdy wszystkie zostaną załadowane (funkcja then()), możemy je wyświetlić. Błędy są wychwytywane za pomocą funkcji catch().

Przydatne artykuły:

Napisany w HTML5, JavaScript | Brak komentarzy »

d3.js

Autor: Piotr Karpiuk o 28. maja 2013

Poniższe informacje pochodzą z książki Interactive Data Visualization for the Web. An Introduction to Designing with D3, S.Murray, O’Reilly 2013. Jest to praktyczne wprowadzenie do łączenia trzech umiejętności: wizualizacji danych, tworzenia interaktywnych projektów, i deweloperki WWW – przy użyciu otwartoźródłowej biblioteki D3.js.
W dzisiejszych czasach jesteśmy przeładowani informacjami, tymczasem surowe dane stają się użyteczne dopiero po zaaplikowaniu na nich metod pozwalających je zwizualizować lub w inny sposób zyskać wgląd w to, co jest w nich najważniejsze. Wizualizacja jest procesem mapowania informacji na obraz.
Podstawowe funkcje narzędzi do interaktywnej wizualizacji zmieniły się od 1996 roku, gdy Ben Shneiderman z Uniwersytetu Maryland zaproponował mantrę: najpierw przegląd, powiększenie i filtrowanie, potem szczegóły na żądanie (ang. overview first, zoom and filter, then details-on-demand). Dzięki animowanym przejściom i dobrze zaprojektowanym interfejsom, niektóre wizualizacje pozwalają eksplorować dane pozwalając użytkownikowi czuć się jakby grał w grę komputerową.
D3 – czasem nazywane D3 lub d3.js – to biblioteka języka JavaScript do wizualizacji danych. Skrót D3 – oprócz tego że jest aluzją do W3, czyli WWW – rozwija się jako Data-Driven Documents. Dane są dostarczane przez Ciebie, dokumenty są stronami webowymi, a biblioteka zajmuje się sterowaniem (ang. driving) w sensie łączenia danych z dokumentem.
Zasadniczo, D3 jest eleganckim kawałkiem oprogramowania, które ułatwia generowanie i manipulację wyglądem stron WWW za pomocą danych.
Działanie biblioteki sprowadza się do:
Czytaj więcej »

Napisany w HTML5, JavaScript, Uncategorized, WWW | Brak komentarzy »