Javascript #1 - Introducción A Javascript

FULL STACK COMMUNITY SCHOOL
INTRODUCCIÓN A JAVASCRIPT
TABLA DE CONTENIDOS
TABLA DE CONTENIDOS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
GUÍA Nª 1 : INTRODUCCIÓN A JAVASCRIPT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
El porqué de JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
¿Qué es Javascript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
JavaScript en Acción . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
La Sintaxis de JavaScript . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Ejecutando Código . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Las Funciones en JavaScipt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Los Objetos en Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
RESUMEN : INTRODUCCIÓN A JAVASCRIPT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
FULL STACK COMMUNITY SCHOOL / INTRODUCCIÓN A JAVASCRIPT / Página 1

INTRODUCCIÓN A
JAVASCRIPT
JavaScript ha cambiado mucho a lo largo de los años. Actualmente estamos en un momento
en el que hay una biblioteca de JavaScript para casi todo lo que te gustaría construir.
JavaScript vive tanto en el cliente como en el servidor, en el escritorio y en los dispositivos

móviles.
El objetivo de esta guía es ayudarte a comprender cómo funciona el lenguaje, qué se puede
hacer con él, los recursos disponibles y parte del ecosistema en torno del lenguaje y sus
herramientas.
A veces señalaremos cosas que te pueden pedir en una entrevista técnica. Podremos todo el
esfuerzo por ayudarte a familiarizarse con esta comunidad en crecimiento.
Algunos de los temas que cubrirémos a largo de las próximas guías son :
• Comprender la sintaxis y las estructuras de JavaScript

• Crear guiones que sean fáciles de entender y mantener
• Usar herramientas para depurar JavaScript
• Manejo de eventos
• Cómo funciona JavaScript en el servidor
• Los marcos que existen para hacer de JavaScript un lenguaje fuertemente tipado
• Marcos de aplicación de JavaScript y cómo funcionan
• Recuperando datos del servidor
JavaScript es esencial en el desarrollo web moderno; Las aplicaciones de una sola página
(SPA) constituyen la mayoría de los sitios que se crean hoy en día.
Comprender JavaScript te permitirá agregar interactividad a tus sitios webs y reducir la curva
de aprendizaje en Frameworks Javascript.
Esto no quiere decir que necesitas frameworks para todo, pero para agregar cualquier nivel
de interactividad a su sitio, necesitas JavaScript.

Introducción suficiente: tienes estas guías para aprender sobre JavaScript, así que
comencemos hablando rápidamente sobre JavaScript en un alto nivel antes de sumergirte en
él.
En esta guía, aprenderás
• Por qué JavaScript es importante para ti como desarrollador

• Cómo agregar JavaScript a un documento web
• Programación orientada a objetos (OOP) en relación con JavaScript
Lo más probable es que ya se haya encontrado con JavaScript y ya tenga una idea de lo que
es y lo que puede hacer, por lo que primero me moveré rápidamente a través de algunos
conceptos básicos del lenguaje y sus capacidades. Si ya conoce bien JavaScript, y
simplemente quiere saber más sobre las características y conceptos más nuevos y
accesibles, puede omitir una idea. Sin embargo, puede haber alguna información que haya
olvidado, y un poco de revisión tampoco hace daño.
EL PORQUÉ DE JAVASCRIPT
Como se discutió, JavaScript está en todas partes. Además de HTML y CSS son todas las
herramientas que necesita para desarrollar un sitio web.
Puedes trabajar tanto en el lado del cliente como en el servidor utilizando JavaScript. Esto
hace que la demanda de desarrolladores de JavaScript sea muy alta.
Y la alta demanda significa varias oportunidades de trabajo y tarifas competitivas para los
desarrolladores.
El salario primedio de un desarrollador JavaScript es de 110.800 USD al año en los Estados

Unidos
Al escribir estas líneas, el salario promedio, por lo tanto, no solo JavaScript es un lenguaje
que vale la pena echarle un vistazo, sino que puede ser una buena adición a su conjunto de
herramientas como desarrollador y una excelente inversión con retornos más que
generemoso. Analicemos rápidamente qué es JavaScript.

¿QUÉ ES JAVASCRIPT?
JavaScript es un lenguaje de script interpretado. El entorno host proporcionará acceso a
todos los objetos necesarios para ejecutar el código.
La característica principal de JavaScript es la capacidad que tiene de agregar interactividad a

