sâmbătă, 15 noiembrie 2014

Nostalgia de Mircea Cartarescu

Nostalgia este un volum de nuvele scris de Mircea Cartarescu. Opera este versiunea intregita a cartii "Visul". Aceasta cuprinde "Ruletistul", "Mendebilul", "Gemenii", "REM" si "Arhitectul".

Prima partea a acestei carti se numeste "Ruletistul". Aceasta prezinta povestea tragica a unui om impatimit de jocurile de noroc. Ruleta era un joc de noroc in care un biet cersetor isi punea viata in ghearele mortii, sperand ca soarta ii va surade si il va scapa de sfarsitul iminent. Alaturi de acesta era "patronul", cel ce organiza evenimentul. El avea rolul de a face pariurile cu "investitorii" si primea majoritatea bailor castigati. Investitorii mizau anumite sume pe moartea ruletistului, avand una din sase sanse sa castige suma inzecit. Ruletistul punea degetul pe tragaci si daca supravietuia lua a zecea parte din suma totala. Personajul pincipal sfideaza moarte de nenumarate ori in rolul de ruletist, doar ca in mod ironic sa-si cunoasca sfarsitul la capatul unui revolver gol.

Mendebilul este porecla unui fost prieten din copilaria autorului si numele urmatoarei povestiri. Povestea se axeaza pe vara petrecuta cu acesta si copiii de la bloc. Naratiunea incepe cu un vis ciudat care trezeste amintiri demult uitate. Rascolind printre amintiri autorul descopera o intamplare, care si-a pus amprenta asupra vietii lui si probabil a celorlalti copii de la bloc. El cladeste contextul acestei intamplari si uneori face abateri de la poveste. Aceste abateri deveneau un pic enervante pentru mine, dar in acelasi timp ma faceau tot mai curios. Aveam un sentiment de nerabdare, vroiam sa trec pe la sfarsit, dar totusi m-am stapanit. Nu vroiam sa pierd detaliile. Intr-un final am aflat sfarsitul. Sa zicem ca a meritat asteptarea.

Gemenii, urmatoarea lectura a acestui volum, o poveste de amor, o tragedie sau ambele. Ritualul meticulos al tranzitiei. Tranzitia fortata dintre viata si moarte al unui barbat. Sfarsitul incert al acestuia si scriitorul care promite o carte. Carte ce avea ca subiect trairile unui tanar indragostit, patimile si suferinta acestuia. Legatura intre ei, inca nedefinita. Curiozitatea care apare, aproape insuportabila, si intrebarea care isi croieste drumul catre suprafata. Care este legatura intre cele trei ipostaze. Oare totul se petrece in mintea scriitorului, sau acel scriitor este presonaj in propria opera. Citind printre randuri tind sa cred ca acel adolescent, va deveni barbatul din ritual, ca mai apoi sa intre in starea de crisalida. Fiecare rand duce tot mai aproape de rezultatul acestei tranformari. Enigma acestei tranziti, acea emotie, ramane a fi deslusita de catre cititor.

REM este numele urmatoarei povestiri. Fiind curios de unde vine prescurtarea, am cautat pe internet sensul. Initialele provin de Rapid Eye Movement, perioda in care traim visele. Citind primele randuri caut legatura cu visul, dar gasesc urme din GEMENI, povestirea din care inca nu m-am dezmeticit cu totul. Si totusi, continuand decopar un tanar avand o  aventura cu o femeie matura, atinsa de umbra singuratatii. Alaturi de aceasta idila, apare, ca o panza de paianjen, un sir de istorisiri din viata celor doi. Prima istorisire este a tanarului, un pic interesanta, dar un cadru destul de banal. In schimb povestea femeii este un labirint complex, plin de trairi intense.
Povestea a ceea ce a fost si nu va mai fi niciodata. Acest sir de istorisiri se termina cu despartirea celor doi si cu o turnura interesanta, asemeni unei revelatii.

Arhitectul este ultima parte valumului "Nostalgia" si are rolul de epilog. Are ca subiect pasiunea devenita obsesie. Un mijloc de a depasi limitarile existentei umane. Cu o intorsatura stranie, personajul principal isi pune amprenta asupra lumii. Insa aceasta realizare vine cu un cost: pierderea laturii umane. O evolutie continua, aproape mecanica, ce absoarbe tot in jurul ei.

Acest volum mi-a placut destul de mult. Trairile intense pe care le-a provocat sunt clar un atu.
Evenimentele neasteptate dau un iz de originalitate unor cadre banale, cu care aproape orice om poate
corela. Astfel se creaza un fel de empatie cu personajele prezentate.
Singurul lucru care nu mi-a placut sunt descrierile lungi si anevoioase. Probabil au avut rolul de a crea suspans. Insa mult prea lungi ca sa fie pe gustul meu.

In concluzie, o carte buna care merita citita. In special pentru Gemeni si REM.

duminică, 26 octombrie 2014

