Ir al contenido principal

Estructuras condicionales simples en JavaScript

Antes de empezar con las estructuras condicionales nos familiarizaremos con los operadores que podemos utilizar. Estos operadores nos servirán para comparar dos valores dentro de las estructuras condicionales y sirven tan sólo para números:

>    mayor
>=  mayor o igual
<    menor
<=  menor o igual
!=   distinto
==  igual

Además de éstos operadores tenemos los operadores lógicos:

&& equivale a y
||      equivale a o

No os preocupéis si aun no entendéis alguna cosa, la mayoría los veremos en ejemplos más adelante y si no siempre podéis comentar con vuestras preguntas o enviar un mail desde el link de contacto que hay en la barra de menú arriba en la página.
Ahora empecemos con las estructuras condicionales. Hay tres tipos de estructuras condicionales: las simples, las compuestas y las compuestas anidadas. Primero veamos la estructura general de una condicional simple:


if (condición) {
Comandos
}

Vemos que toda estructura condicional empieza con if (si) seguido de la condición entre paréntesis (). Si la condición se cumple entonces se ejecutara lo que quede encerrado entre los signos {}, los comandos. Los signos {} marcan el inicio y el fin de los comandos en una estructura condicional. Veamos un ejemplo:

Crea un programa en el que se pueda insertar la nota de un alumno y te diga si éste está aprobado o suspendido:

var nota;
nota=prompt('Nota del alumno','');
if (nota>=5)
{
alert("El alumno ha aprobado con un "+nota)
}

Ahora analicemos el código línea por línea:

var nota;
nota=prompt('Nota del alumno','');


Estos dos comandos ya los conocemos, el primero sirve para definir nota como una variable y el segundo lo que hace es crear una entrada de datos por teclado con el comando prompt y luego almacena ésta información en la variable ya definida nota.

if (nota>=5)

Aquí vemos el comando if seguido de la condición. La condición como podemos ver está entre paréntesis y lo que hace es comparar la variable nota con el numero 5 utilizando el operador >= (mayor o igual). Para que esto se entienda mejor tratemos de traducir lo que ésta línea nos dice:

if (nota>=5)
Si la nota és mayor o igual a 5

 {
alert("El alumno ha aprobado con un "+nota)
}

El código ahora empieza con el signo {. Como hemos dicho antes lo que este signo nos marca es el inicio de los comandos en una estructura condicional.
En la siguiente línea vemos el comando alert el cual ya hemos visto en ocasiones anteriores. Recordemos que sirve para mostrar datos por pantalla en una ventana. Dentro de éste comando vemos algo nuevo, el signo + seguido de la variable. Hacemos esto para hacer que el comando alert pueda ejecutar una cadena de texto
 Y a la vez mostrar por pantalla el resultado de la variable nota. A esto se le llama concatenar.
Ahora veamos traducido lo que todo el programa haría tal y como hemos hecho antes.

if (nota>=5)
{
alert("El alumno ha aprobado con un "+nota)
}

Si la nota es mayor o igual a 5
Di que el alumno ha aprobado con X nota.

Ahora veamos el código a la práctica:



Al clicar se os pedirá que insertéis una nota (del 0 al 10). Si la nota es igual o superior a 5 se mostrará una segunda ventana justo después que dirá que el alumno ha aprobado. En caso de que la nota sea 4 o menor no se mostrará esta segunda ventana.


                                       

Comentarios

Entradas populares de este blog

Estructura switch en JavaScript

La estructura switch nos sirve para cuando queremos que un programa haga algo muy concreto dependiendo del valor que tenga una variable. La estructura general es la siguiente:   switch ( variable ) { case X : comandos break; case Y : comandos break; case Z : comandos break; default: comandos break; } Y ahora veamos un ejemplo de un programa en el que podamos usar la estructura switch, por ejemplo, queremos que al insertar un número del 1 al 5 el programa nos lo escriba con letras: var numero; numero=prompt('Inserte un número del 1 al 5',''); numero=parseInt(numero); switch (numero) { case 1: alert('uno'); break; case 2: alert('dos'); break; case 3: alert('tres'); break; case 4: alert('cuatro'); break; case 5: alert('cinco'); break; default: alert('El número debe estar entre el 1 y el 5!'); break; } Lo que la estructura switch hace es comparar la variable numero con cada caso que nosot...

Primeros pasos para crear una pequeña web

Ahora que tenemos unos conocimientos basicos tanto de html como de javascript, podemos hacer una pequeña web con un proposito concreto. Haremos un ejemplo ficticio en el que hacemos una página para una protectora de animales, de forma que la gente podrá enviar solicitudes fácilmente para ayudar como voluntarios. Para diseñarla primero debemos seguir unos pasos: Definir el propósito de nuestra web: Esta pequeña web estará orientada a que la gente pueda contactar con nosotros fácilmente a la vez que demos la información necesaria de una forma clara. Definir cual sera el contenido: Contendrá una parte de información y un formulario de contacto. La información que proporcionaremos a los voluntarios potenciales será el lugar en el que pueden ayudar y los horarios de asistencia así como información sobre los trabajos que desarrollaran a lo largo de esas horas. En el formulario pediremos el nombre del voluntario, su edad y la experiencia. Decidir cómo la presentaremos: Ésta p...

Estructura y comandos básicos de un programa en JavaScript

Todo programa en JavaScript ha de seguir una serie de pautas antes de poder ejecutarse. Para explicar lo mas esencial de este lenguaje de programación empezaremos por un programa de lo más sencillo y lo explicaremos línea por línea. El programa que viene a continuación no es muy útil, pero irá bien para introducirse en este lenguaje: <Script language="javascript"> docmument.write("hello world"); </Script> Y ahora expliquémoslo: <Script language="javascript"> Esta primera línea lo único que marca es que, dentro de una página hecha en HTML vamos a insertar un código en JavaScript. docmument.write="hello world"; La segunda es el primero comando en JavaScript que veremos document.write. La función es simplemente la de mostrar un texto o una variable en pantalla. Si lo que queremos mostrar es un texto tendremos que poner las comillas (" ") en cambio no hacen falta si lo que queremos es mostrar una variable....