Programador Web Inicial

Javascript
CONCEPTOS GENERALES: SINTAXIS Y
VARIABLES
 ● Reconocer qué es un algoritmo,
elementos de entrada, salida y
proceso.
OBJETIVOS DE LA CLASE
● Aprender qué es una variable y cómo
declararla.
● Indagar cómo asignar y cambiar el
valor de una variable.
 JAVASCRIPT:
FUNDAMENTOS
¿QUÉ ES JAVASCRIPT?
JavaScript es un lenguaje de
programación que se utiliza
principalmente para aportar dinamis mo a
sitios y aplicaciones web .
Técnicamente, J avaScript es un lenguaje
de programación interpretado por lo que
el código es crito con J avaScript s e puede
probar directamente en cualquier
navegador s in neces idad de proces os
intermedios .
J avaScript funciona en complemento con
los lenguajes web HTML Y CSS3.
 APLICACIÓN WEB

Mientras que los sitios web buscan brindar

información es tática, las web apps permiten a los
us uarios realizar múltiples tareas .

Las aplicaciones web son plataformas

dinámicas e interactivas y s us funcionalidades
es tán en cons tante mantenimiento y mejora.
FRONT-END y BACK-END
 EVOLUCIÓN DE JAVASCRIPT

La primera vers ión de J avaScript ES1 s e lanzó en 1997 y el lenguaje fue

cambiando con el tiempo. En el curs o nos focalizamos en las vers iones ES5 y
ES6
SINTAXIS Y CÓDIGO
 CÓDIGO JAVASCRIPT
JavaScript tiene s us propias reglas para la s intaxis ,
aunque res peta los es tándares de muchos lenguajes
de programación lógicos . Exis ten dos maneras de
es cribir código en J avaScript.
¿CÓMO ESCRIBIR CÓDIGO JS?
● Dentro de un archivo html, entre medio de las
etiquetas <script>
Ejemplo:

<script>
// Aquí se escribe el código JS
</script>
¿CÓMO ESCRIBIR CÓDIGO JS?
● En un archivo individual con extensión .js
Ejemplo: mi-archivo.js

Recuerda no utilizar espacios ni mayúsculas en

los nombres de archivo.

<script src="js/main.js"></script>
 SINTAXIS: REGLAS BÁSICAS
● No se tienen en cuenta los es pacios en blanco y las
nuevas líneas (al igual que HTML).
● Se dis tinguen las mayús culas y minús culas .
● Se pueden incluir bloques de comentarios :

<script>
// Comentario simple: una línea
/* Comentario de más de una línea I
Comentario de más de una línea II */
</script>
SINTAXIS: PALABRAS RESERVADAS
● Palabras res ervadas : s on las palabras que s e utilizan
para cons truir las s entencias de J avaScript y que por
tanto no pueden s er utilizadas libremente.
Las palabras actualmente res ervadas por J avaScript
s on:
break, case, catch, continue, default, let
delete, do, else, finally, for, function, if, in,
instanceof, new, return, switch, this, throw,
try, typeof, var, void, while, with, etc.
VARIABLES Y
VALORES
 VARIABLES
Una variable es un es pacio <script>
res ervado en la memoria que, //Declaración de variable ES5.

como s u nombre indica, puede var nombreVariable1;

cambiar de contenido a lo
//Declaración de variable ES6.
largo de la ejecución de un
let nombreVariable2;
programa. Podemos
const LENGUAJE = "JAVASCRIPT";
almacenar un número, un
</script>
texto, un lis tado de números ,
etcétera.
 VALORES

A una variable a la cual se le

as igna un valor al declarar s e le
dice variable inicializada
 TIPOS DE VALORES
En una variable podemos asignar distintos tipos de valores, ya sea
un número, un texto, o res ultados de operaciones entre ambos .

<script>
let variableNumerica;
var variableTexto;

variableNumerica = 5;
variableTexto = "Mi texto";
variableTexto = 'Mi texto';
</script>
¿Y cómo sa bemos que va lores
tienen nuestra s va ria bles?
console .log ()
Para im p rim ir las variab le s y conoce r su valor utilizam os una
función ya incluid a e n JS llam ad a console.log;

let nombre = "Leia";

console.log(nombre);

Nóte se q ue e sta e s una he rram ie nta p ara q ue desarrolladores/as

e ntie nd an m e jor e l cód ig o. Jam ás usare m os e sto p ara m ostrarle alg o al
usuario final.
¡A p racticar!
>> Consigna: De finí e n un archivo JS variab le s con:

1. Tu nom b re
2. Tu ap e llid o
3. Tu e d ad
4. Si te né s m ascota

Lue g o im p rim í las variab le s e n la consola.

¿Sab e s d e q ué tip o e s cad a variab le ?

 OPERACIONES BÁSICAS
