Iniciacion-a-Javascript-para-Android.pdf

Program acin web : www.ibserveis.com Leccin 1 : Iniciacin y variables

1

Programacin web con ejercicios en Javascript. Leccin 1: INICIACIN A LA PROGRAMACIN


2

Iniciacin y variables

En esta leccin se aprende a escribir un primer programa Hola mundo . Esto significa que se maneja correctamente un editor de texto, en este caso Notepad++, para sacar por pantalla, en el navegador web, una pequea frase. El concepto de Variable tambin se asimila fcilmente a partir de ejemplos muy reveladores. Al ser una iniciacin total de la programacin, se incluyen enlaces a varios videos para las personas que necesiten ms explicacin de cmo realizar los primeros ejercicios. Para ms informacin de los conceptos de esta leccin, puede visitarse w3scholls (esta en ingls) Para cualquier aclaracin, pueden ponerse en contacto con el autor, a travs de www.ibserveis.com Est prohibido cualquier tipo de distribucin sin permiso del autor. Est prohibida la reproduccin de este curso para su utilizacin comercial. Est permitido el uso en comn en aulas fsicas donde se enseen asignaturas de programacin.


3

Video 1 Ejercicio 1: inicio con Notepad ++

Ejercicio 1) a) Abrir Notepad ++ ( o cualquier otro editor de HTML)

b) Archivo Nuevo

c) LenguajeH..HTML

d) Copiar el cdigo que empieza por siguiente.

e) Archivo..Guardar como. Ej1.html

f) Ejecutar. Launch in X (ver en el explorador, Firefox u otro)

Ejercicio 1 document.writeln("Hola Mundo!");

Si no aparece nada en el explorador puede haber un fallo copiando el texto.

Solucin:

En Firefox , pulsar CTRL + Maysculas + J , para abrir consola de errores.

Fijarse en el ltimo error que seala. Corregirlo y GUARDAR de nuevo el archivo Ej1


4

Video 2 : Depuracin de errores (consola de errores) Video 2.1 : Depuracin con Firebug

Ejercicio 2) Crear archivo nuevo Ej2.htm y copiar el siguiente cdigo. Una vez guardado, ejecutar el programa: Launch in

var a, b; a = 10; b = 5; resultado = a + b;

document.write("Variable a contiene " + a ); document.write(""); document.write("Variable b contiene " + b ); document.write(""); document.write("La suma de a+b es " + resultado ); Las variables contienen datos que pueden sumarse

Ejercicio 3) Atencin: Ejercicio con error para aprender a corregir errores. Crear archivo nuevo Ej3.htm y copiar el siguiente cdigo.

Una vez guardado, ejecutar el programa: ver en el explorador.

var a, b; a = 2; b = 8; resultado = a * b;

document.write("Variable a contiene " + a ); document.write(""); document.write("Variable b contiene " + b ); document.write(""); document.write("El producto de a por b es " + result ); Los puntos de interrupcin son fundamentales para programar


5

Video 3: Depuracin con puntos de interrupcin, el programa se ejecuta, pero incorrectamente. Video 3.1 : Puntos interrupcin con Internet Explorer

Ejercicio 4) Crear archivo nuevo Ej4.htm y copiar el siguiente cdigo. Una vez guardado, ejecutar el programa: ver en el explorador.

var a, b; a = "Hola"; b = " mundo!";

document.write("Variable a contiene " + a ); document.write(""); document.write("Variable b contiene " + b ); document.write(""); document.write(a + b );

El signo '+' sirve para concatenar cadenas de texto

Ms info en : http://www.w3schools.com/js/js_operators.asp

Ejercicio 5) Ejecutar el siguiente programa (Ej5). Introduccin de valores por teclado. Qu accin realiza la instruccin num = parseInt(dato); ?

var dato, num;

dato = window.prompt("Introduce nmero ?", "0"); num = parseInt(dato);

document.write("Entero introducido " + num );

Prueba con una letra. Resultado NaN (not a number).


6

Ejercicio 6) Ejecutar el siguiente programa (Ej6). Introducimos dos nmeros y se suman

var dato1, dato2, num1, num2;

dato1 = window.prompt("Introduce primer nmero ?", "0"); num1 = parseInt(dato1); dato2 = window.prompt("Introduce segundo nmero ?", "0"); num2 = parseInt(dato2);

resultado = num1 + num2;

document.write(" La suma es " + resultado );

Para sumar, las variable deben ser numricas.

Ms informacin sobre variables (en ingls): http://www.w3schools.com/js/js_variables.asp


7

Ejercicio 7) ALGORITMO (NO programa) con introduccin de 2 nmeros. El resultado es indicar cual es el mayor. Completar, con lpiz, el pseudocdigo donde aparece XXX

inicio num1 0: num2 0 Introducir "Introduce primer nmero";num1 Introducir "Introduce segundo nmero";num2 Si (num1>num2) Escribir "El mayor es el nmero ", XXX

