Aprendiendo PHP, MySQL y JavaScript

Prefacio

Audiencia

Introducción al contenido dinámico de la web

HTTP y HTML: Los conceptos básicos de Berners-Lee

Configuración de un servidor de desarrollo

¿Qué es WAMP, MAMP o LAMP?

Introducción a PHP

Integrando PHP dentro de HTML

Expresiones y control de flujo en PHP

Expresiones

Funciones y objetos en PHP

Funciones en PHP

Arrays en PHP

Acceso básico

PHP práctico

Utilizando printf

Introducción a MySQL

Fundamentos de MySQL

Dominando MySQL

Diseño de bases de datos

Novedades de PHP 8 y MySQL 8

Sobre este capítulo

Accediendo a MySQL utilizando PHP

Consultando una base de datos MySQL con PHP

Manejo de formularios

Creación de formularios

Cookies, sesiones y autenticación

Utilizando cookies en PHP

Explorando JavaScript

Introducción

JavaScript aporta una funcionalidad dinámica a tus sitios web. Cada vez que mires algo aparecer cuando pasas el mouse sobre un elemento en el navegador, o ves nuevo texto, colores o imágenes aparecer en la página frente a tus ojos, o cuando tomas un objeto en la página y lo arrastras a una nueva ubicación, todas esas cosas generalmente se hacen a través de JavaScript (aunque CSS se está volviendo cada vez más poderoso y también puede hacer muchas de estas cosas). Ofrece efectos que de otro modo no serían posibles, porque se ejecuta dentro del navegador y tiene acceso directo a todos los elementos de un documento web.

JavaScript apareció por primera vez en el navegador Netscape Navigator en 1995, coincidiendo con la incorporación del soporte para la tecnología Java en el navegador. Debido a la incorrecta impresión inicial de que JavaScript era un derivado de Java, ha habido una confusión durante mucho tiempo sobre su relación. Sin embargo, el nombre fue solo una táctica de marketing para ayudar al nuevo lenguaje de scripting a beneficiarse de la popularidad del lenguaje de programación Java.

JavaScript ganó nuevo poder cuando los elementos HTML de la página web obtuvieron una definición más formal y estructurada en lo que se llama Document Object Model (DOM). El DOM hace que sea relativamente fácil añadir un nuevo párrafo o centrarse en un fragmento de texto y modificarlo.

Debido a que tanto JavaScript como PHP soportan gran parte de la sintaxis de la programación estructurada que utiliza el lenguaje de programación C, son muy similares entre sí. También son lenguajes de alto nivel. Además, son débilmente tipados, por lo que es fácil cambiar una variable a un nuevo tipo simplemente usándola en un nuevo contexto.

Ahora que has aprendido PHP, deberías encontrar JavaScript aún más fácil. Y te alegrarás de haberlo hecho, porque está en el corazón de la tecnología de la comunicación asíncrona que proporciona las interfaces web fluidas que (junto con las características de HTML5) los usuarios web expertos esperan hoy en día.

Texto JavaScript y HTML

JavaScript es un lenguaje de scripting del lado del cliente que se ejecuta completamente dentro del navegador web o bajo Node.js. Para llamarlo, se coloca entre las etiquetas HTML de apertura <script> y cierre </script>. Un documento típico de "Hello World" utilizando JavaScript puede parecerse al Ejemplo 14-1.

Ejemplo 14-1. Visualización de "Hello World" con JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13

Dentro de las etiquetas <script> hay una sola línea de código JavaScript que utiliza su equivalente a los comandos echo o print de PHP, es document.write. Como era de esperar, simplemente envía el string proporcionado al documento actual, donde se muestra.

También puede que haya notado que, a diferencia de PHP, no hay punto y coma al final. (;). Esto se debe a que un salto de línea cumple la misma función que un punto y coma en JavaScript. Sin embargo, si deseas tener más de una instrucción en una sola línea, debes colocar un punto y coma después de cada comando, excepto el último. Por supuesto, si lo deseas, puedes añadir un punto y coma al final de cada instrucción, y tu JavaScript funcionará bien. Mi preferencia personal es omitir el punto y coma porque es innecesario, y por lo tanto también evito prácticas que podrían causar problemas. Al final del día, sin embargo, la elección puede depender del equipo en el que trabajes, que más a menudo no puede requerir puntos y coma, solo para estar seguros. Entonces, si tienes dudas, simplemente añade los puntos y comas.

