Ferestre Alert, Prompt si Confirm

1. Fereastra Alert
Probabil ati intalnit pana acum, de mai multe ori exemple cu "Alert". Fiind un element simplu si deja cunoscut, voi face o scurta prezentare a sintaxei acestuia. Crearea ferestrelor alert se face cu sintaxa: window.alert("mesaj") - Unde "mesaj" este textul care va apare in fereastra Alert. Urmatorul exemplu deschide o fereastra cu mesajul "Bine ai venit".

1. Fereastra Alert

2. Fereastra Prompt
Fereastra Prompt se creaza cu sintaxa: window.prompt("mesaj", "default") - Unde "mesaj" este un text care va apare in fereastra, deasupra unei casute de text input; iar "default" este textul care va apare in casuta input. Urmatorul exemplu deschide o fereastra "Prompt".

2. Fereastra Prompt

2. Fereastra Prompt
Textul pe care utilizatorul il adauga in campul din fereastra prompt poate fi preluat intr-o variabila si folosit apoi in script. Iata un exemplu in care atribuim deschiderea ferestrei Prompt unei variabile (aici "nume"), care va prelua sirul adaugat in caseta de text, apoi valoarea acestei variabile o introducem in mesajul unei ferestre Alert:

2. Fereastra Prompt

2. Fereastra Prompt
- Dupa ce utilizatorul scrie numele in fereastra Prompt si apasa OK se va deschide o fereastra Alert care contine in mesaj numele adaugat de utilizator. - Am folosit "\n" pentru a adauga o linie noua, dupa "nume", in textul care apare in fereastra Alert. - Incercati si singuri acest exemplu.

3. Fereastra Confirm
Fereastra de confirmare se creaza cu sintaxa: window.confirm("intrebare") In fereastra de confirmare va apare textul "intrebare" si doua butoane "OK" si "Cancel". Aceasta fereastra este folosita pentru a fi executata o comanda cand este apasat butonul "OK" (returneaza TRUE) si alta comanda cand este apasat butonul "Cancel" (returneaza FALSE) Urmatorul exemplu deschide o fereastra "Confirm" in care apare intrebarea "Rezultatul lui 0+0 este 0?". Daca este apasat butonul "OK" apare o fereastra Alert cu mesajul "Corect", iar daca este apasat butonul "Cancel" apare o fereastra Alert cu mesajul "Incorect"

3. Fereastra Confirm

Instructiuni complementare
1. Instructiunile break si continue Cand este folosita o instructiune ciclica, aceasta continua sa se repete pana cand conditia este FALSE. Aceasta excutie poate fi schimbata cu ajutorul instructiunilor break si continue, care dau posibilitatea intreruperii ciclului sau iesirea din acesta inainte de a se ajunge la sfarsit (la ultima acolada). break - intrerupe definitiv executarea ciclului. Iata un exemplu din care puteti intelege modul de lucru a lui break:

Instructiuni complementare

Instructiuni complementare
Acest script va afisa urmatorul rezultat: X este 1 X este 2 X este 3 - Dupa cum puteti observa, nu au fost executate toate ciclurile instructiunii "for", conform conditiei (pana cand 'x' ar fi avut valoarea 10), executia se intrerupe cand 'x' are valoarea 3. continue - intrerupe executia repetarii curente, inainte de a fi executate celelalte operatii din ciclu, apoi se verifica din nou conditia si se continua cu executarea ciclului. Studiati si urmatorul exemplu, in care este folosit continue:

Instructiuni complementare

Functii - 1
Functiile ajuta la divizarea mai multor sarcini pe care trebuie sa le faca un program. O functie poate contine mai multe instructiuni si comenzi care ulterior pot fi utilizate usor si de mai multe ori prin apelarea functiei care le contine. Daca un program necesita multe linii de cod, folosind functiile putem imparti codul in parti mai mici pe care le putem utiliza separat acolo unde este nevoie. Pot fi doua feluri de functii: predefinite - cum sunt de exemplu: "parseInt(string)", "parseFloat(string)", ... Create de programator - care returneaza o valoare - care nu returneaza o valoare

1. Crearea (definirea) functiilor

O functie se defineste la inceputul fisierului, in sectiunea head si poate fi folosita in cadrul paginii prin apelarea ei. Scriptul care contine definirea unei functii se adauga in sectiunea "head" pentru a fi siguri ca aceasta a fost incarcata inainte de a fi apelata. Pentru crearea unei functii se foloseste cuvantul function urmat de numele pe care vrem sa-l dam functiei dupa care putem adauga intre paranteze rotunde argumentele (numite si atribute) functiei (separate prin virgula daca sunt mai multe) si intre acolade corpul functiei care contine codul care trebuie executat. Forma generala a unei functii este urmatoarea: function nume_functie(argument1, argument, ...) { codul care va fi executat } Argumentele sunt variabile folosite de functie si a caror valoare este preluata la apelarea functiei. Atributele nu sun obligatorii, o functie poate fi definita si fara argumente, dar se pastreaza parantezele rotunde, astfel sintaxa unei functii fara argumente este urmatoarea: function nume_functie() { codul care va fi executat }

