Prepara tus exámenes y mejora tus resultados gracias a la gran cantidad de recursos disponibles en Docsity
Gana puntos ayudando a otros estudiantes o consíguelos activando un Plan Premium
Prepara tus exámenes
Prepara tus exámenes y mejora tus resultados gracias a la gran cantidad de recursos disponibles en Docsity
Prepara tus exámenes con los documentos que comparten otros estudiantes como tú en Docsity
Encuentra los documentos específicos para los exámenes de tu universidad
Estudia con lecciones y exámenes resueltos basados en los programas académicos de las mejores universidades
Responde a preguntas de exámenes reales y pon a prueba tu preparación
Consigue puntos base para descargar
Gana puntos ayudando a otros estudiantes o consíguelos activando un Plan Premium
Comunidad
Pide ayuda a la comunidad y resuelve tus dudas de estudio
Ebooks gratuitos
Descarga nuestras guías gratuitas sobre técnicas de estudio, métodos para controlar la ansiedad y consejos para la tesis preparadas por los tutores de Docsity
excelente libro para comprender y aprender y enseñar libro para aprender a programar en javascript - eloquent javascript libro javascript en español
Tipo: Apuntes
1 / 155
Esta página no es visible en la vista previa
¡No te pierdas las partes importantes!
Eloquent JavaScript
Introducción
Eloquent JavaScript
Este libro trata de hacer que te familiarices lo suficiente con este lenguaje para que puedas hacer que la computadora haga lo que tú quieras.
No ilumino a aquellos que no están deseosos de aprender, tampoco despierto a quienes no están ansiosos de darse una explicación a sí mismos. Si les he presentado una esquina del cuadro y ellos no vienen con las otras tres, no debería recorrer otra vez los puntos." Confucio
A parte de explicar JavaScript, te introduciré en los principios básicos de la programación. Programar, resulta difícil. Las reglas fundamentales típicamente son simples y claras. Pero los programas contruidos sobre esas reglas tienden a volverse lo suficientemente complejos para introducir sus propias reglas y más complejidad. En cierta forma, estás construyendo tu propio laberinto y podrías perderte en él.
Habrá ocasiones en las que al leer este libro te sentirás terriblemente frustrado. Si eres nuevo programando, tendrás mucho material nuevo para digerir. Mucho de este material después será combinado en formas que requerirán que hagas conexiones adicionales.
Es tu responsabilidad realizar el esfuerzo necesario. Cuando se te haga difícil seguir este libro, no concluyas rápidamente nada acerca de tus capacidades. Tu eres bueno—sólo necesitas mantener el paso. Toma un respiro, vuelve a leer el material, y siempre asegúrate de leer y entender los programas de ejemplo y los ejercicios. Aprender es un trabajo duro, pero todo lo que aprendas ahora es tuyo y hará el aprendizaje cada vez más fácil.
El programador de computadoras es el creador de universos de los cuales él sólo es responsable. Universos de complejidad virtualmente ilimitada pueden ser creados en la forma de programas de computadora." Joseph Weizenbaum, Computer Power and Human Reason
Un programa es muchas cosas. Es una pieza de texto escrita por un programador, es la fuerza que dirije a la computadora para hacer lo que hace, son datos en la memoria de la computadora, y aún así controla las acciones realizadas en esta misma memoria. Las analogías que tratan de comparar a las computadoras con objetos que conocemos tienden a quedarse cortas. Una que se ajusta superficialmente es la de máquina, un montón de piezas separadas que se relacionan, y para hacerlo funcionar, tenemos que considerar las formas en que esas piezas se interconectan y contribuyen al funcionamiento del todo.
Una computadora es una máquina que actua como anfitriona de estas máquinas inmateriales. Las computadoras por sí mismas sólo pueden hacer cosas estúpidamente simples. La razón por la que son tan poderosas es que hacen esas cosas a una velocidad
Introducción
increíblemente rápida. Un programa puede combinar ingeniosamente un número enorme de esas acciones simples para lograr cosas muy complicadas.
Para algunos de nosotros, escribir programas de computadoras es un juego fascinante. Un programa es un construcción del pensamiento. No tiene costo construirlo, no pesa nada, y crece fácilmente bajo nuestras manos tecleando.
Pero si no tenemos cuidado, el tamaño y la complejidad de un programa se saldrán de control, confundiendo incluso a la persona que lo creó. Mantener los programas bajo control es el principal problema de la programación. Cuando funcionan, es hermoso. El arte de programar es la habilidad de controlar la complejidad. Un gran programa está dominado, hecho simple en su complejidad.
Muchos programadores creen que esta complejidad es mejor controlada usando sólo un pequeño conjunto de técnicas bien entendidas en sus programas. Estos han compuesto reglas estrictas (“mejores prácticas”) que prescriben la forma que los programas deberían tener, y los más celosos de ellos considerarán a aquellos que se salen de esta pequeña zona segura como malos programadores.
¡Qué hostilidad hacia la riqueza de la programación, la de tratar de reducirla a algo simple y predecible, tratar de hacer tabú a todos los programas extraños y bellos! El panorama de todas las técnicas de programación es enorme, fascinante en su diversidad, y permanece inexplorado en gran parte. Ciertamente es peligroso, ira seduciendo al programador novato con todo tipo de confusiones, pero eso sólo significa que debes de andar con cuidado y estar alerta. Conforme vayas aprendiendo, siempre habrá nuevos retos y nuevo territorio por explorar. Los programadores que se nieguen a explorar dejarán de progresar, olvidarán su alegría, y se aburrirán con su trabajo.
En el principio, cuando nació la computación, no había lenguajes de programación. Los progrmas lucían algo así:
00110001 00000000 00000000 00110001 00000001 00000001 00110011 00000001 00000010 01010001 00001011 00000010 00100010 00000010 00001000 01000011 00000001 00000000 01000001 00000001 00000001 00010000 00000010 00000000 01100010 00000000 00000000
Introducción
¿Puedes entender cómo funciona el programa en este punto? Las primeras dos líneas ponen en dos locaciones de memoria sus valores iniciales: total será usado para construir el resultado del cálculo y conteo mantendrá el registro del número en el que estamos trabajando en este momento. Las líneas que usan comparación son probablemente las más raras. El programa quiere ver si conteo es igual a 11 para saber si puede terminar. A causa de que nuestra máquina hipotética es más bien primitiva, solo puede probar si un número es cero y tomar una decisión (o salto) basada en eso. Así que usa la dirección de memoria etiquetada como comparación para calcular el valor de conteo
Este es el mismo programa en JavaScript:
var total = 0; var conteo = 1; while (conteo <= 10) { total += conteo; conteo += 1; } console.log(total); // → 55
Ejemplo Codepen
Esta versión nos da unas cuantas mejoras más. Y lo más importante es que ya no hay necesidad de especificar la forma en que queremos que nuestro programa salte de atrás para adelante. El constructor del lenguaje while se encarga de eso. Continúa ejecutándo el bloque (dentro de las llaves) debajo de él mientras la condición que se le dio se mantenga. Esa condición es conteo <= 10 , lo que significa "conteo" es menor o igual que
Al final del programa, después de que la construcción while ha terminado, la operación console.log es aplicada al resultado para imprimirlo como resultado.
Finalmente, así es como el programa luciría si sucediera que tenemos las convenientes operaciones range y sum disponibles, una crea una colección de números dentro de un rango y la otra calcula la suma de una colección de números, respectivamente:
console.log(sum(range(1, 10))); // → 55
Introducción
La moraleja de esta historia es que el mismo programa puede ser expresado en formas largas, cortas, legibles e ilegibles. La primera versión del programa era extremadamente difícil de entender, mientras que la última está casi en lenguaje ingles: log (registra) la sum (suma) del rango de números del 1 al 10. Veremos en capítulos posteriores como construir operaciones como sum y range .)
Un buen lenguaje de programación ayuda al programador al permitirle hablar acerca de las acciones que la computadora tiene que realizar en un nivel más alto. Ayuda a omitir detalles que no nos interesan, provee convenientes bloques de construcción (tales como while y console.log ), y te permite definir tus propios bloques (como sum y range ), y hace fácil componer esos bloques.
JavaScript fue introducido en 1995 como una forma de añadir programas a las páginas web en el navegador Netscape Navigator. Desde entonces el lenguaje ha sido adoptado por la mayoría de los navegadores más importantes. Ha hecho posibles las aplicaciones web modernas, aplicaciones con las que puedes interactuar directamente, sin hacer recarga de la página para cada acción. Pero también es usado en sitios web más tradicionales para añadirles distintas formas de interactividad y hacerlos más ingeniosos.
Es importante entender que JavaScript no tiene casi nada que ver con el lenguaje de programación llamado Java. El nombre tan parecido fue inspirado por razones de marketing más que de buen juicio. Cuando JavaScript estaba empezando, el lenguaje Java estaba siendo promovido fuertemente y ganando popularidad. Alguien pensó que sería buena idea colgarse de su éxito. Ahora ya nos quedamos con el nombre.
Después de su adopción fuera de Netscape, un documento de estándar fue escrito para describir la forma en que JavaScript debería de trabajar, para asegurarse de que distintos programas que argumentaban soportar JavaScript hablaran realmente del mismo lenguaje. Este documento es llamado el estándar ECMAScript, en honor a la Ecma International Organization, que realizó la estandarización. En la práctica, los términos ECMAScript y JavaScript pueden ser usados indistintamente, son dos nombres para el mismo lenguaje.
Existen aquellos que dirán cosas terribles acerca de JavaScript. Muchas de esas cosas son ciertas. La primera vez que tuve que programar algo en JavaScript, rápidamente llegué a despreciarlo. Aceptaba cualquier cosa que yo escribiera pero la interpretaba en una forma completamente distinta a lo que yo quería decir. Esto tenía mucho que ver con el hecho de que yo no tenía idea de lo que estaba haciendo, por supuesto, pero aquí existe un problema real: JavaScript es extremadamente liberal en lo que permite. La idea detrás de este diseño
Introducción
La manera más fácil de correr el código del libro, y de experimentar con él, es en la versión web en http://eloquentjavascript.net/. Ahí podrás hacer click en un ejemplo para editarlo y correrlo y para ver la salida que produce. Para trabajar en lo ejercicios, dirígete a http://eloquentjavascript.net/, que prove código para empezar con cada ejercicio y te permite ver las soluciones.
Si quieres correr los programas de este libro fuera del ambiente que se provee, hay que prestarle atención a ciertas cosas. Muchos ejemplos deberían trabajar por sí mismos. Pero el código de los capítulos más avanzados está escrito para un entorno específico (el navegador o Node.js) y sólo puede correr ahí. Además, muchos capítulos definen programas más grandes, y las partes del código que aparecen en él dependen de entre ellas o de archivos externos. El http://eloquentjavascript.net/code en el sitio tiene links para descargar los archivos Zip que contienen todos los scripts y datos necesarios para hacer funcionar el código de cualquier capítulo.
Este libro está compuesto por tres partes. Los primeros 11 capítulos hablan de JavaScript en sí mismo. Los siguientes ocho son acerca de los navegadores web y la forma en que JavaScript es usado para programarlos. Finalmente, los últimos dos capítulos están dedicados a ((Node.js)), otro entorno para programar en JavaScript.
A lo largo del libro hay cinco capítulos de proyecto , que describen programas de ejemplo más grandes para darte una prueba de la programación en el mundo real. En order de aparcición trabajaremos en simulación de vida artificial, un lenguaje de programación, un juego de plataforma, un programa de pintura, y un sitio dinámico.
La parte del lenguaje del libro empieza con cuatro capítulos para presentar la estructura básica de JavaScript. Estos presentan estructuras de control (como la palabra while que viste en esta introducción), funciones(escribir tus propias operaciones), y estructuras de datos. Despeués de esto, serás capaz de escribir programas simples. Después, los capítulos 5 y 6 presentan técnicas para usar funciones y objetos para escribir código más abstracto y de esta manera mantener a la complejidad bajo control.
Después de un primer capítulo de proyecto, la primera parte del libro continúa con capítulos acerca de manejo y correccón de errores, expresiones regulares(una herramienta importanate para el manejo de datos de texto), y modularidad, otra arma contra la complejidad. El segundo capítulo de proyecto termina con la primera parte del libro.
Introducción
En la segunda parte, los Capítulos 12 a 19, describen las herramientas a las que JavaScript tiene acceso en el navegador web. Aprenderás a mostrar cosas en la pantalla (Capítulos 13 y 16), repsonder a los datos de entrada del usuario (Capítulos 14 y 18), y a comunicarte a través de la red (Capítulo 17). Otra vez, hay dos proyectos en esta parte.
Después de eso, el Capítulo 20 describe Node.js, y en el Capítulo 21 se construye un sencillo sistema web usando esa herramienta.
Finalmente, el Capítulo 22 describe algunas de las consideraciones que se deben tener al optimizar programas de JavaScript para que sean rápidos.
En este libro,el texto escrito en fuente monoespacio representará elementos de programas; algunas veces programas completos y otras, partes de programas que hayan sido definidos cerca de ahí. Los programas(de los cuales has visto unos pocos), están escritos como sigue:
function fac(n) { if (n == 0) return 1; else return fac(n - 1) * n; }
Algunas veces, para mostrar la salida que un programa produce, la salida esperada será escrita después de este, con dos diagonales y una flecha enfrente.
console.log(fac(8)); // → 40320
¡Buena suerte!
Introducción
Para ser capaz de trabajar con semejantes cantidades de bits sin perderte, puedes separarlos en pedazos que representen piezas de información. En un entorno en JavaScript, esos pedazos son llamados valores. Aunque todos los valores están hechos de bits, juegan diferentes roles. Cada valor tiene un tipo que determina su rol. Existen seis tipos básicos de valores en JavaScript: números, cadenas, Booleanos, objetos, funciones, y valores indefinidos.
Para crear un valor, sólo tienes que invocar su nombre. Esto es conveniente. No tienes que reuinir el material de construcción de tus valores o pagar por ellos. Sólo llamas uno y woosh , lo tienes. No son creados de la nada, por supuesto. Cada valor tiene que estar almacenado en algún lugar, y si quieres usar una cantidad enorme de estos al mismo tiempo, te podrías quedar sin bits. Afortunadamente, esto se convierte en un problema sólamente si los necesitas todos al mismo tiempo. Tan pronto como dejes de usar un valor se disipará, dejando sus bits para que sean reciclados como material de construcción de la próxima generación de valores.
Este capítulo introduce los elementos atómicos de los programas en JavaScript, los tipos de valores simples y los operadores que pueden actuar sobre tales valores.
Los valores de tipo número (number) son, sin sorpresa alguna, valores numéricos. En un programa en JavaScript, se escriben de la siguiente forma:
13
Usa eso en un programa y causará que el patrón de bits para el número 13 exista dentro de la memoria de la computadora.
JavaScript usa una cantidad fija de bits, 64, para guardar un valor del tipo número. Existe un límite en la cantidad de patrones que se pueden hacer con 64 bits, lo que significa que la cantidad de números que puedes representar también es limitada. Para N dígitos
decimales, la cantidad de números que pueden ser representados es 10^ N ^. Similarmente, dados 64 dígitos binarios, puedes representar 2^64^ números diferentes, que es cerca de 18 cuatrillones (un 18 con 18 ceros después). Eso es mucho.
La memoria de la computadora solía ser mucho más pequeña, y la gente tendía a usar grupos de 8 ó 16 bits para representar sus números. Era fácil desbordar accidentalmente números tan pequeños: terminar con un número que no pudiera ser almacenado en el número dado de bits. Hoy, incluso las computadoras personales tienen mucha memoria, así que eres libre de usar grupos de 64 bits, lo que significa que necesitas preocuparte del desbordamiento sólo cuando estés tratando con números verdaderamente astronómicos.
No todos los número enteros debajo de 18 cuatrillones caben en un número de JavaScript. Esos bits también guardan números negativos, así que un bit indica el signo del número. Un problema mayor es que los números no enteros también deben ser representados. Para hacer esto, algunos de los bits son usados para guardar la posición del punto decimal. El número entero máximo real que puede ser guardado está más cerca del rango de los 9 trillones (15 ceros), que aún es satisfactoriamente grande.
Los números fraccionarios son escritos usando un punto.
Para números muy grandes o muy pequeños, también se puede usar la notación científica, añadiendo una "e" de "exponente", seguido por el exponente del número:
2.998e
Esto es 2.998 × 10^8 = 299,800,000.
Cálculos con números enteros (en inglés llamados integer ) más pequeños que el supracitado 9 trillones, están garantizados para siempre ser precisos. Desafortunadamente, cálculos con números fraccionarios generalmente no lo son. Justo como π (pi) no puede ser expresado precisamente por un número finito de dígitos decimales, muchos números pierden algo de precisión cuando sólo hay 64 bits disponibles para guardarlos. Esto es una pena, pero causa problemas prácticos sólo en algunas situaciones específicas. Lo importante es estar al tanto de esto y tratar a los números digitales fraccionarios como aproximaciones y no como valores precisos.
próximo número especial: NaN.
NaN son las siglas de “not a number” ("no es un número"), aunque es un valor del tipo número. Obtendrás este resultado cuando, por ejemplo, trates de calcular 0 / 0 (cero entre cero), Infinity - Infinity , o cualquier otra operación numérica que no produzca un resultado preciso, significativo.
El siguiente tipo de dato básico son las cadenas. Estas son usadas para representar texto. Son declaradas al poner el contenido entre comillas.
"Parcha mi bote con goma de mascar" 'Monkeys wave goodbye'
Tanto las comillas simples como las dobles pueden ser usadas para declarar cadenas de texto mientras coincidan al principio y al final.
Casi cualquier cosa puede estar entre comillas, y JavaScript creará una cadena. Pero unos cuantos caracteres son un poco difíciles. Puedes imaginar que poner comillas dentro de comillas puede ser difícil. Newlines (el carácter salto de línea, lo que obtines cuando presionas Enter), tampoco puede ser introducido entre comillas. La cadena tiene que permanecer en una sola línea.
Para hacer posible la inclusión de estos caracteres en una cadena de texto, la siguiente notación es usada: cuando una diagonal invertida( backslash : \ ) se encuentra dentro de un texto entre comillas, indica que el carácter siguiente tiene un significado especial. Esto es llamado escapar el carácter. Una comilla que es precedida por una diagonal invertida no terminará la cadena, sino que será parte de ella. Cuando un carácter n sigue a una diagonal invertida, se interpreta como una nueva línea. Similarmente, un t después de la diagonal invertida significa un tabulador. Tomemos la siguiente cadena:
"Esta es la primera línea\nY esta la segunda"
El verdadero texto contenido es:
Esta es la primera línea Y esta la segunda
Existen, por supuesto, situaciones en las que querrás que una diagonal invertida sea sólo eso en una cadena de texto, no un código especial. Si dos diagonales invertidas están juntas, se volverán una, y sólo eso quedará como resultado en el valor de la cadena. Así es
como la cadena ' "Un carácter de nueva línea es escrito "\n"." puede ser expresada:
"Un carácter de nueva línea es escrito "\n"."
Las cadenas de texto no pueden ser divididas numéricamente, multiplicadas, o restadas, pero el carácter + puede ser usado en ellas. No suma, sino que concatena ; pega dos cadenas. La siguiente línea produce la cadena "concatenar" :
"con" + "cat" + "e" + "nar"
Hay más maneras de manipular las cadenas, de las que hablaremos cuando lleguemos a los métodos en el link:04_data.html#methods[Capítulo 4].
No todos los operadores son símbolos. Algunos son escritos como palabras. Un ejemplo es el operador typeof , que produce una cadena de texto que representa el tipo del valor que le pasaste.
console.log(typeof 4.5) // → number console.log(typeof "x") // → string
Usaremos console.log para indicar que queremos ver el resultado de la evaluación de algo. Cuando corres ese código, el valor producido debería mostrarse en pantalla, aunque la forma en que aparece dependerá del entorno en que estés corriendo el programa.
Los otros operadores que hemos visto operaban sobre dos valores, pero typeof sólamente toma uno. Los operadores que usan dos valores son llamados operadores binarios , mientras que aquellos que sólo toman uno son llamados operadores unitarios. El operador menos puede usar tanto como operador binario como operador unitario.
console.log(- (10 - 2)) // → -
A menudo, necesitarás un valor que simplemente distinga entre dos posibilidades, como "sí" y "no" o "encendido" y "apagado". Para esto, JavaScript tiene un tipo Booleano , que tiene sólo dos valores, verdadero (true) y falso (false), que son simplemente estas palabras en
La intención de NaN es representar el resultado de un cálculo sin sentido y como tal, no es igual al resultado de cualquier otro cálculo sin sentido.
Hay también algunas operaciones que pueden ser aplicadas a los valores Booleanos. JavaScript soporta tres operadores lógicos: and , or y not. Estos pueden ser usados para "razonar" con los Booleanos.
El operador && representa la operación lógica and ("y"). Es un operador binario, y su resultado es verdadero(true) sólo si los dos valores dados son verdaderos.
console.log(true && false) // → false console.log(true && true) // → true
El operador || denota la operación lógica or ("o"). Devuelve verdadero si cualquiera de los dos valores dados es verdadero.
console.log(false || true) // → true console.log(false || false) // → false
Not (Negación) es escrito como un símbolo de admiración (! ). Es un operador binario que voltea el valor que se le de; !true produce false y !false regresa true.
Cuando mezclamos estos operadores Booleanos con aritmética y otros operadores, no es siempre obvio cuándo se necesitan los paréntesis. En la prácitca, puedes avanzar sabiendo que de los operadores que hemos visto hasta ahora, || tiene la menor precedencia, después viene el && , siguen los operadores de comparación( > , == , etc.), y después los demás operadores. Este orden ha sido elegido tal que, en expresiones típicas con la siguiente, sean necesarios tan pocos paréntesis como sea posible:
1 + 1 == 2 && 10 * 10 > 50
El último operador lógico del que hablaré no es unitario, ni binario, sino ternario , opera en tres valores. Este es escrito con un símbolo de interrogación y dos puntos, como sigue:
console.log(true? 1 : 2); // → 1 console.log(false? 1 : 2); // → 2
Este es llamado el operador condicional (o algunas veces el operador tenario dado que es el único operador de este tipo en el lenguaje). El valor a la izquierda del signo de interrogación "escoge" cuál de los otros dos valores resultará. Cuando es verdadero, el valor central es escogido, y cuando es falso, el valor de la derecha se da como resultado.
Existen dos valores especiales, escritos null y undefined , que son usados para denotar la ausencia de un valor con significado. Son valores en sí mismos, pero no poseen ninguna información.
Muchas operaciones en el lenguaje que no producen un valor con significado (lo verás después) producen undefined simplemente porque tienen que producir algún valor.
La diferencia en el significado entre undefined y null es un accidente del diseño de JavaScript, y no importa la mayoría del tiempo. En los casos en dónde realmente te tienes que preocupar de estos valores, te recomiendo tratarlos como intercambiables (más de esto en un momento).
En la introducción, mencioné que JavaScript acepta casi cualquier programa que le des, incluso programas que hagan cosas raras. Esto es muy bien demostrado por las siguientes expresiones:
console.log(8 * null) // → 0 console.log("5" - 1) // → 4 console.log("5" + 1) // → 51 console.log("cinco" * 2) // → NaN console.log(false == 0) // → true
