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).
Stefanescu Mihai
