Scribd
Cargar
173 vistas

S07.s1 - JavaScript

Este documento presenta información sobre JavaScript, incluyendo su implementación, variables, operadores, conversiones de tipo, funciones y estructuras de control. También explica conceptos como comentarios y eventos.

Cargado por

diego
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
173 vistas

S07.s1 - JavaScript

Este documento presenta información sobre JavaScript, incluyendo su implementación, variables, operadores, conversiones de tipo, funciones y estructuras de control. También explica conceptos como comentarios y eventos.

Cargado por

diego
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 61

Taller de Programación

Web
MSc. Yuliana Jáuregui Rosas
Dudas sobre la clase anterior

• Tema:
• CSS – Hojas de estilo en cascada
Saberes previo

• ¿Como incluye un código CSS en una pagina web?


• ¿Qué estructuras de control manejan los lenguajes de
programación?
JavaScript
Utilidad

• ¿Es importante que el usuario interactúe con la pagina web?


Logro

Al finalizar esta sesión el alumno


desarrolla aplicaciones sobre
navegadores utilizando el lenguaje
JavaScript
Temario
➢ JavaScript
➢ Implementación de JavaScript
➢ Constantes
➢ Variables
➢ Operadores
➢ Conversiones de tipo
➢ Funciones
➢ Estructuras condicionales
➢ Estructuras repetitivas
JavaScript

• JavaScript es un lenguaje de programación con soporte para


programación orientada a objetos, que permite añadir
características interactivas a un sitio web, por ejemplo:
juegos, eventos que ocurren al presionar los botones de un
formulario, efectos de estilo dinámicos, animaciones y más.
• Fue creado en 1995 por Brendan Eich, co-fundador del proyecto
Mozilla, Mozilla Foundation y la Corporación Mozilla, bajo el
nombre de LiveScript, siendo luego nombrado como JavaScript.
JavaScript

• Se dice que JavaScript es un lenguaje del lado del cliente,


pues los scripts son ejecutados en el navegador del usuario.
• El punto y coma es un carácter clave en muchos lenguajes de
programación pero en JavaScript su uso no es obligatorio, sin
embargo se recomienda usarlo ya que indica el momento en que
termina de ejecutarse una sentencia.
• JavaScript distingue entre mayúsculas y minúsculas.
Implementación de JavaScript

• JavaScript se puede incorporar al documento mediante tres


técnicas diferentes:
• JavaScript embebido: usando atributos de las etiquetas de
apertura.
• JavaScript interno: dentro del lenguaje HTML usando la
etiqueta <script> .
• JavaScript externo: para este caso se crea un archivo *.js y
luego se enlaza con la pagina web.
JavaScript embebido

• El código se puede insertar en un elemento por medio de


atributos. Este caso no es una buena practica.

<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
</head>
<body>
<button onclick="alert('Bienvenidos')">Aceptar</button>
</body>
</html>
JavaScript interno

• Se utiliza para trabajar <html>


<head>
con códigos extensos
<title>TODO supply a title</title>
y personalizar las <script>
funciones alert('Bienvenidos');
</script>
</head>
<body>
<div>TODO write content</div>
</body>
</html>
JavaScript Externo
• Se crea un archivo con • Por otro lado, mediante el atributo src
extensión .js que tendrá el de la etiqueta <script> se asigna la
código JavaScript, el cual ruta del archivo que contiene el código
podrá ser usado por varios JavaScript.
documentos.
<html>
micodigo.js
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
alert("Bienvenidos"); <script src="micodigo.js"></script>
</head>
<body>
<div>TODO write content</div>
</body>
</html>
Comentarios
• A la hora de programar Comentario de una sola línea
es conveniente añadir
comentarios para poder //Esto es un comentario de una línea
saber que es lo que hace
cada parte del código.
Comentario de varias líneas

/* Esto es un comentario que tiene mas de


una línea es decir, varias líneas */
Variables
• Las variables en JavaScript se declaran con la palabra clave var o let seguida del
nombre que queremos asignarle. Asimismo, se puede asignar un valor inicial a
través del signo igual (=).
• La diferencia principalmente entre var y let, radica en que let previene la
sobreescritura de variables.
• Ejemplos:
var miVariable;
let miDato = 7;
let edad;
• En JavaScript, las variables son tipadas dinámicamente, esto significa que puedes
asignarle primero un texto y luego un número cualquiera y sin restricciones.
Tipos de datos

• Representa cualquier número entero, real, positivo o negativo.


Numéricas
var miNumero = 2;

• Representa un texto, se puede asignar un valor usando


comillas dobles o comillas simples (apóstrofes).
Cadenas
var miTexto1 = “Bienvenidos";
var miTexto2 = ‘Aprendiendo JavaScript’;

• Permite dos estados, verdadero o falso


