Estructura while en JavaScript

Esta estructura tiene similitudes con la estructura if, el rasgo distintivo que tiene es que la estructura tiene la capacidad de repetirse una y otra vez mientras queramos. Empecemos de nuevo por lo general:

while (condición) { comandos }

Lo que el comando while dice es que mientras la condición se cumpla los comandos se ejecutaran una y otra vez. Ahora veamos qué tiene de útil esto, vamos a hacer un programa que nos escriba los diez primeros números de la tabla del 13 por pantalla:

var resultado, multiplicador; x=0; multiplicador=0; while (multiplicador<10) { resultado=multiplicador * 13; document.write(multiplicador+"x13="+resultado); document.write(' '); multiplicador=multiplicador+1; }

while (multiplicador<10)
multiplicador=multiplicador+1;

Las líneas clave aquí son estas dos, como podemos ver en el código los comandos dentro del bucle while se van repitiendo una y otra vez siempre que la variable multiplicador sea menor que 10. La variable multiplicador además la utilizamos para multiplicarla por 13 cada vez para que nos dé un resultado que imprimimos por pantalla. Cuando el bucle llegue a 9 (teniendo en cuenta que hemos empezado en el número 0 se habrá ejecutado ya 10 veces) entonces parará y podremos ver tranquilamente el resultado por pantalla.

document.write(multiplicador+"x13="+resultado);

Recordemos que el comando document.write imprime por pantalla a diferencia del comando alert, que nos mostraba una ventana con el resultado.

document.write('<br>');
Finalmente, esta linea nos sirve para que nuestro documento ejecute la etiqueta de html <br> dejando asi cada operación en una línea distinta haciendo que se pueda ver con mucha más claridad todo.
Para ver lo que se nos muestra clicad en el siguiente botón:

(puede que no funcione ya que me temo que blogger bloquea el código por alguna razón así que os dejo un link a una web que subí para poder ver el código ejecutado, el código se verá en una ventana nueva).

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 nosotros queramos ponerle, en nuestro idioma sería algo así:

En caso de que la variable sea 1 entonces diremos "uno".
En caso de que la variable sea 2 entonces diremos "dos".
[...]
En caso de la variable no coincida con ningún caso entonces diremos "El número debe estar entre el 1 y el 5!".

En el código anterior además vemos un comando nuevo, parseInt(numero). Esto lo que hace es que el programa trate la variable numero como un valor numérico entero y no como una cadena de texto. Si no hiciésemos esto tendríamos que poner el número de cada caso entre "" de esta manera:

case "x": comandos

El resultado del programa anterior es este:

Estructuras condicionales compuestas y anidadas en JavaScript

Una vez hemos aprendido cómo funcionan las estructuras condicionales simples es muy fácil aprender el funcionamiento de las estructuras condicionales compuestas. De nuevo, veamos un ejemplo de cómo es su estructura general:

if (condición) { comandos }   else   {   comandos   }

La primera parte de la estructura la conocemos ya, lo único que vemos de nuevo es else. Lo que else marca es que en caso de que no se cumpla la condición se ejecuten otra serie de comandos distinta. Veamos un ejemplo de cómo usarlo:

Crea un programa en el que se inserten dos números y él elija cual es el mayor de los dos:

var primero; var segundo; numero1=prompt('Inserta el primer numero',''); numero2=prompt('Inserta el segundo numero,''); if (numero1>numero2) { alert(numero1+" es mayor que "+numero2); } else { alert(numero2+" es mayor que "+numero1); }

El programa nos dirá si el primer número es mayor que el segundo, en caso de que no sea así nos dirá que el segundo número era mayor que el primero. Aquí tenéis el resultado del programa anterior:


Ahora que hemos visto las estructuras condicionales compuestas veamos la estructura de una condicional anidada:

if (condición) { comandos }   else   {     if (condición)      {      comandos      }       else       {        if (condición)         {         comandos         }       }     }

Vemos que se crea una condición, si esta no se cumple se sigue a otra condición y así sucesivamente hasta que nosotros queramos que acabe el programa. Ahora veámosla con un ejemplo:

Crea un programa en el que se inserten 3 números y te muestre el mayor de los tres.

var primero,segundo,tercero; primero=prompt('Primer número',''); segundo=prompt('segundo número',''); tercero=prompt('tercer número',''); if (primero>segundo && primero>tercero)   {   alert(primero+" es mayor que "+segundo+" y "+tercero);   }   else     {     if (tercero>segundo && tercero>primero)       {       alert(tercero+" es mayor que "+segundo+" y "+primero);       }         else         {         alert(segundo+" es mayor que "+tercero+" y "+primero);         }     }

He usado el operador lógico &&, éste lo que hace es que se tenga que cumplir más de una condición para que se ejecuten los comandos de la estructura if:

if (primero>segundo && primero>tercero)

Aquí la variable primero tiene que ser más grande que segundo y además la misma variable tiene que ser mayor que tercero para que se cumpla la condición. A continuación dejo el resultado del programa anterior:

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.

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. El punto y coma (;) se deberá poner al final de cada comando en JavaScript.

</Script>

La última línea simplemente marca el fin del código en JavaScript. Como podemos ver el programa no es útil ya que lo único que hace es mostrar por pantalla hello world. Aquí podemos ver el resultado:


Ahora para ver bien cómo las variables funcionan pondremos un ejemplo de un programa que cumpla la misma función, pero en este caso usaremos una variable. Veamos como lo haríamos en éste caso.

<Script language="javascript"> var saludo; saludo="hello world"; docmument.write(saludo); </Script>

En éste código vemos algunas líneas nuevas:

var saludo;

Ésta línea sirve tan sólo para marcar que a partir de ahora saludo será una variable.

saludo="hello world";

Ahora vemos como saludo pasa a tener el valor de hello world almacenado.

docmument.write(saludo);

Ahora imprimimos en pantalla la variable saludo. Como se trata de una variable no hace falta ponerle las comillas (" "). Y como ahora veremos el resultado será el mismo:


Ahora aclararé que las variables no necesitan las comillas (" ") tal y como he dicho antes, pero si lo que queremos es mostrar la palabra saludo podríamos ponerla entre comillas de ésta manera

document.write("saludo");

Así el programa no trataría a la palabra saludo como una variable sino como una cadena de texto.

Para finalizar con esta pequeña introducción os mostraré como entrar datos desde el teclado a un programa de javascript. Primero veremos la sintaxis del comando:

<script language="javascript"> prompt('Texto a mostrar','Texto a mostrar en el cuadro de texto'); </script>

más adelante en el tutorial se explicará cómo ejecutar javascript usando un botón como ese.

Pero haciendo eso los datos no van a parar a ningún lado así que lo que tenemos que hacer es que lo que insertemos por teclado quede almacenado dentro de una variable. Ésto lo conseguimos con lo siguiente:

datos=prompt('Texto a mostrar','Texto a mostrar en el cuadro de texto');

Ahora los datos quedaran almacenados dentro de la variable a la que hemos llamado datos y podemos hacer un pequeño programa para demostrar que realmente los datos han sido procesados. Ésto es muy sencillo:

<script language="javascript"> datos=prompt('Texto a mostrar','Texto a mostrar en el cuadro de texto'); alert(datos); </script>

Y por último en esta primera lección aclarar que como podéis ver, alert lo único que hace es mostrar una ventana con la información que queramos, el este caso le hemos dicho que nos muestre el valor de la variable datos que antes hemos definido. Tambien he de decir que he puesto los dos comandos por separado en dos botones distintos para que se distinga bien lo que está pasando, primero ejecutamos uno y luego el otro.

Conceptos básicos de JavaScript

Antes de empezar a programar nada debemos tener una serie de conceptos básicos que nos servirán a lo largo de toda la lección de JavaScript:

Algoritmo:
Son los pasos que sigue un programa para resolver el problema que se nos plantea. Por ejemplo, si queremos un programa que nos diga si somos mayores o menores de edad, después de insertar los datos a través de un formulario por ejemplo, la manera en que nuestro algoritmo actuaria sería algo así:

Recibir edad (recibir la información del formulario que hemos puesto como ejemplo)
Si edad < 18 (crear una condición) Eres menor de edad Sino Eres mayor de edad (Y devolvemos el resultado.)

Un conjunto de algoritmos da como resultado un programa.

Variable:
Una variable es como un almacén, allí puedes guardar la información. Las variables hay que declararlas de manera que tenemos distintos tipos de variables. El concepto de variable se entenderá mejor a la práctica, por ejemplo declaramos que la variable X, la variable Z y la variable Y son de tipo numérico (almacenarán números), así que ahora a podemos darles un valor. El algoritmo de un programa en el que podríamos usar estas tres variables sería por ejemplo el siguiente:

Elegir un valor para X
Elegir un valor para Y
Z=X+Y
Retornar el resultado de Z


De esta manera definiendo las variables X e Y obtendríamos su suma. El valor de esta suma queda almacenado en la variable Z que luego mostraríamos por pantalla. Las variables en JavaScript pueden ser de cadenas de texto, numéricas o de tipo verdadero/falso.

Función:
Éste es un término que veremos más adelante mejor explicado, pero como introducción diremos que es un proceso (puede ser por ejemplo un cálculo) que usamos varias veces y para no tener que repetir cada vez el código creamos el código una vez como función y luego la podemos llamar siempre que queramos.

Ejemplo de un formulario en HTML

Supongamos que queremos crear un formulario de registro de usuarios y pedimos cierta información. Os dejo un ejemplo de cómo podría hacerse ésto y más abajo el código del formulario.

Formulario Usuario:                  Contraseña:             Repita Contraseña:  Seleccione su país:    Argentina España México Seleccione su nivel de estudios: Sin estudios Bachillerato/COU Universitarios Seleccione los idiomas que conoce: Alemán Inglés Francés

Código <form action="pagina2.php" method="post"> Usuario: <input type="text" name="usuario"><br> Contraseña: <input type="password" name="contra"><br> Repita Contraseña: <input name="contra2" type="password"><br> Seleccione su país: <select name="pais"> <option value="1">Argentina</option> <option value="2">España</option> <option value="3">México</option> </select><br> Seleccione su nivel de estudios: <input type="radio" name="nivel" value="sin">Sin estudios<br> <input type="radio" name="nivel" value="bach">Bachillerato/COU<br> <input type="radio" name="nivel" value="uni">Universitarios<br> Seleccione los idiomas que conoce:<br> <input type="checkbox" name="ger"> Alemán<br> <input type="checkbox" name="eng"> Inglés<br> <input type="checkbox" name="fr"> Francés<br> <input type="submit" value="enviar datos">

Formularios en HTML

Ahora que hemos visto la estructura más fácil de un formulario hecho en html empezaremos a ver todas las posibilidades que se nos brindan. Empecemos viendo los cuadros de texto que podemos insertar:

<form> <input type="text"> <input type="password"> <textarea cols="15" rows="5">Aquí el texto</textarea> </form>

Aquí vemos tres tipos distintos de cuadros. El primero es el cuadro de texto que ya conocemos un post anterior al que podeis acceder clicando aquí. El segundo crea un campo de tipo password, lo que es muy útil cuando queremos hacer un formulario con usuario y contraseña por ejemplo ya que oculta los caracteres escritos. Finalmente tenemos un recuadro de tipo textarea, más apropiado para crear textos largos, en su interior vemos las propiedades rows y cols que sirven para marcar el número de filas y columnas respectivamente. El resultado:
 

Prueba a escribir en todos los campos para ver el resultado más claro. Aquí el texto

A veces en los formularios también tenemos que dar opciones predeterminadas a los usuarios, para esto existen los controles checkbox, radio y select. Veamos el código de todos antes de empezar con cada uno individualmente:

<form> <input type="checkbox" name="primera opcion"> <input type="checkbox" name="segunda opcion"> <input type="radio" name="ejemplo" value="1"> <input type="radio" name="ejemplo" value="2"> <select name="pais"> <option value="a">Argentina</option> <option value="e">España</option> <option value="m">México</option> </select> </form>

y como resultado:

Argentina España México

Analicemos el código por partes:

<input type="checkbox" name="primera opcion">

<input type="checkbox" name="segunda opcion">

En esta primera parte lo que vemos son dos cuadros en los que podemos marcar uno, dos, ambos o ninguno. El valor enviado al servidor se distingue por el parámetro name que le asignamoss al recuadro. Se enviara la información al servidor según las opciones que hayamos marcado.

<input type="radio" name="ejemplo" value="1">

<input type="radio" name="ejemplo" value="2">

En cambio en estos dos el parámetro name es el mismo, por eso tan sólo deja marcar una única opción. El servidor distinguirá cual hemos marcado según el parámetro value que hemos insertado en ambas opciones y que como podemos ver es distinto.

<select name="pais">

<option value="a">Argentina</option>

<option value="e">España</option>

<option value="m">México</option>

</select>

Finalmente hemos creado un cuadro de selección con un nombre que nos permitirá distinguirlo en caso de haber más cuadros en un mismo formulario. También se nos permitirá marcar único valor y al igual que radio el servidor lo distinguirá por el parámetro value que le hemos dado a cada país (a para Argentina, e para España y m para México).

Estructura básica de formularios en HTML

Los formularios son una parte esencial para crear páginas web dinámicas, pueden servirnos para crear chats, cuentas de usuario o cualquier cosa que se nos ocurra siempre que usemos algún otro lenguaje (como php o bases de datos de MySql). Primero empecemos con la estructura esencial en un formulario:

<form action="pag2.php" method="post"> <input type="text" name="nom" size="10> <input type="submit" value="send">

Y el resultado:

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

<form action="pag2.php" method="post">

form nos marca que es el inicio de un formulario, a esto le añadimos action y method. Action nos dice a que pagina se dirigirá la información del formulario al utilizar el botón de send. Ésta página será la que procese la información (pero esto lo veremos cuando empecemos con php, todavía no). Method nos dice la forma en que se enviarán los datos del formulario, normalmente se utiliza post como método enviándose así los datos con el cuerpo del formulario. Si utilizamos get los datos se envían con la cabecera (podremos verlos en la url al enviar el formulario).

<input type="text" name="nom" size="10>

En esta línea se nos presenta input y como parámetros type, name y size. Type nos indica lo que crearemos, en este caso text (un cuadro de texto). Name es importante más adelante para pedir la información del formulario. Size nos indica la cantidad de caracteres que se podrán visualizar, pero no indica el máximo que se podrán poner.

<input type="submit" value="send">

Finalmente aquí tenemos type="submit", éste sirve para definir el botón que servirá para el envío de la información a pag2.php tal y como hemos dicho antes. Value simplemente nos marca qué será lo que nos muestre el botón.

Tags más comunes en html

Como una segunda parte de la introducción a html pondré un listado de las etiquetas más comunes en html así como su función dentro de una página

<br>: Sirve para pasar a la siguiente linea, sería el equivalente a la tecla "enter" en html. No necesita cierre.

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Utilizados para confeccionar títulos, por ejemplo, un título importante irá entre las tags <h1> </h1>, un subtítulo entre las tags <h2> </h2> y así sucesivamente. El resultado es el siguiente:

<h1> Primer título </h1>

<em> y <strong>: Se usan para enfatizar un texto, el resultado es este:

Sin enfasis <strong>Con enfasis</strong>

<a>: Utilizado sobretodo para poner enlaces a una misma pagina o a otras páginas. • La estructura es <a href="dirección de la pagina">Texto a mostrar<a>. • Si agregamos target="_blank" la ventana se abrirá en una nueva pagina: <a href="dirección de la pagina" target="_blank">Texto a mostrar<a>. • También puede crearse un enlace a un correo electrónico con mailto: de la siguiente manera: <a href="mailto:correo electronico aqui">Texto a mostrar<a>
 

Código de ejemplo: <a href="skytablog.blogspot.com">Enlace a skytablog</a> Resultado: Enlace a skytablog

<img>: Utilizado para insertar imágenes. La estructura es <img src="url de la imagen">. No necesita cierre.

&nbsp: Html no acepta más de un espacio en blanco seguido, si quieres poner más deberás usar &nbsp para poner los espacios que quieras.

Estas son las etiquetas más necesarias dentro de una página web, seguramente mientras desarrolles la tuya necesites más, pero podrás conseguirlas simplemente consultando algún manual o buscándolas por internet.

Conceptos básicos de HTML

Ya que HTML es sencillo y a la vez esencial debemos dedicarle un tiempo (aunque tampoco demasiado) a aprender ciertos aspectos que realmente son los que usaremos usare este apartado simplemente para revisar los comandos de HTML más básicos y algunos aspectos a tener en cuenta, empezando por los aspectos a tener en cuenta.

• Primero: Para desarrollar html hace falta un editor de texto. (tal y como se ve en la imagen, el bloc de notas de windows ya va bien, pero cualquier editor de texto plano sirve).


• Segundo: La estructura básica de cualquier pagina hecha en html es la siguiente:

• Tercero (y ultimo): Casi todas las etiquetas van cerradas de la siguiente manera (aunque también puede verse en el ejemplo anterior):
< etiqueta > < / etiqueta >

Host con php y MySql gratis

Para empezar lo primero que tenemos que hacer es encontrar algún lugar donde subir nuestra web. Yo tardé días en encontrar un host decente que tuviese php y MySql (bases de datos), así que os ahorraré la búsqueda y os daré un par de opciones por donde empezar a hacer vuestras webs y a experimentar todo lo que se explique en éste blog.


Las webs son:
•http://www.000webhost.com/
•http://www.clawz.com/
Aunque personalmente recomiendo el primero, el segundo también debería ser válido ya que tiene ambas cosas: php (aunque un poco más limitado) y MySql. Aun así no debemos preocuparnos por el host todavía, más adelante explicaré su funcionamiento de una manera mucho más clara.

Presentación

Me presento: sólo era un aficionado a la informática cuando ya quería tener una web propia para hacer lo que quisiera con ella, pero como muchos, lo encontraba todo demasiado complicado como para poder planteármelo seriamente.

Finalmente, ahora que estudio la carrera de ingeniería informática me he atrevido a subir una web y a desarrollarla, pero no os imagináis la cantidad de problemas que podemos encontrar si no sabemos absolutamente nada sobre todo este "mundillo" de las webs personales, y no me refiero a una web en blogger, ¡que va!, aquí apenas tenemos libertad para hacer algo decente. Me refiero a desarrollar una web desde cero, empezando sin saber nada o sabiendo un poco de programación, sin saber administrar bases de datos pero en un host que nos proporcione unas ciertas herramientas (soporte para lenguajes de programación, bases de datos, etc.) para poder conseguirlo.

El objetivo de este blog es que aquellos que quieran desarrollar una web lo tengan fácil y claro y que puedan empezar a desarrollarla sin encontrarse todos los problemas y dificultades que supone meterse en algo completamente nuevo.