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 ° A
Carrera: Técnico en Programación 

Historia de JavaScript
El origen javascript surge a partir de un navegador que actualmente no existe: NetScape. En 1995, Netscape se dio cuenta de que, cuando tenía algún documento HTML, no podía interactuar con lo que hacía el usuario. Es decir, lo único que podía hacer el navegador era esperar a recibir unos datos y luego enviarlos, a modo de formulario. Además, podía darle ciertos aspectos de diseño, como el alto y ancho, pero con muy poca versatilidad.

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.

Caracterisiticas 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.

Ventajas de JavaScript
  • 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.

Desventajas de JavaScript
  • 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.




Tipos de datos de JavaScript
Undefined: representa una variable que no ha sido declarada o a la cual no se le ha asignado un valor.
  • 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.



Operador

Los operadores permiten manipular el valor de las variables, realizar operaciones matemáticas con sus valores y comparar diferentes variables. De esta forma, los operadores permiten a los programas realizar cálculos complejos y tomar decisiones lógicas en función de comparaciones y otros tipos de condiciones.


Tipos de operadores:

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.

Operador

Propósito

Ejemplo

+

Suma dos números.

[Subtotal]+[ImpuestoSobreVentas]

-

Busca la diferencia entre dos números o indica el valor negativo de un número.

[Precio]-[Descuento]

*

Multiplica dos números.

[Cantidad]*[Precio]

/

Divide el primer número entre el segundo.

[Total]/[RecuentoDeElementos]

\

Redondea ambos números a enteros, divide el primer número entre el segundo y, después, trunca el resultado a un entero.

[Registradas]\[Salas]

Resto

Divide el primer número entre el segundo y después devuelve únicamente el resto.

[Registradas] Resto [Salas]

^

Eleva un número a la potencia de un exponente.

Número ^ Exponente



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.

Operador

Propósito

Ejemplo

Y

Devuelve True cuando Expresión1 y Expresión2 son verdaderas.

Expresión1 Y Expresión2

O

Devuelve True cuando Expresión1 o Expresión2 es verdadera.

Expresión1 O Expresión2

Eqv

Devuelve True cuando tanto Expresión1 como Expresión2 son verdaderas, o cuando Expresión1 y Expresión2 son falsas.

Expresión1 Eqv Expresión2

No

Devuelve True cuando la Expresión no es verdadera.

No Expresión

Xor

Devuelve True si Expresión1 es verdadera o Expresión2 es verdadera, pero no ambas.

Expresión1 Xor Expresión2



Operadores especiales

Los operadores especiales se usan para devolver un resultado True o False como se describe en la tabla siguiente.

Operador

Propósito

Ejemplo

Is Null o Is Not Null

Determina si un valor es nulo o no nulo.

Campo1 Is Not Null

Like "patrón"

Compara valores de cadena mediante los operadores de comodín ? y *.

Campo1 Like "instruct*"

Between valor1 And valor2

Determina si un valor numérico o de fecha se encuentra dentro de un rango.

Campo1 Between 1 And 10
- O -
Campo1 Between #01-07-07# Y #31-12-07#

In(valor1,valor2...)

Determina si un valor se encuentra dentro de un conjunto de valores.

Campo1 In ("rojo","verde","azul")
- O -
Campo1 In (1,5,7,9)









Uso de Variables de JavaScript

Las variables en los lenguajes de programación siguen una lógica similar a las variables utilizadas en otros ámbitos como las matemáticas. Una variable es un elemento que se emplea para almacenar y hacer referencia a otro valor. Gracias a las variables es posible crear "programas genéricos", es decir, programas que funcionan siempre igual independientemente de los valores concretos utilizados.


 Si no existieran variables, un programa que suma dos números podría escribirse como:
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 Core
Visual 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