Apuntes de Curso HTML Codecademy

<APUNTES DE CURSO HTML >
Todo archivo HTML debe comenzar con el encabezado <! DOCTYPE HTML>, para que cualquier
navegador entienda que el cdigo que viene a continuacin es HTML.
Luego del encabezado <doctype html> es necesario colocar las etiquetas de inicio y final de
nuestro cdigo html (<html> </html>). El cual contendr todas las instrucciones html.
<HEAD></HEAD> son las etiquetas de la cabecera de una pgina web
<title> </title> son las etiquetas de la pgina web
<body> </body> son las etiquetas del cuerpo de la pgina web.
<p> </p> Son las etiquetas de prrafo en HTML.
<h> </h> son las etiquetas de los encabezados que tienen varios tamaos descendentes que van
desde <h1> hasta <h6> respectivamente.
<img> </img> Son las Etiquetas para la insercin de imgenes. Estas se utilizan de forma diferente
a las etiquetas anteriores, ya que en esta en la etiqueta de apertura con ayuda de src=? Se le
indica dnd est la ubicacin de la imagen que deseamos usar.
<a> </a> Son las Etiquetas Implementadas para Crear Hipervnculos. Se implementa de igual
forma que img, pero no se utiliza src, en su lugar se utiliza href. Para convertir una imagen en un
hipervnculo se procede de la siguiente manera: <a href =Direccin a donde queremos nos dirija
la imagen> <img src=Direccin Web de la Imagen></img> </a>.
 se Utilizan para crear Comentarios.
Style es uno de los atributos que ms se usan en HTML ya que este es el que nos permite
personalizar nuestro proyecto, A continuacin un ejemplo de estos usos.
style = "font-size: 12px" se Utiliza dentro de las etiquetas de inicio para cambiar el tamao de la
letra de nuestras etiquetas de prrafo ,lnea, encabezado, lista, cuerpo ejemplo: <p style = "font-
size: 12px" ></p> <li style = "font-size: 12px" ></li>
Personalizacin de colores: http://www.w3.org/TR/css3-color/#svg-color
Personalizacin del tipo de letra: http://www.w3.org/TR/CSS21/fonts.html#generic-font-families
Personalizacin del color del fondo: style="background-color: color que se desea".
Personalizacin de la ubicacin del texto style="text-align:center or left or right".
<strong> </strong> se utiliza para colocar palabras o prrafos en negrita.
<em> </em> se utiliza para colocar palabras o prrafos en italica.
Tablas en HTML.
<table> </table> Son las etiquetas que se implementan para la creacin de tablas en HTML.
<tr> </tr> son las etiquetas que se utilizan para crear las filas de nuestras tablas
<td> </td> Son las Etiquetas que se utilizan para ingresar Datos a las filas de las tablas.
<thead> </thead> Son las Etiquetas que se usan para colocar toda la informacin de la tabla, es
decir su cabecera.
<th> </th> Son las etiquetas que se utilizan para ingresar los datos en la cabecera de la tabla.
Colspan es el atributo que usamos dentro de las etiquetas <th> para aumentar el nmero de
columnas en las que se extiende la misma
<tbody></tbody> Son las etiquetas que se utiliza para crear el cuerpo de nuestra tabla.

<div> </div> Son las etiquetas que se implementan para dividir nuestra pgina en partes ms
pequeas y de esa forma tener ms opciones de personalizacin

LISTAS EN HTML
<ol> </ol> son las etiquetas para crear listas ordenadas, la cuales generan la numeracin
automtica de todas las cosas que ubiquemos dentro de las mismas.
<ul></ul> se implementa de la misma forma que las etiquetas anteriores solo que estas las listas
no son numeradas si no que utilizan vietas.
<li> es la etiqueta que utilizan ambas listas para denotar cada tem.

ESTILOS CSS
Ya sabes que deberas escribir tu CSS en un archivo completamente aparte. Pero,
cmo te aseguras de que tu archivo de HTML pueda ver esa informacin de CSS?
Lo puedes hacer colocando una etiqueta <link> (tal como viste en el primer ejercicio
de este curso) entre las etiquetas <head></head> de tu pgina HTML. Tu
etiqueta <link> necesita tres atributos:
1. Un atributo type que siempre debe ser igual a "text/css"
2. Un atributo rel que siempre debe ser igual a "stylesheet"
3. Un atributo href que debe apuntar a la direccin web de tu archivo CSS
En el editor de la derecha vers dos archivos: index.html y stylesheet.css.
Ejemplo: <link type="text/css" rel="stylesheet" href="stylesheet.css" />

Em es una medida de tamao universal que se ajusta a la resolucin de la pantalla
donde se est visualizando.
CLASE E IDENTIFICADORES

LOS IDENTIFICADORES: se utilizan en html: < id=NombreId> y en CSS
#nombreid{propiedades}
LAS CLASES: se utilizan en html < class=NombreClase> y en CSS
.NombreClase{propiedades}.

SELECTORES DE PSEUDO-CLASE: Un selector de pseudo-clase es una forma de
acceder a los elementos de HTML que no son parte del rbol del documento
(recuerdas la estructura de rbol sobre la que hablamos anteriormente?). Por
ejemplo, es muy fcil ver en qu lugar del rbol va un enlace. Pero, en qu lugar
encontraras la informacin que dice si se ha hecho clic o no sobre un enlace? Eso no
est all!.
La sintaxis de CSS para los pseudo-selectores es: selector:selector_de_pseudo-
clase { propiedad: valor;}
First-child: Este es otro selector de pseudo-clase que nos ayuda a aplicar estilo
nicamente a los elementos que son primer hijo de sus padres.
Sintaxis:
Elemento:first-child{propiedades}

nth-child(n): Este es otro selector de pseudo-clase que nos ayuda a aplicar estilo
nicamente a los elementos que son el n hijo de sus padres.
Sintaxis:
Elemento: nth-child(n){propiedades}

Selectores de Pseudo-Clase para los links
a: link = un enlace sin visitar.
b: Visited = un enlace que ha sido visitado.
c: hover = un enlace sobre el cual pasas el cursor sin hacer click.

DISTRIBUCION DE LA PLANTILLA HTML

Como puedes ver, cada caja se compone de capas. Desde la que est ms en el
exterior hasta la que est ms hacia el centro:
Margin (margen) es el espacio alrededor del elemento. Entre ms grande, habr ms
espacio entre nuestro elemento y los que lo rodean. Podemos ajustar el margen para
mover nuestros elementos de HTML ms cerca o ms lejos unos de otros.
Margen superior, derecho, inferior, izquierdo
margin-top: /*algn valor*/
margin-right: /*algn valor*/
margin-bottom: /*algn valor*/
margin-left: /*algn valor*/
margin: 1px 2px 3px 4px;
Establecer un margen superior de 1 pxel, un margen derecho de of 2, un margen
inferior de 3 y un margen izquierda de 4.
Border es el borde del elemento. Es lo que hemos estado haciendo visible cada vez
que establecemos la propiedad border.
Padding (relleno) es el espacio entre el contenido y el borde. Con CSS, podemos
ajustar este valor para mover el borde ms cerca o ms lejos del contenido.
Los rellenos pueden establecerse de dos formas, tal como tus mrgenes. Puedes
seleccionarlos uno por uno, as:
padding-top: /*algn valor*/
padding-right: /*algn valor*/
padding-bottom: /*algn valor*/
padding-left: /*algn valor*/
padding: valor valor valor valor;

Content es el contenido dentro de la caja. Si estamos hablando de un elemento <p>,
el contenido es el texto del prrafo.
En el diagrama vers abreviaturas como TM, TB, y TP. Estas quieren decir "top
margin" (margen superior), "top border" (borde superior), y "top padding" (relleno
superior). Como veremos, podemos ajustar los rellenos, bordes y mrgenes
superiores, derechos, izquierdos e inferiores de forma individual.

PROPIEDADES DE POSICIONAMIENTO

DISPLAY: a continuacin cuatro posibles valores.
block: esto vuelve al elemento una caja de bloque. No permitir que nada sea
ubicado junto a l en la pgina! Ocupa el ancho completo.
inline-block: Esto vuelve a un elemento una caja de bloque, pero permitir que otros
elementos sean ubicados junto a l en la misma lnea.
inline: Esto hace que un elemento sea ubicado en la misma lnea que otro elemento,
pero sin darle formato como bloque. Solamente ocupa el ancho que requiera (pero no
la lnea completa).
none: Esto hace que el elemento y su contenido desaparezcan por completo de la
pgina!

POSICIONAMIENTO

Float: esta propiedad le dice a los elementos que se ubiquen sin interponerse con los
dems elementos. Los valores que puede tomar son right, left o both.
Clear: right, left o both
Posicionamiento absolute: El primer tipo de posicionamiento es posicionamiento
absoluto. Cuando se establece un elemento con position: absolute, se posiciona en
relacin con el primer elemento padre que tiene y que no est establecido con
position: static. Si no existe tal elemento, el elemento con position: absolute se
posiciona en relacin con <html>.
Posicionamiento relativo (relative): El posicionamiento relativo le indica al
elemento que se desplace respecto al lugar donde se encontrara si tuviera el
posicionamiento predeterminado static.

Posicionamiento fijo(fixed): El posicionamiento fijo ancla un elemento a la
ventana del navegador

JQUERY
Esta es la forma de conectar nuestro archive html con jquery
<script type="text/javascript" src="script.js"></script>.
Estructura del cdigo de jquery:
$(document).ready(function() {
$(elementoParaClic).evento(function() {
$(elementoAfectado).efecto();
});
});
$() es una funcin (un tipo de accin) que convierte lo que est en medio de los
parntesis en un objeto de jQuery; es decir, algo con lo que jQuery pueda
trabajar.
Sintaxis $(document).ready();
- $() dice: "Oigan, estn a punto de pasar cosas que tienen que ver con
jQuery!"
- La parte de document en medio de los parntesis nos indica que estamos a
punto de hacer nuestra magia en el mismo documento de HTML.
- .ready(); es una funcin, o una accin bsica, en jQuery. Dice: "Voy a
hacer algo tan pronto como el documento de HTML est listo!"
- La parte en medio de los parntesis de .ready() es el evento de jQuery, que
ocurre tan pronto como el documento de HTML est listo.
De este modo,
$(document).ready(algo);
- dice: "cuando el documento de HTML est listo, haz algo!".
$('div').mouseenter(function() {
$('div').fadeTo("fast",1);
});
});
ASIGNACIN DE VARIABLES:
Para la asignacin de una variable en jquery la sintaxis es la siguiente:
Var $a = $(p) siendo a el nombre de la variable a usar y p el elemento o
argumento que vamos a reemplazar.
'this' es importante
La palabra clave this se refiere al objeto de jQuery con el que estamos trabajando en
ese momento. Las reglas de operacin son un poco complejas, pero lo importante es
entender que si usas un controlador de eventos (ese es el nombre elegante de las
acciones como .click() y .mouseenter(), ya que controlan eventos de jQuery) en un
elemento, puedes llamar al evento que ocurre (tal como fadeOut()) con$(this), y el
evento solamente afectar al elemento con el que haces algo en ese momento
ejemplo del uso del this
$('div').click(function() {
$(this).fadeOut('slow');
});
});
Insertar elementos
Podemos insertar nuestros elementos recin creados usando algunas acciones de
jQuery.
.append() inserta el elemento especificado como el ltimo hijo del elemento al que
apunta. .prepend()inserta el elemento especificado como el primer hijo del elemento
al que apunta. Si tuviramos un div con clase.info,
$('.info').append('<p>Algo!</p>');
$('.info').prepend('<p>Algo!</p>');
Agregaramos un prrafo con el texto "Algo!" dentro de todos los divs con
clase .info. .append() har que el prrafo sea el ltimo hijo de cada
div;.prepend() har que el prrafo sea el primer hijo de cada div.
.appendTo() hace lo mismo que .append(), pero invierte el orden de "lo que hay que
aadir" y "donde hay que aadirlo." El cdigo
$('<p>Algo!</p>').appendTo('.info');
tiene el mismo efecto que el cdigo .append() anterior. .prependTo() tiene una
relacin parecida con .prepend().
Antes y despus
Podemos especificar en qu parte del DOM insertamos un elemento con las
funciones .before() y .after(). La sintaxis se ve as:
$('objetivo').after('<etiqueta>Adicin</etiqueta>');
Donde 'objetivo' es el elemento despus del cual quieres agregar algo, y la parte en
medio de las <etiqueta>es el elemento de HTML que quieres agregar. Puedes
agregar <h1>, <div>, o cualquier otro HTML vlido que quieras.