sino Escriure "El mayor es el nmero ", XXX Fin si Fin

Ms informacin sobre condicionales: http://www.w3schools.com/js/js_if_else.asp

Ejercicio 8) Ejecutar el siguiente programa (Ej8.htm). Introduccin de 2 nmeros y el programa indica cul es el mayor.


8

Ejercicio 9) Programacin de objetos (elementos) de la pgina web.

Ejercicio elemento Web

El primer parrafo es un elemento

document.getElementById("demo").innerHTML="Programacion sobre elementos";

Ejercicio 10) Objeto Math utilizado para crear nmero aleatorio.

var suerte = (Math.random() * 6); var dado = parseInt(suerte) + 1;

var obj1=document.getElementById("demo")

if (dado>3) { obj1.innerHTML="Has ganado, ha salido el numero " + dado; } else { obj1.innerHTML="Lo siento, ha salido el nuemero "+ dado; }


9

Ejercicio 11) Programa que lee tres notas de un alumno, calcula la media e indicar el valor de la nota y la palabra Excelente si tiene un valor mayor que 8 , Aprobado entre 5 y 8 , Suspendido < 5

var nota1, nota2, nota3; var media; dato1 = window.prompt("Primer nmero?", "0"); dato2 = window.prompt("Segundo nmero?", "0"); dato3 = window.prompt("Tercer nmero?", "0"); nota1 = parseInt(dato1); nota2 = parseInt(dato2); nota3 = parseInt(dato3);

media = (nota1 + nota2 + nota3)/3;

if (media >8) { resultat = " Excelente"; } else { if (media >=7) resultat = " Notable"; else resultat = " Aprobado"; } document.write("La nota final es " + media + " y esta usted" + resultat );

Ejercicio 12) Aadir al programa anterior, el resultado de Bien si la nota est entre 5 y 6

Ejercicio 13) Realizar programa que indica la nota final: suspendido, aprobado, bien, notable, excelente a partir de la introduccin de la nota numrica.


10

14) Algoritmo simplificado de un Cajero automtico

inicio Escribir Qu operacin quiere realizar? Ingresar/Retirar Leer respuesta

Escribir Qu cantidad? Leer cantidad

si respuesta = ingresar Hacer ingreso de cantidad Escribir Ingreso hecho en su cuenta

si no si cantidad divisible por 5 (billetes disponibles de 5 ,10 i 20)

Escribir A dbito o crdito? Leer forma

si forma = debito extraer de su cuenta si no extraer a crdito fin si

si no Escribir Solo billetes de 5, 10 y 20 fin si

fin si Escribir Gracias por utilizar este servicio fin


11

FIN EJERCICIOS 1

Prxima leccin: Leccin2 - Depuracin de programas

Para entender la importancia de la depuracin de errores es importante realizar muchos ejercicios y adquirir prctica. La segunda leccin es una seleccin de ejercicios muy pensada y progresiva en su dificultad .

Program acin web : www.ibserveis.com Leccin 2 : Depuracin de errores.

12

Programacin web con ejercicios en Javascript. Leccin 2: DEPURACIN DE ERRORES EN LOS PROGRAMAS


13

Depuracin de errores

Ahora que ya funcionan los programas, hay que conseguir disearlos y fabricarlos correctamente. Hay que conseguir depurar todos los errores para llegar a tener un producto robusto. Para ms informacin de los conceptos de esta leccin, puede visitarse http://www.drpaulcarter.com/cs/debug.php (en ingls) Para cualquier aclaracin, pueden ponerse en contacto con el autor, a travs de www.ibserveis.com Est prohibido cualquier tipo de distribucin sin permiso del autor. Est prohibida la reproduccin de este curso para su utilizacin comercial. Est permitido el uso en comn en aulas fsicas donde se enseen asignaturas de programacin.


14

Acciones a realizar en el diseo de programas:

Antes de iniciar el cdigo hay que PENSAR como realizarlo modularmente. Empezando por el ncleo principal y comprobando su funcionamiento antes de aadir ms cdigo. Despus vamos aadiendo ms funcionalidades al cdigo. Por ejemplo: Si estamos realizando un programa de una tienda en internet: empezaramos el programa con la suma de precios de los artculos escogidos y comprobar su buen funcionamiento bajo cualquier circunstancia (pruebas de carga)

Como depurar programas. (traduccin) http://www.drpaulcarter.com/cs/debug.php

Los errores ms comunes al programar son:

1. Programar sin pensar antes que se va a hacer. 2. Escribir cdigo sin estructurar.

1. Pensando en la programacin.

Cuando un programador profesional debe resolver un problema, nunca empieza tecleando cdigo en el ordenador. Antes de nada se disea, se piensa sobre las diferentes formas de atacar el problema.

