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>