29
NESTOR MOTTA RUIZ NESTOR MOTTA RUIZ
NESTOR MOTTA RUIZNESTOR MOTTA RUIZ
JavaScriptJavaScript1. Conceptos de Algoritmo, Programa y Lenguaje de Programación.
2. Que es Java Script?
3. Variables
4. Entrada de datos por teclado. .
5. Estructuras Secuenciales de Programación.
6. Estructuras condicionales simples.
7. Estructuras condicionales compuestas.
8. Estructuras condicionales anidadas.
9. Operadores lógicos && (y) en las estructuras condicionales
10. Operadores lógicos || (o) en las estructuras condicionales. .
11. Estructuras switch.
12. Estructura repetitiva (while)
13. Concepto de acumulador.
14. Estructura repetitiva (do/while)
15. Estructura repetitiva (for)
Conceptos de Algoritmo, Programa Conceptos de Algoritmo, Programa y Lenguaje de Programación. y Lenguaje de Programación.
Algoritmo: Pasos a seguir para la solución de un Algoritmo: Pasos a seguir para la solución de un problemaproblema
Programa: Conjunto de instrucciones que entiende un Programa: Conjunto de instrucciones que entiende un ordenador para realizar una actividad. Cada tipo de ordenador para realizar una actividad. Cada tipo de programa tiene un objetivo bien definido por ejemplo programa tiene un objetivo bien definido por ejemplo un procesador de texto el cual permite cargar, un procesador de texto el cual permite cargar, modificar e imprimir textos.modificar e imprimir textos.
Lenguaje de programación: Conjunto de instrucciones Lenguaje de programación: Conjunto de instrucciones que son interpretadas por una computadora para que son interpretadas por una computadora para realizar operaciones, mostrar datos por pantalla, sacar realizar operaciones, mostrar datos por pantalla, sacar listados por impresora, entrar datos por teclado, etc. listados por impresora, entrar datos por teclado, etc.
Qué es JavaScript? Qué es JavaScript?
JavaScript, al igual que Flash, Visual Basic JavaScript, al igual que Flash, Visual Basic Script, son maneras que han surgido para Script, son maneras que han surgido para extender las capacidades del lenguaje HTML. extender las capacidades del lenguaje HTML. JavaScript no es un lenguaje de programación JavaScript no es un lenguaje de programación propiamente dicho ya que es un lenguaje script propiamente dicho ya que es un lenguaje script lo cual no permite desarrollar un programa con lo cual no permite desarrollar un programa con JavaScript que se ejecute fuera de un JavaScript que se ejecute fuera de un Navegador. Navegador.
EJEMPLO
<html><html> <head><head> <title>Problema</title><title>Problema</title> </head></head> <body><body>
<script language="javascript"><script language="javascript"> document.write('NESTOR MOTTA');document.write('NESTOR MOTTA'); document.write("<br>");document.write("<br>"); document.write('17 años');document.write('17 años');
</script></script>
</body></body> </html></html>
VariablesVariables
Una variable es un depósito donde hay un valor. Consta de un nombre y Una variable es un depósito donde hay un valor. Consta de un nombre y pertenece a un tipo (numérico, cadena de caracteres, etc.).pertenece a un tipo (numérico, cadena de caracteres, etc.).Una variable puede almacenar: Una variable puede almacenar:
Valores Enteros (100, 260, etc.)Valores Enteros (100, 260, etc.)
Valores Reales (1.24, 2.90, 5.00, etc.)Valores Reales (1.24, 2.90, 5.00, etc.)
Cadenas de caracteres ("Juan", "Compras", "Listado", etc.)Cadenas de caracteres ("Juan", "Compras", "Listado", etc.)Valores lógicos (true,false)Valores lógicos (true,false)
Las variables son nombres que ponemos a los lugares donde Las variables son nombres que ponemos a los lugares donde almacenamos la información. almacenamos la información.
En JavaScriptUna variable no puede tener el mismo nombre de una En JavaScriptUna variable no puede tener el mismo nombre de una palabra clave del lenguaje. palabra clave del lenguaje.
EJEMPLO
<body><body>
<script language="javascript"><script language="javascript"> var nombre="Nestor";var nombre="Nestor"; var salario=8000000;var salario=8000000; document.write(nombre);document.write(nombre); document.write('<br>');document.write('<br>'); document.write(salario); document.write(salario);
</script></script>
</body></body> </html></html>
Entrada de datos por Entrada de datos por tecladoteclado
Para la entrada de datos por teclado Para la entrada de datos por teclado tenemos la función prompt. Cada vez tenemos la función prompt. Cada vez que necesitamos ingresar un dato con que necesitamos ingresar un dato con esta función, aparece una ventana donde esta función, aparece una ventana donde cargamos el valor a pesar de que hay cargamos el valor a pesar de que hay otras formas mas sofisticadas esta otras formas mas sofisticadas esta resulta ser muy practica.resulta ser muy practica.
EJEMPLO
<body><body>
<script language="javascript"><script language="javascript"> var nombre=;var nombre=; var email=;var email=; nombre= prompt (‘ingrese su nombre:,’’);nombre= prompt (‘ingrese su nombre:,’’); email= prompt (‘ingrese su email:,’’);email= prompt (‘ingrese su email:,’’); document.write(‘Nombre:‘+nombre);document.write(‘Nombre:‘+nombre); document.write('<br>');document.write('<br>'); document.write(‘Email:‘+email);document.write(‘Email:‘+email); </script></script>
</body></body> </html></html>
Estructuras secuenciales Estructuras secuenciales de programaciónde programación
Estas estructuras aparecen cuando en Estas estructuras aparecen cuando en un problema sólo participan operaciones, un problema sólo participan operaciones, entradas y salidas entradas y salidas
EJEMPLO
<html><html> <head><head> <script language="JavaScript"><script language="JavaScript"> var valor1;var valor1; valor1=prompt('Ingrese el valor del lado:','');valor1=prompt('Ingrese el valor del lado:',''); var producto=valor1*4;var producto=valor1*4;
document.write('El perimetro es ');document.write('El perimetro es '); document.write(producto);document.write(producto); </script></script> </head></head> <body><body> </body></body> </html></html>
Estructuras condicionales Estructuras condicionales simplessimples
Cuando hay que tomar una decisión aparecen Cuando hay que tomar una decisión aparecen las estructuras condicionales. Estas las estructuras condicionales. Estas estructuras aparecen en nuestra vida diaria estructuras aparecen en nuestra vida diaria cuando debemos tomar una decision.cuando debemos tomar una decision.
¿Elijo la carrera A o la carrera B ?Al cursar una ¿Elijo la carrera A o la carrera B ?Al cursar una carrera, ¿elijo el turno mañana, tarde o carrera, ¿elijo el turno mañana, tarde o noche ? noche ?
En un problema se pueden combinar En un problema se pueden combinar estructuras secuenciales y condicionales.estructuras secuenciales y condicionales.
EJEMPLO
<html><html> <head><head> </head></head> <body><body> <script language="javascript"><script language="javascript"> var nombre;var nombre; var clave;var clave; var clave2;var clave2; nombre=prompt('Ingrese nombre:','');nombre=prompt('Ingrese nombre:',''); clave=prompt('Ingrese su clave:','');clave=prompt('Ingrese su clave:',''); clave2=prompt('Ingrese su clave nuevamente:','');clave2=prompt('Ingrese su clave nuevamente:',''); if (clave==clave2)if (clave==clave2) {{ document.write(nombre+' la calve es correcta ');document.write(nombre+' la calve es correcta '); }} </script></script> </body></body> </html></html>
Estructuras condicionales Estructuras condicionales compuestas.compuestas.
Esta estructura nos permite elegir una Esta estructura nos permite elegir una opción, puede tomar cualquier camino, o opción, puede tomar cualquier camino, o falso o verdadero pero hay que tomar en falso o verdadero pero hay que tomar en cuenta que solo realiza las actividades cuenta que solo realiza las actividades de la sección verdadero o las del falso de la sección verdadero o las del falso NUNCA se realizan las actividades de NUNCA se realizan las actividades de las dos ramas.las dos ramas.
EJEMPLO
EJERCICIO 1 CONCEPTO 7EJERCICIO 1 CONCEPTO 7 <html><html> <head><head> </head></head> <body><body> <script language="javascript"><script language="javascript"> var num1,num2;var num1,num2; num1=prompt('Ingrese el primer número:','');num1=prompt('Ingrese el primer número:',''); num2=prompt('Ingrese el segundo número:','');num2=prompt('Ingrese el segundo número:',''); num1=parseInt(num1);num1=parseInt(num1); num2=parseInt(num2);num2=parseInt(num2); var suma=num1+num2var suma=num1+num2 var resta=num1-num2var resta=num1-num2 var producto=num2*num1var producto=num2*num1 var division=num1/num2var division=num1/num2 if (num1>num2)if (num1>num2) {{ document.write('La suma es '+suma);document.write('La suma es '+suma); documen.write(' y su resta es '+resta);documen.write(' y su resta es '+resta); }} elseelse {{ document.write('el producto es '+producto);document.write('el producto es '+producto); document.write(' y su division es '+division);document.write(' y su division es '+division); }} </script></script> </body></body> </html></html>
Estructuras condicionales Estructuras condicionales anidadasanidadas
La estructura condicional anidada es La estructura condicional anidada es utilizada cuando dentro de una condición utilizada cuando dentro de una condición existe otra.existe otra.
Ejemplo: Es hombre o mujer?, si es Ejemplo: Es hombre o mujer?, si es mujer cuantos hijos tiene?, si es hombre, mujer cuantos hijos tiene?, si es hombre, cuanto años tiene?.cuanto años tiene?.
EJEMPLO
<html><html> <head><head> </head></head> <body><body> <script language="javascript"><script language="javascript"> var num1,num2,num3;var num1,num2,num3; num1=prompt('Ingrese 1er. numero:','');num1=prompt('Ingrese 1er. numero:',''); num2=prompt('Ingrese 2do. numero:','');num2=prompt('Ingrese 2do. numero:',''); num3=prompt('Ingrese 3er. numero:','');num3=prompt('Ingrese 3er. numero:',''); //Convertimos los 3 string en enteros//Convertimos los 3 string en enteros num1=parseInt(num1);num1=parseInt(num1); num2=parseInt(num2);num2=parseInt(num2); num3=parseInt(num3);num3=parseInt(num3); if (num1>num2)if (num1>num2) {{ document.write(num1);document.write(num1); }} elseelse {{ if (num2>num3)if (num2>num3) {{ document.write(num2);document.write(num2); }} elseelse {{ document.write(num3);document.write(num3); }} }} </script></script> </body></body> </html></html>
Operadores lógicos && (y) en las Operadores lógicos && (y) en las estructuras condicionalesestructuras condicionales
Estos operadores lógicos se emplean cuando en una estructura Estos operadores lógicos se emplean cuando en una estructura condicional se disponen o hay dos condiciones.condicional se disponen o hay dos condiciones.
Cuando este operador se usa, las dos condiciones deben Cuando este operador se usa, las dos condiciones deben ser verdaderas para que el resultado de la condición de como ser verdaderas para que el resultado de la condición de como resultado verdadero también y la solución del problema pueda resultado verdadero también y la solución del problema pueda continuar por el camino verdadero de la estructura condicional.continuar por el camino verdadero de la estructura condicional.
Los operadores lógicos son de gran ayuda, ya que Los operadores lógicos son de gran ayuda, ya que permiten que la resolución del problema sea más corta y permiten que la resolución del problema sea más corta y comprensible.comprensible.
EJEMPLO
<html><html> <head><head> </head></head> <body><body> <script language="javascript"><script language="javascript"> var num1,num2,num3;var num1,num2,num3; num1=prompt('Ingrese primer número:','');num1=prompt('Ingrese primer número:',''); num2=prompt('Ingrese segundo número:','');num2=prompt('Ingrese segundo número:',''); num3=prompt('Ingrese tercer número:','');num3=prompt('Ingrese tercer número:',''); num1=parseInt(num1);num1=parseInt(num1); num2=parseInt(num2);num2=parseInt(num2); num3=parseInt(num3);num3=parseInt(num3); if (num1<10 && num2<10 && num3<10)if (num1<10 && num2<10 && num3<10) {{ document.write('todos los numeros son menores a 10');document.write('todos los numeros son menores a 10'); }} elseelse {{ if (num1>10 && num2<10 && num3>10)if (num1>10 && num2<10 && num3>10) {{ document.write('el segundo numero es menor que 10'); document.write('el segundo numero es menor que 10'); }} elseelse {{ if (num1>10 && num2>10 && num3<10)if (num1>10 && num2>10 && num3<10) {{ document.write('el tercer numero es menor que 10'); document.write('el tercer numero es menor que 10'); }} elseelse {{ document.write('todos los numeros son mayores que 10');document.write('todos los numeros son mayores que 10'); }} }} }} </script></script> </body></body> </html></html>
Operadores lógicos || (o) en las Operadores lógicos || (o) en las estructuras condicionales.estructuras condicionales.
Representado con la letra “O”, indica si la condicipón 1 es Representado con la letra “O”, indica si la condicipón 1 es verdader la 2 también es verdadera., para luego verdader la 2 también es verdadera., para luego ejecutar esta misma rama.ejecutar esta misma rama.
Cuando en un problema se vinculan dos o más Cuando en un problema se vinculan dos o más operadores “O”, solo basta con que una de las dos sea operadores “O”, solo basta con que una de las dos sea verdadera para que la otra también lo sea y el verdadera para que la otra también lo sea y el resultado de la condición compuesta es verdadero.resultado de la condición compuesta es verdadero.
EJEMPLO
<script language="javascript"><script language="javascript"> var num1,num2,num3;var num1,num2,num3; num1=prompt('Ingrese primer numero:','');num1=prompt('Ingrese primer numero:',''); num2=prompt('Ingrese segundo numero:','');num2=prompt('Ingrese segundo numero:',''); num3=prompt('Ingrese tercer numero:','');num3=prompt('Ingrese tercer numero:',''); num1=parseInt(num1);num1=parseInt(num1); num2=parseInt(num2);num2=parseInt(num2); num3=parseInt(num3);num3=parseInt(num3); if (num1<10 || num2<10 || num3<10){if (num1<10 || num2<10 || num3<10){ document.write('todos los números son document.write('todos los números son
menores que 10.');}menores que 10.');} </script></script>
ESTRUCTURAS SWITCHESTRUCTURAS SWITCH
La instrucción switch es una alternativa para remplazar La instrucción switch es una alternativa para remplazar los if y los else if. los if y los else if.
switch nos brinda una forma mas ordenanda a la hora de switch nos brinda una forma mas ordenanda a la hora de programarprogramar
Divide las condiciones en casos.Divide las condiciones en casos.
Sintaxis: Sintaxis:
Switch(opcion que elija)Switch(opcion que elija)
Case (opcion que elija) : codigo…;Case (opcion que elija) : codigo…;
Break; //rompe el caso, se sale del switch.Break; //rompe el caso, se sale del switch.
Default: (mensaje para verificar opcion). Default: (mensaje para verificar opcion). EJEMPLO
html>html> <head><head> <title>Problema</title><title>Problema</title> </head></head> <body><body>
<script language="javascript"><script language="javascript"> alert("digite 1. casa 2. mesa 3. perro 4. gato")alert("digite 1. casa 2. mesa 3. perro 4. gato") var op = prompt("entre la opcion:", " ");var op = prompt("entre la opcion:", " "); var op = parseInt (op);var op = parseInt (op); switch(op)switch(op) {{ case 1: alert("home");case 1: alert("home"); break;break; case 2: alert("table");case 2: alert("table"); break;break; case 3: alert("dog");case 3: alert("dog"); break;break; case 4: alert("cat");case 4: alert("cat"); break;break; default:alert("numero no valido, ingrese un numero de 1 a 4");default:alert("numero no valido, ingrese un numero de 1 a 4"); }} </script></script>
</body></body> </html></html>
Estructura repetitiva (while)Estructura repetitiva (while)
Son otro tipo de estructuras muy utilizadas y de igual importancia a las estructuras secuenciales y condicionales.
Su función principal es ejecutar cierto número de instrucciones varias veces.
Las principales características de esta ejecución es que se periten y un elemento “test” ubicado antes de cada repetición y hace q haya o no repetición.
Para que funcione debemos tener en cuenta la condición, si esta es verdadera se ejecutan las acciones que van dentro de las llaves después del while. Pero si es falsa continuará con la siguiente.
Si la condición es verdadera sabemos que se torna infinita, lo que indica que nunca terminará el programa
EJEMPLO
<script language="javascript"><script language="javascript"> var num;var num; num=11;num=11; while (num<=275){while (num<=275){ document.write(num);document.write(num); document.write('<br>');document.write('<br>'); num=num+11;}num=num+11;} </script></script>
Concepto de acumuladorConcepto de acumulador
Es un registro en donde se almacenan Es un registro en donde se almacenan los resultados lógicos y aritméticos los resultados lógicos y aritméticos intermedios. Es de gran ayuda, pues si intermedios. Es de gran ayuda, pues si no existiera, tendríamos que escribir los no existiera, tendríamos que escribir los resultados de cada operación para luego resultados de cada operación para luego ser utilizado.ser utilizado.
EJEMPLO
<script language="javascript"> <script language="javascript"> var cont=1,var suma=0,var altura;var cont=1,var suma=0,var altura; while (cont<=5)while (cont<=5) { altura=prompt('Ingrese su altura:',''); { altura=prompt('Ingrese su altura:',''); altura=parseInt(altura); altura=parseInt(altura); suma=suma+altura;suma=suma+altura; cont=cont+1;}cont=cont+1;} promedio=suma/2;promedio=suma/2; document.write("El promedio de las alturas es de: document.write("El promedio de las alturas es de:
"+promedio+"<br>");"+promedio+"<br>"); </script></script>
ESTRUCTURA REPETITIVA ESTRUCTURA REPETITIVA (DO/WHILE)(DO/WHILE)
Esta estructura repetitiva es utilizada Esta estructura repetitiva es utilizada cuando sabemos que la sentencia se cuando sabemos que la sentencia se ejecutara al menos una vez.ejecutara al menos una vez.
Sintaxis:Sintaxis:
do{ bloque de código}do{ bloque de código}
while (condición); while (condición);
ESTRUCTURA REPETITIVA ESTRUCTURA REPETITIVA (FOR)(FOR)
Esta estructura se usa cuando Esta estructura se usa cuando conocemos la cantidad de veces que conocemos la cantidad de veces que queremos que se ejecute la sentencia.queremos que se ejecute la sentencia.
Es muy empleada en ejercicios donde Es muy empleada en ejercicios donde conocemos de antemano la cantidad de conocemos de antemano la cantidad de veces que queremos que se repita la veces que queremos que se repita la ejecución del bloque de instrucciones.ejecución del bloque de instrucciones.
