Javascript en HTML

JavaScript hace que las páginas HTML sean más dinámicas e interactivas.

Ejm

<!DOCTYPE html>

<html lang="es">

	<body>

		<h1>Mi primer Javascript</h1>




		<button type="button" onclick="document.getElementById('demo').innerHTML=Date()">

		Haz clic para mostrar la fecha actual</button>




		<p id="demo"></p>

	</body>

</html>

La etiqueta HTML <script>

La etiqueta HTML <script> se usa 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 utiliza con mayor frecuencia 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">

	<html>

		<h1>Mi primer Javascript</h1>

		<p>Este ejm escribe 'Hola Javascript' en un elemento con el id=demo</p>

		<button type="button" onClick="document.getElementById('demo').innerHTML='Hola Javascript'">Haz click</button>




		<p id="demo"></p>

	</html>

</html>

Una muestra de JavaScript

Javascript puede cambiar contenido

Ejm

document.getElementById("demo").innerHTML = "Hello JavaScript!";

Javascript puede cambiar estilos

Ejm

document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";

Javascript puede cambiar atributos

Ejm

La etiqueta HTML <noscript>

La etiqueta HTML <noscript> define un contenido alternativo que se mostrará a los usuarios que han deshabilitado los scripts en su navegador o que tienen un navegador que no admite scripts:

Ejm

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

<noscript>Sorry, your browser does not support JavaScript!</noscript>

<p>A browser without support for JavaScript will show the text written inside the noscript element.</p>

</body>
</html>