Nunca hay que pensar que por empezar antes a escribir cdigo, antes se acaba el programa. Un programa que se planifica antes de escribir cdigo, funciona correctamente antes que otro sin planificar. Puede ser que sin planificar tengamos resultados antes, pero seguro que no son los ms eficientes y adems pueden dar mucho ms trabajo de depuracin. Un programa que se ha pensado y planificado antes, tiene menos fallos de depuracin y menos fallos lgicos en su desarrollo.

Hay varias tcnicas para disear y planificar programas. La ms comn es conocida como top-down design y se trata de esbozar y comprobar la parte principal del programa para luego ir haciendo las otras funciones. Los programas deben iniciarse con el nucleo de la aplicacin, comprobar que funciona correctamente e ir creciendo modularmente.

Top-down design divide el programa es subtareas. Cada tarea es un programa pequeo que debe ser resuelto. Ese programa deber ser resuelto de forma totalmente comprensible y comprobar al100% su funcionamiento, independientemente de otros subprogramas.

Una vez tengas esbozado y re-pensada la mejor solucin para cada tarea, cada subprograma, es cuando se empieza a escribir cdigo.


15

2. Programacin estructurada.

Un programa se dice que es estructurado cuando se divide en sub-unidades que pueden ser probadas separadamente. Es una gran ventaja para la depuracin y para el mantenimiento del programa. La depuracin de un programa debe realizarse mientras se construyen cada una de las sub-unidades y no esperar a finalizar el cdigo para probar si tiene errores. Evidentemente, acotar, encontrar y resolver errores en pequeas porciones de cdigo es una forma muy eficiente de trabajar.

No hace falta que el programa sea Orientado a objetos para que sea estructurado, pero la POO (programacin orientada a objetos) implica la estructuracin obligatoria del programa. La POO tambin facilita la reutilizacin de cdigo y su distribucin para ser utilizada en otros programas.

Cada sub-unidad puede y debe depurarse separadamente, iccluso a traves de pequeos programas de carga. Programas que simulan la utilizacin bajo fuerte demanda del programa puesto a prueba.

Por supuesto, el depurar pequeas unidades ofrece muchas ms facilidades que intentar arreglar todo un extenso cdigo.


16

How to Debug a Program

When you have eliminated the impossible, whatever remains, however improbable, must be the truth.

Sherlock Holmes in "The Sign of the Four"

Cuando hayas eliminado lo imposible, aquello que permanece, aunque improbable, debe ser la verdad.

The primary difference between a programmer right out of college and one with five years' experience is the ability to debug programs. Debugging is still an art, not a science; but there are some techniques that can help. For more ideas on debugging, see The Elements of Programming Style by Kernighan and Plauger

ACOTAR PROBLEMA, aislar parte del cdigo que produce el problema, simplificar al mximo la parte de cdigo que no funciona.

Begin finding bugs by reproducing the problem. Start by getting exact input if you can. Try reproducing the problem in your test environment with as little data as possible. Ask about all the conditions present when the problem occurred (for example, other users, batch jobs, etc.)

Puede volver a recordar los Video 3 y Video 3.1 sobre puntos de interrupcin.

Ejercicio 2.1) Hacer seguimiento de la variable num mediante punto de interrupcin y DEBUG var num; num=1;

while (num!=5) { dato=prompt('Introduce nmero del 1 al 10:',''); num=parseInt(dato);

document.write(num + ''); } document.write("Fin del programa");


17

Ejercicio 2.2) Programa que lee tres notas de un alumno, calcula la media e indica si est suspendido o aprobado (nota media mayor o igual a 5)

var nota1, nota2, nota3; var media;

dato1 = window.prompt("Primer nmero?", "0"); nota1 = parseInt(dato1); dato2 = window.prompt("Segundo nmero?", "0"); nota2 = parseInt(dato2); dato3 = window.prompt("Tercer nmero?", "0"); nota3 = parseInt(dato3);

media = (nota1 + nota2 + nota3)/3;

if (media


18

Ejercicio 2.3) Realizar programa en Javascript perteneciente al siguiente Algoritmo : Introduccin de 2 nmeros y el ordenador indica cual es el mayor o si son iguales

inicio num1 0: num2 0 Introducir "Introduce primer nmero";num1 Introducir "Introduce segundo nmero";num2 Si (num1>num2) Escribir "El mayor es el primero ", num1

sino SI (num2>num1)

Escribir "El mayor es el segundo ", num2 sino

Escribir "Los nmeros son iguales" fin si fin si Fin Ejercicio 2.4) Realizar programa en Javascript a partir de este PSEUDOCODIGO: Calcula la suma de los nmeros enteros entre 1 y 10 (1+2+3+4....) inicio suma 0: conta 0 Mientras conta menor que 10 conta conta + 1 suma suma + conta Fin Mientras Escribir La suma es; suma Fin

Ejercicio 2.5) Realizar programa que da el resultado de multiplicar los nmeros enteros pares del 10 al 20 ( 10*12*14... )


19

Teora y sintaxis condicionales: http://www.codexexempla.org/curso/curso_4_2_c.php