2. Instructiunea return
O functie care returneaza un rezultat foloseste pentru aceasta instructiunea return. Aceasta specifica valoarea pe care o returneaza functia cand este apelata. Iata un exemplu din care pouteti intelege modul de aplicare a instructiunii return: function suma(x, y) { z = x+y; return z } - "suma" reprezinta numele functiei (puteti da orice nume care respecta regulile limbajuli si nu sunt identice cu cele rezervate, cum ar fi "function"), "x, y" reprezinta argumentele functiei a caror valoare este data cand functia este apelata. Intre acolade avem codul care trebuie executat si care, prin instructiunea "return" va returna valoarea lui "z" care reprezinta suma lui "x" si "y". Astfel valoarea returnata de functia "suma()" va fi valoarea pe care o are "z".

3. Apelarea functiilor
Dupa ce am creat o functie, pentru a fi folosita, fuctia trebuie apelata. - O functie care contine argumente se apeleaza in felul urmator: nume_functie(argument1, argument, ...) - O functie fara argumente se apeleaza in felul urmator: nume_functie() Observati ca la apelul functiei nu se mai folosesc cuvantul "function" si acoladele In locul in care am apelat astfel o functie va fi executat corpul acelei functii.

4. Exemple de scripturi cu functii

4. Exemple de scripturi cu functii

Modificarea numarului argumentelor

Cand creem o functie ii definim si numarul de argumente pe care le accepta, lucru de care se tine cont in momentul apelarii ei. Sunt situatii in care dorim sa transmitem functiei un numar diferit de argumente, care poate fi mai mic sau mai mare decat numarul de argumente pe care le are functia la construirea ei. Intr-o astfel de situatie putem folosi o valoare prestabilita in interiorul functiei, pentru cazul in care nu sunt transferate argumente. In continuare va fi prezentat un script care afiseaza un mesaj de salut atunci cand utilizatorul ajunge la o pagina web. Programul afiseaza un anumit mesaj daca recunoaste sau nu numele vizitatorului. Daca "utilizator" nu este "null" variabila a fost definita. Acest lucru este posibil doar daca o valoare, ca " Media", este transferata functiei. Daca variabila "utilizator" este egal cu "null" atunci scriptul evita folosirea variabilei in mesajul de salut.

Modificarea numarului argumentelor

Obiectele Java Script - 1

Pentru inceput trebuie sa stiti ce sunt obiectele in programare si care sunt conceptele fundamentale ale programarii orientate spre obiecte (OOP). JavaScript nu este un program orientat pe obiecte (OO), cum sunt C++ sau Java, dar este bazat pe obiecte. In lumea din jurul nostru obiectele sunt de exemplu: o carte, o masina, un televizor; in JavaScript obiectele sunt de exemplu: un formular, o fereastra, butoane, imagini ... Toate elementele dintr-o pagina sunt vazute de JavaScript ca fiind obiecte. Obiectele au anumite proprietati, de exemplu in lumea reala televizoarele au butoane, masinile au roti; asa si in JavaScript obiectele au proprietati: formularele au buton, ferestrele au titluri. Pe langa obiecte si proprietati, in JavaScript avem si termenul "metode". Metodele reprezinta functiile pe care un obiect poate sa le faca. Ferestrele se deschid cu metoda "open()", butoanele au metoda "click()". Parantezele rotunde "()" arata ca se face referire la o metoda, nu la o proprietate. Astfel, putem rezuma ca un obiect este o colectie de proprietati si functii (metode) Sintaxa pentru folosirea obiectelor este: obiect.prorietate obiect.metoda() - Punctul (.) se foloseste pentru a specifica detinatorul metodei sau proprietatii. Obiectele din JavaScript le putem cataloga in trei categorii principale: - Obiecte pe partea de client - Obiecte pe partea de server - Obiecte esentiale Astfel avem mai multe tipuri de obiecte care pot fi folosite, pentru incepatori e bine de stiut in principal obiectele pe partea de client si cele esentiale, cum sunt: "string", "math" sau cele care vin de la etichetele HTML. Mai multe astfel de obiecte pot forma o celula (o grupa) numita "clasa", astfel, diferite obiecte incorporate pentru o executie comuna formeaza un "set de clase" care se mai numeste si "biblioteca de clase", iar mai exact pentru limbajul JavaScript "biblioteca de obiecte JavaScript", si pot fi refolosite. JavaScript are urmatoarele obiecte esentiale, predefinite:

Obiectele Java Script - 1

1 - String 2 - Math 3 - Date 4 - Array 5 Global

