JavaScript

C0mo empezar a utilizar JavaScript en aplicaciones PHP

Hola que tal, bienvenido a este artículo sobre JavaScript donde aprenderás los conceptos básicos, sintaxis, para qué sirve, funcionamiento y cómo implementar algunos ejemplos en tus aplicaciones Web.

Si estás empezando con el desarrollo web pensarás que talvez sólo con saber PHP ya es suficiente para desarrollar una aplicación web, pero lamentable mi querido amigo es que no es así, tras el desarrollo de aplicaciones web existen un sin número de tecnologías que puedes utilizar tanto para el back-end (lado del servidor) como para el front-end (lado del cliente, específicamente la vista) que de cierta manera hacen que tu aplicación sea más amigable al usuario, aceleran el tiempo de desarrollo, en fin te liberan de algunas cosas complejas que tardarás más si lo haces todo a pelo.

Cómo me ayuda JavaScript?

Bueno te explico con un caso sencillo y voy ha poner como ejemplo las validaciones de campos en un formulario, por ejemplo que el campo cédula (en el caso de Ecuador) valide que el número que se ingrese sea de una cédula correcta, que el campo de teléfono solo acepte números, que el campo email sea un correo electrónico válido.

Ahora bien, si piensas que todas las validaciones mencionadas anteriormente se las puede hacer utilizando PHP, pues estas en lo correcto, pero hay algo que que se debe tomar en cuenta y es que todas estas validaciones se harían del lado del servidor, ya que ahí es dónde realmente pondríamos reglas con código para validar cada campo, si te das cuenta cada petición de validación tendría que ir al servidor y en el caso de que un campo no sea el correcto tendrás que de nuevo enviar al cliente un mensaje de error, este viaje entre el cliente y el servidor le quitan rendimiento a tu aplicación y es ahí donde aparece el tema de JavaScript, ya que todas estas validaciones las podemos hacer del lado del cliente, sin que el servidor lo note.

Lo que te he mencionado es sólo una parte de lo que puedes hacer con JavaScript y aunque es bueno aclarar que existen algunas librerías y frameworks como por ejemplo Jquery, Ajax, AngularjS que implementan JavaScript y que hacen que sea más fácil y rápido el desarrollo de algunas funcionalidades del lado del cliente, creo que es importante conocer la sintaxis de JavaScript puro y como incluirlo en nuestros programas antes de abstraernos utilizando alguna librería o framework.

Además también es bueno mencionar que hoy en día ya no sólo se utiliza JavaScript para la parte del lado del cliente sino del lado del servidor, sí, del lado del servidor, utilizando Node.js que es un entorno que permite ejecutar código JavaScript del lado del servidor, si quieres leer acerca de Node.js puede visitar el siguiente enlace  o Documentación y descarga de Node.js.

Sintaxis básica de JavaScript

Así como PHP utiliza etiquetas para que el lenguaje sea reconocido, Javascript también hace algo parecido, por ejemplo para escribir código JavaScript y que sea interpretado, debe estar dentro de las siguientes etiquetas, de apertura <script language=”javascript”> y de cierre </script>, el siguiente ejemplo muestra un mensaje a través de una ventana:

Cómo incluir JavaScript en una aplicación PHP?

Existen dos formas de incluir código en nuestros programas, la primera es incluirlo directamente en la cabecera de tu programa utilizando las etiquetas de apertura y de cierre y la otra es crear un archivo solo para el script e incluirlo a nuestro programa a través de una referencia, esta última forma es la más aconsejada ya que tu código Javascript puede crecer y afectar al aspecto y a la organización de tu programa, además puede requerir varias validaciones en tu aplicación y una forma de organizarlas y darles modularidad es tenerlas por separado, incluso para su posterior mantenimiento, te será más fácil recordar qué es lo que hace cada parte del código.

Antes de empezar con los ejemplos debo comentarte que para realizar una práctica satisfactoria hay algunos requisitos previos en cuanto al entorno de desarrollo, por ejemplo debes tener instalado WampServer, AppServ o algún otro paquete que te permita deployar aplicaciones web con PHP, además de esto también tendrás que instalar un editor de código como por ejemplo Sublime Text, o si tienes algún otro editor que se de tu agrado no importa.

Incluir JavaScript en el mismo programa

Lo siguiente que vas hacer es crear una carpeta llamada javascript dentro de tu servidor web, si usas WampServer, estará ubicada en la siguiente ruta: C:\wamp64\www\javascript, dentro de esa carpeta vas a crear un archivo llamado index.php y vas a copiar el código que está continuación:

