Introducción a JavaScript

Let’s Go
What is JavaScript?
JavaScript es un lenguaje de programación que puede ser incluído en un
sitio web para hacerlo más interactivo.

Podés usar JavaScript para:

■ verificar o modificar los ■ procesar datos
contenidos de los formularios ■ escribir contenido de página
■ cambiar imágenes, texto, dinámicamente
diseño... ■ ...y mucho más!
■ abrir nuevas ventanas
■ manejar y administrar ‘eventos
del navegador’

2
Tomando el control del comportamiento:
“Si vemos a HTML como el esqueleto de nuestra página web y a CSS como la piel que
define la apariencia...

¡Ahora tomemos el control del comportamiento de nuestro sitio! ¡JAVASCRIPT es el

cerebro!“

HTML CSS JavaScript

+ + = Web Application!

3
JavaScript vs. Java
JavaScript no tiene nada que ver con Java. JS y Java son lenguajes de programación completamente
diferentes

● Lado del Cliente: Los programas pasan ● Lado del Servidor: el programa se ejecuta en el
a la computadora donde está el servidor y solo los resultados se pasan a la
navegador y esa computadora los ejecuta. computadora donde está el navegador. (JAVA, PHP,
● Interpretado: El programa se pasa Perl, ASP, JSP etc.)
como código fuente con todo el lenguaje ● Compilado: primero, los idiomas se convierten en
de programación visible. Luego se códigos de máquina y luego se pasan, por lo que
convierte en código de máquina a medida nunca podrá ver el lenguaje de programación
que se usa. original.

Ambos son:
● High level: escrito en palabras lo más cercanas posible al inglés. El contraste sería con el código de ensamblaje,
donde cada comando se puede traducir directamente a código de máquina.

4
¿Cómo se construye JavaScript? Elementos
básicos Una variable es una palabra que representa una
pedazo de texto, un número, un booleano verdadero o
falso, un valor o un objeto.
VARIABLES Un objeto es una colección de variables
Los operadores asignan valores a las
mantenidas juntas por una variable
variables o dicen qué tipo de pruebas u
padre.
operaciones realizar.
OPERATORS OBJECTS

CONTROL STRUCTURES FUNCTIONS

Las estructuras de control dicen qué Por ahora, veamos a las funciones como “bloques de
scripts deberían ejecutarse si se código”. Las funciones recopilan estructuras de control,
satisface una prueba acciones y tareas y se les puede indicar que ejecuten
esas secuencias de comandos cuando sea necesario.

5
Variables Una variable es un “almacenamiento con nombre”
para los datos.
Para crear una variable en JavaScript,
necesitamos usar la palabra clave var.

La declaración(statement) a la derecha crea una

variable con el nombre "mensaje":

Ahora podemos poner algunos datos en ella

utilizando el
assignment operator =
  
La string ahora se guarda en el área de memoria
asociada a la variable. Podemos acceder a ella
utilizando el nombre de la variable:

Para ser conciso, podemos fusionar la declaración

de variables y la asignación en una sola línea:

El método console.log() escribe un mensaje en la consola del

navegador. La consola es útil para fines de prueba.
Tip: Cuando pruebes este método, asegurate de que la vista de la
6 consola sea visible (presioná F12 para ver la consola).
Variables: una analogía de la vida real
Podemos comprender fácilmente el
concepto de una "variable" si lo
imaginamos como una "caja" de
datos, con una pegatina con un
nombre único. Por ejemplo, la
variable mensaje se puede imaginar
como una caja etiquetada como
"mensaje" con el valor "¡Hola!"
dentro de ella:

Podemos poner cualquier valor en

la caja.
También podemos cambiarlo. El
valor se puede cambiar tantas
veces como sea necesario.

Cuando el valor es cambiado, los datos viejos son removidos de la variable

7
Variable nombramiento
Hay dos limitaciones para un nombre de variable en JavaScript:
● El nombre debe contener solo letras, dígitos, símbolos $ y _.
● El primer carácter no debe ser un dígito.
 
Nombres válidos, por ejemplo:

Cuando el nombre contiene varias palabras, camelCase se usa

comúnmente. Es decir: las palabras van una tras otra, cada
palabra comienza con una letra mayúscula:
 
Ejemplos de nombres de variables incorrectos:

 
Las Mayúsculas importan:
Las variables llamadas apple y Apple son dos variables
diferentes:
 
Nombres Reservados (palabras claves):
Hay una lista de palabras reservadas, que no se pueden usar como
nombres de variables, porque el lenguaje mismo las usa.
8 Por ejemplo, las palabras var, let, class, return, function estan
reservadas
Tipos de datos básicos en JavaScript (I)