1. Obiectul string
String (sau sir) se foloseste pentru a prelua text. Proprietatea acestui obiect este: length - returneaza numarul de caractere dintr-un sir (string) Metodele obiectului string sunt urmatoarele: anchor() - Returneaza un sir ca si "anchor" big() - Returneaza un sir cu text mare blink() - Returneaza un sir care clipeste bold() - Returneaza un sir cu litere ingrosate charAt() - Returneaza un caracter de la pozitia care este specificata charCodeAt() - Returneaza codul ASCII al unui caracter de la o pozitie specificata concat() - Returneaza doua siruri concatenate fixed() - Returneaza un sir cu caractere tip fontcolor() - Returneaza un sir cu o culoare specificata fontsize() - Returneaza un sir cu litere de o anume marime fromCharCode() - Returneaza valoare Unicode a unui caracater indexOf() - Returneaza pozitia primei aparitii a unui subsir in un sir, sau daca subsirul nu e gasit, valoarea -1 italics() - Returneaza un sir in italic (scris aplecat)

Obiectele Java Script - 1

lastIndexOf() - Returneaza pozitia primei aparitii a unui subsir in un sir, sau daca acesta nu e gasit, -1 (Importanr: se incepe din dreapta sirului spre stanga) link() - Returneaza un sir ca hyperlink match() - Similar cu indexOf si lastIndexOf, dar aceasta metoda returneaza sirul specificat sir, sau "null", in locul unor valori numerice replace() - Inlocuieste intr-un sir unele caractere specificate cu altele noi specificate. search() - Returneaza un numar intreg daca sirul contine caracterele specificate, altfel returneaza -1 slice() - Returneaza un sir incepand de la pozitia index specificata small() - Returneaza un sir cu caractere mai mici split() - Imparte un sir in mai multe siruri, in functie de caracterele specificate strike() - Returneaza un sir taiat cu o linie la mijloc sub() - Returneaza un sir ca indice substr() - Returneaza un subsir specificat astfel, exemplu: 12,8 returneaza 8 caractere, incepand de la caracterul al 12-lea (se incepe de la 0) substring() - Returneaza un subsir specificat astfel, exemplu: 8,12 returneaza toate caracterele, incepand de la caracterul al 8-lea, pana la al 12-lea sup() - Returneaza un sir ca putere (superscript) toFixed(n) - Returneaza sirul numeric rotunjindu-l la o valoare cu 'n' zecimale toLowerCase() - Converteste un sir in litere mici toUpperCase() - Converteste un sir in litere mari

Obiectele Java Script - 1

In continuare este prezentat un exemplu in care se foloseste proprietatea "length" pentru a afla cate elemente are un sir si metoda "indexOf" prin care verificam daca un sir dat contine un anumit cuvant specificat. Daca este gasit cuvantul, se returneaza pozitia primei litere din el, in caz contrar apare mesajul "Cuvantul nu a fost gasit"

Obiectele Java Script - 1

Obiectul Array (tablou sau matrice)

Obiectul Array (numit si matrice sau tablou de date) se foloseste pentru a stoca mai multe valori intr-un singur nume de variabila. Fiecare valoare stocata devine un element al tabloului, acesta are asociat un "numar index" (sau cheie). Cu ajutorul acestei chei se poate face referire la oricare element din tablou. Cu operatorul new se poate crea o "instanta" (incepere) a obiectului Array, ca in exemplul urmator: var nume_colegi = new Array(4) - Unde intre parantezele rotunde este trecut numarul de elemente ale tabloului, aici 4. Numarul de elemente, cheile, incep implicit de la 0. Pentru a da valori elementelor din tablou, se scrie numele tabloului urmat de o pereche de paranteze patrate, in interiorul carora se adauga cheia specifica fiecarui element, apoi semnul egal si valoarea dorita. Dupa cum puteti vedea in urmatorul exemplu: nume_colegi[0] = "Cristi" nume_colegi[1] = "Ion" nume_colegi[2] = "Simona" nume_colegi[3] = "Adi" Sau puteti scrie si astfel: var nume_colegi = Array('Cristi', 'Ion', 'Simona', 'Adi'); - In cazul acesta cheile se subanteleg si sunt aceleasi ca in prima varianta, incepand cu 0. Pentru a face referire la un anumit element din tablou si pentru a extrage anumite valori din Array, se scrie numele tabloului si intre parantezele patrate cheia specifica acelui element; ca in exemplul urmator: coleg = nume_colegi[0] colega = nume_colegi[2] Astfel, variabila "coleg" va avea valoarea "Cristi" si variabila "colega" valoarea "Simona". Pentru a afla numarul de elemente ale unui Array, se foloseste proprietatea "length", ca in exemplu urmator: nr_colegi = nume_colegi.length

Obiectul Array (tablou sau matrice)

Obiectul Array are urmatoarele metode: concat() - Returneaza un tablou rezultat din concatenarea a doua tablouri join() - Returneaza un tablou format din toate elementele unui tablou concatenat reverse() - Returneaza inversul unui tablou slice() - Returneaza o parte specificata a unui tablou sort() - Returneaza tabloul ordonat Urmatorul exemplu foloseste o instructiune "for" care parcurge un tablou (aici tabloul "nume_colegi"), extrage valoarea fiecarui element si o afiseaza.

Obiectul Array (tablou sau matrice)

Obiectul Array (tablou sau matrice)

Iata un alt exemplu din care puteti intelege cum se aplica metoda "sort()" si efectul acesteia. Folosim acelasi exemplu de mai sus.