Aprender Javascript Avanzado con 100 ejercicios prácticos

Aprender
JavaScript Avanzado
con 100 ejercicios prácticos

Aprender JavaScript Avanzado con 100 ejercicios prácticos

© 2015 MEDIAactive

Primera edición, 2015

© 2015 MARCOMBO, S.A.

Gran Via de les Corts Catalanes, 594

08007 Barcelona

www.marcombo.com

Diseño de la cubierta: NDENU DISSENY GRÀFIC

«Cualquier forma de reproducción, distribución, comunicación pública o transformación de esta obra sólo puede ser realizada con la autorización de sus titulares, salvo excepción prevista por la ley. Diríjase a CEDRO (Centro Español de Derechos Reprográficos, www.cedro.org) si necesita fotocopiar o escanear algún fragmento de esta obra».

Presentación

APRENDER JAVASCRIPT AVANZADO CON 100 EJERCICIOS PRÁCTICOS

100 ejercicios, en este caso más teóricos, que conforman una guía de los principales elementos que forman parte del lenguaje de programación JavaScript. Si bien es imposible recoger en las páginas de este libro todas las prestaciones de estos elementos, hemos escogido las más interesantes e imprescindibles. Una vez consultados los 100 ejercicios que componen este manual, el lector será capaz de comprender por sí mismo cómo se consigue la interactividad más habitual de una página web.

LA FORMA DE APRENDER

Nuestra experiencia en el ámbito de la enseñanza nos ha llevado a diseñar este tipo de manual, en el que cada una de las funciones se ejercita mediante la realización de un ejercicio práctico. Dicho ejercicio se halla explicado paso a paso y pulsación a pulsación, a fin de no dejar ninguna duda en su proceso de ejecución. Además, lo hemos ilustrado con imágenes descriptivas de los pasos más importantes o de los resultados que deberían obtenerse y con recuadros IMPORTANTE que ofrecen información complementaria sobre cada uno de los temas tratados en los ejercicios.

Gracias a este sistema se garantiza que una vez realizados los 100 ejercicios que componen el manual, el usuario podrá desenvolverse cómodamente con el citado lenguaje de programación.

A QUIÉN VA DIRIGIDO EL MANUAL

Si se inicia usted en la práctica y el trabajo con JavaScript, encontrará en estas páginas un completo recorrido por sus principales funciones. Pero si es usted un experto en este elemento de programación, le resultará también muy útil para consultar deter-minados aspectos más avanzados o repasar funciones específicas que podrá localizar en el índice.

Cada ejercicio está tratado de forma independiente, por lo que no es necesario que los realice por orden (aunque así se lo recomendamos, puesto que hemos intentado agrupar aquellos ejercicios con temática común). De este modo, si necesita realizar una consulta puntual, podrá dirigirse al ejercicio en el que se trata el tema y llevarlo a cabo sobre su propio proyecto.

JAVASCRIPT

Javascript es un lenguaje de programación que permite crear programas y sitios web prácticamente idénticos a cualquier aplicación de escritorio, en cuanto a su respuesta se refiere. JavaScript aporta animaciones, interactividad y efectos visuales a un documento HTML, la base de cualquier sitio o página web.

No sólo encontramos JavaScript en las entrañas de muchos de los sitios web que visitamos diariamente. La gran mayoría de los widgets de escritorio que pueden instalarse en el ordenador han sido desarrollados con JavaScript, así como miles y miles de aplicaciones para dispositivos móviles y un amplio elenco de características de programas informáticos (como Photoshop, Dream-weaver, Acrobat, entre otros).

A diferencia de la mayoría de los libros que conforman esta colección, el que tiene usted entre las manos ha sido diseñado como guía de consulta de los principales elementos del lenguaje de programación JavaScript. Es por eso que no encontrará en estas páginas ejercicios resueltos, sino únicamente explicaciones detalladas, con ejemplos, de funciones, operadores, métodos, etc. de este lenguaje de programación tan utilizado para conseguir interactividad.

Cómo funcionan los libros “Aprender...”