Leviatanul (Leviathan) de Scott Westerfeld

    Leviatanul este prima carte din seria cu acelasi nume, scrisa de Scott Westefeld. Opera intra in categoriile aventura si fantezie. Lectura este usoara si captivanta, fiind potrivita pentru orice tip de cititor.

    Actiunea are loc intr-o realitate alternativa a primului razboi mondial, unde factiunile Europei sunt impartite dupa doua tehnologii diferite. "Clankers" sunt tarile care se bazeaza pe industrializare masiva folosind masinarii mecanice complexe. In schimb "Darwinist" au creat animale prin inginerie genetica pentru a inlocui masinariile. De exemplu, leviatanul este o balena cu propriul ecosistem folosita pe post ne nava de razboi.

    Povestea se axeaza pe cele doua personaje principale: Deryn Sharp (Dylan) si Printul Aleksandar (Alek).
    La fel ca si in primul razboi mondial, actiunea incepe prin asasinarea Arhiducelui Franz Ferdinand. Dar in "Leviatan" copiii acestuia sunt inlocuiti de un singur fiu pe nume Alek. Acesta este luat in toiul noptii de catre tutorii lui, cu pretextul unei unei lectii de pilotare a unui "Stormwalker"(masinarie de lupta pe doua picioare echipata cu tun). El afla mai tarziu de moartea parintiilor lui, marcand primul pas al, transformarii dintr-un copil rasfatat intr-un tanar capabil.

    Pe celalalt fir al naratiunii se afla Deryn, o fata de cincisprezece ani ce este hotarata sa intre in aviatia britanica. Ea este nevoita sa se imbrace si sa se comporte ca un baiat, deoarece in aviatie fetele nu erau acceptate. In ziua examenului ramane blocata pe un "Huxley" (creatura asemanatoare unei meduze plina de hidrogen, folosita pe post de balon zburator) fiind obligata sa taie legatura cu solul pentru a nu se izbi de o cladire. Deryn este adusa la bordul navei "Leviathan", iar din cauza crizei de timp va fi adaugata echipajului pe postul de Midshipman (un fel de ucenic). Ea ajunge sa-si indeplineasca visul, dar secretul ei risca sa ajunga la iveala, cand un nou venit se alatura echipajului.

    Intriga povestii este una buna, lasandu-te nerabdator sa ajungi la urmatoarea pagina. Pasul actiunii este unul rapid si plin de turnuri de situatie neasteptate. Pe masura ce actiunea inainteaza, povestea devine din ce in ce mai interesanta, datorita dezvoltarii personajelor.
    Find o persoana ce nu petrecea prea mult timp citind, am fost sceptic cand am inceput lectura. Dar dupa primele capitole citite am devenit curios si nerabdator sa aflu cum va decurge actiunea.
    Fiind placut impresionat am inceput sa citesc "Behemoth", urmatoarea carte din seria "Leviathan".

vineri, 3 octombrie 2014

Informatii utile profil Firefox

1. Profil Firefox

Profilul browserului contine informatii legate de customizarile utilizatorului.
In aceasta categorie intra:
  - parolele salvate
  - istoricul paginilor vizitare
  - bookmark-uri
  - istoricul cuvintelor folosite pentru autocompletare
  - cookies si setari specifice site-urilor
  - fisiere recunoscute si actinile executate la descarcare

2. Copiere Profil

Pentru a nu pierde setarile facute de a lungul timpului copierea si stocarea profilului intr-un loc sigur este recomandata.
Copierea se poate face in doua moduri:
1. Folosirea functiei de Cloud a browserului Firefox
    Pentru a face sincronizarea este necesara crearea unui cont Firefox.
    Dupa logare se foloseste butonul de sincronizare pentru a aduce setarile salvate.
2. Copierea fisierelor din folderul de profil
 Pentru a accesa folderul se apasa butonul de meniu , dupa care se apasa  butonul de ajutor . Din meniun nou deschis se selecteaza "Troubleshooting Information" (Informatii de depanare).
  Din pagina nou deschisa apasati butonul "Show folder" din Randul "Profile Folder".
  Copiati fisierele din dosar.
  Pentru a aplica setarile salvate, se deschide folderul de profil si se inlocuiesc fisierele existente cu cele salvate. Pentru ca tranzitia sa se efectueze browserul Firefox trebuie inchis.

3. Copiere istoric

Pentru a copia doar istoricul se acceseaza folderul folderul de profil (ca la punctul 2).
Fisierul places.sqlite contine site-urile vizitate, fisierele descarcate si bookmark-urile.
Daca suprascrieti fisierul dintr-un profil existent, doar istoricul va fi inlocuit.


4. Copiere parole

Pentru a copia doar parolele se acceseaza folderul folderul de profil (ca la punctul 2).
Fisierele key3.db si  ogins.json contin parolele salvate.
Ambele fisiere trebuie copiate si suprascrise pentru ca transferul sa fie cu succes.

4. Nota informativa

Daca suprascrieti fisierele din profil, setarile continute de acestea vor fi pierdute, fiind inlocuite cu noile setari.

miercuri, 6 august 2014

Palindrom

   Un palindrom este un cuvant, o fraza, un numar sau o secventa de simboluri, care citit de la staga la dreapta sau de la dreapta la stanga ramane neschimbat.
   Cuvantul is are originea in greaca, find un cuvant compus din "palin" (care inseamana: iar) si "dromos" (care inseamna: drum, sens)

Enunt:
Sa se citeasca de la tastatura o valoare si sa se verifice daca este palindrom.
Ex: 1221, abba sau p sunt palindrom
Rezolvarea problemei se va face in limbajul C++

Metoda de rezolvare:
Pentru a fi mai usor, am impartit problema in 3 parti:
- citirea valorii de la tastatura cu functia citireValoare
- verificarea valorii cu functia isPalindrom
- afisarea rezultatului in metoda principala main
//============================================================================
// Name        : Palindrom.cpp
// Author      : exempleinformatica.blogspot.com
// Version     : 1.0
// Description : Palindrom in C++
//============================================================================

#include <iostream>
using namespace std;

/*
 * Citeste o valoare de la tastatura si o returneaza.
 * @return valoare citita de la tastatura
 */
