Dziudek's jogger

Plik string.js to ostatni składnik grupy Native frameworka mootools. Służy do operowania na ciągach znaków i ma też trochę wspólnego z poznanymi już metodami pliku number.js . Mianowicie chodzi mi o metody toInt i toFloat - obie znajdowały się pliku number.js i znajdują się także w pliku string.js - ponieważ ich działanie zostało już wcześniej omówione, nie będę ich tu opisywał i zajmę się pozostałymi 10 metodami pliku string.js . Dodatkowo wspomnę krótko o wyrażeniach regularnych w JavaScript, ponieważ wiedza ta przyda się w wypadku tegoż pliku... Ponadto poprawimy troszkę funkcjonalność mootools nowymi funkcjami tak by uzupełnić małe braki w kodzie ;) ...

Krótko o wyrażeniach regularnych w JavaScript

Wyrażenia regularne wykorzystują wzorce i opcje - wzorzec to jak sama nazwa wskazuje schemat poszukiwanego ciągu znaków, natomiast opcje określają parametry wyszukiwania tegoż ciągu znaków. Wyrażenia regularne pozwalają nam na przykład sprawdzić poprawność podanego przez użytkownika adresu e-mail, przydają się także przy przeszukiwaniu i podmianie ciągów znaków... Ponieważ temat ten jest dość rozbudowany odsyłam wszystkich, którzy nie mieli z nim styczności pod ten adres:

Opis wyrażeń regularnych

szczególnie interesujące nas sekcje to:

• Parametry oraz
• Znaki specjalne w wyrażeniach regularnych

test

Metoda test bazuje na wspomnianych wyrażeniach regularnych - pozwala sprawdzić czy dany wzorzec występuje w danym ciągu znaków. Jeżeli tak to metoda zwraca wartość logiczną true, w przeciwnym wypadku zwracana jest wartość logiczna false.

Przykłady użycia:

("dziudek@mail.pl").test('^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$');

Powyższy kod zwróci wartość true, ponieważ podany adres e-mail jest poprawny w kontekście użytego wyrażenia regularnego...

Jeszcze opiszę krótko prezentowane wyrażenie regularne, bo z pewnością wielu osobom wydaje się ono skomplikowane. Wyrażenie to sprawdza czy podany adres e-mail zaczyna się od ciągu znaków alfanumerycznych, ponadto akceptuje wszelkie wystąpienia kropek i myślników oraz podkreśleń w nazwie użytkownika. Po takim ciągu musi znaleźć się znak @, a po nim znów ciąg znaków podobny do tego co na początku z tym, że na końcu musi wystąpić sekwencja dwu- lub trzy-znakowych ciągów znaków zaczynających się od kropki (domeny). Myślę, że po lekturze wspomnianego wcześniej artykułu z MDC wszystko stanie się jasne, jeżeli jeszcze nie jest ;)

PRZYKŁAD 1

camelCase

Metoda camelCase pozwala zamienić dany tekst (zapisany z użyciem metody hyphenate) na tak zwany styl wielbłądzi - krótko mówiąc wszelkie myślniki są usuwane z tekstu, a każdy wyraz ciągu znaków zaczyna się z dużej litery (poza pierwszym wyrazem).

Użycie:

("to-jest-test").camelCase();

Zwrócony zostanie ciąg "toJestTest".

Pewnie wielu z Was dostrzega małą niedogodność - otóż o wiele bardziej przydatne byłoby zamienianie spacji na styl wielbłądzi... Ale możemy łatwo dodać odpowiednią funkcję bazująca na metodzie camelCase. Możemy to uczynić na dwa sposoby - dodać tą funkcję w kodzie pliku string.js lub w kodzie naszego skryptu. Ja wybrałem tą drugą metodę i stworzyłem funkcję camelCaseSpace poprzez zmianę wyrażenia regularnego stosowanego w metodzie camelCase:

String.extend({
   camelCaseSpace: function(){
      return this.replace(/\s\D/g, function(match){
         return match.charAt(1).toUpperCase();
      });
   }
});

Można też jeszcze inaczej zbudować tą funkcję tak aby działała jak wyżej wymieniona oraz metoda camelCase (czyli zamieniała i spacje i myślniki):

String.extend({
   camelCaseSpace: function(){
      return this.replace(/[\s,-]\D/g, function(match){
         return match.charAt(1).toUpperCase();
      });
   }
});

hyphenate

Metoda hyphenate pozwala zamienić styl wielbłądzi na ciąg znaków gdzie wyrazy zaczynają się z małej litery, a wyrazy są rozdzielone myślnikami...

Użycie:

("toJestTest").hyphenate();

Zwrócony zostanie ciąg "to-jest-test".

Podobnie jak w wypadku metody camelCase z pewnością wiele osób z chęcią ujrzałoby możliwość zamiany na taki ciąg znaków nie tylko stringów zapisanych za pomocą camelCase, ale także ciągów gdzie wyrazy rozdzielone są spacją... Dodajmy zatem funkcję hyphenateSpace :

String.extend({
   hyphenateSpace: function(){
      return this.replace(/\s[A-Z]/g, function(match){
         return ('-' + match.charAt(1).toLowerCase());
      });
   }
});