un sitio web.
Esto funciona porque el intérprete está integrado en un navegador web, por lo tanto, no
necesita agregar ningún software más que nuestro navegador de toda la vida
Esto ha convertido a JavaScript en un lenguaje de fácil acceso porque todo lo que necesita
es un editor de texto y un navegador.
En el lado del cliente, puede agregar niveles de interactividad como responder a los clics de
los botones y validar el contenido de un formulario.
También le permitirá aprovechar las API (interfaces de programación de aplicaciones) que

están integradas en un navegador. Agregar algo como capacidades de geolocalización a su
sitio es un ejemplo de esto.
Otro caso de uso es ejecutar JavaScript en el servidor, utilizando un entorno como Node.js.
Un ejemplo de JavaScript del lado del servidor es la capacidad de hacer cosas como hacer
solicitudes desde una base de datos y responder a solicitudes HTTP y crear archivos.
La mayoría de estas guías se centrará en el lado del cliente; sin embargo, hay muy poca
diferencia desde la perspectiva del código.

JAVASCRIPT EN ACCIÓN
Aplicar JavaScript a un documento web es muy fácil; todo lo que necesitas hacer es usar el
etiqueta de script :
<script>
// Tu código aquí
</script>
Si bien esta es la forma más sencilla de agregar JavaScript a la página, no se recomienda.
Este es un ejemplo de JavaScript en línea. Una de las razones para no construir su sitio de
esta manera es que se vuelve difícil de mantener con el tiempo.
Imagínese, a medida que su sitio web crece en tamaño, lo difícil que sería mantener todo
organizado.
La forma preferida de agregar JavaScript a una página HTML es hacer referencia a un archivo
externo, ejemplo :
archivo .js
<script src = "js / myfile.js"> </script>
Tenga en cuenta que htML 5 requiere que la etiqueta del script tenga su propia etiqueta de
cierre. Esto asegurará la compatibilidad hacia atrás con los navegadores más antiguos.
Además, agregar la etiqueta del script justo antes de la etiqueta del cuerpo final se considera
una práctica recomendada.
LA SINTAXIS DE JAVASCRIPT
Aprender cualquier lenguaje de programación es muy similar a aprender un idioma extranjero.
Hay reglas a seguir y eso puede requerir una forma diferente de pensar.
Hay mucha resolución de problemas en la programación.
Pasas tiempo observando una situación e intentando descubrir cómo usar el código para
resolver ese problema.
Con eso en mente, tomemos ese ángulo en cómo escribimos JavaScript.

Si quieres guardar una pieza de información que se usarás más adelante, esto se denomina
variable.
Si recuerdas álgebra de la enseñanza media, siempre hay ejemplos en los que una palabra o
letra representa un valor:
10 + x = 15
En este ejemplo, x es una variable que representa un número. Usando JavaScript, puede
declarar una variable y darle un valor y luego usarlo más tarde:
var x = 5;
10 + x = 15;
El código anterior no es JavaScript perfecto, pero ilustra la idea de cómo funcionan las
variables.
La primera línea se usa la palabra clave var ; esto está integrado en el lenguaje y solo se
puede usar al declarar una variable.
Al final de cada línea hay un punto y coma, que puede considerarse como el punto al final de
una oración.
El intérprete de JavaScript no requiere que lo tengas. Si no agregas punto y coma, el

intérprete los hará.
Para tener más control y facilitar la lectura, se recomienda que los agregues por tu cuenta.
La palabra clave var no es la única forma de declarar una variable. También se pueden usar
otras palabras clave como let y const .
Cubriremos lo que los hace diferentes y cuándo uno debe usarse sobre otro en la entrega de
la 3º Guía “Variables en Javascript”.
Otro escenario es cuando tienes algún código y solo quieres ejecutarlo cuando lo necesitas.
JavaScript llama a esto una función. Puede escribir una función, agregarle todos los
comandos que desea que se ejecuten y luego hacer que espere hasta que la necesite, así:

función doMath (num1, num2) {

let sum = num1 + num2;
return sum;
}
Esta función de muestra tiene el nombre doMath. Esto permite que la función sea
referenciada o llamada desde otras partes de su código.
Esta función también acepta dos argumentos o parámetros, sum1 y sum2 . Piense en ellos
como variables para su función; solo representan datos que la función necesitará para
ejecutarse correctamente. En este caso, es un conjunto de números.
A continuación están las llaves ( { } ). Contienen un bloque de código. Aquí encontrará todo lo
que necesita para que esta función funcione.
Puede agregar tantas líneas de código como necesite. Como regla general, una función debe
realizar solo una cosa.
Usando doMath como ejemplo, solo suma números juntos. Si desea que suceda algo más,
se debe escribir otra función.
Esto ayudará al proceso de depuración. También es importante tener en cuenta que el

