lunes, 25 de febrero de 2013

El widget tabs() con jQuery UI

 El widget tabs() nos servirá para convertir los párrafos en una sencilla zona de tabuladores. Bastará con definir una lista no oredenada y las divisiones con el contenido.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/ui-lightness/jquery-ui-1.10.1.custom.min.css" rel="stylesheet"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui-custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(inicio);
function inicio(){
    $("#generaciones").tabs();
}
</script>
<title>Tabuladores</title>
<style>
#generaciones{
    width:800px;
}
</style>
</head>

<body>
<div id="generaciones">
<ul>
<li><a href="#primera">Primera generación</a></li>
<li><a href="#segunda">Segunda generación</a></li>
<li><a href="#tercera">Tercera generación</a></li>
</ul>
    <div id="primera">
    <p>En la mitología clásica, Urano es el dios primordial del cielo. En la mitología griega era personificado como hijo y esposo de Gea, la Madre Tierra. Ambos fueron ancestros de la mayoría de los dioses griegos, pero ningún culto dirigido directamente a Urano sobrevivió hasta la época clásica,1 y el dios no aparece entre los temas comunes de la cerámica griega antigua. Sin embargo, la Tierra, el Cielo y Estigia podían unirse en una solemne invocación en la épica homérica.</p>
    <p>La mayoría de los griegos consideraban que Urano era un dios primordial (protogenos), y no le asignaban padres. Bajo la influencia de los filósofos, Cicerón afirma en De natura deorum que era descendiente de los antiguos dioses Éter y Hemera, el Aire y el Día. Según los himnos órficos, Urano era el hijo de la diosa de la noche, Nix.</p>
    </div>
    <div id="segunda">
    <p>En la mitología griega, los Titanes —masculino— y Titánides —femenino— eran una raza de poderosos dioses que gobernaron durante la legendaria edad de oro.</p>
    <p>Los Titanes fueron doce desde su primera aparición literaria, en la Teogonía de Hesíodo; aunque en su Biblioteca mitológica, Apolodoro añade un decimotercero, Dione, desdoblamiento de la titánide Tea. Estaban relacionados con diversos conceptos primordiales, algunos de los cuales simplemente se extrapolaban de sus nombres: el océano y la fructífera tierra, el Sol y la Luna, la memoria y la ley natural. Los doce Titanes de la primera generación fueron liderados por el más joven, Crono, quien derrocó a su padre Urano (‘Cielo’) a instancias de su madre, Gea (‘Tierra’).</p>
    </div>
   
    <div id="tercera">
    <p>En la mitología griega, los dioses olímpicos son los principales dioses del panteón griego, que moraban en la cima del monte Olimpo, el más alto de Grecia. Hubo, en diferentes épocas, catorce dioses diferentes reconocidos como olímpicos, aunque nunca más de doce a la vez. De ahí que a veces se haga referencia a ellos como los doce olímpicos, también conocidos como Dodekatheon.</p>
    <p>Los doce olímpicos ganaron su supremacía en el mundo de los dioses después de que Zeus llevara a sus hermanos a la victoria en la guerra contra los Titanes.</p>    </div>
    </div>
</body>
</html>
 



domingo, 24 de febrero de 2013

El widget menu



<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/ui-lightness/jquery-ui-1.10.1.custom.min.css" rel="stylesheet"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui-custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(inicio);
function inicio(){
    $("#menu").menu();
}
</script>
<title>Menu</title>
<style>
#menu{
    width:250px;   
}

</style>
</head>

<body>
<ul id="menu">
<li><a href="#">Primera generación</a>
    <ul>
    <li><a href="#">Gea</a></li>
    <li><a href="#">Eros</a></li>
    <li><a href="#">Tártaro</a></li>
    <li><a href="#">Urano</a></li>
    <li><a href="#">Titanes</a></li>
    <li><a href="#">Cíclopes</a></li>
    <li><a href="#">Hecatónquiros</a></li>
    </ul>
</li>
<li><a href="#">Segunda generación</a>
    <ul>
    <li><a href="#">Crono</a></li>
    <li><a href="#">Rea</a></li>
    <li><a href="#">Titanes</a></li>
    </ul>
</li>
<li><a href="#">Tercera generación</a>
    <ul>
    <li><a href="#">Zeus</a></li>
    <li><a href="#">Hera</a></li>
    <li><a href="#">Poseidón</a></li>
    <li><a href="#">Deméter</a></li> 
    <li><a href="#">Hestia</a></li> 
    <li><a href="#">Hades</a></li>
    <li><a href="#">Ares</a></li> 
    <li><a href="#">Hermes</a></li> 
    <li><a href="#">Hefesto</a></li> 
    <li><a href="#">Atenea</a></li> 
    <li><a href="#">Apolo</a></li> 
    <li><a href="#">Artemisa</a></li>
    </ul>
</li>
</ul>
</body>
</html>

El widget progressbar()

El widget  progress bar nos peritirá seguir un proceso de carga, aunque generalmente necesitamos relacionarlo con alguna función Ajax.


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/ui-lightness/jquery-ui-1.10.1.custom.min.css" rel="stylesheet"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui-custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(inicio);
function inicio(){
    //$("#barra").progressbar({value:41});
    var b = $("#barra");
    var e = $("#etiqueta");
   
     b.progressbar({
        value: false,
        change: function() {
                e.text( b.progressbar( "value" ) + "%" );
                },
        complete: function() {
                e.text( "Completo!" );
                }
        });
       
     function progreso() {
        var val = b.progressbar( "value" ) || 0;
        b.progressbar( "value", val + 1 );
        if ( val < 99 ) {
            setTimeout( progreso, 100 );
        }
    }
   
    setTimeout( progreso, 3000 );
}
</script>
<title>Progress</title>
 <style>
#etiqueta {
float: left;
margin-left: 50%;
margin-top: 5px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</style>
</head>

<body>
<div id="barra"><div id="etiqueta">Cargando...</div></div>
</body>
</html>

sábado, 23 de febrero de 2013

El widget Dialog de jQuery UI