string citireValoare() {
    string value;
    cin >> value;
    cout << "Valoare citita:" << value << endl;
    return value;
}
/*
 * Verifica daca stringul dat este palindrom.
 * @param value stringul care trebuie testat
 * @return true daca stringul dat este palindrom
 */
bool isPalindrom(string value) {
    // se gaseste pozitia de mijloc a sirului
    // pentru numar impar de pozitii se ia cu o pozitie in minus
    int lengthMid = value.length() / 2;
    // executa parcurgerea pozitiilor pana la mijloc
    for (int i = 0; i < lengthMid; i++) {
        // compara prima si ultima pozitie, continuand cu cate o
        // pozitie in plus sper interior
        if (value[i] != value[value.length() - i - 1]) {
            return false;
        }
    }
    return true;
}

/*
 * Functia de pornire a aplicatiei C++.
 */
int main() {
    // afiseaza Palindrom
    cout << "Palindrom C++" << endl;
    // citeste valoarea de la tastatura
    string value = citireValoare();
    // verifica daca valoarea citita este un palindrom
    if (isPalindrom(value)) {
        cout << "Este Palindrom" << endl;
    } else {
        cout << "Nu este Palindrom" << endl;
    }
    return 0;
}

Functia citireValoare

Functia citireValoare este folosita pentru a primi valoarea tiparita cu intermediul tastaturii. Are ca parametru de iesire o valoare de tipul string.
string value;
Pentru a realiza citirea se declara o variabila de tipul string, care va fi folosita pentru a returna valoarea primita.
cin >> value;
Aceasta variabila are valoarea initializata cu ajutorul functiei cin. Functia cin citesteste de la tastatura caracterele introduse pana cand se apasa tasta Enter.
cout << "Valoare citita:" << value << endl;
Pentru a vedea valoarea citita este folosita functia cout, care face afisarea in consola. endl are rolul de a introduce un rand nou.
return value;
Returneaza rezultatul functiei, adica valoarea cititat de la tastatura.

Functia isPalindrom

Functia isPalindrom este folosita poentru a verifica daca valoarea primita este un palindrom. Are ca parametru de intrare o valoare de tipul string asupra careia se va face verificarea. Are ca parametru de iesire o valoare de tipul boolean, valoarea true find returnata daca verificarea este pozitiva.
int lengthMid = value.length() / 2;
Se calculeaza mijlocul lungimii(se ia cu o pozitie in minus daca lungimea e impara) pentru stringul dat si se stocheaza in variabila lengthMid. Pentru a afla lungimea stringului se foloseste functia length, care returneaza numarul de caractere din stringul atasat. Pentru a afla mijlocul, valoare se imparte la 2. Iar pentru cazul in care numarul este impar se foloseste operatorul / (mod), care returneaza valoarea absoluta a impartirii, restul fiind ignorat.
for (int i = 0; i < lengthMid; i++)
Acum ca am aflat mijlocul stringului primit ca parametru, vom folosi structura repetitiva for pentru a itera prin acesta. Se defineste contorul int i=0, pentru a incepe de la primul caracter al stringului. Numerotarea pozitiilor in C++ pentru un string se incepe de la 0, deci prima pozitie are ca identificator 0 si nu 1. Se defineste limita iteratiei i<lengthMid, ciclul se va repeta pana cand i va fi mai mare sau egal cu lengthMid. Se defineste regula de incrementare i++. La fiecare iteratiei valoarea lui i va creste cu o unitate.
if (value[i] != value[value.length() - i - 1])
Pentru a face verificarea fom folosi structura if. Aceasta primeste o conditie pe care o va verfica. In cazul nostru se verifica daca valorile comparate sunt diferite cu ajutorul operatorului !=. Daca rezultatul este adevarat se continua pe ramura if, altfel se continua pe ramura else. In cazul in care ramura else nu exista, se continua la urmatoarea linie de cod. Conditia din if compara primul caracter din string cu ultimul si continua se interior cu fiecare iteratie. Prima valoare trece prin caracterele stringului de la prima pozitie 0 pana la mijlocul stringului. A doua valoare trece prin caracterele stringului de la ultima valoare pana la mijlocul stringului. Pentru a ajunge la ultimul string se foloseste identificatorul value.length-1 (se scade o unitate deoarece numerotarea se face de la 0).
return false;
Returneaza rezultatul functiei ca fiind fals. De asemenea opreste si ieratia for, deoarece return iese din functie oprind parcurgerea codului ramas in aceasta.
return true;
Returneaza rezulatatul functiei ca fiind adevarat. Aceasta linie de cod este accesata numai in cazul in care in interiorul iteratiei for nu se ajunge la return false. Asta inseamna ca fiecare pereche de caractere comparata are aceasi valoare. Prin urmare este indeplinita conditia de palindrom.

Functia main

Functia main este functia principala care este apelata la incepera programului. Prin intermediul acesteia sunt apelate metodele aferente. In aceasta functie se realizeaza apelarea functiilor de citire si de verificare. De asemenea se face si afisarea rezultatului.
cout << "Palindrom C++" << endl;
Se afiseaza o mica descriere a programului in consola. Se poate face detalierea functiei programului. In cazul nostru este afisata valoarea Palindrom C++.
string value = citireValoare();
Se defineste valoarea care va fi verificata. De asemenea se face si initializarea ei prin intermediul operatorului =. Aceasta va lua valoarea returnata de functia citireValoare.
if (isPalindrom(value))
Cu ajutorul constructiei if se face validarea valorii obtinute de la tastatura. Conditia structurii este definita de functia isPalindrom. In cazul in care sunt necesare conditii complexe, se recurge la functii pentru simplificarea codului si sporirea lizibilitatii acestuia (cod mai simplu de citit). In cazul de fata avem si ramura else a constructiei if, care este parcursa cand valoarea conditiei este false.
cout << "Este Palindrom" << endl;
Pe ramura if se face afisarea textului "Este palindrom".
cout << "Nu este Palindrom" << endl;
Pe ramura else se face afisare textului "Nu este Palindrom".

 

