
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ę.