Índice

001 Qué es JavaScript

002 La sintaxis de JavaScript

003 Comentarios, expresiones y sentencias

004 El uso del punto y coma en JavaScript

005 Datos primitivos

006 Objetos en JavaScript

007 Valores y objetos indefinidos

008 Comprobar valores indefinidos o nulos

009 Objetos envolventes para primitivos

010 Operadores de asignación

011 Operadores de igualdad

012 Operadores de comparación

013 El caso del operador +

014 Operadores lógicos

015 Operadores numéricos y especiales

016 Comprobar datos en JavaScript

017 El operador ‘instanceof’

018 Operadores de objeto

019 Conocer los tipos de datos booleanos

020 Convertir valores en booleanos

021 Los operadores || y !

022 Trabajar con números

023 Convertir datos a números

024 La función parseFloat()

025 Las funciones parseInt() e isNaN()

026 Valores numéricos especiales

027 Cómo se representan los números

028 Errores de redondeo

029 Números enteros

030 Números enteros seguros

031 Convertir datos a números enteros

032 Operadores aritméticos

033 Operadores bit a bit

034 Propiedades del objeto Number

035 Métodos de números primitivos

036 Algunas funciones numéricas

037 Cadenas de caracteres

038 Secuencias de escape en strings

039 Convertir valores en strings

040 Comparar cadenas de caracteres

041 Combinar cadenas de caracteres

042 Métodos del constructor String

043 Propiedades y otros métodos de String

044 Métodos para transformar strings

045 Buscar, comparar y comprobar strings

046 Sentencias de bucle

047 Sentencias condicionales

048 El caso de la sentencia with

049 Gestionar excepciones en JavaScript

050 Crear un objeto de error

051 Funciones en JavaScript

052 Definición de funciones

053 ¿Declaración o expresión de funciones?

054 Controlar parámetros nulos o extra

055 Parámetros con nombre

056 Declaración de variables

057 El ámbito de las variables

058 Variables globales y locales

059 Declaración de variables con var

060 Objetos sencillos

061 Convertir valores en objetos

062 El parámetro this en funciones y métodos

063 Relación de prototipo entre objetos

064 Compartir datos entre objetos

065 Crear nuevos objetos a partir de prototipos

066 Repetir y detectar propiedades I

067 Repetir y detectar propiedades II

068 Proteger objetos

069 Constructores de objetos

070 Herencias entre constructores

071 Métodos comunes a todos los objetos

072 Trabajar con matrices

073 Crear matrices

074 La propiedad length en una matriz

075 Huecos en matrices

076 Operaciones para gestionar huecos

077 Añadir y eliminar elementos de una matriz

078 Ordenar y alterar elementos en una matriz

079 Dividir y juntar elementos en matrices

080 Buscar valores en una matriz

081 Examinar, transformar y reducir matrices

082 Expresiones regulares

083 Sintaxis de las expresiones regulares

084 Crear expresiones regulares

085 Trabajar con fechas en JavaScript

086 El constructor Date

087 Métodos del constructor Date

088 Métodos para el prototipo Date

089 Formatos para la fecha

090 Formatos para mostrar la hora actual

091 Trabajar con valores temporales

092 El objeto Math y sus propiedades

093 Funciones numéricas

094 Funciones trigonométricas

095 Otras funciones matemáticas

096 Qué es el JSON

097 Métodos utilizados por el formato JSON

098 Funciones globales no constructoras

099 Evaluar código dinámicamente

100 Unicode y JavaScript

001 Qué es JavaScript

IMPORTANTE

Resulta de gran importancia saber que JavaScript no tiene nada que ver con Java , otro lenguaje de programación creado por la compañía SunSystems. De hecho, cabe destacar que, en sus inicios, Netscape bautizó su lenguaje de programación como LiveScript y que no fue hasta más adelante, por motivos de márketing, que la compañía decidió cambiar el nombre a su producto, asemejándolo al del lenguaje más exitoso en aquel momento.

