Programacio Web – PAC 1

Nom i cognoms:

Rubén Mejias Alonso

Ejercicio 1
Descriu les principals característiques de les estructures iteratives for i while. Utilitza un
exemple de cadascuna on es destaquin els avantatges i diferencies entre aquestes. (1 punt)

Las dos son estructuras iterativas, las cuales nos permiten repetir tareas las veces que
consideremos necesarias en forma de bucle. La diferencia entre las diferentes estructuras
viene dada por su finalización.

Estructura for:

En esta estructura se utiliza una variable que hace la función de contador, para determinar el
número de veces que queremos repetir la iteración, este contador es generalmente un valor
conocido. A continuación mostraré un ejemplo de bucle con estructura for, el cual nos
imprime en pantalla una sucesión de números entre 1 y 10.

for (i=1; i<=10; i++){

document.write (i + "<br/>");

Los 3 contadores realizan las siguientes funciones: la primera sentencia i=1 define el valor
inicial de la variable; el segundo i<=10 definimos la condición para que el bucle se ejecute, si
retorna verdadero el bulce sigue ejecutándose hasta que retorne falso; finalmente, el contador
i++ incrementa en una unidad la variable en cada iteración del bucle (también podemos usar
incrementos negativos (i- -) .

Estructura while:

Este tipo de bucle repite un bloque o grupo de acciones mientras una condición sea verdadera.
Cabe destacar que si no incrementamos la variable inicial, el bucle se repetirá eternamente.
Siguiendo con el ejemplo anterior:

var i= 0;
while (i<=10){

document.write (i + "<br/>");

i++;

Podemos observar como primero iniciamos la variable, en el bucle indicamos la condición

necesaria para que éste se ejecute y, finalmente, incrementamos la variable. Cuando el bucle
detecte que la condición es falsa se detendrá.

Ejercicio 2
Explica l'ús de les sentències break i continue amb un exemple de codi JavaScript per
cadascuna. (1 punt)

Con la sentencia break (saltar fuera), abandonamos e interrumpimos la ejecución del bucle y
saltamos directamente al código que prosiga después. Por ejemplo, si queremos que nuestra
lista anterior de números se detenga en el número 5 en vez de dejar que llegue a 10 como
habíamos hecho, escribiremos:

for (i=1; i<=10; i++){

if (i==6){ //la condición ya no se cumple y por tanto el 6 ya no entra en la lista

break

document.write (i + "<br/>");

La sentencia continue detiene solamente una de las iteraciones de nuestro bucle, continuando
con la siguiente y obviando esa. En nuestro ejemplo. Si queremos que no imprima el valor 5 en
nuestra sucesión de números escribiríamos lo siguiente.

for (i=1; i<=10; i++){

if (i==5){ // si el número es cinco, saltar y pasar al siguiente

continue

document.write (i + "<br/>");

}
Ejercicio 3
Justifica amb 3 exemples clars la necessitat d'utilitzar una funció en un codi JavaScript (s'ha
d'observar clarament la conveniència de la funció, els exemples s’han de realizar amb codi
JavaScript). (1 punt)

Una función es un conjunto de sentencias que realizan una tarea concreta. Estas funciones se
pueden invocar o “llamar” desde cualquier parte de la aplicación, además, podemos introducir
parámetros o argumentos en función del uso que queramos darle a nuestra función. Las
ventajas de estas funciones son las de reutilizar el código que escribimos, de esta forma,
podemos usar un solo código para diferentes ocasiones y diferentes usos.

Ejemplo 1:

Crear un aviso. Este aviso lo podremos usar tantas veces como queramos en nuestro código,
simplemente invocando a la función por su nombre, así no hemos de repetir el mismo código
cada vez que queramos que salga el cartel de aviso.

function alerta(){

// alert es una función predefinida de JavaScript, ésta hace aparecer un cuadro de aviso.

alert ("Función de alerta")

// llamada a la función

alerta ();

Ejemplo 2:

Parámetros en la función. Gracias a los parámetros podemos combinar nuestra función con
texto por ejemplo. En este ejemplo, la función crea un saludo personalizado en función del
argumento que queramos, previamente definido en la función.

function saludo (nombre) {

// Editamos entre comillas el mensaje y añadimos (+) el parámetro definido.

alert ("Buenos dias, " + nombre);

// llamada a la función utilizando el parámetro "nombre"

saludo ("Rubén");

saludo ("Oscar");

Ejemplo 3:

Utilizar varios parámetros. Para usar varios parámetros, debemos separarlos con comas. Por
ejemplo, podemos crear una función simple que nos diga si un número es mayor o menos que
otro. Cada vez que queramos saber qué número es mayor, tan solo hemos de llamar a la
función pasándole los dos argumentos que definamos.

function mayorMenor(x,y){

if (x > y){

alert ("El número " + x + " es mayor que " +y)

} else {

alert ("El número " + x + " es menor que " +y)

// llamada a la función utilizando los dos parámetro que queremos comprobar

mayorMenor (80,30);

mayorMenor (0.5,30);

Ejercicio 4
Explica la diferencia de comportament del codi JavaScript depenent de si aquest s’inclou a la
capçalera o al cos de la pàgina HTML. (1 punt)

Podemos incluir código JavaScript en la cabecera o en el cuerpo del documento HTML. Cada
uno tiene sus propias ventajas y dependerá del contexto de uso y finalidad de nuestro código.

En la cabecera:

En la cabecera es donde se cargan las instrucciones antes que el cuerpo del documento, por
tanto, cualquier código JavaScript que ubiquemos aquí se cargarán antes que el cuerpo del
documento, este hecho puede ralentizar la carga de la página antes de que ésta se visualice.
Por otro lado, si escribimos aquí una función, ésta no será cargada hasta que no la llamemos y
por tanto, la cabecera sería un buen lugar. Además, cabe señalar que si utilizamos un código
que modifique la estructura HTML como por ejemplo “document.write”, es mejor colocarlo en
la cabecera.

En el cuerpo

Una de las ventajas de escribir el script en el cuerpo del documento HTML, es la reducción de
tiempo de carga de la página, la cual no ha de cargar los scripts hasta que finalice la carga, así
el usuario tendrá una mejor experiencia en los tiempos de carga.

Según el código de buenas prácticas de Yahoo:

“ El problema de los scripts es que mientras se descargan, bloquean la descarga de otros

contenidos importantes de la página, como por ejemplo las imágenes ”

Ejercicio 5
Fer un programa en JavaScript que donat un número, escrigui en pantalla una sèrie de
números creada de la següent manera:

• Els dos primers números que s'han d'escriure són 1 i 1

• El tercer número és el resultat de sumar els dos primers (2)

• El quart número és el resultat de sumar el segon i el tercer (3)

• El cinquè número és el resultat de sumar el tercer i el quart (5)

I així fins escriure tants números com el que s'indiqui al número inicial. Per exemple:

• Si el número inicial és un 5 haurà d'escriure 5 números: 1 1 2 3 5

• Si el número inicial és un 7 haurà d'escriure 7 números: 1 1 2 3 5 8 13. (3 punts)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Función secuencia</title>

<script type="text/javascript">

function secuencia (numero) {

// Iniciamos las variables necesarias para el cálculo. Como el enunciado nos pide que los dos
primeros números han de ser 1, iniciamos las dos primeras variables en 1 y las escribimos.

var var1 = 1;

var var2 = 1;

document.write (var1 + " ");

document.write (var2 + " ");

// Iniciamos el búcle. Empezamos el cálculo con el tercer número de la serie.

For (var i=3; i <= numero; i++) {

var3 = var1 + var2; // El tercer digito se calcula con la suma de los dos primeros.

var1 = var2; // Avanzamos un lugar en la secuencia, ahora el primer 1 ya no

existe.

var2 = var3; // El segundo número de la secuencia adquiere el valor del

tercero

document.write (var3 + " ");

//Llamamos a la función introduciendo el valor deseado para el cálculo

secuencia (5);

</script>

</head>

<body>

</body>

</html>

Ejercicio 6
Desenvolupeu una funció que demani un número a l'usuari i a partir d'aquí:

– Comprovi que aquest es un valor entre 0 i 10, en cas afirmatiu seguirà i en cas contrari
tornarà a demanar un valor avisant a l'usuari.

– Amb el valor entre 0 i 10, la funció retornarà la nota de l'estudiant traduïda a valor
descriptiu: 0-4 una D, de 4-5 un C-, de 5-6 un C+, de 6-9 una B i de 9-10 una A. (s'ha de tenir en
compte que els extrems superiors dels intervals formen part de la nota superior). (3 punts)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Notas</title>

<script type="text/javascript">

function notas () {

//Inicio de las variables

var valor = prompt("Introduzca un número entre 0 y 10: ");

//Nos aseguramos de trabajar con valores numéricos

 valor = parseInt(valor);

//Inicio del bucle y sus condiciones, cuando se cumpla la condición se creará la alerta
correspondiente.

if (valor >= 0 && valor <4){

alert ("Su nota final es : D ");

}else

if (valor >= 4 && valor <5) {

alert ("Su nota final es : C - ");

} else

if (valor >= 5 && valor <6) {

alert ("Su nota final es : C + ");}

else

if (valor >= 6 && valor <9) {

alert ("Su nota final es : B ");}

else

if (valor >= 9 && valor <=10) {

alert ("Su nota final es : A ");}

// Si la comprobación de todas las condiciones es falsa, ejecutamos la siguiente

sentencia.

else if ( valor <0 || valor > 10) {

alert ("ERROR. El número introducido NO ES VÁLIDO. Por favor,

introduzca un número entre 0 y 10 ");

notas () ; //reiniciamos la función en el caso que se introduzcan mal los

datos

// Llamada a la función

notas ();
</script>

</head>

<body>

</body>

</html>