Eliminar elementos
Agregar elementos a nuestros documentos HTML es grandioso, pero nuestras pginas
muy pronto estarn desordenadas sin la habilidad de removerlos. Afortunadamente
contamos con dos funciones de jQuery, .empty() y .remove(), que nos ayudan a
eliminar el contenido de nuestras pginas.
.empty() elimina el contenido y todos los descendientes de un elemento. Por ejemplo,
si usas .empty() en un 'ol', tambin eliminars todos sus 'li' y su texto.
.remove(), no solo elimina el contenido de un elemento, sino que tambin elimina el
elemento en s.

Agregar y eliminar clases
No tenemos que limitarnos a agregar o eliminar elementos completos; podemos afinar
nuestros sper poderes de jQuery para alterar las clases, CSS, e incluso los contenidos
de nuestros elementos de HTML.
Comencemos con las clases. jQuery incluye dos
funciones: .addClass() y.removeClass(), que se pueden usar para agregar o eliminar
una clase de un elemento. Esto es grandioso si, por ejemplo, tienes una
clase .resaltar que le quieres aplicar a un elemento cuando haces clic sobre l.
La sintaxis se ve as:
$('selector').addClass('NombreDeClase');
$('selector').removeClass('NombreDeClase');
en donde 'selector' es el elemento de HTML que quieres y 'NombreDeClase' es el
nombre de clase que quieres agregar o eliminar.

Activar y desactivar clases
Pero, y qu tal si queremos activar y desactivar una clase? Es decir, qu tal si
queremos que jQuery verifique automticamente si nuestro #textousa .resaltar, de
modo que cuando hagamos clic sobre l, agregue la clase si no la tiene y la elimine si
la tiene?
Como tal vez ya lo hayas adivinado, jQuery incluye una funcin.toggleClass() que
hace exactamente eso. Si el elemento con el que es llamada recibe la clase como un
argumento, .toggleClass() elimina esa clase; si el elemento afectado no tiene esa
clase, .toggleClass() la agrega.

Cambiar tu estilo
Pero, y qu tal si queremos ajustar valores individuales de propiedades de CSS? No
hay problema: jQuery tiene una funcin para hacerlo.
Debido a que es muy comn cambiar el tamao de los elementos, jQuery tiene las
funciones especficas .height() y .width() que se pueden usar para cambiar el alto y
el ancho de los elementos de HTML. Por ejemplo:
$('div').height('100px');
$('div').width('50px');
le dar a todos los <div> de la pgina una altura de 100 pixeles y un ancho de 50
pixeles.
jQuery tambin incluye una funcin.css() para fines generales que toma dos
entradas: la primera es el elemento de CSS que se va a alterar, y la segunda es el
valor que se le dar. Por ejemplo:
$('div').css('background-color','#008800');
Le dar a todos los <div> de la pgina un color de fondo verde.

Modificar el contenido
Por ltimo, podemos actualizar los contenidos de nuestros elementos de HTML; es
decir, la parte que va entre las etiquetas de cierre y de apertura, usando las
funciones .html() y.val().
Se puede usar .html() para obtener el contenido del primer elemento que coincida.
Por ejemplo:
$('div').html();
Recuperar el contenido HTML del primer div que encuentre, y
$('div').html("Adoro jQuery!");
Cambiar el contenido del primer div que encuentre a "Adoro jQuery!"
.val() se usa para obtener el valor de los elementos de formulario. Por ejemplo,
$('input:checkbox:checked').val();
Recuperar el valor de la primera casilla de seleccin activada que jQuery encuentre.

Agregar un cuerpo
Perfecto! Ahora queremos agregar nuestro elemento HTML al documento. Esto se
puede hacer usando la til funcin .append().
Adelante, vamos a usarla en nuestro div con la clase .lista. Agregaremos
un <div> con class="item", ya que ms adelante querremos enfocarnos en
nuestro <div> cuando lo vayamos a eliminar. (Una lista de cosas por hacer no es
buena si no podemos tachar cosas en ella.)
Queremos que el contenido de nuestro div sea el contenido de nuestro campo de
entrada, el cual guardamos en la variable Agregar. Eso quiere decir que cuando
usamos la funcin, queremos agregar
'<div class="item">' + Agregar + '</div>'

Elimina lo seleccionado
Buen trabajo! Por ltimo, queremos poder eliminar items de nuestra lista.
Podras pensar que podemos hacer esto:
$('.item').click(function() {
$(this).remove();
});
y no es mala idea. El problema es que no funcionara: jQuery busca todos
los.item cuando DOM se carga, as que, para cuando tu documento est listo, ya ha
decidido que no hay .item que eliminar con .remove(), y tu cdigo no funcionar.
Para esto necesitaremos un nuevo controlador de eventos: .on(). Imagina
que .on() es un controlador general que toma el evento, su selector, y una accin
como datos de entrada. La sintaxis se ve as:
$(document).on('evento', 'selector', funcion() {
Realiza una accin!
});
En este caso, 'evento' ser 'click','selector' ser '.item', y lo que queremos hacer
es llamar a .remove()en this.

Repaso de eventos de jQuery
Ya sabes un montn sobre eventos de jQuery, pero nunca sobra repasar los conceptos
bsicos.
El cdigo casi siempre se ve as:
$('elementoParaTocar').evento(function() {
$('elementoAfectado').efecto();
});
});
donde "elemento para tocar" es el elemento HTML sobre el que hars clic, pasars el
puntero, o con el que interactuars de otro modo; y "elemento afectado" es el
elemento HTML que se desvanece, cambia de tamao, o que sufre alguna otra
transformacin.
Algunas veces los dos elementos se refieren a uno solo: puedes pasar el puntero
sobre un <div> para cambiar su opacidad. Otras veces interactas con un elemento
aparte; por ejemplo, puedes hacer clic en un botn para cambiar el tamao de
un<div>.
A veces, si quieres que un efecto ocurra de inmediato, sin un evento como
.click() o .hover(), puedes omitir la segunda lnea del ejemplo anterior:
$('elementoAfectado').efecto();
});

Ir al grano
Vamos a repasar rpidamente como activar un efecto sin un controlador especial de
eventos como .click(); simplemente queremos que nuestro efecto ocurra tan pronto
como nuestro document est listo ( .ready() ).
Recuerda: la prctica hace al maestro!

.mouseenter() y .mouseleave()
Recuerdas cuando vimos los controladores de eventos.mouseenter() y .mouseleave()?
Si no, puedes refrescar tu memoria aqu; sin embargo, vamos a tomarnos un minuto
para repasarlos.
El evento .mouseenter() se activa cuando nuestro puntero ingresa al elemento que
queremos afectar; el evento .mouseleave() se activa cuando nuestro cursor lo
abandona. (Este cdigo debera parecerte conocido.)
Vamos a usar .focus()!
Otro evento que podemos usar es .focus(). Decimos que un elemento
tiene foco cuando hacemos clic sobre o usamos tab en l. Si alguna vez has
completado un formulario en una pgina web y has visto cmo cada cuadro de texto
se ilumina cuando usas tab en o haces clic sobre l, entonces has visto 'focus' en
accin!
El controlador de eventos .focus()solamente funciona en los elementos que pueden
recibir foco; la lista de stos elementos es un poco vaga, pero los elementos de HTML
como<textarea> e <input> son los sospechosos principales.
Observa el formulario que hemos puesto en la pestaa Resultado. Si haces clic en el
campo de entrada, vers que se ilumina automticamente con un encantador azul
claro. Qu mal que el azul claro sea para bebs! Queremos que nuestro resaltado sea
rojo.
Podemos hacerlo usando dos herramientas: .focus() y nuestra funcin .css() de la
ltima seccin. Queremos escribir un cdigo de jQuery que cambie el 'outline-
color' de nuestro 'input' a 'rojo' cuando tenga foco.

El evento .keydown()
En jQuery, no solamente ests limitado a usar los elementos con el ratn; tambin
puedes activar eventos usando el teclado!
El evento .keydown() se activa cuando se presiona un botn en el teclado. Solamente
funciona en cualquier elemento de la pgina que tenga foco, as que, para ver su
efecto, tendrs que hacer clic en la ventana que contiene tu div antes de presionar
una tecla.
Adelante, combinemos nuestro evento con un nuevo efecto: .animate()! Lo usaremos
para mover un objeto en la pantalla cuando presionemos una tecla.
El efecto .animate() toma dos parmetros: la animacin que se va a realizar, y el
tiempo en el cul se realizar. Aqu hay un ejemplo:
$('div').animate({left:'+=10px'},500);
});
Esto tomar el primer div que encuentre y lo mover diez pixeles a la derecha.
Recuerda que aumentar la distancia desde el margen izquierdo mueve algo hacia la
derecha; la parte de += es solamente una manera de decir "smale diez al nmero que
ya est all." En este caso, le agrega diez pixeles a la distancia actual desde el margen
izquierdo.
Completando los casos
Buen trabajo! Ahora es momento de animar nuestro personaje con base en las
acciones del usuario en el teclado.
Vers mucha sintaxis nueva en la pestaa script.js. No temas! Es simplemente
lgica de JavaScript diseada para ayudar a alterar el comportamiento de jQuery
segn las teclas que presione el usuario. Si quieres aprender ms sobre cmo
agregarle lgica a tus programas, puedes ver la serie de ejercicios de JavaScript aqu
en Codecademy.
Mientras tanto, tenemos trabajo que hacer! El cdigo en la lnea 5 mueve nuestro
sprite 10 pixeles a la izquierda cuando se presiona la tecla "a" ("a" tiene el cdigo
numrico 65, lo cual explica la lnea 4).
Presentando jQuery UI
Muy bien! Es el momento de abrir nuevos senderos en jQuery con una nueva
biblioteca de jQuery: jQuery UI.
jQuery UI incluye una cantidad de animaciones ultra-geniales que puedes usar para
que tus sitios web hagan cosas increbles.
Por ejemplo; recuerdas cuando nos lamentbamos porque jQuery no incluye un
efecto .explotar() para nuestro planeta Krypton? Bueno, todava no lo tiene. Pero
jQuery UI tiene un efecto .effect(), y vamos a asignarle el
parmetro 'explode'(explotar).
.bounce()
Genial, verdad? Pero podemos hacer mucho ms que simplemente explotar cosas.
Otro efecto posible es 'bounce'. Lo usamos como un parmetro de.effect() igual
que 'explode', pero agregamos un parmetro adicional para decirle cuntas veces
rebotar. El siguiente cdigo har que nuestro'div' rebote dos veces en 200
milisegundos:
$('div').effect('bounce', {times:2}, 200);

