w3docs logo

Comienza a usar Javascript

Escribiendo tu primer programa en JavaScript

HTML no puede hacer cálculos matemáticos, no puede determinar si alguien ha completado correctamente un formulario. HTML solo permite a las personas leer el texto, ver videos, mirar imágenes y hacer clic en enlaces. Necesitas JavaScript para agregar inteligencia a tus páginas web para que puedan responder a los visitantes de tu sitio. Entonces, JavaScript te permite hacer que tus sitios web sean más atractivos, efectivos y útiles.

JavaScript es más complejo que HTML o CSS, el objetivo principal de este libro es ayudarte a pensar más como un programador. Un programa de JavaScript tiene este tipo de símbolos ({ } [ ] ; , () !=) y muchas palabras desconocidas (var, null, else if). Podemos decir que aprender un lenguaje de programación es muy parecido a aprender un nuevo idioma. Necesitas aprender nuevas palabras y entender cómo combinarlas.

¿Qué es un programa de computadora?

Agregar JavaScript a una página web significa que estás escribiendo un programa de computadora. Muchos programas de JavaScript son mucho más simples que los programas que utilizas para leer correos electrónicos, construir páginas web. Pero, aunque los programas de JavaScript, que también son scripts, son más simples y cortos, comparten muchas de las mismas propiedades de los programas más complicados.

Si quieres mostrar un mensaje de bienvenida usando el nombre del visitante de la página web: “¡Bienvenido, John Doe!”, necesitas hacer varias cosas:

  • Preguntar el nombre del visitante;
  • Obtener la respuesta del visitante;
  • Imprimir el mensaje en la página web.

Cuando quieres crear un programa JavaScript, debes determinar los pasos necesarios para lograr tu objetivo. Después de conocer los pasos, traducirás tus ideas en código de programación: las palabras y caracteres que hacen que el navegador web se comporte como tú quieres.

Cómo agregar JavaScript a una página

Los navegadores web pueden entender HTML y CSS y convertir esos lenguajes en una visualización en la pantalla. El navegador web espera HTML, por lo que debes indicar claramente al navegador cuándo viene JavaScript usando la etiqueta <script>.

Después de abrir tu consola preferida (como Node.js), solo necesitas adjuntar un script a una página web. Para vincular Javascript a la página HTML, debes usar el elemento <script>, que nos ayuda a insertar programas de Javascript en cualquier parte del documento HTML. Por ejemplo:

<!DOCTYPE HTML>
<html>
  <body>
    <p>Before the script...</p>
    <script>
      alert('Hello, world!');
    </script>
    <p>...After the script.</p>
  </body>
</html>

Hablemos de las etiquetas de apertura y cierre <script>. Si quieres agregar un script a tu página, debes comenzar insertando etiquetas que incluyan el propio script o un enlace a un archivo externo que contenga scripts. En muchos casos, colocarás las etiquetas <script> en el <head> de la página para mantener tu código JavaScript organizado inteligentemente en una parte de la página web.

El elemento <script> tiene algunos atributos, los cuales no usamos tan a menudo hoy en día. Pero aún podemos encontrarlos en código antiguo:

El atributo type: <script type=…>

Para tener un tipo en HTML antiguo - HTML4, era necesario un script. Anteriormente era type="text/javascript", que ya no es necesario hoy en día. Excepto por eso, el estándar moderno de HTML cambió completamente el significado de este atributo. Hoy en día podemos usarlo para módulos de JavaScript. Pero hablaremos de módulos más adelante, ya que es un tema avanzado.

El atributo language: <script language=…>

El atributo presentado anteriormente se suponía que mostraba el lenguaje del script. Pero como JavaScript es el lenguaje predeterminado, no es necesario usarlo.

Archivos de JavaScript Externos

Como mencionamos anteriormente, usar la etiqueta <script> te permite agregar JavaScript a una sola página web. Pero también necesitarás crear scripts que quieras compartir con todas las páginas de tu sitio. Pero simplemente copiar y pegar el mismo código de JavaScript en cada página no es tan buena idea, especialmente cuando tienes un sitio con cientos de páginas.

En resumen, usamos scripts externos cuando tenemos mucho código en JavaScript. De esta manera obtenemos la reutilización del código, ya que un solo archivo de JavaScript puede ser utilizado en varias páginas html. La extensión para el archivo de JavaScript es .js. Si queremos usar un script externo, debemos poner el nombre del archivo de script en el atributo src (source) de una etiqueta <script>:

<script src="W3DocsScript.js"></script>

Con ayuda del atributo src, podemos agregar archivos de script a HTML.

<script src="/path/W3DocsScript.js"></script>