luni, 16 iunie 2014

Validarea unui formular (form)

Exemplu:
Numele trebuie completat.
Numele trebuie sa contina doar litere.
Parola trebuie completata.
Parola minim 6 caractere.
Valideaza o adresa de email.


Cuprins:

Validari:
 1. Validare input field - continut gol
 2. Validare input field - numar minim de caractere
 3. Validare input field - caractere invalide
 4. Validare input field - continut alphabet
 5. Validare input field - continut numeric
 6. Validare input field - limita de varsta
 7. Validare input field - adresa email
Notificari:
 1. Notificare prin dialog
 2. Dezactivare buton de trimitere
 3. Schimbare CSS

Continut:


Validari


1. Validare input field - continut gol


Campul trebuie completat.
Cod javascript:
function validareInputGol(input) {
    var parentX = input.parentNode,
        validare = !isCampGol(input.value);
    actualizeazaIcoanaStatus(validare, parentX);
    return validare;
}

function isCampGol(x) {
    return x === null || x === "";
}

function actualizeazaIcoanaStatus(validare, componenta) {
    if (validare) {
        componenta.setAttribute("class", "checked");
    } else {
        componenta.setAttribute("class", "warning");
    }
}

Explicatii:

Functia validareInputGol verifica daca exista continut in text input si actualizeaza icoana de status. Primeste ca parametru un input de tipul text.
Functia isCampGol verifica daca valoarea primita este de tipul null sau este un string vid. Primeste ca parametru valoarea unui input.
Functia actualizeazaIcoanaStatus va actualiza icoana de status. Primeste ca parametri rezultatul validarii si componenta parinte. In functie de rezultatul validarii icoana va fi verde (pentru true) sau un semn de exclamare (respectiv false). Componenta parinte va avea atributa clasa care introduce icoana si este de tipul div. Aceasta va gazdui icoana de status.

Cod HTML:

<form action="#" class="formular" method="post" name="formular">
<div>
<label>Continut gol:</label>
<input name="fNume" onkeyup="validareInputGol(this)" type="text" />
<span class="tooltip">
<img src="resources/help.png" />
<span>Campul trebuie completat.</span>
</span>
</div>
</form>

Explicatii:

In exemplul de mai sus avem un formular cu un input text. Acest input este incapsulat intr-un div pentru a desparti continutul acestuia fata de restul componentelor. Inputul este acompaniat de un label si un span.
Label-ul este folosit pentru denumirea inputului aferent.
Span-ul este folosit pentru gazduirea icoanei de ajutor, care are atasata un tooltip.
De asemenea div-ul mai este folosit pentru a afisa icoana de status cand utilizatorul tasteaza o valoare in input. Pentru a actualiza icoana, functia validareInputGol este atasata evenimentului onkeyup, care are loc de fiecare data cand utilizatorul tasteaza (ridica degetul de pe tasta) o valoare in input.

Codul CSS este disponibil la sectiunea: Notificare prin Schimbare CSS.

2. Validare input field - numar minim de caractere


Campul are nevoie de minim 5 caractere.
Cod javascript:
function validareInputNrMinim(input) {
    var parentX = input.parentNode,
        validare = validareLungime(input.value, 5);
    actualizeazaIcoanaStatus(validare, parentX);
    return validare;
}

function validareLungime(x, lungime) {
    return x.length >= lungime;
}

function actualizeazaIcoanaStatus(validare, componenta) {
    if (validare) {
        componenta.setAttribute("class", "checked");
    } else {
        componenta.setAttribute("class", "warning");
    }
}

Explicatii:

Functia validareInputNrMinim verifica daca exista cel putin 5 caractere in input si actualizeaza icoana de status. Primeste un input de tipul text.
Functia validareLungime verifica daca lungimea valorii primite este mai mare sau egala cu cea primita ca parametru. Primeste ca parametri valoarea inputului si lungimea minima.
Functia actualizeazaIcoanaStatus modifica atributul class al componentei parinte. Primeste ca parametrii rezultatul validarii si componenta in care se afla inputului validat. In functie de clasa setata se va afisa icoana corespunzatoare: "checked" icoana verde de confirmare si "warning" icona galbena de atentionare.

Cod HTML:

<form action="#" class="formular" method="post" name="formular">
<div>
<label>Validare lungime:</label>
<input name="fNume" onkeyup="validareInputNrMinim(this)" type="text" />
<span class="tooltip">
<img src="resources/help.png" />
<span>Campul are nevoie de minim 5 caractere.</span>
</span>
</div>
</form>

Explicatii:

In codul HTML de mai sus este definit un formular ce contine un input text.
Pentru validarea inputului este folosita functia validareInputNrMinim, care este apelata de fiecare data cand o tasta este apasata. Pentru afisarea icoanei de ajutor este folosit tagul span, care contine imaginea si descrierea acesteia. Cu ajutorul CSS un tooltip va fi afisat cand mouse-ul se duce deasupra icoanei.

Codul CSS este disponibil la sectiunea: Notificare prin Schimbare CSS.

3. Validare input field - caractere invalide


Caracterele '.' , ',' si ':' nu sunt permise.
Cod javascript:
function validareInputCaracterInvalid(input) {
    var parentX = input.parentNode,
        validare = !isCaractere(input.value, ",.:");
    actualizeazaIcoanaStatus(validare, parentX);
    return validare;
}

