Javascript & RegExp

Hei, ultimul post inainte de sfarsitul proiectului. Ca tot am predat tema 3 la IOM acum 2 saptamani, voi vorbi putin despre ce am folosit eu pentru a cauta expresiile dorite in paginile html: RegExp. RegExp vine de la RegularExpression si are niste chestii in comun cu tema pe care am facut-o la LFA anul trecut (care va mai aduceti aminte). RegExp este practic un obiect folosit pentru a memora un tipar (pattern) care va fi folosit in parsarea unui string. Poate lua forme simple sau mai complicate. Crearea unui nou obiect RegExp se face astfel in Javascript:

var txt=new RegExp(pattern,attributes);

or

var txt=/pattern/attributes;
Exemplu: var patt1=new RegExp("e", "g"); patt1 o sa fie egal cu stringul "e", iar cautarea se va face global, adica
se vor returna toate pozitiile gasite, nu doar prima(default).

Alte valori posibile pentru argumentul "attributes" sunt: "i" - case insensitive search, "gi" - global case insensitive si "m" - multiline search. Cand v-am spus ca regexp seamana cu tema de la LFA, m-am referit la urmatorul aspect: se pot adauga stringului din tipar diversi modificatori pentru parsari mai avansate. De exemplu modificatorul "[xyz]" folosit pentru a cauta caracterele din interiorul setului(cum faceam si la LFA, cu acele pattern-uri folosite la parsare). O lista completa de modificatori se gaseste pe pagina celor de la w3schools. Ca orice obiect care se respecta, regexp are si metodele sale:

compile() - schimba expresia folosita: 

var patt1=new RegExp("e", "g"); // patt1="e"

patt1.compile("f");// patt1="f"

exec() - intoarce string-ul gasit(daca exista) si tine minte pozitia:

patt1.exec(str); // cauta patt1 in stringul str

test() - returneaza true daca gaseste o cel putin o potrivire sau false daca nu:

flag=patt1.test("abcde"); // flag=false pentru patt1="e" dar flag=true pt patt1="f"

Anumite metode ale obiectelor de tip String accepta folosirea regexp ca argument: search(), match(), split(), replace(). Eu am folosit metoda search() in tema, si am construit urmatorul tipar pentru a descoperi doar cuvinte intregi, nu si substringuri:

 var patt1 = new RegExp("\\b" + str + "(?![a-z,A-Z,0-9])","i")

care inseamna, practic, ca voi cauta doar la inceputul cuvantului ("\\b"), si nici nu se vor accepta rezultatele care au in coada caractere numerice sau litere(adica se accepta decat cuvinte intregi, nu substringuri ale altor cuvinte ca rezultate).

Seamana putin cu tema de la LFA nu? :) Eu am ales RegExp pentru ca imi era mult mai usor sa caut cuvinte intregi astfel, decat cu search-ul normal al obiectului String.

Sa parsati sanatosi!

Again, about fonts...

Primul meu articol a fost o poveste despre rolul fonturilor in pagina noastra web si efectele pe care diferite caracteristici ale fontului le imprima aspectului general al acesteia. Ca o scurta revenire la aceasta idee, am gasit pe internet site-ul  http://www.typenow.net/themed.htm care ofera o gama larga de font-uri folosite in filme sau de firme mai mult sau mai putin cunoscute. De asemenea se gasesc cateva font-uri apartinand unor formatii de muzica sau unor jocuri. And it's all there for the taking... free. Mai jos cateva mostre(font-uri de filme):

Favicon, imagini in miniatura

