Explicación

14.1 ¿Qué es Javascript?

JavaScript es un lenguaje de script que se ejecuta en su totalidad dentro del navegador web y para llamarlo, se coloca entre los tags <script>...</ script>. Recrea el tradicional ejemplo "Hello World" utilizando JavaScript:

 <body>
  <script type="text/javascript">
   document.write("Hello World")
  </script>
  <noscript>
   Your browser doesn't support or has disabled JavaScript
  </noscript>
 </body>

En este código puedes ver la aplicación del tag <script>...</script> y del tag <noscript>...</noscript> en el ejemplo.

Básicamente, si javascript está activo en el navegador, éste debe escribir la palabra “Hello World”, de lo contrario aparecerá el mensaje de error: “Your browser doesn't support or has disabled JavaScript”.
<noscript>...</noscript> funciona para ofrecer al visitante una alternativa con HTML, en dado caso que su navegador no soporte javascript o simplemente el usuario no desee activar este tipo de recursos.
Puede decirse que el comando document. write de Javascript es el equivalente de echo de PHP, el cual simplemente imprime en la pantalla lo que se le ordena.

Otra cosa que es posible observar es que el uso de “;” (punto y coma) al final de los comandos es opcional, sin embargo, es bastante recomendable que lo uses al final de los comandos, con la intención que sigas utilizando una base de codificación. Es posible usar Javascript en todo el cuerpo del documento HTML, puede estar en el apartado <head>...</head>, en el apartado <body>...</body> o al final del documento.

La decisión de dónde colocarlo depende de dos situaciones clave:

Si necesitas ejecutar el código inmediatamente, debes colocar el Javascript al inicio del documento.

Si no requieres que se ejecute de inmediato, colócalo fuera del <head>...</head> y al final del documento. Esta opción permite que contenido clave se cargue primero, permitiendo que el usuario vea contenido mientras se siguen cargando los scripts.

Ahora bien, ¿qué hace Javascript?

Permite crear sitios web más interactivos al acceder y modificar los elementos HTML de las páginas mientras el usuario observa el contenido del sitio en el navegador. Javascript puede hacer que una página web se sienta interactiva al responder a las acciones de los usuarios. Pero, ¿cuándo y para qué puedes usar esta herramienta?

Para seleccionar cualquier elemento, atributo o texto de una página HTML. Por ejemplo cuando quieres el texto dentro de los elementos <h3> de tu página.

Para agregar atributos, elementos y texto, así como para eliminar estos elementos. Por ejemplo cuando deseas agregar un párrafo de texto debajo del primer elemento <h1>.

Para programar reglas o pasos específicos que el navegador tiene que seguir. De esta manera puedes modificar el contenido de una página. Un script puede revisar cuál imagen ha seleccionado un usuario y mostrar una imagen más grande en un lightbox.

Para reaccionar a eventos específicos. Por ejemplo, se puede ejecutar cierto script cuando determinado botón ha sido presionado o si un elemento ha sido tocado por el puntero.

Para incluir la magia de Javascript en tus páginas, tienes que aprender a escribir scripts, mismos que se definen como una serie de instrucciones cortas que la computadora entiende y sigue para lograr una meta. Seguramente has seguido recetas para cocinar una sopa o un pastel, en dicha receta el autor te da los pasos que tienes que seguir para obtener un producto comestible y sabroso. Este concepto se aplica perfectamente al escribir un script.

A continuación se muestran los pasos básicos para escribir un script.

Define la meta

Lo primero que debes hacer es saber qué es lo que quieres lograr con tu script.

Diseña el script

Esa gran meta que tienes en mente se logra siguiendo un proceso. Primero tienes que separar la meta en pequeñas tareas relacionadas que la computadora pueda seguir. Ya que tienes listas las tareas, puedes escribir pasos individuales para completar cada. Tienes que escribir una receta que la computadora pueda seguir.

Codificación de cada paso

Tienes que lograr que la computadora entienda lo que le dices, entonces cada paso de la receta tiene que ser escrito en un lenguaje que comprenda: Javascript.

Antes de escribir código es recomendable que pases por este proceso de trabajo. Este hábito no es solo para trabajar con Javascript, sino que aplica para todo lo relacionado con programación, pues el diseño del programa es vital para evitar retrabajo y redundancias.

14.2 Objetos y propiedades

Observa la siguiente imagen del paisaje de un crepúsculo en una granja.

Desde el punto de vista de la programación, cada cosa que existe en el mundo se considera un objeto. En esta imagen tenemos como objetos principales a la vaca, los cerdos, el caballo, la casa, el molino y el granero. Ahora bien, un programador puede afirmar sin temor a equivocarse que existe una sola instancia del caballo, mientras que tenemos dos instancias del cerdo. Cada objeto puede tener sus propias propiedades, eventos y métodos. Estas tres características conforman a un objeto.