function validareInputCaracterInvalid(input) {
    var parentX = input.parentNode,
        validare = !isCaractere(input.value, ",.:");
    actualizeazaIcoanaStatus(validare, parentX);
    return validare;
}

function isCaractere(x, caractere) {
    return new RegExp("[" + caractere + "]").test(x);
}

function actualizeazaIcoanaStatus(validare, componenta) {
    if (validare) {
        componenta.setAttribute("class", "checked");
    } else {
        componenta.setAttribute("class", "warning");
    }
}

Explicatii:

Functia validareInputCaracterInvalid verifica daca exista caractere invalide introduse in input si actualizeaza icoana de status. Lista de caractere invalide este trimisa ca string functiei isCaractere pentru a verifica daca acestea sunt incluse in text.
Functia isCaractere verifica daca valoarea primita contine caracterele date ca parametru. Verificarea se face cu ajutorul expresiilor regulare. In cazul nostru expresia regulara este definita prin "RegExp". Constructorului ii este atribuit un pattern care contine sirul de caractere. Functia test verifica daca ppaternul se potriveste textului dat ca parametru.
Functia actualizeazaIcoanaStatus modifica clasa parintelui pentru a afisa icoana corenspunzatoare rezultatului validarii. Icoana este generata cu ajutorul CSS.

Cod HTML:

<form action="#" class="formular" method="post" name="formular">
<div>
<label>Validare caracter:</label>
<input name="fNume" onkeyup="validareInputCaracterInvalid(this)" type="text" />
<span class="tooltip">
<img src="resources/help.png" />
<span>Caracterele '.' , ',' si ':' nu sunt permise.</span>
</span>
</div>
</form>

Explicatii :

Formularul de mai sus contine inputul, labelul acestuia si icoana de ajutor.
La input este atasata functia validareInputCaracterInvalid care se va apela de fiecare data cans se tasteaza un caracter.
Icoana de ajutor are un tooltip customizat cu ajutorul CSS.

Codul CSS este disponibil la sectiunea: Notificare prin Schimbare CSS.

4. Validare input field - continut alphabet


Campul permite doar litere.
Cod javascript:
function validareInputAlfabet(input) {
    var parentX = input.parentNode,
        validare = isCaracterAlfabet(input.value);
    actualizeazaIcoanaStatus(validare, parentX);
    return validare;
}

function isCaracterAlfabet(x) {
    return x.match(/^[A-Za-z]+$/);
}

function actualizeazaIcoanaStatus(validare, componenta) {
    if (validare) {
        componenta.setAttribute("class", "checked");
    } else {
        componenta.setAttribute("class", "warning");
    }
}

Explicatii:

Functia validareInputAlphabet verifica daca in inputul tinta sunt introduse doar caractere ce apartin alfabetului si actualizeaza icoana de status dupa caz.
Functia isCaracterAlfabet verifica daca stringul dat ca input contine doar caractere ce apartin alfabetului. Validarea se face cu regex.
Grupul de caractere valide se defineste cu ajutorul parantezelor patrate "[" si "]". In interiorul acestora se pun caracterele dorite. Pentru a enumera un sir de caractere se foloseste cratima "-". Definirea literelor din alfabet se face prin "A-Za-z" (include si majuscule) si se introduce in paranteze patrate pentru a putea face patternul. Daca s-ar folosi doar "[A-Za-z]" comparatia ar returna adevarat pentru cazul in care exista cel putin o litera.
Pentru a cuprinde tot cuvantul se introduce "^" (returneaza adevarat pentru cazul in care caracterul se afla la inceputul cuvantului) si "$" (returneaza adevarat pentru cazul in care caracterul se afla sfarsitul cauvatului). Daca am pastra "^[A-Za-z]$", atunci validarea ar returna adevarat doar in cazul in care string-ul ar fi compus doar dintr-o litera. Pentru a rezolva problema lungimii, s-a folosit "+". Cu ajutorul acestuia expresia returneaza adevarat daca exista cel putin un singur caracter dintre cele valide.
Functia actualizeazaIcoanaStatus va schimba clasa componentei date ca parametru in functie de parametrul validare. Cu ajutorul clasei CSS definit va afisa una dintre icoanele de status.

Cod HTML:

<form action="#" class="formular" method="post" name="formular">
<div>
<label>Validare alfabet:</label>
<input name="fNume" onkeyup="validareInputAlfabet(this)" type="text" />
<span class="tooltip">
<img src="resources/help.png" />
<span>Campul permite doar litere.</span>
</span>
</div>
</form>

Explicatii:

Formularul de mai sus contine un input, labelul lui si icoana de ajutor.
Inputul are atasat listenerul onkeyup, care va apela functia validareInputAlfabet. Aceasta functie va face validarea continutului din input. In functie de rezultatul verificarii se va schimba clasa componentei parinte. Cu ajutorul clasei se va adauga icoana de status. Icoana de status se actualiza de fiecare data cand se introduce un caracter cu ajutorul tastaturii.
Icoana de ajutor are un tooltip care mentioneaza conditiile validarii. Tooltipul este realizat cu ajutorul CSS.

Codul CSS este disponibil la sectiunea: Notificare prin Schimbare CSS.

5. Validare input field - continut numeric


Campul permite doar numere.
Cod javascript:
function validareInputCifra(input) {
    var parentX = input.parentNode,
        validare = isCifra(input.value);
    actualizeazaIcoanaStatus(validare, parentX);
    return validare;
}

