Tema 6. Mi primer código en JavaScript




JavaScript es considerado como uno de los lenguajes de programación más famosos y ampliamente usados en la actualidad. Su aprovechamiento se demuestra en la mayoría de los sitios y aplicaciones web para agregar interacción y dinamismo a la experiencia del usuario. Aprender a programar en JavaScript es una habilidad valiosa y emocionante, por lo que, crear tu primer código puede ser un hito importante en tu camino como programador.

Antes de comenzar a escribir un código en JavaScript, es importante tener un editor de texto adecuado y un navegador web compatible. Se recomienda utilizar un editor de texto como Visual Studio Code o Sublime Text, que son populares entre los programadores. Para ejecutar el código JavaScript, es necesario tener un navegador web compatible, como Google Chrome o Mozilla Firefox. Con estos requerimientos en orden, estás listo para crear tu primer código en JavaScript, el clásico "Hola mundo". Este pequeño programa es un buen lugar para comenzar y te ayudará a comprender los conceptos básicos de JavaScript y cómo escribir y ejecutar un código en este lenguaje.




Introducción

Bienvenido al mundo de JavaScript, uno de los lenguajes de programación más famosos y de gran utilidad en la actualidad. Si eres un recién llegado a este mundo, es natural tener preguntas sobre cómo usar JavaScript y lo que se necesita para comenzar. A continuación, se presenta una introducción básica sobre este lenguaje y lo que necesitas para comenzar a programar.

¿Qué es JavaScript? JavaScript es un lenguaje de programación que se utiliza en la mayoría de los sitios y aplicaciones web para agregar interacción y dinamismo a la experiencia del usuario. Para empezar a programar en JavaScript, lo primero que necesitas es un editor de texto adecuado y un navegador web compatible (Mdn web docs, 2022). Se recomienda utilizar un editor de texto como Visual Studio Code o Sublime Text, y un navegador web como Google Chrome o Mozilla Firefox.

JavaScript es un lenguaje muy versátil y con él puedes hacer prácticamente cualquier cosa. Al principio puedes comenzar con proyectos simples como carruseles, galerías de imágenes, diseños que cambian y respuestas a acciones de botones. A medida que vayas adquiriendo más experiencia, serás capaz de crear juegos, animaciones 2D y 3D, aplicaciones basadas en bases de datos y mucho más (Mdn web docs, 2022).

Requerimientos para JavaScript. A continuación, se muestran los requisitos básicos que debes cumplir para programar en JavaScript:

  1. Un editor de texto: puedes utilizar un editor de texto como Visual Studio Code, Sublime Text, Atom, entre otros. Este es el lugar donde escribirás tu código JavaScript.
  2. Un navegador web compatible: para ejecutar el código JavaScript, necesitas un navegador web que lo soporte, como Google Chrome, Mozilla Firefox, Safari, Microsoft Edge, entre otros.
  3. Conocimientos básicos de programación: JavaScript es un lenguaje de programación, por lo que es útil tener conocimientos básicos sobre conceptos como variables, funciones, bucles, condicionales, entre otros.
  4. Acceso a internet: JavaScript es un lenguaje en constante evolución y hay muchos recursos en línea que pueden ayudarte a mejorar tus habilidades y aprender nuevas técnicas.

Estos son los requisitos básicos para programar en JavaScript. Con estos elementos en orden, estás listo para comenzar a escribir y ejecutar código en JavaScript.


Instalación

Editor de texto recomendado. Para esta experiencia es recomendable utilizar el editor desarrollado por Microsoft, Visual Studio Code. Además de ser uno de los editores de texto más recomendados por programadores, para JavaScript resulta la mejor alternativa gracias a los siguientes aspectos:

  1. IntelliSense: Visual Studio Code cuenta con un sistema de autocompletado llamado IntelliSense que proporciona sugerencias y completado de código en tiempo real mientras escribes. Esto ayuda a mejorar la productividad y a prevenir errores comunes.

  2. Depuración integrada: Visual Studio Code incluye un sistema que te permite depurar y solucionar errores en tus scripts JavaScript.

  3. Extensiones: Visual Studio Code es altamente personalizable gracias a las extensiones. Hay una amplia variedad de extensiones disponibles que añaden nuevas funciones y mejoran el rendimiento de Visual Studio Code para tus necesidades de programación.

  4. Interfaz de usuario intuitiva: Visual Studio Code cuenta con una interfaz de usuario intuitiva y fácil de usar que te permite concentrarte en tu código sin distracciones.

  5. Gratuito y de código abierto: Visual Studio Code es de código abierto y gratuito, lo que significa que puedes descargarlo y usarlo sin ningún costo.



