Introducción a
JavaScript
1
¿Qué es JavaScript?
JavaScript fue concebido como un lenguaje de
programación para agregar programas a las
paginas web.
HTML = Contenido JavaScript = Comportamiento
CSS = Diseño
2
ECMAScript y JavaScript
En 1997 se crea un comité (llamado TC39) para crear un estándar de JavaScript por la
European Computer Manufacturers Association, ECMA. En ese comité se diseña el
estándar del DOM, Document Object Model para, de esta manera, evitar
incompatibilidades entre los navegadores. Es a partir de entonces cuando los
estándares de JavaScript se rigen por ECMAScript.
En la práctica, los términos ECMAScript y JavaScript se pueden usar indistintamente,
son dos nombres para el mismo lenguaje.
3
Node JS
¿Qué vamos
a instalar?
Visual Studio Code
4
Node JS
Entorno de ejecución para JavaScript en el servidor a partir del motor V8 de
renderizado de JavaScript que utiliza el navegador Chrome de Google. Node facilita la
creación de aplicaciones de servidor altamente escalables. Hoy en día es muy popular
para el desarrollo de Microservicios, APIs, aplicaciones web Full-stack, isomórficas, etc.
5
npm
Gestor de paquetes que te permitirá instalar paquetes en los proyectos que desarrolles.
También podrás utilizarlo para instalar paquetes para el sistema operativo. Las siglas
npm provienen de “Node Package Manager”. Mediante npm vas a ser capaz de instalar
paquetes con una sola línea de comandos.
6
Instalar [Link] [Link]
7
8
Programa informático que contiene integradas todas las herramientas,
utilidades y funcionalidades necesarias para facilitar la tarea de
desarrollo de software. Los entornos de desarrollo se conocen con las
siglas IDE, “Integrated Development Environment”.
Crear/Editar proyectos de desarrollo.
¿Qué es un
Compilar código fuente. entorno de
desarrollo?
Ejecución directa del código fuente.
Depurar el código fuente.
9
Editor de texto: componente con el que
escribiremos el código fuente.
Compilador: componente que traducirá
el código fuente a lenguaje máquina.
Componentes
IDE Depurador: componente que permitirá la
realización de pruebas del código fuente
y eliminación de errores.
Editor gráfico: componente que facilitará
la creación y diseño de interfaces
gráficas.
10
Características IDE
Multiplataforma: pueden ser instalados en todos los sistemas operativos.
Múltiples idiomas: están traducidos a una gran cantidad de idiomas.
Reconocimiento de Sintaxis: facilitan al desarrollador la escritura de código fuente al ser capaces de reconocer las
sintaxis propias del lenguaje de programación con el que están desarrollando.
Extensiones y Componentes para el IDE: dan la posibilidad de añadir extensiones y componentes al IDE para
incrementar las funcionalidades de este.
Integración con Sistemas de Control de Versiones: permiten la utilización de sistemas de control de versiones para el
código fuente / proyectos / soluciones que tengamos.
Depurador: permiten depurar el código fuente utilizando herramientas disponibles para ello.
Importar y Exportar proyectos: permiten trabajar con proyectos que han sido creados con el mismo IDE pero en
instalaciones diferentes.
Incluyen Manual de Usuarios y Ayuda.
11
Descarga e instalación Visual Studio Code:
[Link]
12
Utilidades. (Panel izquierdo).
Explorador de ficheros. (Panel a
Interfaz Visual la derecha del anterior).
Studio Code Editor de código. (Panel derecho
superior).
Terminal / Salida / Errores /
Consola. (Panel derecho inferior).
13
Panel Utilidades
01 02 03 04 05
Explorador: Búsqueda: Control de Ejecución y Extensiones:
permite realizar código fuente: Debug: añade añadir
trabajar con búsquedas en integrar funcionalidad extensiones a
ficheros y los ficheros y nuestro es extra a la Visual Studio
carpetas. carpetas que código fuente ejecución y Code.
tenemos con un gestor depuración de
cargados en de código código fuente.
Visual Studio fuente.
Code.
14
Panel Explorador de
ficheros
Muestra las carpetas y ficheros que tienes
cargados en Visual Studio Code. El explorador
tiene dos secciones principales, en la sección
superior podrás acceder rápidamente a los
ficheros que tienes abiertos en el editor de
código y en la inferior tienes todas las carpetas y
ficheros cargados. Para abrir ficheros en el
editor de código simplemente tienes que hacer
clic los ficheros y se abrirán en el editor; es
posible tener más de un fichero abierto a la vez
en el editor de código.
15
Panel Editor de
código
Crear o editar los ficheros de código
fuente que abras.
16
Panel Terminal: es un terminal del sistema Salida: muestra el resultado de la ejecución
Terminal /
operativo integrado en Visual Studio Code y de los programas.
que se abre por defecto en la carpeta que
tienes cargada en el explorador de ficheros.
Salida /
Errores /
Consola
Errores: muestra los errores durante la Consola debug: muestra los mensajes
ejecución de los programas. durante la ejecución en modo depuración de
los programas. Este panel no lo utilizaremos
en el libro.
17
Hola JavaScript!
1. Creamos una carpeta llamada Ejercicios_JavaScript en nuestra PC.
2. Abrimos nuestro IDE Visual Studio Code.
3. Seleccionamos Open Folder…
4. Buscamos y seleccionamos la carpeta que acabamos de crear.
5. Creamos el archivo de código.
▪ Boton New File o Clic derecho en el panel de archivos y seleccionamos New Fil
6. Renombramos el archivo a [Link]
7. Clic o doble clic para abrirlo y editarlo
8. Escribimos el código:
▪ [Link]("Hola Time of Software");
▪ [Link]("Bienvenid@ al libro Aprende JavaScript en un fin de semana");
9. Ejecutamos:
▪ Utilizar el terminal integrado en Visual Studio Code.
▪ Ejecutarlo utilizando las funcionalidades que ofrece Visual Studio Code. 18
Ejecución en Terminal integrado
VSCode
En el menú principal de Visual Studio Code hay una opción que te permite abrir el
terminal integrado:
Terminal -> New Terminal
Una vez abierto el terminal tienes que escribir el siguiente comando:
“node [Link]” y presionar Enter.
19
Ejecución utilizando
funcionalidades
VSCode
En el menú principal de Visual Studio
Code hay una opción que se llama “Run”
o “Ejecutar”, elige el submenú “Run
without debugging” o “Ejecutar sin
depurar”:
Acto seguido Visual Studio Code te
preguntará qué tiene que utilizar para
ejecutar el programa, selecciona la
opción [Link].
20