.slide()
Tambin podemos hacer que Krypton aparezca deslizndose, usando .slide(). No es
de extraarse que podamos hacerlo usando el efecto .effect() y asignndole el
parmetro'slide' (deslizar).
Auto de carreras
jQuery UI incluye una funcin .draggable() que permite arrastrar cualquier elemento
de HTML; puedes hacer clic en l y moverlo a cualquier parte de la pgina!
Pensamos que debes estar cansado de los bloques <div>, as que te hicimos un carro
CSS. Trabajamos realmente duro en l.

INICIO A LA PRORAMACION

JavaScript interactivo
Lo que acabamos de ver es un ejemplo de cmo JavaScript puede ser interactivo.
Ahora intntalo t mismo!
Ejemplos:
confirm("Me siento sper!");
confirm("Estoy listo para continuar.");
Estas cajas de dilogos pueden ser usadas en los sitios web para que los
usuarios confirmen acciones. Probablemente las has visto aparecer cuando intentas
borrar cosas importantes o cuando sales de un sitio web sin grabar los cambios.
Qu es programar?
Programar es como escribirle al computador una lista de instrucciones, de forma que
pueda hacer cosas geniales con la informacin que le das.
Los programas no pueden tender tu cama por ti, pero s pueden hacer clculos, llevar
un registro de tu cuenta en el banco o enviarle un mensaje a uno de tus amigos.
Para realizar cualquiera de estas acciones, el programa necesita que se le ingresen
datos. Puedes pedirle al usuario que ingrese datos mediante un prompt.
Ejemplos:
1. prompt("Cul es tu nombre?");
2. prompt("Qu es Ubuntu?");

Tipos de datos I & II: Nmeros y Strings
Existen varios tipos de datos. Y ya usaste dos de ellos!
a. numbers son cantidades, tal como las que conoces. Puedes hacer operaciones
matemticas con ellas.
b. strings son secuencias de caracteres, como las letras a-z, los espacios, e incluso
los nmeros. Todos estos son strings: "Ryan", "4" y"Cul es tu nombre?" Los strings
son muy tiles como etiquetas, nombres y contenido para tus programas.
Para generar un nmero en tu cdigo, simplemente escrbelo como un numeral sin
comillas: 42, 190.12334.
Para escribir un string, debes ponerlo entre comillas: "Cul es tu nombre?"

Tipos de datos III: booleanos
El tercer tipo de dato es un booleano(que se pronuncia "bu-lea-no"; bautizado as en
honor a George Boole). Un booleano puede tener dos valores, true (verdadero)
o false(falso).
Puedes usarlos en tu cdigo haciendo sentencias que sean igual a true o false.
Por ejemplo:
1. 10 > 3 es igual a true
2. 5 < 4 es una locura, as que es igual a false
Los booleanos son bastante tiles porque ms adelante nos permitirn ejecutar ciertas
partes de nuestro cdigo solamente si ciertas condiciones son verdaderas. Por
ejemplo, los cajeros automticos calculan si [la cantidad de dinero en tu cuenta
bancaria] > 0 y solamente te darn dinero si la respuesta es true.

Usando console.log
Posiblemente te hayas dado cuenta de que el intrprete no muestra mensajes de
todas las acciones que ejecuta. As que a veces, cuando queremos saber qu es lo que
est pensando, tenemos que preguntarle directamente.
El comando console.log() toma lo que est entre parntesis y lo registra en la
consola debajo de tu cdigo; por eso es que se llama console.log() (registro de
consola)!
A esta accin se le conoce comnmente como impresin.

Comparaciones
Hemos aprendido acerca de tres tipos de datos: numbers, strings y booleanos. Vamos
a aprender sobre los operadores de comparacin y como se relacionan con los tipos
de datos.
Lista de operadores de comparacin:
> Mayor que
< Menor que
<= Menor o igual que
>= Mayor o igual que
=== Igual que

Decisiones, decisiones...
Buen trabajo con las comparaciones! Ahora vamos a echarle un vistazo a qu tan
tiles pueden ser.
Puedes usar comparaciones ms booleanos para decidir si un bloque de cdigo debe
ejecutarse. A esto se le llama una sentencia if o sentencia condicional.
Mira el cdigo en la parte derecha. El computador primero observa la lnea 1. Si la
condicin (en este caso, si 100 < 2) es true, entonces ejecuta el cdigo dentro de las
llaves {}.
Si la condicin es false, omite el cdigo en las llaves por completo y pasa a la
siguiente lnea, que es la lnea 6.

Los computadores son inteligentes
Buen trabajo con las sentencias if! Ahora vamos a darle a tu robot dos opciones.
El robot ha llegado a una encrucijada en el camino. Va a revisar el programa que
escribiste para decidir qu camino debera tomar.
En forma de cdigo, se ve ms o menos as:
if (si esta condicin es true)
{
// ejecuta este cdigo
}
else // "de otra manera"
{
// ejecuta en cambio este cdigo
}
Tu robot comienza en la primera lnea. Si la condicin es true, se ejecutar el cdigo
en el primer par de llaves, igual que en el ejercicio anterior. Esto har que se ignore el
bloque de cdigoelse.
Pero si la condicin es false, el robot ignorar el primer bloque y ejecutar el bloque
despus de else.
De esta manera, el robot ejecuta una parte del cdigo o la otra, dependiendo de la
condicin en la primera lnea.

Matemticas

Ya hemos visto las operaciones matemticas bsicas. Los smbolos matemticos
bsicos que aprendimos en la escuela tambin funcionan aqu. Hasta el orden en el
que el computador entiende las matemticas es el mismo que en la escuela!
Cdigo:
1. ( ): controla el orden de las operaciones
2. * y /: multiplicacin y divisin
3. - y +: resta y suma
Ejemplos:
1. 100/10 es igual a 10
2. "Jane".length + 5 es igual a 9
3. 5*(3+1) es igual a 20

Matemticas y modulo
Vamos a ver un smbolo interesante llamado modulo. Cuando se coloca %entre dos
nmeros, el computador dividir el primer nmero por el segundo, y luego dar como
resultado el residuo de esa divisin.
As que, si escribimos 23 % 10, estamos dividiendo 23 entre 10, lo que da como
resultado 2, y el residuo es 3. As que 23 % 10 es igual a 3.
Ms ejemplos:
17 % 5 es igual a 2
13 % 7 es igual a 6

Subcadenas
Hemos aprendido unas cuantas maneras de manipular los nmeros. Qu hay acerca
de los strings?
En ocasiones no querrs que aparezca el string completo, sino solo una parte de l.
Por ejemplo, puedes configurar tu bandeja de entrada de Gmail para que muestre los
primeros 50 (o ms o menos) caracteres de cada mensaje, de manera que tengas una
vista previa de ellos. Esta vista previa es unasubcadena del string original (el mensaje
completo).
Cdigo:

"alguna palabra".substring(x, y)donde x es el punto donde se comienza a cortar
y y es el punto donde se termina de cortar el string original.
La parte del nmero es un poco extraa. Para escoger la parte de "ho" en "hola",
tendras que escribir algo as:"hola". substring(0, 2);
Imagnate que hay un marcador a la izquierda de cada caracter, as: 0-h-1-o-2-l-3-a-
4.
Si comienzas a cortar en el 0 y terminas en el 2, tendrs ho.
Ms ejemplos:
1. Las primeras tres letras de "Batman"
"Batman".substring(0,3)
2. Desde la 4ta hasta la 6ta letra de "laptop"
"laptop".substring(3,6)

Variables
Hemos aprendido como hacer algunas cosas: a hacer strings, a saber cuntos
caracteres tiene un string, a saber qu caracter est en una determinada posicin y a
hacer operaciones matemticas bsicas. No est mal para ser el trabajo de un da!
Para escribir un cdigo que sea ms complejo, necesitamos una forma de 'guardar' los
valores de nuestro cdigo. Esto lo hacemos definiendo una variable con un nombre
especfico, que distingue entre maysculas y minsculas. Una vez que crees (o
quedeclares) una variable con un nombre particular, puedes llamar a ese valor
escribiendo el nombre de la variable.
Cdigo:
var nombreVariable = tipo de datos;
Example:
a. var miNombre = "Leng";
b. var miEdad = 30;
c. var esImpar = true;

Cambiar los valores de variables
Hasta ahora hemos aprendido
a. como crear una variable
b. como usar una variable
Ahora vamos a ver cmo cambiar el valor de una variable. El valor de una variable se
puede cambiar fcilmente. Solo pretende que ests creando una nueva variable, pero
usando el nombre de la variable que ya existe!

Ejemplo:
var miEdad = 30;
Digamos que cumpl aos y quiero cambiar cuntos aos tengo.
miEdad = 31;
Ahora el valor de miEdad es 31!
Conclusin: Parte 1
Vamos a hacer un repaso rpido!
Tipos de datos
a. numbers - salos como los nmeros comunes y corrientes
b. strings - todo lo que est entre " " es un string. Las palabras deben ser strings.
c. booleanos - solamente pueden sertrue (verdaderos) o false (falsos).
Variables
Almacenamos valores de datos en las variables. Podemos recuperar los valores de
esas variables escribiendo el nombre de la variable.
Manipular numbers & strings
a. numbers - operadores de comparacin, modulo
b. strings - length, subcadena
console.log( )
Muestra en la consola cualquier cosa que pongamos entre parntesis.
Introduccin a las funciones
Programar es parecido a hornear pasteles. En serio! Imagina que ests tratando de
ensearle a tu amiga Jane como hornear muchos diferentes tipos de pasteles.
Cada pastel requiere de diferentes ingredientes (es decir, datos de entrada). Pero
las instrucciones de 'horneado' siempre son las mismas.
1. Precalienta el horno a 300 grados
2. Mezcla todos los ingredientes en un tazn
3. Mete el contenido en el horno por 30 minutos
Y el resultado ser un pastel diferente cada vez.
Es tedioso tener que repetirle a Jane las mismas instrucciones de 'horneado' todas las
veces. Qu tal si simplemente pudiramos decir 'hornea' y Jane supiera como
ejecutar esos tres pasos? Eso es exactamente lo que es una funcin!
//As es como luce una funcin
var dividirPorTres = function (number) {
var val = number / 3;
console.log(val);
};
//En la lnea 11, llamamos a la funcin por su nombre
//Ahora la llamamos desde 'dividirportres'
//Le decimos al computador cul es el nmero de entrada (es decir, 6)
//Entonces el computador usa el cdigo dentro de la funcin
dividirPorTres(6);