JAVASCRIPT ES UN LENGUAJE DE PROGRAMACIÓN que permite crear programas y sitios web prácticamente idénticos a cualquier aplicación de escritorio, en cuanto a su respuesta se refiere. JavaScript aporta animaciones, interactividad y efectos visuales a un documento HTML, la base de cualquier sitio o página web. JavaScript forma parte de un conjunto de elementos formado por HTML y CSS: HTML aporta la estructura, CSS, el estilo y JavaS-cript, el funcionamiento y la interactividad con el usuario.

1. JavaScript fue creado en el año 1995 por la compañía Netscape, responsable de uno de los primeros navegadores que aparecieron en el mercado, Netscape Navigator, competencia directa de Microsoft Internet Explorer. Dicha competencia provocó que el funcionamiento de JavaScript en dichos navegadores no fuera tan satisfactorio como se hubiera esperado de un lenguaje de programación tan potente. Afortunadamente, hoy en día, todos los navegadores, incluidos Firefox, de Mozilla, y Safari, de Apple, aceptan programas o scripts generados con JavaScript.

Logotipo de la compañía Netscape, creadora del navegador Navigator y del lenguaje de programación JavaScript.

2. Teniendo en cuenta que el principal objetivo de JavaScript es la interactividad en programas y sitios web, a continuación veremos algunas de las aplicaciones en las cuales podemos encontrar claramente este increíble lenguaje de programación.

3. Gracias a JavaScript, es posible que una página muestre el importe total de una serie de compras, así como el IVA correspondiente aplicado, justo en el momento en que el usuario pulsa el botón Comprar.

4. Otro ejemplo sería al rellenar un formulario, en aquellos casos en que el usuario no completa los campos necesarios o lo hace de un modo no satisfactorio. En estos casos, el programa lanzará el correspondiente mensaje de error también generado con JavaScript.

5. Google Maps es otro claro ejemplo de cómo JavaScript permite interactuar con el usuario en tiempo real.

Google Maps utiliza JavaScript para conseguir una interacción con el usuario en tiempo real sin necesidad de cambiar de página web.

6. Pero no sólo encontramos JavaScript en las entrañas de muchos de los sitios web que visitamos diariamente. La gran mayoría de los widgets de escritorio que pueden instalarse en el ordenador han sido desarrollados con JavaScript, así como miles y miles de aplicaciones para dispositivos móviles y un amplio elenco de características de programas informáticos (como Photoshop, Dreamweaver, Acrobat, entre otros).

7. JavaScript es la llave a un mundo de interactividad prácticamente infinito y espectacular. Compruébelo usted mismo y... ¡disfrute!

IMPORTANTE

Inmediatamente después de que Netscape presentara su sorprendente lenguaje de programación JavaScript, la compañía Microsoft también se propuso atacar el mercado con su propio lenguaje de programación y lanzó jScript. En este caso, jScript estaba incluido en el navegador Internet Explorer.

002 La sintaxis de JavaScript

IMPORTANTE

El uso del signo de puntuación ; (punto y coma) al finalizar cada sentencia no es obligatorioen JavaScript, aunque sí recomendable.

CUANDO HABLAMOS DE SINTAXIS DE UN lenguaje de programación nos estamos refiriendo al conjunto de reglas en que se basa la escritura del código fuente de los diferentes programas generados. La sintaxis de JavaScript es muy parecida a la de otros lenguajes de programación, como Java o C.

1. En este ejercicio trataremos de definir de forma clara y concisa en qué se basa la sintaxis básica de JavaScript. Aunque pueda parecer lo contrario, la sintaxis de JavaScript es bastante sencilla. Para empezar, podemos indicar que los intérpretes de JavaScript no tienen en cuenta los espacios en blanco ni las nuevas líneas, lo que supone que el desarrollador puede organizar el código como mejor le convenga.

2. JavaScript hace distinción entre mayúsculas y minúsculas, lo que significa que si el código no se escribe según esta distinción, el programa no funcionará según lo previsto.

La distinción entre mayúsculas y minúsculas debe realizarse y respetarse durante todo el script.