Las propiedades o características del objeto tienen nombre y valor. En el caso de la imagen, podría decirse que las propiedades son el color de los animales, la altura de la casa, etcétera. Cada uno de estos valores cuenta algo acerca de las instancias del objeto. La propiedad que puede ser más obvia es el nombre de cada instancia, por ejemplo podríamos tener el valor caballo cuyo valor puede ser plata, suponiendo que ese sea su nombre.

Algunas de las propiedades del objeto granja pueden ser:

Número de cuartos = 4
Número de focos = 10
Habitantes = 4
Niños = 2
Material = madera

En el caso del objeto cerdo, el cual tiene varias instancias, tienen las mismas propiedades, sin embargo tienen distintos valores:

A. Cerdo A

Peso = 120kg
Género (macho/hembra) = macho
Años = 2
Raza = Yorkshire

B. Cerdo B

Peso = 145kg
Género = hembra
Años = 3
Raza = Duroc

Por otro lado, los eventos se refieren a la interacción con los objetos de nuestro mundo, las cuales pueden cambiar los valores de las propiedades de estos objetos. Por ejemplo, si el granjero alimenta de más a sus cerdos, el peso de cada uno de los cerdos se verá afectado por esta acción del granjero. En el caso de la programación, estas interacciones generalmente vienen de la acción del usuario sobre zonas específicas que le mostramos para que juegue. Puede ser un botón, un enlace o una imagen y la acción puede ser un rollover, un clic o un arrastre del objeto.

Los métodos representan las instrucciones de las cosas que el usuario necesita hacer con los objetos que tiene a su disposición, actualizando o cambiando sus valores de acuerdo a las instrucciones que indicadas. Supón que necesitas averiguar cuántos kilos de productos entran y salen del granero cada cierto tiempo. Entonces, puedes crear métodos como los siguientes:

entrada_Diaria();
salida_Mensual();

Cada uno de estos métodos contiene instrucciones con los pasos a seguir para completar la tarea que se le asigna.

14.3 Creando scripts

Como se mencionó al principio de este capítulo, puedes agregar Javascript en cualquier parte del cuerpo del documento HTML, sin embargo lo ideal es colocar el código en un documento aparte y después cargar los elementos básicos de la página. Cuando el browser se encuentra con un <script>...</script> se detiene para cargar contenido de dicho script y luego de cargarlo, verifica si éste tiene que hacer algo específico.

Al igual que podemos llamar documentos externos CSS mediante <link href="tu_doc.css" rel="stylesheet" />, con javascript usamos:

 <script src="tu_doc.js"> </script>

Desarrolla este ejercicio, en el cual dependiendo de la hora en tu computadora, recibirás un amigable saludo por medio de Javascript. Como en todo el curso, crea un folder para esta práctica de manera que puedas identificarlo con facilidad. Escribe un nuevo documento HTML llamado hola.html. En el <head>... </head> crea una liga que invoque a hola.js que vive dentro del folder js en la raíz de tu proyecto.

En hola.js escribe este código, más abajo puedes consultar la explicación:

var hoy = new Date();
var horaAhora = hoy.getHours();
var saludo;

if (horaAhora > 18) {
 saludo = 'Buenas noches!';
} else if (horaAhora > 12) {
 saludo = 'Buenas tardes!';
} else if (horaAhora > 0) {
 saludo = 'Buenos dias!';
} else {
 saludo = 'Bienvenido';
}
document.write(saludo);

Hasta ahora ya conoces el uso de if / else y de las variables desde que viste PHP en los inicios de esta aventura, así que seguramente sabes lo que está pasando en esta pieza de código. Pero de todas maneras lo desglosamos para ti.

Como puedes ver, el uso de variables aquí es muy parecido que con PHP, se declaran con el keyword var y se les asigna un valor. Recuerda que las variables son piezas de información que se deben guardar para que el programa pueda funcionar correctamente. En javascript las variables son case sensitive por lo que “hoy” – “Hoy” y “HOY” son tres variables totalmente diferentes.

En el ejemplo hay tres variables, la primera variable hoy crea un nuevo objeto del tipo Date(), este permite trabajar con fechas y tiempo. De hecho, puedes ver que en la segunda variable hora. Ahora se está aplicando un valor de hoy.getHours() que es un método del objeto Date que permite regresar horas, de 0 a 23, cuando sea requerido.

El uso de las condicionales es muy obvio, si la respuesta de horaAhora es mayor a 18, entonces recibimos un mensaje de buenas noches, recuerda que getHours regresa de 0 a 23 horas. Por otro lado, si es mayor a 12, da las buenas tardes y si es mayor a 0 dará los buenos días.

Si no obtienes ninguno de estos resultados, entonces solo se da el mensaje de bienvenida contenido en el else final. Al final, se pide a Javascript que imprima en la página el resultado por medio de document.write().