Ejercicio 2.6) Ejemplo aplicacin condicionales compuestos.


20

Ejercicio 2.7) Ejercicio 2.6 optimizado.

Ahora como mximo se ejecutan dos instrucciones de comparacin, no 2 dobles como el cdigo anterior

y como mnimo tan solo 1 (no dos como el anterior).

En caso de haber ms condicionales, estructurarlas anidadamente ahorra muchas comparaciones que

no es obligatorio hacer.


21

Informacin sobre funciones: http://www.w3schools.com/js/js_functions.asp

Ejercicio 2.8) Ejecutar el siguiente cdigo. En qu momento se dispara la funcin? function ejemplo() { window.alert("Hola Mundo!"); }

Ejercicio 2.9) Colocar un punto de interrupcin en la primera lnea 8 de cdigo del ejercicio anterior (Windows.alert (Hola Mundo) y otro punto de interrupcin en la lnea 16 (


22

Ejercicio 2.10) Ejecutar el siguiente programa: Funciones de calculo Exercici Funcions


23

Ejercicio 2.12) Ejecutar el siguiente cdigo. Qu est haciendo la instruccin RETURN? Cul es su traduccin del ingls?

La funcin utiliza la sentencia return para devolver un valor.

Ejercicio 2.13) Ejecutar el siguiente cdigo.

Funciones con varios parmetros function Saludo(persona1,persona2) { alert("Hola ," + persona1 + " y " + persona2); }

Funcin con dos parmetros Saluda a dos personas.

Saludo("Ana","Pedro");


24

Ejercicio 2.13) Realizar un programa con una funcin: Esta funcin muestra en pantalla la suma de dos nmeros introducidos por el usuario en otra parte del cdigo.

Ejercicio 2.14) Realizar programa donde el usuario introduce 3 nmeros y en ordenador indica cual es el central (ni el mayor, ni el menor de los 3)


25

FIN EJERCICIOS 2

Prxima leccin: Leccin3 ms Funciones

Cuando se trabaja en un programa, no se realiza todo en un mismo bloque, sino que el cdigo se reparte en funciones, cada una con un objetivo bien determinado.

Program acin web : www.ibserveis.com Leccin 3 : Funciones y lgica.

26

Programacin web con ejercicios en Javascript. Leccin 3: Funciones y lgica.


27

Funciones y lgica

Qu fcil es programar.. mal.

En poco tiempo cualquier persona est capacitada para programar, pero se necesita experiencia, dedicar tiempo y trabajo para realizar un cdigo estructurado preparado para su mantenimiento y posible crecimiento.

La forma de aprender a programar elegantemente (implica profesionalidad) es ver y asimilar programas realizados con un cdigo limpio y bien elaborado. Para cualquier aclaracin, pueden ponerse en contacto con el autor, a travs de www.ibserveis.com Est permitido el uso en comn en aulas fsicas donde se enseen asignaturas de programacin. Est prohibido cualquier tipo de distribucin sin permiso del autor. Est prohibida la reproduccin de este curso para su utilizacin comercial.


28

Ejercicio 3.1) Programa donde se introducen 3 nmeros y el programa seala el mayor de los tres. Ejercicio 3.2) Cuntas instrucciones, como mnimo, realiza el programa anterior?


29

Ejercicio 3.3) Programacin estructurada; el programa seala el mayor de tres nmeros. Ejercicio 3.4) Cuntas instrucciones, como mnimo, realiza el programa anterior? y como mximo?


30

Ejercicio 3.5) Crear programa, en una pgina web, donde el usuario intruduce su altura (cm), edad, sexo y peso actual. El programa responde con el peso ideal.

Por ejemplo : usuario introduce 176, 22, H, 79. El programa ejecuta la frmula: 50 + ((Altura-150) / 4) *3 + (Edad 20) /4 * (0.9 si es mujer)

El resultado es: peso ideal = 70,5.

Peso ideal function pesoideal() {

var dato, peso, altura, sexo, edad; dato = window.prompt("Dgame su altura en cm"); altura = parseInt(dato);

dato = window.prompt("Digame su edad en aos") edad = parseInt(dato);

sexo = window.prompt("Dgame su sexo, hombre = h o mujer = m"); if (sexo == "h") { peso = 50 + ((altura - 150) / 4)*3 + (edad - 20)/4; } else peso = peso * 0.9;

alert("Su peso ideal es " + peso + " Kg") }


31

Ejercicio 3.6) Realizar Seguimiento de Variables gracias a los puntos de Interrupcin.


32

Ejercicio 3.7) Programa que calcula Potencia, Intensidad y voltaje de la corriente elctrica.

