JAVASCRIPT
Conceptos de Algoritmo, Programa y Lenguaje de Programación. <ul><li>Un algoritmo:  Son aquellos pasos a realizar para la ...
¿QUÉ ES JAVASCRIPT? <ul><li>Javascript es un lenguaje que puede ser utilizado por profesionales y para quienes se inician ...
Ejercicio a resolver <ul><li><html>  </li></ul><ul><li><head>  </li></ul><ul><li><title>Problema</title>  </li></ul><ul><l...
Variables <ul><li>Una variable es una cajón donde hay un valor. Consta de un nombre y pertenece a un tipo (numérico, caden...
Ejercicio a resolver <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>Problema</title> </li></ul><ul><li><...
Entrada de datos por teclado <ul><li>Para la entrada de datos por teclado tenemos la función prompt. Cada vez que se neces...
Problema a resolver <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>Problema</title> </li></ul><ul><li></...
Estructuras Secuénciales <ul><li>Son aquellas estructuras en las que solo aparecen operaciones, entradas y salidas. </li><...
Problema a resolver <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>Problema</title> </li></ul><ul><li></...
Estructuras condicionales simples <ul><li>Las estructuras condicionales las podemos definir son una estructura mas complej...
Problema a resolver <ul><li>< html> </li></ul><ul><li><head> </li></ul><ul><li><title>Problema</title> </li></ul><ul><li><...
Estructuras condicionales Compuestas <ul><li>Es cuando tenemos actividades por el verdadero y por el falso de la condición...
Ejercicio a resolver <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>Problema</title> </li></ul><ul><li><...
Operadores lógicos && (y) en las estructuras condicionales . <ul><li>El operador &&, traducido se lo lee como &quot;Y&quot...
Problema a resolver <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><...
Operadores lógicos || (o) en las estructuras condicionales <ul><li>Traducido se lo lee como &quot;O&quot;. Si la condición...
Problema a Resolver <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><...
Estructuras switch <ul><li>La variable <var> se evalúa y compara sucesivamente con todas las constantes que aparecen junto...
Problema a resolver <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><...
Estructura repetitiva (while) <ul><li>Las estructuras repetitivas nos permiten ejecutar un bloque de instrucciones varias ...
Problema a resolver <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><...
Acumuladores <ul><li>Es un caso especial de variable que incrementa o decrementa con valores variables durante la ejecució...
Problema a Resolver <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>Problema</title> </li></ul><ul><li></...
Estructura repetitiva (while) <ul><li>Las estructuras repetitivas nos permiten ejecutar un bloque de instrucciones varias ...
Problema a resolver <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><...
Estructura repetitiva (for) <ul><li>Cualquier problema que requiera una estructura repetitiva se puede resolver empleando ...
Problema a resolver <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><...
Próxima SlideShare
Cargando en…5
×

Trabajo final programacion

1.481 visualizaciones

Publicado el

0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
1.481
En SlideShare
0
De insertados
0
Número de insertados
59
Acciones
Compartido
0
Descargas
40
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Trabajo final programacion

  1. 1. JAVASCRIPT
  2. 2. Conceptos de Algoritmo, Programa y Lenguaje de Programación. <ul><li>Un algoritmo: Son aquellos pasos a realizar para la realización de un problema cualquiera. </li></ul><ul><li>Programa: Es aquel grupo de instrucciones que entiende un ordenador para hacer una actividad. La actividad fundamental del programador es resolver problemas empleando el ordenador como herramienta fundamental. Para la resolución de un problema hay que plantear un algoritmo. </li></ul><ul><li>Lenguaje de Programación: Es aquel grupo de instrucciones que son interpretadas por un computador con el objetivo de realizar operaciones, y otros como el de mostrar los datos por la pantalla, introducir datos por digitación en el teclado, etc. </li></ul>
  3. 3. ¿QUÉ ES JAVASCRIPT? <ul><li>Javascript es un lenguaje que puede ser utilizado por profesionales y para quienes se inician en el desarrollo y diseño de sitios Web. No requiere de compilación ya que el lenguaje funciona del lado del cliente, los navegadores son los encargados de interpretar estos códigos. </li></ul><ul><li>Tiene un lenguaje script orientado a documento, como pueden ser los lenguajes de macros que tienen muchos procesadores de texto y planillas de cálculo. No se puede desarrollar un programa con JavaScript que se ejecute sin un navegador. </li></ul>
  4. 4. Ejercicio a resolver <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>Problema</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><script language=&quot;javascript&quot;> </li></ul><ul><li>document.write('Marcos Manrique'); </li></ul><ul><li>document.write(‘<br>’); </li></ul><ul><li>document.write(‘18 años’); </li></ul><ul><li></script> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  5. 5. Variables <ul><li>Una variable es una cajón donde hay un valor. Consta de un nombre y pertenece a un tipo (numérico, cadena de caracteres, etc.). Existen diferentes tipos de variable y pueden almacenar: </li></ul><ul><li>Valores Enteros </li></ul><ul><li>Valores Reales </li></ul><ul><li>Cadenas de caracteres </li></ul><ul><li>Valores lógicos </li></ul><ul><li>Se las denomina así porque su contenido puede cambiar en cualquier momento durante el desarrollo del programa. </li></ul>
  6. 6. Ejercicio a resolver <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>Problema</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><script language=&quot;javascript&quot;> </li></ul><ul><li>document.write('$650000'); </li></ul><ul><li>document.write('<br>'); </li></ul><ul><li>document.write('Jose Gomez'); </li></ul><ul><li></script> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  7. 7. Entrada de datos por teclado <ul><li>Para la entrada de datos por teclado tenemos la función prompt. Cada vez que se necesita ingresar un dato con esta función, aparece una ventana donde podemos cargar el valor deseado. </li></ul><ul><li>Hay otras formas más avanzada para la entrada de datos en una página HTML pero por ahora solo se observan los conceptos básicos para facilitar el aprendizaje. </li></ul>
  8. 8. Problema a resolver <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>Problema</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><script language=&quot;javascript&quot;> </li></ul><ul><li>var nombre; </li></ul><ul><li>var email; </li></ul><ul><li>nombre= prompt('Ingrese su nombre:',''); </li></ul><ul><li>email= prompt('Ingrese su email:',''); </li></ul><ul><li>document.write('Bienvenido '); </li></ul><ul><li>document.write(nombre); </li></ul><ul><li>document.write(' Su email es: '); </li></ul><ul><li>document.write(email); </li></ul><ul><li></script> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  9. 9. Estructuras Secuénciales <ul><li>Son aquellas estructuras en las que solo aparecen operaciones, entradas y salidas. </li></ul><ul><li>Las acciones son seguidas de otras acciones en secuencia. Las acciones se suceden de tal modo que la salida de una es la entrada de la siguiente y así sucesivamente hasta el fin del proceso. </li></ul>
  10. 10. Problema a resolver <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>Problema</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><script language=&quot;javascript&quot;> </li></ul><ul><li>var valor1; </li></ul><ul><li>var valor2; </li></ul><ul><li>var valor3; </li></ul><ul><li>var valor4; </li></ul><ul><li>valor1= prompt('Ingrese el primer valor'); </li></ul><ul><li>valor2 = prompt('Ingrese el segundo valor'); </li></ul><ul><li>valor3 = prompt('Ingrese el tercer valor'); </li></ul><ul><li>valor4 = prompt('Ingrese el cuarto valor'); </li></ul><ul><li>var suma = parseInt(valor1)+parseInt(valor2); </li></ul><ul><li>var producto = valor3 * valor4 </li></ul><ul><li>document.write('La suma del primer y segundo valor es:'); </li></ul><ul><li>document.write(suma); </li></ul><ul><li>document.write('<br>'); </li></ul><ul><li>document.write('La multiplicacion del tercer y cuarto valor es:'); </li></ul><ul><li>document.write(producto); </li></ul><ul><li></script> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  11. 11. Estructuras condicionales simples <ul><li>Las estructuras condicionales las podemos definir son una estructura mas compleja que la secuencial, y en donde se deben tomar decisiones para resolver un determinado problema. En una estructura condicional simple hay actividades por el camino que es verdadero y por el camino que es falso no hay actividades. Por el camino que es verdadero pueden existir varias operaciones, entradas y salidas. </li></ul>
  12. 12. Problema a resolver <ul><li>< html> </li></ul><ul><li><head> </li></ul><ul><li><title>Problema</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><script language=&quot;javascript&quot;> </li></ul><ul><li>var nota1; </li></ul><ul><li>var nota2; </li></ul><ul><li>var nota3; </li></ul><ul><li>nota1= prompt('Ingrese valor nota 1'); </li></ul><ul><li>nota2= prompt('Ingrese valor nota 2'); </li></ul><ul><li>nota3= prompt('Ingrese valor nota 3'); </li></ul><ul><li>var suma= parceInt(nota1)+parseInt(nota2)+parseInt(nota3) </li></ul><ul><li>var promedio= suma/3 </li></ul><ul><li>if (promedio>=7) </li></ul><ul><li>{ </li></ul><ul><li>document.write(' Usted esta promocionado con un valor de: '+promedio); </li></ul><ul><li>} </li></ul><ul><li></script> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  13. 13. Estructuras condicionales Compuestas <ul><li>Es cuando tenemos actividades por el verdadero y por el falso de la condición. Lo más importante que hay que tener en cuenta es que se realizan las actividades de la rama del verdadero o las del falso, nunca se realizan las actividades de las dos ramas. En una estructura condicional compuesta tenemos entradas, salidas, operaciones, tanto por la rama del verdadero como por la rama del falso. </li></ul><ul><li>  La estructura selectiva compuesta ( IF - THEN - ELSE ), permite elegir entre dos alternativas posibles en función del cumplimiento o no de la condición a evaluar. </li></ul><ul><li>   Su representación es: </li></ul><ul><li>IF <Condición> </li></ul><ul><li>   THEN </li></ul><ul><li>        <Acción> </li></ul><ul><li>    ELSE </li></ul><ul><li>        <Acción> </li></ul>
  14. 14. Ejercicio a resolver <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>Problema</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><script language=&quot;javascript&quot;> </li></ul><ul><li>var nota1,nota2,nota3; </li></ul><ul><li>nota1= prompt('Ingrese valor nota 1'); </li></ul><ul><li>nota2= prompt('Ingrese valor nota 2'); </li></ul><ul><li>nota3= prompt('Ingrese valor nota 3'); </li></ul><ul><li>var suma= parseInt(nota1)+parceInt(nota2)+parceInt(nota3); </li></ul><ul><li>var promedio= suma/3 </li></ul><ul><li>if (promedio>=4) </li></ul><ul><li>{ </li></ul><ul><li>document.write(' Regular con: '+promedio); </li></ul><ul><li>} </li></ul><ul><li>else </li></ul><ul><li>{ </li></ul><ul><li>document.write(' Reprobado con: '+promedio); </li></ul><ul><li>} </li></ul><ul><li></script> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  15. 15. Operadores lógicos && (y) en las estructuras condicionales . <ul><li>El operador &&, traducido se lo lee como &quot;Y&quot;. Se emplea cuando en una estructura condicional se disponen dos condiciones.  Cuando vinculamos dos o más condiciones con el operador &quot;&&&quot; las dos condiciones deben ser verdaderas para que el resultado de la condición compuesta de Verdadero y continúe por la rama del verdadero de la estructura condicional. Recordemos que la condición debe ir entre paréntesis en forma obligatoria. La utilización de operadores lógicos permiten en muchos casos, plantear algoritmos más cortos y comprensibles.   </li></ul>
  16. 16. Problema a resolver <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><script language=&quot;javascript&quot;> </li></ul><ul><li>var num1,num2,num3; </li></ul><ul><li>num1=prompt('Ingrese primer número:',''); </li></ul><ul><li>num2=prompt('Ingrese segundo número:',''); </li></ul><ul><li>num3=prompt('Ingrese tercer número:',''); </li></ul><ul><li>num1=parseInt(num1); </li></ul><ul><li>num2=parseInt(num2); </li></ul><ul><li>num3=parseInt(num3); </li></ul><ul><li>if (num1>num2 && num1>num3) </li></ul><ul><li>{ </li></ul><ul><li>document.write('el mayor es el '+num1); </li></ul><ul><li>} </li></ul><ul><li>else </li></ul><ul><li>{ </li></ul><ul><li>if (num2>num3) </li></ul><ul><li>{ </li></ul><ul><li>document.write('el mayor es el '+num2); </li></ul><ul><li>} </li></ul><ul><li>else </li></ul><ul><li>{ </li></ul><ul><li>document.write('el mayor es el '+num3); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li></script> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  17. 17. Operadores lógicos || (o) en las estructuras condicionales <ul><li>Traducido se lo lee como &quot;O&quot;. Si la condición 1 es verdadera o la condición 2 es Verdadera, luego ejecutar la rama del verdadero. Cuando vinculamos dos o más condiciones con el operador &quot;O&quot;, con que una de las dos condiciones sea verdadera alcanza para que el resultado de la condición compuesta sea Verdadero.  </li></ul><ul><li>Los operadores lógicos nos permiten agrupar condiciones simples en una estructura condicional, esto nos facilita la implementación de algoritmos más compactos y comprensibles. </li></ul><ul><li>Cuando unimos dos condiciones simples con el operador lógico 'and' ambas condiciones deben verificarse como verdaderas para que la condición compuesta se verifique verdadera. </li></ul>
  18. 18. Problema a Resolver <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><script language=&quot;javascript&quot;> </li></ul><ul><li>var dia,mes,año; </li></ul><ul><li>dia=prompt('Ingrese día:',''); </li></ul><ul><li>mes=prompt('Ingrese mes:',''); </li></ul><ul><li>año=prompt('Ingrese año:',''); </li></ul><ul><li>dia=parseInt(dia); </li></ul><ul><li>mes=parseInt(mes); </li></ul><ul><li>año=parseInt(año); </li></ul><ul><li>if (mes==1 || mes==2 || mes==3) </li></ul><ul><li>{ </li></ul><ul><li>document.write('corresponde al primer trimestre del año.'); </li></ul><ul><li>} </li></ul><ul><li></script> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  19. 19. Estructuras switch <ul><li>La variable <var> se evalúa y compara sucesivamente con todas las constantes que aparecen junto a la palabra reservada case. Si alguna de ellas es igual al valor de <var>se ejecuta la sentencia o bloque de sentencias correspondientes. </li></ul><ul><li>Si no aparece la palabra reservada break, continúa la comparación con el resto de las opciones. </li></ul><ul><li>Si aparece break, se termina la ejecución de la estructura switch. La opción default, es opcional, indica la sentencia que se ejecuta en caso de que el valor de la variable <var> no se corresponda con ninguna de las constantes expresadas. </li></ul><ul><li>La estructura switch no permite que dos constantes tengan el mismo valor. </li></ul><ul><li>Si se evalúan constantes de caracteres, se emplean sus equivalentes numéricos. </li></ul>
  20. 20. Problema a resolver <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><script language=&quot;javascript&quot;> </li></ul><ul><li>var valor; </li></ul><ul><li>valor=prompt('Ingrese un valor comprendido entre 1 y 5:',''); </li></ul><ul><li>//Convertimos a entero </li></ul><ul><li>valor=parseInt(valor); </li></ul><ul><li>switch (valor) { </li></ul><ul><li>case 1: document.write('uno'); </li></ul><ul><li>break; </li></ul><ul><li>case 2: document.write('dos'); </li></ul><ul><li>break; </li></ul><ul><li>case 3: document.write('tres'); </li></ul><ul><li>break; </li></ul><ul><li>case 4: document.write('cuatro'); </li></ul><ul><li>break; </li></ul><ul><li>case 5: document.write('cinco'); </li></ul><ul><li>break; </li></ul><ul><li>default:document.write('debe ingresar un valor comprendido entre 1 y 5.'); </li></ul><ul><li>} </li></ul><ul><li></script> </li></ul><ul><li><br> </li></ul><ul><li><A href=&quot;pagina2.html&quot;>Ver segundo problema</a> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  21. 21. Estructura repetitiva (while) <ul><li>Las estructuras repetitivas nos permiten ejecutar un bloque de instrucciones varias veces, dependiendo de una condición. </li></ul><ul><li>La estructura while repite el bloque de instrucciones mientras la condición se verifique verdadera. </li></ul><ul><li>Una ejecución repetitiva de sentencias se caracteriza por:  - La o las sentencias que se repiten. - El test o prueba de condición antes de cada repetición, que motivará que se repitan o no las sentencias. </li></ul>
  22. 22. Problema a resolver <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><script language=“javascript”> </li></ul><ul><li>var num; </li></ul><ul><li>num=0 </li></ul><ul><li>while (num<=500) </li></ul><ul><li>{ </li></ul><ul><li>document.write(num); </li></ul><ul><li>document.write(‘<br’>); </li></ul><ul><li>num=num+11 </li></ul><ul><li>} </li></ul><ul><li></script> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  23. 23. Acumuladores <ul><li>Es un caso especial de variable que incrementa o decrementa con valores variables durante la ejecución de un programa. Cada ciclo que se repita la estructura repetitiva, la variable suma se incrementa con el contenido ingresado en la variable valor. </li></ul>
  24. 24. Problema a Resolver <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>Problema</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><script language=&quot;javascript&quot;> </li></ul><ul><li>Var cont=1; </li></ul><ul><li>Var suma=0; </li></ul><ul><li>Var altura; </li></ul><ul><li>While(cont<=5) </li></ul><ul><li>{ </li></ul><ul><li>Altura= prompt(‘Ingrese la altura’); </li></ul><ul><li>Altura= parseInt(altura); </li></ul><ul><li>Suma= suma+altura; </li></ul><ul><li>Cont=cont+1 </li></ul><ul><li>} </li></ul><ul><li>Promedio=suma/2; </li></ul><ul><li>Doument.write(“El promedio de las alturas sera”+promedio+”<br>”); </li></ul><ul><li></script> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  25. 25. Estructura repetitiva (while) <ul><li>Las estructuras repetitivas nos permiten ejecutar un bloque de instrucciones varias veces, dependiendo de una condición. </li></ul><ul><li>La estructura while repite el bloque de instrucciones mientras la condición se verifique verdadera. </li></ul><ul><li>Es importante recordar y remarcar que las instrucciones que se ejecutan en la estructura repetitiva while son todas las que se encuentran internadas a la derecha (cuatro espacios más a la derecha de la instrucción while). </li></ul><ul><li>La condición de la estructura está abajo del bloque a repetir, a diferencia del while que está en la parte superior. Finaliza la ejecución del bloque repetitivo cuando la condición retorna falso, es decir igual que el while. </li></ul>
  26. 26. Problema a resolver <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><script language=&quot;javascript&quot;> </li></ul><ul><li>var valor; </li></ul><ul><li>do { </li></ul><ul><li>valor=prompt('Ingrese un valor entre 0 y 999:',''); </li></ul><ul><li>valor=parseInt(valor); </li></ul><ul><li>document.write('El valor '+valor+' tiene '); </li></ul><ul><li>if (valor<10) </li></ul><ul><li>{ </li></ul><ul><li>document.write('Tiene 1 digitos'); </li></ul><ul><li>} </li></ul><ul><li>else </li></ul><ul><li>{ </li></ul><ul><li>if (valor<100) </li></ul><ul><li>{ </li></ul><ul><li>document.write('Tiene 2 digitos'); </li></ul><ul><li>} </li></ul><ul><li>else </li></ul><ul><li>{ </li></ul><ul><li>document.write('Tiene 3 digitos'); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>document.write('<br>'); </li></ul><ul><li>} while(valor!=0); </li></ul><ul><li></script> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  27. 27. Estructura repetitiva (for) <ul><li>Cualquier problema que requiera una estructura repetitiva se puede resolver empleando la estructura while. Pero hay otra estructura repetitiva cuyo planteo es más sencillo en ciertas situaciones. Esta estructura se emplea en aquellas situaciones en las cuales CONOCEMOS la cantidad de veces que queremos que se ejecute el bloque de instrucciones. Ejemplo: cargar 10 números, ingresar 5 notas de alumnos, etc. Conocemos de antemano la cantidad de veces que queremos que el bloque se repita. </li></ul>
  28. 28. Problema a resolver <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><script language=&quot;javascript&quot;> </li></ul><ul><li>var f; </li></ul><ul><li>for(f=1;f<=10;f++) </li></ul><ul><li>{ </li></ul><ul><li>document.write(f+&quot; &quot;); </li></ul><ul><li>} </li></ul><ul><li></script> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>

×