JavaScript y Visual Studio Code
SUBMÓDULO 2
DESARROLLO DE APLICACIONES QUE
SE EJECUTEN EN EL CLIENTE
Nombre del alumno: Evelyn Sarahi Calvillo Marquez
Nombre del docente: Blanca Silvia Marquez Casas
Semestre y grupo: 4to ° ACarrera: Técnico en Programación
El siguiente momento importante en la historia de JavaScript es la creación del elemento XML HttpRequest por parte de Microsoft en 1998. Este elemento viene a ser el padre de AJAX y nos permite cargar contenido o interactuar con el backend sin tener que volver a cargar la totalidad de la página web.
A lo largo de los años, se continuó hablando de JavaScript y, en el 2000, Douglas Crockford inventó el documento JSON, una forma de estandarizar objetos en JavaScript. En 2004, Gmail empezó a utilizar JavaScript e incorporó AJAX masivamente para hacer sus procesos más eficaces.
Llegados a este punto, JavaScript era tan útil que, en 2006, John Resig creó la librería JQuery, que nos permite reducir la complejidad de la sintaxis de JavaScript.
¿Qué es JavaScript?
JavaScript es un lenguaje de programación que los desarrolladores utilizan para hacer páginas web interactivas. Desde actualizar fuentes de redes sociales a mostrar animaciones y mapas interactivos, las funciones de JavaScript pueden mejorar la experiencia del usuario de un sitio web. Como lenguaje de scripting del lado del servidor, se trata de una de las principales tecnologías de la World Wide Web. Por ejemplo, al navegar por Internet, en cualquier momento en el que vea un carrusel de imágenes, un menú desplegable “click-to-show” (clic para mostrar), o cambien de manera dinámica los elementos de color en una página web, estará viendo los efectos de JavaScript.- implicidad. Posee una estructura sencilla que lo vuelve más fácil de aprender e implementar.
- Velocidad. Se ejecuta más rápido que otros lenguajes y favorece la detección de los errores.
- Versatilidad. Es compatible con otros lenguajes, como: PHP, Perl y Java. Además, hace que la ciencia de datos y el aprendizaje automático sean accesibles.
- Popularidad. Existen numerosos recursos y foros disponibles para ayudar a los principiantes con habilidades y conocimientos limitados.
- Carga del servidor. La validación de datos puede realizarse a través del navegador web y las actualizaciones solo se aplican a ciertas secciones de la página web.
- Actualizaciones. Se actualiza de forma continua con nuevos frameworks y librerías, esto le asegura relevancia dentro del sector.
- JavaScript es un lenguaje de programación necesario para el desarrollo de páginas web, pues integra muchas opciones para agregarle valor a tus páginas web. Además, está claro que, en cualquier momento, su uso se hace muy necesario.
- Ahora, una de las ventajas más importantes de JS es que trabaja en la parte del cliente, por lo que ahorra en ancho de banda. Por otro lado, acelera la ejecución del programa de código y del sitio web.
- Ya que una página tendría que funcionar en cualquier tipo de navegador (ya sea Chrome, Firefox o Safari) y eso es permitido gracias a JavaScript, ya que funciona en cualquier tipo de navegador, aunque existen problemas respecto a la lectura. Además, tiene toda la compatibilidad con muchas aplicaciones.
- Dado su popularidad entre el sector de los programadores, hay muchas personas interesadas en compartir su conocimiento sobre el lenguaje de programación, además de presentar sus propios proyectos en repositorios remotos, para el acceso a la información de todo el interesado.
- Aunque sea compatible con la mayoría de lenguajes de programación, hay diferencias respecto al soporte del navegador.
Aunque el «server-side script» de JS tenga el mismo resultado, los navegadores lo interpreteran de forma diferente. Entonces, puede que tengas que modificar extractos de código para algunos navegadores, pero ¡tranquilo! Cada actualización disminuye esta brecha. - Para muchos expertos en la materia, el JavaScript DOM (o Document Object Model) puede llegar a ser muy lento al trabajar con HTML.
- Además, dado que en el campo se relaciona con elementos como HTML, muchas veces hay problemas con la depuración y la localización sencilla de errores en los programas de código.
- Boolean: representa un valor lógico y puede tener dos valores, ya sean true o false.
- Number: permite representar y manipular valores numéricos como «37» o «-9.25».
- String: representa datos textuales (cadenas de caracteres).
- BigInt: representa valores numéricos que son demasiado grandes para ser representados por el tipo de dato number.
- Symbol: es un valor primitivo único e inmutable.
Operadores aritméticos
Los operadores aritméticos se usan para calcular un valor de dos o más números, o cambiar el signo de un número de positivo a negativo o viceversa.
|
Operadores de comparación
Los operadores de comparación se usan para comparar valores y devolver un resultado que sea True, False o Null.
Operador | Propósito | Ejemplo |
< | Devuelve True si el primer valor es menor que el segundo valor. | Valor1 < Valor2 |
<= | Devuelve True si el primer valor es menor o igual que el segundo valor. | Valor1 <= Valor2 |
> | Devuelve True si el primer valor es mayor que el segundo valor. | Valor1 > Valor2 |
>= | Devuelve True si el primer valor es mayor o igual que el segundo valor. | Valor1 >= Valor2 |
= | Devuelve True si el primer valor es igual al segundo valor. | Valor1 = Valor2 |
<> | Devuelve True si el primer valor no es igual al segundo valor. | Valor1 <> Valor2 |
Operadores lógicos
Los operadores lógicos se usan para combinar dos valores Booleanos y devolver un resultado verdadero, falso o nulo. Los operadores lógicos también se denominan operadores Booleanos.
|
Operadores especiales
Los operadores especiales se usan para devolver un resultado True o False como se describe en la tabla siguiente.
|
resultado = 3 + 1
El programa anterior es tan poco útil que sólo sirve para el caso en el que el primer número de la suma sea el 3 y el segundo número sea el 1. En cualquier otro caso, el programa obtiene un resultado incorrecto.
Sin embargo, el programa se puede rehacer de la siguiente manera utilizando variables para almacenar y referirse a cada número:
numero_1 = 3
numero_2 = 1
resultado = numero_1 + numero_2
Los elementos numero_1
y numero_2
son variables que almacenan los valores que utiliza el programa. El resultado se calcula siempre en función del valor almacenado por las variables, por lo que este programa funciona correctamente para cualquier par de números indicado. Si se modifica el valor de las variables numero_1
y numero_2
, el programa sigue funcionando correctamente.
Las variables en JavaScript se crean mediante la palabra reservada var
. De esta forma, el ejemplo anterior se puede realizar en JavaScript de la siguiente manera:
var numero_1 = 3;
var numero_2 = 1;
var resultado = numero_1 + numero_2;
La palabra reservada var
solamente se debe indicar al definir por primera vez la variable, lo que se denomina declarar una variable. Cuando se utilizan las variables en el resto de instrucciones del script, solamente es necesario indicar su nombre. En otras palabras, en el ejemplo anterior sería un error indicar lo siguiente:
var numero_1 = 3;
var numero_2 = 1;
var resultado = var numero_1 + var numero_2;
Si cuando se declara una variable se le asigna también un valor, se dice que la variable ha sido inicializada. En JavaScript no es obligatorio inicializar las variables, ya que se pueden declarar por una parte y asignarles un valor posteriormente. Por tanto, el ejemplo anterior se puede rehacer de la siguiente manera:
var numero_1;
var numero_2;
numero_1 = 3;
numero_2 = 1;
var resultado = numero_1 + numero_2;
Una de las características más sorprendentes de JavaSript para los programadores habituados a otros lenguajes de programación es que tampoco es necesario declarar las variables. En otras palabras, se pueden utilizar variables que no se han definido anteriormente mediante la palabra reservada var
. El ejemplo anterior también es correcto en JavaScript de la siguiente forma:
var numero_1 = 3;
var numero_2 = 1;
resultado = numero_1 + numero_2;
La variable resultado
no está declarada, por lo que JavaScript crea una variable global (más adelante se verán las diferencias entre variables locales y globales) y le asigna el valor correspondiente. De la misma forma, también sería correcto el siguiente código:
numero_1 = 3;
numero_2 = 1;
resultado = numero_1 + numero_2;
En cualquier caso, se recomienda declarar todas las variables que se vayan a utilizar.
El nombre de una variable también se conoce como identificador y debe cumplir las siguientes normas:
- Sólo puede estar formado por letras, números y los símbolos
$
(dólar) y_
(guión bajo). - El primer carácter no puede ser un número.
Por tanto, las siguientes variables tienen nombres correctos:
var $numero1;
var _$letra;
var $$$otroNumero;
var $_a__$4;
Sin embargo, las siguientes variables tienen identificadores incorrectos:
var 1numero; // Empieza por un número
var numero;1_123; // Contiene un carácter ";"
Visual Studio CoreVisual Studio Code (VS Code) es un editor de código fuente desarrollado por Microsoft. Es software libre y multiplataforma, está disponible para Windows, GNU/Linux y macOS. VS Code tiene una buena integración con Git, cuenta con soporte para depuración de código, y dispone de un sinnúmero de extensiones, que básicamente te da la posibilidad de escribir y ejecutar código en cualquier lenguaje de programación.Características de Visual Studio Code
Multiplataforma: Es una característica importante en cualquier aplicación y más si trata de desarrollo. Visual Studio Code está disponible para Windows, GNU/Linux y macOS.
IntelliSense: Esta característica está relacionada con la edición de código, autocompletado y resaltado de sintaxis, lo que permite ser más ágil a la hora de escribir código. Como su nombre lo indica, proporciona sugerencias de código y terminaciones inteligentes en base a los tipos de variables, funciones, etc. Con la ayuda de extensiones se puede personalizar y conseguir un IntelliSense más completo para cualquier lenguaje.
Depuración: Visual Studio Code incluye la función de depuración que ayuda a detectar errores en el código. De esta manera, nos evitamos tener que revisar línea por línea a puro ojo humano para encontrar errores. VS Code también es capaz de detectar pequeños errores de forma automática antes de ejecutar el código o la depuración como tal.
Uso del control de versiones: Visual Studio Code tiene compatibilidad con Git, por lo que puedes revisar diferencias o lo que conocemos con git diff, organizar archivos, realizar commits desde el editor, y hacer push y pull desde cualquier servicio de gestión de código fuente (SMC). Los demás SMC están disponible por medio de extensiones.
Extensiones: Hasta ahora, he mencionado varias veces el término extensiones porque es uno de los puntos fuertes. Visual Studio Code es un editor potente y en gran parte por las extensiones. Las extensiones nos permiten personalizar y agregar funcionalidad adicional de forma modular y aislada. Por ejemplo, para programar en diferentes lenguajes, agregar nuevos temas al editor, y conectar con otros servicios. Realmente las extensiones nos permiten tener una mejor experiencia, y lo más importante, no afectan en el rendimiento del editor, ya que se ejecutan en procesos independientes.
Para qué sirve Visual Studio Code
Es importante entender qué es Visual Studio Code y para qué sirve. Como se ha resumido anteriormente, VS Code es un editor de código optimizado que proporciona muchas facilidades para escribir, depurar y probar código. ¿Qué lenguajes soporta visual Studio Code? Inicialmente incluye un mínimo de componentes y funciones básicas de un editor con soporte nativo para JavaScript/TypeScript y Node.js, sin embargo, es personalizable con los cientos de plugins o extensiones disponibles para escribir código en diferentes lenguajes.
VS Studio Code incluye una terminal con todas las funciones, la cual se inicia fácilmente en el directorio de trabajo. La terminal integrada puede utilizar cualquier Shell instalado en el equipo, como PowerShell, Bash o cualquier otro. Contar con una terminal en el propio editor es de gran utilidad para ejecutar diferentes comandos necesarios cuando estamos desarrollando.
VS Code cuenta con funcionalidades sorprendentes de gran provecho para cualquier profesional de IT, no está limitado para desarrollar un tipo de aplicación, va más allá. Con las extensiones adecuadas es posible conectarse remotamente a máquinas virtuales por medio de SSH, contenedores y WSL (Windows Subsystem for Linux), obtener acceso al sistema de archivos, y por supuesto, gestión desde la terminal. También, sirve para trabajar e implementar aplicaciones en contenedores y gestionar clusters de Kubernetes. La integración con Microsoft Azure es formidable, por lo tanto, abre otro abanico de posibilidades para trabajar con VS Code. Más adelante, se listarán las mejores extensiones de Visual Studio Code.
Algo importante y una ventaja con respecto a un IDE completo que incluye todos los componentes en un solo paquete, es que, con VS Code puedes instalar únicamente las herramientas de desarrollo requeridas, y personalizarlo de acuerdo con tus necesidades. Si te interesa ver con más detalles la diferencia con un IDE como Visual Studio, pásate por nuestro blog y lee el artículo El potencial de Visual Studio.
Trabajos del parcial 1:
Comentarios
Publicar un comentario