 |
| JavaScript a fost creat de firma Netscape. |
Folosind JavaScript puteti adauga functionalitati suplimentare in paginile dumneavoastra Web, de exemplu:
- schimbarea modului in care sunt afisate elementele paginii;
- adaugarea animatiei si a altor efecte de imagine;
- deschiderea ferestrelor si casetelor de dialog pop-up;
- verificarea datelor introduse de utilizator.
In momentul de fata toate browserele moderne accepta JavaScript.
Elementele de baza JavaScript
Comenzile JavaScript pot fi inglobate direct in paginile HTML, plasandule intre etichetele
<script>
......aici plasati codul JavaScript!
</script>De asemenea se mai obisnuieste ca functuiile JavaScript sa se pastreze in fisiere separate cu extensia .js si apoi legate de fisierele HTML, prin introducerea in antetul fisierului HTML a unei linii similare cu cea de mai jos:
<SCRIPT language="JavaScript" SRC="myJS.js"></SCRIPT>Aceasta linie va permite sa apelati orice functie JavaScript din fisierul myJS.js ca si cum codul sursa a fost scris direct in pagina Web.
Adaugarea codului JavaScript
Sa trecem la treaba si sa adaugam o comanda JavaScript la aceasta pagina Web, sa spunem afisarea datei curente:
<script>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
Acum sa adaugam si codul in HTML :
<h1>My First JavaScript</h1>
<p id="demo">This is a paragraph.</p>
<button type="button" onclick="displayDate()">Display Date</button>
Aici aveti aplicatia executata in browser:
My First JavaScript
This is a paragraph.
Includerea codului JavaScript in paginile HTML
In paginile noastre Web putem include oricat de multe perechi de etichete <script>....</script> avem nevoie. Insa, trebuie sa fim atenti unde le plasam in document. Comenzile JavaScript sunt executate in ordinea in care apar in pagina. Codul JS poate fi adaugat si in sectiunea de antet a paginii HTML.
Manageri de eveniment
Deseori, veti dori executarea codului JS ca urmare a aparitiei unui anumit eveniment. De exemplu, intr-un formular HTML, ati putea decide ca JS sa verifice validitatea datelor intoduse de utilizator, in alte situatii, veti dori sa alertati utilizatorul prin deschiderea unei casete de mesaj ori de cate ori se executa click pe un anumit buton.
Pentru a obtine aceste efecte, veti utiliza interfete speciale furnizate de catre browser si cunoscute sub numele de manageri de eveniment. Acestia va permit sa apelati automat JS cand au loc anumite tipuri de evenimente. Fie codul:
<form>In browser:
<input type="button" value="Apasa aici" onClick="alert('Ati apasat butonul!')">
</form>
Capturam actiunea prin care utilizatorul executa clic pe buton, folosind managerul de evenimente onClick. Cand este detectata executarea clicului de catre utilizator, scriptul executa instructiunile prezente in atributul onClick al etichetei input:
onClick="alert('Ati apasatButonul!')"Crearea functiilor
In cele mai multe cazuri, va trebui sa combinati diferite metode si obiecte JS, folosind probabil mai multe linii de cod. JS va permite sa compuneti astfel de blocuri de instructiuni si sa le denumiti, facilitand astfel scrierea, intelegerea si mentinerea codului.
In randurile urmatoare sa folosim un alt manager de eveniment, insa de aceasta data il vom folosi pentru a apela o functie, si nu pentru a apela direct o metoda JS. Iata codul pentru functia noastra:
<script language ="JavaScript">Mai departe dorim ca aceasta caseta de dialog cu mesaj de avertizare sa apara cand indicatorul mouse-ului utilizatorului trece peste fotografia din pagina noastra. Prin urmare adaugam un atribut in eticheta <img> care contine imaginea, astfel:
function showAlert() {
alert("Este o imagine!")
}
</script>
<img src="cathdral.jpg" border="2" onMouseOver="showAlert()" alt="Cathedral"/>Aceasta linie foloseste managerul de evenimente onMouseOver pentru a detecta momentul in care cursorul intra in zona ocupata de fotografia de pe ecran. Puteti verifica acest lucru trecand cursorul deasupra imaginii de la inceput.
Trecerea argumentelor catre functii
Putem foarte usor sa apelam functia noastra printr-o gama foarte larga de manageri de eveniment pentru a deschide o caseta de avertizare. Din pacate mesajul avertismentului va afisa intotdeauna acelasi text.
Insa daca putem indica functiei mesajul ce trebuie afisat, asa incat sa avem mesaje de avertizare diferite pentru situatii diferite. Putem obtine acest lucru foarte simplu trecand mesajul catre functie ca un argument:
<script language="JavaScript" type="text/javascript" >
function showAlert(message) {
alert(message)
}
</script>
Functia se asteapta acum sa gaseasca textul mesajului definit, trecut ca argument in cadrul apelarii. Se rescrie codurile di HTML:
<img src="cathedral.jpg" border="2" onMouseOver="showAlert('Aceasta este o imagine!')" alt="cathedral" />
De asemenea vom rescrie si codul din onClick:
<input type="button" value="Apasa aici" onClick="showAlert('Ai apasat butonul!')" />Alti manageri de eveniment
- onChange - apare cand se modifica valoarea dintr-un camp de introducere a datelor.
- onClick - apare cand utilizatorul executa click cu mouse-ul pe respectivul element.
- onLoad - apare la terminarea incarcarii paginii.
- onMouseOver - cursorul intra in zona de ecran ocupata de elementul respectiv.
- onMouseOut - cand o paraseste.
- onSubmit - apare in momentul cand este transmis un formular.
Java Script ofera posibilitatea de a defini si utiliza variabile si vectori, de a lucra aritmetic cu date calendaristice si ore si de a controla fluxul programului cu cicluri si ramuri conditionale.
Variabile
Conceptul de variabila probabil ca va este familiar daca ati vreodata algebra sau ati programat intr-un libaj oarecare. O variabila este o informatie careia i s-a dat un nume la care se poate face usor referire. In JS variabilele se declara folosind cuvantul var.
var speed = 63;
Validarea Formularelor
Dorim sa capturam evenimentul prin care utilizatorul incearca sa transmita formularul si sa folosim acest eveniment pentru a declansa functia noastra JS care verifica validitatea datelor. Codul HTML este:
<form name="form1" method="post" action="otherpage.html">Acum vom scrie functia:
Introduceti un numar de la 1 la 10: <input size="4" type="text" name="usernumber">
<input type="submit" value="Enter" onSubmit="return numcheck()">
</form>
<script language="JavaScript" type="text/javascript">Bibliografie
function numcheck() {
var numentered = document.form1.usernumber.value;
if((numentered>=1)&&(numentered<=10)) {
return true;
} else {
alert("Datele introduse sunt incorecte. Incercati din nou");
return false;
}
}
</script>
http://www.mybloggerlab.com/2012/04/insert-html-css-javascript-codes-in.html
http://www.w3schools.com/js/default.asp
Niciun comentariu:
Trimiteți un comentariu