function potencia() { var v, i, p; v = window.prompt("Introduce la voltaje","0"); i = window.prompt("Introduce la intensidad","0"); p = (v * i); document.write("La potencia es: ", p); } function voltaje() { var v, i, p; i = window.prompt("Introduce la intensidad","0"); p = window.prompt("Introduce la potencia","0"); v = (p / i); document.write("El voltaje es: ", v); } function intensidad() { var v, i, p; v = window.prompt("Introduce la voltaje","0"); p = window.prompt("Introduce la potencia","0"); i = (p / v); document.write("La intensidad es: ", i); }


33

Ejercicio 3.8) Funciones y utilizacin de elementos

function FuncionPrueba() { document.getElementById("demo").innerHTML="La funcion ha sido ejecutada"; } Ejercicio Funciones y elementos Este es un parrafo Pulsa Aqui

Ejercicio 3.9) Realizar programa con dos funciones: Una muestra en pantalla la suma de dos nmeros introducidos por el usuario. La otra funcin, muestra la multiplicacin de los dos nmeros introducidos por el usuario.


34

Ejercicio 3.10) Crear un programa Calculadora, con las 4 operacions bsicas, sumar restar, multiplicar y dividir. Como se ha de subdividir el programa? Lo implemento con funciones? . Cuntas funciones son necesarias?

Solucin 1:

function sumar() { var num1; var num2; var res; num1 = parseInt(document.calculadora.valor1.value); num2 = parseInt(document.calculadora.valor2.value); res = num1 + num2; document.calculadora.resultado.value = res; } function restar() { var num1; var num2; var res; num1 = parseInt(document.calculadora.valor1.value); num2 = parseInt(document.calculadora.valor2.value); res = num1 - num2; document.calculadora.resultado.value = res; } function multiplicar() { var num1; var num2; var res; num1 = parseInt(document.calculadora.valor1.value); num2 = parseInt(document.calculadora.valor2.value); res = num1 * num2; document.calculadora.resultado.value = res; } function dividir() { // codigo similar a los anteriores } Primer nmero: Segundo nmero: Resultado:


35

Solucin 2:

function calcula(operacio) { var num1; var num2; var res; num1 = parseInt(document.calculadora.valor1.value); num2 = parseInt(document.calculadora.valor2.value); if (operacio == 1) res = num1 + num2; if (operacio == 2) res = num1 + num2; if (operacio == 3) res = num1 * num2; if (operacio == 4) res = num1 / num2; document.calculadora.resultado.value = res; } Primer nmero: Segundo nmero: Resultado:


36

Ejercicio 3.11) Cdigo en lenguaje C. Qu opinin te merece este cdigo? Se entiende fcilmente? Es ordenado? Est estructurado?

int main() { int num1,num2,resultado=0; char opcion; printf("Escribe el primer numero:"); scanf("%i",&num1); printf("Escribe el segundo numero:"); scanf("%i",&num2); printf("\nElige la operacion que quieres que ejecute:\n\n"); printf("Para sumar los 2 numeros escribe S o s \n"); printf("Para restar los 2 numeros escribe R o r \n"); printf("Para multiplicar los 2 numeros escribe M o m \n"); printf("Para Dividir los 2 numeros escribe D o d \n\n"); printf("Opcion:"); scanf("%s",&opcion); if (opcion=='S' || opcion=='s') { resultado=num1+num2; } if (opcion=='R' || opcion=='r') { printf("Si quieres restar num1-num2 elige A a \n"); printf("Si quieres restar num2-num1 elige B b\n"); printf("Opcion:"); scanf("%s",&opcion); if (opcion=='A' || opcion=='a') resultado=num1-num2; else resultado=num2-num1; } if (opcion=='M' || opcion=='m') { resultado=num1*num2; } if (opcion=='D' || opcion=='d') { printf("Si quieres dividir num1/num2 elige A a \n"); printf("Si quieres dividir num2/num1 elige B b\n"); printf("Opcion:"); scanf("%s",&opcion); if (opcion=='A' || opcion=='a') { resultado=num1/num2; } else { resultado=num2/num1; } } printf("\nEl resultado es: %i\n\n", resultado); system ("pause"); }


37

Ejercicio 3.12) NO ejecutar el siguiente programa. Sin ver por pantalla: Qu saldra si se introduce 178?

var dato; var altura; dato = window.prompt("Escribe tu altura en cm", "0"); altura = parseInt(dato);

if (altura >180) resultado = "Eres alto";

else { if (altura >=150) resultado = "Altura media"; else resultado = "Eres bajo"; } document.write(resultado);

Ejercicio 3.13) Colocar punto de interrupcin en primer condicional y depurar paso a paso (F10) Contar cuantas comparaciones en total realiza el programa. Funciona el programa para todos los casos posibles?

var dato; var altura;

dato1 = window.prompt("Escribe tu altura en cm", "0"); altura = parseInt(dato1); sexo = window.prompt("Escribe si eres Hombre o Mujer (h-m)", "0");

if (altura >180 && sexo =="h") resultado = "Eres alto"; else { if (altura >=150 && sexo =="h") resultado = "Altura media"; else resultado = "Eres bajo"; }