W jej wypadku trzeba było troszkę bardziej pokombinować niż tylko zmieniać wyrażenie regularne ;) Bardziej spostrzegawcze osoby zauważą jednak małe niedopracowanie - otóż owszem zaprezentowana metoda zadziała prawidłowo, ale tylko w wypadku gdy każde słowo zaczyna się z dużej litery. Nie muszę chyba mówić, że rzadko zdarzają się zdania pisane "W Ten Sposób" ;) Dodajmy zatem do tej funkcji obsługę małych liter na początku wyrazów:

String.extend({
   hyphenateSpace: function(){
      return this.replace(/\s\w/g, function(match){
         return ('-' + match.charAt(1).toLowerCase());
      });
   }
});

Teraz już powinno działać elegancko ;)

capitalize

Metoda capitalize zamienia wszystkie pierwsze litery wyrazów na duże litery. Można powiedzieć, że jej działanie jest podobne do działania metody camelCase z dwoma różnicami :

• - capitalize nie usuwa spacji / myśliników,
• - capitalize powiększa także literę w pierwszym wyrazie (czego camelCase nie robi).

Użycie:

("to jest test").camelCase();

Zwróci nam "To Jest Test".

No to pora na zbiorczy przykładzik użycia metod camelCase, hyphenate, capitalize oraz moich dwóch - camelCaseSpace i hyphenateSpace:

PRZYKŁAD 2

trim

Metoda trim usuwa spacje z początku i końca danego ciągu znaków...

Przykład użycia:

("       To jest test     ").trim();

Zwróci "To jest test".

clean

Metoda clean usuwa spacje tak jak metoda trim, a ponadto usuwa powielone spacje z danego ciągu znaków...

Przykład użycia:

("    To    jest    test     ").clean();

Zwróci "To jest test".

contains

Metoda contains służy sprawdzeniu czy podany jako pierwszy argument ciąg znaków występuje w sprawdzanym stringu. Ponadto metoda ta pozwala określić jako drugi argument ciąg znaków, który występuje przed i po szukanym ciągu podanym w pierwszym argumencie. Metoda contains zwraca wartość logiczną true w wypadku gdy badany ciąg znaków spełnia podane warunki i false w wypadku ich nie spełnienia...

Przykłady użycia:

("test test1 test2 test3").contains("test"); // zwróci true
("test test1 test2 test3").contains("test1"); // zwróci true
("test test1 test2 test3").contains("test1"," "); // zwróci true
("test test1 test2 test3").contains("tes"); // zwróci true
("test test1 test2 test3").contains("tes"," "); // zwróci false
("test test1 test2 test3").contains("test"," "); // zwróci true

Pora na kolejny zbiorczy przykład dla metod trim, clean i contains:

PRZYKŁAD 3

rgbToHex i hexToRgb

Metody rgbToHex oraz hexToRgb mają podobne działanie tylko inny kierunek działania ;) Jak same nazwy wskazują służą one do zamiany zapisu koloru w postaci RGB do zapisu heksadecymalnego i na odwrót.

Metoda rgbToHex przetwarza ciągi postaci:

"rgb(wartość1,wartość2,wartość3)"

na ciągi:

"#6_znaków"

Metoda rgbToHex może ponadto przetwarzać także ciągi postaci:

"rgba(wartość1,wartość2,wartość3,alpha)"

Gdzie

alpha

to liczba z przedziału 0,1. Warto wiedzieć, że gdy wartość zmiennej alpha wynosi 0 to metoda rgbToHex zwróci wartość "transparent".

W wypadku metody hexToRgb zamieniane są ciągi postaci:

"#6_znaków"

na ciągi:

"rgb(wartość1,wartość2,wartość3)"

Czyli jak już wspominałem działanie odwrotne do działania metody rgbToHex.

Warto jeszcze dodać, że obie metody pobierają jeden argument, który w wypadku przyjęcia wartości true spowoduje, że obie metody zamiast ciągu znaków będą zwracały tablice postaci:

['wartość1','wartość2','wartość3']

W wypadku metody rgbToHex oraz:

[wartość1,wartość2,wartość3]

w wypadku metody hexToRgb.

Warto jeszcze dodać, że metoda hexToRgb akceptuje skrócony zapis heksadecymalny w postaci:

#CCC

Obie metody w wypadku wystąpienia błędów w zapisie przetwarzanego ciągu zwracają wartość logiczną false.

Na podsumowanie obu metod przykład:

PRZYKŁAD 4

escapeRegExp

Metoda escapeRegExp pozwala na przerobienie wszelkich znaków wykorzystywanych w wyrażeniach regularnych z danego ciągu tak by były interpretowane jako normalne znaki poprzez wstawienie slashy przed tymi znakami...

Przykładowo zapis:

"funkcja(){}"

Zawiera znaki wykorzystywane w wyrażeniach regularnych, jeżeli chcemy jednak wykorzystać jako wzorzec właśnie ten ciąg znaków to potrzebujemy przed znakami ( , ) , { oraz } wstawić slashe co wykona za nas właśnie metoda escapeRegExp:

("funkcja(){}").escapeRegExp();

zwróci ciąg:

"funkcja\(\)\{\}"

To już wszystko co chciałem opisać na temat pliku string.js, tym samym zakończyliśmy omawianie grupy Native frameworka mootools. W następnej części kursu przejdziemy do grupy Elements...