El widget dialog() es bastante sencillo, pero poderooosooooo. Nos permitirá hacer ventanas de mensaje, sin que sean consideradas ventanas de diálogo o pop-ups. Con sus diferentes parámetros podemos dar opciones de confirmación y cancelación, asi como mostrar diferentes íconos. También podemos darle efectos de entrada y de salida.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/ui-lightness/jquery-ui-1.10.1.custom.min.css" rel="stylesheet"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui-custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(inicio);
function inicio(){
    //$("#mensaje").dialog( {show: {effect: "blind",duration: 1000},hide: {effect: "explode",duration: 1000}});
    /*$("#mensaje").dialog( {modal: true,
    height:280,
    width:500,
    buttons:{Continue: function() {
                       $( this ).dialog( "close" );
                       },
             Cancel: function() {
                       $( this ).dialog( "close" );
                       }
    }
    }); */
    $("#mensaje").dialog( {modal: true,
    height:280,
    width:500,
    buttons:{Ok: function() {
                       $( this ).dialog( "close" );
                       }
    }
    });
}
</script>
<title>Base de UI</title>
<style>
.centra{
    font-weight:bold;
    text-align:center;
}
</style>
</head>

<body>
<div id="mensaje" title="Advertencia">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 50px 0;"></span>La siguiente página contiene material real y explicito,
que podría afectar la sensibilidad
del espectador.</p><p class="centra">Se recomienda discreción.</p>
</div>

</body>
</html>

miércoles, 20 de febrero de 2013

La iteración rezisable en jQuery UI

Por media de esta iteración podemos cambiar el tamaño de una división, en tiempo de ejecución, arrastrando la esquina inferior izquierda.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/ui-lightness/jquery-ui-1.10.1.custom.min.css" rel="stylesheet"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui-custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(inicio);
function inicio(){
    $("#arrastrame").resizable();
    $("#sueltame").droppable({drop:onSuelta});
}
function onSuelta(){
    $("#sueltame").css("background-color", "#F60");
    $("#sueltame").text("Afrodita es la diosa del amor");
}
</script>
<title>Draggable</title>
<style>
#arrastrame{
    background-image:url(imagenes/afrodita160x196.jpg);
    background-repeat:no-repeat;
    background-size:100%;
    width:160px;
    height:196px;
    text-align:center;   
   
}
#sueltame{
    width:400px;
    height:400px;
    border:solid 1px black;
    background-color:pink;
    text-align:center;
    position:absolute;
    left:250px;
    top:50px;   
}
</style>
</head>

<body>
<div id="sueltame">Diosa del amor</div>
<div id="arrastrame">Arrástrame</div>

</body>
</html>

martes, 19 de febrero de 2013

El método ajax()

Para tener completo control en el envío y recepción de datos, podemos utilizar el método ajax(), el cual es más completo, pero al tener tantos parámetros (32 parámetros opcionales, algunos de los cuales ya están desactualizados) se recomienda mejor utilizar métodos como load(), post() o get(). Aqui se da un ejemplo de cómo utilizar los principales parámetros:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Val</title>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(inicio);
function inicio(){
    $("#popular").click(function(){
    onLeePoema("0")
    });
    $("#clasico").click(function(){
    onLeePoema("1")
    });
    $("#romantico").click(function(){
    onLeePoema("2")
    });
}
function onLeePoema(tipo){
    $.ajax({
        async:true,
        type:"POST",
        dataType:"html",
        contentType:"application/x-www-form-urlencoded",
        url:"poemaPOST.php",
        data:"poema="+tipo,
        beforeSend: inicioEnvio,
        success: llegadaEnvio,
        error: errorEnvio
    });
}
function inicioEnvio(){
    $("div").text("Inicio carga...");
}
function llegadaEnvio(datos){
    $("div").html(datos);
}   
function errorEnvio(datos){
    $("div").text("No se pudo, lo siento");
}
</script>
</head>
<body>
<button id="popular">Poema popular</button>
<button id="clasico">Poema clásico</button>
<button id="romantico">Poema romántico</button>
<div></div>
</body>
</html>


Curso completo: https://www.udemy.com/jquery-y-mobile/
Ejemplo: http://pacoarce.com/jQuery/ajax.html

lunes, 18 de febrero de 2013

El método POST para enviar parámetros desde jQuery

El método pos enviía la información por medio de los bloques Multipurpose Internet Mail Extensions o MIME  (en español "extensiones multipropósito de correo de internet") y en jQuery nunca guarda la información en el caché del navegador.

El primer parámetro que ncesitamos es la URL, posteriormente se envían los parámetros como si ffueran un objeto hecho al vuelo (con llaves) y porteriormente, y de forma opcional, tenemos una función de callback que se ejecuta scuando se termina la carga de nuestro archivo.


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>POST</title>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(inicio);
function inicio(){
    $("#popular").click(function(){ onLeePoema("0");});
    $("#clasico").click(function(){ onLeePoema("1");});
    $("#romantico").click(function(){ onLeePoema("2");});
}
function onLeePoema(tipo){
    $.post("poemaPOST.php",
        {
            poema:tipo
        },
        function(data, estatus){
        $("div").html(data);
    });
}
</script>
</head>
<body>
<button id="popular">Poema popular</button>
<button id="clasico">Poema clásico</button>
<button id="romantico">Poema romántico</button>
<div></div>
</body>
</html>

Los métodos GET y POST en jQuery

Con los métodos get y post podremos solicitar información a una página de internet que utiliza algun lenguaje intermedios en el servidor, como pueden ser PHP, Coldfusion o ASP.

  • GET - Solicita la información de una página determinada. Puede quedar la información en la memoria caché del navegador.
  • POST - Envía la información a ser procesada. Nunca se guarda en memoria caché la información.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>GET : Lee un poema</title>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(inicio);
function inicio(){
  $("button").click(onCargaPoema);
}
function onCargaPoema(){
    $.get("poema.php",function(data,status){
      $("div").html(data);
    });
}
</script>
</head>
<body>
<button>Pulsa para trer un poema del servidor</button>
<div></div>
</body>
</html>


El archivo de poema.php es bastante sencillo:

<?php
$poema = rand(0, 2);
if($poema==0){
    print "<h2>POEMA POPULAR</H2>";
    print "<p>EN EL AGUA CLARA</p>";
    print "<p>QUE BROTA EN LA FUENTE,</p>";
    print "<p>UN LINDO PESCADO</p>";
    print "<p>SALE DE REPENTE.</p>";
    print "<p>LINDO PESCADITO,</p>";
    print "<p>NO QUIERES VENIR</p>";
    print "<p>A JUGAR CON MI ARO?</p>";
    print "<p>VAMOS AL JARD&Iacute;N.</p>";
    print "<p>MI MAM&Aacute; ME HA DICHO:</p>";
    print "<p>'NO SALGAS DE AQU&Iacute;,</p>";
    print "<p>PORQUE SI TE SALES</p>";
    print "<p>TE VAS A MORIR'.</p>";
    print "<h3>An&oacute;nimo</h3>    ";
} else if($poema==1){
    print "<h2>REDONDILLAS</h2>";
    print "<p>Hombres necios que acus&aacute;is</p>";
    print "<p>a la mujer, sin raz&oacute;n,</p>";
    print "<p>sin ver que sois la ocasi&oacute;n</p>";
    print "<p>de lo mismo que culp&aacute;is;</p>";
    print "<br>";
    print "<p>si con ansia sin igual</p>";
    print "<p>solicit&aacute;is su desd&eacute;n,</p>";
    print "<p>por qu&eacute; quer&eacute;is que obren bien</p>";
    print "<p>si las incit&aacute;is al mal?</p>";
    print "<h3>Sor Juana Ines de la Cruz</h3>";   
} else if($poema==2){
    print "<h2>NOCTURNO A ROSARIO</h2>";
    print "<p>Pues bien, yo necesito</p>";
    print "<p>decirte que te adoro,</p>";
    print "<p>decirte que te quiero</p>";
    print "<p>con todo el coraz&oacute;n;</p>";
    print "<p>que es mucho lo que sufro,</p>";
    print "<p>que es mucho lo que lloro,</p>";
    print "<p>que ya no puedo tanto,</p>";
    print "<p>y al grito que te imploro</p>";
    print "<p>te imploro y te hablo en nombre</p>";
    print "<p>de mi &uacute;ltima ilusi&oacute;n.</p>";
    print "<h3>MANUEL ACU&Ntilde;A";
}
?>


NOTA: AMBOS ARCHIVOS DEBEN ESTAR EN EL SERVIDOR. 

La función de callback en la carga de texto con load()

En la función load(), que nos sirve para cargar archivos externos, tendremos un segundo parámetro, que es una función quese ejecuta automáticamente cuando el proceso de carga termina. Estas funciones son mejor conocidas como "callback".

En esta función tendremos tres parámetros:

  • respuesta- contiene el resultado de la carga, si esta fue exitosa
  • estado -regresa una cadena con el estado de la carga: "success" o "error"
  • xhr - contiene el objeto XMLHttpRequest
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Val</title>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
    $("#poema1").click(onPoema1);
    $("#poema2").click(onPoema2);
});

function onPoema1(){
    $("div").load("textos/poema1.txt h2", onCarga);
}
function onPoema2(){
    $("div").load("textos/poema2.txt #primera");
}
function onCarga(resultado, estado, xhr){
    if(estado=="success")
      alert("Carga de archivo exitosa!\n"+resultado);
    if(estado=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
}
</script>
</head>
<body>
<button id="poema1">Poema 1</button>
<button id="poema2">Poema 2</button>
<div></div>
</body>
</html>


Ejemplo: http://pacoarce.com/jQuery/LoadCallback.html
Curso completo: https://www.udemy.com/jquery-y-mobile/

domingo, 17 de febrero de 2013

El comando load de AJAX

El método load() es simple, pero poderoso. Nos permitirá leer una archivo en el servidor (en este caso de texto) y ponerlo en cualquier elemento de nuestra página.

Su sintaxis básica es:

$(selector).load(URL,data,callback);


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Caraga texto externo</title>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
  $("#poema1").click(function(){
    $("#div1").load("textos/poema1.txt");
  });
  $("#poema2").click(function(){
    $("#div1").load("textos/poema2.txt");
  });
});
</script>
</head>
<body>

<div id="div1"><h2>Pulse el botón para leer los poemas</h2></div>
<button id="poema1">Poema 1</button>
<button id="poema2">Poema 2</button>
</body>
</html>


Ejemplo: http://pacoarce.com/jQuery/Load.html
Curso completo: https://www.udemy.com/jquery-y-mobile/

AJAX y jQuery

AJAX es un conjunto de tecnologías tradicionales, como el JavaScript, el HTML y el XML, para crear aplicaciones asíncronas. Es el acrónimo de Asynchronous JavaScript And XML. Esta tecnología permite mandar y recibir información (entiéndase datos) desde el background del navegador por medio del objeto XMLHTTPRequest, el cual se encuntra implementado desde 2004 en todos los principales navegadores (incluso en Internet Explorer).

jQuery provee algunos métodos para aprovechar la funcionalidad AJAX

Con estos métodos se puede solicitar información en texto, HTML, XML o JSON al servidor remoto usando metódos POST y GET, y podrá desplegar esta información en cualquier elemento HTML.


Modificar las dimensiones de un elemento con width y height

Podemos cambiar las dimensiones de un elemento en web por medio de los métodos width y height, asi como cambiar dichos atributos por medio del métod attr. Estos métodos no tienen un efecto de animación.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Width Height</title>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(inicio);
function inicio(){
    $("#chica").click(onChica);
    $("#mediana").click(onMediana);
    $("#grande").click(onGrande);
}
function onChica(){
    $("#afro").width(400).height(251);
}
function onMediana(){
    $("#afro").width(800).height(502);
}
function onGrande(){
    $("#afro").width(1200).height(754);
}
</script>
</head>
<body>
<input type="button" id="chica" value="Chica"/>
<input type="button" id="mediana" value="Mediana"/>
<input type="button" id="grande" value="Grande"/>
<br>
<img src="imagenes/afrodita.jpg" id="afro"/>
<p></p>
</body>
</html>


Ejemplo: http://pacoarce.com/jQuery/WidthHeight.html
urso completo: https://www.udemy.com/jquery-y-mobile/

sábado, 16 de febrero de 2013

Efectos en jQuery

Show Hide

Dentro de los efectos con los que contamos en jQuery, se encuentra el de mostrar y oculpar cualquier elementovisual del documento DOM. Podremos hacer en forma sencilla animaciones que serían imposibles con sólo HTML.

Toogle

El efecto de toggle nos permitirá ocultar y mostrar un elemento del documento DOM de manera muy sencilla, permitiéndonos  hacer efectos interesantes con muy poco código.

Fade-in Fade-out

También contamos con el efecto de desvanecimiento, conocidos como fade-in y fade-out. Como parámetro podemos indicarle la velocidad del efecto con parámetros "slow" y "fast", asi como en número de milisegundos.

slideUp y slideDown

Otro efecto que podremos realizar con casi nada de código, es del deslizamiento de cualquier elemento hacia arriba y hacia abajo. Al igual que los otros efectos, podremos controlar su velocidad con los parámetos "slow" y "fast", asi como manejar el tiempo en milisegundos.

animate

El efecto animate es uno de los más poderosos en jQuery, pode podemos tomar una o varias atributos de un elementos y animarlos.

