¿Dónde funciona JavaScript?
JavaScript, aunque puede ser usado de otros modos, tradicionalmente se utiliza sobre páginas web HTML para realizar operaciones sobre la información disponible en la propia web (comprobar fechas, sumar dos valores,…). Este lenguaje es uno de los 3 lenguajes básicos que debe conocer todo programador web:
1. HTML es utilizado para definir el contenido de una página web (botones, textos, tablas, alineaciones,…)
2. CSS es utilizado para especificar formatos, temas o estilos uniformes en una web (color de la cabecera, ciertos textos en negrita, campos en gris o blanco dependiendo de su estado,…).
3. JavaScript es utilizado para programar el comportamiento de una web (mensajes de error si introduces una fecha de forma incorrecta, validación de textos, sumas automáticas de números,…).
Con esta introducción o aclaración pretendemos llegar a la siguiente conclusión, vamos a hacer funcionar JavaScript sobre HTML.
1. ¿Dónde funciona JavaScript?
1.1 Uso de métodos simples
Este lenguaje posee muchos métodos propios, en su gran mayoría son usados directamente sobre el propio código o texto HTML donde nos interese, no obstante, otros casos como las funciones son declaradas normalmente en la sección <header> aunque se podría utilizar en la sección <body>. En resumen ancha es castilla y podemos usar nuestro código de forma flexible, sin embargo, por seguir un orden recomendamos en principio declarar las funciones en la cabecera o <header> de nuestro HTML.
Comenzaremos con un ejemplo que modificará un texto. JavasScript, si existen por ejemplo tres textos en un HTML, no sabe por si solo que texto debe modificar o tratar, así pues, tendremos que asignar un nombre o identificador a cada texto y luego indicar a nuestro método de JavaScript cual de estos textos es el que nos interesa. A continuación mostraremos un ejemplo con tres textos en HTML.
<!DOCTYPE html>
<html>
<body>
<p id=»Texto1″>Texto número 1</p>
<p id=»Texto2″>Texto número 2</p>
<p id=»Texto3″>Texto número 3</p>
</body>
</html>
Nota: Para ver el resultado guardaremos el texto anterior en un fichero con extensión .html y lo abriremos en cualquier explorador (Internet Explorer, Chrome, Firefox,…).
Nuestro primer ejemplo con JavaScript será a través del método getElementById(), este método básicamente encontrará el texto o elemento con identificador «Texto1» y usaremos la operación innerHTML para modificar el contenido. Por último, para que modifique «Texto1» cuando nosotros queramos introduciremos la llamada a getElementById() dentro de un botón. El ejemplo quedaría del siguiente modo:
<!DOCTYPE html>
<html>
<body>
<p id=»Texto1″>Texto número 1</p>
<p id=»Texto2″>Texto número 2</p>
<p id=»Texto3″>Texto número 3</p>
<button type=»button» onclick=’document.getElementById(«Texto1»).innerHTML = «Acabas de modificar el texto ¡Enhorabuena!»‘>Pulsa aquí</button>
</body>
</html>
Esperamos no haberos liado mucho al usar tantas cosas a la vez como son los identificadores id, los botones button, el método getElementById() y la operación de cambio de contenido innerHTML tan rápido y en el primer ejemplo, entraremos en más detalle en los próximos artículos sobre esto, en este artículo únicamente queremos donde se puede usar y necesitábamos un ejemplo sencillo.
1.2 Uso de llamadas a funciones
En nuestro segundo ejemplo haremos lo mismo pero a través de una función que declararemos entre una sección <script></script> que indicará al HTML de que se trata de código JavaScript, esta función la declararemos en el <header> de nuestra página web y evitará que usemos continuamente el chorizo getElementById().innerHTML cada vez que queramos reemplazar un texto. El ejemplo es el siguiente:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById(«Texto1»).innerHTML = «Acabas de modificar el texto!»;
}
</script>
</head>
<body>
<p id=»Texto1″>Texto numero 1</p>
<p id=»Texto2″>Texto numero 2</p>
<p id=»Texto3″>Texto numero 3</p>
<button type=»button» onclick=»myFunction()«>Pulsa aqui</button>
</body>
</html>
Nota: Marcamos en rojo los puntos importantes para que sea más fácil localizar como la declaración superior de la función es usada posteriormente en el botón que cambiará el texto.
Enlaces de interés: https://www.w3schools.com/js/js_intro.asp
Con este artículo damos por iniciada la colección de primavera/verano de JavaScript!. En los siguientes artículos comenzaremos con la declaración de variables y operadores disponibles!
