JavaScript în HTML
JavaScript face paginile HTML mai dinamice și interactive.
Exemplu
Un buton care afișează data și ora la apăsare.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Js Intro</title>
</head>
<body>
<h2>Primul meu JavaScript</h2>
<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
Dă clic pentru a afișa data și ora</button>
<p id="demo"></p>
</body>
</html>
Tag-ul HTML <script>
Tag-ul <script> definește un script pe partea de client (JavaScript). Fie conține direct instrucțiunile scriptului, fie indică spre un fișier extern cu atributul src. Utilizări comune sunt manipularea imaginilor, validarea formularelor și schimbarea conținutului. Pentru a selecta un element, JavaScript folosește cel mai adesea document.getElementById().
Exemplu
Un script care scrie text într-un element cu id="demo".
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Script Write</title>
</head>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
</html>
O Mostră de JavaScript
Iată câteva lucruri pe care le poate face JavaScript: schimbă conținut, schimbă stiluri și schimbă atribute ale elementelor.
Schimbă conținut
Schimbarea conținutului unui element.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Js Change Content</title>
</head>
<body>
<p id="demo">Salut Lume!</p>
<button type="button" onclick="document.getElementById('demo').innerHTML = 'Salut JavaScript!'">Schimbă conținutul</button>
</body>
</html>
Schimbă stiluri
Schimbarea dimensiunii, culorii și fundalului unui element.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Js Change Styles</title>
</head>
<body>
<p id="demo">Salut Lume!</p>
<button type="button" onclick="changeStyle()">Schimbă stilul</button>
<script>
function changeStyle() {
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
}
</script>
</body>
</html>
Schimbă atribute
Schimbarea atributului src al unei imagini.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Js Change Attributes</title>
</head>
<body>
<img id="image" src="smiley.gif" alt="Imagine">
<button type="button" onclick="document.getElementById('image').src = 'picture.gif'">Schimbă imaginea</button>
</body>
</html>
Tag-ul HTML <noscript>
Tag-ul <noscript> definește conținut alternativ afișat utilizatorilor care au scripturile dezactivate, sau al căror browser nu suportă scripturi.
Exemplu
Un script cu un mesaj de rezervă <noscript>.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Noscript</title>
</head>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>Ne pare rău, browserul tău nu suportă JavaScript!</noscript>
</body>
</html>