Interesujące zagadnienia i dobre praktyki w JavaScript

javascript-html5-tutorial.pl

12 sierpnia, 2013

Mr. JavaScript

Witamy w pierwszym, ale na pewno nie ostatnim temacie tego typu, który porusza interesujące cechy języka JavaScript. Ciekawostki, triki i rzadziej spotykane konstrukcje, jak na przykład instrukcja with.

Interesujące zagadnienia i dobre praktyki w JavaScript

Na dobry początek Tip #1 – instrukcja with

Wchodząca w skład języka JavaScript instrukcja with pozwala nam określić obiekt, do którego będziemy się odwoływać wewnątrz „ciała” zdefiniowanego dla tej instrukcji, co potrafi znacznie uprościć kod.

Ilustruje to poniższy przykład:

var a, b, c;
var r = 5;

with (Math) {
    // tutaj domyślnie wywoływane są metody i właściwości 
    // obiektu Math
    a = PI * r * r;
    b = r * cos(PI);
    c = r * sin(PI / 2);
}

alert(a + " - " + b + " - " + c);

Dzięki temu, w tym przykładzie nie musimy podawać nazwy obiektu Math każdorazowo, gdy wywołujemy właściwość lub metodę tego obiektu. Przykładowo sin() zamiast Math.sin().

Tip #2 – funkcje escape i unescape

Funkcje te kodują i dekodują wartość łańcuchową

– escape – zwraca kodowanie szesnastkowe argumentu dla znaków specjalnych; innymi słowy koduje łańcuch do postaci przenośnej, która może być dowolnie transmitowana poprzez sieć,

– unescape – zwraca wartość łańcuchową jako ASCII; dekoduje wartości zakodowane funkcją escape.

Funkcji tych używa się często także po stronie serwera. JavaScript koduje i dekoduje nazwy / wartości par w URL.

var str = 'JS? Zapraszamy na http://javascript-html5-tutorial.pl/';
alert(escape(str));
// JS%3F+Zapraszamy+na+http%3A%2F%2Fjavascript-html5-tutorial.pl%2F

Tip #3 – Testowanie szybkie

Z pomocą operatorów logicznych możemy wykonać szybkie testowanie wyrażeń:

– false && jakies_wyrazenie jest skrótem wykonującym wyrażenie fałszywe;

– true || jakies_wyrazenie jest skrótem wykonującym wyrażenie prawdziwe;

Przykładowo:

var x = 1;
if (false && x > 0) alert('Debug: 0');
if (true || x > 0) alert('Debug: 1');

// -> Debug: 1

Tip #4 – zaznaczanie pola tekstowego

Czyli szybka implementacja funkcji ‚Zaznacz wszystko’ – tu dla textarea.

<form>
  <textarea name="text" cols="30" rows="2">Tu jest tekst
  </textarea>

<input onclick="java_script:this.form.text.focus(); 
  this.form.text.select();" type="button" value="Zaznacz">

</form>

Tip #5 – mapowanie argumentów

Przykład funkcji mapującej. W tym przykładzie przekazujemy jako argumenty funkcję oraz tablicę, która zostanie przez tę funkcję przetworzona.

function map(f, a) {
    var result = new Array;

    for (var i = 0; i != a.length; i++)
        result[i] = f(a[i]);

    return result;
}

// zwraca [0, 1, 8, 125, 1000]
map(function(x) { return x * x * x }, [0, 1, 2, 5, 10];

Tip #6 – instrukcja debugger

Przydatność tej prostej instrukcji możemy zaobserwować mając w naszej przeglądarce aktywne narzędzie do debugowania kodu, np. Firefox + Firebug. W praktyce to naprawdę może się przydać 🙂

var x = 20, y = 40;
var dt = x + y;
debugger; // przenosi do debuggera

Tip #7 – określanie, czy element HTML jest ukryty / widoczny

Znający zagadnienia DOM doskonale zrozumieją przykład. Pobierzemy wartość style: display zadanego elementu.

<button id="guzik" onclick="wylaczGuzik()">Guzik</button>

function czyJestUkryty(el) {
    if (document.getElementById(el).style.display == "none") {
        return true;
    }

    return false;
}

if (czyJestUkryty('guzik')) {
    alert('Tak');
} else {
    alert('Nie');
}

To oczywiście bardzo proste rozwiązanie, w samym JS, bez użycia framework’ów.

Tip #8 – użycie alternatywy funkcji

Czyli tzw. alternatywa funkcji poprzez dodanie właściwości. Jeśli ktoś teraz zastanawia się jak to jest możliwe, stanie się jasne, gdy zagłębimy się w zagadnienia programowania obiektowego (OOP) w JavaScript. Na razie mały przykład:

function powiedzWitam() {
    alert("Cześć");
}

powiedzWitam.alternatywa = function() {
    alert("Hello");
};

// wywołaj funkcję
powiedzWitam(); // wyświetla "Cześć"

// wywołaj alternatywę
powiedzWitam.alternatywa(); // wyświetla "Hello"

Mamy nadzieję że te kilka porad potrafi zachęcić Czytelników do zgłębiania tajników JS. A język ten ma wiele ciekawych tajników, nawet jeśli niektóre były niezamierzone 🙂

Ludzie

A na sam koniec pozwolę sobie złożyć wyrazy uznania osobom, które miały wielki wpływ na JavaScript i współczesny frontend development:

– Brendan Eich – amerykański programista, twórca języka JavaScript, dziś CTO w Mozilla Corporation,

– Douglas Crockford – kolejny guru, programista mający duży wpływ na JavaScript, zdefiniował i spopularyzował JSON, zawdzięczamy mu także inne narzędzia, jak JSMin czy JSLint,

– John Resig – twórca i lider projektu jQuery.

W następnym artykule zostaną opisane operatory i operacje bitowe.

Dziękuję za uwagę.