Tutorial JavaScript

<< Inapoi
Inainte >>

Introducere

JavaScript este un limbaj de programare care extinde posibilitatile Html, introducand interactivitate in paginile web. Se mai numeste si limbaj pentru scripturi.

JavaScript-urile pot fi introduse in paginile web pentru realizarea de calcule (operatii aritmetice, conversii marimi), pentru derularea meniurilor, pentru validarea formelor html (campuri de text completate), animatii, imagini, sunete, alerte.
Aceste scripturi sunt executate in cadrul browserului utilizatorului, micsorand traficul intre server si client.
JavaScript-urile se insereaza intre tag-urile <script> si </script> si pot fi utilizate in sectiunea <head>, in sectiunea <body> sau ca scripturi externe (vedeti documentatia Html).
Insa, pentru a simplifica codul paginii web si a creste viteza de incarcare a acesteia, se prefera utilizarea JavaScript-urilor externe. Astfel, JavaScript-ul folosit va fi salvat de exemplu cu numele test.js, si pentru a avea acces la el, in sectiunea <head> se introduce instructiunea:


<script src="test.js">


Cu ajutorul JavaScript-urilor se poate modifica continutul unei pagini web. Una din metodele folosite este gasirea unui element html folosind un identificator (de exemplu: id="test") si modificarea continutului acestuia (innerHTML).
Mai jos avem un exemplu de inlocuire a unui paragraf de text cu altul in momentul apasarii unui buton:


Schimbare text

Si dupa apasarea butonului:


Schimbare text

JavaScript-urile pot utiliza functii si evenimente. O functie este un bloc de cod care se executa cand este apelata. Ea poate fi apelata cand apare un eveniment (apasare buton, miscare mouse peste un element, incarcare pagina).
Exemplu de executie functie la incarcarea paginii:


Executie functie

Afisarea elementelor in pagina web cu ajutorul JavaScript-urilor

JavaScript-urile pot afisa elemente in pagina web in mai multe moduri:
- Utilizand sintaxa: innerHTML
Pentru a accesa un element din pagina web, JavaScript foloseste metoda:


document.getElementById(id)


innerHTML

- Pentru afisarea unui element, se poate folosi si metoda:


document.write()


Document write

Cu ajutorul JavaScript-urilor se pot efectua operatii matematice. Spre exemplu adunarea a doua numere:


Adunare numere

Un alt exemplu de executie a unei functii, folosind un JavaScript extern:


Buton javascript

Si inserarea unui text cand se da click pe un element de text:


Buton javascript

In functie de ora la care este accesata pagina web, se poate primi un mesaj de intampinare:


Mesaj

Iar la apasarea butonului:


Mesaj

Putem sa modificam stilul unui element (in cazul nostru, marimea fontului):


Schimbare stil

Iar la apasarea butonului, vom avea:


Schimbare stil

Putem face redirectarea dintr-o pagina web spre alta:


Redirectare pagina

Iar dupa 5s se va afisa noua pagina:


Redirectare pagina

Putem realiza un convertor din grade Farenheit in Celsius:


Conversie grade
<< Inapoi
Inainte >>