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
Care meta tag se foloseste pentru scurta descriere a paginii?
<meta content="..."> <meta description="..."> <meta http-equiv="...">
<meta name="description" content="70-160 caractere ce descriu continutul paginii" />
Ce proprietate CSS opreste efectul dat de "float"?
clear text-align position
#some_id {
  clear: both;
}
Clic pe metoda ce creaza un array cu toate elementele din pagina cu un anumit nume de tag.
getElementsByName() getElementById() getElementsByTagName()
var divs = document.getElementsByTagName("div");
var nr_divs = divs.length;
alert(nr_divs);
Indicati functia PHP ce returneaza numarul de elemente dintr-un array.
is_[) count() strlen()
$arr =[7, 8, "abc", 10);
$nri = count($arr);
echo $nri;        // 4
Indicati adverbul corespunzator adjectivului din paranteza in propozitia: "I live (happy)".
happly happily hapily
I live happily.
- Traiesc fericit (in mod fericit).
Indicati adverbul corespunzator adjectivului din paranteza in propozitia: "Vivo (feliz)".
felizamente felizmente felices
Vivo felizmente.
- Traiesc fericit (cu fericire).
Obiectul String - Sir

Last accessed pages

  1. Alphabet and Pronunciation - Alfabetul si pronuntia in limba engleza (22066)
  2. Gramatica limbii engleze - Prezentare Generala (72291)
  3. Prepozitii - Prepositions (7819)
  4. HTML5 - Elemente si atribute noi in formular (1341)
  5. HTML5 - Tag-uri Noi (1020)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2613)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1259)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (827)
  4. Gramatica limbii spaniole. Indrumator si prezentare generala (807)
  5. Alphabet and Pronunciation - Alfabetul si pronuntia in limba engleza (744)