Nota: Para que puedas ver el ejemplo debes ir al navegador y poner el nombre del proyecto que es el nombre de la carpeta que creaste anteriormente, la url debería quedar de la siguiente manera: localhost/javascript

Incluir JavaScript cuando está en un archivo propio

Para esto debes crear un archivo y guardarlo con el nombre script.js (dentro de la misma carpeta javascript creada anteriormente), no olvides la extensión debe ser .js y pegas el siguiente código, que es una función que escribe ‘Mi primer script’ en el documento html:

Cuando tienes código JavaScript en un archivo diferente, se suele utilizar funciones y dentro de estas el código, por lo que para que ese código se ejecute debes llamar a la función, por lo general se llama a una función cuando ocurre algún evento en la vista del cliente por ejemplo al presionar un botón, al pasar el cursor por una región de la pantalla, bueno hay infinidades de eventos de un elemento html al cual se le puede asociar una función, algunos de esos eventos y cómo utilizarlos te los dejo en este artículo, otros los publicaré en una posterior entrada.

En los casos donde se declara un archivo .js no es necesario utilizar las etiquetas de apertura y cierre, basta con guardar el archivo con la extensión .js.

Ahora bien, para incluirlo dentro de tu programa o documento html, debes utilizar la siguiente sintaxis dentro de la etiqueta head de tu documento:

Nota: Hay ocasiones en las que modificas tu archivo .js, puede ser para añadir alguna función o modificar código que ya escribiste anteriormente, pero por alguna razón los cambios no se reflejan (en la vista), lo primero que debes hacer es borrar la caché del navegador, también funciona cerrar y volver abrir el proyecto, si por alguna razón ninguna de las opciones anteriores no te funciona, debes añadir ?1.1.0 a la ruta del archivo .js, quedando de la siguiente manera: 

El documento html completo te lo dejo a continuación:

Nota: Para que puedas ver el ejemplo debes guardar el documento anterior, bien sea con extensión .php o .html y luego escribir en el navegador utilizando el nombre del documento: localhost/javascript/nombre-documento

Si te das cuenta para llamar a la función alerta(), se utiliza el evento onclick del botón, por lo que para ver el resultado debes dar click en el botón.

Comentarios en JavaScript

Existen dos formas de comentar, la primera es utilizado para una sola línea.

Variables en JavaScript

En JavaScript no es necesario declarar el tipo de dato para una variable, este se guarda de acuerdo al valor que tiene actualmente la variable (si tiene un entero se almacenará como entero, si es una cadena de texto se almacenará como un string),  lo que sí es recomendable utilizar la palabra reservada var antes de cada variable, aunque no es obligatorio, a continuación se muestra un ejemplo de declaración de una variable:

Es importante recordar que en JavaScript también se puede utilizar una variable que no haya sido previamente declarada, por ejemplo:

Variables de tipo entero:

Variables de tipo double:

Variables de tipo cadena:

Una variable de tipo cadena se puede declarar bien sea utilizando comillas simples o comillas dobles.

Variables de tipo caracter:

Por ejemplo puede ser que tengas dos valores para tipo=Suspendido(S)/Aprobado(A), podrías utilizar una variable de tipo carácter y almacenar según corresponda.

Arreglos en JavaScript

Algunas veces necesitas almacenar varios valores en los cuales utilizar variables no es lo óptimo, en estos casos el uso de arreglos es muy práctico, para declarar un arreglo utilizas la siguiente sintaxis:

Los arreglos pueden ser de cualquier tipo: enteros, doubles, caracteres y cadenas, incluso se pueden mezclar varios tipos en el mismo arreglo, por ejemplo a continuación declaro un arreglo con los meses del año.

O un arreglo vacío:

Otra forma de declarar un arreglo vacío es utilizando la palabra reservada Array():

La forma de añadir más elementos cuando se declara un arreglo vacío es utilizando el índice o posición, para evitar cualquier error al accesar a un elemento, hay que recordar que los arreglos empiezan desde la posición cero.

Acceder/añadir un elemento al arreglo

Tanto para acceder, como para añadir un elemento al arreglo se utiliza el índice o posición:

Ejemplos prácticos

Vamos hacer un ejemplo sencillo para empezar a utilizar lo visto anteriormente, para esto, dentro del mismo proyecto anterior (javascript), vas a crear un archivo llamado arreglos.php, en el cual estará el siguiente código:

Básicamente lo que cambia en relación con el archivo index.php es que añadimos una caja de texto en la que vamos imprimir un arreglo, además cambiamos el nombre del botón y en el evento onclick tiene la función imprimirArreglo(), que vamos a crearla a continuación.

Lo siguiente que vas hacer es añadir una función en el archivo script.js.

Ahora para ver el ejemplo debes acceder a través del navegador al archivo arreglos.php que debe estar en la siguiente ruta: localhost/javascript/arreglos.php, si le das click en el botón te mostrará en la caja de texto los meses del año.

Nota: Puedes crear nuevos arreglos e ir jugando con la impresión, por ejemplo imprimir sólo una posición mesesAnio[0].

Continuando en el aprendizaje de Javascript, la pregunta del millón es cómo hicimos eso de mostrar los meses del año en la caja de texto?

Como te mencionaba en el inicio de este artículo se puede hacer muchas cosas con JavaScript y no solo limitarse por ejemplo a la validación de un campo en un formulario.

Por ejemplo puedes cambiar el estilo de un elemento, añadir un elemento al documento HTML, todo de forma dinámica y de una manera muy sencilla.

Si te fijas para poner en la caja de texto los meses del año, se utiliza la sentencia document.getElementById(‘mostrar’).value, esto se debe que JavaScript tiene acceso a todos los nodos (elementos o etiquetas) del árbol DOM de un documento HTML.

Para saber en qué elemento se va mostrar el arreglo se utiliza el id de la caja de texto y su atributo value, posteriormente la función toString() convierte el arreglo a una cadena.

Pero que rayos es el árbol DOM?

Bueno, de una manera simplificada y yendo al grano el árbol DOM (Document Object Model) viene ha ser la estructura de un documento HTML.

Se le considera árbol, puesto que cuando una página web se carga en tu navegador este la convierte en un conjunto jerárquico de elementos llamados nodos relacionados entre sí, por ejemplo en el siguiente caso, analicemos el un documento HTML.

En este sencillo ejemplo podemos ver que de forma jerárquica como un árbol de nodos a un documento HTML, donde por ejemplo el nodo raíz o padre es html, dentro de html existen dos nodos hijos que están en el mismo nivel y que son head y body, por su parte head tiene otro nodo hijo llamado title y body tiene un nodo hijo que es el elemento <p> y así un documento html puede tener varios nodos.

A partir de lo anterior, la raíz de todo árbol DOM es document y es por eso que en la función imprimirArreglo() utilizamos la sentencia document.getElementById(‘mostrar’).value, luego de document viene la función getElementById  a la que se le pasa el id del elemento al que se quiere acceder o modificar, en el caso del ejemplo anterior el elemento texto tenía el id=mostrar:

Modificar el contenido de un elemento en un documento HTML usando JavaScript

Hay muchos casos que se necesita modificar algún elemento en un documento HTML, por ejemplo para dar un mensaje después de una acción, en el siguiente ejemplo vamos a modificar un elemento <p> (párrafo).

En el documento HTML anterior se tiene 2 elementos párrafo, el segundo sin ningún texto, lo que hacemos es a través de la función anadirelemento() añadir el texto ‘Elemento párrafo modificado’, esto se hace utilizando la función getElementById() a la cual se le pasa el id del párrafo (‘nuevo_mensaje’), y con la palabra innerHTML se añade el texto.

La propiedad innerHTML permite obtener u añadir los elementos descendientes de un elemento html.

Cómo obtener el valor de un checkbox con JavaScript?

Ya avanzando un poco más veamos como obtener el valor de un checkbox, para esto bastará con obtener la propiedad checked del elemento.

Es importante mencionar que un elemento checkbox puede almacenar dos valores y que pueden ser true o false.

Por ejemplo podríamos poner lo siguiente, dentro del documento HTML:

Y en el script el siguiente fragmento de código:

Dónde check es el id del elemento del que vamos a obtener el valor, esto te debería mostrar en una alerta true o false dependiendo el estado del checkbox.

Cómo obtener el valor de varios checkbox?

Para esto todos los checkbox que declares deberán tener el mismo id como se muestra en el siguiente archivo html, algo importante que hay que mencionar es que para esto se debe añadir un formulario de manera que se pueda obtener los elementos que están dentro del mismo, que para este caso son los elementos checkbox.

Ahora debes crear la función verFrutas(), que debe quedar de la siguiente manera:

Con la sentencia document.forms[0], obtienes los elementos que están en el formulario, posteriormente en la variable frutas se almacenan los checkbox en forma de un arreglo, para lo cual utilizamos un bucle for para recorrerlos y saber si estado con la propiedad checked.

Cómo obtener el valor de un select?

Básicamente se comporta como el ejemplo anterior, salvo que la propiedad que permite acceder a sus valores se llama value, por ejemplo en tu archivo declaras el elemento de la siguiente manera:

La función JavaScript queda de la siguiente manera:

En la variable opciones se almacena como un arreglo las frutas que hay en el select, con la sentencia document.getElementById(‘frutas’).selectedIndex se obtiene los índices de cada fruta que hay en el select, así como en el checkbox, en los select los índices empiezan en cero, entonces desde arreglo opciones se obtiene cada fruta de acuerdo al índice que se la pasa y se obtiene el nombre con la propiedad text.

Mostrar un ventana emergente con JavaScript

Se puede mostrar una ventana emergente tipo popup, por ejemplo para modificar datos de un registro o ingresar un registro. Con la función open muestras una ventana, el primer parámetro que recibe es el nombre de la página que quiere mostrar, el segundo es un texto que le indica que debe ser emergente, el último parámetro son las dimensiones, debes tener en cuenta que la página a mostrar debe estar previamente creada.

Bueno, estas son algunas cosas que puedes hacer con JavaScript y de las que puedes partir para hacer cosas más complejas, si quieres profundizar el aprendizaje de JavaScript puedes ir al sitio W3schools  donde de forma gratuita puedes aprender más sobre este lenguaje.

Si te gustó este tutorial no olvides comentar y compartirlo, nos vemos en la próxima entrada.

Opt In Image
Programación Web Full Stack
Suscríbete ahora y recibe los mejores contenidos sobre Programación Web en tu correo.

Tus datos estarán protegidos y 100% libre de Spam

Mi nombre es Elivar Largo, Developer Full Stack, blogger y emprendedor. Trabajo y comparto conocimientos sobre las siguientes tecnologías: Spring Boot, Laravel, Angular, Flutter. Contacto: elargor@gmail.com.

Artículos Recomendados

2 Thoughts to “Como empezar a utilizar JavaScript en aplicaciones PHP”

  1. Pepo

    Hola Elivar, excelente artículo, me ha servido para aclararme. Estoy programando una web dentro de wordpress en php, he creado mis propias paginas en php y utilizo javascript para que al seleccionar un check (“marcar”) se marquen todos los checks que hay en una tabla, llamando a la funcion Marcar_desmarcar() que tengo en un archivo funciones.js. Se llama directamente desde el evento onclick cuando incluyo ese check:

    El archivo .js está incluido al final de la página (he leído que es lo correcto para asegurarse de que todos los elementos estén cargados).
    La cuestión es que al cargar la página veo que no funciona inicialmente esta función, y mirando el Inspeccionador de Chrome veo error “Function Marcar_desmarcar is not defined at HTMLInputElement.onclick”. Sin embargo tras varias cargas y usos de la página empieza a funcionar, con lo que ya no sé qué pensar.
    Estoy bastante perdido, ¿debo incluir en el encabezado mi archivo.js?¿es cuestión del navegador?También he leído que no se deben incluir funciones en los onclick, sino programar la captura de eventos en el archivo .js, pero de momento me parecía bastante sencillo hacerlo de esta forma puesto que sólo se trata de un elemento.
    Gracias por la ayuda.

    1. Elivar Largo

      Hola Pepo, yo creería que este error te ocurre porque está al final del archivo, si es cierto que es recomendable al menos por cuestiones de SEO, pero algunos casos es necesario ponerlos en la cabecera.

      Otro problema podría ser que hay conflictos de pronto con archivos Java Script del propio WordPress, como sabrás WordPress ya viene con funcionalidades y adaptarlo a cierta características a veces es un poco complicado, con todo lo que te recomiendo es lo siguiente:

      1. Prueba poniendo en la cabecera la inclusión del archivo .js
      2. Si lo anterior no funciona, prueba usando el mismo archivo .js fuera de WordPress, crea una página .html o .php sola y prueba que tu script está correcto, con esto descartaríamos que sea por el script.
      3. Prueba usando diferentes navegadores para descartar que el problema sea por el navegador.

      Prueba con eso a ver que pasa. Saludos!!!

Dejar un Comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.