01_JS

Desarrollo Web

•
SIN SIGLA

Florentina Aparicio
6/9/2023
¡Este material tiene más páginas!
Entonces, ¿te gustó este material?
Ayude a animar a otros estudiantes a mejorar el contenido
¿Te gustó este material? ¡Compartir! 🧡
Desarrollo Web

6949 Materiales compartidos
Descarga la aplicación para disfrutar aún más
Lea materiales sin conexión, sin usar Internet. Además de muchas otras características!
Vista previa del material en texto
Tema: Introducción a Java
Curso de Extensión: Introducción al Desarrollo Web
Ismael Orozco
ciorozco.unsa@gmail.com
Tema: JavaScript (Día 1)
Agenda
1. Introducción
2. Fundamentos de JavaScript
3. Ejercicios
1. Introducción
● HTML = Capa estructural
● CSS = Capa de presentación
● JavaScript (JS): = Capa de comportamiento 
1. Introducción
JavaScript
● Lenguaje de programación, que nos permite agregar interacción y 
comportamiento a nuestras páginas.
● Es un lenguaje de scripting del lado del cliente, es decir, que se ejecuta en 
la máquina del usuario y no en el servidor.
● Es un lenguaje de programación de tipado dinámico: no es necesario 
indicar de qué tipo son las variables.
1. Introducción
1. Introducción
<p>Barrio: 
 <select name="barrio">
 <option>San Ignacio</option>
 <option>Santa Cecilia</option>
 <option>Villa Cristina</option>
 <option>Parque Belgrano</option>
 </select>
</p>
Archivo barrios.html
Solución: Acceso mediante el DOM (Document Object Model) Se puede 
acceder mediante scripts a todos los elementos, atributos y texto en una 
página web.
¿Si tengo 1000 barrios?
1. Introducción
La forma más fácil de probar unas líneas de JavaScript es abrir
la herramienta de desarrollador en el navegador (F12) y elegir
la pestaña de Consola.
Agregando JavaScript a una página
Script Embebido
<script>
 … poner aquí código JavaScript
</script>
Script Externo
<script src="mi_script.js"></script>
1. Introducción
Ejemplo 1: Crear un pop-up que muestre un mensaje de texto
<!DOCTYPE HTML>
<html>
<body>
 <p>Antes del script...</p>
 <script>
 alert( '¡Hola, mundo!' );
 </script>
 <p>...Después del script.</p>
</body>
</html>
Agenda
1. Introducción
2. Fundamentos de JavaScript
3. Ejercicios
2. Fundamentos de JavaScript
● Distingue entre mayúsculas y minúsculas (es case-sensitive) 
● Las instrucciones están separadas por punto y coma (;) 
● Comentarios:
○ // un comentario de una línea
○ /* este es un comentario
más largo, de varias líneas
*/
2. Fundamentos de JavaScript - Variables
● Variable: Es un “almacén con un nombre” para guardar datos. 
● Para generar una variable en JavaScript, se usa la palabra clave let.
● En versiones anteriores de JS se usa var (solo cambia el alcance)
<script>
 let message;
 message = 'Hola!';
 alert(message); 
 // muestra el contenido de la variable
</script>
<script>
 let user = 'John';
 let age = 25;
 let message = 'Hola';
 let user = 'Johny'; // funciona?
 user = 'Johny'; // funciona?
</script>
2. Fundamentos de JavaScript - Variables
● Existen dos limitaciones de nombre de variables en JavaScript:
○ El nombre únicamente puede incluir letras, dígitos, o los símbolos $ y _.
○ El primer carácter no puede ser un dígito.
○ No tienen que ser palabras reservadas (Sintaxis JS)
<script>
 let $ = 1; 
 let _ = 2; 
 alert($ + _); // funciona?
</script>
2. Fundamentos de JavaScript - Constantes
● Para declarar una constante usar const en vez de let.
● Las constantes se nombran utilizando letras mayúsculas y guiones bajos
<script>
 const myBirthday = '18.04.1982';
 myBirthday = '01.01.2001'; 
//error
</script>
<script>
 const COLOR_RED = "#F00";
 const COLOR_GREEN = "#0F0";
 const COLOR_BLUE = "#00F";
 const COLOR_ORANGE = "#FF7F00";