Con variables de valores numéricos podes realizar operaciones
matemáticas : s umas , res tas , multiplicaciones ,etc.
<script>
var numeroA = 1;
let numeroB = 2;
const NUMEROC = 3;
//Suma de dos números (1 + 2 = 3)
let resultadoSuma = numeroA + numeroB;
//Resta de dos números (2 - 1 = 1)
let resultadoResta = numeroB - numeroA;
//Producto de dos números (2 * 3 = 6)
let resultadoProducto = numeroB * NUMEROC;
</script>
 OPERACIONES BÁSICAS
Con variables de tipo string (texto) se puede concatenar los valores,
es decir, combinarlas .

<script>
var textoA = "FULL";
let textoB = "STACK";
const BLANCO = " ";
//Concatenar textoA y textoB ("FULL" + "HOUSE" = "STACK")
let resultadoA = textoA + textoB;
//Concatenar textoB y 1 ("STACK" + 1 = "STACK1")
let resultadoB = textoB + 1;
//Concatenar textoA, BLANCO y textoB ("FULL" + " " + "STACK" = "FULL STACK")
let resultadoC = textoA + BLANCO + textoB;
</script>
PROMPT, CONSOLA Y
ALERT
 PROMPT
La sentencia prompt() mos trará un cuadro de diálogo para
que el us uario ingres e un dato. Se puede proporcionar un
mens aje que s e colocará s obre el campo de texto. El valor
que devuelve es una cadena que repres enta lo que el us uario
ingres ó.

<script>
let nombreIngresado = prompt("Ingrese su nombre");
</script>
EJEMPLO DE PROMPT

En la pantalla del navegador, el

us uario verá una ventana
s obre la web que le s olicitará
un dato.

Al valor que el us uario ingres a

s e lo conoce por el término de
entrada.
 CONSOLA
La sentencia cons ole.log() mues tra el mens aje que pas emos
como parámetro a la llamada en la cons ola J avaScript del
Navegador web.

<script>
console.log("Mensaje de prueba");
</script>
EJEMPLO DE CONSOLE.LOG

En Chrome, la consola del

navegador es tá dis ponible
accediendo mediante:
Botón derecho sobre alguna
parte de la web > Inspeccionar
> Consola
 ALERT
La sentencia alert() mos trará una ventana s obre la página web
que es temos accediendo mos trando el mens aje que s e pas e
como parámetro a la llamada.

<script>
alert("¡Hola Mundo!");
</script>
EJEMPLO DE ALERT

En la pantalla del navegador, el

us uario verá una ventana s obre
la web que mues tra un
mens aje.

Al valor que mos tramos al

us uario como un res ultado s e
lo conoce por el término de
salida.
 ALGORITMO
En programación, un algoritmo es un conjunto de
procedimientos o funciones ordenados que se necesitan
para realizar cierta operación o acción. Por ejemplo, en
una s uma el algoritmo implica tomar un dato, s umarlo a otro y
obtener un res ultado.
 EJEMPLO DE SCRIPT
COMPLETO
Este es un ejemplo de un Script JS corriendo en un archivo HTML.
<!DOCTYPE html>
<html>
<head>
<title>Mi primer App - FullStack</title>
<script>
let entrada = prompt("Ingresar una letra");
let salida = entrada + " " + "ingresada";
alert(salida);
</script>
</head>
<body>
<h2>Esta página contiene una app</h2>
</body>
</html>
Si ingreso “A”...

Obtengo...
 CREAR UN ALGORITMO JS SIMPLE

Crea un script en JS que le solicite al usuario ingresar datos y

luego, mediante J avaScript, realiza operaciones s obre los
mis mos .
>> Consigna: Crea un script en JS que le solicite al usuario
ingresar uno o más datos. Luego, con JavaScript, realiza
operaciones matemáticas o de concatenación sobre las
entradas teniendo en cuenta el tipo de dato. Al finalizar
mostrar el resultados con alert() o console.log()

>>Incluir:
Archivo HTML con código JavaScript entre etiquetas
<script></script>, que incluya la definición de un algoritmo.
>>Ejemplo:
- Pedir nombre mediante prompt y mostrarlo en
consola junto con algún texto de saludo.
Ejemplo: ¡Hola, Juan!
- Pedir un número mediante prompt, parsearlo,
sumarlo a otro que se encuentre almacenado en
una variable y luego mostrar el resultado en
consola.
- Pedir un texto mediante prompt, luego otro,
concatenarlos y mostrarlo en un alerta.
GLOSARIO:
Parsear: es una palabra devengada del inglés
"parse". Refiere en programación, a una
actividad que consiste en el análisis de texto
para determinar si cumple o no reglas o
patrones y en base a esto tomar alguna
determinación.

Script : un script es una secuencia de

instrucciones que realizan una o más tareas.
RECURSOS:

●Consola, variables y tipos de datos |

Los apuntes de Majo (Página 1 a 8).
●Variables , valores y referencias |
Te lo explico con gatitos .
●Práctica interactiva s obre Algoritmia |
La aventura del punto.