Tutorial de Javascript: Hola mundo

Este tutorial te ayuda a comenzar con JavaScript. Explica lo que necesitas para escribir tu primer programa en JavaScript. Comienza con lo básico: aprenderás dónde puedes encontrar y descargar las herramientas necesarias, cómo instalarlas y te guiará hasta construir y ejecutar tu código. Si nunca has escrito un programa en JavaScript antes, este es el lugar para empezar. Hemos creado este artículo para que puedas comenzar con JavaScript y pasar a nuestros ejemplos de SMS. Si ya estás familiarizado con JavaScript, puedes saltar directamente a uno de los siguientes proyectos de SMS.

Ejemplos de SMS con Javascript:

Enviar SMS con Javascript usando la API REST HTTP (ejemplo de código)
Enviar múltiples SMS con Javascript usando la API REST HTTP (ejemplo de código)
Programar SMS con Javascript usando la API REST HTTP (ejemplo de código)
Recibir SMS con Javascript usando la API REST HTTP (ejemplo de código)
Eliminar SMS con Javascript usando la API REST HTTP (ejemplo de código)
Descargar la última biblioteca de la API de SMS para JavaScript desde Github

¿Qué es HTML?

El Lenguaje de Marcado de Hipertexto (HTML) es una herramienta para definir la estructura de un sitio web. HTML es el lenguaje de marcado estándar para crear páginas web. Junto con CSS, hacen que los sitios web se vean como son. HTML consiste en una serie de elementos que le indican al navegador cómo mostrar el contenido. En este tutorial lo usamos para mostrar el mensaje "hola mundo".

¿Qué es JavaScript?

JavaScript es un lenguaje de programación de scripts. Es similar a un lenguaje natural, como el inglés, y se utiliza para comunicarse con una computadora. La principal diferencia entre un lenguaje natural y un lenguaje de programación es que los lenguajes de programación tienen una estructura más rigurosa para ayudar a la computadora a entenderlo mejor. En este tutorial usamos código JavaScript para imprimir el mensaje "hola mundo".

¿Qué es un servidor web?

El término servidor web puede referirse a hardware o software, o ambos trabajando juntos. En el lado del hardware, un servidor web es una computadora que se utiliza para servir a los clientes web. En el lado del software, los servidores web ejecutan un código PHP que maneja las solicitudes HTTP de los clientes web.

¿Qué es un navegador web?

Un navegador web es una aplicación para acceder a la World Wide Web. Cuando un usuario solicita una página web de un sitio en particular, el navegador recupera el contenido necesario de un servidor web y luego muestra la página en el dispositivo del usuario. Funciona de manera que el usuario puede hacer solicitudes HTTP a los servidores web. Con un navegador web, podemos acceder al servidor web escribiendo su dirección IP o su dominio en el campo de URL.

¿Qué es WAMP?

WampServer se refiere a un stack de soluciones para el sistema operativo Microsoft Windows, que consiste en el servidor web Apache, OpenSSL para soporte SSL, la base de datos MySQL y el lenguaje de programación PHP. WAMP actúa como un servidor virtual en tu computadora. Permite probar todas las funciones web sin consecuencias, ya que está localizado en tu máquina y no está conectado a la web. Lo usaremos para alojar nuestro sitio web HTML localmente.

Cómo escribir tu primer programa en JavaScript

Para escribir tu primer programa en JavaScript:

  1. Instala WAMP en tu computadora
  2. Configura el servidor WAMP
  3. Crea un nuevo archivo index.html
  4. Escribe tu primer documento HTML
  5. Escribe tu primer código JavaScript en el archivo .html
  6. Ejecuta tu primer programa en JavaScript
  7. Abre el modo Inspeccionar para notificación de errores
  8. Corrige el error

Requisitos previos

  • Computadora con Windows 10
  • Entorno WAMP
  • Navegador Chrome
  • Ejemplo de Hola Mundo en HTML
  • Ejemplo de Hola Mundo en JavaScript

Descargar WAMP

En este video vamos a descargar el servidor WAMP. Este es el software que usaremos para alojar nuestro código JavaScript. Primero, debes visitar https://wampserver.com y descargar el instalador de WampServer (Video 1). Una vez finalizada la descarga, el instalador estará en el directorio de descargas especificado por tu navegador. Al abrir este archivo exe, comenzará el proceso de instalación de WAMP Server.

Video 1 - Cómo descargar WampServer (Tutorial en video)

Descargar WampServer

Comienza yendo a https://wampserver.com en tu navegador. Haz clic en el botón Descargar en la parte superior para desplazarte automáticamente a la sección de descargas. Haz clic en WAMPSERVER 64 BITS (X64) para descargar el instalador de WampServer en tu computadora (Figura 1).

Figura 1 - Descargar WampServer

Instalar WAMP