Favicon (FAVorites ICON) , bookmark icon sau url icon este, pentru cei ce nu stiu despre ce vorbesc, acea mica imagine ce apare in browser langa numele site-ului. Pentru blogger.com este un B, pentru Wikipedia este W, iar pentru Yahoo... ati ghicit: unY. Evident acestea sunt doar cateva exemple, fiecare poate sa isi puna ce favicon doreste, acesta putand fii chiar si animat.
Un favicon da personalitate site-ului tau, apare ca imagine la bookmarks si, de ce nu, iti face site-ul mai frumos si mai usor de recunoscut.
Mai intai trebuie sa il cream sau sa il luam de undeva. Faviconul este un fisier cu extensia .ico de dimensiuni fixe: 16x16 sau 32x32 pixeli pe 8 sau 24 biti. Mai nou sunt suportate si fisierele .png si .gif, dar daca vrei ca imaginea ta sa fie afisata si in browsere mai vechi (IE6) trebuie sa fie .ico.
Daca vrei sa iti faci singur acest fisier te anunt cu parere de rau ca Photoshopul nu stie sa salveze .ico. Dar exista un plugin al celor de la Telegraphics, care iti permite sa faci asta. Sunt insa destule site-uri pe care poti sa uploadezi un png, gif sau jpeg pe care sa le convertesti in ico. Un astfel de site este favicon.cc, care te lasa sa iti si desenezi propria pictograma (traducerea in limba romana :p).
Odata creeat faviconul trebuie pus pe site. Initial, pentru a putea fii interpretat de browser acesta trebuia sa se afle in radacina site-ului si era musai sa aiba extensia ico. Mai tarziu s-au mai luminat oamenii si au zis sa fie mai permisivi. Astfel se poate preciza din codul html locatia favicon-ului si tipul fisierului(gif, png, ico):

<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon" 
      type="image/png" 
      href="http://example.com/myicon.png">
[...]
</head>

Momenan site-urile folosesc ambele metode pentru a se asigura ca si cei cu browsere mai vechi vad imaginea, lucru pe care va sugerez sa il faceti si voi.

Protopage - spatiul tau privat

Acum ca au trecut sarbatorile a venit momentul intrarii in minicriza studenteasca a sesiunii. Pai ce, doar bancherii sa aiba crize? Pe mine ma prinde foarte nepregatit criza anul asta, pentru ca sunt la pamant cu temele si cu proiectele si uite ca azi imi programasem un pic de oracle dar se pare ca pe vista imi trebuie alta versiune decat cea pe care o luasem eu de pe internet (Oracle 9i). Asa ca, din lipsa de dispozitie pentru Lisp, mai scriu un articol.
Fiecare dintre noi navigheaza internetul din propriile motive, fie ca vrea sa citeasca un articol pe wikipedia, o stie din presa locala sau internationala, sa vada un filmulet pe youtube, sa caute o rezolvare la tema pe care o are de facut, sau sa frece menta pe retele sociale gen hi5, facebook, etc. Din acest motiv mi se pare util sa ai o pagina pe care sa gasesti majoritatea subiectelor si site-urilor care te intereseaza si pe care le frecventezi in mod regulat. O astfel de pagina, care mi-a atras atentia, este www.protopage.com. Pagina care se deschide in fereastra browser-ului cand accesam aceasta adresa este un tablou de topicuri si site-uri incluzand vremea, del.icio.us, digg.com, CNN.com, BBC, Yahoo News, si asa mai departe. In afara de tab-ul Home ce contine aceasta e-supa de site-uri, mai avem tab-urile de bookmarks(alternativa la google bookmarks sau add-on-ul firefox despre care a vorbit colegul meu intr-un articol anterior) si de notes, in care ne putem atasa e-post-it-uri, daca pot sa le numesc asa :) : de la date calendaristice, la to-do-uri si alte comentarii. Exista de asemenea o optiune de adaugare tab nou pentru cei care nu sunt satisfacuti de cele 3 standard sau pentru cei care doresc sa isi imparta materialul in categorii mai specifice. Dupa ce iti faci un cont pe pagina celor de la protopage nu iti ramane decat sa iti customizezi portalul, adaugand widgets, bookmarks, rss feed-urile care te intereseaza, notitele tale si tot felul de linkuri catre site-urile pe care vrei sa le ai la indemana. Inca un exemplu bun de h0mepage pentru browser-ul vostru. Apropo de browser, Protopage recomanda Firefox 3 sau Explorer 7, desi functioneaza si pe Safari si Opera.
Ca sa nu mai lungesc vorba, va urez un 2009 plin de suprize placute si de succese (nebanuite! , cum zicea o cunostinta de-a mea ca suna "cool" :)) ). Si incercati Propotage!