CATEGORII DOCUMENTE |
- Ce rol are si de ce il folosim -
Cu fiecare noua versiune, HTML devine din ce in ce mai puternic, dar unele lucrari cer inca mai mult decat ceea ce pot oferi etichetele HTML de baza. HTML este proiectat sa formateze si sa afiseze articole pe ecran. Insa daca doreati ca paginile dumneavoastra web sa interactioneze cu utilizatorul, in trecut trebuia sa scrieti un script CGI care sa fie plasat pe server. Scripturile CGI sunt foarte capabile, dar reclama adesea unele cunostinte neconventionale de programare si de lucru cu un server. O alta varianta este de a folosi JavaScript, un limbaj usor de invatat si de folosit. JavaScript ruleaza pe masina client si este inglobat in codul HTML, astfel ca este ideal pentru oamenii obisnuiti cu HTML. In aceasta lectie la ScoalaOnline, veti avea ocazia de a arunca o scurta privire asupra limbajului.
JavaScript este un limbaj de scriptare simplu, interpretatt, orientat spre obiecte, care poate fi folosit pentru a adauga un comportament interactiv simplu unei pagini HTML prin intermediul unui script de cuvinte-cheie inserate intr-o pagina web.
JavaScript este considerat uneori un subset al limbajului de programare Java. De fapt, cand priviti spre originea sa, puteti vedea ca nu este adevarat. Cand Sun lucra la definirea limbajului Java, Netscape crea un limbaj de scriptare pentru produsul lor LiveWire, numit LiveScript. Intre timp Java a fost lansat cu multe urale. Netscape si-a dat seama ca LiveScript ar fi folositor ca mod de interfatare cu Java si a contactat Sun pentru a-i comunica ideea. Sun a ajutat Netscape sa refaca LiveScript si l-a numit JavaScript. Desi poseda unele elemente de sintaxa similare cu cele din Java, JavaScript nu este un derivat din acesta.
In capitolele anterioare am discutat despre crearea paginilor web utilizand limbajul de marcare HTML unde ati invatat sa introduceti intr-o pagina liste, tabele, imagini, formulare. Site-urile Web nu sunt insa doar niste 'tiparituri electronice', ele trebuie sa interactioneze cu utilizatorul, sa-i furnizeze acestuia servicii prompte si 'pe gustul sau'. Pentru a putea defini si folosi comportamentul elementelor dintr-o pagina Web s-au dezvoltat limbaje simple de 'programare', numite limbaje de scripting. Secventele de program scrise intr-un astfel de limbaj se numesc scripturi.
Trebuie sa facem distinctie intre limbajul Java, care este un limbaj de nivel inalt de uz general (se pot scrie, in principu, aplicatii de orice tip), si JavaScript, care permite doar scrierea de secvente de program ce se executa la aparitia unui eveniment. Este adevarat ca exista asemnari intre sintaxa celor doua limbaje, ele avand sintaxa apropiata de limbajul C, sunt ambele orientate obiect si pot fi utilizate in construirea paginilor Web, dar nu sunt acelasi lucru (asa cum foarte multi 'avizati' afirma).
Scripturile JavaScript sunt
interpretate de browserele Web, care 'stiu' JavaScript, deci legatura
browser-script va aparea cu claritate pe tot parcursul capitolului. Ca si in
limbajele traditionale, in JavaScript vom lucra cu variabile, constante, tipuri
de date, functii. Noutatea e aceea ca JavaScript este un limbaj orientat
obiect si bazat pe evenimente. Aceste
doua caracteristici vor fi discutate pe larg deoarece reprezinta esenta
limbajului.
|
< Editorul FrontPage Express va inlesneste inserarea unui script Java direct in sursa, fiind prevazut cu o unealta utila in acest sens. Trebuie doar sa accesati comanda Insert/Script din meniul principal si veti avea ca efect vizual fereastra de ma jos, in care puteti scrie scriptul dorit. |
>Fereastra de mai sus apare in urma comenzii Insert/Script din meniul principal al editorului nostru. Observati ca aveti posibilitatea de a scrie fie un script Visual Basic (VB Script), fie un script Java (JavaScript).
Obiect. Eveniment
Oricare limbaj orientat-obiect
are ca baza notiunea de obiect, de aici derivand si o noua maniera de
programare.
Prin obiect intelegem un model software al unei entitati sau fenomen din viata
reala, caruia i se retin doar insusirile fundamentale, definitorii. Obiectul va
fi descris printr-un set de comportamente si caracteristici. In JavaScript prin
obiecte se reprezinta actiunile, caracteristicile si starea unei pagini Html.
Sa luam ca exemplu transformarea
unui profesor (notat cu prof') intr-un model software (obiect). Putem
lua in considerare caracteristici (properties) cantitative (inaltime,
greutate, culoarea ochilor) si calitative (inteligenta,). Obiectul nostru va
fi bine descris prin comportamentul sau (behavior), aceasta insemnand o
lista cu actiunile intreprinse: pune note proaste, striga la bietii elevi,
preda intr-una, Obiectul nostru se va afla la un moment dat intr-o anumita stare:
stare de nervi, stare de asteptare (doar o prinde pe careva copiind la extemporal).
Obiectul nostru poate
ajunge intr-una din starile mentionate in urma aparitiei unui eveniment, care
determina reactia obiectului (realizarea unei actiuni). Evenimente ar putea fi: elevul nu a invatat, ceea ce
determina activarea actiunii de a pune note proaste sau de a striga la elev.
Daca definim si obiectul elev, cu propriile insusiri si comportamente, precum
si alte obiecte implicate, vom avea imaginea unei lumi
in care entitatile sunt obiecte ce interactioneaza, reactioneaza si determina
reactii.
Sa trecem in revista cativa termeni foarte importanti:
object (obiect) = vezi definitia;
property(proprietate) = caracteristica fundamentala a unui obiect; stare a unui obiect;
method (metoda) = actiune a obiectului prin intermediul careia se poate modifica una sau mai multe proprietati ale obiectului;
event eveniment) = 'ceva care se intampla'
Daca ati urmarit exemplul ati recunoscut, probabil, 'prototipul'
unora dintre fostii, actualii sau viitorii vostri profi. Noi definim in general
un prototip de obiect, o clasa de obiecte, in timp ce un obiect
particular al clasei este numit instanta (clasa este o multime de
obiecte).
Pentru a putea lucra cu obiectul trebuie sa utilizam numele acestuia, iar pentru a utiliza valoarea unei proprietati procedam astfel:
nume_obiect.proprietate
Modificarea unei proprietati se poate face astfel:
prof.bun = false
prof.inaltime = 1.80
Pentru a putea lucra cu evenimentele trebuie sa cunoastem care pot fi acestea si cum le putem 'capta' (cum stim ca s-a produs un eveniment si cum putem executa actiunea dorita). Evenimentele posibile sunt listate in tabelul de mai jos:
Eveniment |
Se aplica pentru |
Apare cand |
Event handler |
Abort |
imagini |
Utilizatorul opreste incarcarea unei imagini (apasand butonul Stop sau selectand o legatura |
onAbort |
Blur |
ferestre si elemente de formular |
Utilizatorul elimina controlul de intrare de pe un element de formular sau fereastra |
onBlur |
Change |
campuri si arii de text, liste derulante |
Utilizatorul schimba valoarea elementului |
onChange |
Click |
butoane, butoane radio, casute de validare, legaturi |
Utilizatorul 'apasa' ('da click') un element |
onClick |
DragDrop |
ferestre |
Utilizatorul 'trage' un obiect in fereastra |
onDragDrop |
Error |
imagini, ferestre |
Incarcarea unui document determina erori |
onError |
Focus |
ferestre si elemente de formular |
Utilizatorul da controlul de intrare unei ferestre sau unui element de formular |
onFocus |
KeyDown |
documente, imagini, zone de text, legaturi |
Utilizatorul elibereaza o tasta (din apasare) |
onKeyDown |
KeyPress |
documente, imagini, arii de text, legaturi |
Utilizatorul apasa o tasta |
onKeyPress |
KeyUp |
documente, imagini, legaturi, zone de text |
Utilizatorul elibereaza o tasta |
onKeyUp |
Load |
corpul documentului |
Utilizatorul incarca un document in browser |
onLoad |
MouseDown |
documente, butoane, legaturi |
Utilizatorul 'dezapasa' butonul mouse-ului |
onMouseDown |
MouseMove |
Mutarea cursorului mouse-ului |
onMouseMove |
|
MouseOut |
arii, imagini, legaturi |
Utilizatorul muta cursorul in afara elementelor specificate |
onMouseOut |
MouseOver |
legaturi |
Utilizatorul muta cursorul deasupra unui link |
onMouseOver |
MouseUp |
documente, butoane, legaturi |
Utilizatorul elibereaza butonul mouse-ului |
onMouseUp |
Move |
ferestre |
Mutarea unei ferestre |
onMove |
Reset |
formulare |
Upasarea butonului Reset |
onReset |
Resize |
ferestre |
Modificarea marimii unei ferestre |
onResize |
Select |
arii de text, liste derulante |
Utilizatorul selecteaza un element de intrare |
onSelect |
Submit |
formulare |
Utilizatorul trimite un formular |
onSubmit |
Unload |
corpul documentului |
Utilizatorul iese din pagina |
onUnload |
Intr-o sectiune viitoare vom invata cum se poate executa o actiune utilizand evenimentele. Sa notam ca aparitia unui eveniment este testata prin folosirea unui identificator numit handler. Handler-ul reprezinta de fapt apelul unei functii sau o secventa de instructiuni JavaScript, deci vom intelege prin event handler tratarea aparitiei unui eveniment. In tabelul precedent sunt prezentate evenimentele posibile, elementele unde pot aparea evenimentele, semnificatia si handler-ul fiecarui eveniment (se adauga prefixul on numelui evenimentului).
Cum introducem un script. Marcajul Script
Pentru a introduce un script intr-un document Web vom utiliza marcajul <SCRIPT>, care este o extensie a limbajului Html. Acest marcaj permite introducerea unui numar arbitrar de functii sau secvente de instructiuni JavaScript si poate sa apara in orice sectiune a documentului.
Exemplul 1 Vom introduce un script care sa afiseze in document un mesaj. Codul este urmatorul:
<HTML> <HEAD> <Title>Exp 1</Title> <Script Language='JavaScript'> <!-- document.write('Acesta este inceputul documentului') --> </Script> </HEAD> <Body> <P> Restul mai tarziu ! </Body> </HTML>
Observatii:
Am utilizat atributul Language pentru a specifica ce limbaj de scripting este utilizat in scriptul inserat;
Scriptul propriu-zis a fost introdus intr-un marcaj de comentariu pentru a nu induce in eroare browserele care nu pot interpreta JavaScript. Spunem ca ascundem scriptul de navigatoarele care nu stiu JavaScript.
Plasarea scriptului in antetul documentului determina executarea acestuia la incarcarea paginii de catre navigator. Continutul paginii va fi afisat doar dupa executarea scripturilor din antetul documentului.
Am utilizat un obiect predefinit, document si o metoda a sa write. Acest obiect defineste caracteristicile documentului Html incarcat in fereastra navigatorului. Metoda write afiseaza un sir de caractere in cadrul documentului.
Exemplul 2 Adaugam codului din exemplul precedent linia:
window.alert ('Apasa OK pentru continuarea inacrcarii documentului !');
Observatii:
Am utilizat un obiect nou, window, care modeleaza fereastra navigatorului.
Folosirea metodei alert a obiectului window determina aparitia unui mesaj de avertizare pentru utilizator. Apasarea butonului OK permite continuarea navigarii.
Sa trecem in revista atributele marcajului SCRIPT:
Language='denumire_limbaj' - precizeaza ce limbaj de scripting utilizam in scriptul inserat. Daca folosim Visual Basic Script vom scrie ca denumire 'VBScipt'. Daca dorim sa scriem cod alternativ in cazul in care browserul vizitatorului nu poate interpreta scripturi, vom insera acest cod in marcajul <NOSCRIPT> </NOSCRIPT>
Src = 'fisier.js' - scriptul nu va mai fi introdus in documentul Html ci va fi preluat din fisierul specificat in atribut (se poate scrie calea absoluta catre fisier, acesta putandu-se afla si pe o masina de la distanta). Daca fisierul ce contine scriptul este identificat si incarcat fara erori, ceea ce este scris in interiorul marcajului Script nu este luat in considerare. Daca apar erori la incarcarea scriptului se iau in considerare instructiunile scrise in interiorul marcajului.
Putem introduce oricate marcaje SCRIPT in documentul Html si in oricare sectiune a documentului. De asemenea, intr-un marcaj SCRIPT pot fi introduse un numar arbitrar de functii si instructiuni.
Elementele de baza ale limbajului JavaScript
Pe linga elementele specifice (evenimente, handler-e de eveniment, obiecte), limbajul JavaScript contine, ca in orice limbaj de programare, urmatoarele elemente:
variabile
constante
operatori
expresii
instructiuni
functii
Variabile
In acceptiunea generala a termenului, prin variabila intelegem un obiect utilizat in algoritmi, care are urmatoarele caracteristici:
nume - sir de caractere ce identifica in mod unic variabila, numit identificator. De obicei, identificatorul contine litere, cifre, caracterul '_' si are ca prim caracter o litera sau '_'. JavaScript este un limbaj case sensitive, adica se face distinctia intre literele mari si mici. Astfel, variabilele: suma, Suma, SUma, sUMA sunt considerate distincte.
tip de date - multime ale carei elemente pot fi date ca valori variabilei;
valoare - valoarea propriu-zisa a variabilei; Variabila isi poate schimba valoarea pe parcursul executiei, dar are o singura valoare la un moment dat;
zona de memorie - zona de memorie in care se pastreaza valoarea actuala a variabilei (dimensiunea zonei este dependenta de tipul variabilei)
Politica de confidentialitate | Termeni si conditii de utilizare |
Vizualizari: 1338
Importanta:
Termeni si conditii de utilizare | Contact
© SCRIGROUP 2024 . All rights reserved