Con el efecto animate pomdeos animar más de una propiedad. De hecho podemos animar casi cualquier propiedad, a excepción de la propiedad de color, donde necesitamos otra librería. Si deseamos animar alguna propiedad css con guión, por ejemlo padding-top, la tenemos que convertir a CamelCase, como paddingTop. 

El efecto animate lo podemos manejar con valores relativos, es decir, pequeños incrementos que se pueden sumar o restar cuando tenemos alguna propiedad numérica. Usaremos los operadores += para incrementar y -= para decrementar.

Por medio del método animate, podemos tener una pila de animaciones y jQuery las ejecutaría de una por una, con lo cual podemos hacer animaciones más elaboradas.

stop

El método stop(), en jQuery, se utiliza para detener una animación o efecto antes de que se termine.

El método stop () funciona para todas las funciones de efectos jQuery, incluyendo animaciones de deslizamiento, la decoloración ylas animaciones customizadas.
El parámetro opcional (StopAll) especifica si también la cola de animación debe ser detenida o no. El valor predeterminado es falso, lo que significa que sólo la animación activa se detendrá, permitiendo que las animaciones en cola para ser realizado posteriormente.

El parámetro opcional
goToEnd especifica si o no para completar la animación actual inmediatamente. El valor predeterminado es false.

Así que, por defecto, el método stop () mata a la animación actual que se realiza en el elemento seleccionado.




viernes, 15 de febrero de 2013

Modificar las dimensiones del modelo de caja con jQuery

El manejo de las dimensiones del modelo de caja en jQuery es muy claro, ya que cada una de las dimensiones tiene su propio método, simplificándonos la vida, al contrario de HTML, que parece un tema para iniciados.


Los métodos son los siguientes:

  • width(): el ancho del elemento sin padding, border ni margen.
  • height(): la altura del elemento sin padding, border ni margen.
  • innerWidth(): el ancho del elemento con el padding,pero sin el border ni margen.
  • innerHeight(): la altura del elemento con el padding,pero sin el border ni margen.
  • outerWidth(): el ancho del elemento con el padding y el borde, pero sin el margen.
  • outerHeight(): la altura del elemento con el padding y el borde, pero sin el margen.
  • outerWidth(true): el ancho del elemento con el padding, el borde y el margen.
  • outerHeight(true): la altura del elemento con el padding, el borde y el margen.

Alternar clases en un elemento con el método toggleClass()

Para poder alternar una clase en un elemento del documento DOM, es decir, que con un evento apliquemos la clase, pero que también podamos quitarla, utilizamos el método toggleClass().

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
}); 


En el siguiente ejemplo aplicamos y removemos cada clase con un botón correspondiente:

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Alternar Clases</title>
<style>
.texto{
    text-align:center;
}
.rojo{
    color:red;
}
.autor{
    text-align:right;
    font-style:italic;
    color:black;
}
.caja{
    width:300px;
    background-color:#FF9;
    border:solid 2px black;
    height:200px;
}
</style>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(inicio);
function inicio(){
    $("#cajaBtn").click(onCaja);
    $("#autorBtn").click(onAutor);
    $("#textoBtn").click(onTexto);
    $("#borrarBtn").click(onBorrar);
    $("#rojoBtn").click(onRojo);
}
function onCaja(){
    $("div").toggleClass("caja");
}
function onAutor(){
    $("#autor").toggleClass("autor");
}
function onTexto(){
    $("p").toggleClass("texto rojo");
}
function onRojo(){
    $("p").removeClass("rojo");
}
function onBorrar(){
    $("p").removeClass("texto rojo");
    $("div").removeClass("caja");
    $("#autor").removeClass("autor");
}
</script>
</head>
<body>
<div>
<p>En el agua clara</p>
<p>que brota en la fuente</p>
<p>un lindo pescado</p>
<p>sale de repente</p>
<p id="autor">Autor anónimo</p>
</div>
<input type="button" value="Estilo caja" id="cajaBtn"/>
<input type="button" value="Estilo texto" id="textoBtn"/>
<input type="button" value="Estilo autor" id="autorBtn"/>
<input type="button" value="Borrar estilo" id="borrarBtn"/>
<input type="button" value="Quitar rojo" id="rojoBtn"/>
</body>
</html>


Ejemplo:  http://pacoarce.com/jQuery/ToggleClass.html
Curso completo: https://www.udemy.com/jquery-y-mobile/

Remover los estilos de un elemento con jQuery

Otro método que nos va a hacer de mucha utilidad es poder eliminar clases completas de un elemento del documento DOM, ya sea en tiempo de ejecución o en tiempo de autor. Para ello utilizamos el método removeClass().

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Borrar Clases</title>
<style>
.texto{
    text-align:center;
}
.rojo{
    color:red;
}
.autor{
    text-align:right;
    font-style:italic;
    color:black;
}
.caja{
    width:300px;
    background-color:#FF9;
    border:solid 2px black;
    height:200px;
}
</style>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(inicio);
function inicio(){
    $("#cajaBtn").click(onCaja);
    $("#autorBtn").click(onAutor);
    $("#textoBtn").click(onTexto);
    $("#borrarBtn").click(onBorrar);
    $("#rojoBtn").click(onRojo);
}
function onCaja(){
    $("div").addClass("caja");
}
function onAutor(){
    $("#autor").addClass("autor");
}
function onTexto(){
    $("p").addClass("texto rojo");
}
function onRojo(){
    $("p").removeClass("rojo");
}
function onBorrar(){
    $("p").removeClass("texto rojo");
    $("div").removeClass("caja");
    $("#autor").removeClass("autor");
}
</script>
</head>
<body>
<div>
<p>En el agua clara</p>
<p>que brota en la fuente</p>
<p>un lindo pescado</p>
<p>sale de repente</p>
<p id="autor">Autor anónimo</p>
</div>
<input type="button" value="Estilo caja" id="cajaBtn"/>
<input type="button" value="Estilo texto" id="textoBtn"/>
<input type="button" value="Estilo autor" id="autorBtn"/>
<input type="button" value="Borrar estilo" id="borrarBtn"/>
<input type="button" value="Quitar rojo" id="rojoBtn"/>
</body>
</html>


Ejemplo: http://pacoarce.com/jQuery/BorrarClases.html
Curso completo: https://www.udemy.com/jquery-y-mobile/

Manipular los estilos en cascada desde jQuery

jQuery cuenta con muchos métodos con los que podemos manipular los estilos en cascada o CSS:
  • addClass() - Añade una o más clases a los elementos seleccionados.
  • removeClass() - Remueve una o más clases de los elementos seleccionados.
  • toggleClass() - Alterna entre añadir y remover una clase a los elementos seleccionados.
  • css() - Cambia o regresa el valor de un attributo CSS.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Añadir CSS</title>
