Obiecte JavaScript 2

Curs Javascript

In aceasta lectie este continuata prezentarea si explicarea obiectelor esentiale JavaScript

1. Obiectul Date

Obiectul Date se foloseste pentru a lucra cu data zilei si timp.
Sunt doua lucruri importante pe care trebuie sa le cunoasteti inainte de a folosi acest obiect:

• 1. Data initiala (de referinta) este 1-01-1970, nu puteti sa lucrati cu date anterioare acesteia.
• 2. Cand creati un obiect "Date", ora folosita de obiect este aceea de pe calculatorul client (al vizitatorului).

Pentru a crea o instanta a obiectului "Date" se foloseste operatorul new, ca in exemplu urmator:

• var data = new Date();

- Astfel se memoreaza data curenta intr-o variabila, aici cu numele "data".
Dupa ce a fost creata instanta, se pot folosi metodele obiectului.
De exemplu, daca se doreste afisat numarul zilei (care e de la 1 la 31) se scrie urmatoarea comanda (aici e folosita instanta cu numele "data"):

• data.getDate()

Se pot crea si altfel obiecte Date, care pot afisa data si ora intr-un mod specificat:

• new Date("Month dd, yyyy hh:mm:ss")
  new Date("Month dd, yyyy")
  new Date(yy,mm,dd,hh,mm,ss)
  new Date(yy,mm,dd)
  new Date(milliseconds)

- Unde: Month=luna, dd=ziua (cu 2 caractere), y=anul (yy e afisat cu 2 caractere iar yyyy cu 4), h=ora, m=minute, s=secunde, milliseconds=milisecunde.
Astfel se pot crea variabile de data pt. fiecare obiect Date de mai sus, ca in exemplu urmator:

• var data=new Date("October 15, 1996 15:16:00")
  var data=new Date("October 15, 1996")
  var data=new Date(96,10,15,15,16,00)
  var data=new Date(96,10,15)
  var data=new Date(500)

- Metodele obiectului Date:

• Date() - Returneaza un obiect Date
• getDate() - Returneaza data (ziua) din luna (intre 1-31)
• getDay() - Returneaza ziua dintr-un obiect Date (intre 0-6; 0=Duminica, 1=Luni, etc.)
• getMonth() - Returneaza luna dintr-un obiect Date (intre 0-11. 0=January, 1=February, etc.)
• getFullYear() - Returneaza anul dintr-un obiect Date (patru cifre)
• getHours() - Returneaza ora dintr-un obiect Date (intre 0-23)
• getMinutes() - Returneaza minutele dintr-un obiect Date (intre 0-59)
• getSeconds() - Returneaza secunda dintr-un obiect Date (intre 0-59)
• getMilliseconds() - Returneaza milisecunda dintr-un obiect Date (intre 0-999)
• getTime() - Returneaza numarul de milisecunde pana la miezul noptii
• getTimezoneOffset() - Returneaza diferenta de timp intre computer si GMT
• getUTCDate() - Returneaza data dintr-un obiect Date in (UTC) timp universal
• getUTCDay() - Returneaza ziua dintr-un obiect Date in timp universal
• getUTCMonth() - Returneaza luna dintr-un obiect Date in timp universal
• getUTCFullYear() - Returneaza anul (4 cifre) dintr-un obiect Date in timp universal
• getUTCHours() - Returneaza ora dintr-un obiect Date in timp universal
• getUTCMinutes() - Returneaza minutele dintr-un obiect Date in timp universal
• getUTCSeconds() - Returneaza secundele dintr-un obiect Date in timp universal
• getUTCMilliseconds() - Returneaza millisecundele dintr-un obiect Date in timp universal
• parse() - Returneaza un sir ce are ca valoare numarul de millisecunde pana in January 01 1970 00:00:00
• setDate() - Seteaza luna in un Obiect Date (intre 1-31)
• setFullYear() - Seteaza anul in un Obiect Date (four digits)
• setHours() - Seteaza ora in un Obiect Date (intre 0-23)
• setMilliseconds() - Seteaza millisecundele in un Obiect Date (intre 0-999)
• setMinutes() - Seteaza minutele in un Obiect Date (intre 0-59)
• setMonth() - Seteaza luna in un Obiect Date (intre 0-11. 0=January, 1=February)
• setSeconds() - Seteaza secunda in un Obiect Date (intre 0-59)
• setTime() - Seteaza millisecundele dupa 1/1-1970
• setUTCDate() - Seteaza data in un Obiect Date, in timp universal (intre 1-31)
• setUTCMonth() - Seteaza luna in un Obiect Date, in timp universal (intre 0-11. 0=January, 1=February)
• setUTCFullYear() - Seteaza anul in un Obiect Date, in timp universal (four digits)
• setUTCHour() - Seteaza ora in un Obiect Date, in timp universal (intre 0-23)
• setUTCMinutes() - Seteaza minutele in un Obiect Date, in timp universal (intre 0-59)
• setUTCSeconds() - Seteaza secundele in un Obiect Date, in timp universal (intre 0-59)
• setUTCMilliseconds() - Seteaza millisecundele in un Obiect Date, in timp universal (intre 0-999)
• toLocaleString() - Converteste un Obiect Date la un sir, ce contine ora curenta
• toString() - Converteste un Obiect Date la un sir

Pentru a intelege mai bine obiectul Date si modul de lucru cu metodele lui, studiati si urmatorul exemplu:

<script type="text/javascript">
<!--
var d = new Date()
document.write("Afiseaza data curenta a zilei: <br /> ")
document.write(d.getDate())
document.write(".")
document.write(d.getMonth() + 1)
document.write(".")
document.write(d.getFullYear())
//-->
</script>