Editor de texto recomendado. Para esta experiencia es recomendable utilizar el editor desarrollado por Microsoft, Visual Studio Code:

Esta pantalla se obtuvo directamente del software que se está explicando en la computadora,
para fines educativos.


Luego de explorar algunas de las razones por las que Visual Studio Code es uno de los editores de texto recomendados para programar en JavaScript, se listarán los pasos necesarios para instalar Visual Studio Code en tu computadora:

  • Descarga Visual Studio Code desde la página oficial de Microsoft:

https://code.visualstudio.com/

Los siguientes enlaces son externos a la Universidad Tecmilenio, al acceder a ellos
considera que debes apegarte a sus términos y condiciones.


  • Haz doble clic en el archivo de instalación descargado para iniciar el proceso de instalación.
  • Sigue las instrucciones en la pantalla para instalar Visual Studio Code. Asegúrate de elegir la opción para agregar Visual Studio Code a tu PATH con el propósito de que puedas ejecutarlo desde la línea de comandos.
  • Una vez que se complete la instalación, haz clic en el botón "Finalizar" para cerrar el asistente de instalación.
  • Abre Visual Studio Code haciendo clic en su acceso directo en el menú “Inicio” o ejecutándolo desde la línea de comandos.

Estos son los pasos para instalar Visual Studio Code en un sistema operativo Windows. Si estás utilizando un sistema operativo diferente, los pasos pueden variar, pero la descarga y la instalación generalmente se realizan de la misma manera.


Navegador recomendado. Los navegadores web más recomendados para trabajar con JavaScript son Google Chrome y Mozilla Firefox. Ambas son excelentes opciones porque cuentan con herramientas de desarrollo avanzadas que facilitan el proceso de depuración y prueba de tus scripts (Mdn web docs, 2023).

Google Chrome: cuenta con una consola de desarrollo integrada y herramientas de depuración avanzadas que te permiten solucionar errores y optimizar tu código. Además, de ser considerado uno de los navegadores con mayor cantidad de usuarios en todo el mundo, por tal motivo, es una buena opción para asegurarte de que tus scripts sean compatibles con una amplia gama de dispositivos y sistemas operativos.

Mozilla Firefox: es otro navegador web popular que es una excelente opción para trabajar con JavaScript. Como Google Chrome, cuenta con una consola de desarrollo integrada y herramientas de depuración avanzadas que te permiten solucionar errores y optimizar tu código. Además, Mozilla Firefox es conocido por su alto rendimiento y velocidad, por lo que es una buena opción para scripts más complejos.

Independientemente del navegador que tengas instalado, y que decidas utilizar para trabajar con JavaScript, es importante que tengas el navegador actualizado en sus últimas versiones. Puedes verificar la versión de tu navegador web y actualizarlo a su última versión de forma automática siguiendo estos pasos:

Google Chrome:

  1. Haz clic izquierdo sobre el icono de tres barras horizontales ubicado en la esquina superior derecha de la ventana de Chrome.
  2. Haz clic en "Ayuda", en el menú desplegable.
  3. Haz clic en "Acerca de Google Chrome".
  4. Si hay una actualización disponible, Chrome la descargará e instalará automáticamente.

Mozilla Firefox:

  1. Haz clic izquierdo sobre el icono de tres barras horizontales ubicado en la esquina superior derecha de la ventana de Firefox.
  2. Haz clic en "Ayuda", en el menú desplegable.
  3. Haz clic en "Sobre Firefox".
  4. Si hay una actualización disponible, Firefox la descargará e instalará automáticamente.