if (altura >170 && sexo =="m") resultado = "Eres alta"; else { if (altura >=130 && sexo =="m") resultado = "Altura media"; else resultado = "Eres baja"; } document.write(resultado);


38

Ejercicio 3.14) Depurar paso a paso (F10) contando comparaciones en total que realiza el programa.


dato1 = window.prompt("Escribe tu altura en cm", "0"); altura = parseInt(dato1); sexo = window.prompt("Escribe si eres Hombre o Mujer (H-M)", "0");

if (sexo =="H") { if (altura >180) resultado =" Eres alto"; else { if (altura >=150) resultado = "Altura media"; else resultado = "Eres bajo"; } }

else { if (altura >170) resultado = "Eres alta"; else { if (altura >=130) resultado = "Altura media"; else resultado = "Eres baja"; } }

document.write(resultado);


39

Ejercicio 3.15) Contar cuantas comparaciones (mn. y mximas) en total realiza el programa.


dato1 = window.prompt("Escribe tu altura en cm", "0"); altura = parseInt(dato1); sexo = window.prompt("Escribe si eres Hombre o Mujer (h-m)", "0");

if (sexo == "h") { nivel1=180; nivel2=150; } else { nivel1=170; nivel2=130; }

if (altura >nivel1) resultado = "Eres alt@"; else { if (altura >=nivel2) resultado = "Altura media"; else resultado = "Eres baj@"; }

document.write(resultado);

Ejercicio 3.16) Cul de los tres programas anteriores es mejor? Por qu?


40

Ejercicio 3.17) Ejecutar el siguiente programa.

Hay un cdigo mejor para obtener el mismo resultado?

var dia,mes,ao; mes=prompt('Introduzca el nmero del mes:',''); mes=parseInt(mes); if (mes==1 || mes==3 || mes==5 || mes==7 || mes==8 || mes ==10 || mes==12) { document.write('Este mes tiene 31 dias.'); } else { if (mes==2) document.write('Este mes puede tener 30 dias.'); else document.write('Este mes tiene 30 dias.'); }


41

Ejercicio 3.18) Ejecutar el siguiente programa : Mayor de 3 nmeros var num1,num2,num3; num1=prompt('Introduce primer nmero:',''); num2=prompt('Introduce segundo nmero:',''); num3=prompt('Introduce tercer nmero:','');

num1=parseInt(num1); num2=parseInt(num2); num3=parseInt(num3);

if (num1>num2 && num1>num3) { document.write('el mayor es el '+num1); } else { if (num2>num3) { document.write('el mayor es el '+num2); } else { document.write('el mayor es el '+num3); } }


42

Ejercicio 3.19) El siguiente programa Cuntas instrucciones if realiza como mnimo?

var num1,num2,num3; num1=prompt('Introduce primer nmero:',''); num2=prompt('Introduce segundo nmero:',''); num3=prompt('Introduce tercer nmero:','');

num1=parseInt(num1); num2=parseInt(num2); num3=parseInt(num3);

if (num1>num2) { if (num1>num3) resultado = num1; else resultado = num3; } else { if (num2>num3) resultado = num2; else resultado = num3; }

document.write('el mayor es el '+ resultado);

Program acin web : www.ibserveis.com Leccin 4 : Bucles. Formularios

43

Programacin web con ejercicios en Javascript. Leccin 4: Bucles . Formularios


44

Bucles . Formularios

Dos temas distintos dentro del mismo captulo.

Los bucles For permiten racionalizar las instrucciones repetitivas, una forma ms de aplicar la lgica a la programacin.

Los Formularios permiten introduccin de varios datos por parte del usuario.

Para cualquier aclaracin, pueden ponerse en contacto con el autor, a travs de www.ibserveis.com Est permitido el uso en comn en aulas fsicas donde se enseen asignaturas de programacin. Est prohibido cualquier tipo de distribucin sin permiso del autor. Est prohibida la reproduccin de este curso para su utilizacin comercial.


45

Informacin del bucle for : http://www.w3schools.com/js/js_loop_for.asp

Ejercicio 4.1) Realizar seguimiento de las variables i , x var x="",i; for (i=0;i 0; x--) { for (j = x; j >= 1; j--) document.write(+j); document.write(""); }


46

Ejercicio 4.3) Realizar seguimiento de las variables i , x var i, j; var x = ""; for (i = 1; i


47

Ejercicio 4.5) En base al ejercicio anterior, realizar programa que dibuja un ROMBO

Ejercicio 4.6) Pulsa el boton y se crean HTML tags de la 1 a la 6 Pulsa aqui function funcion1() { var result="" var i; for (i=1; i


48

Ejercicio 4.8) Realizar una pgina web, con programacin en Javascript, con al menos una funcin. En esta web se pide al usuario 2 nmeros del 1 al 10. Una vez introducidos los nmeros, el ordenador muestra una tabla (HTML) que contiene la tabla de multiplicar del nmero 1 hasta el nmero2.

Ejemplo: El usuario introduce el nmero 2 y 4 , la web ensea por pantalla:

2 x1 = 2

2 x 2 = 4

2 x 3 = 6

2 x 4 = 8

Ejercicio 4.9) Realizar programa en Javascript: JUEGO DADOS Queremos programar un juego de dados en un pgina web.

