Semana 4 Introducción Javascript

1. INTRODUCCION Y
CONDICIONALES
Mg. Richard E. Mendoza G.

3. https://www.youtube.com/watch?v=zlcnOr81lPc
Brendan Eich

5. JavaScript (JS) es un lenguaje de
programación ligero, interpretado,
orientado a objetos, débilmente tipado,
dinámico o compilado justo-a-tiempo (just-
in-time) con funciones de primera clase.
Débilmente tipado: se refiere a que
JavaScript ejecutará operaciones entre
distintos tipos de datos.
Dinámico: JavaScript no necesita ser
compilado, lo que facilita probar nuestro
código. También hace que los errores se
vean hasta que se ejecuta dicho código.
JAVASCRIPT
4 + "7"; // 47
4 * "7"; // 28
2 + true; // 3
false - 3; // -3

6. Creado (1995) como Mocha por NetScape
(Brendan Eich).
Mocha -> LiveScript -> JavaScript.
1995 Netscape 2.0 incorpora soporte Java y
renombra LiveScript a JavaScript
(objetivo comercial).
Microsoft JScript. IE 1996. IE 3.0.
W3C: DOM – Especificación JavaScript.
IE 6.0 – NetScape – Opera v7 – Mozilla v1.
1997 JavaScript como standard de ECMA:
ECMAScript.
JavaScript: marca registrada por Oracle.
Desde Junio 17, 2015, ECMA International
publico ECMAScript 6 o ES6.
HISTORIA JAVASCRIPT

7. https://developer.mozilla.org/es/docs/Web/JavaScript

8. Para 2019 JavaScript era parte de 3
lenguajes estándares para el desarrollo
web, con HTML y CSS. A finales de 2019 la
W3C decidió agregar como nuevo lenguaje
de programación WebAssembly.
JavaScript tiene una comunidad gigantesca
de programadores que construyen cosas
que nos ayudan a hacer cosas mas fáciles en
este lenguaje.
Frontend: React, Angular y Vue
Backend: Node JS
App de Escritorio: Electron
App Móviles: React Native
Cross-platform: Ionic
CARACTERISTICAS

9. 9
• El último estándar ECMAScript define
nueve tipos, 6 tipos de datos primitivos,
controlados por el operador typeof
• Undefined: typeof instance ===
"undefined"
• Boolean: typeof instance === "boolean"
• Number: typeof instance === "number"
• String: typeof instance === "string"
• BigInt: typeof instance === "bigint"
• Symbol: typeof instance === "symbol"
• Null: typeof instance === "object".
• Object: typeof instance === "object".
• Function: typeof instance ===
"function"
VALORES JS
typeof 40 // number
typeof Richard // undefined
typeof "Richard" // string
typeof true // boolean
typeof false // boolean
typeof null // object
typeof undefined // undefined
typeof []; //object
typeof {} //object

10. 10
• Una variable es un contenedor para un
valor, como un número que podríamos
usar en una suma, o una cadena que
podríamos usar como parte de una
oración. Para usar una variable, primero
debes crearla. Para hacerlo, escribimos la
palabra clave var o let seguida del
nombre con el que deseas llamar a tu
variable. Una vez declarado una variable,
la puedes iniciar con un valor.
VARIABLES JS
typeof 40 // number
typeof Richard // undefined
typeof "Richard" // string
typeof true // boolean
typeof false // boolean
typeof null // object
typeof undefined // undefined
typeof []; //object
typeof {} //object
var nombre="Richard"; //var nombre
nombre; //en consola
var edad; //declarar una var
edad; //undefined
edad=30; //inicializar var
edad //number
// array string[]
var elementos=["Laptop","Smartphone"]
elementos;
elementos[1];
// objecto
var persona={
nombre:"Richard",
edad: 30
}
persona;

11. 11
• El scope puede definirse como el alcance
que una variable tendrá en tu código. En
otras palabras, el scope decide a qué
variables tienes acceso en cada parte del
código. Existen dos tipos de scope, el
scope global y el scope local.
• Scope Local: Cuando puedes acceder
a una variable únicamente en cierta
parte del código, se dice que esa
variable está declarada en el scope
local.
• Scope Global: Una variable está en el
scope global cuando está declarada
fuera de una función o de un bloque.
SCOPE JS
//Scope Local
function misiontic() {
const soyEstudiante = true;
console.log(soyEstudiante);
}
misiontic(); // true
console.log(soyEstudiante);
//Scope Global
const soyEstudiante = true;
function misiontic() {
console.log(soyEstudiante);
}
misiontic(); //true
console.log(soyEstudiante); //true