function isCifra(x) {
    return (x.match(/^\d+(?:\.\d+)?$/));
}

function actualizeazaIcoanaStatus(validare, componenta) {
    if (validare) {
        componenta.setAttribute("class", "checked");
    } else {
        componenta.setAttribute("class", "warning");
    }
}

Explicatii:

Functia validareInputCifra verifica daca stringul introdus este numar si actualizeaza icoana de status ca atare.
Functia isCifra valideaza stringul dat ca input cu ajutorul expresiilor regex.
^ reprezinta inceput de linie, expresia pe care o cauta trebuie sa inceapa cu prima litera din string
\d+ se potriveste pentru una sau mai multe cifre
(?: este folosit pentru delimitarea unui grup (marcheaza inceptul)
)? este folosit pentru delimitarea unui grup (marcheaza sfarsitul)
$ reprezinta sfarsitul de linie sau sfarsitul stringului, expresia trebuie sa se termine cu linia "\n" sau la sfarsitul stringului
Functia actualizeazaIcoanaStatus schimba clasa componentei data ca parametru. Daca parametrul validare este adevarat, clasa care corespundei icoane de confirmare va fi aplicata. Altfel va fi aplicata clasa ce va afisata icoana de atentionare.

Cod HTML:

<form action="#" class="formular" method="post" name="formular">
<div>
<label>Validare numere:</label>
<input name="fNume" onkeyup="validareInputCifra(this)" type="text" />
<span class="tooltip">
<img src="resources/help.png" />
<span>Campul permite doar cifre.</span>
</span>
</div>
</form>

Explicatii:

In formularul de mai sus se vafe validarea unui numar.
Pe inputul text este atasata functia validareInputCifra, care va fi apelata de fiecara data cand se tasteaza un caracter. Prin aceasta se va face atualizarea icoanei de status.
Prin intermediul CSS icoana de ajutor are adaugat un tooltip.

Codul CSS este disponibil la sectiunea: Notificare prin Schimbare CSS.

6. Validare input field - limita de varsta


Permite varsta de peste 18 si sub 100.
Cod javascript:
function validareInputVarsta(input) {
    var parentX = input.parentNode,
        validare = isCifra(input.value) 
        && isInInterval(input.value, 18, 100);
    actualizeazaIcoanaStatus(validare, parentX);
    return validare;
}

function isCifra(x) {
    return (x.match(/^\d+(?:\.\d+)?$/));
}

function isInInterval(x, minim, maxim) {
    return x >= minim && x <= maxim;
}

function actualizeazaIcoanaStatus(validare, componenta) {
    if (validare) {
        componenta.setAttribute("class", "checked");
    } else {
        componenta.setAttribute("class", "warning");
    }
}
Cod HTML:
<form action="#" class="formular" method="post" name="formular">
<div>
<label>Validare varsta:</label>
<input name="fNume" onkeyup="validareInputVarsta(this)" type="text" />
<span class="tooltip">
<img src="resources/help.png" />
<span>Permite varsta de peste 18 si sub 100.</span>
</span>
</div>
</form>
Codul CSS este disponibil la sectiunea: Notificare prin Schimbare CSS.

7. Validare input field - adresa email


Valideaza o adresa de email.
Cod javascript:
function validareInputEmail(input) {
    var parentX = input.parentNode,
     validare = isEmail(input.value);
    actualizeazaIcoanaStatus(validare, parentX);
 return validare;
}

function isEmail(x) {
    var pozAt = x.indexOf("@"),
        pozPunct = x.lastIndexOf(".");
    return !(pozAt < 1 || pozPunct < pozAt + 2
    || pozPunct + 2 >= x.length);
}

function actualizeazaIcoanaStatus(validare, componenta) {
    if (validare) {
        componenta.setAttribute("class", "checked");
    } else {
        componenta.setAttribute("class", "warning");
    }
}
Cod HTML:
<form action="#" class="formular" method="post" name="formular">
<div>
<label>Validare email:</label>
<input name="fNume" onkeyup="validareInputEmail(this)" type="text" />
<span class="tooltip">
<img src="resources/help.png" />
<span>Valideaza o adresa de email.</span>
</span>
</div>
</form>
Codul CSS este disponibil la sectiunea: Notificare prin Schimbare CSS.

Notificari


1. Notificare prin dialog


Campul trebuie completat.

Cod javascript:
function validareFormularDialog() {
    var x = document.forms.formularDialog.fNume.value,
        parentX = document.forms.formularDialog.fNume.parentNode,
        validare = !isCampGol(x);
    actualizeazaIcoanaStatus(validare, parentX);
    if (!validare) {
        window.alert("Campul este gol.");
    }
    return validare;
}

function validareInputGol(input) {
    var parentX = input.parentNode,
        validare = !isCampGol(input.value);
    actualizeazaIcoanaStatus(validare, parentX);
    return validare;
}

function isCampGol(x) {
    return x === null || x === "";
}

function actualizeazaIcoanaStatus(validare, componenta) {
    if (validare) {
        componenta.setAttribute("class", "checked");
    } else {
        componenta.setAttribute("class", "warning");
    }
}
Cod HTML:
<form action="#" class="formular" method="get" name="formularDialog" onsubmit="return validareFormularDialog()">
<div>
<label>Continut gol:</label>
<input name="fNume" onkeyup="validareInputGol(this)" type="text" />
<span class="tooltip">
<img src="resources/help.png" />
<span>Campul trebuie completat.</span>
</span>
</div>
<hr />
<input class="posteaza" type="submit" value="Notificare prind dialog" />
</form>
Codul CSS este disponibil la sectiunea: Notificare prin Schimbare CSS.

