A que te enseño JavaScript sin que sepas programar [Parte 2

A que te enseño JavaScript sin que sepas programar [Parte 2java

¿TE PERDISTE LA PRIMERA PARTE?

desarrollo

LINK

web

¡BIENVENIDOS!

En esta segunda parte vamos a avanzar y a meternos adentro de las estructuras de JavaScript, desde un punto de vista sencillo y básico, para ir avanzando de a poco con lo visto en la primera parte y poder complementar. Antes de continuar quiero aclarar a la gente que me estuvo mandando MP's sobre el "poco contenido" de la primera parte. Es que mi idea es NO ATURDIRLOS DE GOLPE con tanto codigo. Pienso que si hago un solo post con todo el contenido no todos van a verlo entero y tampoco es recomendable dedicarle tanto tiempo. PROGRAMAR LLEVA MUCHO TIEMPO. Lo mejor es dedicarle al aprendizaje en este post 1 o 2 horas al día y no mucho más. La idea es llevarlo de a poco y que se vaya entendiendo, se despejen dudas y se aprenda el contenido, que no sea solamente una cuestión de leer y entender. Sin más, comencemos!

Programacion


SOLUCIONES DE LAS TAREAS DE LA PARTE 1:

TAREA 1: Realizar un programa que muestre su nombre y su edad en una página HTML.

SOLUCION:

<html>
<head>
</head>
<body>
<script language="JavaScript">
var nombre="Juan";
var edad=10;
document.write(nombre);
document.write('<br>');
document.write(edad);
</script>
</body>
</html>


TAREA 2: Confeccionar una programa en JavaScript que defina e inicialice una variable real donde almacenar el sueldo de un operario y otra de tipo cadena de caracteres donde almacenaremos el nombre. Imprimir cada variable en una línea distinta en pantalla.

SOLUCION:

<html>
<head>
</head>
<body>
<script lenguaje="JavaScript">
var nombre;
var sueldo;

name= prompt("¿Cual es tu nombre?" );
sueld= prompt("Por favor ingrese su sueldo" );

document.write('Hola ');
document.write(name);
document.write('<br>');
document.write('Su sueldo es de $ ');
document.write(sueldo);
</script>
</body>
</html>


TAREA 3: Confeccionar un programa que permita cargar el nombre de un usuario y su mail por teclado. Mostrar posteriormente los datos en la página HTML.


SOLUCION:

<html>
<head>
</head>
<body>
<script lenguaje="JavaScript">
var user;
var mail;

user= prompt("Ingrese su usuario";
mail= prompt("Por favor ingrese su correo electronico";

document.write(' Los datos de su cuenta son los siguientes ');
document.write('<br>');
document.write('Usuario : ');
document.write(user);
document.write('<br>');
document.write('Correo electronico: ');
document.write(mail);
</script>
</body>
</html>


aprender

Estructuras secuenciales de programación.

Cuando en un problema sólo participan operaciones, entradas y salidas se la denomina estructura secuencial.
El problema de la tarea 2, donde se ingresa el nombre de una persona y su edad se trata de una estructura secuencial.

Ejemplo de otro algoritmo con estructura secuencial: Realizar la carga de dos números por teclado e imprimir su suma y su producto:


<html>
<head>
</head>
<body>
<script language="JavaScript">
var valor1;
var valor2;
valor1=prompt('Ingrese primer número:','');
valor2=prompt('Ingrese segundo número','');
var suma=parseInt(valor1)+parseInt(valor2);
var producto=valor1*valor2;
document.write('La suma es ');
document.write(suma);
document.write('<br>');
document.write('El producto es ');
document.write(producto);
</script>

</body>
</html>


Lo primero que debemos tener en cuenta es que si queremos que el operador (+) sume los contenidos de los valores numéricos ingresados por teclado, debemos llamar a la función parseInt y pasarle como parámetro las variables valor1 y valor2 sucesivamente. Con esto logramos que el operador más, sume las variables como enteros y no como cadenas de caracteres. Si por ejemplo sumamos 1 + 1 sin utilizar la función parseInt el resultado será 11 en lugar de 2, ya que el operador + concatena las dos cadenas. En JavaScript, como no podemos indicarle de qué tipo es la variable, requiere mucho más cuidado cuando operamos con sus contenidos. Nosotros no podemos indicarle que "valor1" y "valor2" son números en vez de letras, por eso hay que tener cuidado. Cuando empleamos el operador (*) para el producto, ya no es obligatorio utilizar la función parseInt (es decir, sólo para el operador + debemos utilizarla).

El "parseo" (o Parcing) es el proceso de analizar una secuencia de símbolos a fin de determinar su estructura gramatical con respecto a una gramática formal dada. Formalmente es llamado "análisis de sintaxis". Un parseador (parser) es un programa de computación que lleva a cabo esta tarea. En Criollo, el "parseo" de una variable va a convertir el contenido en un dato con el que se puede operar.

Este código que vimos mas arriba es secuencial ya que ingresamos dos valores por teclado, luego hacemos dos operaciones y por último mostramos los resultados.

Javascript

Estructuras condicionales simples.

No todos los problemas pueden resolverse empleando estructuras secuenciales. Cuando hay que tomar una decisión aparecen las estructuras condicionales. En nuestra vida diaria se nos presentan situaciones donde debemos decidir. ¿Elijo la carrera A o la carrera B ?
¿Me pongo este pantalón? ¿Entro a Taringa! o a Poringa!? (esa es complicada), Para ir al trabajo, ¿elijo el camino A o el camino B? Al cursar una carrera, ¿elijo el turno mañana, tarde o noche?

Por supuesto que en un problema se combinan estructuras secuenciales y condicionales. Cuando se presenta la elección tenemos la opción de realizar una actividad o no realizarla. En una estructura CONDICIONAL SIMPLE por el camino del verdadero hay actividades y por el camino del falso no hay actividades. Por el camino del verdadero pueden existir varias operaciones, entradas y salidas, inclusive ya veremos que puede haber otras estructuras condicionales.

Ejemplo: Realizar la carga de una nota de un alumno. Mostrar un mensaje que aprobó si tiene una nota mayor o igual a 4:


<html>
<head>
</head>
<body>
<script language="javascript">
var nombre;
var nota;
nombre=prompt('Ingrese nombre:','');
nota=prompt('Ingrese su nota:','');
if (nota>=4)
{
document.write(nombre+' esta aprobado con un '+nota);
}

</script>

</body>
</html>

Aparece la instrucción if en el lenguaje JavaScript. La condición debe ir entre paréntesis (nota>=4). Si la condición se verifica verdadera (o sea, la nota es mayor a 4) se ejecuta todas las instrucciones que se encuentran encerradas entre las llaves de apertura ({) y cerrado (}) seguidas al if. Para disponer condiciones en un if podemos utilizar alguno de los siguientes operadores:

> (mayor), >= (mayor o igual), < (menor), <= (menor o igual), != (distinto), == (igual)

Siempre debemos tener en cuenta que en la condición del if deben intervenir una variable, un operador relacional y otra variable o valor fijo. Otra cosa que hemos incorporado es el operador + para cadenas de caracteres:

document.write(nombre+' esta aprobado con un '+nota);

Con esto hacemos más corto la cantidad de líneas de nuestro programa, recordemos que veníamos haciéndolo de la siguiente forma:

document.write(nombre);
document.write(' esta aprobado con un ');
document.write(nota);


tutorial

Estructura Condicional Compuesta

Cuando se presenta la elección tenemos la opción de realizar una actividad u otra. Es decir 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.

Ejemplo: Realizar un programa que lea dos números distintos y muestre el mayor de ellos:


<html>
<head>
</head>
<body>
<script language="javascript">
var num1,num2;
num1=prompt('Ingrese el primer número:','');
num2=prompt('Ingrese el segundo número:','');
num1=parseInt(num1);
num2=parseInt(num2);
if (num1>num2)
{
document.write('el mayor es '+num1);
}
else
{
document.write('el mayor es '+num2);
}

</script>

</body>
</html>

La función prompt retorna un string por lo que debemos convertirlo a entero cuando queremos saber cual de los dos valores es mayor numéricamente (recuerden que las variables pueden contener tanto letras como numeros, por eso hay que "parsear" para poder operar después) En el lenguaje JavaScript una variable puede ir cambiando el tipo de dato que almacena a lo largo de la ejecución del programa. Más adelante veremos qué sucede cuando preguntamos cuál de dos string es mayor.
Estamos en presencia de una ESTRUCTURA CONDICIONAL COMPUESTA ya que tenemos actividades por la rama del verdadero y del falso. La estructura condicional compuesta tiene la siguiente codificación:


if (<condición>
{
<Instruccion(es)>
}
else
{
<Instruccion(es)>
}


Es igual que la estructura condicional simple salvo que aparece la palabra clave “else” y posteriormente un bloque { } con una o varias instrucciones. Si la condición del if es verdadera se ejecuta el bloque que aparece después de la condición, en caso que la condición resulte falsa se ejecuta la instrucción o bloque de instrucciones que indicamos después del else.

A que te enseño JavaScript sin que sepas programar [Parte 2

Decimos que una estructura condicional es anidada cuando por la rama del verdadero o el falso de una estructura condicional hay otra estructura condicional metida.

Ejemplo: Confeccionar un programa que pida por teclado tres notas de un alumno, calcule el promedio e imprima alguno de estos mensajes:

Si el promedio es >=7 (mayor o igual a 7) mostrar "Promocionado".
Si el promedio es >=4 y <7 (mayor o igual que 4 y menor que 7) mostrar "Regular".
Si el promedio es <4 (menor que 4) mostrar "Reprobado".

(* acá el código ya se extiende un poco, así que lo que voy a hacer es poner comentarios (texto al lado del símbolo "//" para que se vaya entendiendo mejor lo que hace el código y no nos vayamos perdiendo. Esto es recomendable hacerlo para no tener que andar buscando después entre tanto código y créanme, se va a extender mucho más)

Solución:


<html>
<head>
</head>
<body>

<script language="javascript">

//Declaramos las 3 variables de las notas

var nota1,nota2,nota3;

//el usuario ingresa las notas del alumno

nota1=prompt('Ingrese 1ra. nota:','');
nota2=prompt('Ingrese 2da. nota:','');
nota3=prompt('Ingrese 3ra. nota:','');

//Convertimos (o parseamos) los 3 string en enteros

nota1=parseInt(nota1);
nota2=parseInt(nota2);
nota3=parseInt(nota3);

//Declaramos la variable que vamos a usar para calcular el promedio

var pro;
pro=(nota1+nota2+nota3)/3;

//Declaramos las condiciones que se nos pidieron

if (pro>=7)
{
document.write('promocionado');
}
else
{
if (pro>=4)
{
document.write('regular');
}
else
{
document.write('reprobado');
}
}

</script>


</body>
</html>

Analicemos esto que hicimos mas detalladamente por parte, porque te pegaste flor de perdida.

Primero Se ingresan tres string por teclado que representan las notas de un alumno, se transformas a variables enteras y se obtiene el promedio sumando los tres valores y dividiendo por 3 dicho resultado. Primeramente preguntamos si el promedio es superior o igual a 7, en caso afirmativo por la rama del verdadero de la estructura condicional mostramos un mensaje que indique 'Promocionado' (con comillas indicamos un texto que debe imprimirse en pantalla). En caso que la condición nos de falso, por la rama del falso aparece otra estructura condicional, porque todavía debemos averiguar si el promedio del alumno es superior/ igual a cuatro o inferior a cuatro.

java

Volviendo al tema de los comentarios, y como comentario rápido (valga la redundancia), en JavaScript los hacemos disponiendo dos barras previas al comentario:

//Ejemplo de un comentario

Si queremos disponer varias líneas de comentarios tenemos como alternativa:

/*
linea de comentario 1.
linea de comentario 2.
etc.
*/


Es decir encerramos el bloque con los caracteres /* */

desarrollo

¡NO TE DEJO TAREA!

En cambio de dejarte ejercicios para que practiques como en el post anterior, experimenta con el código que expusimos en este post. Agregarle cosas, sacarle cosas, así vas viendo como funciona cada parte del código, y TOMATE TU TIEMPO. Agarra el código un rato que tengas libre, después dejalo y volves al rato o al otro día. Tenes una semana para pavear. Próximo tema: Operadores Lógicos en estructuras condicionales.

MUCHAS GRACIAS A LA BANDA CREEDENCE CLEARWATER REVIVAL LA CUAL ME ACOMPAÑO CON SU "GREATEST HITS" DURANTE EL PROCESO DE ARMADO DEL POST!
(?)


web

28 comentarios - A que te enseño JavaScript sin que sepas programar [Parte 2

@Jrono +1
A favs de una, todo suma.
@Pache90
no anda la parte 1, corregí el link por favor
@Isaac039
muy interesante la información gracias
@EL_TIMBERO +1
QUE BUEN AVATAR, HEIL HITLER
@vago_metal
#0000BF">gracias dsps lo leo bien!! +10!!!excelente post
@jbrillada +1
Buena loco!!!! Excelente producción!
@nymph88
Esperando la tercera parte!
@kawaiipeach
cuando vuelva de la facu me pongo a practicar
@kawaiipeach
profe, en el primer ejemplo, por que el código está entre los &lt;head&gt; &lt;/head&gt; y no entre los &lt;body&gt; &lt;/body&gt;? espero se entienda la pregunta
@Ex_Diego9984 -1
kawaiipeach dijo:profe, en el primer ejemplo, por que el código está entre los &lt;head&gt; &lt;/head&gt; y no entre los &lt;body&gt; &lt;/body&gt;? espero se entienda la pregunta

histerica detected...
@kawaiipeach
Ex_Diego9984 dijo:
kawaiipeach dijo:profe, en el primer ejemplo, por que el código está entre los &lt;head&gt; &lt;/head&gt; y no entre los &lt;body&gt; &lt;/body&gt;? espero se entienda la pregunta

histerica detected...


pregunto porque no se cual es la diferencia nomas
@centauro17
amigo ahora te sigo es mejor pa estar siempre pendiente de tus buenos aportes menos mal que dentre y mire tu perfil me encontre con la sorpresa que ya estaba subida esta parte 2 y la tres cuando lo pueda practicar te aviso como me fue suerte y muchas gracias tambien recomendado
@centauro17
10 por esta segunda parte muchas gracias por compartir suerte y ten una estupenda semana
@andresanpj
rebuena explicacion +10 hermano
@alejo_8
toma +10 así llegas a los 100 xd
@Lukkest
Buen aporte! Recomendado!
Javascript
@fubadi
El link de la parte uno lleva a la home de Taringa