Un número
El tipo número sirve para números
enteros y decimales

(Hay muchas operaciones para números, por ejemplo,

multiplicación *, división /, suma +, resta - y así
sucesivamente. Veremos todo eso).

Una string
Una string en JavaScript debe ser citada

Las comillas dobles e individuales son citas

"simples". No hay diferencia entre ellas en
JavaScript.

9
Tipos de datos básicos en JavaScript (II)

Un booleano
El tipo booleano solo tiene dos
valores: true o false.
Este tipo se usa comúnmente para
almacenar valores de sí / no: true significa
"sí, correcto" y false significa "no,
incorrecto".

10
Tipos de datos básicos en JavaScript(III)

Un objeto
El tipo objeto es especial. Todos los demás
tipos anteriores son llamados “primitivos”,
porque sus valores pueden contener solo una
cosa (ya sea una cadena o un número o lo que
sea). Por el contrario, los objetos se utilizan
para almacenar colecciones de datos y
entidades más complejas.

Los valores se escriben como pares de

nombre:valor (nombre y valor separados por
dos puntos).
Los objetos JavaScript son contenedores para  valores con
nombre llamados propiedades. Por lo tanto, un objeto puede
contener varios pares ‘propiedad : valor de la propiedad’ pairs. (e.g.
model : “Fiat500”, maxSpeed : 200)
11
Tipos de datos básicos en JavaScript (IV)
Un array (arreglo)
Los arrays de JavaScript son usados para
almacenar múltiples valores en una sola
variable.

Un array es una variable especial,que puede

contener más de un valor a la vez.

Un array puede contener muchos valores bajo

un solo nombre, y podés acceder a los
valores haciendo referencia a un número de
índice.

Accedés a un elemento de un array refiriéndote al número

de índice.
[0] es el primer elemento de un array, [1] es el segundo,...
los índices de una array empiezan con 0.
12
Agregando JavaScript a una página web
Podés agregar un script en cualquier lugar dentro de las secciones head o body de tu
documento. Sin embargo, para mantener tu proyecto bien estructurado hay
algunas pautas básicas:

● Para insertar JavaScript en una página web, usá

la etiqueta <script>.
● Usá archivos de script externos: Sugerimos
usar un archivo separado para contener el
JavaScript (por ejemplo, main.js) lo que facilita
compartirlo en todas las páginas: 
● Cargá tu código javascript justo antes de la
etiqueta de cierre </body> en tu archivo
HTML. Esto es llamado bottom-loading.
Colocar scripts en archivos externos tiene algunas
ventajas:
➔ Separa el HTML y el código.
➔ Hace que el HTML y JavaScript sean más fáciles de
leer y mantener.
➔ Los archivos JavaScript en caché pueden acelerar las
13
cargas de página.
A codear! Ejercicio 1

Empecemos con nuestras primeras líneas de código JS!

● Creá una página HTML vacía (index.html).
● Creá tu archivo Javascript (main.js) en la misma carpeta de tu archivo
index.html.
● Poné una etiqueta <script> en index.html para cargar tu código Javascript.

En tu archivo main.js:
● Declará dos variables: admin y name.
● Asigná el valor "John" a name.
● Copiá el valor desde name a admin.
● Mostrá el valor de admin usando console.log (debe imprimir “John”).

14
JavaScript Operadores (básicos) (I)

ASSIGNMENT OR ‘ACTION’ OPERATORS ARITHMETIC OPERATORS

son usados para asignar valores a las son usados para realizar operaciones
variables de JavaScript. aritmética entre variables y/o valores (suma,
resta, división, multiplicación, por ejemplo).

El operador + también puede ser usado para agregar

15 (concatenar) strings.
JavaScript Operadores (básicos) (II)

COMPARISON OPERATORS LOGICAL OPERATORS

son usados para determinar igualdad o son usados para combinar múltiples
diferencia entre variables or valores. Estos expresiones booleanas y proporcionar una
operadores retornan valores true/false. única salida booleana(true/false).

&& = AND, || = OR, ! = NOT