12. 12
• En JavaScript, las declaraciones (por
ejemplo, de variables o funciones) se
mueven al principio de su scope o ámbito.
Este comportamiento se conoce como
hoisting y es muy importante tenerlo en
cuenta a la hora de programar para
prevenir posibles errores.
• Las funciones siempre se mueven
arriba del scope. Por lo tanto, podemos
elegir donde declararlas y usarlas.
• La declaración de las variables se
mueven arriba del scope, pero no la
asignación. Antes de usar una variable,
habrá que crearla y asignarla.
HOISTING JS
var miNombre=undefined
console.log(miNombre+"Soy Hoisting");
var miNombre="Richard";
hola();
function hola(){
console.log("Hola" miNombre),
}
var miNombre="Richard";

13. 13
• Coerción es la forma en la que podemos
cambiar un tipo de valor a otro, existen
dos tipos de coerción:
• Coerción implícita: Es cuando el
lenguaje nos ayuda a cambiar el tipo de
valor. Hecha automáticamente.
• Coerción explicita: Es cuando obligamos
a que cambie el tipo de valor. Hecha por
el programador.
COERCIÓN JS
var a = 4 + "7";
4 * "7";
//Coerción Implícita
var a = 20;
var b = a + "";
console.log(b);
//Coerción Explícita
var c = String(a);
console.log(c);
var d = Number(c);
console.log(d);

14. 14
OPERADORES JS
Nombre Operador abreviado Significado
Asignación x = y x = y
Asignación de adición x += y x = x + y
Asignación de resta x -= y x = x - y
Asignación de multiplicación x *= y x = x * y
Asignación de división x /= y x = x / y
Asignación de residuo x %= y x = x % y
Asignación de exponenciación x **= y x = x ** y
Asignación de desplazamiento
a la izquierda
x <<= y x = x << y
Asignación de desplazamiento
a la derecha
x >>= y x = x >> y
Asignación de desplazamiento
a la derecha sin signo
x >>>= y x = x >>> y
Asignación AND bit a bit x &= y x = x & y
Asignación XOR bit a bit x ^= y x = x ^ y
Asignación OR bit a bit x |= y x = x | y
Asignación AND lógico x &&= y x && (x = y)
Asignación OR lógico x ||= y x || (x = y)
Asignación de anulación lógica x ??= y x ?? (x = y)
//Operadores binarios:
3 + 2 //Suma
50 - 10 // Resta
10 * 20 //Multiplicación
20 / 2 //División
"Richard " + "Mendoza" //Operadores unitarios:
!false //negación
//Operadores para comparar:
3 == "3"; //Compara los valores
3 === "3"; //Compara y valida tipos
5 <= 6 //Compara si menor o igual
5 >= 6 //Compara si es mayor o igual
a && b //Valida si ambas son verdad
a || b
var edad = 40
edad++ //Incrementa el valor en 1
edad += 2 //Incrementa el valor por 2

15. 15
• Al hacer un programa necesitaremos
establecer condiciones o decisiones,
donde buscamos que el navegador
realice una acción A si se cumple una
condición o una acción B si no se cumple.
CONDICIONALES JS
Estructura de control Descripción
If
Condiciónsimple: Si ocurre algo, haz lo
siguiente...
If/else
Condiciónconalternativa: Si ocurre algo,
haz esto, sino, haz lo esto otro...
?:
Operadorternario: Equivalente a If/else,
método abreviado.
Switch
Estructuraparacasosespecíficos: Similar a
varios If/else anidados.
var nota = 5;
console.log("He realizado mi examen.");
if (nota < 3) {
calificacion = "Insuficiente";
} else if (nota < 4) {
calificacion = "Bien";
} else if (nota <= 4.5) {
calificacion = "Notable";
} else {
calificacion = "Sobresaliente";
}
console.log("He obtenido un", calificacion);
// Operador ternario:
var calificacion = nota < 5 ? "suspendido" : "aprobado";

16. 16
• La estructura de control switch permite
definir casos específicos a realizar en el
caso de que la variable expuesta como
condición sea igual a los valores que se
especifican a continuación mediante los
case.
SWITCH JS
switch (nota) {
case 5:
calificacion = "Sobresaliente";
break;
case 4:
calificacion = "Notable";
break;
case 3:
calificacion = "Bien";
break;
case 2:
calificacion = "Insuficiente";
break;
default:
calificacion = "Nota errónea";
break;
}
console.log("He obtenido un", calificacion);