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= “text/javascript”, antiguamente se utilizaba language = “JavaScript”, 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 “var” seguida del nombre de la variable.
    • Para inicializar la variable lo haríamos así var Mivariable = “Esta 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 “entero”, mientras que en la segunda línea vemos como almacenamos en ella un tipo de dato “cadena 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 + “Ejemplo”, 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 “Aceptar” 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 (“aceptar” o “cancelar”), podremos almacenar dicho valor en una variable “resultado” 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 (“anónimo” en este caso).
  3. El usuario pulsa cancelar, entonces la variable resultado almacenará el valor lógico (“Null”).

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>
Php y JavaScript #01. Introducción a las páginas web
Php y JavaScript #03. Conceptos Básicos de Programación