Lo otro a tener en cuenta en este ejemplo es el par de etiquetas <noscript> y </noscript>. Estos se utilizan cuando deseas ofrecer HTML alternativo a los usuarios cuyos navegadores no soportan JavaScript o lo tienen desactivado. El uso de estas etiquetas depende de ti, ya que no son obligatorias, pero realmente deberías usarlas porque generalmente no es tan difícil proporcionar alternativas HTML estáticas a las operaciones que ofreces utilizando JavaScript. Sin embargo, los ejemplos restantes en este libro omitirán las etiquetas <noscript>, porque nos estamos enfocando en lo que puedes hacer con JavaScript, no en lo que puedes hacer sin él.

Cuando se carga el Ejemplo 14-1, un navegador web con JavaScript habilitado mostrará lo siguiente (ver Figura 14-1):

Hello World

Un navegador con JavaScript desactivado mostrará este mensaje (ver Figura 14-2):

Your browser doesn't support or has disabled JavaScript

Uso de scripts dentro de la cabecera de un documento

Además de colocar un script dentro del cuerpo de un documento, puedes ponerlo en la sección <head>, que es el lugar ideal si deseas ejecutar un script cuando se carga una página. Si colocas código y funciones críticas allí, también puedes tener la seguridad de que estén listos para usarse de inmediato por cualquier otra sección de script en el documento que dependa de ellos.

Otra razón para colocar un script en la cabecera del documento es permitir que JavaScript escriba cosas como meta etiquetas en la sección <head>, porque la ubicación de tu script es la parte del documento donde se escribe (imprime) por defecto.

Navegadores antiguos y no estándar

Si necesitas soportar navegadores que no ofrecen scripting (muy poco probable en la actualidad), deberás usar las etiquetas de comentario HTML (<!-- y -->) para evitar que se encuentren con código script que no deberían ver. El ejemplo 14-2 muestra cómo añadirlos a tu código de script.

Ejemplo 14-2. El ejemplo de "Hello World" modificado para navegadores que no soportan JavaScript

1
2
3
4
5
6
7
8
9
10
11