Sintaxis de funcin
Piensa que una funcin tiene cuatro partes.
1. Declara la funcin usando var, y luego asgnale un nombre.
2. Luego debes usar el comando function para decirle al computador que ests haciendo
una funcin.
3. El fragmento entre parntesis es llamado el parmetro. Piensa que es una palabra de
reemplazo a la que le asignamos un valor especfico cuando llamamos a la funcin.
Observa la sugerencia para saber ms.
4. Luego escribe tu cdigo reusable entre { }. Cada lnea de cdigo en este bloque deber
terminar con un ;.
Sintaxis
var nombreDeFuncion = function ( ) {
cdigo cdigo cdigo;
cdigo cdigo cdigo;
(ms lneas de cdigo);
};
Digamos que quieres mostrar en un mensaje un saludo cada vez que una persona
pase al frente de tu escritorio. Y que quieres personalizar ese saludo con sus nombres.
Si escribieras:
console.log("Hola, Betty");

console.log("Hola, Laura");

y as para cada persona, tardaras siglos!
Cmo funciona una funcin?
Vamos a ver exactamente como piensa un computador cuando ve el cdigo de una
funcin.
var nombreDeFuncion = function ( ) {
cdigo cdigo cdigo;
cdigo cdigo cdigo;
(ms lneas de cdigo);
};
1. El comando var declara la funcin.
2. var siempre va seguido de un nombre.
3. El comando function le dice al computador que se trata de una funcin y no de otra
cosa.
4. Los parmetros van entre parntesis. El computador los buscar en el bloque de
cdigo.
5. El bloque de cdigo es el cdigo reusable que est entre llaves { }. Cada lnea de
cdigo dentro de { } debe terminar con punto y coma.
6. La funcin completa termina con punto y coma.
Para usar la funcin, la llamamos tan solo con escribir el nombre de la funcin, y
colocamos un valor de parmetro dentro de los parntesis que van despus. El
computador ejecutar el cdigo reusable con el valor del parmetro especfico
sustituido dentro del cdigo.
Comando return
Buen trabajo! Ahora, cuando llamemos a una funcin, no siempre queremos que
simplemente muestre un mensaje. Algunas veces queremos que retorne un valor.
Entonces podemos usar ese valor (es decir, el resultado de la funcin) en otro cdigo.
Vamos a aprender acerca del comandoreturn, y luego veremos cmo usar las
funciones con una sentencia if / else en el siguiente ejercicio!
El comando return simplemente le devuelve al programador el valor que resulta de
una funcin. De esta forma, una funcin se ejecuta, y cuando se usa return, la funcin
dejar de ejecutarse inmediatamente y devolver el valor.
Para ver detalles sobre las cuatro diferentes maneras de usar return, mira la
sugerencia.

Cuatro formas de usar return
a. retorna el valor de una variable si la variable ha sido declarada dentro de la
funcin
b. retorna el parmetro
c. si el parmetro es un nmero, haz una operacin matemtica con ese
parmetro y podrs retornar el valor
d. si el parmetro es un string, usa comandos como .length or .substring() y
podrs retornar el valor

Funciones con dos parmetros
Hasta ahora solamente hemos visto funciones con un parmetro. Pero a menudo es
til escribir funciones con ms de un parmetro. Por ejemplo, podemos tener la
siguiente funcin:
var areaCaja= function(largo, ancho) {
return largo * ancho;
};
Porque podemos tener ms de un parmetro; esto quiere decir que podemos crear
ms funciones tiles.
Y para llamar a esta funcin, un ejemplo sera areaCaja(3,9). Ahora, queremos saber
el rea de la caja que tiene 3 de largo y 9 de ancho. Claro que se pueden usar otros
parmetros de valores!
Variables Globales vs Locales
Tenemos que conocer un concepto sper importante: mbito. El mbito puede ser
global o local.
Las variables definidas fuera de una funcin son accesibles en cualquier parte una vez
que han sido declaradas. Son llamadas variables globales y su mbito es global.
Las variables definidas dentro de una funcin son variables locales. No se puede
acceder a ellas fuera de la funcin.
El cdigo en la parte derecha no funciona! Queremos que la lnea 15 muestre el valor
de la variable multiplicado. Pero multiplicado es una variable local y solamente se
puede usar dentro de la funcin. Console.log no puede acceder a esta variable local.
Funciones y if / else
Una aplicacin especialmente til de cdigo son las sentencias if / else. Pueden tener
muchas palabras, y ser un dolor de cabeza a la hora de escribirlas repetidamente.
Vamos a escribir una funcin que tome como parmetro los ingresos de una persona.
Dentro de la funcin habr una sentencia if / else. Queremos que la funcin est
disponible para verificar si los ingresos de muchas personas diferentes los califican
para tener una tarjeta de crdito.
Primer bucle for
En vez de escribir manualmente console.log cinco veces, podemos usar un bucle para
hacerlo. El objetivo de este ejercicio es mostrarte como se ve un bucle, y demostrarte
que tan til es. Los ejercicios ms adelante
a. te mostrarn la sintaxis paso a paso
b. te explicarn cmo piensa un computador cuando ejecuta un bucle for.
Inicialmente nos concentramos en usar los bucles solamente para contar nmeros y
conservar las cosas ms simples. Pero en la seccin 3, te mostraremos como hacer
cosas ms complejas!
Iniciando el bucle for
Felicitaciones! Acabas de ejecutar tu primer bucle for. Pero de lo que probablemente
tengas ganas es de escribir tu propio bucle for. En la parte inferior est la sintaxis
general de los bucles for. Vamos a concentrarnos en la primera lnea en los siguientes
ejercicios.
Sintaxis
for (var i = 1; i < 11; i = i + 1;) {
cdigo cdigo cdigo;
}
Cada bucle for hace uso de una variable de conteo. Aqu llamamos a nuestra
variable i (pero puede tener cualquier nombre). La variable desempea muchos
papeles. La primera parte del bucle for le dice al computador que comience con un
valor de 1 para i. Lo hace declarando la variable llamada i y dndole un valor de 1.
Cuando el bucle for ejecuta el cdigo en el bloque de cdigo -la parte entre { }- lo
hace comenzando desde i=1
Finalizando el bucle for
Sabemos como controlar donde comienza un bucle for. Cmo controlamos donde
termina? Bien, la segunda parte del bucle es lo que lo determina.
Sintaxis
for (var i = 1; i < 11; i = i + 1;) {
cdigo cdigo cdigo;
}
As, este bucle seguir ejecutndose hasta que i = 11 (es decir, mientras que i < 11).
As que cuando i = 2, o i = 9, el bucle se ejecutar. Pero cuando ideje de ser menor
que 11, el bucle se detendr.

Controlando el bucle for
Ahora podemos controlar donde comienza y termina un bucle for. Pero, qu hay de
poder controlar lo que pasa durante?
Los ejemplos que hemos visto han usado i = i + 1. Esto significa que cada vez
hemos incrementado la variable i en 1.
Reglas que hay que aprender
a. Un cdigo ms eficiente para incrementar en 1 es i++.
b. Disminuimos en 1 escribiendo i--.
c. Podemos incrementar hasta cualquier valor escribiendo i+=x, donde x es qu tanto
queremos incrementar. Por ejemplo, i+=3incrementa el contador en 3.
d. Podemos disminuir hasta cualquier valor escribiendo i-=x. (Observa la sugerencia
para saber ms.)
Cmo funciona?
Hemos visto los tres elementos de la sintaxis de un bucle for. Pero exactamente
cmo funciona? Vamos a imaginar que en la derecha estn los pasos que sigue el
computador para ejecutar el bucle for.
1. Comienza con i = 2
2. Luego pregunta: i es menor que 13? Como i=2, entonces es true y podemos
continuar.
3. En este momento NO incrementamos. En vez de eso, si la condicin se cumple,
ejecutamos el bloque de cdigo.
4. Aqu el bloque de cdigo imprime el valor de i. En este momento es 2, as que lo que
se imprime es 2.
5. Una vez que el bloque de cdigo est terminado, el bucle for incrementa o disminuye.
Ahora sumamos 1.
6. Y ahora i = 3. Verificamos si es menor que 13. Si es true, ejecutamos el bloque de
cdigo.
7. El bloque de cdigo se ejecuta, y luego incrementamos.
8. Repetimos estos pasos hasta que la condicin i<13 ya no se cumpla.

Conoce los arreglos
Son variables que pueden almacenar nmeros o strings. Pero por ahora solo hemos
podido almacenar UN nmero o UN string. Qu bueno que tenemos arreglos. Arreglos:
a. almacenan listas de datos
b. pueden almacenar diferentes tipos de datos al mismo tiempo
c. estn ordenados de forma que la posicin de cada dato es fija
Ejemplo:
var nombres = ["Mao", "Ghandi","Mandela"];
var tamaos = [4, 6, 3, 2, 1, 9];
var mixto = [34, "dulces", "azul",11];
Sintaxis:
var nombreArreglo = [datos, datos, datos];
Cada vez que veas datos encerrados en [ ], se trata de un arreglo.
Posiciones de los arreglos
Es muy bueno que podamos colocar una lista de datos dentro de un arreglo. Pero
ahora tenemos que aprender como tener acceso a los datos dentro del arreglo.
La posicin de los elementos en un arreglo es fija. As que solamente necesitamos el
nombre del arreglo (en este caso es datosChatarra), y la posicin de los datos que
queremos, y listo.
Pero hay una pequea complicacin. La posicin (o el ndice) de cada dato comienza a
contarse desde 0, no desde 1.
1. Primer elemento en el arreglo:datosChatarra[0]
2. Tercer elemento en el arreglo:datosChatarra[2]
Los arreglos estn indexados con base 0, as que tenemos que comenzar a contar las
posiciones desde 0.
Bucles y arreglos I
Qu buen trabajo! Has aprendido sobre los arreglos, y como acceder a un elemento
del arreglo. Pero, qu tal que el arreglo tuviera 100 elementos?
En los arreglos, una manera til de acceder sistemticamente a cada elemento es
usando un bucle for!
Cmo funciona?

1. La lnea 3 declara el arreglo. ste tiene 4 elementos.
2. Luego, comenzamos por el bucle for en la lnea 5.
3. Vemos que i comienza con un valor de 0.
4. El bucle for se ejecuta hasta que i < 4 (porque ciudades.length es igual a 4. El
arreglo ciudades tiene 4 elementos; consulta la Sugerencia para saber ms.)
5. Incrementaremos i en 1 cada vez que se complete un bucle.
6. Imprimimos ciudades[0], que es igual a "Melbourne".
7. Luego volvemos a empezar el bucle. Excepto que ahora i=1.
8. Imprimiremos ciudades[1], que es "Amn".
9. Esto se repite hasta que i ya no sea menor que ciudades.length.
Bucles y arreglos II
Es hora de que escribas tu propio arreglo y lo combines con un bucle. Recuerda:
1. Debes poner comas entre cada uno de los elementos del arreglo.
2. Debes poner punto y coma entre cada elemento del bucle.
3. Te sugerimos que uses el iteradori.
4. Divirtete escribiendo el cdigo durante este ejercicio!

