Por medio de JavaScript conseguirás páginas HTML más dinámicas e interactivas.
La etiqueta <script> de HTML
Por medio de la etiqueta <script> podrás definir pequeños programas (scripts), ejecutados del el lado del cliente, es decir por tu navegador.
Puedes crear scripts utilizando diversos lenguajes de programación. Uno de los más populares es JavaScript.
El elemento <script> o bien contiene los comandos del propio script o apunta a un archivo de script externo a través del atributo src.
Entre otras posibilidades, podrás utilizar JavaScript para manipular imágenes, validar formularios o realizar cambios dinámicos en el contenido de las páginas web.
El script siguiente muestra el texto “Hola JavaScript” a través de un elemento HTM con id=”demo”
Ejemplo
<!DOCTYPE html>
<html>
<title>Ejemplo HTML - Webdisenia</title>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hola JavaScript";
</script>
</body>
</html>
Resultado en el navegador
Hola JavaScript
La etiqueta <noscript> de HTML
Puedes utilizar la etiqueta <noscript> para proporcionar un contenido alternativo a los usuarios que hayan desactivado en su navegador la posibilidad de utilizar scripts o tienen navegadores que no los soportan.
Ejemplo
<!DOCTYPE html>
<html>
<title>Ejemplo HTML - Websenia</title>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hola JavaScript";
</script>
<noscript>Lo sentimos, su navegador no soporta JavaScript</noscript>
<p>Los navegadores sin soporte para JavaScript mostrarán el texto escrito entre las etiquetas <noscript> y </noscript>.</p>
</body>
</html>
Resultado en el navegador
Hola JavaScript
Los navegadores sin soporte para JavaScript mostrarán el texto escrito entre las etiquetas noscript y /noscript.
Algunos ejemplos con JavaScript
A continuación te muestro algunos ejemplo de lo que se puede hacer con JavaScript:
Con JavaScript puedes cambiar el contenido HTML:
Ejemplo
<!DOCTYPE html>
<html>
<title> Ejemplo HTML - Webdisenia </title>
<body>
<h1>Ejemplo JavaScript - Webdisenia</h1>
<p>Con JavaScript puedes cambiar el contenido de un elemento HTML:</p>
<button type="button" onclick="myFunction()">¡Clic Aquí!</button>
<p id="demo">Esto es una demostración.</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "¡Hola JavaScript!";
}
</script>
</body>
</html>
Resultado en el navegador
Haz clic aquí para ver el resultado en una nueva página
Con JavaScript puedes cambiar los estilos HTML:
Ejemplo
<!DOCTYPE html>
<html>
<Title>Ejemplo HTML - JavaScript</title>
<body>
<h1>Ejemplo JavaScript - Webdisenia</h1>
<p id="demo">JavaScript puede cambiar el estilo de un elemento HTML.</p>
<script>
function myFunction() {
document.getElementById("demo").style.fontSize = "25px";
}
</script>
<button type="button" onclick="myFunction()">¡Clic aquí!</button>
</body>
</html>
Resultado en el navegador
Haz clic aquí para ver el resultado en una nueva página
Con JavaScript puedes cambiar los atributos HTML:
Ejemplo
<!DOCTYPE html>
<html>
<Title>Ejemplo HTML - JavaScript</title>
<body>
<h1>Ejemplo JavaScript - Webdisenia</h1>
<p>JavaScript puede cambiar los atributos de un elemento HTML.</p>
<script>
function light(sw) {
var pic;
if (sw == 0) {
pic = "noche.png"
} else {
pic = "dia.png"
}
document.getElementById('myImage').src = pic;
}
</script>
<img id="myImage" src="noche.png">
<p>
<button type="button" onclick="light(1)">De día</button>
<button type="button" onclick="light(0)">De noche</button>
</p>
</body>
</html>
Resultado en el navegador
Haz clic aquí para ver el resultado en una nueva página
