Acasa Tehnologie Despre limbajul JavaScript

Despre limbajul JavaScript

by Dragos Schiopu

limbajul JavaScript

JavaScript este un limbaj de programare orientat obiect bazat pe conceptul prototipurilor. Limbajul este binecunoscut pentru folosirea în construirea site-urilor web, dar de asemenea este folosit pentru accesul la obiecte încastrate (embedded objects) în alte aplicaţii. La începuturi a fost dezvoltat de către Brendan Eich de la Netscape Communications Corporation sub numele de Mocha, apoi LiveScript, şi denumit în final JavaScript.

În ciuda numelui şi a unor oarecare similarităţi în sintaxă, între JavaScript şi limbajul Java nu există nici o legătură. Ca şi Java, JavaScript are o sintaxă ca şi C-ului, dar are mai multe în comun cu limbajul de autoprogramare Self decât cu Java.

Până la începuturile lui 2005, ultima versiune existentă a fost JavaScript 1.5, care corespunde cu Ediţia a 3-a ECMA-262, ECMAScript, în alţi termeni, o ediţie standardizată de JavaScript. Versiunile Mozilla începând cu 1.8 Beta 1 de asemenea au avut suport pentru E4X, care este o extensie a limbajului care are de-a face cu XML, definit în standardul ECMA-357. Versiunea curentă de Mozilla, 1.8.1 (pe care sunt construite Firefox şi Thunderbird versiunile 2.0) suportă JavaScript versiunea 1.7.

Schimbarea numelui din LiveScript în JavaScript s-a făcut cam în acelaşi timp când Netscape incorpora suport pentru tehnologia Java în browserul web Netscape Navigator.

Microsoft a implementat limbajul JavaScript sub numele de JScript, cu o serie de modificări şi extensii faţă de implementarea Netscape. Pe platforma Windows, JScript este unul din limbajele executabile de către Windows Script, şi deci poate fi folosit pentru scriptarea aplicaţiilor ce suportă Windows Script, de ex. Internet Explorer, sau chiar sistemul de operare Windows.

Asociaţia ECMA a standardizat limbajul JavaScript/JScript sub numele ECMAScript (standardul ECMA-262).

Cea mai des întâlnită utilizare a JavaScript este în scriptarea paginilor web. Programatorii web pot îngloba în paginile HTML script-uri pentru diverse activităţi cum ar fi verificarea datelor introduse de utilizatori, sau crearea de meniuri şi alte efecte animate.

Browserele reţin în memorie o reprezentare a unei pagini web sub forma unui arbore de obiecte, şi pun la dispoziţie aceste obiecte script-urilor JavaScript, care le pot citi şi manipula. Arborele de obiecte poartă numele de Document Object Model sau DOM. Există un standard W3C pentru DOM-ul pe care trebuie să îl pună la dispoziţie un browser, ceea ce oferă premiza scrierii de script-uri portabile, care să funcţioneze pe toate browserele. În practică însă, standardul W3C pentru DOM este incomplet implementat. Deşi tendinţa browserelor este de a se alinia standardului W3C, unele din acestea încă prezintă incompatibilităţi majore, cum este cazul Internet Explorer.

Să luăm un exemplu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Acesta este titlul documentului</title>
    </head>
    <body>
        <h1 id="titlu_doc">Acesta este titlul documentului</h1>
        <p>Acesta este un paragraf de text <img src="bullet.gif" alt="Bullet" /></p>
        <p>Acesta este un alt paragraf de text</p>
    </body>
</html>

Structura arborescentă asociată acestui document este:
html
|
+– head
| |
| +– title
| |
| +– „Acesta este titlul documentului”
|
+– body
|
+– h1
| |
| +– „Acesta este titlul documentului”
|
+– p
| |
| +– „Acesta este un paragraf de text ”
| |
| +– img
|
+– p
|
+– „Acesta este un alt paragraf de text”

Se observă că unele din nodurile structurii arborescente sunt elemente (html, head, title etc), iar unele sunt noduri de text („Acesta este titlul documentului”). DOM ne permite să cautăm astfel de noduri în structura arborescentă, să le modificăm, să le ştergem, să creem altele, etc. Elementul de legătură între JavaScript şi DOM este obiectul document, ce implementează interfaţa Document din DOM.

Pentru a putea manipula informaţia dintr-un nod trebuie ca mai întâi să obţinem o „referinţă” la acel nod. În acest scop putem folosi următoarele metode:
• document.getElementById() – returnează un element, identificat după atributul id;
• document.getElementByName() – returnează un element, identificat după atributul name. W3C recomandă să folosiţi id pentru identificarea elementelor;
• document.getElementsByTagName() – returnează o listă de elemente, identificate după numele tag-ului.

Dacă de exemplu dorim să obţinem o referinţă la elementul h1 din exemplu ne putem folosi de id-ul acestuia:

<script type="text/javascript">
    titlu = document.getElementById('titlu_doc');
</script>

Să presupunem însă că dorim să obţinem o referinţă la title, sau la cel de-al doilea paragraf. Acestea nu au id.

<script type="text/javascript">
    titlu = document.getElementsByTagName('title')[0];
    paragraf = document.getElementsByTagName('p')[1];
</script>

Se observă că array-urile sunt indexate începând de la zero (ca şi în C).

După ce am localizat un element, putem explora structura arborescentă începând cu acel punct, folosind proprietăţi ale obiectului precum: parentNode, firstChild, nextSibling etc. De exemplu, pentru a ajunge la nodul de text din interiorul celui de-al doilea paragraf putem folosi:

<script type="text/javascript">
    paragraf = document.getElementsByTagName('p')[1];
    text = paragraf.fistChild;
</script>

Odată ce am obţinut o referinţă la un element, putem să manipulăm diversele proprietăţi ale acestuia. Să presupunem că dorim să modificăm atributul src al imaginii din exemplul 1 şi dorim ca al doilea paragraf să fie scris italic. Nimic mai simplu:

<script type="text/javascript">
    // localizam imaginea
    imagine = document.getElementsByTagName('img')[0];
    // modificam atributul "src"
    imagine.src = 'ceva.gif';
         
    // localizam paragraful
    paragraf = document.getElementsByTagName('p')[1];
    // modificam atributul CSS font-style
    paragraf.style.fontStyle = 'italic';
</script>

După cum observaţi, atributele CSS se pot modifica prin intermediul proprietăţii style, modificând numele atributului de la dash notation (stilul folosit în documentele CSS), la camel notation. Există şi o excepţie: float. Acesta este un cuvânt rezervat în JavaScript, aşa că nu puteţi folosi element.style.float, dar puteţi folosi element.style.cssFloat.

După cum am observat în exemplu există cel puţin două tipuri diferite de noduri: nodurile element şi nodurile de text. Acestea se crează folosind metodele:
* document.createElement() – pentru elemente
* document.createTextNode() – pentru nodurile de text

<script type="text/javascript">
    // creem un nou element de tip 'p' (paragraf)
    paragraf = document.createElement('p');
    // creem un nod de text
    text = document.createTextNode('Al treilea paragraf');
    // atasam textul la paragraful creat anterior
    p
aragraf.appendChild(text);
    // atasam paragraful la elementul body din documentul nostru
    document.getElementsByTagName('body')[0].appendChild(paragraf);
</script>

Metoda appendChild() adaugă un nod fiu nodului pentru care este invocată. Metoda „pereche” este removeChild() care vă permite să ştergeţi un nod fiu.

s-ar putea sa-ti placa