lenguaje JavaScript en sí contiene funciones para realizar tareas como la manipulación de
cadenas y las matemáticas.
Digamos que quieres dejar comentario a ti mismo para en un futuro recordar lo que hacia ese
trozo de código. En este caso, debes tener algo en tu código, que no se ejecutará como
código. Agregar comentarios a su código puede declararse en dos variaciones:
// comentario de una sola línea
*/
comentario de varias líneas
/*
Agregar comentarios de varias líneas también es útil cuando está depurando su código. Por
ejemplo, si no desea eliminar lo que tiene, pero no desea que se ejecute el código, puede
hacer un comentario.
Hasta ahora, ahora sabe cómo resolver algunos problemas: cómo conservar datos, ejecutar
funciones y dejar recordatorios en el código.

Ahora tomemos un tiempo para hablar sobre cómo se ejecuta el código en tu navegador.
EJECUTANDO CÓDIGO
El navegador lee una página web de arriba a abajo, por lo que el orden en que se ejecuta el
código depende del orden de los bloques de script.
Un bloque de script es el código entre etiquetas <script> y </script> ; Si tiene un archivo

externo .js , también se leerá de arriba a abajo. (También tenga en cuenta que no solo el
navegador puede leer su código; el usuario de un sitio web también puede ver su código, por
lo que no debe poner nada secreto o sensible allí.)

Hay tres bloques de script en el siguiente ejemplo:
<! DOCTYPE html>

<html>
<head>
<script type = "text / javascript">

alert ("Primer bloque de script");
alert ("Primer bloque de script - Segunda línea");
</script>
</head>
<body>
<h1> Página de prueba </h1>
<script type = "text / javascript">

alert ("Segundo bloque de script");
</script>
<p> Un poco más de HTML </p>
<script type = "text / JavaScript">
alert ("Tercer bloque de script");
función doSomething () {
alert ("Función en el tercer bloque de script");
}
</script>
<body>
</html>

Si lo pruebas, verás que aparece el cuadro de diálogo alert ( ) en el primer bloque de

secuencia de comandos y muestra el mensaje
Primer bloque de script
Esto es seguido por el siguiente diálogo de alert ( ) en la segunda línea que muestra el
mensaje
Primer bloque de secuencia de comandos - Segunda línea.
El intérprete continúa por la página y llega al segundo bloque de script, donde se muestra la
función alert ( )
Segundo bloque de script
Y el tercer bloque de script lo sigue con una declaración alert ( ) que muestra
Tercer bloque de script
Aunque hay otra declaración de alert dentro de la función en unas pocas líneas hacia abajo,
que no se ejecuta y no muestra el mensaje.
Esto se debe a que está dentro de una definición de función ( function doSomething () ), y
el código dentro de una función se ejecuta solo cuando se llama a la función.
Hasta ahora en esta guía, has visto un poco sobre el lenguaje JavaScript, ha visto algunas de
las reglas de sintaxis, ha aprendido algunos de los componentes principales del lenguaje
( aunque sea brevemente ) y ha ejecutado algunos scripts JavaScript.
Has cubierto bastante distancia. Antes de pasar a un examen más detallado del lenguaje
JavaScript en las siguientes secciones, exploremos las partes importantes del lenguaje
JavaScript: funciones y objetos.

LAS FUNCIONES EN JAVASCRIPT

En la última sección, viste un código que no se ejecutó hasta que lo solicitamos
explícitamente. Las funciones son extremadamente flexibles en JavaScript.
Se pueden asignar a variables y pasar como una propiedad a otras funciones como
argumento. Las funciones también pueden devolver otra función.
Echemos un vistazo a algunos ejemplos:
var doMath = función ( num1, num2 ) {

result var = num1 + num2;
return resul;
};
var myResult = doMath ( 2,3 );
Este ejemplo ilustra cómo puedes asignar una función directamente a una variable y luego
usar esa variable para llamar a la función. Esta función toma dos números como argumentos.
Cuando los números se pasan a la función, se suman y el resultado se devuelve al código

que llama a la función:
function message ( ) {
return ‘Esta es la era de la información';
}
function displayMessage ( msgFunction, person ) {

consoe.log (msgFunction ( ) + person) // ¡Esta es la era de la información
hermano !
}
displayMessage (mensaje, "hermano !");

Este ejemplo pasa una función a otra función. La segunda función recibe una función como
argumento y luego ejecuta la función dentro de un comando de registro .
Esta función originalmente llamada mensaje devuelve una cadena que se mostrará junto con
la cadena que también se pasa dentro de su método console.log .
Las funciones son una parte muy importante del lenguaje JavaScript, y las cubriremos en
detalle en la Guía Nº 5 .
Otro concepto que presentaré aquí es el concepto de un objeto . También entraré en más
detalles sobre los objetos en la guía Nº 4 .
LOS OBJETOS EN JAVASCRIPT

Los objetos son fundamentales para la forma en que usa JavaScript. Los objetos en
JavaScript, en muchos sentidos, son como objetos en el mundo fuera de la programación.
(Existe; acabo de echar un vistazo.) En el mundo real, un objeto es solo una "cosa" (muchos
libros sobre programación orientada a objetos comparan objetos con sustantivos): un
automóvil, una mesa, una silla y el Teclado en el que estoy escribiendo.
Los objetos tienen
• Propiedades (análogas a los adjetivos): el automóvil es rojo .
• Métodos (como los verbos en una oración): El método para arrancar el automóvil
podría ser girar la llave de encendido .
• Eventos: Girando la llave de encendido resulta en el evento de arranque del automóvil .
La programación orientada a objetos intenta facilitar la programación modelando objetos del

mundo real.
Digamos que estás creando un simulador de coche. Primero, crea un objeto de automóvil,
dándole propiedades como el color y la velocidad actual .
Luego hay que crear métodos: tal vez un inicio método para arrancar el coche, y un freno
método para frenar el coche, en el que usted necesita para pasar la información acerca de lo
difícil que los frenos debe ser presionado para que pueda determinar el efecto de
ralentización.
Finalmente, necesita saber cuándo sucede algo con su automóvil. En POO ( Programación
orientada a objetos ), esto se llama evento.

Por ejemplo, cuando el tanque de gasolina está bajo, el automóvil envía una notificación (una
luz en el tablero) para informarle que es hora de llenarlo. En este código, escuchará ese
evento para poder hacer algo al respecto.
La programación orientada a objetos funciona con estos conceptos. Esta forma de diseñar
software ahora es muy común e influye en muchas áreas de programación, pero lo más
importante para usted, es fundamental para la programación de JavaScript.
Algunos de los objetos que usará son parte de la especificación del lenguaje: la cadena
objeto, el objeto Fecha y el objeto matemático , por ejemplo. Estos objetos proporcionan
muchas funciones útiles que podrían ahorrarle mucho tiempo de programación. Puedes usar
el objeto de fecha , por ejemplo, para obtener la fecha y hora actuales del cliente ( como el
dispositivo de un usuario ).
Almacena la fecha y proporciona muchas funciones útiles relacionadas con la fecha, como
convertir la fecha / hora de una zona horaria a otra. Estos objetos generalmente se
denominan objetos centrales porque son independientes de la implementación.
El navegador también está disponible para la programación a través de objetos que puede
usar para obtener información sobre el navegador y para cambiar el aspecto de la aplicación.
Por ejemplo, el navegador pone a disposición el Documentoobjeto, que representa una

página web disponible para JavaScript. Puede usar esto en JavaScript para agregar un nuevo
HTML a la página web que está viendo el usuario del navegador web.
Si usaste JavaScript con un diferente host, un servidor Node.js, por ejemplo, encontrarás que
el servidor que aloja JavaScript expone un conjunto muy diferente de objetos host porque su
funcionalidad está relacionada con las cosas que desea hacer en un servidor web.
Tenga en cuenta que aunque esta sección cubre JavaScript desde una perspectiva orientada
a objetos, el lenguaje en sí es un lenguaje de paradigmas múltiples donde lo usa como un
lenguaje funcional, imperativo o controlado por eventos.
A medida que avance en las siguientes guías propuestas por la comunidad, obtendrás una
visión más profunda de los objetos: los objetos centrales del lenguaje JavaScript, los objetos
que el navegador pone a disposición para el acceso y la manipulación mediante JavaScript, y
sus propios objetos personalizados. Por ahora,
sin embargo, todo lo que necesita saber es que los objetos en JavaScript son entidades que
puede usar para agregar funcionalidad a las páginas web, y que pueden tener propiedades y
métodos.

El objeto Math , por ejemplo, tiene entre sus propiedades uno que representa el valor de pi y
entre sus métodos uno que genera un número aleatorio
RESUMEN
En esta guía, aprendiste JavaScript a un alto nivel. Aprendiste por qué JavaScript puede ser
una buena herramienta en tu caja de herramientas del desarrollador.
También aprendiste algo de sintaxis básica y cómo agregar comentarios a su código. Viste
cómo usar variables para conservar los datos para su uso posterior y cómo se pueden usar
las funciones para tener el código listo a pedido.
Otro tema fue la ejecución de código (cómo el navegador lee el código de arriba a abajo). La
sección más grande fue la discusión de objetos.
Si va a trabajar con JavaScript, ya sea en el cliente o en el servidor, es importante

comprender que trabajar con objetos es el núcleo de JavaScript.

Javascript #1 - Introducción A Javascript

Cargado por

Copyright:

Formatos disponibles

Javascript #1 - Introducción A Javascript

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Javascript #1 - Introducción A Javascript

Cargado por

Copyright:

Formatos disponibles

FULL STACK COMMUNITY SCHOOL

FULL STACK COMMUNITY SCHOOL

RESUMEN : INTRODUCCIÓN A JAVASCRIPT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

FULL STACK COMMUNITY SCHOOL / INTRODUCCIÓN A JAVASCRIPT / Página 1

JavaScript vive tanto en el cliente como en el servidor, en el escritorio y en los dispositivos

• Comprender la sintaxis y las estructuras de JavaScript

FULL STACK COMMUNITY SCHOOL / INTRODUCCIÓN A JAVASCRIPT / Página 2

En esta guía, aprenderás

• Por qué JavaScript es importante para ti como desarrollador

El salario primedio de un desarrollador JavaScript es de 110.800 USD al año en los Estados

FULL STACK COMMUNITY SCHOOL / INTRODUCCIÓN A JAVASCRIPT / Página 3

La característica principal de JavaScript es la capacidad que tiene de agregar interactividad a

También le permitirá aprovechar las API (interfaces de programación de aplicaciones) que

FULL STACK COMMUNITY SCHOOL / INTRODUCCIÓN A JAVASCRIPT / Página 4

Si bien esta es la forma más sencilla de agregar JavaScript a la página, no se recomienda.

<script src = "js / myfile.js"> </script>

Con eso en mente, tomemos ese ángulo en cómo escribimos JavaScript.

FULL STACK COMMUNITY SCHOOL / INTRODUCCIÓN A JAVASCRIPT / Página 5

El intérprete de JavaScript no requiere que lo tengas. Si no agregas punto y coma, el

FULL STACK COMMUNITY SCHOOL / INTRODUCCIÓN A JAVASCRIPT / Página 6

función doMath (num1, num2) {

Esto ayudará al proceso de depuración. También es importante tener en cuenta que el

// comentario de una sola línea

FULL STACK COMMUNITY SCHOOL / INTRODUCCIÓN A JAVASCRIPT / Página 7

Un bloque de script es el código entre etiquetas <script> y </script> ; Si tiene un archivo

FULL STACK COMMUNITY SCHOOL / INTRODUCCIÓN A JAVASCRIPT / Página 8

Hay tres bloques de script en el siguiente ejemplo:

<! DOCTYPE html>

<script type = "text / javascript">

<h1> Página de prueba </h1>

<script type = "text / javascript">

<p> Un poco más de HTML </p>

<script type = "text / JavaScript">

alert ("Tercer bloque de script");

FULL STACK COMMUNITY SCHOOL / INTRODUCCIÓN A JAVASCRIPT / Página 9

Si lo pruebas, verás que aparece el cuadro de diálogo alert ( ) en el primer bloque de

Primer bloque de script

Primer bloque de secuencia de comandos - Segunda línea.

Segundo bloque de script

Tercer bloque de script

FULL STACK COMMUNITY SCHOOL / INTRODUCCIÓN A JAVASCRIPT / Página 10

LAS FUNCIONES EN JAVASCRIPT

Echemos un vistazo a algunos ejemplos:

var doMath = función ( num1, num2 ) {

var myResult = doMath ( 2,3 );

Cuando los números se pasan a la función, se suman y el resultado se devuelve al código

function displayMessage ( msgFunction, person ) {

displayMessage (mensaje, "hermano !");

FULL STACK COMMUNITY SCHOOL / INTRODUCCIÓN A JAVASCRIPT / Página 11

LOS OBJETOS EN JAVASCRIPT

• Propiedades (análogas a los adjetivos): el automóvil es rojo .

• Eventos: Girando la llave de encendido resulta en el evento de arranque del automóvil .

La programación orientada a objetos intenta facilitar la programación modelando objetos del

FULL STACK COMMUNITY SCHOOL / INTRODUCCIÓN A JAVASCRIPT / Página 12

Por ejemplo, el navegador pone a disposición el Documentoobjeto, que representa una

FULL STACK COMMUNITY SCHOOL / INTRODUCCIÓN A JAVASCRIPT / Página 13

Si va a trabajar con JavaScript, ya sea en el cliente o en el servidor, es importante

FULL STACK COMMUNITY SCHOOL / INTRODUCCIÓN A JAVASCRIPT / Página 14