 |
|
 |  |
|
|
| |
 | Biologie | Chimie | Didactica | Fizica | Geografie | Informatica |
| Istorie | Literatura | Matematica | Psihologie |
Pentru a putea insera si utiliza un script nu este absolut necesara cunoasterea limbajului JavaScript . Exista un numar foarte mare de scripturi gata de utilizare, care pot inserate cu usurinta in codul sursa al documentelor HTML.
Scripturile JavaScript pot fi incluse in pagina Web in
doua moduri:
1. prin intermediul etichetei <SCRIPT> </SCRIPT>
2. prin intermediul unei proceduri eveniment
Urmatorul exemplu include in document un script care afiseaza in pagina textul 'Salut!' prin intermediul etichetei <SCRIPT>.
<HTML>
<HEAD>
<TITLE>javascript1</TITLE>
</HEAD>
<BODY>
<H1> exemplu JavaScript</H1><HR>
<SCRIPT language='JavaScript'>
document.write('Salut!')
</SCRIPT>
</BODY>
</HTML>
Atributul language al etichetei <SCRIPT> specifica limbajul in care este scris scriptul, in acest caz valoarea atributului fiind 'JavaScript'.
O alta modalitate de a include un script in pagina este salvarea acestuia ca un fisier extern si apelarea sa prin intermediul atributului src al etichetei <SCRIPT>.
Pentru a putea folosi corect un script JavaScript trebuie ințelese elementele esențiale cu care lucreaza JavaScript, obiectele si evenimentele.
Un obiect este un tip de date, care reuneste sub
aceeasi denumire atat datele cat si functiile care le
prelucreaza. Datele se numesc proprietatile obiectului iar
functiile se numesc metodele obiectului.
De exemplu un obiect care sa reprezinte un ecuson va avea urmatoarele proprietați:
nume
prenume
funcție
Pentru a defini un obiect se foloseste o functie numita constructor, care pentru obiectul ecuson va fi:
function ecuson(num, pre, fct)
Ecusoanele realizate cu acest obiect urmeaza sa fie tiparite se creaza o functie care va tipari proprietatile obiectului, numita PrintEc()
function PrintEc()
Se scrie definitia completa a obiectului:
function Ecuson(num, pre, fct)
Pentru a crea un obiect concret, adica se foloseste cuvantul cheie new. O instanta a obiectului Ecuson care se numește ion este construita de urmatoarea instrucțiune:
ion=new Ecuson ('Pop ', ' Ion ', 'Director')
Dupa crearea instanței obiectului Ecuson, metoda PrintCard poate fi folosita astfel:
ion.PrintCard()
Dupa crearea obiectului urmeaza folosirea lui in pagina Web.
<HTML>
<HEAD>
<TITLE>javascript2</TITLE>
<SCRIPT language='JavaScript'>
function PrintEc()
function Ecuson(num,pre , fct)
</SCRIPT>
</HEAD>
<BODY>
<H1 align='center'>Crearea obiectelor</H1>
Inceputul scriptului<HR>
<SCRIPT language='JavaScript'>
// Crearea a trei obiecte noi
ion=new Ecuson('Pop', 'Ion', 'Director')
mia=new Ecuson('Ilie', 'Maria', 'Economist');
doru=new Ecuson('Popescu', 'Doru', 'Economist');
// Afisarea lor
ion.PrintEc();
mia.PrintEc();
doru.PrintEc();
</SCRIPT>
Sfarșitul scriptului
</BODY>
</HTML>
Definitia scriptului este plasata in antetul documentului HTML, iar apelul
scriptului este facut in corpul documentului. In cadrul scriptului apar
doua linii precedate de sirul de caractere '//'. Acesta
este modul in care se introduc comentariile in cadrul scripturilor JavaScript.
Evenimentele sunt un alt concept fundamental cu care lucreaza
JavaScript. Un eveniment este o
actiune care survine la un moment dat si in urma careia este
declansata executia unei anumite parti din program. De
fiecare data cand vizitatorul face
click pe o legatura, cand introduce un text sau chiar cand trece cu
mouse-ul deasupra unei zone a paginii, poate sa survina un eveniment la care scriptul
reactioneaza generand un raspuns.
Tipuri de evenimente cu care lucreaza JavaScript:
|
Eveniment |
Descriere |
|
|
onAbort |
Apare cand utilizatorul renunta la incarcarea unei imagini |
|
|
onBlur |
Apare cand un obiect din pagina pierde focusul |
|
|
onChange |
Apare cand un camp de editare este modificat de utilizator (cand se introduce un text) |
|
|
onClick |
Apare cand utilizatorul face click pe un element |
|
|
onError |
Apare cand un document sau o imagine nu se incarca corect |
|
|
onFocus |
Apare cand un element primeste focusul |
|
|
onLoad |
Apare cand o pagina sau o imagine isi termina incarcarea |
|
|
onMouseOver |
Apare cand cursorul mouse-ului se plimba deasupra unui element |
|
|
onMouseOut |
Apare cand cursorul mouse-ului paraseste elementul |
|
|
onSelect |
Apare cand utilizatorul selecteaza un text |
|
|
onSubmit |
Apare cand este apasat un buton de tip Submit |
|
|
onUnload |
Apare cand utilizatorul paraseste documentul sau sesiunea curenta. |
Prin intermediul JavaScript se poate raspunde unui mare
numar de evenimente. Acest lucru se realizeaza prin crearea unei proceduri eveniment.
Procedurile eveniment nu sunt definite cu ajutorul etichetei <SCRIPT> , ele fiind atribute ale celorlalte etichete.
Daca procedura eveniment este mai extinsa, includerea ei in intregime intr-o eticheta devine nepractica. In acest caz, este mai avantajos sa construim o functie care sa trateze evenimentul.
Functia este definita in sectiunea <HEAD> a documentului, și este apelata in corpul documentului ca procedura eveniment. De exemplu, sa presupunem ca am construit o functie eveniment numita Exploreaza(). Aceasta poate fi apelata astfel:
<A href='#cuprins' onMouseOver='Citeste();'>Consulta cuprinsul</A>
In momentul cand mouse-ul se afla deasupra legaturii, functia este lansata in executie.
Modul de executie al scriptului Scripturile integrate in cadrul
paginilor sunt evaluate dupa ce incarcarea paginii s-a incheiat dar
inaintea afisarii acesteia. Scripturile stocate ca fisiere
separate sunt evaluate inaintea tuturor scripturilor incluse in pagina.
Functiile definite in cadrul scripturilor nu sunt executate automat la
incarcarea paginilor ci abia atunci cand acestea sunt apelate, prin eticheta <SCRIPT> sau printr-o
procedura eveniment.
Un script JavaScript intr-o pagina Web poate fi inclus intre etichetele HTML de comentariu:
<!- - comentariu - ->.
Deoarece exista browsere care nu recunosc si nu pot executa scripturile JavaScript, in loc ca scriptul sa fie executat , este afisat in pagina intregul cod, lucru care nu este de dorit. Comentariile sunt ignorate de browser, și deci includerea codului JavaScript intre etichetele de comentariu va duce la ignorarea acestei parti a documentului. Browserele care recunosc JavaScript vor identifica prezenta JavaScript vor executa scriptul.
Pentru a elimina acest neajuns pentru introducerea unui script intr-o pagina este recomandata urmatoarea modalitate:
<SCRIPT language='JavaScript'>
<! - -
Cod JavaScript
// - ->
</SCRIPT>
Scripturile JavaScript se pot folosi pentru a face paginile
mai atractive si a le imbunatati functionalitatea. Cu
ajutorul scripturilor Java se poate realiza:
afisarea datei curente in pagina
deschiderea unei ferestre pop-up(mesaje apar intr-o mica fereastra care se inchide atunci cand executati o anumita actiune, de obicei click pe un buton, sau pe un link),
afisarea unui mesaj in bara de status a ferestrei browserului,
afisarea aleatoare a unor mesaje in pagina( citate sau imagini care sa se schimbe de fiecare data cand este accesata pagina - dand paginii varietate, fie in aspect, fie, mai ales, in continut),
imagini care isi schimba aspectul la trecerea mouse-ului
validarea formularelor.
Pentru a imbunatați funcționalitatea unei pagini, aceasta trebuie sa conțina formulare și sa permita validarea datelor introduse de utilizator in formular.
Dupa completarea formularului informatiile introduse vor fi supuse procesului de validare realizat de un script JavaScript. Se verifica daca toate campurile de editare au fost completate. Daca se apasa pe butonul Submit inainte de a completa toate campurile obligatorii, este transmis un mesaj de eroare O alta verificare este daca utilizatorul a introdus date valide in formular.
Una dintre regulile principale ale unei pagini Web bune este simplitatea, de aceea nu este bine sa folosim scripturi de care nu este nevoie, deoarece aplicatiile complexe si de mari dimensiuni incetinesc incarcarea paginii unde sunt folosite
Activitatea de invatare 3.1.1 Scripturi JavaScript - scripturi PHP
Competenta: Formateaza elementele de conținut ale sistemului cu ajutorul software-lui specific
Obiectivul/obiective vizate:
La sfarșitul acestei activitați vei fi capabil sa:
Cunoști modul de includere in pagina a scripturilor JavaScript și PHP
Cunoști modul de execuție a scripturilor
Utilizezi diferite scripturi JavaScript și scripturi PHP
Durata: 35 minute
Tipul activitatii: Asemanari și diferențe
Sugestii:
elevii se pot organiza in grupe mici (2 - 3 elevi) sau pot lucra individual, rezultatul fiind prezentat in fața clasei.
Sarcina de lucru: Folosind surse diferite (internet, manual, reviste de specialitate, caietul de notițe etc) adunați informații despre scripturi JavaScript și scripturi PHP, evidențiind asemanarile și diferențele dintre ele.
Competenta: Formateaza elementele de conținut ale sistemului cu ajutorul software-lui specific
Obiectivul/obiective vizate:
La sfarșitul acestei activitați vei fi capabil sa:
Cunoști modul de includere in pagina a scripturilor JavaScript și PHP
Cunoști modul de execuție a scripturilor
Utilizezi diferite scripturi JavaScript și scripturi PHP
Durata: 1 saptamana
Tipul activitatii: Proiect
Sugestii:
Activitatea se va desfașura individual. Rezultatele se vor prezenta intregii clase.
Sarcina de lucru: Citiți cu atenție acțiunile de mai jos ce pot fi realizate cu ajutorul scripturilor. Folosind surse diferite (internet, manual, reviste de specialitate) adunați informații despre scripturi JavaScript și scripturi PHP ce pot realiza aceste acțiuni. Pentru prezentarea rezultatelor fiecare elev va realiza un portofoliu ce va cuprinde cele 14 scripturi, iar prin tragere la sorți va realiza prezentare PowerPoint pentru unul dintre scripturile realizate. Se va preciza și modul de introducere a scriptului in pagina.
Lista de scripturi JavaScript și PHP:
Copyright © 2024 - Toate drepturile rezervate
