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 tag se foloseste pentru a adauga liste in elemente <ul> si <ol>?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>
Care valoare a proprietatii "display" seteaza elementul ca tip bloc si afiseaza un punct in fata?
block list-item inline-block
.some_class {
  display: list-item;
}
Care instructiune JavaScript transforma un obiect in sir JSON.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicati clasa PHP folosita pentru a lucra cu elemente HTML si XML in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Indicati forma de Prezent Continuu a verbului "to live" (a trai /a locui)
lived living liveing
I`m living here.
- Traiesc /Locuiesc aici.
Care este forma de Gerunziu (sau Participiu Prezent) a verbului "vivir" (a trai /a locui)?
vivió vivido viviendo
Estoy viviendo aquí.
- Traiesc /Locuiesc aici.
Obiectul String - Sir

Last accessed pages

  1. Por sau para: Exercitiu 1 (3122)
  2. Trecut nedefinit vs Imperfect (3633)
  3. Indicativ prezent (1525)
  4. Teste spaniola - Tests y ejercicios de Español - Gramática (27655)
  5. Numerale, Numere in limba engleza - Numerals (52661)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (678)
  2. Coduri pt culori (303)
  3. Exercitii engleza - English Tests and exercises - Grammar (301)
  4. Gramatica limbii engleze - Prezentare Generala (295)
  5. Cursuri limba engleza gratuite si lectii online (272)