JavaScript hace que las páginas HTML sean más dinámicas e interactivas.
Ejm
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<h1>Mi primer Javascript</h1>
<button type="button" onClick="document.getElementById('demo').innerHTML=Date()">
Haz clic para mostrar la fecha</button>
<p id="demo"></p>
</body>
</html>La etiqueta HTML <script>
La etiqueta HTML <script> se utiliza para definir un script del lado del cliente (JavaScript). El elemento <script> contiene sentencias de script o apunta a un archivo de script externo a través del atributo src. Los usos comunes de JavaScript son la manipulación de imágenes, la validación de formularios y los cambios dinámicos de contenido. Para seleccionar un elemento HTML, JavaScript suele utilizar el método document.getElementById(). Este ejemplo de JavaScript escribe «¡Hola, JavaScript!» en un elemento HTML con id=»demo».
Ejm
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<h1>Ejm Javascript</h1>
<p>Este ejm escribe "Hola Javascript" dentro de un elemento con un id="demo"</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML="Hola Javascript";
</script>
</body></html>
Una muestra de JavaScript
Veamos algunos ejms de lo que podemos hacer con Javascript.
Javascript puede cambiar contenido
Ejm
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<h1>Mi primer Javascript</h1>
<h2>Javascript puede cambiar el contenido de un elemento HTML</h2>
<button type="button" onClick="myFunction()">Haz clic</button>
<p id="demo">Esto es una demostración de Javascript</p>
<script>
function myFunction(){
document.getElementById("demo").innerHTML="Hola Javascript";
}
</script>
</body>
</html>Javascript puede cambiar estilos
Ejm
<!DOCTYPE html>
<html lang="es">
<body>
<h1>Mi primer Javascript</h1>
<p id="demo">Javascript puede cambiar estilos en elementos HTML</p>
<script>
function myFunction(){
document.getElementById("demo").style.fontSize="25px";
document.getElementById("demo").style.color="red";
document.getElementById("demo").style.backgroundColor="yellow";
}
</script>
<button type="button" onClick="myFunction()">Haz clic</button>
</body>
</html>La etiqueta <noscript>
La etiqueta HTML <noscript> define un contenido alternativo que se mostrará a los usuarios que tienen scripts deshabilitados en su navegador o tienen un navegador que no admite scripts.
Ejm
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hola Javascript!";
</script>
<noscript>Tu navegador no soporta Javascript</noscript>
<p>Un navegador sin soporte para Javascript sólo mostrará el
texto escrito dentro del elemento noscript.</p>
</body>
</html>