2. Dezactivare buton de trimitere


Campul trebuie completat.

Cod javascript:
function validareInputGol(input) {
    var parentX = input.parentNode,
        validare = !isCampGol(input.value);
    actualizeazaIcoanaStatus(validare, parentX);
    return validare;
}

function isCampGol(x) {
    return x === null || x === "";
}

function actualizeazaButton(idButon, valid) {
    document.getElementById(idButon).disabled = valid ? "" : "disabled";
}
Cod HTML:
<form action="#" class="formular" method="get" name="formularActiveaza">
<div>
<label>Continut gol:</label>
<input name="fNume" onkeyup="actualizeazaButton('submitActiveaza',validareInputGol(this))" type="text" />
<span class="tooltip">
<img src="resources/help.png" />
<span>Campul trebuie completat.</span>
</span>
</div>
<hr />
<input class="posteaza" disabled="true" id="submitActiveaza" type="submit" value="Notificare prin dezactivare buton" />
</form>
Codul CSS este disponibil la sectiunea: Notificare prin Schimbare CSS.

3. Schimbare CSS


Campul trebuie completat.
Cod javascript:
function validareInputGol(input) {
    var parentX = input.parentNode,
        validare = !isCampGol(input.value);
    actualizeazaIcoanaStatus(validare, parentX);
    return validare;
}

function isCampGol(x) {
    return x === null || x === "";
}

function actualizeazaIcoanaStatus(validare, componenta) {
if (validare) {
componenta.setAttribute("class", "checked");
} else {
componenta.setAttribute("class", "warning");
}
}
Cod HTML:
<form action="#" class="formular" method="get">
<div>
<label>Continut gol:</label>
<input name="fNume" onkeyup="validareInputGol(this)" type="text" />
<span class="tooltip">
<img src="resources/help.png" />
<span>Campul trebuie completat.</span>
</span>
</div>
</form>
Cod CSS:
.formular {
width:310px;
border:#999 medium solid;
border-radius:10px;
margin:5px;
padding:5px;
}

.formular label {
display:inline-block;
width:120px;
}

.formular input {
margin-bottom:5px;
}

.warning {
background-image:url(resources/alert.png);
background-repeat:no-repeat;
background-size:20px 20px;
background-position:top right;
}

.checked {
background-image:url(resources/check.png);
background-repeat:no-repeat;
background-size:20px 20px;
background-position:top right;
}

.tooltip img {
width:20px;
height: 20px;
vertical-align:middle;
}

span.tooltip span { 
z-index:10;
display:none; 
padding:14px 20px; 
margin-top:-2px; 
margin-left:5px;
line-height:16px;
}

span.tooltip:hover span{
display:inline; 
position:absolute; 
color:#111; 
border:2px solid #DCA; 
background:#fffAF0;
}

span.tooltip span { 
border-radius:7px; 
-moz-border-radius: 4px;
-webkit-border-radius: 4px; 
-moz-box-shadow: 5px 5px 8px #CCC; 
-webkit-box-shadow: 5px 5px 8px #CCC; 
box-shadow: 5px 5px 8px #CCC;
}

Nota explicativa:

Functia validareInputGol verifica daca este introdusa o valoare in input. Aceasta primeste ca parametru un input text din care va extrage valoarea. Daca valoarea este valida va returna true si icoana de notificare se va actualiza. Functia are un return pentru a putea fi folosita si in combinatie cu evenimentul "onsubmit". In exemplul de mai sus functia este atasata evenimentului "onkeyup", asta inseamna ca de fiecare data cand este introdusa o valoare prin intermediul tastaturii se va realiza validarea si icoana de notificare se va actualiza. Pentru a realiza validarea se foloseste functia isCampGol. Aceasta primeste ca parametru valoarea inputului si o compara cu null si cu "". Pentru actualizarea icoanei de notificare se foloseste functia actualizeazaIcoanaStatus. Aceasta primeste ca parametru rezultatul validarii si parintele componentei validate. Clasa folosita pentru a defini stilul componentei este schimbata in functie de rezultatul validarii. In functie de stilul setat va fi afisata o icoana de atentionare sau una de confirmare a validarii.

miercuri, 21 mai 2014

Maparea unui network drive in Windows

Pentru a mapa un drive din linia de comanda se poate folosi comanda "net use".
Sintaxa acestei comenzi pentru a mapa un drive este:
net use x: \\computer name\share name
unde:
- x: este litera drive-ului caruia vreti sa ii asignati adresa
- \\computer name este calculatorul la care vreti sa va conectati
- \share name calea catre directorul oferit

Daca este necesara autentificarea, urmatoarea comanda poate fi folosita:
net use x: \\computer name\share name /user utilizator parola
unde:
- utilizator si parola sunt credentialele pentru conectare.

Pentru a afisa lista de drive-uri conectate se poate folosi comanda "net use".
Nu sunt necesari parametri pentru aceasta comanda.
O lista va fi afisata sau daca nu sunt conexiuni "There are no entries in the list." va aparea pe ecran.
Aceasta comanda este utila in special in cazul in care conexiunile nu sunt visibile in directorul
"My computer"/"Computer". Daca exista o conexiune catre adresa dorita, dar din oarece motive nu se poate accesa sau elimina din interfata grafica, eliminarea conexiunii se poate face din linia de comanda.