Booleanos var valor1 = true;
var valor2 = false;
Operadores aritméticos
Resultado
Símbolo Definición Expresión
a=5yb=2
+ Adición r = a + b; 7
- Sustracción r = a - b; 3
* Multiplicación r = a * b; 10
/ División r = a / b; 2
% Resto r = a % b; 1
++ Incremento a++ 6
-- Decremento b-- 1
Operadores relacionales
Resultado
Símbolo Definición Expresión
a = 10 y b = 7
> Mayor que a>b Verdadero
>= Mayor o igual que a >= b Verdadero
< Menor que a<b Falso
<= Menor o igual que a <= b Falso
== Igual a a ==b Falso
=== Valor y tipo igual a===b Falso
!= Diferente a a != b Verdadero
!== Valor o tipo no igual a!===b Verdadero
Operadores lógicos
Símbolo Definición
&& and
|| or
! not

x y x && y x || y !x
Verdadero Verdadero Verdadero Verdadero Falso
Verdadero Falso Falso Verdadero Falso
Falso Verdadero Falso Verdadero Verdadero
Falso Falso Falso Falso Verdadero
Operadores de asignación

Resultado
Símbolo Definición Expresión
x = 12
= Asigna a una variable, el A=x+5 A = 17
resultado de una expresión o un
valor que se encuentra al lado
derecho del signo =
Operadores de asignación
• Se puede usar el operador de asignación compuesto cuando la operación
contiene como primer operando la misma variable en la que se almacena
el resultado.
Expresión Resultado
Símbolo Expresión
abreviada a = 10
+= a=a+6 a+=6 16
-= a=a-5 a-=5 5
*= a=a*4 a*=4 40
/= a=a/2 a/=2 5
%= a=a%3 a%=3 1
Conversiones de tipo

De texto a número entero:


nroEntero = parseInt(texto)

De texto a número real:


nroReal = parseFloat(texto)
Eventos

• Los eventos son acciones u ocurrencias que suceden en el


entorno programado que hace que el sistema responda de
alguna manera.
• Por ejemplo, si el usuario hace clic en un botón en una página
web, es posible que desee responder a esa acción mostrando un
cuadro de información.
Eventos
Evento Descripción Elementos para los que está definido
onblur Deseleccionar el elemento <button>, <input>, <label>, <select>, <textarea>, <body>
Deseleccionar un elemento
onchange <input>, <select>, <textarea>
que se ha modificado
onclick Pinchar y soltar el ratón Todos los elementos
Pinchar dos veces seguidas
ondblclick Todos los elementos
con el ratón
onfocus Seleccionar un elemento <button>, <input>, <label>, <select>, <textarea>, <body>
onkeydown Pulsar una tecla (sin soltar) Elementos de formulario y <body>
onkeypress Pulsar una tecla Elementos de formulario y <body>
onkeyup Soltar una tecla pulsada Elementos de formulario y <body>
Eventos

Evento Descripción Elementos para los que está definido


onload La página se ha cargado completamente <body>
onmousedown Pulsar (sin soltar) un botón del ratón Todos los elementos
onmousemove Mover el ratón Todos los elementos
El ratón "sale" del elemento (pasa por
onmouseout Todos los elementos
encima de otro elemento)
El ratón "entra" en el elemento (pasa por
onmouseover Todos los elementos
encima del elemento)
Soltar el botón que estaba pulsado en el
onmouseup Todos los elementos
ratón
Eventos

Evento Descripción Elementos para los que está definido


onreset Inicializar el formulario (borrar todos sus datos) <form>
Se ha modificado el tamaño de la ventana del
onresize <body>
navegador
onselect Seleccionar un texto <input>, <textarea>
onsubmit Enviar el formulario <form>
Se abandona la página (por ejemplo al cerrar
onunload <body>
el navegador)
Funciones
• Una función es un pedazo de
código que permanece inactivo
hasta que es llamada a través
de su nombre.
• Las funciones se definen
usando la palabra clave
function, un nombre seguido
de paréntesis, y el código entre
llaves.
• Ejemplo:
Funciones
• Cuando las funciones también se llaman mediante un enlace, se debe
incluir la palabra javascript seguido del nombre de la función en la
propiedad href.
Ámbito de las variables
• Las variables declaradas
fuera de una función se
consideran en un ámbito
global, pudiendo ser
usadas desde cualquier
parte del código.
• Las variables declaradas
dentro de las funciones
tienen un ámbito local, es
decir, solo pueden ser
usadas dentro de la función
en la que fueron
declaradas.
Funciones propias de
JavaScript
• alert()
• prompt()
• document.write()
• confirm()
• document.getElementById()
• document.getElementsByName()
Función alert()
• Muestra el valor del parámetro a través de una ventana emergente con un
botón.
• Su sintaxis es:

Donde:
• Texto a mostrar: Es el mensaje que se mostrará en la ventana emergente.
Ejemplo 1
• Mostrar un mensaje de bienvenida.
Función prompt()
• Esta función muestra una ventana emergente con un campo de entrada que
permite al usuario introducir un valor. Retorna el valor ingresado. Su sintaxis es:

Donde:
• Texto descriptivo: Es el mensaje que se mostrará por pantalla pidiendo la
inserción o rellanado de información.
• Texto por defecto (Opcional): Podemos dejar un valor por defecto para que el
usuario no tenga que escribirlo o rellenarlo.
Ejemplo 2
• Ingresar el nombre de una persona y mostrar un saludo con el nombre
ingresado
Función document.write()
• La función document.write() escribe el contenido solo al cargar la página, si
se llama posteriormente, será necesario volverla a cargar.
• Su sintaxis es:

Donde:
• Texto: es el mensaje que se muestra.
• Variable: muestra el valor que contiene una variables
Ejemplo 3

• Calcular la suma de 2 números enteros.


Ejemplo 4

• Mostrar una imagen a través de un botón


Función confirm()
• Muestra una ventana de diálogo con un mensaje opcional y dos botones,
Aceptar y Cancelar.
• Su sintaxis es:

Donde:
• Mensaje: es la cadena que se muestra en el diálogo.
• Resultado: es un valor booleano indicando si se ha pulsado Aceptar (true)
o Cancelar (false).
Ejemplo 5
• Confirmar si desea visitar la pagina de la UTP.
Función
document.getElementById()
• Esta función pertenece al objeto document. Permite obtener el
objeto que hace referencia al elemento con un id concreto.
• Permite obtener un valor numérico si se considera el siguiente
formato.
Ejemplo 6

• Ingresar un nombre por medio de una caja de texto y darle la


bienvenida.
Función
document.getElementsByName()
• Permite obtener un conjunto de valores (array).
Ejemplo 7
• Mostrar la respuesta de una pregunta que utiliza alternativa múltiple

Usted se desplaza Caminando


Ingreso y salida de datos
desde formularios
• Para leer y escribir datos a través de los formularios es necesario trabajar
con el atributo name tanto del formulario como del elemento.
• De esta manera para leer un dato se usa la siguiente sintaxis:

• Y para escribir un dato se usa la siguiente sintaxis:


Ejemplo 8
• Calcular el producto de 2 números
Estructuras condicionales
• Una estructura condicional permite elegir entre una, dos o más alternativas diferentes, el
cual dependerá de evaluar una condición cuya respuesta puede ser Verdadera o Falsa.

if (condición) { if (condición1) {
instrucción; instruccion1; switch (variable) {
} } case c1: instruccion1;
else if (condición2) { break;
instruccion2; case c2: instruccion2;
} break;
if (condición) { else if (condición3) { ...
instrucción1; instruccion3; case cn: instruccionN;
} } break;
else { else { default: instruccionX;
instrucción2; instruccion4; }
} }
Estructuras repetitivas
• Las estructuras que repiten una secuencia de instrucciones un número
determinado de veces se denominan Bucles. Entre las estructuras
repetitivas se encuentran:

while (condición){ do {
instrucciones; instrucciones;
}
} while (condición);

for (inicialización; condición; incremento){


instrucciones;
}
Ejemplo 9

• Ingresar el nombre, edad,


genero, estado civil, hobbies de
una persona y mostrar estos
datos ingresados en una área
de texto.
Ejemplo
Ejemplo
Aplicaciones

Implementar lo explicado en clase


Ejercicio 1

• Un parque de diversiones ofrece descuentos del 15% a sus


clientes cuya edad sea menor a 12 años, caso contrario el
descuento es 10%. Mostrar el pago final de un cliente
ingresando su edad.
Ejercicio 2

• Elaborar un programa que calcule el promedio final de un


alumnos en base a 3 notas y diga si el alumnos aprobó o
desaprobó, considere que el alumno se encuentra aprobado si
obtiene un promedio superior o igual a 12.

53
Ejercicio 3
• Elabore un programa que determine la calificación de un
estudiante en base a su promedio, de acuerdo a la siguiente
tabla:
Promedio Calificación
20 – 18 A
17 – 14 B
13 – 11 C
10 – 6 D
5–0 E
Ejercicio 4

• Escriba un programa que permita ingresar un número entero


entre 1 y 7 y muestre el día correspondiente, considerando que
1 representa al Lunes y 7 a Domingo.
Ejercicio 5

• Escriba un programa que al ingresar un mes devuelva la


cantidad de días que trae el mes.
Ejercicio 6

• Una persona tomó el tiempo en minutos que demoró en llegar de


su casa a su trabajo durante 6 días. Escriba un programa que
permita ingresar cada uno de los tiempos y muestre el promedio
de tiempos y el número de veces que se demoró menos de 35
minutos.
Ejercicio 7

• Elaborar un programa que permita ingresar una secuencia de


números enteros y cuente la cantidad de números positivos y
negativos que se ingresaron. El programa termina cuando se
ingresa el numero cero.
Ejercicio 8

• Elaborar un programa que calcule el promedio de los n primeros


números enteros positivos.
Ejercicio 9
• En un centro de salud pediátrica se registra el peso, la talla y el
genero de cada uno de los N pacientes, se desea saber:
• La cantidad de niños que pesan más de 17 kilos.
• La Cantidad de niñas miden menos de 0.50 centímetros.
• El peso promedio de las niñas.
• La talla promedio de los niños.

También podría gustarte