Curs Javascript


Toate elementele dintr-o pagina sunt vazute de JavaScript ca fiind obiecte.
Obiectele sunt structuri compacte de date care pot sa contina mai multe proprietati si functii (denumite Metode).
Apelarea proprietatilor si metodelor unui obiect se face cu operatorul punct (.)

- Sintaxa:
obiect.prorietate

obiect.metoda()

Obiectul string

String (sau sir) e obiectul care contine text adaugat intre ghilimele simple sau duble.
Un obiect de tip String se poate crea folosind ghilimele sau cu instructiunea new String().

- Sintaxa:
//definire String cu new
var str = new String('text..');

//definire String direct cu ghilimele
var str ='Text..';

//sau
var str ="Text..";
• In general se folosesc direct ghilimele, iar toate valorile incadrate intre ghilimele sunt vazute in JavaScript ca 'String' si pot folosi proprietatile si metodele obiectului String.

Utilizare Proprietate si Metode ale obiectului String

Obiectul String are o singura proprietate: length, aceasta contine numarul de caractere din sir.

let str ='Tutorial JS';
let nr_chr = str.length; // 11
Se poate citi orice caracter din sir folosind numarul de ordine (indexul) care incepe de la 0. Primul caracter are index 0 (str[0]), al doilea are index 1 (str[1]), etc.

- Exemplu, se afiseaza intr-un element HTML numarul de caractere dintr-un sir, si al treilea caracter.
<div id='dv1'>HTML coontent.</div>

<script>
let str ='some_str';

//afiseaza in #dv1 numarul de caractere din 'str' si al treilea caracter
document.getElementById('dv1').innerHTML ='Sirul "some_str" are '+ str.length +' caractere; al treilea e: '+ str[2];
</script>

Utilizare Metode

Obiectul String contine numeroase metode care pot fi utile in lucru cu siruri. O lista cu metode pentru siruri gasiti la pagina: Metode ale obiectului String in JS.
- Iata exemple cu unele din cele mai folosite metode pentru siruri.

Exemplu cu indexOf()

Metoda indexOf() e utila pentru a verifica daca un sir contine un anumit subsir.
Aceasta returneaza pozitia primei aparitii a unui subsir intr-un sir, sau valoarea -1 daca subsirul nu e gasit.
- Exemplu, daca sirul de la variabila 'str' contine cuvantul 'spirit', afiseaza indexul de inceput a subsirului.
<div id='dv1'>Exemplu cu indexOf().</div>

<script>
let str ='In spiritul libertatii.';

//daca str contine 'spirit', adauga indexul de inceput in #dv1
var ix = str.indexOf('spirit');
if(ix !=-1){
 document.getElementById('dv1').innerHTML ='Cuvantul "spirit" incepe de la index: '+ ix;
}
</script>

Exemplu cu match()

Metoda match() e utila pentru a compara un sir cu o expresie regulata (RegExp). Returneaza un array cu elementele din sir care se potrivesc cu expresia regulata, sau 'null'.
- Exemplu, se verifica daca un sir e o adresa valida de email si preia numele din adresa.
<div id='dv1'>Exemplu JavaScript cu match().</div>

<script>
const email ='some_name@domain.net';

//is_em e un array de forma ['email', 'nume', 'domeniu'] sau null
var is_em = email.match(/^([A-z0-9]+[A-z0-9._%-]*)@([A-z0-9_\-\.]+\.[A-z]{2,5})$/i);

//daca la email e o adresa valida de email, adauga in #dv1 numele din adresa
if(is_em){
 document.getElementById('dv1').innerHTML ='Numele din adresa "'+email+'" este: '+ is_em[1];
}
</script>

Inlantuire Metode

Se pot aplica mai multe metode (inlantuite) la un sir, in aceeasi linie de cod.
str.metoda1().metoda2()

- Exemplu cu replace() si trim().
Metoda replace() inlocuieste intr-un sir unele caractere specificate (sau expresie RegExp) cu altele noi specificate.
Metoda trim() sterge spatiile goale de la inceputul si sfarsitul unui sir.


In urmatorul exemplu se inlocuiesc intr-un sir cu cod HTML caracterele '<' si '>' cu echivalentele pentru afisare in HTML, si se adauga sirul rezultat intr-un element HTML.
<div id='dv1'>Exemplu JavaScript cu metode inlantuite.</div>

<script>
let htm ='<h3>Astazi e o zi Fericita</h3>';