<style>
.texto{
    text-align:center;
    color:red;
}
.caja{
    width:300px;
    background-color:#FF9;
    border:solid 2px black;
    height:200px;
}
.autor{
    text-align:right;
    font-style:italic;
    color:black
}
</style>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(inicio);
function inicio(){
    $("#cajaBtn").click(onCaja);
    $("#textoBtn").click(onTexto);
    $("#autorBtn").click(onAutor);
}
function onCaja(){
    $("div").addClass("caja");
}
function onTexto(){
    $("p").addClass("texto");
}
function onAutor(){
    $("#autor").addClass("autor");
}
</script>
</head>
<body>
<div>
<p>En el agua clara</p>
<p>que brota en la fuente</p>
<p>un lindo pescado</p>
<p>sale de repente</p>
<p id="autor">Autor anónimo</p>
</div>
<input type="button" value="Estilo caja" id="cajaBtn"/>
<input type="button" value="Estilo texto" id="textoBtn"/>
<input type="button" value="Estilo autor" id="autorBtn"/>
</body>
</html>


Ejemplo: http://pacoarce.com/jQuery/PoemaCSS.html
Curso completo: https://www.udemy.com/jquery-y-mobile/

Los eventos del ratón en jQuery

 click y dbclick

Una de las enormes ventajas que tenemos con jQuery son los eventos. Dos de ellos, que funcionan a la perfección, son el click y el doble click, que lo podemos aplicar a cualquier elemento del documento, como puede ser una imagen, un párrafo o una tabla.

 mouseenter y mouseleave

Otros eventos que son muy utilizados en las animaciones y efectos que podemos realizar con jQuery son mouseenter y mouseleave, que nos permiten realizar efectos "rollover" y "rollout". Estos efectos los podemos aplicar tanto en imágenes, textos y otros elementos del documento.

mousedown y mouseover 

Los eventos mousedown y mouseover nos permitirán detectar cuando el apuntador del ratón izquierdo está abajo o cuando arriba. Con ellos podremos hacer muchos efectos interesantes, ya que los podemos aplicar a cualquier elemento de la página.

hover

El método hover() toma dos funciones tipo callback y es la combinación de los métodos mouseenter() y mouseleave().

La primer función se ejecuta cuando el apuntador del ratón entra al elemento HTML y la segunda función se activa cuando el apuntador del ratón sale del elemento.

$("#p1").hover(function(){
  alert("You entered p1!");
  },
  function(){
  alert("Bye! You now leave p1!");
});

focus()

El evento focus() se dispara cuando el apuntador del ratón entra a una caja de un formulario HTML. La función se ejecuta cuando tenemos el "foco" sobre el campo:

$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});

blur()


El evento blur() se dispara cuando el apuntador del ratón sale de una caja de un formulario HTML. La función se ejecuta cuando perdemos el "foco" sobre el campo:

$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});

keydown()

El evento keydown() se dispara cuando pulsamos una tecla dentro de una caja de un formulario HTML.

$("input").keydown(function(){
  $("input").css("background-color","yellow");
});

keyup()


El evento keyup() se dispara cuando levantamos la tecla de una caja de un formulario HTML.

$("input").keydown(function(){
  $("input").css("background-color","#ffffff");
});

jueves, 14 de febrero de 2013

Eliminar elementos desde jQuery

Existen dos métodos en jQuery que nos permiten eliminar elementos de una página web. Estos son:

  • remove(): Elimina los subnodos y el nodo contenedor.
  • empty(): Elimina los subnodos o elementos hijos, pero no al contenedor. Sólo lo vacía.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Remove</title>
<style>
.autor{
    text-align:right;
    font-style:italic;
}
.caja{
    width:300px;
    background-color:#FF9;
    border-color:black;
    height:200px;
}
</style>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(inicio);
function inicio(){
    $("#borraPoema").click(onBorraPoema);
    $("#borraAutor").click(onBorraAutor);
    $("#vaciaPoema").click(onVaciaPoema);
}
function onBorraPoema(){
    $("div").remove();
}
function onBorraAutor(){
    $("p").remove(".autor");
}
function onVaciaPoema(){
    $("div").empty();
}
</script>
</head>
<body>
<div class="caja">
<p>En el agua clara</p>
<p>que brota en la fuente</p>
<p>un lindo pescado</p>
<p>sale de repente</p>
<p class="autor">Autor anónimo</p>
</div>
<input type="button" value="Borra poema" id="borraPoema"/>
<input type="button" value="Borra autor" id="borraAutor"/>
<input type="button" value="Vacia poema" id="vaciaPoema"/>
</body>
</html>


Ejemplo: http://pacoarce.com/jQuery/Remove.html
Curso completo en: https://www.udemy.com/jquery-y-mobile/

miércoles, 13 de febrero de 2013

Añadir elementos con after() y before()

Otra funcionalidad muy práctica en jQuery es que podemos añadir elementos antes y depués de otro elemento encontrado. esto lo podemos hacer por medio de los métodos after() y before(). En el siguiente ejemplo añadiremos un párrafo, un botón y una imagen, los cuales no existen en la página inicial:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>After/Before</title>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(inicio);
function inicio(){
    $("#respuesta").click(onRespuesta);
}
function onRespuesta(){
    $("p").after("<p id='res'>Sandro de Botticelli</p>");
    $("#respuesta").before("<input type='button' id='pintura' value='Ver pintura'/>");
    $("#pintura").click(onPintura);
    $("#respuesta").attr("disabled","disabled");   
}
function onPintura(){
    $("#res").after("<img src='imagenes/afrodita.jpg'/>");
    $("#pintura").attr("disabled","disabled");
}
</script>
</head>
<body>
<input type="button" id="respuesta" value="Respuesta" />
<p>¿Quién pintó el nacimiento de Venus en 1484?</p>
</body>
</html>


Ejemplo: http://pacoarce.com/jQuery/AfterBefore.html
Curso completo en: https://www.udemy.com/jquery-y-mobile/
Añadir texto al inicio de un objeto con prepend()