El siguiente paso después de descargar WampServer es instalarlo. Este video te muestra cómo puedes completar el proceso de configuración con éxito. Abre el instalador, configura los detalles de la instalación y espera a que el proceso se complete (Video 2). Cuando hayas instalado WAMP Server, comenzará a ejecutarse automáticamente. Ahora que WAMP Server está en funcionamiento, puedes comenzar a programar en JavaScript.

Video 2 - Cómo instalar WampServer (Tutorial en video)

Escribir y descargar tu primera página HTML

Para escribir tu primer documento HTML, debes crear un nuevo archivo index.html en la carpeta \www\ de WampServer.
Ruta: C:\wamp64\www\ 

<!DOCTYPE html>
<html>
	<head>
		<title>¡Hola mundo!</title>
	</head>
	<body>
		<h1 id="text">¡Hola mundo!</h1>
	</body>
</html>

Código 1 - Tu primer documento HTML

Escribir tu primer documento HTML

Este video te muestra cómo puedes crear un documento HTML (Video 3). Usaremos este documento más adelante para alojarlo localmente. Debido a que estamos ejecutando un WampServer en nuestra computadora, podemos ver nuestros archivos en la URL http://localhost/. Para hacerlo, debes crear o colocar tu archivo HTML en la carpeta \www\.
Ruta: C:\wamp64\www\

Video 3 - Escribe tu primer documento HTML (Tutorial en video)

Escribir y ejecutar tu primer programa en JavaScript

En este ejemplo vamos a reemplazar el texto en la etiqueta <h1> con el id "text". Para hacerlo, usaremos el selector de consulta integrado de JavaScript. Esto puede parecer complicado, pero es fácil. Vamos a seleccionar el elemento con el id "text" y estableceremos su atributo innerText (para nuestro elemento, es como una característica de una persona) igual al texto "¡Hola Ozeki!". 

/*Este código JavaScript va a reemplazar el texto en la etiqueta
que tiene el id llamado "text".*/
document.getElementById("text").innerText = "¡Hola Ozeki!";

Código 2 - Tu primer código JavaScript

Escribir y ejecutar tu código JavaScript

Este video muestra cómo puedes escribir código JavaScript y ejecutarlo dentro de tu navegador (Video 4). El comando en sí que muestra el mensaje debe ir dentro de etiquetas de script. Estas etiquetas indican que ese fragmento de código JavaScript debe ejecutarse aquí. El código en sí es una función que tiene "¡Hola Ozeki!" como su argumento. Después de escribir y guardar tu código, puedes ejecutarlo dentro de tu navegador.

Video 4 - Cómo escribir y ejecutar tu primer código JavaScript (Tutorial en video)

Introducir un error en el código JavaScript

Si cometemos un error en nuestro código JavaScript, podemos ver nuestros errores en el modo de inspección del navegador. Para hacerlo, debemos hacer clic derecho con el ratón y seleccionar Inspeccionar en el menú. O simplemente podemos presionar (Ctrl + Shift + I). Allí seleccionamos la Consola, y todos los errores se mostrarán.

¿Qué es un error de sintaxis?

Un error de sintaxis significa "no entiendo". Si le hablas a alguien en inglés y no entiende lo que dices, responderá con "No entiendo". Si le hablas a una computadora en JavaScript y la computadora no entiende lo que dices, responderá con "Error de sintaxis".

¿Cómo manejar un error de sintaxis en JavaScript?

En el código a continuación, crearemos un error de sintaxis intencionalmente al no poner un punto y coma después de la línea "Hola Mundo". Verás cómo reacciona la computadora, cómo corregimos el error y cómo ejecutamos el programa de computadora con éxito.

Corregir el error en tu código JavaScript

Este video te muestra cómo puedes verificar si hay un error en tu código usando el modo Inspeccionar en tu navegador. Esta es una función increíblemente útil para ayudarte a corregir tus errores (Video 5). La consola de depuración en el modo Inspeccionar muestra mensajes de error que indican qué salió mal. Puedes hacer clic en el índice de estos mensajes de error para resaltar la línea exacta de código que causó el error.

Video 5 - Cómo corregir un error en nuestro código JavaScript (Tutorial en video)

Resumen

El artículo anterior trata sobre lo que necesitas para escribir tu primer programa en JavaScript, que es un ejemplo de código "Hola Mundo". Este programa puede parecer simple y puede que no haga mucho, pero así es como comienzan las grandes cosas; al seguir esta guía, has dado tu primer paso para convertirte en un desarrollador de JavaScript. Saber cómo programar en JavaScript y crear programas como solución para tus problemas te ayudará mucho a hacer el trabajo más fluido.

Lo que has aprendido aquí es valioso, hay más guías útiles en el sitio web de Ozeki, ¡adelante! Pasemos al siguiente artículo sobre este tema acerca de cómo enviar SMS desde JavaScript.

¡Ahora descarga el Ozeki SMS Gateway y ponte a trabajar!

More information