El usuario empieza con 100 para poder apostar. El usuario decide a que nmero apuesta del 1 al 6, y tambin que cantidad de euros quiere apostar.

Se lanza un dado (asignacin al azar de un nmero del a 1 al 6) Si el usuario acierta el nmero, gana el doble de lo que ha postado. Si no acierta, pierde todo lo apostado.

El juego acaba cuand el usuario llega a 0 euros o al llegar a 500 euros


49

Resuelto:

Joc Daus var dinero= 100 ; var dado = randomnumber = Math.floor(Math.random() * 6); var ganancias = 0 ; while (dinero < 500) // AND dinero >0 { var num = window.prompt("A que nmero quiere apostar, del 1 al 6", "0"); var1 = parseInt(num); var apuesta = window.prompt("Cantidad que quiere apostar", "20"); var2 = parseInt(apuesta); if (num == dado) { dinero = dinero + apuesta*2 alert("Has ganado" + dinero) } else { dinero = dinero - apuesta alert("Has perdido" + apuesta + "ahora solo tienes" + dinero) } if (dinero == 0) { alert("game over") break; } if (dinero >= 500) { alert("Has ganado el juego") } }


50

4.10) Introduccin datos en FORMS

Datos en Formularios function saludo() { var nom_usuario = document.fdatos.entrada.value document.writeln("Hola, bon dia "+nom_usuario) } Escribe tu nombre:

4.11) Realizar programa en el cual el usuario introduce un valor en un FORM y por pantalla sale como resultado su 10%.


51

4.12) Realizar programa para una web, en el cual el usuario introduce 2 notas y su peso ponderado. Pulsando el botn Calcula , la web muestra como resultado la nota media ponderada.

4.13) Ejecutar el siguiente programa. Que realiza la instruccin eval?

function calcula() { document.exer.respuesta.value = eval(document.exer.entrada.value) } Escribe una frmula matemtica, por ejemplo: (2+3)*10 Respuesta:


52

4.14) Fer un seguiment dels valors de les Variables daquest codi (punts dinterrupci)

function f() { var solo_aqui = 100; z = solo_aqui; } var x, y; // asignacin y = "Bon dia"; document.write("" + x + ""); document.write("" + y + ""); f(); document.write("" + z + ""); Las variables definidas en la funcin (solo_aqui) existen durante el tiempo de ejecucin de la funcin. El resto son variables globales.


53

4.15) Del anterior ejercicio: Qu tipo de variable es z? local o global? porqu?

4.16) Aadir una tercera nota el ejercicio de la media ponderada (4.12)

4.17) realizar un programa en el ciual se introduce un valor numrico en un FORM y como resultado se muestran el nresultado de elevar el nmero al cuadrado y tambin al cubo.

a) Realizar con una funcin. b) Realizar con al menos , DOS funciones.


54

FIN EJERCICIOS 4

Prxima leccin: Leccin 5 Arrays

Almacenamiento de mltiple informacin indexada. Al realizar un programa trabajamos con lgica y datos, en la siguiente leccin vemos el inicio de la gestin y almacenaje de datos.

Program acin web : www.ibserveis.com Leccin 5 : Arrays.

55

Programacin web con ejercicios en Javascript. Leccin 5: ARRAYS


56

Arrays

Al aumentar el nmero de datos que tiene que manejar un programa, se hace necesaria una forma indexada para manejarlos. A cada uno de los datos, a cada una de esas variables, le corresponder a un nmero que puede controlarse mediante bucles tipo for o mediante contadores en aumento.

Para cualquier aclaracin, pueden ponerse en contacto con el autor, a travs de www.ibserveis.com Est permitido el uso en comn en aulas fsicas donde se enseen asignaturas de programacin. Est prohibido cualquier tipo de distribucin sin permiso del autor. Est prohibida la reproduccin de este curso para su utilizacin comercial.


57

1) Declaracin y uso de Arrays.

var nuevosCoches=new Array(); nuevosCoches[0]="Seat"; nuevosCoches[1]="Renault"; nuevosCoches[2]="Alfa Romeo"; nuevosCoches[3]="Peugeot";

document.write("Marcas de Coches"); for (var i = 0; i < 4; i++) document.write(nuevosCoches[i] + "");

2) Iniciacin a los Arrays. Propiedad lenght

var dias = new Array("lunes", "martes", "mircoles", "jueves", "viernes", "sbado", "domingo"); document.write("Das de la semana"); for (var i = 0; i < dias.length; i++) document.write(dias[i] + "");


58

3) Recorrido inverso.

