RONUA
ROmanian .NET User Association --- Asociaţia Romană a Utilizatorilor .NET
Comunitatea dezvoltatorilor software pe .NET Framework
Javascript – Noţiuni introductive

Fie că îţi place fie că nu Javascriptul ( cunoscut şi sub denumirea de ECMA Script ) este cel mai folosit limbaj de programare de pe glob. Nu cred că cei de la Netscape s-au aşteptat la aşa ceva când au cerut ca limbajul să fie din proiectare cu hibe. Şi nici nu se aştepta restul lumii ca Microsoft să copieze limbajul aşa de bine încât în loc să repare hibele a reuşit să le păstreze chiar şi in varianta lor denumită JScript.

Cu toate astea aproape orice aplicaţie care poate fi scrisă în Javascript va fi scrisă în Javascript. Avem astăzi editoare de text atât pentru programare cât şi clone ale lui Word, Excel şi Powerpoint, avem chiar şi IDE-uri scrise în Javascript ( bespin, coderun), se scriu o mulţime de jocuri mai nou graţie HTML5 şi a etichetei canvas, ba mai mult poţi face chiar şi playere pentru stream-uri video.

Ţinând cont de toate câte poţi face în Javascript cred că merită să îţi zic câteva aspecte de bază ale limbajului.

1. Funcţia este cetăţean de prim rang

În limbajele orientate obiect cetăţeanul de rang întâi era clasa. O clasă printre altele permite încapsularea datelor. Sa privim puţin o funcţie javascript.

Code Snippet
  1. function Person() {
  2.     var Name = "Name";
  3.     var Surname = "Surname"
  4. }

Funcţia Person are două atribute, primul fiind Name, iar al doilea fiind Surname.

Ce am scris noi anterior Javascript interpretează în felul următor:

Code Snippet
  1. function Person() {
  2.     var Name = "Name";
  3.     var Surname = "Surname";
  4.  
  5.     return this;
  6. }

Asta înseamnă că orice scriem noi într-o funcţie este public. Daca ar fi să foloseşti funcţia ai face-o probabil în felul următor:

Code Snippet
  1.  
  2. var me = new Person();
  3. me.Name = "Mihai";
  4. me.Surname = "Lazar";

Minunat. Acum ştiind cum interpretează Javascriptul o funcţie, hai să vedem cum declarăm un obiect ( a se citi dicţionar de valori ).

Un dicţionar în javascript arată cam aşa

Code Snippet
  1. {
  2.     name: "Name",
  3.     surname: "Surname
  4. }

Evident dacă vrem să îl mai folosim putem sa zicem var numeVariabila = { name: “Name”, surname: “Surname” }.

Partea interesantă cu dicţionarele este că putem avea o proprietate căreia să îi asignăm o funcţie.

Putem practic folosi aşa ceva

Code Snippet
  1. var AnotherPerson = {
  2.     name: "Name",
  3.     surname: "Surname",
  4.     sayHi: function(){
  5.         alert( "Hi, " +this.name + " " + this.surname );
  6.     }
  7. }
  8.  
  9. AnotherPerson.sayHi()

ATENŢIE! Poţi asigna unei variabile un dicţionar. Nu te opreşte nimeni. Dar nu poţi iniţializa un dicţionar cu new.

2. Încapsularea datelor

Ai văzut cum scrii o funcţie. Ai văzut cum faci un dicţionar. Ia să vezi cum încapsulezi datele.

Code Snippet
  1. function Person() {
  2.     var name = "Name";
  3.     var surname = "Surname";
  4.  
  5.     function privateAccessOnly() {
  6.         return this.name + " " + this.surname;
  7.     }
  8.  
  9.     return {
  10.         sayHi: function () {
  11.             alert("Hi, " + privateAccessOnly() );
  12.         }
  13.     }
  14. }

Suuper! Tot ce a trebuit să faci era să returnezi un dicţionar în locul obiectului this care se referă la funcţie. Acum nimeni nu va putea asigna valori proprietăţi name şi surname.

Tot ce poate face este să apeleze metoda sayHi

Code Snippet
  1. var me = new Person();
  2. me.sayHi();

 

