Primii pasi in javascript
In acest articol am sa povestesc despre cum putem adauga javascript in pagina noastra atat in fisierul html, inline cat si intr-un fisier extern.
Cum adaugam javascript in pagina
Exista 3 moduri de a adauga javascript in pagina noastra
-
In HTML-ul paginii intr-un tag <script>
-
Intr-un fisier extern cu extensia .js care se va incarca in pagina folosind atributul src al tag-ului <script>
-
Inline, apeland javascript-ul pe un tag html folosind un atribut precum onclick, onmouseover, onkeypress,onload, etc
Javascript in folosind tag-ul <script>
Putem adauga javascript in pagina noastra putem crea un tag <script> </script> in interiorul caruia sa punem codul nostru javascript.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Invata-Programare</title> </head> <body> <script> // am creat o variabila care are ca si valoarea un sir de caractere var salut = "Salutari comunitatii Invata-Programare.ro"; // urmatorul rand afiseaza pe ecran continutul variabilei document.write(salut); </script> </body> </html>
Cum incarcam Javascript dintr-un fisier extern
De asemenea, putem pune codul javascript intr-un fisier extern cu extensia .js si adaugat in pagina folosin atributul src al tag-ului <script>
<script src="js/salutari.js"></script>
Punem aceasta linie de cod inainte de a inchide tag-ul </body> din fisierul html si facem un fisier nou, salutari.js in folder-ul js:
// am creat o variabila care are ca si valoarea un sir de caractere var salut = "Salutari comunitatii Invata-Programare.ro"; // urmatorul rand afiseaza pe ecran continutul variabilei document.write(salut);
Acum, cand intram pe pagina o sa vedem mesajul setat in fisierul .js
Cum punem javascript inline
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Invata-Programare</title> </head> <body> <div onclick="alert('Salutari comunitatii Invata-Programare.ro')">click pe acest element</div> </body> </html>
De asemenea, putem folosi javascript in mod inline, direct in tag-ul html dorit folosind unul dintre atributele menionate mai sus, onclic, onmouseover, onkeypress, onload si asa mai departe.
Pozitia elementului script in fisierul HTML
Elementul <script> poate fi pus atat in sectiunea <head> a fisierului HTMl cat si in sectiunea <body>. In mod ideal, acesta este pozitionat inainte de inchiderea tag-ului <body>, pentru a incarca fisierul javascript dupa ce pagina a fost incarcata.
Elementul <script> va bloca afisarea paginii pana cand ce javascript-ul nu este complet incarcat (fie el intr-un fisier separat sau in fisierul HTML intre tag-urile script).