Php y JavaScript #02. Introducci贸n a JavaScript

La etiqueta SCRIPT

Como ya sabemos, la estructura de un HTML es del tipo:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

</body>
</html>

Pues bien, nosotros podremos introducir el c贸digo de JavaScript o en la cabecera (HEAD) o en el cuerpo (BODY) depende de la funci贸n que le vayamos a dar.

Este c贸digo de JavaScript se encierra siempre entre <SCRIPT> y </SCRIPT> y tiene la estructura:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
		//C贸digo
		
	</script>

</body>
</html>

Donde podremos observar varias cosas:

  • El c贸digo se puede escribir en varios lenguajes, por tanto, hay que indicar al SCRIPT en qu茅 tipo de lenguaje lo vamos a escribir, esto se hace mediante

type= 鈥渢ext/javascript鈥, antiguamente se utilizaba language = 鈥淛avaScript鈥, pero hoy en d铆a, ha quedado en desuso.

  • Por otra parte, debemos ocultar el c贸digo a los navegadores que no sepan interpretarlo (en la actualidad, todos los navegadores interpretan JavaScript), y para ello se utilizan los comentarios (comentario de inicio 鈥<!–鈥 y comentario de cierre 鈥// –>鈥 ).
  • Para indicar un comentario de una sola l铆nea, JavaScript utiliza 鈥// 鈥.

Veamos qu茅 pasar铆a si el navegador no reconociera el c贸digo JavaScript:

  1. Como no reconoce la etiqueta <SCRIPT> simplemente la ignora.
  2. Encuentra el s铆mbolo de inicio de comentario HTML (鈥<!–鈥) as铆 que no interpreta el resto, hasta encontrar el s铆mbolo 鈥// –>鈥.
  3. Como no se reconoce la etiqueta </SCRIPT>, pasa a la l铆nea siguiente.

Ahora veamos qu茅 pasar铆a con un navegador que s铆 lo reconociera:

  1. Reconoce la etiqueta <SCRIPT>, as铆 que empieza a interpretar el c贸digo siguiente excepto los comentarios de HTML (<!–).
  2. Interpreta el c贸digo siguiente hasta que llega a la l铆nea que muestra un comentario de JavaScript (//), ignorando dicha l铆nea.
  3. Reconoce la etiqueta </SCRIPT>, de forma que sabe que lo siguiente ya no es JavaScript.

Una cosa a tener en cuenta es que JavaScript a diferencia de HTML, distingue entre min煤sculas y may煤sculas. Tenga cuidado con ello.

Contenido alternativo

Aunque en la actualidad, todos los navegadores est谩n preparados para ejecutar JavaScript, podr铆amos crear c贸digo alternativo para aquellos navegadores que no lo estuviesen.

驴C贸mo?, muy f谩cil:

  1. Incluya la etiqueta <NOSCRIPT> tras la etiqueta </SCRIPT> de fin de gui贸n.
  2. Incluya el c贸digo HTML que desee para esta secci贸n de la p谩gina.
  3. Finalice con </NOSCRIPT>.

Ejecutar Javascript

Cuando un navegador interpreta la tiqueta <SCRIPT> simplemente se salta la etiqueta <NOSCRIPT>.

Variables

Ahora vamos a repasar algunos conceptos relacionados con la programaci贸n que nos ser谩n 煤tiles a la hora de programar en JavaScript.

Un concepto muy importante, es el concepto de variable.

Una variable es una ubicaci贸n temporal de memoria donde el programador guarda cierto valor que le interesa retener durante la ejecuci贸n del script o gui贸n.

Observemos durante un minuto el siguiente c贸digo:

 <html>

<head>

<title></title> 

	<script type="text/javascript">

		function mostrarMensaje1() { 

			var a=1, b=2, c=3;

			var casado = true;

			var mayorDe25 = false;

			var texto1 = 'En un lugar de la Mancha...';

			//mayorDe25 = variableInexistente; //Genera un error y el c贸digo no se ejecuta

			alert ('La variable casado vale: ' + casado);

			alert ('La variable mayorDe25 vale: ' + mayorDe25);

			alert ('La variable casado vale (forzamos mostrar equivalente num茅rico): ' + casado*1);

			alert ('La variable mayorDe25 vale (forzamos mostrar equivalente num茅rico): ' + mayorDe25*1);

			alert ('La variable casado vale ahora: ' + casado);

			alert ('La suma de a, b y c vale: ' + (a+b+c));

			alert ('Operaci贸n sin sentido, obtenemos: ' + (texto1*1));

			alert ('Mostramos equivalente de texto de la variable casado: ' + casado.toString());

		}

	</script>

</head>

<body>


</body>
</html>

Seguramente habremos visto ya, algunas curiosidades a la hora de escribir c贸digo en JavaScript, pero quiz谩s las m谩s destacadas en este ejemplo sean:

  • Para poder utilizar las variables, estas deben estar declaradas (es decir, tendremos que darles un nombre y opcionalmente podremos inicializarlas o no):
    • Para declarar la variable se utilizar la palabra reservada 鈥渧ar鈥 seguida del nombre de la variable.
    • Para inicializar la variable lo har铆amos as铆 var Mivariable = 鈥淓sta es mi variable鈥.
  • Al inicializar una variable a un campo de texto es necesario poner las comillas dobles (鈥溾) o las comillas simples (鈥樷). Da igual cuales utilicemos pero si empezamos con unas, debemos terminar con ellas.

Tipos de datos

Ahora veremos el conjunto de valores que puede tener una variable y el conjunto de operaciones en las que puede formar parte.

A esto se le llama Tipo de Dato.

Observemos este fragmento de c贸digo:

var Variable2 = 255

Variable2 = 芦Ahora soy de texto禄

Como podemos observar al principio Variable2 tiene un tipo de dato 鈥渆ntero鈥, mientras que en la segunda l铆nea vemos como almacenamos en ella un tipo de dato 鈥渃adena de texto鈥. Esto quiere decir que en una misma variable podremos almacenar diferentes tipos de datos, pero tenemos que tener cuidado ya que JavaScript suele hacer conversiones autom谩ticas, y en algunas ocasiones, nos puede ocasionar problemas.

Pero鈥 y 驴Qu茅 tipos de datos puede almacenar una variable?

En JavaScript podr谩 almacenar:

  • N煤meros: Sin distinci贸n entre 240 y 240.5, es decir, entre entero y real.
  • String: Series de caracteres encerrados entre (鈥) o (鈥).
  • Boolean: un valor l贸gico (true o false).
  • Null: Sin valor.

Operadores

En JavaScript puede utilizar un gran n煤mero de operadores divididos seg煤n su car谩cter:

Operadores matem谩ticos

  • Suma (+)
  • Diferencia (-)
  • Multiplicaci贸n (*)
  • Divisi贸n ( / )
  • M贸dulo (%)
  • Incremento (++)
  • Decremento (–)
  • Negaci贸n (-)

Operadores de comparaci贸n

  • Igual que (==)
  • Distinto a (!=)
  • Menor que (<)
  • Mayor que (>)
  • Mayor o Igual que (>=)
  • Menor o Igual que (<=)

Operadores de asignaci贸n:

  • Asignaci贸n ( =)
  • Se asigna a la suma o concatenaci贸n (+=)
  • Se asigna a la resta (-=)
  • Se asigna a la multiplicaci贸n (*=)
  • Se asigna a la divisi贸n (/=)
  • Se asigna al modulo (%=)

Operadores con cadenas:

  • Concatenaci贸n (+)
  • Etc.

Vamos a resaltar un caso especial que suele llevar a errores como es el del operador + ya que en algunas ocasiones servir谩 para sumar y en otras para concatenar.

  • Si tenemos 2 n煤meros y usamos +, l贸gicamente los sumar谩.
  • Si tenemos 2 cadenas y usamos +, l贸gicamente no los sumar谩 sino que los concatenar谩.
  • Si tenemos un n煤mero y una cadena, JavaScript convertir谩 autom谩ticamente el n煤mero a cadena y los concatenar谩. EJ. 250 + 鈥淓jemplo鈥, dar谩 como resultado 鈥250Ejemplo鈥, siendo esta una cadena de texto. Hay que tener especial cuidado con este caso.

Ahora veremos que tambi茅n hay que tener cuidado con el orden de preferencia de los operadores.

Imaginemos esta operaci贸n, 3 + 5 * 2.

驴Qu茅 valor obtendremos? 驴16 o 13?, pues bien, viendo la siguiente tabla, veremos que el operador * se ejecuta antes que el operador +, por lo que el resultado ser谩 13.

Consejo: Utilizar par茅ntesis para no dar lugar a equivocaci贸n.

Utilizando los cuadros de di谩logo que incorpora el lenguaje JavaScript, podremos interaccionar con el usuario, de tal forma que 茅ste proporcione informaci贸n para continuar la ejecuci贸n del script, o en algunas ocasiones simplemente para informar de alguna circunstancia o advertencia.

En JavaScript existen 3 cuadros de di谩logo predefinidos:

1. alert (mensaje): sirve para enviar un mensaje de informaci贸n al usuario.

Es el m谩s sencillo de todos y solo incluye un bot贸n 鈥淎ceptar鈥 con el que interaccionar谩 el usuario.

Veamos este fragmento de c贸digo:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
		alert ("Esto es un mensaje")

	</script>

</body>
</html>

Esto producir谩 en el navegador la salida siguiente:

2. confirm(mensaje): sirve para que el usuario confirme la realizaci贸n de alguna tarea. A diferencia del cuadro anterior, ahora aparecen dos botones (Aceptar y Cancelar). Usted puede saber qu茅 bot贸n se ha pulsado y actuar en consecuencia.

Veamos este fragmento de c贸digo:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
		resultado= confirm("驴Desea realmente cerrar el mensaje?")
		documente.write(resultado);

	</script>

</body>
</html>

Y veremos la siguiente salida en el navegador:

Observar en la l铆nea 6, dependiendo del valor que el usuario elija (鈥渁ceptar鈥 o 鈥渃ancelar鈥), podremos almacenar dicho valor en una variable 鈥渞esultado鈥 para m谩s tarde, utilizarla o por ejemplo imprimirla.

3. prompt (mensaje [, valor por defecto]): sirve para recabar informaci贸n del usuario. Es el cuadro de di谩logo m谩s complejo.

El valor por defecto lo utilizaremos si el usuario no escribe nada y pulsa en aceptar.

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
		resultado= prompt("Introduzca su nombre:","Nombre")
		documente.write(resultado);

	</script>

</body>
</html>

Al ejecutarlo, observar谩 un cuadro de di谩logo como este:

Entonces, habr谩 tres tipos de situaciones:

  1. El usuario introduce su nombre, por lo que en la variable resultado, se almacenar谩 como un campo de texto.
  2. El usuario no introduce nada y pulsa aceptar, entonces la variable resultado tendr谩 el valor por defecto (鈥渁n贸nimo鈥 en este caso).
  3. El usuario pulsa cancelar, entonces la variable resultado almacenar谩 el valor l贸gico (鈥淣ull鈥).

Pr谩ctica

En esta pr谩ctica preparar谩 el entorno en el que va a programar en JavaScript.

Utilice Notepad++ y aseg煤rese de que tiene instalado cualquiera de los navegadores mencionados anteriormente.

Abra Notepad++ y escriba el siguiente c贸digo:

<!DOCTYPE html>
<html>
<head>
	<title>Pr谩ctica</title>
</head>
<body>
	<script type="text/javascript">
		var operando1= 2;
		var operando2;
		var suma = operando1 + operando2;
		alert (suma);
	</script>

</body>
</html>

Guarde el fichero como practica2.html y ejec煤telo en su navegador.

  1. 驴Cu谩l ha sido el error cometido?
  2. Cree un nuevo documento HTML en el que incluir谩 c贸digo JavaScript para realizar las siguientes tareas:
    1. El usuario debe introducir su nombre y apellidos, en este orden
    2. Una vez hecho esto, usted debe mostrar un cuadro de di谩logo en el que se muestre el siguiente mensaje:

驴Es usted Apellidos, Nombre?

Donde tanto Apellidos como Nombre ser谩n los datos introducidos previamente por el usuario. Observe c贸mo aparece una coma entre los apellidos y el nombre.

  1. Debe permitir que el usuario pueda aceptar o cancelar el cuadro de mensaje.

Guarde este nuevo fichero con el nombre Practica2final.html y compruebe el resultado en su navegador.

Soluci贸n

<!DOCTYPE html>
<html>
<head>
	<title>Pr谩ctica</title>
</head>
<body>
	<script type="text/javascript">
		var Apellido = prompt("Introduzca su aperllido:", "Apellido");
		var Nombre = prompt("Introduzca su nombre", "Nombre");
		confirm("Eres: "+ Apellido +" , "+ Nombre +".");
	</script>

</body>
</html>