Bucles y arreglos III
Los bucles y los arreglos a menudo van de la mano. As que vamos a repasar un poco
ms.
Los arreglos contienen un nmero de elementos. Estos elementos estn en un orden
en particular. Los bucles se combinan bien con los arreglos porque iteran en un orden
prestablecido (por ejemplo, i+2 hace que avance de dos en dos).

Codigo De Prueba De Concatenacin De Bucles Usando
Arreglos
/*jshint multistr:true */

texto = "Bla bla bla bla bla bla Eric \
bla bla bla Eric bla bla Eric bla bla \
bla bla bla bla bla Eric";

var miNombre = "Eric";
var aciertos = [];

for(var i = 0; i < texto.length; i++){
if (texto[i] == "E"){
for(var j = i; j < (miNombre.length + i); j++){
aciertos.push(texto[j]);
}
}
}

if (aciertos.length === 0){
console.log("No se encontr tu nombre!");
} else {
console.log(aciertos);
}

A propsito de 'while'
Buen trabajo con los bucles for! Sabemos que ya conoces del tema, pero, solo como
recordatorio; la sintaxis de los bucles for se ve as:
for(var i = inicio; i < fin; i++){
// Realizar una accin
}
En este caso, "inicio" es donde inicia nuestra variable de conteo (por lo general es i) y
"fin" es la condicin que finaliza el bucle.
Pero, qu tal si no sabes por anticipado cul ser tu contador o cuntas veces
tendrs que ejecutar el bucle? Presentamos a while.
Sintaxis de 'while'
El bucle while es ideal cuando quieres usar un bucle pero no sabes cuntas veces
tendrs que ejecutarlo.
En el ejemplo que acabamos de ver, el computador estaba lanzando una moneda al
azar: Con while, si el lanzamiento resultaba en 'cara', la moneda sera lanzada de
nuevo; pero si el resultado era 'sello', el lanzamiento se detendra. Como el
lanzamiento era aleatorio, no podramos saber con anticipacin cuntos bucles
necesitaramos.
La sintaxis se ve as:
while(condicin){
// Realiza una accin!
}
Siempre que la condicin d como resultado true, el bucle seguir ejecutndose. Tan
pronto como el resultado sea false, se detendr.
Como ya eres un experto en los buclesfor, esta sintaxis mucho ms simple debe ser
pan comido.
Un sujeto de bucles infinitos
Bien hecho!
En el ejercicio anterior mencionamos los bucles infinitos. Si le das una condicin que
es true a un bucle while y no creas una forma de que esa condicin posiblemente se
convierta en false, el bucle se seguir ejecutando para siempre y tu programa se
bloquear. Eso no est bien!
Para evitar que esto suceda, siempre debes tener una forma de asegurarte de que la
condicin en medio de los parntesis de while pueda cambiar.
Vers en el editor, en la parte derecha, el mismo cdigo del ejercicio anterior, solo que
esta vez hemos eliminado la parte que cambia la condicin del bucle.
La brevedad es el alma de la programacin
Tal vez hayas notado que cuando le damos a una variable el valor booleano true,
comprobamos esa variable directamente: no nos molestamos en usar ===. Por
ejemplo,
var bool = true;
while(bool){
//Realiza una accin
}
es lo mismo que
var bool = true;
while(bool === true){
//Realiza una accin
}
pero es ms rpido escribir la primera. Acostmbrate a escribir exactamente lo que
necesitas, y no ms!
La prctica hace al maestro
Muy bien. Es hora de que crees un bucle while desde cero!
Hemos escrito una funcin, bucle, en la que vas a escribir tu bucle while, adems de
que hemos creado el bucle vaco.
Recuerda hacer que la condicin que ests comprobando sea igual a true afuera del
bucle; si lo haces dentro del bucle, podra hacer que la condicin sea igual a true una
y otra vez, y se ejecutara para siempre!
Cuando usar 'while' y cuando usar 'for'
Como lo mencionamos, los bucles for son geniales para realizar la misma tarea una y
otra vez, cuando sabes con anticipacin cuntas veces tendrs que repetir los bucles.
Por otro lado, los bucles while son ideales cuando tienes que hacer un bucle pero no
sabes con antelacin cuntas veces tendrs que ejecutarlo.
Sin embargo, como viste, puedes combinar un bucle while con una variable de conteo
para realizar la misma clase de trabajo que hace un bucle for. A menudo en estos
casos es una cuestin de preferencias.
El bucle 'do' / 'while'
A veces quieres estar seguro de que tu bucle se ejecuta al menos una vez, sin
importar nada. Si este es el caso, lo que buscas es un bucle while modificado, llamado
un bucle do/while.
Este bucle dice: "Oye! Realiza esta accin una vez, luego comprueba la condicin
para saber si debemos seguir ejecutando el bucle."
EJEMPLO:
var atacar = true;
var tuAciertas = Math.floor(Math.random() * 2);
var dannoEsteRound = Math.floor(Math.random() * 5 + 1);
var dannoTotal = 0;
while (atacar) {
if (tuAciertas) {
console.log("Lograste golpear y le hiciste" + dannoEsteRound + " dao!");
dannoTotal += dannoEsteRound;
if (dannoTotal >= 4) {
console.log("Lo hiciste! venciste al dragon!");
atacar = false;
} else {
tuAciertas = Math.floor(Math.random() * 2);
}
} else {
console.log("El dragon te hizo cenizas! Estas frito .");
atacar = false;
}
}
If / else if / else
Qu bien! Tambin vamos a practicar un poco con else, as como a aprender sobre
una nueva funcin de lujo: isNaN.
Si usas isNaN con algn elemento, la funcin verifica que ese elemento no sea un
nmero. Por lo tanto:
isNaN('baya') // => true
isNaN(NaN) // => true
isNaN(indefinido) // => true
isNaN(42); // => false
Ten cuidado: si usas isNaN en un string que se parezca a un nmero, como'42',
JavaScript tratar de ayudar, convirtiendo '42' en el nmero 42 y dar como
resultado false (ya que 42s es un nmero).
Completar un switch ya existente
La sentencia switch est compuesta as:
switch (//Alguna expresin) {
case 'opcin1':
// Realiza una accin
break;
case 'opcin2':
// Realiza otra accin
break;
default:
// Realizar otra accin ms
break;
}
JavaScript verificar si la expresin entre el parntesis de switch()coincide con
cada case. Si coinciden, ejecutar el cdigo debajo de cada caso, y en caso de que
ninguno coincida, ejecutar el cdigo default.
Descripcin general
Hasta ahora hemos visto cmo controlar nuestros programas con una sola condicin:
por ejemplo, si una variable es igual a determinado valor. Pero, qu tal si queremos
comprobar ms de una variable?
Para eso necesitaremos los operadores lgicos. JavaScript tiene tres de
ellos: and (&&), or (||), y not(!).
Con ellos podemos comprobar varias variables al mismo tiempo! Observa el cdigo en
el editor.

Y
El operador lgico and se escribe en JavaScript de esta forma: &&. Da como
resultado true cuando ambasexpresiones son true; si no lo son, da como
resultado false.
true && true // => true
true && false // => false
false && true // => false
false && false // => false

Or
El operador lgico or se escribe en JavaScript de esta forma: ||. Da como
resultado true cuando una, o la otra, o ambas expresiones son true; si no lo son, da
como resultado false.
true || true // => true
true || false // => true
false || true // => true
false || false // => false

Not
El operador lgico not se escribe en JavaScript de esta forma: !. Hace que las
expresiones true se vuelvanfalse, y viceversa.
!true // => false
!false // => true

.toUpperCase() y .toLowerCase()
Quizs observaste que utilizamos la funcin .toUpperCase() en el primer ejercicio. La
utilizamos de esta manera:
var variable = prompt("Pregunta para el usuario").toUpperCase();
Esto convierte la respuesta del usuario a MAYSCULAS antes de guardarla en la
variable. Esto ayuda a eliminar problemas que podran surgir si tu programa ejecuta la
prueba para 'SI' pero el usuario escribi 'si'. Los datos de entrada se convierten en
maysculas antes de la comprobacin, por tanto necesitaremos comparar solamente
las maysculas!
Tambin puedes utilizar .toLowerCase(), el cual convierte a minscula todas los
caracteres de un string.
Arreglos heterogneos
Ahora que hemos repasado algunos arreglos bsicos, es hora de aprender algunas
cosas nuevas.
Primero, no es necesario que ubiques el mismo tipo de datos en un arreglo. No tienes
que tener
var pronombres = ["Yo", "T", "Nosotros"];
var numeros = [1, 2, 3];
Puedes tener un arreglo heterogneo, lo que quiere decir que es una mezcla de
tipos , as:
var mix = [42, verdadero, "toalla"];

Arreglos de arreglos
Qu bien! Lo siguiente a saber es que, no solamente puedes colocar una combinacin
de tipos en un arreglo, sino que tambin puedes colocar otros arreglos dentro de los
arreglos. Puedes hacer un arreglo en dos dimensionesanidando los arreglos en una
capa ms adentro, as:
var 2d = [[1, 1], [1, 1]];
Este arreglo tiene dos dimensiones porque contiene dos filas, y cada una contiene dos
elementos. Si quisieras insertar una nueva lnea entre las dos filas, podras mostrar en
la consola un objeto 2D (un cuadrado), as:
[1, 1]
[1, 1]

PYTHON

Bienvenido al "Flying Circus"
Python es un lenguaje de programacin flexible y poderoso, que puedes usar en
desarrollo web/de Internet, para escribir interfaces grficas de usuario (GUI) de
escritorio, crear juegos, y mucho ms. Python es:
De alto nivel, lo que quiere decir que leer y escribir en Python es realmente fcil;
se parece mucho al ingls comn y corriente!
Interpretado: quiere decir que no necesitas un compilador para escribir y ejecutar
Python! Puedes escribirlo aqu, en Codecademy, o incluso en tu propio computador
(muchos ya vienen con elintrprete Python incorporado; ms adelante en esta
leccin hablaremos del intrprete).
Orientado a los objetos, quiere decir que les permite a los usuarios manipular
estructuras de datos llamadas objetos, para construir y ejecutar programas. Ms
adelante aprenderemos ms sobre los objetos.
Divertido de usar. El nombre de Python viene de la comedia britnicaMonty
Python's Flying Circus, y el cdigo y los tutoriales de ejemplo a menudo incluyen
bromas del programa, con el fin de hacer que el aprendizaje del lenguaje sea ms
interesante.
Para este curso no se requieren conocimientos previos de Python en particular, ni de
programacin o informtica en general.