De exemplu: cand se doreste maparea unui drive, dar apare eroarea 
"The local device name is already in use" se pot urma acesti pasi:
1. Se foloseste comanda "use net" pentru a depista conexiunile
2. Se ia numele conexiuni pe care vreti sa o eliminati din coloana Remote aflata in lista afisata si se
    executa comanda:
    net use numeConexiune \ delete

    numeConexiune trbuie sa aiba aceasi valoare ca si cea din coloana Remote
    in caz ca drive-ul este afisat sub coloana Local se poate executa comanda
    net use Drive: \ delete
    Drive este valoarea din coloana Remote, de exemplu poate fi "E:"

Comanda NET USE are urmatoarea sintaxa: 
NET USE [numeAparat| *] [\\numeCalculator\numeDirector[\numeResursa] [parola| *]]
        [/USER:[numeDomeniu\]numeUtilizator]

        [/SMARTCARD]
        [/SAVECRED]
        [[/DELETE] | [/PERSISTENT:{YES | NO}]]

NET USE {numeAparat| *} [parola| *] /HOME

NET USE [/PERSISTENT:{YES | NO}]

Comanda NET USE conecteaza sau deconecteaza un calculator la o resursa distribuita. Cand aceasta comanda este folosita fara parametri va lista toate conexiunile calculatorului.
numeAparat:  Asigneaza un numele aparatului la care se va face conexiunea sau termina
                       conexiunea catre aparatul cu acest nume. Tipurile de aparate sunt: disk drive, mapate
                       de la D: la Z: si imprimantele mapate de la LPT1 la LPT3. Se poate folosi asteriscul
                       pentru a se a face asignarea la urmatorul nume disponibil
\\
numeCalculator: Este numele calculatorului care controleaza resursa distribuita. Daca numele
                              contine spatii, atunci liniile oblice (\\) si  numele calculatorului trebuie trebuie
                              puse intre ghilimele (" "). Lungimea numelui calculatorului poate fi de minim
                              un caracter si de maxim 15.
\numeResursa: Este numele resursei distribuite.
parola: Este parola necesara pentru a accesa resursa distribuita.
* Daca este folosit asteriscul, atunci parola va fi ceruta in linia de comanda.
/USER: Specifica utilizator, diferit fata de cel conectat, cu care se va face conexiunea. Specifica

              domeniu diferit. Daca domeniul este omis atunci va fi folosit domeniul curent.
numeDomeniu: Specifica un domeniu diferit. Dac acesta este omis cel curent este folosit.
numeUtilizator: Specifica numele de utilizator cu care se va realiza conexiunea.
/SAVECRED: Credentialele se vor salva daca acestea vor fi oferite din linia de comanda.

/HOME: Conecteaza un utilizator la directorul asignat acestuia.
/DELETE: Inchide conexiunea si o scoate din lista persistenta de conexiuni.

/PERSISTENT: Controleaza persistenta conexiunilor. Valoarea implicita este ultima folosita.
YES: Salveaza conexiunile la creare si face reconectarea la urmatoarea pornire.

NO: Conexiunile nou create nu sunt salvate. Nu afecteaza conexiunile curente.

duminică, 12 ianuarie 2014

Cum sa folosesti JavaScript intr-un fisier HTML

Fii sociabil. Voteaza si comenteaza!


Urmatorul snippet poate adauga un fisier .js extern :
<script src="scriptulMeu.js"></script>
JavaScript este un limbaj orientat obiect de scriptare simplu, interpretat si crossplatform. Scripturile acestui limbaj pot fi folosite intr-un navigator WEB pentru alterarea continutului unei pagini HTML, interactiunea cu utilizatorul, comunicare asincrona sau controlarea navigatorului.
Cateva actiuni ce se pot executa cu JavaScript sunt:
  • modificarea dinamica a paginilor WEB
  • afisarea unor mesaje in pagina HTML sau intr-un dialog separat
  • realizarea de calcule matematice
  • validarea de formulare
  • identificarea navigatorului WEB
Tagul <script> este folosit pentru introducerea de cod JavaScript intr-o pagina HTML.

Codul poate fi:
  1. intern: 
    • continutul scriptului se afla in pagina HTML
    • codul va fi scris intre <script> si </script>sau va fi atasat pe evenimentul unui obiect HTML
    • tagul <script> va fi introdus in <head> sau <body>
    • in general functiile JavaScript sunt grupate in tagul <head> sau la sfarsitul continutului tagului <body>
  2. extern:
    • continutul scriptului se afla intr-un fisier cu extensia .js
    • Exemplu: <script src="scriptulMeu.js"></script>
    • acesta se va comporta la fel ca si cum codul ar fi scris in interiorul paginii WEB

Codul poate fi executat:
  1. cand parsarea continutului ajunge la codul JavaScript. Exemplu: generare de continut dinamic
  2. ca reactie la anumite evenimente:
    • codul JavaScript trebuie atasat la evenimentele unui obiect HTML
    • Exemplu sintaxa: 
      • <button onClick="alert('Afiseaza JavaScript');">Executa JavaScript</button>
      • Codul genereaza un buton cu textul "Executa JavaScript". Pe evenimentul de click al butonului un dialog cu textul "Afiseaza JavaScript" va fi afisat.
Exemple:
1. Cod JavaScript inserat in interiorul tagului head 2. Cod JavaScript inserat in interiorul tagului body 3. Cod JavaScript in interiorul unui fisier extern Tagul script poate fi inserat in body sau head (la fel ca in exemplele unde codul se afla in fisierul HTML).

4. Cod JavaScript apelat cu ajutorul unui eveniment: Exemplul de mai sus contine o pagina HTML cu un button. La evenimentul de click pe acest buton s-a atasat functia scrieRand din fisierul extern scriptulMeu.js . De fiecare data cand se va apasa butonul, se va adauga un rand nou.