var dias = new Array("lunes", "martes", "mircoles", "jueves", "viernes"); document.write("Das de la semana"); final = (dias.length -1); for (var i = final; i >1 ; i=i-2) document.write(dias[i] + "");

4) Uso del ndice


59

5) Modificar Array.

6) Propiedades disponibles: PUSH


60

7) Funciones MOSTRAR array - Funcin Modificar arrays (variables globales) UTILIZAR PUNTOS INTERRUPCIN para seguir el valor de las variables dentro y fuera de las funciones

// Variables Globales var alum = new Array("Ana", "Bernat", "Carol", "David", "Elena", "Francesc"); var notas = new Array(6); for (var x = 0; x < 6; x++) notas[x] = 10; function mostrar() { document.write("Los datos ahora son "); for (var i =0; i


61

8) Funcin rollover (aadir imgenes prova1.gif , prova2.gif en la misma carpeta)

imagen01 = new Image() imagen01.src = "prova1.gif" imagen02 = new Image() imagen02.src = "prova2.gif" function rollover(nombreimagen, nova) { document.images[nombreimagen].src = nova.src }

9) Clase Strings (tipo particular de Array de caracteres)

var str = "abcdefghijklmnopqrstuwxyz"; document.write("Nmero de caracteres de " + str + ": " + str.length); Valor de la propiedad length es el nmero de caracteres de un string.

10) Strings - Substring

var str = "abcdaafgaa6hijkaa2ml"; document.write(str.substring(8)); document.write(""); document.write(str.substring(5, 9)); El mtodo substring retorna una subcadena entre los ndices dados.


62

11) Realizar programa donde el usuario introduce una palabra y el ordenador responde , calculando resultado en una FUNCIN, el nmero total de vocales de esa palabra.

12) Realizar programa donde el usuario introduce una palabra. El programa consta, de al menos, DOS FUNCIONES: la funcin f_vocales(variable) recibe la palabra y saca por pantalla el nmero total de vocales de esa palabra. La segunda funcin se llama f_total(variable), esta funcin recibe la palabra y saca por pantalla el nmero total de letras.


63

13) Programa Marco de Fotos

Marco de fotos var fotos=new Array() var actual=0 fotos[0]="casa0.jpg" fotos[1]="casa1.jpg" fotos[2]="casa2.jpg" fotos[3]="casa3.jpg" function atras() { if (actual>0) { window.status='' actual-- var objmarco = document.getElementById("marco") objmarco.src = fotos[actual] } } function adelante() { if (actual


64

14) Creacin nuevas propiedades (prototype)

var Alumnos = ["joan", "ana", "juana", "mario"]; // Creamos una nueva propiedad para el objeto Array Array.prototype.pasarMayusculas=function() { for (i=0;i


65

15) Crear programa con dos Arrays, el primero llamado DatosIniciales con 10 nmeros entre el 0 y el 50. El segundo Array se llama DatosFinales, y se declara con 10 posibles valores (0 hasta 9).

A travs de una funcin, se rellena el Array DatosFinales con los nmeros mayores de 25 del Array DatosIniciales.

16) Array bidimensional: 3 asignaturas, 5 alumnos (15 notas en total)

// Declaracin global var notas = new Array (6); for(i=1;i


66

17) Realizar un juego del Ahorcado, con palabras fijas para adivinar.

//Cdigo principal : JUGAR

function jugar()

{ var letrajugada = document.getElementById('pruebaletra').value; var letra; var aciertos = 0; var numerousadas = usadas.length; document.getElementById('pruebaletra').value = "" document.getElementById('pruebaletra').focus() if (letrajugada == "" || letrajugada == " ") { return 0; } for (c = 0; c < numerousadas; c++) { if (letrajugada == usadas[c]) { alert("Esa letra ya la has usado!"); document.getElementById('pruebaletra').focus() return 0;

} } usadas.push(letrajugada); for (i = 0; i


67

//Cdigo SOLUCIONAR

function solucionar() { var solucion;var word; solucion = document.getElementById("formsolucion").value; if (solucion == elegida) {

alert("Has ganado!!"); bloquear();

for (i = 0; i


68

document.write(""); for (numcasillas = 0; numcasillas < numletras; numcasillas++) { var letra = (elegida.substr([numcasillas], 1)); if (letra == ' ') { document.write("&nbsp&nbsp&nbsp&nbsp"); espacios++; } else document.write("


69

NDICE

Leccin 1: INICIACIN A LA PROGRAMACIN .............................................. 1

Leccin 2: DEPURACIN DE ERRORES EN LOS PROGRAMAS ......................... 12

Leccin 3: FUNCIONES Y LGICA. ................................................................... 26

Leccin 4: Bucles . Formularios ...................................................................... 43

Leccin 5: ARRAYS .......................................................................................... 55

Iniciacion-a-Javascript-para-Android.pdf

Documents

Transcript of Iniciacion-a-Javascript-para-Android.pdf