Variables
Uno de los conceptos ms bsicos en programacin son las variables. Una variable
es una palabra/identificador que capta un nico valor. Por ejemplo, digamos que para
tu programa necesitas el nmero 5, pero no lo vas a usar de inmediato. Puedes
establecer una variable, digamos jamon, para que capte el valor 5 y guardarla para
usarla ms tarde, as:
jamon = 5
Es fcil declarar variables en Python; solamente tienes que escribir un
nombre/identificador, como jamon, y usar = para asignarle un valor, y listo!

Tipos de datos
Grandioso! Ahora, cada vez que lo necesitemos, podemos tomar el
valor10 refirindonos al nombre mi_variable.
En este caso, el tipo de datos de mi_variable es entero (un nmero entero positivo
o negativo). Hay tres tipos de datos en Python que nos interesan en este
momento: enteros, reales (nmeros fraccionarios escritos con un punto decimal,
como 1.970), y booleanos (que pueden ser True o False).
Los programas de computador, en gran parte, son creados para manipular datos. Por
lo tanto, es importante entender los diferentes tipos de datos que podemos incorporar
en nuestros programas.
Nunca uses las comillas (' o ") con los booleanos, y siempre usa mayscula
inicial! Python distingue entre maysculas y minsculas. Usaremos las comillas
cuando lleguemos a los strings, los cuales veremos en la siguiente unidad.

Qu es una sentencia?

Imagina que una sentencia en Python es parecida a una oracin en espaol: es la
unidad ms pequea del lenguaje que tiene sentido propio. As como "Me", "gusta",
"el" y "jamn" no son oraciones por s solas, pero "Me gusta el jamn" s lo es, las
variables y los tipos de datos en Python no son sentencias por s solos, pero son los
bloques que las forman.
Siguiendo esta comparacin con las oraciones; es claro que adems necesitamos
algn tipo de signo de puntuacin para que sea obvio en qu punto termina una
sentencia y en qu punto comienza otra. Si conoces JavaScript, sabrs que en ese
lenguaje las sentencias terminan con un punto y coma (;). En Python, las sentencias
estn separadas por espacios en blanco. As como no se puede colocar punto y
coma donde quieras en JavaScript, no puedes colocar espacios en blanco al azar en
Python.
Tal vez te tome un poco de tiempo acostumbrarte a esto, en especial si vienes de
practicar con un lenguaje de programacin donde no importan los espacios en blanco.
Los espacios en blanco son espacios correctos
Observa el error que apareci cuando ejecutaste el cdigo en el
editor:IndentationError: expected an indented block. Vers este mensaje de error
cada vez que tus espacios en blanco en Python no estn donde deben. (Si has
estudiado JavaScript, imagina que el uso inadecuado de los espacios es como el uso
inadecuado de ; o {}). Cuando tu puntuacin no est bien, lo que quieres dar a
entender puede cambiar completamente.
El campesino dijo, "La bruja me convirti en un tritn!"
"El campesino", dijo la bruja, "me convirti en un tritn!"
Ves a qu nos referimos?

Una cuestin de interpretacin
En la introduccin a esta unidad mencionamos que Python es un
lenguaje interpretado (es decir, que se ejecuta usando un intrprete). En el
contexto de Codecademy, el intrprete es la ventana de consola/salida en la esquina
inferior derecha de la pantalla.
Por ahora, imagina que el intrprete es un programa que toma el cdigo que escribes,
lo revisa en busca de errores de sintaxis, y ejecuta las sentencias en ese cdigo, lnea
por lnea. Funciona como un mediador entre el computador y t, y te permite saber el
resultado de las instrucciones que le das a la mquina.
Comentarios de una sola lnea
Habrs notado algunas instrucciones en el editor que comienzan con un smbolo
de # (numeral). Estas lneas del cdigo se llaman comentarios, y el intrprete no
las leeno afectan al cdigo en absoluto. Son simples comentarios en espaol escritos
por el programador, que sirven como instrucciones o explicaciones del funcionamiento
de una parte del programa en particular.
Como los comentarios mejoran en gran medida la legibilidad de nuestro cdigo (y te
servirn para depurar los programas de forma ms rpida, ya que podrs identificar
de un vistazo lo que se supone que debe hacer cada parte del programa), te
recomendamos que escribas comentarios en tu cdigo cuando su propsito no sea
inmediatamente obvio.
Comentarios de varias lneas
A veces tienes que escribir un comentario realmente largo. #nicamente funciona en
una sola lnea; y si bien podras escribir un comentario de varias lneas y comenzar
cada una con #, esa tarea puede ser fastidiosa.
Si quieres escribir un comentario que abarque varias lneas, puedes incluir el bloque
entero en un grupo de tres comillas, as:
"""Soy un leador y me siento con energa, duermo toda la noche, y trabajo todo
el da!"""

Operadores aritmticos
Las sentencias de Python no se limitan a simples expresiones de asignacin
como jamon = 3; tambin comprenden una cantidad de expresiones matemticas
usando operadores aritmticos.
Hay seis operadores aritmticos en los cuales nos vamos a concentrar:
1. Suma (+)
2. Resta (-)
3. Multiplicacin (*)
4. Divisin (/)
5. Exponenciacin (**)
6. Mdulo (%)

Exponenciacin
Excelente trabajo!
Todas las operaciones aritmticas que has hecho hasta el momento probablemente
han sido intuitivas o han reflejado el trabajo que ya has hecho en otros lenguajes de
programacin (como JavaScript). Sin embrago, tal vez la exponenciacin sea nueva,
as que requiere un poco de explicacin.
El operador ** eleva el primer nmero, la base, a la potencia del segundo nmero,
el exponente. As que, si escribes 2 ** 3, obtendrs 8(2 ** 3 es lo mismo que 2 * 2
* 2, ambos son igual a 8). 5 ** 2 = 25, 2** 4 = 16, y as sucesivamente.

Repaso general

Buen trabajo! Hasta el momento has aprendido lo siguiente en Python:
Variables, que son referencias que contienen valores;
Tipos de datos (tales como enteros,reales, and booleanos);
Espacios en blanco (y por qu son importantes!);
Sentencias (y la manera en que las sentencias de Python son similares a las
oraciones en el espaol normal);
Comentarios (y por qu son buenos para tu cdigo!); y
Operadores aritmticos (incluyendo +, -, *, /, **, y %).

Paso uno: strings
(Para este curso se requiere haber visto la Unidad 1: Sintaxis de Python.)
Otro tipo de datos til en Python son los string. Los strings son cadenas de
caracteres, lo que es una manera ms formal de decir que en realidad son frases en
espaol comn y corriente. Pueden incluir nmeros, letras, y varios smbolos
como: "Somos los#1!"
Un string literal es un string creado al escribirlo literalmente en medio de comillas ('
' o " "). Sin embargo, debes usar el mismo tipo de comillas en cada extremo del
string: no debe ser 'string" ni "string'!

Cuatro mtodos para la locura
Buen trabajo! Ahora hablaremos acerca de algunos de los mtodos que estn
disponibles para ser usados con strings.
Un mtodo es una funcin de un objeto especfico (veremos los objetos ms
adelante). Una funcin es un fragmento de cdigo que resuelve un problema
particular o que desempea una tarea especfica. (En la Unidad 4 veremos las
funciones.) Por ahora, la idea principal es que los mtodos de string son fragmentos
de cdigo pre-construidos que desempean tareas especficas para los strings.
En esta seccin, vamos a concentrarnos en cuatro mtodos de string:
1. len() = Retorna la longitud del String se utiliza len(var_name)
2. lower()= Transforma todo nuestro String a Minusculas. se utiliza var_name.lower
3. upper()=Transforma todo nuestro String a Mayusculas. se utiliza var_name.upper
4. str()= Transforma en cualquier dato a String. Se utiliza str(var_name)

lower()
Bien hecho. Observa que len()retorna la longitud (es decir, la cantidad de caracteres)
del string con el cual es usado.
Pero, digamos que no quieres que tu string (en este caso, "Azul Noruego") lleve
ninguna mayscula. En este ejemplo, cambiar "Azul Noruego" a"azul
noruego" representa un poco de trabajo manual. Pero, qu tal si quisieras pasar miles
de palabras de maysculas a minsculas? Hacerlo de forma manual podra tardar por
siempre.
str()
Parece que de verdad ests dominando los mtodos de strings en Python. En caso de
que te ests aburriendo un poco (y sabemos que ajustar las maysculas y minsculas
de un string no es lo ms emocionante del mundo), intenta usar el mtodo str(), a
ver qu te parece.
El mtodo str() retorna un string que contiene una representacin mostrable de
cualquier cosa que hayas puesto entre parntesis. Crea strings a partir de cosas que
no son strings!

Notacin de puntos
Como lo prometimos, ahora explicaremos la razn por la que
usaslen(string) y str(objeto), pero usasla notacin de
puntos (P.ej.,"String".upper()) con el resto.
La notacin de puntos funciona en los string literales ("The Ministry of Silly
Walks".upper()) y en las variables asignadas a los strings (ministry.upper()) porque
estos mtodos son especficos de los strings; es decir, no funcionan con ningn otro
elemento. En comparacin, len() ystr() pueden funcionar con un montn de objetos
diferentes (que veremos ms adelante), as que no se les puede asociar nicamente a
los strings con notacin de puntos.
Uso de print con strings literales
Ya hemos identificado la ventana en la parte inferior derecha de la pantalla
como consola/intrprete. Te hemos explicado el intrprete: puedes imaginar que es
un pequeo programa que transporta informacin entre tu cdigo de Python y el
computador cuando presionas "Ejecutar." La ventana en la que el intrprete muestra
la salida de tu cdigo es la consola. (Si conoces JavaScript, sabes
queconsole.log registra el resultado de la evaluacin de tu cdigo en la consola;
print es la versin de Python deconsole.log.)
Si no has estudiado JavaScript, no temas! Todo lo que debes saber es que
print muestra en la consola el resultado de la evaluacin que el intrprete hace de tu
cdigo, para que la puedas ver.
Concatenacin de strings
Sabes acerca de strings, y sabes acerca de operadores aritmticos. Pero, sabas que
algunos operadores aritmticos funcionan en los strings?
Si usas el operador + en medio de dos strings, los concatena (los une). "Monty " +
"Python" dar como resultado "Monty Python"!

Conversin explcita de strings
Recuerdas cuando hablamos del mtodo str() un par de lecciones atrs, y de cmo
convierte elementos que no son strings en strings? El nombre elegante de ese proceso
esconversin explcita de strings. Le ests diciendo explcitamente a Python: "Hey,
yo s que esto no es un string, pero lo quiero convertir en uno." Compralo con el
proceso implcito de literalmente colocarle comillas a una secuencia de caracteres,
para convertirla en un string.
Formateo de strings con %, parte 1
Que buen trabajo llevas hasta ahora. Esta es la ltima cosa que vamos a ver antes de
que hagamos el repaso!
Anteriormente vimos que puedes acceder a los caracteres individuales de un string
mediante el desplazamiento, o, si lo quieres imaginar de esa forma, mediante una
ID numrica. (Recuerda, "PYTHON"[1]es "Y", no "P"!) Desafortunadamente, los strings
en Python son inmutables; no los puedes cambiar una vez que los hayas creado.
Sin embargo, existe una manera de hacer que tus strings sean flexibles, y es con
el formateo de strings. Usa el smbolo % (no lo confundas con el mdulo!), y
puedes imaginar que es una variable para tu string.
Formateo de strings con %, parte 2
Viste? El formateador de strings % reemplaza los %s (la "s" es de "string") en nuestro
string con las variables entre parntesis. (Lo podramos haber hecho simplemente
colocando "Camelot" y "lugar" entre parntesis despus del string, pero queramos
mostrarte cmo funciona con las variables.)
La sintaxis sera as:
print "%s" % (variable)
Puedes tener las variables (o strings!) que quieras, separadas por comas, en medio
de tus parntesis.

La biblioteca datetime
En este pequeo proyecto, crearemos un programa que experimente con la habilidad
de Python de darnos la fecha y hora actuales. Con esto podrs practicar mostrar
strings, concatenacin, y la funcin de conversin explcita str().
Al finalizar esta leccin, sabrs mostrar la hora y la fecha en el siguiente
formato: mm/dd/aaaa hh:mm:ss
En la lnea 1, observa la sentencia fromdatetime import datetime. La importacin de
funcionalidades especiales en tus programas se ver en la discusin sobre la sentencia
import de la Unidad 4.
Por ahora, simplemente debes saber que le estamos diciendo al intrprete de Python
para que nuestro programa pueda recuperar la fecha y la hora.
En el siguiente ejercicio, veremos cmo recuperar explcitamente esta informacin.
Obtener la hora y fecha actuales
Para recuperar la fecha y hora actuales, podemos usar una funcin llamada
datetime.now() para obtener dicha informacin.
En un curso posterior, aprenders todo sobre "funciones." Por ahora, simplemente
debes saber que datetime.now() llama a un bloque de cdigo que viene con Python
para averiguar la fecha y la hora.
Extraer informacin
Observa cmo obtuvimos un dato de salida con la forma 2012-07-19 12:50:53.180759.
Se ve muy feo.
Examinemos cmo extraer porciones de la fecha y la hora para finalmente mostrar
una versin ms "bonita" de esta informacin.
Empecemos recuperando el mes, el da y el ao del resultado dedatetime.now(). Para
hacerlo, podemos usar nuestra variable ahorade la siguiente manera: anno_actual
=ahora.year.
Por supuesto, la variable del lado izquierdo de la asignacin puede tener cualquier
nombre.
El hecho de que podamos extraer partes de la fecha con una sintaxis tan elegante es
bastante sorprendente. Como puedes suponer, podemos usar una sintaxis similar para
extraer el mesy el da.
Nota: no te preocupes por los detalles de la notacin de ahora.year, se llama
"notacin de puntos" y se usa para acceder a datos de un "objeto". Esto se present
en la Unidad 2.
Fecha especial
Buen trabajo mostrando los componentes de la fecha! Como preparacin para
nuestro objetivo ltimo de mostrar mm/dd/aaaahh:mm:ss, empecemos agregando barras
diagonales / a las partes de la fecha.
Podras hacer algo como esto:
print ahora.month, "/", ahora.day,"/", ahora.year
Sin embargo, de esta forma te aparecern espacios entre las barras diagonales.
Entonces, la mejor solucin es concatenar strings (usando el operador +), cubierto en
la Unidad 2.
Como puedes ver, no es tan simple como agregar la concatenacin -- principalmente
porque la concatenacin solamente funciona con strings.
Cuando extraes informacin como ahora.year, terminas con un nmero entero. Para
convertir un nmero entero en un string, puedes usar la funcin str(). Por ejemplo, si
una variable x tuviera el valor 4 y quisiramos convertirlo en "4", podras usar str(x).

Sigue el flujo
(Este curso supone la familiarizacin con el material presentado en la Unidad 1:
Sintaxis de Python y en laUnidad 2: Strings y salida en consola. De ahora en adelante,
da por hecho que cada nuevo curso suponga conocimiento del material presentado en
los cursos anteriores.)
Tal vez hayas notado que los programas de Python que hemos escrito hasta ahora
han sido ms o menos monotemticos. Hacen la suma de dos nmeros o
usan print para mostrar algo en la consola, pero no tienen la capacidad de escoger un
resultado en vez de otro, como por ejemplo; sumar dos nmeros si su suma es menor
que 100, o en lugar de eso, usar print para mostrar los nmeros en la consola sin
sumarlos, en caso de que su suma sea mayor que 100.
El control de flujo nos permite tener estos resultados mltiples y seleccionar uno
basados en lo que est ocurriendo en el programa. Se pueden producir diferentes
resultados con base en las entradas del usuario o una gran variedad de factores en el
entorno del programa. (El entorno es el nombre tcnico para todas las variablesy
sus valoresque existen en el programa en un momento determinado.)
Compara de cerca!
No nos adelantemos. Primero, comenzaremos con el aspecto ms simple del control
de flujo: los comparadores. Existen seis comparadores, y apostaramos a que al
menos unos cuantos te parecen familiares:
1. Igual a (==) *
2. No es igual a (!=)
3. Menor que (<)
4. Menor o igual que (<=)
5. Mayor que (>)
6. Mayor o igual que (>=)
Fjate que == es usado para comparar si dos objetos con iguales, y que = es usado
para asignar un valor a una variable.
Esperamos que ests familiarizado con los conceptos de mayor/menor que y
mayor/menor o igual que (aunque probablemente has visto ese ltimo escrito as: y
). Funcionan exactamente como te lo imaginas: prueban si un nmero es igual (o
no) a, mayor (o igual) que, o menor (o igual) que otro nmero.
(Si vienes de las lecciones de JavaScript: en Python no existe ===.)

Ser and/or No Ser
Los operadores booleanos (uoperadores lgicos) son palabras usadas para
conectar las sentencias de Python de forma gramaticalmente correcta, casi igual que
en ingls. Existen tres operadores booleanos en Python:
1. and, que quiere decir "y" en espaol;
2. or, que significa "o" en espaol, y quiere decir "una cosa O la otra o AMBAS" (no
es exclusivamente una o la otra, as como pasa seguido en espaol);
3. not, que quiere decir "no" en espaol.
Queremos enfatizar el segundo caso: si tu mam te dice que puedes tener las
pelculas Monty Python and the Holy Grail O Monty Python's Life of Brian, lo que
probablemente quiere decir "una o la otra, pero no las dos." Por otro lado, Python no
tendra problema con que escogieras ambas, siempre y cuando tu eleccin no
sea ninguna de las dos. Es decir, Python es ms divertido que tu mam.
Los operadores booleanos generan valores booleanos: True o False (era de
esperarse). Vamos a ver los tres operadores uno por uno.

Sintaxis de sentencias condicionales
Recuerdas cuando te mostramos que los espacios en Python son importantes? Si no
lo recuerdas, toma nota: los espacios en Python son importantes. Si haz aprendido
algo de JavaScript aqu en Codecademy, sabes que el bloque de cdigo que ejecuta
una sentencia if est delimitado por llaves ({}). En Python, los espacios se encargan
de hacer ese trabajo por nosotros.

Aqu hay un ejemplo de una sentencia if en Python:
if 8 < 9:
print "Ocho es menor que nueve!"
if siempre va seguido de una expresin, la cual va seguida de dos puntos (:).
El bloque de cdigo (el cdigo que ser ejecutado en caso de que la expresin sea
igual a True) est indentado.
Esto tambin es vlido para las funciones elif y else (las cuales veremos en un
momento). La sintaxis completa debe verse ms o menos as:
if 8 < 9:
print "Yo salgo en la pantalla!"
elif 8 > 9:
print "Yo no salgo en la pantalla."
else:
print "Yo tampoco salgo en la pantalla!"

Problemas con else? Qu pena me da...
En Python, la sentencia else es el complemento de la sentencia if. Si bien una
sentencia if har que el programa contine en la siguiente lnea de cdigo despus
del bloque de cdigo if, incluso si no hay una sentencia else, se considera una buena
prctica escribir una sentencia else por cada sentencia if. Un par if/else le indica a
Python lo siguiente: "Si esta expresin es True, ejecuta este bloque de cdigo
indentado; de lo contrario, ejecuta este cdigo despus de la sentencia else."
Recuerdas el primer ejercicio de esta seccin, cuando te dijimos "haz que
response sea igual a 'Y'; de lo contrario, haz que sea igual a 'N'"? sa era una
especie de sentencia if/else!

Desglosarlos
Cuando comienzas un proyecto grande como este, es importante dedicar un tiempo a
descomponer el problema en pasos individuales. Despus, puedes empezar a trabajar
(y probar) un paso a la vez, en lugar de intentar escribir un programa enorme de una
sola vez!
Pensemos en el problema de Pig Latin. Pig Latin es un lenguaje creado en el que se
toma la primera letra de una palabra y se pone al final de la misma y se le agrega
tambin un sonido voclico. Por ejemplo, la palabra perro sera "erropei". Cules
pasos debemos seguir?
1. Pedir al usuario que ingrese una palabra en espaol
2. Verificar que el usuario ingres una palabra vlida
3. Convertir la palabra de espaol al Pig Latin de Python
4. Mostrar el resultado de la traduccin
Nota que algunos de los pasos se pueden dividir a su vez en pasos individuales. Por
ejemplo, queremos pensar detenidamente en el algoritmo para el paso N. 3 antes de
empezar a escribir el cdigo.
Un poco de tiempo invertido pensando detenidamente en la descomposicin y los
algoritmos para tu programa puede ahorrarte MUCHOS momentos frustrantes ms
adelante!
Toma una hoja de papel y elabora un algoritmo para el paso N. 3 del proyecto.
var = ('Sentencia'.decode('utf-8')) es la forma de capturar datos ingresados
por el usuario y asignarlos a una variable
var_name.isalpha() = se utiliza para verificar que el contenido de un string
sea exclusivamente caracteres alfabticos
La regla para la traduccin aqu es un poco ms compleja. Debes eliminar la primera
letra de la palabra, pasarla al final y despus agregar el sufijo 'ei'.
La manera ms apropiada para obtener el resto del string despus de eliminar la
primera letra es usar slicing. Si tienes un string s, puedes obtener "el resto"
de s desde i hasta j usando s[i:j]. Con esto obtienes los caracteres desde la
posicin i hasta la j.
Por ejemplo, si s = "foo", entonces s[0:2] devuelve "fo". Piensa en cmo usar esta
tcnica para obtener el resto del string sin la primera letra.

Qu tan buenas son las funciones?
Una funcin es una seccin de cdigo reutilizable, escrita para realizar una tarea
especfica en un programa. Tal vez te preguntes por qu debes separar tu cdigo en
funciones, en lugar de simplemente escribirlo todo en un bloque gigante.
Probablemente ya hayas adivinado las respuestas, pero aqu estn algunas de las ms
importantes:
1. En caso de que algo salga mal en tu cdigo, es mucho ms fcil encontrar y arreglar
los errores si has organizado bien tu programa. Asignar tareas especficas a funciones
separadas ayuda en esta organizacin.
2. Mediante la asignacin de tareas especficas a funciones separadas (una idea que los
expertos en informtica llaman separacin de preocupaciones), puedes hacer tu
programa menos redundante y tu cdigo ms reutilizable; no solamente puedes usar
repetidamente la misma funcin en un solo programa, sin necesidad de reescribirla
cada vez, sino que incluso puedes usar esa funcin enotro programa.
3. Cuando aprendamos ms acerca de los objetos, vers que hay muchas cosas
interesantes que podemos hacer con las funciones que pertenecen a esos objetos
(llamadas mtodos).
max()
La funcin max() toma cualquier cantidad de argumentos y retorna el mayor de ellos.
(Aqu, "el mayor" puede tener significados variados, as que es mejor usar max() en
cosas como enteros y reales, en donde los resultados son concretos, y no en otros
objetos, como strings.)
Por ejemplo, max(1,2,3) dar como resultado 3 (el nmero mayor en el conjunto de
argumentos).

min()
Como te habrs imaginado, min()hace lo contrario de max(): dada una serie de
argumentos, retorna el menor de ellos.
abs()
La funcin abs() retorna el valor absoluto del nmero que toma como argumento;
es decir, la distancia desde0 hasta ese nmero en una lnea imaginaria de nmeros,
sin importar si es positivo o negativo. Por ejemplo, 3y -3 tienen la misma distancia
desde0, y por lo tanto, tienen el mismo valor absoluto: 3. La funcin abs()siempre
retorna un valor positivo, y a diferencia de max() y min(), solamente puede tomar un
solo nmero.
type()
Por ltimo, la funcin type() hace algo muy interesante: retorna el tipo de los datos
que recibe como argumento. Si le pides a Python que haga lo siguiente:
print type(42)
print type(4.2)
print type('jamon')
print type({'Nombre':'John Cleese'})
print type((1,2))
Python dar como resultado:
<type 'int'>
<type 'float'>
<type 'str'>
<type 'dict'>
<type 'tuple'>
Ya conoces los enteros (int), reales (float), y los strings; en lecciones posteriores
aprenders acerca de los diccionarios (dict) y las tuplas (tuple).
Introduccin a las listas
Las listas son un tipo de datos que puedes usar para almacenar una coleccin de
diferentes fragmentos de informacin en forma de secuencia, bajo un solo nombre de
variable. (Los tipos de datos que ya aprendiste incluyen strings, nmeros, y
booleanos.)
Puedes asignar elementos a una lista con una expresin de la
formanombre_de_lista= [elemento_1, elemento_2], con los elementos en medio de
corchetes. Una lista tambin puede estar vaca: lista_vacia = [].

Acceso mediante ndices
Puedes acceder a un elemento individual de la lista mediante sundice. Un ndice es
como una direccin que identifica la posicin de un elemento en una lista. El ndice
aparece directamente despus del nombre de la lista, en medio de corchetes,
as: nombre_de_lista[ndice]
Los ndices de las listas comienzan con 0, no con 1! Puedes acceder al primer
elemento de una lista as:nombre_de_lista[0]. El segundo elemento de una lista se
encuentra en el ndice 1: nombre_de_lista[1]. A los expertos en informtica les
encanta comenzar a contar desde cero.
Nuevos vecinos
El ndice de una lista se comporta como cualquier otro nombre de variable! Puede ser
usado para acceder a y asignar valores.
Ya viste cmo acceder a un ndice de lista, as:
zoo_animals[0]
#recupera el valor "pangolin"
En la lnea 5 puedes ver cmo funciona la asignacin:
zoo_animals[2] = "hiena"
#cambia "perezoso" por "hiena"

Retrasos y longitud de listas
Una lista no tiene que tener una longitud fija: puedes aadir elementos al final de una
lista cada vez que quieras! En Python, decimos que las listas son mutables, es decir,
que se pueden cambiar.
Puedes aadir elementos a las listas con la funcin incorporada de listas append(), as:
nombre_de_lista.append(elemento)
chale un vistazo: hemos usado append para aadir un string a maletinen la lnea 2.
Puedes saber cuntos elementos tiene una lista con la funcin len() (es "length"
(longitud) abreviado), as:
len(nombre_de_lista)

Particionado de listas
Si solo quieres una pequea parte de la lista, se puede acceder a esa porcin usando
una notacin especial en los corchetes del ndice.nombre_de_lista[a:b] retornar una
porcin de nombre_de_lista, comenzando con el ndice a y terminando antes del
ndice b.
Si le dices a Python mi_lista = [0, 1,2, 3], entonces mi_lista[1:3]retornar la
lista [1, 2], sin cambiar la lista original! Observa:
mi_lista = [0, 1, 2, 3]
mi_porcion = mi_lista[1:3]
print mi_lista
#mostrar [0, 1, 2, 3]
print mi_porcion
#mostrar [1, 2]

Particionado de listas y de strings
Puedes particionar un string exactamente igual que una lista! De hecho, puedes
imaginar que los strings son listas de caracteres: cada caracter es un elemento en
secuencia de la lista, comenzando desde el ndice 0.
Si la porcin de tu lista incluye el primer o el ltimo elemento en una lista (o en un
string), el ndice de se elemento no tiene que estar incluido. Aqu hay un ejemplo:
mi_lista[:2]
#recupera los dos primeros elementos
mi_lista[3:]
#recupera del cuarto al ltimo elemento

Mantener el orden
Puedes buscar a travs de una lista con la funcin index().mi_lista.index("dog") dar
como resultado el primer ndice que contenga el string "dog". Ocurrir un error si ese
elemento no existe.
Los elementos pueden ser aadidos a la mitad de una lista (en lugar de al final) con la
funcin insert().mi_lista.insert(4,"cat") aade el elemento "cat" al ndice 4
de miLista, y desplaza el elemento que estaba en el ndice 4 y todos los elementos
que le siguen al siguiente ndice (es decir, todos se mueven un ndice hacia adelante).
Para uno y para todos
Si quieres hacer algo con cada elemento de la lista, puedes usar un bucle for. Presta
mucha atencin si has aprendido sobre los bucles for en JavaScript! Son diferentes en
Python.
Aqu est la sintaxis:
for variable in nombre_de_lista:
# Haz algo!
El nombre de una variable sigue a la instruccin for; a su vez se le asignar el valor
de cada elemento de la lista.in nombre_de_lista designa anombre_de_lista como la
lista en la que el bucle funcionar. La lnea termina con un signo de dos puntos (:) y
el cdigo indentado que la sigue ser ejecutado una vez por cada elemento de la lista.
Ms con 'for'
Si tu lista es un revoltijo, tal vez necesites ordenarla con ayuda
desort(). mi_lista.sort() ordenar los elementos en mi_lista en orden
numrico/alfabtico ascendente.
Vale la pena resaltar que sort() no genera una lista nueva; en vez de eso, tu
lista mi_lista es ordenada en su lugar (la versin ordenada reemplaza la versin sin
ordenar).

Esta parte que sigue es clave
Un diccionario es parecido a una lista, solo que puedes acceder a los valores buscando
una clave en vez de un ndice. Una clave puede ser cualquier string o nmero. Los
diccionarios se encuentran rodeados por llaves, as:
d = {'clave1' : 1, 'clave2' : 2, 'clave3' : 3}
Este es un diccionario llamado d con tres pares clave-valor. La clave'clave1' apunta
al valor 1, 'clave2'a 2, y as sucesivamente.
Los diccionarios son grandiosos para cosas como las guas telefnicas (hacer una
pareja de nombre y nmero telefnico), pginas de inicio de sesin (hacer una pareja
de una direccin de correo electrnico y un nombre de usuario), y ms!

Nuevas entradas
Cuando se asigna una nueva clave, se crea un nuevo par clave-valor en un diccionario,
as:
nombre_diccionario[clave_nueva] = valor_nuevo
Un par de llaves vaco {} es un diccionario vaco, tal como un par de corchetes
vaco [] es una lista vaca.
La longitud len() de un diccionario es la cantidad de pares clave-valor que contiene.
Cada par se cuenta solo una vez, incluso si el valor es una lista. (As es: puedes
colocar listas dentro de los diccionarios!)

Cambiar de parecer
Al igual que las listas, los diccionarios son mutables (se pueden cambiar). Se pueden
eliminar elementos de un diccionario usando el comando del:
del nombre_diccionario[nombre_clave]
eliminar del diccionario la clave nombre_clave y su valor asociado.
Se puede asociar un nuevo valor a una clave asignndole un valor a la clave, as:
nombre_diccionario[clave] = valor_nuevo

Es peligroso ir solo! Llvate esto
Por ltimo, mi_lista.remove(valor)eliminar el primer elemento de mi_lista cuyo
valor sea igual a valor. La diferencia entre del y .remove() es:
1. del elimina una clave y su valor con base en la clave que le indiques que elimine.
2. .remove() elimina una clave y su valor con base en el valor que le indiques que
elimine.

Antes de comenzar
Antes de comenzar nuestro ejercicio, vamos a repasar una vez ms los bucles for de
Python. Por ahora, solamente vamos a repasar el bucle for en trminos de cmo se
relaciona con listas y diccionarios. En cursos posteriores explicaremos ms usos
geniales de los bucles for.
Los bucles for nos permiten iterar a travs de los elementos de una lista, desde el
que est en el extremo izquierdo (el elemento cero) hasta el que est en el extremo
derecho. Un bucle de ejemplo estara estructurado de la siguiente forma:
a = ["Una lista de algun tipo]
for x in a:
# hace algo para cada x
Este bucle ejecutar todo el cdigo del bloque indentado debajo de la
sentencia for x in a:. x ser el tem de la lista que se est calculando en este
momento. As que, si ejecutamos:
for item in [1, 3, 21]:
print item
mostrar en pantalla 1, luego 3, y luego 21. La variable en medio de for e in puede
tener cualquier nombre de variable (en el momento se llama tem), pero debes tener
cuidado de evitar usar la palabra list como variable, ya que esa es una palabra
reservada (es decir, significa algo especial) en el lenguaje de Python.
Esto es CLAVE!
Tambin puedes usar un bucle for en un diccionario para iterar a travs de
sus valores, con lo siguiente:
d = {"foo" : "bar"}

for clave in d:
print d[clave] # muestra "bar"
Ten en cuenta que los diccionarios estn desordenados, es decir, que cada vez que
hagas un bucle travs de un diccionario, pasars por cada clave, pero no tendrs
garantizado que las veas en un orden particular.

Control de flujo y bucles
Los bloques de cdigo en un bucle for pueden ser tan grandes o tan pequeos como
sea necesario. Cuando haces bucles, tal vez quieras llevar a cabo diferentes acciones
dependiendo del tem particular en la lista. Esto se puede lograr combinando tus
bucles con el control de flujo (sentencias if/else), que se parezcan a lo siguiente:
for item in numeros:
if (condicion == True):
# haz algo
else:
# haz otra cosa
Asegrate de controlar tu indentacin, o podras terminar confundido!

Apuntes de Curso HTML Codecademy

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Apuntes de Curso HTML Codecademy

Uploaded by

Copyright:

Available Formats

<APUNTES DE CURSO HTML >

You might also like