En este ejemplo /path/W3DocsScript.js es una ruta absoluta para el script, que también puede proporcionar alguna ruta relativa desde la misma página. Por ejemplo, src="W3DocsScript.js" significa un archivo "W3DocsScript.js".

También podemos dar una URL completa, que se verá así:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Si queremos adjuntar varios scripts, debemos usar varias etiquetas:

<script src="/W3DocsScript1.js"></script>
<script src="/W3DocsScript2.js"></script>
...

Si se establece src, el contenido del script será ignorado. Significa que una sola etiqueta <script> no puede tener al mismo tiempo el atributo src y código adentro. Simplemente no funcionará:

<!DOCTYPE HTML>
<html>
  <body>
    <p>Before the script...</p>
    <script src="W3DocsScript.js">
      alert("Hello, world!"); // the content is ignored, because src is set
    </script>
    <p>...After the script.</p>
  </body>
</html>

Necesitamos elegir entre un <script src="…"> externo o una <script> regular con código. Solo después de eso, podemos dividir este ejemplo en dos scripts para que funcione:

<!DOCTYPE HTML>
<html>
  <body>
    <p>Before the script...</p>
    <script src="W3DocsScript.js"></script>
    <script>
      alert("Hello, world!");
    </script>
    <p>...After the script.</p>
  </body>
</html>

Tu primer programa en JavaScript

Vamos a empezar a programar, tu primer programa será muy sencillo:

  • Abre un archivo HTML sencillo en tu editor de texto favorito.
  • Antes de la etiqueta </body> al final, pulsa una línea vacía y escribe: <script>
  • Presiona la tecla return para crear una nueva línea en blanco, y escribe: alert('Bienvenido a W3Docs');

    ¡Felicidades! Has escrito tu primera línea de código en JavaScript.

  • Luego, escribe </script>. El código debería verse así: 
    <!DOCTYPE HTML>
<html>
  <head>
    <link href="../_css/style.css" rel="stylesheet">
  </head>
  <body>
    <p>Before the script...</p>
    <script>
      alert('Welcome to W3Docs');
    </script>
  </body>
</html>
  • Activa un navegador web y abre el archivo test1.html para previsualizarlo. Notarás que la página está vacía cuando aparece la alerta.
  • Al hacer clic en el botón OK de la caja de Alerta la cerrarás. Después de que la caja de Alerta desaparezca, la página web aparecerá en la ventana del navegador.

Escribiendo texto en una página web

El script de la sección anterior apareció en el medio de tu monitor. Pero si quieres imprimir un mensaje directamente en una página web usando JavaScript, puedes utilizar un comando incorporado de JavaScript:

  • Abre el archivo test2.html en tu editor de texto.

    Aunque las etiquetas <script> aparecen en el <head> de la página web, puedes ponerlas y los programas JavaScript directamente en el cuerpo de la página.

  • Debajo de <h1> Escribiendo en la ventana del documento </h1>, escribe este código: 
    <!DOCTYPE HTML>
<html>
  <head>
    <link href="../_css/style.css" rel="stylesheet">
  </head>
  <body>
    <p>Before the script...</p>
    <script>
      document.write('<p>Welcome to W3Docs!</p>');
    </script>
  </body>
</html>

    Document.write() es un comando de JavaScript como la función alert(), escribe lo que colocas entre los paréntesis de apertura y cierre. En este ejemplo, el HTML <p>¡Hola mundo!<p> se añade a la página: una etiqueta de párrafo y dos palabras.

  • Ahora guarda la página y ábrela en un navegador web.

Como ves, la página se abre y “¡Bienvenido a w3Docs!” aparece debajo del título.

La Consola JavaScript de Chrome

Muchos desarrolladores web prefieren usar el navegador Chrome de Google. Su atributo DevTools te ofrece muchas formas de corregir y equilibrar problemas de HTML, CSS, y JavaScript. La consola JavaScript es un gran lugar para rastrear errores y problemas en tu código. También reconoce la línea en tu código donde ocurrió cada error.

<!DOCTYPE HTML>
<html>
  <head>
    <link href="../_css/style.css" rel="stylesheet">
  </head>
  <body>
    <p>Before the script...</p>
    <script>
      alert('Welcome to W3Docs');
    </script>
  </body>
</html>

Haz clic en el botón de menu de personalización para abrir la consola JavaScript y elige Tools→JavaScript Console. O usa el atajo de teclado Ctrl+Shift+J (Windows) o ⌘-Option-J (Mac) etc.

Hora del Cuestionario: ¡Pon a Prueba Tus Habilidades!

¿Listo para desafiar lo que has aprendido? Sumérgete en nuestros cuestionarios interactivos para una comprensión más profunda y una forma divertida de reforzar tu conocimiento.

¿Te resulta útil?