Adaugat intr-un document HTML, in sectiunea BODY, acest script va afisa:

2. Obiectul Math

Acest obiect include constante matematice si functii.
Nu este nevoie sa fie creat (instantat) un obiect Math inainte de a fi folosit.
Daca, de exemplu dorim sa obtinem un numar aleator intre 0 si 1, scriem comanda:

• nr_aleator = Math.random()

- Proprietatile obiectului Math (sunt o lista de constante matematice. Atentie! se scriu cu litera mare):

• E - Returneaza constanta lui Euler (2.7182.......)
• LN2 - Returneaza logaritm natural din 2
• LN10 - Returneaza logaritm natural din 10
• LOG2E - Returneaza logaritm in baza 2 din E
• LOG10E - Returneaza logaritm in baza10 din E
• PI - Returneaza PI
• SQRT1_2 - Returneaza radical din 0.5
• SQRT2 - Returneaza radical din 2

- Metodele obiectului Math:

• abs(x) - Returneaza valoarea absoluta din x
• acos(x) - Returneaza arccosinus din x
• asin(x) - Returneaza arcsinus din x
• atan(x) - Returneaza arctangenta din x
• atan2(y,x) - Returneaza unghiul dintre axa si un punct (x,y)
• ceil(x) - Returneaza cel mai apropiat intreg mai mare sau egal cu x
• cos(x) - Returneaza cosinus din x
• exp(x) - Returneaza valoarea lui E la puterea x
• floor(x) - Returneaza cel mai apropiat intreg mai mic sau egal cu x
• log(x) - Returneaza log natural din x
• max(x,y) - Returneaza maximul dintre x si y
• min(x,y) - Returneaza minimul dintre x si y
• pow(x,y) - Returneaza valoare a lui x la puterea y
• random() - Returneaza un numar aleator intre 0 si 1
• round(x) - Rotunjeste pe x la cel mai apropiat intreg
• sin(x) - Returneaza sinus din x
• sqrt(x) - Returneaza radical din x
• tan(x) - Returneaza tangenta din x

Iata si un exemplu practic, urmatorul script rotunjeste o valoare (aici 8.35) la cel mai apropiat intreg:

<script type="text/javascript">
    document.write("8.35 rotunjit este: " + Math.round(8.35));
</script>

Dupa ce este adaugat intr-un document HTML, in sectiunea BODY, acest script va afisa:

8.35 rotunjit este: 8

Obiecte de tip Global

Obiectele de tip Global grupeaza proprietatile si metodele de nivel cel mai inalt, fara un obiect parinte, cum sunt functiile.
Obiectul Global are trei proprietati:

• Infinity - cuvant-cheie care reprezinta plus sau minus infinit
• NaN - reprezinta un obiect null, care nu are vreo valoare
• undefined - Indica daca o variabila a fost sau nu definita

Metodele acestui obiect (care pot fi considerate si functii JavaScript) sunt:

• escape() - Intoarce un obiect sir in care toate caracterele non alfa-numerice sunt transformate in echivalentele lor numerice
• eval() - Accepta un sir de instructiuni Java Script si il evalueaza ca fiind cod sursa
• isFinite() - determina daca o variabila are limite finite
• isNaN() - determina daca o variabila este sau nu un numar.
• Number() - Converteste valoarea unui obiect in numar
• parseFloat() - transforma un sir intr-un numar de tip float (cu virgula)
• parseInt() - transforma un sir intr-un numar intreg
• string() - Converteste valoarea unui obiect in string (de tip sir)
• unescape() - ia o valoare hexazecimala si intoarce echivalentul sau in ISOLatin-1 ASCII

Pentru a intelege mai bine, studiati urmatorul exemplu. Aici este folosita de doua ori metoda "eval()", acesta transforma si interpreteaza argumentul primit in cod JavaScript.

<script type="text/javascript">
function calculeaza(form) {
  form.rezultat.value = eval(form.expresie.value);
}
eval("alert('Bine ati venit pe site!')");
</script>
<form>
  <p>Introduceti o expresie matematica (adunare, scadere, inmultire, impartire), de exemplu (7*8 sau 3+8/2): </p>
  <input type="text" name="expresie" size="35" >
  <input type="button" name="calc" value="Calculare" onclick="calculeaza(this.form)">
  <br>
  Rezultatul este:
  <input type="text" name="rezultat" size="18">
</form>

Acest cod afiseaza la inceput o fereastra Alert apoi in browser va fi afisat urmatorul rezultat:

Introduceti o expresie matematica (adunare, scadere, inmultire, impartire), de exemplu (7*8 sau 3+8/2):

Rezultatul este:

Dupa apasarea butonului "Calculare", prin "onclick" este accestata functia "calculeaza()". Scriptul JavaScript din HEAD, transfera in campul cu nmele "rezultat", din FORM, valoarea obtinuta prin evaluarea expresiei adaugate in campul "expresie", calcularea expresiei fiind posibila datorita folosirii metodei "eval()".

<div style="width: 80%; border: 3px solid #888888;">Continut</div>

#un_id {
  transform: skew(20deg, 25deg);
  -ms-transform: skew(20deg, 25deg);   /* IE 9 */
  -webkit-transform: skew(20deg, 25deg);   /* Safari and Chrome */
}

var rightnow = new Date();
alert( rightnow.toString() );

$arr = arra("abc", "<p>xyz</p>", "<em>PHP</em>");
// aplica functia strip_tags() ca sa stearga tag-urile HTML din fiecare element din %arr
$arr = array_map("strip_tags", $arr);
}

On Saturday I visit my grandparents.
- Sambata imi vizitez bunicii.

Sábado visito mis abuelos.
- Sambata imi vizitez bunicii.