Ăsta este în mare şpilu cu Javascript. Există totuşi alte chiţibuşuri de care trebuie să ţii cont. De exemplu în Javascript este obligatoriu să scrii { în dreptul funcţiei sau în cazul return { . De ce ? Pentru că e foarte posibil ca în cazul în care nu o faci să păţeşti ceva de genul.

Code Snippet
  1. function Person() {
  2.     var name = "Name";
  3.     var surname = "Surname";
  4.  
  5.     function privateAccessOnly() {
  6.         return this.name + " " + this.surname;
  7.     }
  8.  
  9.     return;
  10.     {
  11.         sayHi: function () {
  12.             alert("Hi, " + privateAccessOnly() );
  13.         }
  14.     }
  15. }

 

Şi vei sta uitându-te la cod şi nu vei înţelege de ce nu merge exemplul. Pai javascriptul ţi-a pus ‘;’ după return.

Ce nu am atins în discuţia noastră este modelul de extensie bazat pe prototipuri spre deosebire de moştenire în limbajele obiectuale. De asemenea mai rămâne să vedem cu se face un closure şi ceva exemple mai distractive. Dar asta altă dată. Cine ştie poate mi-o iei în faţă şi prezinţi chiar tu câteva aspecte interesante ale Javascript-ului.


Posted Tue, May 4 2010 7:45 AM by Mihai Lazar

Comments

Aurelian wrote re: Javascript – Noţiuni introductive
on Tue, May 4 2010 8:19 AM

Un post corect formatat si cu informatie foarte relevanta pentru incapatori.

Bravo Mihai.

ignatandrei wrote re: Javascript – Noţiuni introductive
on Wed, May 5 2010 7:27 AM

"Cine ştie poate mi-o iei în faţă şi prezinţi chiar tu câteva aspecte interesante ale Javascript-ului."

???

psycho wrote re: Javascript – Noţiuni introductive
on Wed, May 5 2010 7:49 AM

Andrei, cred ca a aruncat manusa pentru alti oameni care au experienta in javascript (si care ar vrea sa o partajeze cu noi)

;)

dacul wrote re: Javascript – Noţiuni introductive
on Thu, May 6 2010 6:58 AM

bravo!

Felicitari!

RONUA wrote re: Javascript – Noţiuni introductive
on Thu, May 6 2010 9:37 AM

Cred ca oricine va lua taurul de coarne si va posta persistent content despre Java (fie si numai pt incepatori) se va impune ca autoritate in domeniu foarte repede.

Exista o deflatie de content relevant si al obiect despre JS.

De acord?

tudor.t wrote re: Javascript – Noţiuni introductive
on Thu, May 6 2010 11:44 AM

E util un astfel de articol - mai ales fiindca multa lume cand se gandeste la o functie, se gandeste la o functie din matematica - "ceva" ce primeste un argument si produce un rezultat, fara efecte secundare..

Si mie mi-a luat ceva timp pana sa ma gandesc la o functie ca un obiect de tip Function, care normal are stare..

Insa odata inteles si conceptul de closure (www.jibbering.com/.../closures.html) totul devine mult mai clar..

BogdanB wrote re: Javascript – Noţiuni introductive
on Wed, May 26 2010 3:10 AM

@Tudor: linkul postat mi se pare cel mai bun pentru inchideri.

Am un capitol destul de interesant zic eu despre OOP Javascript in cartea mea despre Microsoft AJAX Library:

www.packtpub.com/.../Ajax_0987_03_Final.pdf

Sper sa fie de ajutor

RONUA wrote re: Javascript – Noţiuni introductive
on Wed, May 26 2010 8:50 AM

Bogdan, ce-ar fi sa ne dai capitolul ala gratuit?

Asta ca tot ti-ai facut reclama la carte.

Aurelian wrote re: Javascript – Noţiuni introductive
on Wed, May 26 2010 9:23 AM

Adica vreau sa spun sa punem dpf-ul ala in sectiunea media la noi.

Ne dati permisiunea asta?

Multumesc.

BogdanB wrote re: Javascript – Noţiuni introductive
on Wed, May 26 2010 11:27 AM

@Aurelian - ultima mea intentie a fost sa-mi fac reclama la carte.

Cred in schimb ca este un tutorial complet despre JavaScript OOP si sincer nu am gasit o astfel de resursa in alta parte.

Vorbesc cu cei de la editura sa vad imi dau voie sa replicam informatia pe ronua.ro.

Pana atunci se poate face download folosind linkul de mai sus.

Bogdan

Aurelian wrote re: Javascript – Noţiuni introductive
on Wed, May 26 2010 12:05 PM

perfect. astept.

(c) RONUA 2004-2009
Powered by Community Server (Commercial Edition), by Telligent Systems