16
JavaScript Tabla de Operadores / Uso
Operator Uses Operator Uses
+ suma dos números o añade dos cadenas: si se agrega más de ++ incrementa el número
un tipo de variable, incluida una string anexa a un número o -- decrece el número
viceversa, el resultado será una string == los números u objetos o valores deben ser iguales
- resta el segundo número del primero != los números u objetos o valores no deben ser iguales
/ divide el primer número por el segundo ! logical NOT (la declaración no debe ser true)
* multiplica dos números && logical AND (ambas declaraciones deben ser true)
% divide el primer número por el segundo y retorna el resto || logical OR (alguna de las declaraciones debe ser true)
= asigna el valor de la derecha al objeto en la izquierda los números u objetos o valores deben ser iguales, y deben ser
+= el objeto en la izquierda = el objeto en la izquierda + el valor ===
del mismo tipo de variable
en la derecha - esto también funciona al añadir strings los números u objetos o valores no deben ser iguales, o no
-= el objeto en la izquierda = tel objeto en la izquierda - el valor !==
deben ser del mismo tipo de variable
en la derecha
>  el número a la izquierda debe ser más grande que el número
a la derecha -esto también funciona para strings y valores
<  el número a la izquierda debe ser menor que el número a la
derecha -esto también funciona para strings y valores
>= el número a la izquierda debe ser más grande o igual que el
número a la derecha -esto también funciona para strings y
valores
<= el número a la izquierda debe ser menor o igual que el
número a la derecha -esto también funciona para strings y
valores
17
JS Estructuras de Control Tomando decisiones! (I)
Operadores condicionales:

if statement

A veces necesitamos realizar diferentes

acciones basadas en una condición.
Para eso está el if statement.

El if statement obtiene una condición,

la evalúa y, si el resultado es true,
ejecuta el código.

18
JS Estructuras de Control Tomando decisiones! (II)
Operadores condicionales:

the ‘else’ clause

El if statement puede contener un bloque

“else” opcional.

Se ejecuta cuando la condición es

incorrecta.

Do you need more conditions? Sometimes we’d like to test

several variants of a condition. There is an else if clause for
19 that. Search for information in Javascript ebook!!
Javascript Funciones (I): El núcleo de tu código!
las funciones agrupan código script; controlan las
estructuras, operaciones, llamadas a métodos, etc. de Function example: Sum two given values
la misma manera que un script normal. Estas
funciones se pueden llamar cuando sea necesario y
se ejecutará el código que contienen.

Esto hace que sea muy fácil reutilizar el código sin

tener que repetirlo en tu script.. DRY!

Function declaration:

Function call:

20 Qué pasaría si pasamos dos ‘strings’ a la función?

JavaScript Loops (I)

‘for’ loop

A menudo necesitamos realizar acciones similares

uchas veces seguidas.

Por ejemplo, cuando necesitamos imprimir

productos de una lista uno tras otro. O
simplemente ejecutar el mismo código para cada for (initialization; condition; step) {
número del 1 al 10.
// ... loop body ...
Los loops son una forma de repetir la misma
parte del código varias veces.
}
El loop for es el más utilizado.
Una sola ejecución del cuerpo del loop se llama iteración.
21
JS Loops: ‘for’ loop explicado
Partes de un ‘for’ loop: initialization, condition, step, body.

Aprendamos el significado de estas partes con un ejemplo. El

loop a la derecha ejecuta console.log(i) para i desde 0 hasta
(pero no incluyendo) 3:

Examinemos la declaración for parte por parte:

parte código acción

initialization var i = 0 Se ejecuta una vez al ingresar al loop.

Comprobada antes de cada iteración del loop, si falla el loop

condition i<3
se detiene.
Se ejecuta después del body en cada iteración, pero antes de
step i = i + 1 (or i++)
la verificación de condición.

body console.log(i) Corre una y otra vez mientras la condición sea verdadera

22
JS Loops: ‘for’ loop explicado (EJEMPLO)
Si sos nuevo en loops, entonces tal vez te ayude volver al ejemplo and reproducir como
funciona paso a paso en un pedazo de papel.

Esto es exactamente lo que sucede en nuestro caso (paso a paso):

23
JavaScript Loops (II)
‘while’ loop
while (condition) {
El while loop tiene la siguiente sintaxis: // code
// so-called "loop body"
}

Reproduzcamos la versión ‘while’ del ejemplo

previo con ‘for’ loop:

Mientras (while) condición sea verdadera,

el código del body del loop es ejecutado.
Por ejemplo, el loop a la derecha
imprime i mientras i < 3:

24 Qué pasaría si no ponemos i++ dentro del loop?

JS Funciones (II): parámetros/argumentos
declaramos dos arrays como estos… Ahora, llamamos a las funciones…

una función sin parámetros…

y finalmente una función con parámetros:

Preguntas:
● Qué resultados esperamos para cada llamada
de función?
● Cuál es la principal diferencia entre las dos
funciones? Cuál es la más útil?
● Qué hay de las dos últimas declaraciones?

25 Los parámetros son variables enumerados como parte de la definición de la

función. Los argumentos son valores pasados a la función cuando se invoca.
 ¡Gracias!
Time to start coding in JavaScript!!

26