3. Otro aspecto a tener en cuenta es que las variables creadas pueden almacenar diferentes tipos de datos, por lo que no es necesario definirlas al escribir el código.

4. JavaScript es un lenguaje de programación totalmente dinámico. ¿Qué significa esta afirmación? Sencillamente significa que todo cuanto se escribe en el código puede ser cambiado en cualquier momento.

5. Los comentarios también forman parte de la sintaxis de JavaS-cript. Resultan de gran importancia porque permiten al desarrollador realizar anotaciones referentes a la escritura del código, utilizando para ello unas normas imprescindibles. Como veremos en el ejercicio siguiente, los comentarios se escriben siguiendo una puntuación básica concreta.

6. Las variables también son parte de la sintaxis de Javascript. Las variables se declaran mediante la terminología var e incluyen siempre valores. Los cinco tipos de valores fundamentales son booleanos, números, cadenas de caracteres, objetos plenos y matrices; todos estos tipos serán debidamente descritos en este libro.

7. El desarrollador “inventa” el nombre de las variables declaradas, siempre teniendo en cuenta dos aspectos fundamentales: que dicho nombre sólo puede contener letras, números y los signos $ y _ (guión bajo) y que el primer caracter no puede ser un número. Una declaración de variable sería la siguiente:

var abc;

8. Y la asignación de valores, podría ser como sigue:

var abc = alfabeto;

9. Como en las variables, las funciones adoptan un nombre único para poder ser utilizadas dentro del código. Tras este nombre, es preciso escribir los parámetros de la función entre paréntesis. Las instrucciones que describen la función se escriben entre símbolos de llaves { }.

003Comentarios, expresiones y sentencias

IMPORTANTE

Los comentarios insertados por el programador dentro del código pueden ser frases enteras o palabras sueltas.En cualquier caso, siempre ayudarán a aclarar partes concretas del código, sobre todo en caso de necesitar modificarlo o en el momento de su depuración.

LOS COMENTARIOS, LAS EXPRESIONES Y LAS sentencias forman parte de la sintaxis básica de JavaScript. En ocasiones existe cierta confusión entre la definición y el uso de expresiones y sentencias (la asignación de comentarios queda totalmente clara, como se verá en este ejercicio); en estas páginas trataremos de distinguir por completo ambos elementos.

1. Empezamos este ejercicio hablando de los comentarios. Los comentarios forman parte del código JavaScript pero no son interpretados por los navegadores web. Los programadores los utilizan sencillamente para facilitar la lectura del código en determinadas partes del mismo.

2. Existen dos tipos de comentarios de JavaScript y cada uno de ellos se representa con una puntuación distinta. El primer tipo se utiliza para comentar únicamente una línea de código y se indica con una doble barra, //.

Cuando se utiliza un editor de textos web, los comentarios se muestran de color gris, para que sea más fácil reconocerlos en el momento de la depuración o modificación.

3. El segundo tipo de comentario se utiliza para comentar más de una línea de código y requiere, en este caso, de una puntuación de apertura, /*, y otra de cierre, */.

4. El uso de comentarios en un documento de código JavaScript es ilimitado e, incluso, recomendable en aquellos casos en que se prevean confusiones en el momento de la interpretación del mismo.

5. Hablemos ahora de las expresiones y las sentencias, que, en determinados casos y tal como hemos indicado en la introducción de este ejercicio, pueden confundirse. Las sentencias son instrucciones que se incorporan en el código para que éste ejecute algo, por ejemplo, que realice una acción concreta.

6. Un ejemplo bien conocido de sentencia es la denominada condicional, la cual se utiliza para determinar si algo es verdadero o si existe. En función de si la condición es verdadera o no, se ejecutarán o no las acciones especificadas, ya sean funciones o expresiones. La sentencia condicional es if.

Podemos decir que un programa o un script es una secuencia de sentencias.

7. A diferencia de las sentencias, las expresiones son cualquier combinación de símbolos de JavaScript que representan un valor. Así, las expresiones tienen valores (de los cuales hablamos en el ejercicio anterior) y los valores y las propiedades tienen tipos.

