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
Care tag defineste zona de click intr-o harta creata dintr-o imagine?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Ce proprietate CSS indica ce sa se intample cand continutul unui element depaseste dimensiunile lui?
display overflow position
#id {
  overflow: auto;
}
Clic pe evenimentul care este declansat cand mouse-ul e deasupra unui obiect.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Sa ai Viata Buna");
}
Indicati variabila PHP ce contine datele adaugate in adresa URL, dupa caracterul "?".
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Clic pe pronumele reflexiv care e potrivit in propozitia: "Marc is the boy ... won the prize".
who which whoever
Marc is the boy who won the prize.
- Marc e baiatul care a castigat premiul.
Clic pe pronumele reflexiv care e potrivit in propozitia: "Voy a ver al pintor de ... les hablé ayer".
que quien cuyo
Voy a ver al pintor de quien les hablé ayer.
- Ma duc sa vad pictorul despre care ti-am vorbit ieri.
Obiectul String - Sir

Last accessed pages

  1. Lectia 150, Recapitulare 139-140 (23)
  2. Accentul si Pronuntia (26330)
  3. Verbele in limba engleza - Verbs (40068)
  4. Verbe frazale din limba Engleza (39381)
  5. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (89332)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (618)
  2. Conditional IF in Limba Engleza - Fraze Conditionale (532)
  3. Gramatica limbii engleze - Prezentare Generala (439)
  4. Exercitii engleza - English Tests and exercises - Grammar (379)
  5. Coduri pt culori (362)