//inlocuieste < si > din htm cu entitatile html, aplica trim() si adauga sirul in #dv1
htm = htm.replace(/</ig, '&lt;').replace(/>/ig, '&gt;').trim();
document.getElementById('dv1').innerHTML = htm;
</script>

Adaugare ghilimele si caractere speciale in sir

La adaugarea de ghilimele in textul dintr-un String se tine cont de ghilimelele de inceput (prin care e definit sirul).
Ghilimelele duble se pot adauga normal intr-un sir definit cu ghilimele simple (si invers).
- Sintaxa:
var str ='Un text cu "ghilimele" duble';

var str ="Un text cu 'ghilimele' simple";

Acelasi tip de ghilimele cu cele folosite la definirea sirului se pot adauga doar escapate (precedate de '\').
- Sintaxa:
var str ='Un text cu \'ghilimele simple\' ca cele la definire';

var str ="Alt text cu \"ghilimele duble\", ca si cele de definire";

In afara de ghilimele sunt si alte caractere speciale care trebuie escapate cand se folosesc in sir.
Iata o lista cu aceste caractere:
- Exemplu, se adauga intr-un tag <pre> un sir cu mai multe linii, care contine ghilimele si backslash.
<pre id='pr1'>HTML content, object string.</pre>

<script>
let str ='Sir definit intre \'ghilimele simple\', \n adaugate cu backslash \\, \n dar contine si "ghilimele duble".';
document.getElementById('pr1').innerHTML = str;
</script>

Sir Template

Sirul Template se adauga intre caracterele de accent ( `...` ).
Acest tip de String permite crearea de siruri cu linii noi adaugate normal (fara \n) si redarea de expresii de cod JavaScript care sunt executate direct in el.
- Sintaxa:
var tmp =`string text line 1
 Line 2 si ${js_expression} expresie de cod.`;
- js_expression poate fi o variabila JavaScript, apelarea unei functii sau o expresie JS cu valori. Acestea se adauga intre: ${} si sunt executate ca orice cod JavaScript.

Exemplu, un sir ce contine mai multe linii si cod html cu continut dinamic.
<pre id='pr1'>Template string, HTML content</pre>

<script>
//se definesc variabile si o functie (arrow) care vor fi utilizate in sirul template
let str_st ='Sir Template';
let arr =[8, 0];
const sumXY =(x, y)=>(x+y);

//sirul template
var tmp =`<h3>Acesta e ${str_st} din JavaScript</h3>
Apelare functie sumXY(): suma 7+8 = ${sumXY(7,8)}
Si o linie cu <strong>expresie JS, 8*0 = ${arr[0] * arr[1]}</strong>.`;

//adauga sirur rezultat in #pr1
document.getElementById('pr1').innerHTML = tmp;
</script>

In interiorul unui sir template, caracterul accent prin care e definit se poate adauga escapat (\`).

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce atribut face un buton radio sau checkbox sa fie selectat?
checked="checked" selected="selected" disabled="disabled"
<input type="checkbox" name="a_name" value="value" checked="checked" />
Ce valoare CSS redimensioneaza imaginea de fundal pana la marimea elementului?
repeat-x contain linear-gradient
#id {
  background:url("path_to_image.png");
  background-size:contain;
  background-repeat:no-repeat;
}
Ce operator se foloseste pentru restul impartirii a doua numere?
% * /
var rest8_7 = 8 % 7;
alert(rest8_7);
Indicati functia PHP care rotunjeste numarul la valoarea intreaga mare.
floor() ceil() abs()
$nr = ceil(3.5);
echo $nr;        // 4
Indicati articolul corect la cuvantul "bike" in propozitia: "Alex wants to buy ... bike".
An The A
Alex wants to buy a bike.
- Alex vrea sa cumpere o bicicleta.
Indicati articolul nedefinit corect pentru cuvantul: "libros" (carti)
unos una un
LeĆ­ unos libros.
- Am citit niste carti.
Obiectul String - Sir

Last accessed pages

  1. Despre Iertare si Prezent (227)
  2. Base64 codificare decodare (737)
  3. Puterea Prezentului (532)
  4. Subjunctiv - Ignoranta indoiala (850)
  5. Subjunctiv - Dorinta (993)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (70)
  2. Coduri pt culori (28)
  3. Gramatica limbii engleze - Prezentare Generala (27)
  4. Curs HTML gratuit Tutoriale HTML5 (25)
  5. Creare si editare pagini HTML (23)
Chat
Discuta sau lasa un mesaj pt. ceilalti utilizatori
Full screenInchide