Asi como tenemos el método append(), que añade texto al final de un párrafo, tenemos el método prepend() para añadirlo al inicio. Aunque es un poco menos común su uso, aqui ponemos un ejemplo del mismo:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Val</title>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
var poema = new Array()
poema.push("EN EL AGUA CLARA");
poema.push("QUE BROTA EN LA FUENTE,");
poema.push("UN LINDO PESCADO");
poema.push("SALE DE REPENTE");
poema.push("-LINDO PESCADITO,");
poema.push("¿NO QUIERES VENIR");
poema.push("A JUGAR CON MI ARO?");
poema.push("VAMOS AL JARDIN");
var i = poema.length-1;;
var ii = i;
$(document).ready(inicio);
function inicio(){
    $("#boton1").click(onTexto);
    $("#boton2").click(onLista);
}
function onTexto(){
    if(i>=0){
        $("p").prepend(poema[i]+"<br>");
        i--;
    }
}
function onLista(){
    if(ii>=0){
        $("ol").prepend("<li>"+poema[ii]+"</li>");
        ii--;
    }
}
</script>
</head>
<body>
<input type="button" value="Añadir texto" id="boton1"/>
<input type="button" value="Añadir lista" id="boton2"/>
<p></p>
<ol></ol>
</body>
</html>


Ejemplo: http://pacoarce.com/jQuery/Prepend.html
Curso completo: https://www.udemy.com/jquery-y-mobile/

Añadir texto por medio del método append()


El métod append() nos permite añadir texto al final del que ya existe. El método text() los sustituye, pero append() lo anexa. También puede anezar a cualquier elemento de la página, por ejemplo a una lista, ya sea ordenada o sin orden.

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script src="jquery.js">
</script>
<script>
var i = 0;
var ii = 0;
var poema = new Array()
poema.push("EN EL AGUA CLARA");
poema.push("QUE BROTA EN LA FUENTE,");
poema.push("UN LINDO PESCADO");
poema.push("SALE DE REPENTE");
poema.push("-LINDO PESCADITO,");
poema.push("¿NO QUIERES VENIR");
poema.push("A JUGAR CON MI ARO?");
poema.push("VAMOS AL JARDIN");
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append(poema[i]+"<br>");
    i++;
  });

  $("#btn2").click(function(){
    $("ol").append("<li>"+poema[ii]+"</li>");
    ii++;
  });
});
</script>
</head>

<body>
<button id="btn1">Añade texto</button>
<button id="btn2">Aumenta la lista ordenada</button>
<p></p>
<ol></ol>
</body>
</html>


Ejemplo: http://pacoarce.com/jQuery/Append.html
Curso completo: https://www.udemy.com/jquery-y-mobile/

Leer los resultados de un combo por medio del método val()

El método val() nos permite leer inforación de los comobo box, ya sea que nos regrese un sólo valor <select> o que nos regren múltiples valores <select multiple="multiple">. En este último caso, necesitamos interpretar el resultado como un arreglo. Si ningún valor ha sido seleccionado, regresa un valor null.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
p { color:red; margin:4px; }
b { color:blue; }
</style>
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(inicio);
function inicio(){
    $("select").change(muestraValores);
    muestraValores();  
}
function muestraValores() {
    var unValor = $("#estado").val();
    var muchosValores = $("#idiomas").val() || [];
    $("p").html("<b>Estado:</b> " +
    unValor +
    " <b>Idiomas:</b> " +
    muchosValores.join(", "));
}
</script>
<title>Val ComboBox</title>
</head>
<body>
<p></p>
<br>
<select id="estado">
<option>Soltero</option>
<option>Casado</option>
<option>Divorciado</option>
<option>Viudo</option>
</select>
<br>
<br>
<select id="idiomas" multiple="multiple">
<option selected="selected">Español</option>
<option>Inglés</option>
<option selected="selected">Francés</option>
<option >Alemán</option>
</select>
</body>
</html>


Ejemplo: http://pacoarce.com/jQuery/ValSelect.html
Curso completo: https://www.udemy.com/jquery-y-mobile/

martes, 12 de febrero de 2013

Escribir en una caja de texto desde jQuery

Otra de las funciones que tiene el método val() es poder escribir en cajas de texto (input) dentro de las formas. No solo podemos leer y escribir en las cajas de input, si no en cualquier elemento de una forma.

El siguiente ejemplo muestra como grabar en cajas de entrada:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Val</title>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(inicio);
function inicio(){
    $("#normal").click(onTitulo);
    $("#secreto").click(onChica);
    $("#artistico").click(onMediana);
}
function onTitulo(){
    $("#nombre").val("Paco");
    $("#apellido").val("Loco");
}
function onChica(){
    $("#nombre").val("James");
    $("#apellido").val("Bond");
}
function onMediana(){
    $("#nombre").val("Pato");
    $("#apellido").val("Lucas");
}
</script>
</head>
<body>
<input type="text" id="nombre">
<input type="text" id="apellido">
<br>
<input type="button" id="normal" value="Nombre normal">
<input type="button" id="secreto" value="Nombre secreto">
<input type="button" id="artistico" value="Nombre artístico">
<p></p>
</body>
</html>


Ejemplo: http://pacoarce.com/jQuery/ValEscribe.html
Curso completo: https://www.udemy.com/jquery-y-mobile/

Leer el valor de un campo de texto con jQuery

Otra forma que tiene el jQuery para interactura con HTML es que podemos leer y escribir en las cajas de texto de los formularios. Esto lo realizamos por medio de método val().

Por ejemplo, leemos el valor de una caja de texto y escribimos su valor en la parte inferior:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Val</title>
<style>
    p { color:blue; margin:8px; }
</style>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(inicio);
function inicio(){
    $("input").keyup(function () {
        var v = $(this).val();
        v = v.toUpperCase()
        $("p").text(v);
        }).keyup();
    }
</script>
</head>
<body>
<input type="text" value="Hola"/>
<p></p>
</body>
</html>


Ejemplo: http://pacoarce.com/jQuery/Val.html
Curso completo: https://www.udemy.com/jquery-y-mobile/

Modificar los atributos desde jQuery

Desde jQuery, podemos modificar a nuestro gusto cualquier valor de cualquier etiqueta de un documento DOM en tiempo de ejecución. Primero debemos identificar el objeto, ya sea por medio de un identificador, etiqueta o clase, y luego utilizar el método attr(). 

Si el selector regresa más de un elemento, sólo se modificará el primero.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Atributos</title>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(inicio);
function inicio(){
    $("#chica").click(onChica);
    $("#mediana").click(onMediana);
    $("#grande").click(onGrande);
    $("#titulo").click(onTitulo);
}
function onChica(){
    $("img").attr({width:"160px", height:"196px"});
}
function onMediana(){
    $("img").attr({width:"320px", height:"392px"});
}
function onGrande(){
    $("img").attr({width:"480px", height:"588px"});
}
function onTitulo(){
    var titulo = $("img").attr("title");
    $("#texto").text(titulo);
   
}
</script>
</head>