8. Una expresión puede estar formada por diferentes tipos de elementos: operadores y operandos, valores, funciones y procedimientos.

Los bucles (loops) también son un ejemplo de sentencia en JavaScript.

En la descripción de estas dos variables, todo cuanto se encuentra a la derecha del signo =, el cual indica la descripción de la variable en sí misma, es una expresión.

9. Dicho esto, podemos destacar que cuando JavaScript espera la aparición de una sentencia, es posible que aparezca una expresión, pero no al contrario: no es posible escribir una sentencia cuando el programa está esperando una expresión.

10. A menudo, y debido a su construcción, se utilizan erróneamente dos tipos concretos de expresiones como si fueran sentencias: los objetos literales (expresiones) se confunden con los bloques (sentencias) y las expresiones de funciones con nombre se confunden con declaraciones de funciones, las cuales son sentencias.

IMPORTANTE

Es posible escribir sentencias condicionales utilizando una expresión con un operador condicional. Por ejemplo, éstas serían las líneas de código con la sentencia condicional if : var premio;

if (si) {

premio = ¡Enhorabuena!’;

} else {

premio =’Lo sentimos’;

}

Y ésta la misma línea con el operador condicional:

var premio = si ?

‘¡Enhorabuena!’ : ‘Lo sentimos’;

(Todo se escribe en una misma línea.)

004 El uso del punto y coma en JavaScript

EL USO DEL PUNTO Y COMA al final de cada sentencia no es obligatorio en el código JavaScript, aunque sí altamente recomendable. En este ejercicio le mostraremos por qué es recomendable utilizar este signo de puntuación y en qué casos precisamente no debe utilizarse.

1. Con el fin de evitar posibles errores detectados por el navegador web en el momento de la interpretación, las diferentes instrucciones contenidas en nuestros scripts deben separarse adecuadamente. ¿Cómo? Mediante un punto y coma al final de cada línea.

2. Sin embargo, existen ciertas excepciones a esta norma del punto y coma. En concreto, las sentencias que finalizan con un bloque no deben llevar punto y coma al final de las mismas. Y todavía podemos concretar más esta excepción: sólo los bucles (como for y while), los conectores (como if, switch o try) y las declaraciones de funciones que finalizan con un bloque no se cierran con un punto y coma.

3. Éste sería un ejemplo de una sentencia con un bucle for que no finaliza con un punto y coma:

for (var num=11; num<=20; num++) {

document.write(‘<h3>Número ‘ + num + ‘<br></h3>’);

}

4. Vea que la sentencia finaliza con la llave de cierre, y no con este signo y un punto y coma. Seguidamente, incluimos un ejemplo de una sentencia con un conector condicional como if que tampoco finaliza con un punto y coma:

if (bestCountry == ‘Canadá’) {

document.write(“<p>¡Coincido contigo! China también</p>”);

}

5. Por último, un ejemplo de la tercera de las excepciones listadas en el punto 2, es decir, una declaración de función, serían las líneas siguientes:

function printToday() {

var hoy = new Date(); document.write(hoy.getDate());

}

6. Sin embargo, sepa que la inserción de un punto y coma en estos casos concretos no conlleva un error de sintaxis, debido a que dicho signo se considera una sentencia vacía y las sentencias vacías pueden aparecer en el punto en que el código prevé encontrar una sentencia.

7. JavaScript cuenta con un mecanismo que se ocupa de insertar un punto y coma allá donde prevé que es necesario. Este mecanismo se denomina ASI, siglas del término en inglés Automatic Semicolon Insertion , y aunque a primera vista puede resultar muy útil, en ocasiones produce resultados inesperados. Por esta razón, lo mejor y más recomendable es utilizar el punto y coma nosotros mismos allí dónde sea necesario.

IMPORTANTE

Básicamente, el mecanismo ASI funciona al determinar el punto en que una sentencia finaliza y le agrega un punto y coma.