</script>
2. Fundamentos de JavaScript - Tipos de datos
● boolean: true y false.
● null: Una palabra clave especial que denota un valor nulo.
● undefined: Una propiedad de alto nivel cuyo valor no está definido.
● Infinity: Representa el Infinito matemático ∞. Es un valor especial que 
es mayor que cualquier número
● number: Un número entero o un número con coma flotante. 
● bigInt: Un número entero con precisión arbitraria. 
● string: Una secuencia de caracteres que representan un valor de texto. 
● typeof(x): El operador typeof devuelve el tipo.
2. Fundamentos de JavaScript - Conversión de tipos
● A String: La conversión a string ocurre cuando necesitamos la 
representación en forma de texto de un valor.
● A Number: La conversión numérica ocurre automáticamente en funciones 
matemáticas y expresiones.
let value = true;
alert(typeof value); // boolean
value = String(value); // ahora value es el string "true"
alert(typeof value); // string
let str = "123";
alert(typeof str); // string
let num = Number(str); // se convierte en 123
alert(typeof num); // number
2. Fundamentos de JavaScript - Conversión de tipos
● A String: La conversión a string ocurre cuando necesitamos la 
representación en forma de texto de un valor.
● A Number: La conversión numérica ocurre automáticamente en funciones 
matemáticas y expresiones.
● A Boolean: Ocurre en operaciones lógicas (más adelante veremos test 
condicionales y otras cosas similares) pero también puede realizarse de 
forma explícita llamando a la función Boolean(value).
alert( Boolean(1) ); // true
alert( Boolean(0) ); // false
alert( Boolean("hola") ); // true
alert( Boolean("") ); // false
2. Fundamentos de JavaScript - Operadores
● Suma +
● Resta -
● Multiplicación *
● División /
● Resto %
● Exponenciación **
alert( 5 % 2 ); // 1 es un resto de 5 dividido por 2
alert( 8 % 3 ); // 2 es un resto de 8 dividido por 3
alert( 2 ** 2 ); // 2² = 4
alert( 2 ** 3 ); // 2³ = 8
alert( 2 ** 4 ); // 2 ⁴ = 16
2. Fundamentos de JavaScript - Comparaciones
● Mayor/menor que: a > b, a < b.
● Mayor/menor o igual que: a >= b, a <= b.
● Igual: a == b (ten en cuenta que el doble signo == significa comparación, 
mientras que un solo símbolo a = b significa una asignación).
● Distinto. En matemáticas la notación es ≠, pero en JavaScript se escribe 
como una asignación con un signo de exclamación delante: a != b.
2. Fundamentos de JavaScript - Estructuras de Control
Toma de decisiones
● IF
● IF anidadas
● Switch
Bucles
● For
● While
● Do While
if (condición1)
 sentencia1
else if (condición2)
 sentencia2
else if (condición3)
 sentencia3
...
else
 sentenciaN
Con mas sentencias le ponemos {}
2. Fundamentos de JavaScript - Estructuras de Control
Toma de decisiones
● IF
● IF anidadas
● Switch
Bucles
● For
● While
● Do While
switch (expresión) {
 case valor1:
 sentencia
 [break;]
 case valor2:
 sentencia
 [break;]
 ...
 case valorN:
 sentencia
 [break;]
 default:
 sentencia
 [break;]
}
2. Fundamentos de JavaScript - Estructuras de Control
Toma de decisiones
● IF
● IF anidadas
● Switch
Bucles
● For
● While
● Do While
for (let i = 0; i < 9; i++) {
 n += i;
}
2. Fundamentos de JavaScript - Estructuras de Control
Toma de decisiones
● IF
● IF anidadas
● Switch
Bucles
● For
● While
● Do While
n = 0;
x = 0;
while (n < 3) {
 n ++;
 x += n;
}
2. Fundamentos de JavaScript - Estructuras de Control
Toma de decisiones
● IF
● IF anidadas
● Switch
Bucles
● For
● While
● Do While
let result = '';
let i = 0;
do {
 i = i + 1;
 result = result + i;
} while (i < 5);
2. Fundamentos de JavaScript - Interacciones
● Alert: Muestra un mensaje y espera a que el usuario presione “Aceptar”.
● Prompt: Muestra una ventana modal con un mensaje de texto, un campo 
de entrada para el visitante y los botones OK/CANCELAR.
● Confirm: La función confirm muestra una ventana modal con una 
pregunta y dos botones: OK y CANCELAR.
alert("Hello");
result = prompt(title, [default]);
result = prompt(title, [default]);
2. Fundamentos de JavaScript - Funciones
Para crear una función podemos usar una declaración de función.
function showMessage() {
 alert( '¡Hola a todos!' );
}
showMessage();
showMessage();
2. Fundamentos de JavaScript - Ámbito de variables en las funciones
function showMessage() {
 let message = "Hola, ¡Soy JavaScript!"; 
 // variable local
 alert( message );
}
showMessage(); // Hola, ¡Soy JavaScript!
alert( message ); 
// ¡Error! 
Variables locales
let userName = 'Juan';function showMessage() {
 let message = 'Hola, ' + userName;
 alert(message);
}
showMessage(); // Hola, Juan
Variables externas
Agenda
1. Introducción
2. Fundamentos de JavaScript
3. Ejercicios
3. Ejercicios
● Escribe un programa de una sola línea que haga que aparezca en la 
pantalla un alert que diga “Hello World”.
● Escribe un programa de una sola línea que escriba en la pantalla el 
resultado de sumar 3 + 5.
● Escribe un programa de dos líneas que pida el nombre del usuario con un 
prompt y escriba un texto que diga “Hola nombreUsuario”
● Escribe un programa que pida un número, pida otro número y escriba el 
resultado de sumar estos dos números.
● Escribe un programa que pida dos números y escriba en la pantalla cual 
es el mayor.
3. Ejercicios
● Escribe un programa que pida 3 números y muestre en mayor de los tres.
● Escribe un programa que pida un número y diga si es divisible por 2
● Escribe un programa que pida una frase y escriba cuantas veces aparece 
la letra a
● Escribe un programa que pida una frase y escriba la cantidad de vocales 
que aparecen
● Escribe un programa que pida una frase y escriba cuántas veces 
aparecen cada una de las vocales
3. Ejercicios
● Escribir un programa que escriba en pantalla los divisores de un número 
dado
● Escribir un programa que nos diga si un número dado es primo (no es 
divisible por ninguno otro número que no sea él mismo o la unidad)