Aquí se ha añadido una etiqueta HTML de apertura de comentario (<!--) directamente después de la declaración de apertura <script>, y se ha añadido una etiqueta de cierre de comentario (// -->) directamente antes de que el script se cierre con </script>.

La doble barra diagonal (//) la utiliza JavaScript para indicar que el resto de la línea es un comentario. Está ahí para que los navegadores que sí soportan JavaScript ignoren el siguiente -->, pero los navegadores que no soportan JavaScript ignorarán el // anterior y actuarán sobre el --> cerrando el comentario HTML.

Aunque la solución es un poco complicada, lo único que realmente necesitas recordar es utilizar las dos líneas siguientes para encerrar tu JavaScript cuando desees soportar navegadores muy antiguos o no estándar:

1
2
3
4

Sin embargo, el uso de estos comentarios es innecesario para cualquier navegador lanzado en los últimos años, pero debes estar al tanto de esto, por si acaso.

Incluyendo archivos JavaScript

Además de escribir código JavaScript directamente en documentos HTML, puedes incluir archivos de código JavaScript desde tu sitio web o desde cualquier lugar de internet. La sintaxis para esto es la siguiente:

1

O, para cargar un archivo desde internet, usa esto (aquí sin el type="text/javascript" ya que es opcional):

1

En cuanto a los archivos de script en sí, no deben incluir ninguna etiqueta <script> o </script>, porque son innecesarias: el navegador ya sabe que se está cargando un archivo JavaScript. Ponerlos en los archivos JavaScript causará un error.

Incluir archivos de script es la forma preferida para que uses archivos JavaScript de terceros en tu sitio web.

Depuración de errores en JavaScript

Cuando estás aprendiendo JavaScript, es importante poder rastrear errores de escritura u otros errores de codificación. A diferencia de PHP, que muestra mensajes de error en el navegador, JavaScript maneja los mensajes de error de una manera que cambia de acuerdo con el navegador que se está utilizando. La Tabla 14-1 muestra cómo acceder a los mensajes de error de JavaScript en los navegadores más utilizados.

Tabla 14-1. Acceso a los mensajes de error de JavaScript en diferentes navegadores

Por favor, consulte la documentación de los desarrolladores del navegador en sus sitios web para obtener todos los detalles sobre su uso.

Utilizando comentarios

Debido a su herencia compartida del lenguaje de programación C, PHP y JavaScript tienen muchas similitudes, una de las cuales es la forma de comentar. Primero, hay el comentario de una sola línea, como este:

1

Este estilo utiliza un par de caracteres de barra diagonal (//) para informar a JavaScript que todo lo que sigue debe ser ignorado. También tienes comentarios multilínea, como este:

1
2
3
4

Empiezas un comentario de varias líneas con la secuencia /* y lo terminas con */. Solo recuerda que no puedes anidar comentarios multilínea, así que asegúrate de no comentar grandes secciones de código que ya contengan comentarios multilínea.

Signos de punto y coma

A diferencia de PHP, JavaScript generalmente no requiere punto y coma si tienes solo una instrucción en una línea. Por lo tanto, lo siguiente es válido:

1

Sin embargo, cuando desees colocar más de una declaración en una línea, debes separarlas con punto y coma, así:

1

Normalmente puedes omitir el punto y coma final, porque la nueva línea termina la declaración final.

Variables

Ningún carácter en particular identifica una variable en JavaScript como lo hace el signo de dólar en PHP. En su lugar, las variables utilizan las siguientes reglas de nomenclatura:

• Una variable puede incluir solo las letras a–z, A–Z, 0–9, el símbolo $ y el guion bajo (_).
• No se permiten otros caracteres, como espacios o signos de puntuación, en el nombre de una variable.
• El primer carácter del nombre de una variable puede ser solo a–z, A–Z, $, o _ (sin números).
• Los nombres son sensibles a mayúsculas y minúsculas. Count, count y COUNT son todas variables diferentes.
• No hay un límite establecido para la longitud de los nombres de las variables.

Y sí, tienes razón: hay un $ en esta lista de caracteres permitidos. Está permitido por JavaScript y puede ser el primer carácter de un nombre de una variable o función. Aunque no recomiendo utilizar los caracteres $, esta regla te permite integrar mucho código PHP más rápidamente a JavaScript.

Variables string

Las variables string en JavaScript deben estar entre comillas simples o dobles, así:

1
2

Puedes incluir una comilla simple dentro de un string de comillas dobles o una comilla doble dentro de un string de comillas simples. Pero debes escapar el entrecomillado del mismo tipo usando el carácter de barra invertida, así:

1
2

Para leer de una variable string, puedes asignarla a otra, así:

1

o puedes usarla en una función, así:

1
2

Variables numéricas

Crear una variable numérica es tan simple como asignarle un valor, como estos ejemplos:

1
2

Al igual que los strings, las variables numéricas pueden leerse y usarse en expresiones y funciones.

Arrays

Los arrays en JavaScript también son muy similares a los de PHP, en el sentido de que un array puede contener datos de tipo string o numéricos, así como otros arrays. Para asignar valores a un array, utiliza la siguiente sintaxis (que en este caso crea un array de strings):

1

Para crear un array multidimensional, anida arrays más pequeños dentro de uno más grande. Entonces, para crear un array bidimensional que contenga los colores de una sola cara de un Cubo Rubik desordenado (donde los colores red (rojo), green (verde), orange (naranja), yellow (amarillo), blue (azul) y white (blanco) están representados por sus letras iniciales en mayúscula), podrías usar el siguiente código:

1
2
3
4
5

El ejemplo anterior se le ha dado formato para que sea obvio lo que está sucediendo, pero también podría escribirse así:

1

o incluso así:

1
2
3
4
5

Para acceder al elemento dos hacia abajo y tres hacia la derecha en este array, usarías lo siguiente (porque los elementos del array comienzan en la posición 0):

1

Esta declaración mostrará la letra O para orange (naranja).

Operadores

Los operadores en JavaScript, al igual que en PHP, pueden incluir matemáticas, cambios en strings y operaciones de comparación y lógicas. (and, or, etc.). Los operadores matemáticos de JavaScript se parecen mucho a la aritmética básica; por ejemplo, la siguiente instrucción devuelve 15:

1

Las siguientes secciones te enseñan sobre los distintos operadores.

Operadores aritméticos

Los operadores aritméticos se utilizan para realizar operaciones matemáticas. Puedes usarlos para las cuatro operaciones principales (suma, resta, multiplicación y división), así como para encontrar el módulo de una división (el residuo después de una división) y para incrementar o decrementar un valor. (ver la Tabla 14-2).

Tabla 14-2. Operadores aritméticos

Operadores de asignación

Los operadores de asignación se utilizan para asignar valores a las variables. Empiezan con el muy simple = y continúan con +=, –=, y así sucesivamente. El operador += añade el valor del lado derecho a la variable del lado izquierdo, en lugar de reemplazar totalmente el valor del lado izquierdo. Así, si count comienza con el valor de 6, la declaración:

1

establece count en 7, al igual que la declaración de asignación más familiar:

1

La Tabla 14-3 enumera los distintos operadores de asignación disponibles.

Tabla 14-3. Operadores de asignación

Operadores de comparación

Los operadores de comparación se utilizan generalmente dentro de una estructura como una declaración if, donde necesitas comparar dos elementos. Por ejemplo, puede que desee saber si una variable que ha estado incrementando ha alcanzado un valor específico, o si otra variable es menor que un valor establecido, y así sucesivamente. (ver la Tabla 14-4).

Tabla 14-4. Operadores de comparación

Operadores lógicos

A diferencia de PHP, los operadores lógicos de JavaScript no incluyen equivalentes de and y or a && y ||, y no hay un operador xor. (ver la Tabla 14-5).

Tabla 14-5. Operadores lógicos

Incrementando, decrementando y asignación abreviada

Las siguientes formas de post y preincremento y decremento que aprendiste a utilizar en PHP también son compatibles con JavaScript, al igual que los operadores de asignación abreviada:

1
2
3
4

Concatenación de strings

JavaScript maneja la concatenación de strings de manera ligeramente diferente a PHP. En lugar del operador . (punto), utiliza el signo más (+), así:

1

Suponiendo que la variable messages está establecida con el valor de 3, la salida de esta línea de código será la siguiente:

You have 3 messages.

Así como puedes agregar un valor a una variable numérica con el operador +=, también puedes concatenar un string a otra de la misma manera:

1
2

Caracteres de escape

Los caracteres de escape, que se han utilizado para insertar comillas en los strings, también pueden ser utilizados para insertar varios caracteres especiales, como tabulaciones, saltos de línea y retornos de carro. Aquí hay un ejemplo usando tabulaciones para organizar un encabezado: se incluye aquí simplemente para ilustrar escapes, porque en las páginas web, hay mejores maneras de hacer el diseño:

1

La Tabla 14-6 detalla los caracteres de escape disponibles.

Tabla 14-6. Caracteres de escape en JavaScript

Tipado de variables

Al igual que PHP, JavaScript es un lenguaje muy débilmente tipado; el tipo de dato de una variable se determina solo cuando se le asigna un valor y puede cambiar a medida que la variable aparece en diferentes contextos. Por lo general, no tienes que preocuparte por el tipo de dato de las variables; JavaScript averigua lo que quieres y simplemente lo hace.

Echa un vistazo al Ejemplo 14-3, en el cual:

1. A la variable n se le asigna el valor del string '838102050'. La siguiente línea imprime su valor, y se utiliza el operador typeof para consultar el tipo de dato de la variable.
2. n se le asigna el valor devuelto cuando se multiplican los números 12345 y 67890. Este valor también es 838102050, pero es un número, no un string. El tipo de dato de la variable se busca y se muestra.
3. Se añade algún texto al número n y se muestra el resultado.

Ejemplo 14-3. Establece el tipo de dato de una variable por asignación

1
2
3
4
5
6
7
8
9
10

La salida de este script se ve así:

n = 838102050, and is a string
n = 838102050, and is a number
n = 838102050 plus some text, and is a string

Si alguna vez hay alguna duda sobre el tipo de dato de una variable, o necesitas asegurarte de que una variable tenga un tipo de dato en particular, puedes forzarla a ese tipo de dato utilizando declaraciones como las siguientes (que convierten respectivamente un string a un número y un número a un string):

1
2
3
4
5

O puedes usar las siguientes funciones de la misma manera:

1
2
3
4
5
6

Puedes leer más sobre la conversión de tipos de datos en JavaScript en línea (https://es.javascript.info/type-conversions). Y siempre puedes consultar el tipo de dato de una variable usando el operador typeof.

Funciones

Al igual que con PHP, las funciones en JavaScript se utilizan para separar secciones de código que realizan una tarea específica. Para crear una función, se declara de la manera que se muestra en el Ejemplo 14-4.

Ejemplo 14-4. Una declaración simple de una función

1
2
3
4
5
6

Esta función toma los dos parámetros pasados, los multiplica y devuelve el resultado.

Variables globales

Las variables globales son aquellas definidas fuera de cualquier función (o definidas dentro de funciones pero sin la palabra clave var). Pueden definirse de las siguientes maneras:

1
2
3

Independientemente si estás utilizando la palabra clave var, mientras una variable esté definida fuera de una función, su alcance es global. Esto significa que cada parte de un script puede tener acceso a él.

Variables locales

Los parámetros pasados a una función automáticamente tienen un alcance local, es decir, solo pueden ser referenciados dentro de esa función. Sin embargo, hay una excepción. Los arrays se pasan a una función por referencia, por lo que si modificas cualquier elemento de un parámetro de tipo array, los elementos del array original serán modificados.

Para definir una variable local que tenga alcance solo dentro de la función actual y que no haya sido pasada como parámetro, utiliza la palabra clave var. El Ejemplo 14-5 muestra una función que crea una variable con alcance global y dos con alcance local.

Ejemplo 14-5. Una función que crea variables con alcance global y local

1
2
3
4
5
6
7
8

Para comprobar si la configuración del alcance ha funcionado en PHP, podemos usar la función isset. Pero en JavaScript no existe tal función, así que el Ejemplo 14-6 utiliza el operador typeof, que devuelve el string undefined cuando una variable no está definida.

Ejemplo 14-6. Verificación del alcance de las variables definidas en la función test

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

La salida de este script es la siguiente línea:

a = "123"

Esto muestra que solo la variable a recibió un alcance global, que es exactamente lo que esperaríamos, ya que las variables b y c recibieron un alcance local al estar precedidas por la palabra clave var.

Si tu navegador emite una advertencia sobre que b está indefinido, la advertencia es correcta pero se puede ignorar.

Utilizando let y const

JavaScript ahora ofrece dos nuevas palabras clave: let y const. La palabra clave let es prácticamente un reemplazo para var, pero tiene la ventaja de que no puedes redeclarar una variable una vez que lo hayas hecho con let, aunque sí puedes con var.

Verás, el hecho de que pudieras redeclarar variables utilizando var estaba llevando a errores oscuros, como el siguiente:

1
2
3
4
5
6
7
8
9

¿Puedes ver el problema? Debido a que counter es mayor que 0 (ya que lo inicializamos en 1), el string hello se redefine como "How are you?" (¿Cómo estás?) y luego se muestra en el documento.

Ahora, si reemplazas var con let (como lo siguiente), la segunda declaración será ignorada, y se mostrará el string original "Hello there":

1
2
3
4
5
6
7
8
9

La palabra clave var tiene un alcance global (si está fuera de cualquier bloque o función) o de función, y las variables declaradas se inicializan con undefined, pero la palabra clave let tiene un alcance global o de bloque, y las variables no se inicializan.

Cualquier variable asignada utilizando let tiene un alcance dentro de todo el documento si se declara fuera de cualquier bloque, o, si se declara dentro de un bloque delimitado por {} (lo que incluye funciones), su alcance se limita a ese bloque (y cualquier sub-bloque anidado). Si declaras una variable dentro de un bloque pero intentas acceder a ella desde fuera de ese bloque, se devolverá un error, como en el siguiente caso, que fallará en el document.write porque hello no tendrá valor:

1
2
3
4
5
6
7
8

Puedes usar let para declarar variables con el mismo nombre que las variables previamente declaradas, siempre y cuando sean dentro de un nuevo ámbito, en cuyo caso cualquier valor anterior asignado a una variable con el mismo nombre en el ámbito anterior se volverá inaccesible para el nuevo ámbito, porque la nueva variable con el mismo nombre se maneja totalmente diferente de la anterior. Solo tiene alcance dentro del bloque actual, o de cualquier sub-bloque (a menos que se use otro let para declarar otra variable con el mismo nombre en un sub-bloque).

Es una buena práctica intentar evitar la reutilización de nombres significativos de variables, o corres el riesgo de causar confusión. Sin embargo, las variables de bucle o índice como i (u otros nombres cortos y simples) generalmente pueden reutilizarse en nuevos ámbitos sin causar confusión.

Puedes aumentar aún más tu control sobre el alcance declarando una variable con un valor constante, es decir, uno que no pueda ser cambiado. Esto es beneficioso cuando has creado una variable que lo estás tratando como una constante pero la has declarado utilizando solo var o let, porque podrías tener ocasiones que en tu código intentes cambiar ese valor, lo cual estaría permitido pero sería un error.

Sin embargo, si utilizas la palabra clave const para declarar la variable y asignar su valor, cualquier intento de cambiar más tarde su valor será prohibido, y tu código se detendrá con un mensaje de error en la consola similar a:

Uncaught TypeError: Assignment to constant variable

El siguiente código causará exactamente ese error:

1
2
3
4
5
6
7
8
9

Al igual que let, las declaraciones const también tienen un alcance de bloque (dentro de secciones {} y cualquier sub-bloque), lo que significa que puedes tener variables constantes con el mismo nombre pero con diferentes valores en diferentes ámbitos de un fragmento de código. Sin embargo, te recomiendo encarecidamente que intentes evitar la duplicación de nombres y mantengas cualquier nombre de constante para un solo valor a lo largo de cada programa, utilizando un nuevo nombre de constante donde necesites una nueva constante.

En resumen: var tiene un alcance global o de función, y let y const tienen un alcance global o de bloque. Tanto var como let pueden ser declarados sin ser inicializados, mientras que const debe ser inicializado durante la declaración. La palabra clave var se puede reutilizar para redeclarar una variable var, pero let y const no pueden. Finalmente, const no puede ser redeclarado ni reasignado.

El Document Object Model

El diseño de JavaScript es muy inteligente. En lugar de simplemente crear otro lenguaje de scripting (lo que hubiera sido una mejora bastante buena en ese momento), había una visión de construirlo alrededor del ya existente Document Object Model de HTML. Este modelo descompone las partes de un documento HTML en objetos discretos, cada uno con sus respectivas propiedades y métodos, y cada uno sujeto al control de JavaScript.

JavaScript separa objetos, propiedades y métodos utilizando un punto (una buena razón por la cual + es el operador de concatenación de strings en JavaScript, en lugar del punto). Por ejemplo, consideremos una tarjeta de presentación como un objeto al que llamaremos card. Este objeto contiene propiedades como su nombre, dirección, número de teléfono, y así sucesivamente. En la sintaxis de JavaScript, estas propiedades se verían así:

card.name
card.phone
card.address

Sus métodos son funciones que recuperan, modifican y actúan de otras maneras sobre las propiedades. Por ejemplo, para invocar un método que muestre las propiedades del objeto card, podrías utilizar una sintaxis como esta:

1

Echa un vistazo a algunos de los ejemplos anteriores en este capítulo y observa dónde se utiliza la instrucción document.write. Ahora que entiendes cómo JavaScript se basa en objetos, verás que write es en realidad un método del objeto document.

Dentro de JavaScript, existe una jerarquía de objetos padre e hijo, que es lo que se conoce como el Document Object Model. (DOM; ver Figura 14-3).

La figura utiliza etiquetas HTML con las que ya estás familiarizado para ilustrar la relación padre/hijo entre los distintos objetos de un documento. Por ejemplo, una URL dentro de un enlace es parte del cuerpo de un documento HTML. En JavaScript, se hace referencia a ello así:

1

Observa cómo esto sigue la columna central hacia abajo. La primera parte, document, se refiere a las etiquetas <html> y <body>; links.linkname se refiere a la etiqueta <a>, y href al atributo href.

Vamos a convertir la expresión en HTML y un script para leer las propiedades de un enlace. Escribe el Ejemplo 14-7 y guárdalo como linktest.html; luego ábrelo en tu navegador.

Ejemplo 14-7. Leer una URL de un enlace con JavaScript

1
2
3
4
5
6
7
8
9
10
11
12

Observa la forma corta de las etiquetas <script>, donde he omitido el parámetro type="text/JavaScript" para ahorrarte un poco de escritura. Si lo deseas, solo con el fin de probar esto (y otros ejemplos), también podrías omitir todo lo que esté fuera de las etiquetas <script> y </script>. El resultado de este ejemplo es el siguiente:

Click me
The URL is http://mysite.com

La segunda línea de la salida proviene del método document.write. Observa cómo el código sigue el árbol del documento desde document hasta links, luego a mylink (el id dado al enlace) y finalmente a href (el valor de destino de la URL).

También hay una forma corta que funciona igual de bien, que comienza con el valor en el atributo id: mylink.href. Entonces, puedes reemplazar esto:

1

con lo siguiente:

1

Otro uso del símbolo $

Como se mencionó anteriormente, el símbolo $ está permitido en los nombres de variables y funciones de JavaScript. Debido a esto, a veces puedes encontrarte con código de aspecto extraño como este:

1

Algunos programadores con iniciativa han decidido que la función getElementById es tan importante en JavaScript que han escrito una función para reemplazar la llamada $, como en jQuery (aunque jQuery usa el $ para mucho más que eso ver Capítulo 22), como se muestra en el Ejemplo 14-8.

Ejemplo 14-8. Una función que reemplaza el método getElementById

1
2
3
4
5
6

Por lo tanto, siempre y cuando hayas incluido la función $ en tu código, una sintaxis como esta:

1

puede reemplazar al siguiente código:

1

Utilizando el DOM

El objeto links es en realidad un array de URLs, por lo que la URL mylink en el Ejemplo 14-7 también puede referirse de manera segura en todos los navegadores de la siguiente manera (porque es el primer y único enlace):

1

Si quieres saber cuántos enlaces hay en un documento completo, puedes consultar la propiedad length del objeto links así:

1

Puedes extraer y mostrar todos los enlaces en un documento de esta manera:

1
2

El length de algo es una propiedad de cada array, y de muchos objetos también. Por ejemplo, el número de elementos en el historial web de tu navegador se puede consultar así:

1

Para evitar que los sitios web espíen tu historial de navegación, el objeto history almacena solo el número de sitios en el array: no puedes leer ni escribir en estos valores. Pero puedes reemplazar la página actual con una del historial, si sabes en qué posición se encuentra dentro del historial. Esto puede ser muy útil en casos en los que sabes que ciertas páginas en el historial provienen de tu sitio, o simplemente desees que el navegador retroceda una o más páginas, lo cual puedes hacer con el método go del objeto history. Por ejemplo, para hacer que el navegador retroceda tres páginas, emita el siguiente comando:

1

También puedes utilizar los siguientes métodos para avanzar o retroceder una página a la vez:

1
2

De manera similar, puedes reemplazar la URL actualmente cargada con una de tu elección, así:

1

Por supuesto, hay mucho más cosas en el DOM que leer y modificar enlaces. A medida que avances a través de los siguientes capítulos sobre JavaScript, te familiarizarás bastante con el DOM y cómo acceder a él.

Sobre document.write

Al enseñar programación, es necesario tener una forma rápida y fácil de mostrar los resultados de las expresiones. En PHP (por ejemplo) existen las declaraciones echo y print, que simplemente envían texto al navegador, así que es fácil. En JavaScript, sin embargo, existen las siguientes alternativas.

utilizando console.log

La función console.log mostrará en la consola del navegador actual el resultado de cualquier valor o expresión que se le pase. Se trata de un modo especial de presentación, con un marco o ventana separada de la ventana del navegador, en la cual se pueden mostrar errores y otros mensajes. Aunque es genial para programadores experimentados, no es la mejor opción para principiantes porque la salida no se parece al contenido web en el navegador.

Utilizando alert

La función alert muestra en una ventana emergente valores o expresiones que se le pasan, la cual requiere que hagas clic en un botón para cerrarla. Claramente, esto puede volverse bastante irritante muy rápidamente, y tiene la desventaja de mostrar solo el mensaje actual, borrando los anteriores.

Escritura en elementos

Es posible escribir directamente en el texto de un elemento HTML, lo cual es una solución bastante elegante (y la mejor para sitios web en producción), excepto que para este libro cada ejemplo requeriría que se creara dicho elemento y algunas líneas de código JavaScript para acceder a él. Esto interfiere con la enseñanza principal de un ejemplo y haría que el código pareciera excesivamente engorroso y confuso.

Utilizando document.write

La función document.write escribe un valor o expresión en la ubicación actual del navegador y, por lo tanto, es la opción perfecta para mostrar resultados rápidamente. Mantiene todos los ejemplos breves y concisos, colocando la salida justo allí en el navegador junto al contenido web y el código.

Sin embargo, es posible que hayas escuchado que esta función es considerada insegura por algunos desarrolladores, porque cuando la llamas después de que una página web se ha cargado completamente, sobrescribirá el documento actual. Aunque esto es correcto, no se aplica a ninguno de los ejemplos de este libro, porque todos ellos utilizan document.write de la manera en que originalmente se pretendía: como parte del proceso de creación de la página, llamándolo solo antes de que la página haya terminado de cargarse y mostrarse.

No obstante, aunque uso document.write de esta manera para ejemplos simples, nunca lo utilizo en código de producción (excepto en las circunstancias más raras en las que realmente es necesario). En su lugar, casi siempre utilizo la opción anterior de escribir directamente en un elemento especialmente preparado, como en los ejemplos más complejos a partir del Capítulo 18. (que acceden a la propiedad innerHTML de los elementos para presentar la salida del programa).

Así que, por favor, recuerda que cuando veas que se llama a document.write en este libro, está ahí solo para simplificar un ejemplo, y les recomiendo que también usen la función de la misma manera para obtener resultados rápidos de prueba.

Con la advertencia explicada, en el siguiente capítulo continuaremos nuestra exploración con JavaScript analizando cómo controlar el flujo del programa y escribir expresiones.

Preguntas

1. ¿Qué etiquetas utilizas para incluir código JavaScript?
2. Por defecto, ¿a qué parte de un documento se enviará la salida del código JavaScript?
3. ¿Cómo puedes incluir código JavaScript desde otra fuente en tus documentos?
4. ¿Qué función de JavaScript es equivalente a echo o print de PHP?
5. ¿Cómo puedes crear un comentario en JavaScript?
6. ¿Cuál es el operador de concatenación de strings en JavaScript?
7. ¿Qué palabra clave puedes utilizar dentro de una función en JavaScript para definir una variable que tenga un alcance local?
8. Proporciona dos métodos compatibles con múltiples navegadores para mostrar la URL asignada al enlace con un id de thislink.
9. ¿Qué dos comandos de JavaScript harán que el navegador cargue la página anterior en su array de historial?
10. ¿Qué comando de JavaScript usarías para reemplazar el documento actual con la página principal del sitio web oreilly.com?

Ver "Respuestas del capítulo 14" del Apéndice A para comprobar las respuestas a estas preguntas.

Expresiones y control de flujo en JavaScript

Expresiones

Funciones, objetos y arrays en JavaScript

Funciones en JavaScript

Validación y manejo de errores en JavaScript y PHP

Validando la entrada del usuario con JavaScript

Utilizando comunicaciones asíncronas

¿Qué es la comunicación asíncrona?

Introducción a CSS

Importando una hoja de estilos

CSS avanzado con CSS3

Selectores de atributos

Accediendo a CSS desde JavaScript

Revisando la función getElementById

Introducción a jQuery

¿Por qué jQuery?

Introducción a jQuery Mobile

Incluyendo jQuery Mobile

Introducción a React

¿Para qué sirve React?

Introducción a HTML5

Canvas

Canvas de HTML5

Creando y accediendo a Canvas

Audio y vídeo en HTML5

Sobre los códecs

Otras características de HTML5

Geolocalización y el servicio de GPS

Uniendo todo

Diseñando una aplicación de redes sociales

Soluciones a las preguntas de los capítulos

Respuestas del capítulo 14

1. Para incluir código JavaScript, utilizas las etiquetas <script> y </script>.
2. Por defecto, el código JavaScript se mostrará en la parte del documento en la que reside. Si está en el encabezado, se mostrará en el head; si está en el cuerpo del documento, se mostrará en el body.
3. Puedes incluir código JavaScript de otros archivos en tus documentos ya sea copiándolo y pegándolo o, lo más habitual, incluyéndolo como parte de una etiqueta <script src='filename.js'>.
4. El equivalente de los comandos echo y print utilizados en PHP, es la función document.write de JavaScript (o método).
5. Para crear un comentario en JavaScript, comienza con // para un comentario de una sola línea o incluirlo entre /* y */ para un comentario de varias líneas.
6. El operador de concatenación de strings en JavaScript es el símbolo +.
7. Dentro de una función de JavaScript, puedes definir una variable que tenga un alcance local iniciandola con la palabra clave var , let o const en la primera asignación.
8. Para mostrar la URL asignada al enlace con un id de thislink en los navegadores más importantes, puedes usar cualquiera de los dos siguientes comandos:

   1
   2
   

   document.write(document.getElementById('thislink').href) document.write(thislink.href)
9. Los comandos para cambiar a la página anterior en el historial del navegador son:

   1
   2
   

   history.back() history.go(-1)
10. Para reemplazar el documento actual con la página principal del sitio web de O'Reilly (https://www.oreilly.com), podrías utilizar el siguiente comando:

    1
    

    document.location.href = 'http://www.oreilly.com'