{"id":1353,"date":"2026-03-27T07:00:00","date_gmt":"2026-03-27T06:00:00","guid":{"rendered":"https:\/\/programaraciegas.net\/?p=1353"},"modified":"2026-03-14T16:19:18","modified_gmt":"2026-03-14T15:19:18","slug":"introduccion-a-javascript","status":"publish","type":"post","link":"https:\/\/programaraciegas.net\/?p=1353","title":{"rendered":"Introducci\u00f3n a Javascript"},"content":{"rendered":"

Cuando abrimos una p\u00e1gina web en el navegador, \u00e9ste interpreta el c\u00f3digo HTML<\/a> para entender qu\u00e9 contenido hay y qu\u00e9 significa cada parte. Despu\u00e9s aplica el CSS para definir el aspecto visual de ese contenido. Pero una p\u00e1gina web moderna no solo necesita estructura y presentaci\u00f3n: en muchos casos tambi\u00e9n necesita comportamiento, l\u00f3gica e interacci\u00f3n. Ah\u00ed es donde entra JavaScript.<\/p>\n

JavaScript es el lenguaje que permite que una p\u00e1gina web responda a acciones del usuario, modifique contenidos, valide formularios, cargue informaci\u00f3n sin recargar toda la p\u00e1gina o cambie el estado de distintos elementos de la interfaz. Es, por tanto, la parte de la Web que aporta funcionalidad y dinamismo.<\/p>\n

Qu\u00e9 es JavaScript<\/h2>\n

JavaScript es un lenguaje de programaci\u00f3n. A diferencia de HTML y CSS, que no son lenguajes de programaci\u00f3n, Javascript s\u00ed puede ejecutar comandos y funciones de l\u00f3gica. Esto no implica que Javascript no tenga que relacionarse con HTML o CSS. Con HTML describimos el contenido y su estructura. Con CSS definimos la presentaci\u00f3n visual. Con JavaScript programamos el comportamiento de la p\u00e1gina.<\/p>\n

D\u00f3nde se puede usar Javascript<\/h2>\n

Aunque mucha gente identifica JavaScript solo con el navegador, el lenguaje tambi\u00e9n se puede utilizar fuera de la Web en otros entornos como scripts en la Terminal de Linux o MacO\u00e7S, como lenguaje de programaci\u00f3n para servidores con NodeJS o para programar servicios para la Nube.<\/p>\n

El est\u00e1ndar del lenguaje se denomina ECMAScript<\/strong>, y JavaScript es su implementaci\u00f3n m\u00e1s conocida en la actualidad.<\/p>\n

Ejemplo b\u00e1sico en JavaScript<\/h2>\n

A continuaci\u00f3n tenemos un ejemplo de una p\u00e1gina HTML con un bot\u00f3n y un peque\u00f1o fragmento de JavaScript:<\/p>\n

<!doctype html>
<html lang=\"es\">
<head>
<meta charset=\"utf-8\">
<title>Mi primera p\u00e1gina con JavaScript<\/title>
<\/head>
<body>
<h1>Mi primera p\u00e1gina con JavaScript<\/h1>
<p id=\"mensaje\">Todav\u00eda no ha pasado nada.<\/p>
<button id=\"boton\">Pulsa aqu\u00ed<\/button><\/p>\n

<script>
document.getElementById(\"boton\").addEventListener(\"click\", function () {
document.getElementById(\"mensaje\").textContent = \"Has pulsado el bot\u00f3n.\";
});
<\/script>
<\/body>
<\/html><\/code><\/p>\n

Si guardamos ese contenido en un fichero con extensi\u00f3n .html y lo abrimos con el navegador, veremos una p\u00e1gina con un bot\u00f3n. Al pulsarlo, el texto del p\u00e1rrafo cambiar\u00e1.<\/p>\n

Ese cambio no lo hace HTML ni lo hace CSS. Lo hace JavaScript.<\/p>\n

Qu\u00e9 est\u00e1 ocurriendo en el ejemplo<\/h3>\n

Aunque a primera vista pueda parecer mucho c\u00f3digo, en realidad est\u00e1n pasando pocas cosas.<\/p>\n

Primero tenemos este p\u00e1rrafo:<\/p>\n

<p id=\"mensaje\">Todav\u00eda no ha pasado nada.<\/p><\/code><\/p>\n

Ese p\u00e1rrafo tiene un atributo id con el valor mensaje<\/em>. Ese identificador nos permite localizar el elemento desde JavaScript.<\/p>\n

Despu\u00e9s tenemos este bot\u00f3n:<\/p>\n

<button id=\"boton\">Pulsa aqu\u00ed<\/button><\/code><\/p>\n

Tambi\u00e9n tiene un id, en este caso boton<\/em>.<\/p>\n

Y por \u00faltimo aparece el bloque script:<\/p>\n

<script>
document.getElementById(\"boton\").addEventListener(\"click\", function () {
document.getElementById(\"mensaje\").textContent = \"Has pulsado el bot\u00f3n.\";
});
<\/script><\/code><\/p>\n

Ese bloque contiene c\u00f3digo JavaScript que el navegador ejecuta. La instrucci\u00f3n busca el bot\u00f3n, escucha el evento de pulsaci\u00f3n (click) y, cuando ese evento ocurre, modifica el texto del p\u00e1rrafo.<\/p>\n

La etiqueta <script><\/h2>\n

La forma m\u00e1s habitual de incluir JavaScript en una p\u00e1gina HTML es mediante la etiqueta <script><\/strong>.<\/p>\n

Puede escribirse directamente dentro del propio documento HTML:<\/p>\n

<script>
console.log(\"Hola desde JavaScript\");
<\/script><\/code><\/p>\n

O bien enlazarse desde un fichero externo:<\/p>\n

<script src=\"app.js\"><\/script><\/code><\/p>\n

En la pr\u00e1ctica, cuando el c\u00f3digo crece, lo normal es utilizar un fichero independiente. Esto facilita el mantenimiento, permite reutilizar c\u00f3digo y evita mezclar demasiadas responsabilidades en el HTML.<\/p>\n

JavaScript y el DOM<\/h2>\n

Cuando JavaScript trabaja con una p\u00e1gina HTML, normalmente no \u201cve\u201d el fichero como texto plano, sino como una estructura interna que el navegador ha construido en memoria.<\/p>\n

A esa representaci\u00f3n se la suele llamar DOM<\/strong> (Document Object Model).<\/p>\n

Utilizando el DOM, JavaScript puede realizar diversas funciones como buscar y manipular elementos de la p\u00e1gina, a\u00f1adir y eliminar elementos, reaccionar a eventos provocados por el usuario o por el navegador…<\/p>\n

JavaScript no sustituye a HTML<\/h2>\n

Una idea importante al empezar es que JavaScript no deber\u00eda utilizarse para suplir una mala estructura HTML.<\/p>\n

Primero conviene tener un documento HTML bien organizado y sem\u00e1ntico. Despu\u00e9s CSS se ocupa de la presentaci\u00f3n. Y finalmente JavaScript a\u00f1ade comportamiento.<\/p>\n

Si se invierte ese orden, es f\u00e1cil terminar con p\u00e1ginas dif\u00edciles de mantener, menos accesibles y m\u00e1s fr\u00e1giles.<\/p>\n

En art\u00edculos anteriores indicamos que HTML describe contenido<\/a> y CSS describe presentaci\u00f3n. Siguiendo esa idea de separar contenido, dise\u00f1o y funcionalidad, <\/a>Javascript debe a\u00f1adir funcionalidad sin romper la sem\u00e1ntica del documento. Esta separaci\u00f3n de responsabilidades hace que la p\u00e1gina sea m\u00e1s clara, con un mejor mantenimiento y m\u00e1s robusta.<\/p>\n

JavaScript no debe ser intrusivo ni imprescindible<\/h2>\n

Aunque JavaScript aporta mucha potencia a una p\u00e1gina web, conviene usarlo con cierta prudencia.<\/p>\n

Una mala pr\u00e1ctica bastante com\u00fan consiste en construir p\u00e1ginas que dependen completamente de JavaScript para funcionar, incluso en tareas b\u00e1sicas como mostrar contenido, seguir enlaces o enviar un formulario. Cuando esto ocurre, la p\u00e1gina se vuelve dependiente de Javascript y, en muchos casos, menos accesible.<\/p>\n

Lo apropiado es que HTML proporcione una base s\u00f3lida por s\u00ed mismo. Es decir, que la estructura del documento, los enlaces, los textos y la informaci\u00f3n principal existan ya en el marcado. Despu\u00e9s, JavaScript puede enriquecer esa base con comportamiento adicional: validar datos en el navegador, mostrar u ocultar partes de la interfaz, actualizar contenidos o responder a acciones del usuario.<\/p>\n

Con esto se mantiene la idea de que JavaScript deber\u00eda mejorar la experiencia, no convertirse en un obst\u00e1culo.<\/p>\n

Tambi\u00e9n conviene evitar un uso intrusivo del lenguaje. Por ejemplo, no es buena idea abrir ventanas inesperadas, cambiar el foco sin necesidad, alterar el contenido de manera brusca sin avisar o interceptar comportamientos normales del navegador si no hay un motivo claro. Todas esas pr\u00e1cticas pueden desorientar a muchas personas usuarias y hacer que la navegaci\u00f3n resulte confusa.<\/p>\n","protected":false},"excerpt":{"rendered":"

Cuando abrimos una p\u00e1gina web en el navegador, \u00e9ste interpreta el c\u00f3digo HTML para entender qu\u00e9 contenido hay y qu\u00e9 significa cada parte. Despu\u00e9s aplica el CSS para definir el aspecto visual de ese contenido. Pero una p\u00e1gina web moderna no solo necesita estructura y presentaci\u00f3n: en muchos casos tambi\u00e9n necesita comportamiento, l\u00f3gica e interacci\u00f3n. … <\/p>\n

Continuar leyendo \u00abIntroducci\u00f3n a Javascript\u00bb<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,5,542,334,114,6],"tags":[333,327,94],"class_list":["post-1353","post","type-post","status-publish","format-standard","hentry","category-desarrollo","category-diseno","category-html-2","category-javascript","category-navegadores-web","category-programacion","tag-html","tag-javascript","tag-web"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts\/1353","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1353"}],"version-history":[{"count":0,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts\/1353\/revisions"}],"wp:attachment":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1353"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1353"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1353"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}