Nota: la frecuencia de actualización de tu navegador depende de la versión que tengas instalada y de la configuración de actualización automática de tu computadora. Es importante mantener tu navegador actualizado para garantizar una mejor seguridad, rendimiento y compatibilidad con sitios web, aplicaciones, y por supuesto con JavaScript.





JavaScript es un lenguaje de programación muy versátil y poderoso que te permite hacer una gran variedad de cosas. Al aprender a programar en JavaScript, tienes una amplia gama de posibilidades para crear proyectos interesantes y útiles. Además, es fácil de aprender y de usar, de igual manera existe una gran cantidad de recursos en línea disponibles para ayudarte a mejorar tus habilidades.

En este tema, has cubierto los requisitos básicos para empezar a programar en JavaScript, incluyendo el editor de texto recomendado y el navegador web necesario. Durante la actividad guiada realizarás el clásico ejemplo "Hola mundo", que es un buen punto de partida para que comiences a experimentar con el lenguaje.




Asegúrate de:

  • Comprender qué tipo de lenguaje y qué es JavaScript para que tengas en claro lo que estás aprendiendo.
  • Instalar y personalizar tu editor de código para que tengas a tu disposición tu herramienta de trabajo personalizada.
  • Seleccionar un navegador web y actualizarlo constantemente para que tu código no tenga ningún tipo de problemas.



  • Mdn web docs. (2022). Fundamentos de JavaScript. Recuperado de https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/JavaScript_basics
  • Mdn web docs. (2023). ¿Cuáles son las herramientas de desarrollo del navegador? Recuperado de https://developer.mozilla.org/es/docs/Learn/Common_questions/What_are_browser_developer_tools
  • Microsoft. (s.f.). Code editing. Redefined.
    Recuperado de https://code.visualstudio.com/



Los siguientes enlaces son externos a la Universidad Tecmilenio, al acceder a ellos considera que debes apegarte a sus términos y condiciones.

Lecturas
Para conocer más acerca de mi primer código en JavaScript, te sugerimos revisar lo siguiente:


Videos
Para conocer más acerca de mi primer código en JavaScript, te sugerimos revisar lo siguiente:

  • HolaMundo. (2022, 22 de noviembre). Javascript en dos minutos [Archivo de video].
    Recuperado dehttps://youtu.be/odnLWsAe3lM
  • Victor Robles WEB. (2021, 13 de octubre). 4 Increíbles Extensiones de Visual Studio Code para JavaScript ⌨️ [Archivo de video].
    Recuperado de https://youtu.be/keD-dzqLLu8



  • Computadora con acceso a Internet.
  • Instalar Visual Studio Code.
  • Navegador web actualizado.





La obra presentada es propiedad de ENSEÑANZA E INVESTIGACIÓN SUPERIOR A.C. (UNIVERSIDAD TECMILENIO), protegida por la Ley Federal de Derecho de Autor; la alteración o deformación de una obra, así como su reproducción, exhibición o ejecución pública sin el consentimiento de su autor y titular de los derechos correspondientes es constitutivo de un delito tipificado en la Ley Federal de Derechos de Autor, así como en las Leyes Internacionales de Derecho de Autor.

El uso de imágenes, fragmentos de videos, fragmentos de eventos culturales, programas y demás material que sea objeto de protección de los derechos de autor, es exclusivamente para fines educativos e informativos, y cualquier uso distinto como el lucro, reproducción, edición o modificación, será perseguido y sancionado por UNIVERSIDAD TECMILENIO.

Queda prohibido copiar, reproducir, distribuir, publicar, transmitir, difundir, o en cualquier modo explotar cualquier parte de esta obra sin la autorización previa por escrito de UNIVERSIDAD TECMILENIO. Sin embargo, usted podrá bajar material a su computadora personal para uso exclusivamente personal o educacional y no comercial limitado a una copia por página. No se podrá remover o alterar de la copia ninguna leyenda de Derechos de Autor o la que manifieste la autoría del material.