Empezar a usar JavaScript
Escribir tu primer programa en JavaScript
HTML no puede hacer cálculos, no puede averiguar si alguien ha completado correctamente un formulario. HTML solo permite que las personas lean el texto, vean videos, miren imágenes y hagan clic en enlaces. Necesitas JavaScript para añadir inteligencia a tus páginas web, de modo que puedan responder a los visitantes de tu sitio. Así, JavaScript te permite hacer que tus sitios web sean más atractivos, eficaces 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 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 otro idioma. Necesitas aprender palabras nuevas y entender cómo combinarlas.
¿Qué es un programa de computadora?
Añadir 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 usas para leer correo electrónico o crear páginas web. Pero, aun así, los programas de JavaScript, que también son scripts, son más simples y cortos y comparten muchas de las mismas propiedades que los programas más complejos.
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;
- Mostrar el mensaje en la página web.
Cuando quieras crear un programa JavaScript, debes determinar los pasos necesarios para lograr tu objetivo. Después de conocer los pasos, traducirás tus ideas a código de programación: las palabras y caracteres que hacen que el navegador web se comporte como tú quieres.
Cómo añadir 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, así que debes indicarle claramente al navegador cuándo llega JavaScript usando la etiqueta HTML <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 una página HTML, necesitas usar el elemento <script>, cuya etiqueta nos ayuda a insertar programas JavaScript en cualquier parte del documento HTML. Por ejemplo:
ejemplo de JavaScript Hello world
<!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 <script> de apertura y cierre. Si quieres añadir un script a tu página, debes empezar 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 bien organizado en una parte de la página web.
El elemento <script> tiene algunos atributos que hoy en día no usamos con tanta frecuencia. Pero todavía podemos encontrarlos en código antiguo:
El atributo type: <script type=…>
Para tener un tipo, el HTML antiguo —HTML4— requería un script. Antes era type="text/javascript", lo cual ya no es necesario hoy en día. Además, el estándar moderno de HTML cambió por completo el significado de este atributo. Hoy podemos usarlo para módulos de JavaScript. Pero hablaremos de los módulos más adelante, ya que es un tema avanzado.
El atributo language: <script language=…>
El atributo presentado arriba estaba pensado para mostrar el lenguaje del script. Pero como JavaScript es el lenguaje predeterminado, no hace falta usarlo.
Archivos externos de JavaScript
Como mencionamos antes, usar la etiqueta <script> te permite añadir 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. Sin embargo, copiar y pegar el mismo código JavaScript en cada página no es una buena idea, especialmente cuando tienes un sitio con cientos de páginas.
En resumen, usamos scripts externos cuando tenemos mucho código JavaScript. Así obtenemos reutilización de código, ya que un solo archivo JavaScript puede usarse en varias páginas HTML. La extensión de un archivo JavaScript es .js. Si queremos usar un script externo, debemos poner el nombre del archivo del script en el atributo src (source) de una etiqueta <script>:
atributo source de JavaScript
<script src="W3DocsScript.js"></script>Con la ayuda del atributo src, podemos adjuntar archivos de script a HTML.
atributo source de JavaScript
<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, un valor src de mi-script.js apunta a ese archivo junto a la página actual.
También podemos dar una URL completa, que se verá así:
url src de JavaScript
<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:
múltiples etiquetas src de JavaScript
<script src="/W3DocsScript1.js"></script>
<script src="/W3DocsScript2.js"></script>
...Si src está establecido, el contenido del script se ignorará. Eso significa que una sola etiqueta <script> no puede tener al mismo tiempo el atributo src y código dentro. Simplemente no funcionará:
etiqueta script con atributo src
<!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>Debemos elegir o bien un script externo con atributo src o bien un <script> con código incrustado. Solo después de eso, podemos dividir este ejemplo en dos scripts para que funcione:
ejemplo de JavaScript dividido en dos scripts
<!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 JavaScript
Empecemos a programar; tu primer programa será muy simple:
- Abre un archivo HTML sencillo en tu editor de texto favorito.
- Antes de la etiqueta de cierre
</body>, haz clic en una línea vacía y escribe:<script> - Pulsa la tecla Return para crear una nueva línea en blanco y escribe:
alert('Welcome to W3Docs');¡Felicidades! Has escrito tu primera línea de código JavaScript. - Luego escribe
</script>. El código debería verse así:
ejemplo de alerta de Javascript
<!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>- Abre un navegador web y abre el archivo test1.html para previsualizarlo. Observa que la página está vacía cuando aparece la alerta.
- Al hacer clic en el botón OK del cuadro de alerta, lo cerrarás. Después de que desaparezca el cuadro de alerta, la página web aparecerá en la ventana del navegador.
Escribir texto en una página web
El script de la sección anterior apareció en el centro de tu monitor. Pero si quieres mostrar un mensaje directamente en una página web usando JavaScript, puedes usar el comando integrado de JavaScript:
- Abre el archivo test2.html en tu editor de texto. Aunque las etiquetas
<script>aparecen en el<head>de una página web, puedes colocarlas y poner programas JavaScript directamente en el cuerpo de la página. - Debajo de
<h1>Writing to the document window</h1>, escribe este código:
ejemplo de document write en JavaScript
<!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 cualquier cosa que coloques entre los paréntesis de apertura y cierre. En este ejemplo, se añade a la página el HTML <p>Hello world!<p>: 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 “Welcome to w3Docs” aparece debajo del encabezado.
La consola de 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 de JavaScript es un gran lugar para localizar errores y fallos en tu código. También reconoce la línea de tu código donde ocurrió cada error.
ejemplo de registro en la consola de Javascript
<!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 del menú Customize para abrir la consola de JavaScript y elige Tools→JavaScript Console. O usa el atajo de teclado Ctrl+Shift+J (Windows) o ⌘-Option-J (Mac), etc.
Práctica
¿Cuáles de las siguientes afirmaciones son verdaderas sobre empezar con JavaScript en el desarrollo web?