<body>
<input id="chica" type="button" value="Chica">
<input id="mediana" type="button" value="Mediana">
<input id="grande" type="button" value="Grande">
<input id="titulo" type="button" value="Titulo">
<br>
<img src="imagenes/afrodita160x196.jpg" width="160" height="196" alt="Afrodita" title="El nacimiento de Venus, William-Adolphe Bouguereau, 1879">
<p id="texto"></p>
</body>
</html>


Ejemplo: http://pacoarce.com/jQuery/Atributos.html 
Curso completo: https://www.udemy.com/jquery-y-mobile/

lunes, 11 de febrero de 2013

Leer y escribir el código HTML desde jQuery

Aunque ya tenemos en JavaScript una función similar (innerHTML) en jQuery tenemos el método html() que nos permite leer y escribir el código html de un objeto dentro del DOM.

Este método no funciona para documentos XML.

Si el selector regresa más de un elemento, sólo el primer elemento regresa su código HTML.

Esta función puede presentar algunos problemas con el navegador Internet Explorer, en versiones antigüas, ya que se basa en el comando innerHTML de JavaScript:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML</title>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(inicio);
function inicio(){
    $("p").click(onCambia);   
}
function onCambia(){
    var tt = $(this).html();
    $(this).text(tt);   
}
</script>
</head>

<body>
<p><strong>Este</strong> es <em>un párrafo</em></p>
<p>Este <input type="button" value="botoncito"/> no es otra cosa que código HTML</p>
<p>Esta imagen <img src="imagenes/animales/medusa.png"/> también es código HTML</p>
</body>
</html>

Ejemplo: http://pacoarce.com/jQuery/html.html
Manipulación del DOM con jQuery

Una parte muy importante de jQuery, es la posibilidad de manipular el DOM.

jQuery viene con un montón de métodos DOM relacionados, lo que hace que sea fácil de acceder y manipular los elementos y atributos en cualquier página web.


Leer el contenido - text (), html () y val()

Tres simples, pero útiles, métodos jQuery para la manipulación de DOM son:

     text () - Establece o devuelve el contenido de texto de los elementos seleccionados
     html () - Establece o devuelve el contenido de los elementos seleccionados (incluyendo el formato HTML)
     val () - Establece o devuelve el valor de los campos del formulario


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM</title>
<script src="jquery.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript">
$(document).ready(inicio);
function inicio(){
    $("#pregunta").click(onPregunta);
    $("#respuesta").click(onRespuesta);
    $("#ventana").click(onVentana);
}
function onPregunta(){
    $("#texto").text("¿Quién pinto el Nacimiento de Venus?");   
}
function onRespuesta(){
    $("#texto").text("Sandro Bottichelli (1445 - 1510) en 1484");   
}
function onVentana(){
    var t = $("#texto").text();
    alert("El contenido del enunciado es: "+t);
}
</script>
</head>

<body>
<p id="texto">¿Quién pinto el Nacimiento de Venus?</p>
<input type="button" value="Pregunta" id="pregunta"/>
<input type="button" value="Respuesta" id="respuesta"/>
<input type="button" value="Ventana" id="ventana"/>
</body>
</html>

 

 Ejemplo: http://pacoarce.com/jQuery/DOM.html

Curso completo en: http://www.udemy.com/jquery-y-mobile/ 

Las funciones de callback en jQuery

Las sentencias de JavaScript se ejecuta línea por línea. Sin embargo, con los efectos, la siguiente línea de código puede ejecutarse aunque el efecto no está terminado. Esto puede crear errores.

Para evitar esto, se puede crear una función de callback. Una función de callback se ejecuta después de que el efecto actual terminó.

Sintaxis: $ (selector).hide(velocidad, callback).




Curso completo de jQuery en: http://www.udemy.com/jquery-y-mobile

Encadenamiento de métodos con jQuery:

 Por lo general escribimos las sentencias jQuery una a la vez (una después de la otra).

Sin embargo, existe una técnica llamada encadenamiento, que nos permite ejecutar varios comandos con jQuery, uno tras otro, en el mismo elemento o elementos.

Sugerencia: De esta manera, los navegadores no tienen que encontrar el mismo elemento  más de una vez.

Para encadenar una acción, sólo tiene que añadir la acción a la acción anterior y unirlas por medio de un punto.


Cuando encadenamos métodos en jQuery, la línea de código puede ser bastante larga. Sin embargo, jQuery no es muy estricto acerca de la sintaxis: puede darle formato como usted desee, incluyendo saltos de línea y sangrías.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Afrodita Muestra/Oculta</title>
<style>
#afrodita{
    width:800px;
    height:502px;
    background-image:url(imagenes/afrodita.jpg);
    background-repeat:no-repeat;
    background-size:100%;
}
p{
    background-color:#CCC;
    text-align:center;
}
</style>
<script src="jquery.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript">
$(document).ready(inicio);
function inicio(){
    $("#toggle").click(onSelecciona);
   
}
function onSelecciona(){
    $("p").css("color","red").slideUp(1000).slideDown(1000);
   
}
</script>
</head>

<body>
<div id="afrodita"><p>El nacimiento de Venus, por Sandro Botticelli (1445 - 1510)</p></div>
<input type="button" id="toggle" value="Selecciona"/>

</body>
</html> 


Curso completo de jQuery en:
http://www.udemy.com/jquery-y-mobile/

miércoles, 6 de febrero de 2013

Los ciclos en Objective-C

¿Por qué utilizar Loops?


Las sentencias de bucle son el principal mecanismo para contar un equipo que una secuencia de tareas necesita ser repetido un número específico de veces. 
Supongamos, por ejemplo, que usted tiene la obligación de agregar un número a sí mismo diez veces. 
Una forma de hacerlo podría ser la de escribir el siguiente código de Objective-C:


int j = 10;

j += j;
j += j;
j += j;
j += j;
j += j;
j += j;
j += j;
j += j;
j += j;
j += j;


Si bien esto es algo engorroso funciona.
¿Qué pasaría, sin embargo, si usted necesita para llevar a cabo esta tarea 100 o incluso 10.000 veces?
Escritura de Objective-C código para realizar esto como anteriormente sería prohibitivo.
Este escenario es exactamente lo que el bucle for tiene la intención de manejar.
La sintaxis de una Objective-C para el bucle es la siguiente:

for ( ''inicio''; ''expresión condicional''; ''incremento/decremento'' )
{
      // sentencias a ser ejecutadas
} 

El inicializador normalmente inicializa una variable de contador.
Tradicionalmente, el nombre de la variable i se utiliza para este propósito, aunque cualquier nombre de variable es válido.
Por ejemplo:
Esto pone el contador a la variable i y lo establece en cero. 
Tenga en cuenta que la anteriormente utilizada Objective-C estándar (c89) requiere que esta variable sea declarado con anterioridad a su uso en el bucle. 
Por ejemplo:

int i=0;

for (i = 0; i < 100; i++)
{
     // Statements here
}

El estándar actual (c99) permite la variable que se declara y se inicializa en el bucle de la siguiente manera:

for (int i=0; i<100; i++)
{
    //sentencias
}


Si compila código que contiene esta construcción usando el compilador C89 un nivel que puede obtener un error similar al siguiente:

error: "para" bucle declaración inicial utilizarse fuera de modo C99

Si usted ve este mensaje, debería ser capaz de cambiar al modo de C99 mediante la adición del std = c99-de línea de comandos bandera a su comando de compilación.
Por ejemplo:

clang-std = c99-marco de la Fundación hello.m-o hola

La expresión condicional especifica la prueba para llevar a cabo para verificar si el bucle se ha realizado el número requerido de iteraciones. Por ejemplo, si queremos bucle 10 veces:

i <10;

Por último, la expresión bucle especifica la acción a realizar en la variable contador. Por ejemplo, para incrementar en 1:

i + +;

El cuerpo de instrucciones que se ejecutan en cada iteración del bucle está contenido dentro del bloque de código definida por la abertura ({) y de cierre (}) llaves.
Si sólo hay una declaración se va a ejecutar las llaves son opcionales, aunque todavía se recomienda para mejorar la legibilidad del código y para que no se olvide de la añadirlos si posteriormente aumentar el número de sentencias que se realizan en el bucle.

Llevando todo esto juntos podemos crear un bucle para realizar la tarea se indica en el ejemplo anterior:

int j = 10;

for (int i=0; i<10; i++)
{
      j += j;
}

NSLog (@"j = %i", j);

Alcance de las variables dentro de un ciclo

Un punto clave a observar en la creación de bucles es que las variables definidas en el cuerpo de un bucle sólo son visibles para el código dentro del bucle.
Este es el concepto conocido como ámbito de aplicación.
Si, por ejemplo, un myCounter variable se define en un bucle, la variable deja de existir una vez que el bucle termina:

// variable myCounter does not yet exist

for (int i = 0; i < 10; i++)
{
       int myCounter = 0; //myCounter variable created in scope of for loop

       myCounter += i;
}

// after loop exit variable myCounter is now out of scope and ceases to exist

Creating an Infinite for Loop

A for loop that will execute an infinite number of times may be constructed using for (;;) syntax. For example, the following code sample will output Hello from Objective-C until the program is manually terminated by the user (or the computer is turned off or rebooted):
for (;;)
{
    NSLog (@"Hello from Objective-C");
}

Breaking Out of a for Loop

Having created a loop it is possible that under certain conditions you might want to break out of the loop before the completion criteria have been met (particularly if you have created an infinite loop). One such example might involve continually checking for activity on a network socket. Once activity has been detected it will be necessary to break out of the monitoring loop and perform some other task.
For the purpose of breaking out of a loop, Objective-C provides the break statement which breaks out of the current loop and resumes execution at the code directly after the loop. For example:
int j = 10;

for (int i = 0; i < 100; i++)
{
     j += j;

     if (j > 100)
          break;

     NSLog (@"j = %i", j);
}
In the above example the loop will continue to execute until the value of j exceeds 100 at which point the loop will exit.

Nested for Loops

So far we have looked at only a single level of for loop. It is also possible to nest for loops where one for loop resides inside another for loop. For example:
int j;

for (int i = 0; i < 100; i++)
{
     NSLog( @"i = %i", i);

     for (j = 0; j < 10; j++)
     {
             NSLog ( @"j = %i", j);
     }
}
The above example will loop 100 times displaying the value of i on each iteration. In addition, for each of those iterations it will loop 10 times displaying the value of j.

Breaking from Nested Loops

An important point to be aware of when breaking out of a nested for loop is that the break only exits from the current level of loop. For example, the following Objective-C code example will exit from the current iteration of the nested loop when j is equal to 5. The outer loop will, however, continue to iterate and, in turn execute the nested loop:
for (int i = 0; i < 100; i++)
{
     NSLog( @"i = %i", i);

     for (int j = 0; j < 10; j++)
     {
             if (j == 5)
                   break;

             NSLog ( @"j = %i", j);
     }
}

Continuing for Loops

Another useful statement for use in loops in the continue statement. When the execution process finds a continue statement in any kind of loop it skips all remaining code in the body of the loop and begins execution once again from the top of the loop. Using this technique we can construct a for loop which outputs only even numbers between 1 and 9:
for (int i = 1; i < 10; i++)
{
          if ((i % 2) != 0)
               continue;

          NSLog( @"i = %i", i);
}
In the example, if i is not divisible by 2 with 0 remaining the code performs a continue sending execution to the top of the for loop, thereby bypassing the code to output the value of i. This will result in the following output:
2
4
6
8

Using for Loops with Multiple Variables

In the examples we have covered so far we have used a single variable within the for loop construct. Objective-C actually permits multiple variables to be modified within the looping process. In the following example, the for loop increments two variables, i and j:
int j;
int i;

for (j = 0, i = 0; i < 10; i++, j++)
{
          NSLog( @"i = %i, j = %i", i, j);
}
Note that although both i and j are initialized and incremented in this loop, the number of times the loop is to be performed is still based on the value of i through the i > 10 expression. The initialization and modification expressions for additional variables do not need to be the same as the control variable. For example, the following example initializes j to 5 and multiplies it by 2:
int j;
int i;

for (j = 1, i = 0; i < 10; i++, j *= 2)
{
          NSLog( @"i = %i, j = %i", i, j);
}
When the above loop is executed we get output similar to:
2009-10-13 09:32:22.498 t[1867:10b] i = 0, j = 1
2009-10-13 09:32:22.500 t[1867:10b] i = 1, j = 2
2009-10-13 09:32:22.500 t[1867:10b] i = 2, j = 4
2009-10-13 09:32:22.501 t[1867:10b] i = 3, j = 8
2009-10-13 09:32:22.501 t[1867:10b] i = 4, j = 16
2009-10-13 09:32:22.502 t[1867:10b] i = 5, j = 32
2009-10-13 09:32:22.502 t[1867:10b] i = 6, j = 64
2009-10-13 09:32:22.503 t[1867:10b] i = 7, j = 128
2009-10-13 09:32:22.503 t[1867:10b] i = 8, j = 256
2009-10-13 09:32:22.503 t[1867:10b] i = 9, j = 512