Puedes ver el ejercicio funcional aquí.

También puedes bajar el código terminado aquí.

Ahora te toca practicar con un ejercicio que involucre números. Abre un nuevo documento de HTML, esta vez llámalo numbers.html y abre también un nuevo documento de Javascript que llamarás calculo.js. En el HTML escribe el código que se muestra enseguida. Recuerda que solo se está colocando el contenido y que debes escribir todo lo necesario para que el HTML sea funcional:

 <div id="p">
  <h1>Semilla de Girasol </h1>
  <div id="content">
	 <h2>Marca del Granjero Felix </h2>
	 <img src="http://cache2.asset-cache.net/xc/478049409.jpg?v=2&c=IWSAsset&k=2&d=IaJzhELGBibLjYA3L0SQFinKsllgasT1x34uOHB_NAuwiSvUpLfOneEqeRfLADbb0" alt="semilla_girasol" />
	 <p id="girasol" class="cost"> </ div>
   </div>
 </div>
 <script src="js/calculo.js"> </script>

Ahora viene el javascript:

var price = 5;
var myPrice = document.getElementById("girasol");
myPrice.textContent = "Precio por Kilo $" + price;

Puedes ver el ejercicio funcional junto al CSS aquí.

También puedes bajar el código terminado aquí.

En este Javascript se creó la variable price con un valor de 5, así como una variable llamada myPrice la cual selecciona un elemento con id=”girasol” del documento por medio de document.getElementById(). Por otro lado, getElementById devuelve el elemento que tiene el atributo ID con el valor especificado (girasol).

Una vez seleccionada, en caso de que ésta exista, con la ayuda del comando textContentle asignamos un string (Precio por Kilo $) y el valor de price (5). Aquí textContent asigna el valor textual indicado al nodo seleccionado.

¿Pero, qué pasa cuando quieres realizar operaciones matemáticas simples?

Actualiza el código que ya tienes, ahora duplica el folder de tu proyecto anterior o crea uno nuevo y escribe las nuevas líneas:

<div id="p">
 <h1>Semilla de Girasol</h1>
 <div id="content">
	<h2>Marca del Granjero Félix</h2>
	<img src="https://nuts.com/images/auto/801x534/assets/3cda770e3dcc653e.jpg" alt="semilla_girasol" />
	<p id="girasol" class="cost">...</p>
	<div class="myButton" onclick="calculateMe()"></div>
	<p id="myTotal">...</p>
 </div>
</div>

El Javascript:

var price;
var quantity;
var total;
price = 25;
var myPrice = document.getElementById("girasol");
myPrice.textContent = "Precio por Kilo $" + price;

function calculateMe() {
 var total = price * 4;
 var foo = document.getElementById("myTotal");
 foo.textContent = total;
}

Lo único que se hizo fue crear un enlace en el HTML que activa una función de Javascript, en la cual se realiza una operación matemática. Para hacerlo, se colocó el evento onclick en el botón, el cual ejecuta la función indicada al momento de hacer clic en un objeto. Declarar una función en Javascript es similar a lo que se hace en PHP, usamos el keyword function y bautizamos la función con un nombre que cumpla las reglas de programación.

Puedes ver el ejemplo funcional con CSS aquí.

También puedes bajar el código terminado aquí.

Al igual que en HTML y PHP, los comentarios sirven para desactivar código o para indicarle a nuestro equipo de trabajo, y muchas veces a nosotros mismos, qué es lo que hace el código indicado.

//este es un comentario de una sola línea
/*
* Este es un
* comentario en
* varias líneas!
*/

Para finalizar el tema, se presenta enseguida un ejemplo de cómo puedes utilizar Javascript con booleanos. Seguramente los recuerdas, estos elementos devuelven verdadero o falso.

Escribe la base de HTML:

<h1>Sistema de envio</h1>
<div id="content">

 <div class="message">
	El servicio está: <span id="servicio"></span>
 </div>
</div>

Además el javascript:

var myService = false;
if (myService) {
 var siSer = document.getElementById('servicio');
 siSer.className = 'st';
} else {
 var noSer = document.getElementById('servicio');
 noSer.className = 'sh';
}

Ahora agrega un poco de CSS para que el efecto sea completamente visual:

div {
 margin: 1em;
 font-family: Helvetica, Arial, sans;
}
h1 {
 font-family: Helvetica, Arial, sans;
 font-weight: bold;
 margin: 1em;
}
.st {
 padding: 0.2em 0.5em;
 background-color: green;
}
.st:before {
 content: "disponible";
 color: white;
}
.sh {
 padding: 0.2em 0.5em;
 background-color: red;
}
.sh:before {
 content: "no disponible";
 color: white;
}

Puedes ver el ejemplo funcional aquí , intenta cambiando los valores de myService por false o true en el javascript para que veas el cambio.

También puedes bajar el código terminado aquí.