Java Script Básico

Que es Java Script

Javascript es un lenguaje interpretado basado en prototipos que no requiere de compilación ya que el lenguaje funciona del lado del cliente, los encargados de interpretar el código serán los navegadores.

La ventaja de Javascript, es que puede ser insertado en cualquier página web y para visualizarlo no necesita la instalaciín de otros programas. Podemos crear diferentes efectos e interactuar con los usuarios.

Cuando programamos en javascript, generalmente nos centramos en describir objetos, escribir funciones que respondan a deiferentes eventos como: movimientos del mouse, aperturas de páginas, intervención de teclas, cargas de páginas, relojes, contadores, calendarios, etc.

Resumiendo, se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas, en bases de datos locales a navegadores.

Diciembre de 1995, JavaScript fue desarrollado originalmente por Brendan Eich de Netscape con el nombre de Mocha, el cuál fue renombrado posteriormente a LiveScript, para finalmente quedar como JavaScript.

Subir

Sintaxis de Java Script

Cuando un navegador no soporta JavaScript se mostrará el contenido de la etiqueta <script> como parte del documento HTML.
Para evitar que esto ocurra utilizaremos el standard JavaScript (etiqueta de comentario HTML ('< !-- código javascript //-->') para ocultar al usuario nuestro código JavaScript.

Etiqueta para ocultar código JavaScript < !-- //-->

Colocamos < !-- antes de la primera instrucción de JavaScript y cerramos el comentario de esta manera //--> ya que las barras inclinadas // nos servirán para que la operación no se lleve a cabo.

// Ocultar código < !-- //-->
    
<script type=text/javascript>

  <!--
    .....................
    código JavaScript 
    .....................
  //-->
  
</script>

Etiqueta <noscript>

Esta etiqueta <noscript> proporciona un contenido alternativo para usuarios con navegadores que no soportan el este lenguaje o que tienen deshabilitada la ejecución de scripts.

Esta etiqueta <noscript> puede contener en su interior cualquiera de los elementos que podrían encontrarse entre la etiqueta <body> de un documento JavaScript. El contenido entre las etiquetas <noscript> y </noscript> se mostrará en el caso de que los scripts no sean soportados por el navegador o por tener deshabilitada la ejecución de scripts en su navegador.

// Mostrar mensaje cuando JavaScript este desactivado en nuestro navegador

Etiqueta </noscript>

<body>
....................... 

<noscript>

Su navegador no soporta 
  JavaScript, o bien, no lo 
  activó en su navegador.
  
</noscript>

.......................
</body>

// Prueba a desactivar Java en tu navegador: 

Camino orientativo para los diferentes navegadores:

Firefox – Complementos - Plugins - desactivar el complemento Java(TM) Platform.

Chrome - Herramientas - Extensiones - Configuración - Escribir JavaScript 
	en el buscador - Configuración del contenido - desmarcar la  
	casilla Permitir que todos los sitios ejecuten JavaScript.

Internet Explorer - clicar el icono de engranaje (parte superior derecha) - 
		    administrar complementos - en la nueva ventana, a la izquierda, 
		    en Tipos de complementos - Mostrar - clicar en Todos los 
		    complementos - marcar todos los complementos que tengan 
		    el nombre Java(tm) - botón de desactivar.

Opera - Pulsar el icono de Opera (parte superior derecha) - seleccionar Configuración
      o pulsar teclas de acceso rápido (Ctrl + F12), para Configuración - clicar en 
      Sitios web - desmarcar casilla Permitir que los sitios ejecuten JavaScript.

Safari - Pulsar icono de engranage - Preferencias - Seguridad - 
	Desmarcar casilla de Permitir JavaScript.
Subir

Variables y Constantes

Variables

Una variable es un espacio en la memoria donde almacenamos temporalmente un dato que utilizaremos cuando sea necesario.
var = nombre;.

Insertar una variable en la página

// Insertar una variable mediante "onclick" 

// ----------------- JavaScript ------------------ 


<script type="text/javascript">

function insertarVariable() {
	
// Declaración explícita 
  var var_1; // Cuando declaramos una variable 

// Declaración implícita 
  var_1 = 'Hola, soy '; // Cuando la variable ya ha sido declarada
			   // y va acompañada de un valor 
	
// Variable declarada explícitamente 
  var nombre = 'Quim';

// Variable explícita con inicialización 
  var usuario = (var_1 + ' ' + nombre + '.');
  
  // Creo el nodo 'p'. 
  var parrafo = document.createElement('p');
  
  // Añado el contenido del nodo 'texto'. 
  parrafo.appendChild(document.createTextNode('Párrafo añadido: ' + usuario));
  
  /* [1] = colocará el nodo después del primer párrafo */ 
  var pongoAqui = document.getElementById('añadirP').getElementsByTagName('p')[1];
  
  var accion = document.getElementById('añadirP').insertBefore(parrafo, pongoAqui);
  // parrafo => Inserta el nodo 'p' y el contenido de 'variable párrafo',
    // pongoAqui => dentro del nodo con ID 'añadirP' y después del primer párrafo, [1]. 

}

</script>

// ----------------- HTML ------------------ 
	
<form>

  <input value='Insertar Variable' onclick='insertarVariable();' type='button'>
  </input>

</form>


<!-- ESPACIO RESERVADO PARA LA VARIABLE AÑADIDA --> 
<p id='añadirP '>    </p><!--añadirP-->

Prueba, insertar variable en página:


Ámbito de una variable:

El ámbito de una variable (llamado "scope" en inglés) es la zona del programa en la que se define la variable. JavaScript define dos ámbitos para las variables: global y local.

Ámbito Local:

// LOCAL

// Ámbito Local o Pribada: Solamente está definida dentro de la función.

<script type="text/javascript">

function creaMensaje() {
	
   var mensaje = "Mensaje de prueba"; // Definición de la variable
	
   alert(mensaje );
		
}

	// Llamada a la función
	creaMensaje();

</script> 


// ----------------- HTML ------------------ 


<form>

  <input value='Variable Local' onclick='creaMensaje();' type='button'>
  </input>

</form>

Si la variable está definida dentro de la función, y fuera de esta, queremos sacar un mensaje de alerta, no se ejecuta nada, ya que ha de estar dentro de la función. 

// LOCAL

// ----------------- JavaScript ------------------ 


<script type="text/javascript">

function creaMensajeFuera() {
	
  var mensaje = 'Mensaje de prueba'; // Definición de la variable

}

  // Llamada a la función
  creaMensajeFuera(); 
  
  // Insertamos el resultado dentro del párrafo con ID demoLocal 
  document.getElementById('demoLocal').innerHTML = mensaje;   
  /* Llama a mensaje que está dentro de la función 'LOCAL' 
						  por lo tanto no aparece nada en pantalla */
							   
</script>


// ----------------- HTML ------------------ 


<form>

  <input value='Variable Local' onclick='creaMensajeFuera();' type='button'>
  </input>
  
</form>

Prueba, variable local:

Ámbito Global:

Las variables globales están disponibles en cualquier punto del programa (incluso dentro de cualquier función).

// GLOBAL 

// ----------------- JavaScript ------------------ 

	
<script type="text/javascript">

var mensaje = 'Mensaje de prueba'; // Definición de la variable

function muestraMensaje() { 

  // Insertamos el resultado dentro del párrafo con ID demoGlobal, definida fuera de la función 
  document.getElementById('demoGlobal').innerHTML = mensaje;
  
}

</script>


// ----------------- HTML ------------------ 


<form>

  <input value='Variable Global' onclick='muestraMensaje();' type='button'>
  </input>

</form>

Prueba, variable global:


Sacar variables, ejemplo:

// Sacar variables 

// ----------------- JavaScript ------------------ 


<script type="text/javascript">

function variables(){

  var miEdad;
  edad = '+ 30 años';
  var nombre = 'Quim de ';
  var usuario = (nombre + edad);	
  var parrafo = ('Aquí estoy¡');
  
  // Insertamos el resultado dentro del párrafo con ID demoSacaVar 
  document.getElementById('demoScaVar').innerHTML = 'Hola soy' + usuario + 
							  '<br />' + parrafo;
							  	
}
							  
</script>


// ----------------- HTML ------------------ 


<form>

  <input value='Variables' onclick='variables();' type='button'>
  </input>

</form>

Prueba, sacar variables:


Sacar el área de un círculo, ejemplo:

// Sacar el área de un círculo

// ----------------- JavaScript ------------------ 	


<script type="text/javascript">

function areaCirculo(radio){

	var pi = Math.PI;
	
	// Rádio dado por defecto en el parámetro de la función ==> 6 
	radio = radio * radio;	
	
	// Insertamos el resultado dentro del párrafo con ID demoAreaCir 
	document.getElementById('demoAreaCir').innerHTML = ' pi * radio;
	// Resultado 113.09733552923255 ;
	
}

</script>


// ----------------- HTML ------------------ 


<form>

  <input value='Área de un círculo' onclick='areaCirculo(6);' type='button'>
  </input>

</form>

Prueba, Sacar el área de un círculo:


Averiguar la raiz cuadrada, ejemplo:

// Raiz cuadrada 

// ----------------- HTML ------------------ 


<form name='formaraiz'>

  <input name='numero' type='text'>
  </input>
  <input value='Calcular raiz cuadrada' onclick='raizcuadrada()' type='button'>
  </input>
  
</form>	
	  
<form name='formaraiz1'>

  <label for='numero1'>La raiz cuadrada es :</label>
  <input title='Resultado' name='numero1' type='text'>
  </input>
  
</form>
	

// ----------------- JavaScript ------------------ 


<script type="text/javascript">

// Función 
function raizcuadrada(){
	
 // Indico que aplique en el formulario con nombre, (name) formaraiz1, dentro del campo 
  // con nombre, (name) numero1, la función Math.sqrt que se encarga de calcular 
  // la raiz cuadrada del valor insertado en el formulario con nombre, (name) formaraiz 
  // en su campo con nombre, (name) numero. 
  document.formaraiz1.numero1.value = 
  Math.sqrt(document.formaraiz.numero.value); 
  
}

</script>

Prueba, raiz cuadrada:



Constantes y prioridad de las variables

Una constante es un dato cuyo valor NO puede ser modificado después de haver sido inicializado.
const = nombre;.

Las constantes también se pueden escribir en mayúsculas y separar las palabras mediante un guión bajo.
var VALOR_CONSTANTE = 256;.

Sacar Constantes

// Sacar Constantes 

// ----------------- JavaScript ------------------ 	
	
	
<script type="text/javascript">

function constante(radio){

// Rádio dado por defecto en el parámetro de la función ==> 10 
const pi = Math.PI;
   radio = radio * radio;
  	
	// Insertamos el resultado dentro del párrafo con ID demoCons 
	document.getElementById('demoCons').innerHTML = ' pi * radio;
	// Resultado 314.1592653589793 ;
	
}

</script>


// ----------------- HTML ------------------ 


// Sacar área de un círculo 
  <form>
  
	<input value='Constante' onclick='constante(10);' type='button'>
	</input>
	
  </form>

Prueba, Sacar Constantes:


Prioridad de las variables

Cuando tenemos dos variables declaradas con el mismo nombre, una local (dentro de la función) y la otra global (fuera de cualquier función), tendrá preferencia la local si se va ha usar dentro de esa misma función

// Prioridad de las variables

// ----------------- JavaScript ------------------ 


<script type="text/javascript">

// Declaración de variable GLOBAL 
  var num = 3;

function numero(){
	
  // Declaramos variable LOCAL 
  var num = 7;
    return num;

}

  // Utilizamos las variables con el mismo nombre 
  alert(num + '\n' + numero() + '\n' + num);
  // La variable global tiene preferencia 
  
</script>


// ----------------- HTML ------------------ 


  // Prioridad de las variables 
  <form>
  
	<input value='Prioridad variables' onclick='numero();' type='button'>
	</input>
	
  </form>

Prueba, prioridad de las variables:


No pasaría lo mismo si no declarásemos la variable local dentro de la función con la palabra reservada VAR, si es así, sí modificará la variable local.

// Declaración de variable GLOBAL 

// ----------------- JavaScript ------------------ 


var num2 = 3;

function sinVariable(){
	
    // Función sin variable LOCAL
	// Utilizamos la variable GLOBAL 'num2' 
    num2 = 7; // Cambiamos el valor
    return num2;

}

  // 'num' a adobtado el valor que se le a dado dentro de la función 
  alert(num2 + '\n' + sinVariable() + '\n' + num2);
	

// ----------------- HTML ------------------ 


  // Declaración de variable GLOBAL 
  <form>
  
    <input value='Función sin variables' onclick='sinVariable();' type='button'>
    </input>
    // Al volver a pulsar el botón veremos que la variable LOCAL a 
	     cojido el valor, "7" que se le ha dado dentro de la función. 
	
  </form>

Prueba, Declaración de variable GLOBAL:


Al volver a pulsar el botón veremos que la variable LOCAL a cojido el valor, "7" que se le ha dado dentro de la función.

Subir

Operadores

Los operadores nos permiten realizar cálculos y acciones sobre las variables o datos de nuestro código retornando diferentes tipos de valor como resultado de una operación.

Tipos de operadores

Subir

Prueba, operadores de cálculo:



Subir

Prueba, incremento:



Subir

Prueba, Variables como operando:



Subir

Prueba, operador sobre cadenas (+):



Subir

Prueba, Operadores condicionales o de comparación:



Subir

Prueba, Operador Mayor/Menor:



SubirSubir

Prueba, Operador NOT ~:



Subir

Prueba, Operador AND &:



Subir

Prueba, Operador OR |:



Subir

Prueba, Operador XOR ^:



Subir
// Operador de desplazamiento a Izquierda 

// ----------------- JavaScript ------------------ 


function desplazaIzquierda(){
	    
var num = 11;

// Desplazamiento izquierda 
  alert(num << 2);

num = -11;  // Asignamos valor 

// Desplazamiento izquierda 
  alert(num << 2);		

}

// ----------------- HTML ------------------ 


<form>

  <input value='Desplazamiento' onclick='desplazaIzquierda();' type='button'>
  </input>

</form>

Prueba, Operador de desplazamiento a Izquierda:



SubirSubirSubir

Prueba, Operador condicional (?):



Subir

Prueba, Operador coma (,):



Subir

Prueba, Operador void (vacio):



Subir

Prueba, Operador typeof (de tipo):



Subir

Preferencia de operadores

Operador Descripción
.   [ ]   ( ) Acceso a campos, índice de matrices y llamada a funciones.
++   --   -   ~   !   Incremento +1, decremento -1, negativo, NOT, NOT lógico
delete   new   typeof   void Borrado, crear objeto, mostrar tipo, indefinido
*   /   % Multiplicación, división, módulo de división (resto)
+   -   + Suma, resta, concatenación de cadenas
<<     >>    >>> Bit shifting (desplazamiento)
<   <=     >   >= menor que, menor que o igual, mayor que, mayor que o igual
==   !=   ===   !==  Igualdad, desigualdad, identidad, no identidad
& AND
^ XOR
| OR
&& AND lógico
|| OR lógico>
?: Condicional
= Asignación
, Evaluación múltiple
( ) [ ] . Paréntesis, corchetes y el operador punto que sirve para los objetos
! - ++ -- negación, negativo e incrementos
* / % Multiplicación división y módulo
+- Suma y resta
<< >> >>> Cambios a nivel de bit
< <= > >= Operadores condicionales
== != Operadores condicionales de igualdad y desigualdad
& ^ | Lógicos a nivel de bit
&& || Lógicos boleanos
= += -= *= /= %= <<= >>= >>>= &= ^= != Asignación

Subir

Operadores sobre Objetos

Operadores que actuan sobre objetos:

Prueba, Operador delete:




Subir

Prueba, Operador instanceof:



Subir

Prueba, Operador new (nuevo):



Subir





Subir

Prueba, Operador in (en o dentro):



Subir

Prueba, Operador punto (.):
frase: La pelota, bota y rebota por la patada de su bota.



SubirSubir

Valores de tipo Cadena

Valor Cadena: Cadena de carácteres o string que consta de cualquier carácter: letras, números y símbolos escritos todos ellos entre comillas ("....") o ('....').

// Declaración de datos de tipo cadena o string 
   
   var idioma = "español";
   var dni ="12345678P";
   var direccion = 'C/ Bruc 32';
   var FICHERO = 'objeto.js';
   
// Las cadenas siempre van encerradas entre comillas simples ' ' o comillas dobles " "

Caracteres especiales: Puede ser un tabulador, un salto de línea, etc... estos carácteres especiales no los reconoce JavaScript.
Para que JS. los pueda reconocer habrá que escaparlos, es tan sencillo como ponerle una barra inversa (\) o backslash delante del carácter especial.

/* Lista de caracteres */ 
   
   "		comilla doble
   \'		comillasimple
   \		barra inversa
   \n	nueva línea
   \t		tabulador
   \r		retorno carro
   \b	retroceso
   \f		avance página
   \v		tabulador vertical 
   
// Caracteres especiales 

// ----------------- HTML ------------------ 


<form>

  <input value='Caracteres especiales Global' onclick='specials();' type='button'></input'>

</form>


// ----------------- JavaScript ------------------ 	


function specials() {
     
	// \u00A9 => carácter UNICODE (C, encerrada en un círculo) en www.unicode.org 
	// \n\n => dos saltos de línea y \t => una tabulación 
	var cadena = 'El ar\u00A9hivo.css  está \nen esta ruta: 
				  \n\n\t C:\\Documentos\\archivo.css';
	
	// Insertamos el resultado dentro del párrafo con ID demoCarEspe 
	document.getElementById('demoCarEspe').inneHTML = cadena;
	
	alert(cadena);
	
}

Prueba, caracteres especiales:


Valores de tipo Numérico

Valor numérico: JavaScript se diferencia de otros lenguajes de programación ya que solo tiene un tipo de valor numérico, ya sea un número real, reales en notación científica, mediante el indicador de exponente E o e, o entero, será considerado del mismo tipo.

Los números también pueden ser representados en otros sistemas distintos al decimal (base 10)

Sistema hexadecimal (base 16), que consta de 16 dígitos:
Los comprendidos entre el 0 y el 9.
Los comprendidos entre la A y la F.
Se escribe con un cero y una equis (0x) delante del número. 

/* Declaración de datos de tipo numérico */ 
    
    var altura = 5;
    var precio = 12.65;
    var temperatura = -3.0;
    var PI = 3.141592;
    var seiscientos = 6E2;
    var sieteMilimetros = 7e-3;
    var MILLON_Y_MEDIO = 1.5e6;
    
/* Sistema hexadecimal (base 16) */  
   
    0x7F

Valores de tipo Lógico

Valor Lógico (booleano): Este tipo tan solo abarca dos valores posibles: verdadero true y falso false, que nos servirán para tomar decisiones a la hora de realizar una serie de acciónes o no en el código.

// Tipo booleano

// ----------------- JavaScript ------------------


// 'prompt' muestra un cuadro de diálogo que solicita al usuario  
// que introduzca un valor antes de entrar en una página. 
var num = prompt ('Numero del 1 al 10');

	if (num == 8){
	
		alert ('Acertastes'); // Sería true 
	
	}
	if (num < 8) {
		
		// Vuelve a llamar a la función 
		alert ('Es mayor'); // Sería false 
	
	}
	if (num > 8) {
		
		// Vuelve a llamar a la función 
		alert ('Es menor'); // Sería false 
	
	}
	

// ----------------- HTML ------------------ 


	<form>
	  <input value='Valor Booleano' onclick='tipoBoolean();' type='button'></input>
	</form>

Prueba, Tipo booleano:



Expresiones regulares

Una expresión regular o patrón nos permitirá buscar coincidencias dentro de un texto.

Las expresiones regulares se identifican escribiendo una barra (/) al principio y al final de la cadena que la forman.
Hay dos opciones para definir una erxpresión regular y encontrar las palabras a buscar:

Paréntesis " ( ) " dentro de una expresión regular

Cualquier cadena que coincida con la encerrada entre paréntesis en nuestro patrón, causará que se recuerde para así, poder recuperar sus valores más adelante, por ejemplo reemplazos de texto o partes del un texto sin modificar el resto. 

/(pa)+/ => Coincidencias con la cadena patata y papagayo.
// Obtendremos coincidencias con una o varias repeticiones del texto pa, papa, .....  
	
/(\w+) (\w+)/ => Coincidencias con la cadena java script.   
// Busca uno o más caracteres alfanuméricos, seguido de un espacio  
// en blanco, seguido de otra vez uno o más caracteres alfanuméricos.

Modificadores o flags: Los flags, (banderas o indicadores) nos permite especificar modos de búsqueda de expresiones regulares

Nos ayudan a definir algunas características a tener en cuenta cuando buscamos coincidencias, podemos aplicar en un patrón tantos modificadores como sea necesario. 

/(pi)+gi/ => pi, Pi, PiPi, PIPIPI, PIpiPIpi. 
// Palabra 'pi' repetida una o más veces, no distingue 
// entre mayúsculas y minúsculas y todas sus ocurrencias.

Expresiones regulares con flags

Flag Explicación Ejemplo sintaxis
g Búsqueda global de todas las coincidencias (no se detiene al encontrar la primera coincidencia) /as?.a/g
new RegExp('as?.a', 'g')
i No diferenciar entre mayúsculas y minúsculas /as?.a/i
new RegExp('as?.a', 'i')
m Búsqueda multilínea. Para los indicadores de comienzo de cadena ^ y fin de cadena $, si se aplica esta bandera, se tienen en cuenta matches en todos los principios y finales de línea, no sólo al principio y final de cadena. /as?.a/m
new RegExp('as?.a', 'm')
Combinaciones Se pueden especificar varios flags var miExpReg = /^i/mi
Indica que hará match con cualquier comienzo de línea por una i minúscula ó I mayúscula (búsqueda multilínea y sin diferenciar mayúsculas y minúsculas).

Métodos de los objetos tipo expresión regular

Método Explicación Ejemplo de uso
exec Ejecuta una búsqueda del patrón y devuelve un array cuyo índice 0 contiene el valor encontrado y los índices sucesivos los submatches correspondientes a paréntesis existentes en la expresión. Si está activado el flag g, la repetición de la búsqueda devuelve la siguiente coincidencia. var miExpReg = /p.sto/g
var txt = 'el pasto es pisto pero no pesto'; var msg = '';
while ((matches = miExpReg.exec(txt)) !== null ) {
msg = msg + 'Encontrado: '+matches[0]+'\n'; }
alert(msg);
// Encontrado: pasto, pisto, pesto
var miExpReg = /p(.)sto/
var matches = miExpReg.exec(txt); daría lugar a que matches[0] contenga <<pasto>> y matches[1] contenga <<a>>
test Comprueba si se verifica el patrón y devuelve true o false var miExpReg = /p.sto/g
var txt = 'el pasto es pisto pero no pesto';
msg = '';
alert('Hay match: '+ miExpReg.test(txt));
// Hay match: true

Métodos de los objetos string relacionados con expresió regular

Método Explicación Ejemplo de uso
match Devuelve un array con las coincidencias encontradas, o null si no hay coincidencias. var miExpReg = /p.sto/g
var txt = 'el pasto es pisto pero no pesto';
msg = ''; var matches = txt.match(miExpReg);
if (matches != null) {
for (var i=0; i<matches.length; i++){
msg = msg + 'Encontrado: '+matches[i]+'\n'; }
}else {msg = 'No se encontraron coincidencias';}
alert(msg);
// Encontrado: pasto, Encontrado: pisto, Encontrado: pesto
search Devuelve la posición de comienzo de la primera coincidencia dentro del string, o -1 si no hay coincidencia. Recordar que la primera posición posible es cero. var miExpReg = /p.sto/g
var txt = 'el pasto es pisto pero no pesto';
msg = ''; var posicion = txt.search(miExpReg);
if (posicion != -1) {
msg = msg + 'Encontrado patrón en posición: '+posicion+'\n';
}else {msg = 'No se encontraron coincidencias';}
alert(msg);
// Encontrado patrón en posición: 3
replace Devuelve un nuevo String (sin modificar el original) donde se reemplaza una o varias coincidencias por lo especificado (una cadena o una función que devuelve la cadena). var miExpReg = /p.sto/g
var txt = 'el pasto es pisto pero no pesto';
msg = ''; var nuevoTxt = txt.replace(miExpReg, 'coco');
msg = 'txt vale ' + txt + ' y nuevoTxt vale ' +nuevoTxt;
alert(msg);
// txt vale el pasto es pisto pero no pesto y nuevoTxt vale el coco es coco pero no coco
split Devuelve un array con las subcadenas resultantes de dividir la cadena original en subcadenas delimitadas por el carácter separador especificado (que queda excluido). Si se indican unas comillas vacías se extraen todos los caracteres a un array. var miExpReg = /\d/g
var txt = 'un 3 de bastos gana a un 5 de copas pero no a un 7 de oros';
msg = ''; var splits = txt.split(miExpReg);
msg = 'splits contiene ' + splits;
alert(msg);
// splits contiene un , de bastos gana a un , de copas pero no a un , de oros

Algunas expresiones útiles:

/\d{9}/ numero de teléfono
/\d{8}{a-zA-Z}/ Número de DNI
/\d{2}-\d{2}-\d{}4]/ Fecha (dia-mes-año)
/([0][1-9]1[0-2]):[0-5]\d:[0-5]\d/ Hora (hora:minutos:segundos, formato de 12 horas)
/([01]\d|2[0-3]):[0-5]\d:[0-5]\d/ Hora (hora:minutos:segundos formato de 24 horas)
/\w+@\w+\.\w{2,3}/ Correo electrónico

escape()

Escapar carácteres: La función escape() codifica una cadena o caracteres especiales, a excepción de: * @ - _ +. /.

Esta función hace que una cadena portable, pueda ser transmitida a través de cualquier red a cualquier equipo que admite caracteres ASCII.

unescape():

Esta función descodifica una cadena codificada.


//Ejemplo de algunas expresiones Regulares 
    
function ValidaCampos(form){
	
// Expresion para teléfonos
// permite campos vacios y guiones 
var tlf = /(^[0-9\s\+\-])+$/;

// Expresion para emails 
var mail = /^(.+\@.+\..+)$/;

	// Comprueba telf
		// Metodo test 
	if(!tlf.test(formu.tlf.value)) {
		
		alert('TEEFONO no válido.')
		
	return false   // No submit 
	
	}

	// Comprueba email
		// Metodo test 
	if(!mail.test(formu.email.value)) {
		
		alert('EMAIL no válido.')
		
	return false  // No submit 
	
	}

return true;  // Pasa al submit 

}

Ejemplo, escapar caracteres:

Prueba a pasar caracteres especiales en el siguiete formulario, excepto estos: * @ - _ +. /











Subir

Conversión entre tipos

Conversión implícita o explícita

A veces es posible conbinar dos operadores de distinto tipo, por ejemplo; un operador tipo string con otro operador tipo number, este último puede ser interpretado como un string o el de tipo string puede ser interpretado como un tipo number, esto lo haremos posible gracias a la conversión interna entre tipos, pudiendo ser (implícita o explícita).

Prueba, conbertir distintos tipos:



  • Si intentamos transformar un operador de tipo booleano en un número, true lo interpretará como un 1 y false como un 0.
    /* COMVERSIÓN IMPLÍCITA DE TIPOS */ 

/* --------------------JavaScript------------------- */ 


function implicita(){
	
var cadena = "2"; /* string */ 
var numero = 8; /* number */ 

/* Muestra el tipo del operador */ 
	alert('Operador 'cadena' es de tipo\n\n\t' + (typeof(cadena)));
	alert('Operador 'numero' es de tipo\n\n\t' + (typeof(numero)));

/* Operación */ 
  alert('Implícita\n\n\t' + (cadena + numero)); // 28 
  alert('Implícita\n\n\t' + (numero + cadena)); // 82 
  alert('Implícita\n\n\t' + (numero + numero)); // 88 
  alert('Implícita\n\n\t' + (cadena + cadena)); // 22 

}

/* --------------------HTML------------------- */ 

<form>

  <input value='Conversión implícita' onclick='implicita();' type='button'>
  </input>
	
</form>

Prueba, Conversión Implícita de tipos:



Prueba, conversión Explícita:



Conversión de valores

parseFloat y parseInt: Pasa de valor 'cadena de texto' a 'numérico'.

.toString() / typeof(): Pasa de valor 'numérico' a '(string) cadena de texto'.

El valor 'NaN' es el acrónimo de 'Not A Number' que indica que el valor contenido por la variable no es válido.
Esto es debido a que resulta imposible realizar la conversión de la cadena 'hola' a un valor numérico válido.

isNaN: Comprueva si el tipo de valor de la variable es válido, osea si es alfanumérico (cadena de texto), mediante true (si es alfanumérico) o false (en caso contrario).

/* CONVERSIÓN DE VALORES  */
	
	
/* --------------------JavaScript------------------- */ 	
	
		
function converValor(){
	
/* CONVERTIR DE CADENA ALFANUMÉRICA A NUMÉRICO */ 
var valor1 = '10.5';
var valor2 = '10';
	
  alert('Conversión Implícita concatena los operadores ' + valor1 + valor2 ); 
  // Concatena y muestra 10.510  

var numero1 = parseFloat(valor1);
var numero2 = parseInt(valor2);
	
  alert('Conversión Explícita 'parseInt', ' parseFloat ' + (numero1 + numero2)); 
  // Suma y muestra 20.5 
  
	
/* CONVERTIR DE NUMÉRICO A CADENA ALFANUMÉRICA */ 
var valor = 123;
var cadena = valor.toString();
	
  alert('Comprobar el tipo de var 'valor': ' + typeof(valor)); 
  // Muestra el mensaje 'Number' 
  
  alert('Comprobar el tipo de var 'cadena': ' + typeof(cadena)); 
  // Muestra el mensaje 'String' 
  

/* COMPROVACIÓN DE CONVERSIÓN */ 	
var valor = 'hola';
var numero = parseInt(valor); // 'parseInt' convierte a valor numérico 
		
  alert('var valor = 'hola' es de tipo 'string' Las funciones 'parseFloat' 
  	  y 'parseInt' retornan' + numero + ' cuando evalúan un valor 
	  que no es un número. Not a Number (No es un Número)');
  
		
/* COMPROVAR TIPO DE VALOR */ 
var valor1 = '123';
var valor2 = 'hola';
	
  alert('isNaN Evalúa un argumento para determinar si éste 
 	  no es un número' + 'var valor1 = '123' + isNaN(valor1)); 
  // Muestra 'false' 
	
  alert('isNaN Evalúa un argumento para determinar si éste 
  	  no es un número' + 'var valor2 = 'hola' + isNaN(valor2)); 
  // Muestra 'true' 	

}


/* --------------------HTML------------------- */ 


<form>

  <input value='conversión valores' onclick='converValor();' type='button'>
  </input>
	
</form>

Prueba, conversión de valores:



Subir

If else, sentencia de control

Sentencia if y else

En ocasiones, las decisiones que se deben realizar no son del tipo 'si se cumple la condición, hazlo; si no se cumple, no hagas nada'. Normalmente las condiciones suelen ser del tipo 'si se cumple esta condición, hazlo; si no se cumple, haz esto otro'.

/* Sentencia if else */

 
/* --------------------JavaScript------------------- */ 


function ifelse(){
	
var edad = prompt('Edad del usuario:'); 
    
	// Si la edad introducida por el usuario es mayor o igual a 18, entonces ... 
	if(edad >= 18) { 
		
		// Mostrar el siguiente mensage 
		alert('Eres mayor de edad'); 
	
	// Si no es así, entonces esto otro ...  
	}else{ 
		
		// Mostrar el siguiente mensage 
		alert('Todavía eres menor de edad'); 
	
	}
	
}

/* --------------------HTML------------------- */ 


<form>

  <input value='Comprobar' onclick='ifelse();' type='button'>
  </input>
	
</form>

Prueba, Sentencia if else:



Else if: La estructura if...else se puede encadenar para realizar varias comprobaciones seguidas.

/* else if  */


/* --------------------JavaScript------------------- */ 


function elseif(){
	
var edad = prompt('Edad del usuario ');
  
  // Entra en la primera sentencia, si se cumple (- o = a 12) o ((+ o = a 13) y (- o = a 17)) 
  if(edad <= 12 || edad >= 13 && edad <= 17) { 
	  
	alert('Eres menor de edad'); 
  
  }else if(edad >= 18 && edad <= 22 ) { 
	  
	alert('Todavía eres un adolescente'); 
  
  }else if(edad >= 23 && edad <= 35) { 
	  
	alert('Aún sigues siendo joven'); 

  }else if (edad >= 36 && edad <= 65) {
	  
	alert('Eres un adulto');
	  
  }else{
	  
	alert('Piensa en cuidarte un poco más'); 
  
  }
  
}



/* --------------------HTML------------------- */ 


<form>

  <input value='Comprobar' onclick='elseif();' type='button'>
  </input>
	
</form>

Prueba, else if:



Subir

For, sentencia de control

Sentencia for

Si queremos que se repita la instrucción de una estructura, utilizaremos for, esta sentencia nos permite realizar este tipo de repeticiones (también llamadas bucles) de una forma muy sencilla.

La variable que controla los bucles for se llama i, ya que recuerda a la palabra índice.

/* Sentencia for */

/* --------------------JavaScript------------------- */ 


function forBucle(){
	
var mensaje;

// 'mensaje' vale 1  
mensaje = 1;
	
  // Bucle for de 5 iteraciones 
  for(var i = 0; i < 5; i++) { 
  
    alert('\tIterando ' + mensaje);
	mensaje++;  // Incrementar el valor actual del elemento, en uno más 
	
  }
  
  // 'mensaje' vale 1 en la primera iteración, 
   // 'mensaje' vale 2 en la segunda iteración,
   // y se va incrementando en cada vuelta hasta  
   // el índice máximo contador que es '5' 
  
}


/* --------------------HTML------------------- */ 


<form>

  <input value='Sentencia for' onclick='forBucle();' type='button'>
  </input>
	
</form>

Prueba, Sentencia for:



Push()

push(): añade un elemento al final del array. El array original se modifica y aumenta su longitud una unidad. También es posible añadir más de un elemento a la vez.

// Push()

/* --------------------JavaScript------------------- */ 

	
// Recorrer un array elemento por elemento 	
function diaSemana(){

// Generar un nuevo elemento array 
var semana = new Array();
	
	semana.push('Lunes');
	semana.push('Martes');
	semana.push('Miércoles');
	semana.push('Jueves');
	semana.push('Viernes');
	semana.push('Sábado');
	semana.push('Domingo');
		
	// Mostrar todos los elemento del array en un único mensaje 
	alert(semana);
	
	// 'length' recorre toda la longitud del array 'semana', elemento por elemento 
	for(var i = 0; i < semana.length; i++){
		
		// Mostrar uno a uno cada índice del array en cada iteración 
		alert("Índice" + i + " " + semana[i] + '');
		
	}
	
}


/* --------------------HTML------------------- */ 


<form>

  <input value='Push()' onclick='diaSemana();' type='button'>
  </input>
	
</form>

Prueba, push():



For...in

for . . . in: El objetivo de for in es recorrer un objeto pasando por cada una de sus propiedades para actuar sobre ellas, y ya que en javascript los arrays son Objetos, podemos hacer que itere por cada uno de los valores de sus propiedades.

En for, en bucles declaración por medio de las propiedades de un objeto.
El bucle se ejecuta una vez para cada propiedad.

// for ... in()

/* --------------------JavaScript------------------- */ 


function bucleForIn(){
	
// Array con propiedades y sus valores 	
var pers={nombre:'Nombre: \n\t Juan' ,
	   apellido_uno:'Primer apellido: \n\t Gómez',
	   apellido_2:'Segundo apellido: \n\t Portillo', 
	   años:'Edad: \n\t ' + 32 + ' años'}; 
	
var quien;
	
  	for (quien in pers){ // Recorre las propiedades del Array 
		
	   // Muestra una por una, todas sus propiedades 
	   alert(pers[quien] + ''); 
	   /* Mediante el uso de los corchetes [] podemos acceder al valor 
				 de dichas propiedades, como operador sobre objetos */ 
  	
	}

}


/* --------------------HTML------------------- */ 


<form>

  <input value='Bucle for - in' onclick='bucleForIn();' type='button'>
  </input>
	
</form>

Prueba, for ... in:



// Otro for ... in()

/* --------------------JavaScript------------------- */ 


// RECORRE UN ARRAY ASOCIATIVO 
function indiceAsociativo(){
	
var semana = new Array();
	/* Valor mas propiedad */ 
	semana['Lunes'] = ' dia 1';
	semana['Martes'] = ' dia 2';
	semana['Miércoles'] = ' dia 3';
	semana['Jueves'] = ' dia 4';
	semana['Viernes'] = ' dia 5';
	semana['Sábado'] = ' dia 6';
	semana['Domingo'] = ' dia 7';
	
	// Obtenemos el indice y el valor 
	alert('Índice y su valor');	

	for(var indi in semana){
		
		// Mostrar uno a uno, cada elemento del array 
		alert(indi + ': ' + semana[indi]);
		/* Mediante el uso de los corchetes [] podemos acceder al valor 
				    de dichas propiedades, como operador sobre objetos */ 
		
	}
	
}
	
/* --------------------HTML------------------- */ 


<form>

  <input value='for .. in()' onclick='indiceAsociativo();' type='button'>
  </input>
	
</form>

Prueba, for ... in:



For each...in

for each...in: Sentencia introducida en JavaScript 1.6 Similar a for...in, pero iteraciona sobre los valores de las propiedades del objeto, no sobre sus nombres.

En los códigos anteriores, la variable "i" es nuestro iterador y utilizando el "in" la palabra clave for each "para cada uno" bucle de hecho, recorre todos los elementos de la matriz para nosotros.
El uso de este, ya no tiene que preocuparnos por la longitud de la matriz. Una cosa a notar sobre el uso de for each para iterar sobre una serie, es que no necesariamente va a iterar sobre la matriz en el orden de su índice de 0 a n. Básicamente, el orden de iteración no está garantizado.

/* FOR EACH...IN */
	
/* --------------------JavaScript------------------- */ 


function ForEach(){

// Inicializar la variabla 	
var suma = 0;

var miObje = {p_1: 2, p_2: 4, p_3: 15};
	
	for (var item in miObje) {
	  
	  // Suma de las tres propiedades del objeto 'miObje' 
	  suma += miObje[item];
	  // 'item' => El método item() 'elemento'() devuelve el nodo 
	  		  en el índice especificado en una lista de nodos. 
	  
	}

  // Resultado '21' 	
  // Insertamos el resultado dentro del párrafo con ID demoForEach 
  document.getElementById('demoForEach').innerHTML = suma;

}

/* --------------------HTML------------------- */ 


<form>

  <input value='For each...in' onclick='ForEach();' type='button'>
  </input>
	
</form>

Prueba, for each...in:



Subir

Switch - case, Sentencia de control

Sentencia Switch - case

Switch: Evalua una expresión que puede tener múltiples valores o posibles opciones.

Permite hacer múltiples operaciones dependiendo del estado de una variable.

Contiene el nombre de la variable entre paréntesis que se va a utilizar en las comparaciones.

Cada comparación se indica mediante la palabra reservada case seguida del valor con el que se realiza la comparación. Si el valor de la variable utilizada por switch coincide con el valor indicado por case, se ejecutan las instrucciones definidas dentro de ese case.

default: Para todos los casos no contemplados en los casos case se ejecuta el caso por defecto.

// SENTENCIA SWITCH / CASE 

/* --------------------JavaScript------------------- */ 


function switchCase(){	
	
	var opcion;
	opcion = prompt('Selecciona opción:\n 
				(I) INICIAR,\n 
				(P) PAUSAR,\n 
				(C) CANCELAR.');
	
		switch(opcion)
		{
			case 'alert('Has seleccionado INICIAR');
				/* Posible llamada a funció */ 
				break;
			case 'alert('Has seleccionado INICIAR');
				/* Posible llamada a funció */ 
				break;
			case 'alert('Has seleccionado PAUSAR');
				/* Posible llamada a funció */ 
				break;
			case 'alert('Has seleccionado PAUSAR');
				/* Posible llamada a funció */ 
				break;
			case 'alert('Has seleccionado CANCELAR');
				/* Posible llamada a funció */ 
				break;
			case 'alert('Has seleccionado CANCELAR');
				/* Posible llamada a funció */ 
				break;
				
			default:
				alert('Selección desconocida');
		}
	
}	
	
/* --------------------HTML------------------- */ 



<form>

  <input value='CREAR OBJETO' onclick='MiWith();' type='button'>
  </input>
	
</form>

Prueba, sentencia Switch:




break: Esta palabra es opcional, pero si no la ponemos a partir de que se encuentre coincidencia con un valor se ejecutarán todas las sentencias relacionadas con este y todas las siguientes, es decir cada case ha de tener su break por si esa condición se cumpliera.

// SWITCH SIN BREACK

/* --------------------JavaScript------------------- */ 


function sinBreak(){
	
var diaSemana = prompt('Nº del 1 al 7:');

	switch (diaSemana) 
	{
		case '1':
		   alert('Es Lunes')
		   break;
		case '2':
		   alert('Es Martes')
		   break;
		case '3':
		   alert('Es Miércoles')
		   break;
		case '4':
		   alert('Es Jueves')
		   break;
		case '5':
		   alert('Es viernes')
		   break;
		case '6':
			alert('\t Al no contener break. \n 
				recorre los siguientes 'case' \n 
				de la sentencia 'switch'')
			// Sin break 
		case '7':
		   alert('Es fin de semana')
		   break;
		default:
		   alert(diaSemana + '\t Este día no existe')
    } 
	
}
	
/* --------------------HTML------------------- */ 



<form>

  <input value='Switch sin break' onclick='sinBreak();' type='button'>
  </input>
	
</form>

Prueba, sentencia Switch sin Break:



Subir

While, Sentencia de control

Sentencia While

While: Esta sentencia de bucle ejecuta las instrucciones internas repetidamente hasta que la condición sea verdadera.

La diferencia entre do - while es que en while se comprueba la condición antes de realizar la primera iteración, por lo que, si la condición es verdadera 'true' la instrucción deja de ejecutarse.

// SENTENCIA WHILE 

/* --------------------JavaScript------------------- */ 
	
	
var ventana; // Variable global, para poder cerrarla desde cualquier función 

function otroWhile(){	

var numOculto;
var num;

numOculto = 4; // Número a acertar 
num = 0;

/* HASTA QUE LA CONDICIÓN SEA 'TRUE', NO SALDRÁ DEL BUCLE */ 
  while (numOculto != num) // si distinto de número 
  {
     num = prompt('Número entre 1 y 5', '');
	 if (num < numOculto){
	
		alert('Número más alto');
		
	}else{
			
		if (num > numOculto){
			
			alert('Número más bajo');
			
  		}
		
	}
	
  }

alert('¡Felicidades!');
  
  // Abrir una ventana con una imagen 'window.open' 
  ventana = window.open('homerSi.html','Felicidades',
			   'height=200,width=200,left=450,
			   top=350,location=yes,menubar=no,
			   resizable=no,scrollbars=yes,
			   status=no,titlebar=yes,focus()');

}

function cerrarVentana(){
	
	// Invocamos la variable global 'ventana' para cerrarla 'ventana.close' 
	ventana.close('homerSi.html');
	alert('Ventana emergente cerrada');

}

/* --------------------HTML------------------- */ 



<form>

  <input value='While' onclick='otroWhile();' type='button'>
  </input>
  
  <input value='Cerrar Ventana' onclick='cerrarVentana();' type='button'>
  </input>
	
</form>

Prueba, sentencia while:





do - while: Esta sentencia ejecuta una serie de instrucciones, al menos una vez hasta que el valor de la condición que se evalúa es falso.

// DO - WHILE 

/* --------------------JavaScript------------------- */ 


function num(){

var b = 1;

  do {
     
     alert(b);
     // Inserto resultado en párrafo con ID 'demoWhile' 
     document.getElementById('demoWhile').innerHTML = '' + b + '';
     b++; // Incrementa en 1 el valor de 'b' 
  
  } while (b <= 3); // si 'b' no es superior a 3, vuelve al bucle 

}

/* --------------------HTML------------------- */ 



<form>

  <input value='do - while' onclick='num();' type='button'>
  </input>
	
</form>	


// Resultado de while se inserta en ID 'demoWhile'  
<p id='demoWhile'></p>

Prueba, do - while:


// OTRO DO - WHILE 

/* --------------------JavaScript------------------- */ 


var vent; // Variable global  
var vent2; // Variable global  

function doWhile(){
	
var imagen;

  do {
	  
	  alert("Jugando");
	  
	  // Mientras se acepte la confirmación, estaremos dentro del bucle 
	  imagen = confirm("¿Ver imagen otra vez? S/N"); 
	  
	  // Si hemos aceptado el mensaje de confirmación, abre ventana 
	  if(imagen == true){
		  
		  vent = window.open("homerSi.html","Hola","height=200,
				        width=200,left=90,top=225,location=yes,
				        menubar=no,resizable=no,scrollbars=yes,
				        status=no,titlebar=yes,focus()");
	  
	  }else{
		  
		  // Si no hemos aceptado el mensaje de confirmación, abre otra ventana 
		  vent2 = window.open("homerNo.html","Adios","height=200,
		  			  width=200,left=307,top=225,location=yes,
					  menubar=no,resizable=no,scrollbars=yes,
					  status=no,titlebar=yes,focus()");
	  
	  }
  
  }
	
	while (imagen == true);
	
		// Si cancelamos la confirmación "adios" 
		alert("adios"); 		

}

		
/* CERRAR VENTANA */ 
function cerrar(){
	
	// Cerrar ventanas abiertas 
	if(vent.close() != true && vent2.close() != true){
		
		vent.close("homerNo.html");
		vent2.close("homerSi.html");
		
	} 
	
		alert('Has cerrado todas las ventanas!');
		
}

/* --------------------HTML------------------- */ 



<form>

  <input value='Otro do - while' onclick='doWhile();' type='button'>
  </input>
  
  <input value='Cerrar ventana' onclick='cerrar();' type='button'>
  </input>

	
</form>

Prueba, otro do - while:



Subir

With, sentencia

Sentencia with

Mediante la sentencia with , fijamos el Objeto al que vamos a acceder, escribiendo únicamente el nombre de la propiedad/método para acceder a estos.

WITH establece el objeto por defecto [default] para un conjunto de sentencias. JavaScript busca los nombres no calificados dentro de ese conjunto de sentencias y determinar si los nombres son propiedades del objeto por defecto. 

// Crea un nodo mediante sentencia WITH 

/* --------------------JavaScript------------------- */ 


function MiWith(){
	
with(document)
  with(documentElement)
  
  // Insertar el texto como primer hijo del elemento 'li' 
  insertBefore(createElement('li'),
		 firstChild).text = 
		 alert('Sentencia "with"'); 	
	
	
// Crea un nodo de lista .......... 	
var elemento = document.createElement('li');

// Crear el texto para el nuevo nodo 
var texto = document.createTextNode(" ---- Sentencia 'with' ---- ");

// Insertar el nodo con su texto dentro del nodo con ID 'sentenciaWith' 
elemento.appendChild(texto); // 'elemento' es padre de texto. 

// Insertar el nodo con su texto dentro del nodo con ID 'sentenciaWith' 
document.getElementById('sentenciaWith').appendChild(elemento);

}

/* --------------------HTML------------------- */ 



<form>

  <input value='CREAR OBJETO' onclick='MiWith();' type='button'>
  </input>
	
</form>	


	<ul id='sentenciaWith'>
		
		// El nodo 'li' se inserta dentro de la lista 'ul' 
		
	</ul>


Cambiar propiedades de estilo con JavaScript.

Asignar atributos (estilos) DOM mediante sentencia WITH


La sentencia with puede resultar útil cuando tratamos de asignar una serie de atributos a un conjunto de elementos DOM preseleccionado.

/* ASIGNAR ATRIBUTOS (ESTILOS) DOM */ 

/* --------------------JavaScript------------------- */


function vemosWith(){
		
// Asignar atributos (estilos) DOM mediante sentencia WITH 
with(document.getElementById('sentenciaWith').style) {
	
	backgroundColor = '#000';
	color = '#fff';
	fontWeight = '600';
	width = '186px';
	height = '40'; 
	padding = '3px';
	border = '1';
	border = 'solid';
	borderColor = '#FF8F0D'; // orange 
	
	}
}

/* VOLVER AL ESTADO INICIAL */ 
function noVemosWith(){

// Asignar atributos (estilos) DOM mediante sentencia WITH 
with(document.getElementById('sentenciaWith').style) {

	backgroundColor = '#FFC493'; // orange 
	color = '#000 !important';  // yellow 
	fontWeight = '600';
	width = '186px';
	height = 'auto'; 
	padding = '6px';
	border = 'none';
	
	}
		
} 

/* --------------------HTML------------------- */ 




	<ul id='sentenciaWith'>
		
		// El aspecto del DIV ira cambiando al pulsar cada botón 
		
	</ul> 


<form>

  <input value='Cambiar estilos' onclick='vemosWith();' type='button'>
  </input>
  
  <input value='Actualizar estilos' onclick='noVemosWith();' type='button'>
  </input>
	
</form>

Con la sentencia with podremos acceder tanto a las propiedades como al método.
Dentro de un bloque de instrucciones de la sentencia with está permitido usar variables y funciones definidas en cualquier parte del código.

// Acceder a propiedades y métodos de un Objeto 
   
/* --------------------JavaScript------------------- */


/* ACCEDER A PROPIEDADES Y MÉTODOS DE UN OBJETO - */

/* ESTAS DOS FUNCIONES HACEN ABSOLUTAMENTE LO MISMO
   PERO CON LA SENTENCIA "WITH" LA CARGA DE LA PÁGINA
   ES MÁS ÓPTIMA Y RÁPIDA DEPENDIENDO DE LA CARGA DEL
   CONTEIDO */	

var objecte = { uno: 'Carmen', Hora: '12:05' }, value;
var objecteWith = { dos: 'Samuel', Hora: '08:30' }, value;

// Declaración de la función 
function FuncionExterior() {

  for ( var i = 0; i < 2; i++ ) {
  
	value = alert(objecte.uno + '\nTiene visita a las\n' + 
			objecte.Hora + ' horas.');
	// Muestra 2 veces la propiedad del método 
  
  }

}
	
// Declaración de la función - Equivale a la función superior 
function withOcon() {

  with(objecteWith) {
  
	for ( var i = 0; i < 2; i++ ) {
		
	  value = alert(dos + '\nTiene visita a las\n' + Hora + ' horas.'); 
	  // Muestra 2 veces la propiedad del método 
	  
	}
  
  // Llamada a función externa, dentro de instrucción de sentencia with 
  FuncionExterior();

}
	
/* --------------------HTML------------------- */ 


<form>

  <input value='Propiedades de un objeto' onclick='withOcon();' type='button'>
  </input>
	
</form>

Prueba, Acceder a propiedades y métodos de un Objeto:



with(window): Muestra todos sus elementos nada más cargar la página.

/* MOSTRAR AL ARRANCAR LA PÁGINA */

// Cero argumentos de ejemplo cerrados 
with(window){
	
  // lo mismo que window.alert (123) 
  alert('\t with(window){} \n Lo mismo que \n window.alert();' + 123);
  
  // lo mismo que window.onload = function () {}; 
  onload = function(){
	  
	alert('\t onload = function(){} \n Lo mismo que \n 
	      window.onload = function () {}');
 
  };
  
  (function(){
	  
  // lo mismo que nuevo window.XMLHttpRequest 
  var xhr = new XMLHttpRequest;
  
  })();
  
	alert('\t (function(){var xhr = new XMLHttpRequest;})() \n 
	      Lo mismo que \n nuevo window.XMLHttpRequest');
  
  // lo mismo que window.String.fromCharCode 
  String.fromCharCode(1);
  
	alert('\t String.fromCharCode(1); \n Lo mismo que \n 
	      window.String.fromCharCode' + String.fromCharCode('A'));	

}


Subir

Break y Continue, Sentencias

Break: Con la sentencia break terminaremos la ejecución de un bucle for o while cuando una variable toma un determinado valor o cuando se cumple alguna condición.

/* BREAK */
		
// ----------------- JavaScript ------------------ 
		
		
function romper(){

var cadena = 'Si todos los derechos son reservados, 
	                 ¿son todos los zurdos muy habladores?';

// 'split' separa los carácteres de una cadena de carácteres 
var letras = cadena.split(""); 
// Cadena vacia 
var resultado = "";

  for(i in letras) {
	  
    if(letras[i] == 'a') { // Encuentra una "a" 
	
    	break; // y detiene la ejecución del bucle 
	
   }
   
    else {
		
  		// Si no encuentra una 'a'. sigue añadiendo letras 
		resultado += letras[i]; 
  
   }
   
}

// Muestra la cadena hasta la primera 'a' encontrada 
document.getElementById('demoBreak').innerHTML = 'Cadena completa:<br /> ' + 
    cadena +  'Romper cadena en la 1ª 'a' que encuentra: <br /> ' + resultado;

}

// ----------------- HTML ------------------ 


<form>

  <input value='BREAK' onclick='romper();' type='button'>
  </input>

</form> 	

	<p id='demoBreak'></p> <br />';

Prueba, break:




Otro ejemplo de break:

/* OTRO BREAK */

// ----------------- JavaScript ------------------ 

	
function breakSentencia(){
	
// Se ha de inicializar con una cadena vacia o con un número 	
uno = ""; 
  
  // Mientras 'uno' sea menor de 5 ... 
  while(uno < 5)
  {
	  
	  if(uno == 3){ // Cuando 'uno' vale '3'...  
		
		break; // ...se rompe el bucle 
		
	  }
	  
	// Incrementar el valor de 'uno' en cada iteración 
	uno++;
	
	// Valor de 'uno' en cada iteración 
	alert('var uno vale: \n\n \t ' + uno);
  
  }
  
  // Valor de 'uno' al romperse el bucle 
  alert('Rotura en la vuelta nº: ' + uno); // 'uno' => 3 

}

// ----------------- HTML ------------------ 


<form>

  <input value='OTRO BREAK' onclick='breakSentencia();' type='button'>
  </input>

</form>

Prueba, otro break:




Continue: Al contrario que break, continue permite utilizar el bucle for para filtrar los resultados en función de algunas condiciones o cuando el valor de alguna variable coincide con un valor determinado.

/* CONTINUE */ 

// ----------------- JavaScript ------------------ 


function continuar(){

var cadena = 'El dolor es inevitable, el sufrimiento es opcional';

split(""); // 'split' separa los carácteres de una cadena de carácteres 
var letras = cadena
var resultado = "";

	for(i in letras) {
		
		// Salta las 'es' sin detener la ejecución del bucle 
		if(letras[i] == 'e' || letras[i] == 'E') { 
			
			continue;
        
		}else {
			
			// Muestra la cadena entera sin las 'es' 
			resultado += letras[i];
			
        }
		
      }
	  
// Muestra la cadena completa sin las "es"   
document.getElementById('demoConti').innerHTML = 'Cadena completa:<br /> ' + cadena +  'Salta todas las "es" de la cadena <br /> ' + resultado;
	
}

// ----------------- HTML ------------------ 


<form>

  <input value='CONTINUE' onclick='continuar();' type='button'>
  </input>

</form> 	

	<p id='demoConti'></p> <br />';

Prueba, Continue:




Otro ejemplo de continue:

/* OTRO CONTINUE */
	
// ----------------- JavaScript ------------------ 
	
	
	
function continueSentencia(){

for(var i = 1; i <= 5; i++){
 
  /* Cuando llegue al 3, proboca un salto y continua 
  	 con el siguiente hasta el final del bucle */ 
  if(i == 3){ 
     
	// Insertar resultado en párrafo con ID 'demoContinue' 
	document.getElementById('demoContinue').innerHTML = 
				'Se ha encontrado el nº 3 <br />
							    El "3" lo salta y sigue <br />
							    ejecutando el bucle';		   
	 
	continue; 
	   
  } 
  
  alert('El bucle continua \n\n \t\t' + i);
  
  }	
  
}

// ----------------- HTML ------------------ 


<form>

  <input value='OTRO CONTINUE' onclick='continueSentencia();' type='button'>
  </input>

</form> 	

	<p id='demoConti'></p> <br />';

Prueba, Otro continue:




Subir

Tipo objeto

Objeto: Un objeto es una estructura que engloba una serie de datos (propiedades) y las funcionalidades necesarias para manejar los (métodos). Es decir, crear un tipo de clase, que más tarde se podrán hacer instancias. Un objeto perdura mientras esté cargado el documento.
El tipico ejemplo del coche:
El coche tiene un conjunto de características como ( color, modelo , marca, etc...), y una serie de funcionalidades (arrancar, acelerar, frenar, etc...).

Así que como Objeto tenemos el coche, las propiedades sus características y sus métodos las funcionalidades.

Como no todos los objetos coche son iguales, necesitamos poder especificar las características individuales de cada uno.

A cada Objeto coche se le denomina instancia.

Cuando asignamos un valor de cualquier tipo a una variable, ésta se convierte en una instancia de un Objeto, con sus propiedades y métodos propios.

// Objetos / matrices 
		
// ----------------- JavaScript ------------------ 
		

	
// Función con paso de parámetros, (propiedades del objeto 'miObjeto') 
function miObjeto(nombre,apellidos,foto,aficiones,mail,url){
	
  // Asignamos propiedades a cada parámetro 
  this.Nombre = nombre;
  this.Apellidos = apellidos;
  this.Foto = foto;
  this.Aficiones = aficiones;
  this.Mail = mail;
  this.Url = url;

}

// Creamos y declaramos la matriz con '6' elementos 
var objArray = new Array(5);

// Inicializamos la matriz a '0 '
// para poder ir incrementando en 1
// al generar instancias del objeto 
var elemArray = 0;

  // 1ª instancia del objeto 'miObjeto' con sus propiedades 
  objArray[elemArray++] = new miObjeto( 
			"Juan Carlos", 
			"Martin Pueblos",
			"images/homerSi.png",
			"restaurantes, ferias y eventos",
			"jurestau@mail.com",
			"http://www.juanca.es" );
			
  // 2ª instancia del objeto 'miObjeto' con sus propiedades 
  objArray[elemArray++] = new miObjeto( 
			"Jose Maria", 
			"Cuenca Palacios",
			"images/homer_Noveo.png",
			"dormir, televisión, radio",
			"jodormi@mail.com",
			"http://www.jesema.es" );
			
  // 3ª instancia del objeto 'miObjeto' con sus propiedades 	
  objArray[elemArray++] = new miObjeto(
			"Joaquim", 
			"Segura Casas",
			"images/homer_desesperado.png",
			"alarmista, cine, teatro",
			"jodespe@mail.com",
			"http://www.quim.es" );
			
  // 4ª instancia del objeto 'miObjeto' con sus propiedades 			
  objArray[elemArray++] = new miObjeto( 
			"Juan Pedro", 
			"Garcia Sánchez",
			"images/homer_Contento.png",
			"cómico, beber, espectáculos",
			"garcomi@mail.com",
			"http://www.juanpe.es" );
			
  // 5ª instancia del objeto 'miObjeto' con sus propiedades 	
  objArray[elemArray++] = new miObjeto( 
			"Pablo", 
			"Ramos Huertas",
			"images/homerNo.png",
			"camorrista, futbol",
			"ramcam@mail.com",
			"http://www.pablo.es" );
			
			
	
// Añadimos la funcion que escribe los datos. 
function ver(){
  
  // Insertar la foto 
  document.Foto.src = this.Foto;
  // Insertamos el nombre y apellidos seleccionados de la matriz 
  document.campos.Nombre.value = this.Nombre + " " + this.Apellidos;
  // Insertar valor dentro del campo de aficiones 
  document.campos.Aficiones.value = this.Aficiones;
  
  
  // Inserta valor dentro del campo de mail 
  document.campos.Mail.value = this.Mail;
  // Inserta valor dentro del campo de url 
  document.campos.Url.value = this.Url;
	
}

// Añadir nuevas propiedades a todas las 
// instancias del objeto con 'prototype'.
// Llamar a la función que visualizar los datos. 
miObjeto.prototype.ver = ver; 



// ----------------- HTML ------------------ 



<form>

<label >Nombre: </label>  
  <input type='text' name='Nombre' size='50' value=''></input> <br />

<label >Aficiones: </label>
  <input type='text' name='Aficiones' size='50' value=''></input> <br />

<label '>Mail: </label>        
  <input type='text' name='Mail' size='50' value=''></input> <br />

<label >Url: </label>          
  <input type='text' name='Url' size='50' value=''></input> <br />
  
</form>


<!-- Ponemos los primeros datos --> 
<script>
      
  <!-- Muestra el primer elemento del Array --> 
  objArray[0].ver();
      
</script>



// Formulario de opciones  
<form name='opcion'>
	  	
<fieldset>Datos de:
	
  <select name='sujeto' onChange=
  		 'objArray[document.opcion.sujeto.selectedIndex].ver(); '>
		
	<script>
			  
	  for( x = 0; x < elemArray; x++ ) {
				  
		document.writeln( '<option>' + objArray[x].Nombre );
				
	  }
			
	</script>
			
  </select>
		
</fieldset>
	
</form>
La foto
 

       
         
Datos de:


Subir

window open

pop-up: Es una nueva ventana emergente que aparece al abrir una página, pinchando sobre un enlace o al pasar el ratón sobre un punto de la página que se está visitando.

A veces es necesario crear ventanas emergentes, bien para mostrar imágenes, formularios o publicidad.

Abrir pop-up desde link, botón o imagen

// window open


// ----------------- JavaScript ------------------ 



/* VENTANA EMERGENTE desde un link, botón o una imagen */ 
function abreVentana(URL){
	
  window.open('homerSi.html','HomerJS','width=200,height=200,top=400,
  				  left=450,scrollbars=0,titlebar=1,menubar=1,
				  toolbar=0,directories=1,location=1,status=1,
				  resizable=0,focus()') 
  
}

// ----------------- HTML ------------------



// ABRIR VENTANA DESDE ENLACE 	
<p> <a href='javascript:abreVentana(tuVentana.html)'>
	     Ventana Secundaria </a> </p>


// ABRIR VENTANA DESDE BOTÓN 
<form>
	
  <input type='button' value='Abrir' onclick='abreVentana('tuVentana.html')' />
		
</form>


// ABRIR VENTANA DESDE IMAGEN 
<p> <a href='javascript:abreVentana('tuVentana.html')'>
	      <img src='images/tuImagen.png' 
			  border='1px solid' 
			  width='125' 
			  height='125' /> </a> </p>

Prueba, window open:

Ventana Secundaria


Podemos crear un botón para cerrar la ventana emergente que acabamos de abrir:

// CERRAR VENTANA (CLOSE)


// ----------------- JavaScript ------------------ 


/* Mantener la variable como global
ya que si no es así no se puede 
cerrar la ventana desde el botón */ 	
var vent;


/* Abrir una ventana con una página y medidas específicas */ 	
function abrirVent(){

  vent = window.open('http://www.tuVentana.com/",
			"MiVentana",
			"height=550,
			 width=900,
			 left=90,
			 top=225,
			 location=1,
			 menubar=0,
			 resizable=0,
			 scrollbars=1,
			 status=0,
			 titlebar=1");

}


/* Función para cerrar ventana */ 	
function cerrarVent(){
  
 // hacemos referencia a la variable 'vent' 
  // para cerrar esa ventana en cuestión. 
  vent.close();
	
}


// ----------------- HTML ------------------ 


<form>

  <input value='Abrir Ventana' onclick='abrirVent()' type='button'>
  </input> 
  
  <input value='Cerrar Ventana' onclick='cerrarVent()' type='button'>
  </input>


</form>

Prueba, cerrar ventana (close)

                   


Abrir un pop-up

// Abrir un pop-up al cargar la página 
	
body onLoad="javascript:popUp('http://www.tuPagina.com')"> 
 	
	

// Abrir un pop-up desde un enlace 
	
<form>
  
  <input value='Abrir pop-up' onclick='javascript:popUp('http://www.tuPagina.com')' type='button'>
  </input>


</form>

Prueba, abrir pop-up



Cerrar varias ventanas a la vez: En ocasiones necesitamos crear una o varias ventanas hijas desde la ventana principal de nuestra página, y sería estupendo que al cerrar la ventana madre, o abandonar la página mostrada en ella, también se cerraran las ventanas hijas.

Por ejemplo puedo tener una ventana principal con un enlace que se abre en una ventana hija en la que se muestran avisos o mensajes y quiero que al cerrar la ventana madre o abandonar la página actual las ventana hija se cierre para ahorrarle al visitante el tener que cerrarla a mano.

La solución

Se trata de hacer uso del evento onunload, un evento que se dispara cuando cambia el contenido de la ventana del explorador, es decir, cuando el usuario abandona la página que está viendo (pinchando sobre un enlace, enviando un formulario, cerrar la ventana del navegador, etc).
Pero este evento también se dispara cuando el usuario cierra la ventana del explorador. Basta con vincularle una función que cierre las ventanas que anteriormente se abrieron usando el método window.open.

// Cerrar ventana mediante 'onUnload' 

// ----------------- JavaScript ------------------ 



/* Mantener la variable como global
ya que si no es así no se puede 
cerrar la ventana desde el botón */ 
var ventHija = null;

/* ABRIR VENTANA --------- */ 
function crearHija(){
	
	ventHija = window.open("homerSi.html","Felicidades",
				  "height=200,
				  width=200,
				  left=450,
				  top=350,
				  location=yes,
				  menubar=no,
				  resizable=no,
				  scrollbars=yes,
				  status=no,
				  titlebar=yes,
				  focus()");

}

/* CERRAR VENTANA -------- */ 
// El evento 'onUnload' cierra el pop-up 
function cerrarHija(){
	
	// Si exite la ventana 'ventHija' ... 
	if (ventHija)
		
		// ... la cierra mediante 'close' 
		ventHija.close();

}

// ----------------- HTML ------------------ 



<!-- El evento 'onUnload' se produce al cerrar la página o salir de ella --> 
<body onUnload="cerrarHija();">


<form>
  
  <input value='Abrir' onclick='crearHija()' type='button'>
  </input>


</form>

<p>Cierra esta ventana (ventana grande), al cerrarla se 
		debe de haber cerrado también la ventana emergente.</p>
		
	// COPIA EL CÓDIGO Y HAZ LA PRUEBA

Subir

Funciones en JavaScript

función: Una función contiene una agrupación de procesos los cuales tienen una función definida, de esta forma no tendremos que repetir tantas veces un código, que al fin y al cabo tendrán la misma función, (hora actual del equipo, imprimir mensaje en la pantalla, convertir variables de tipo, operaciones aritméticas, etc...).

Desde el interior de una función podemos llamar a otra función siempre y cuando esten dentro de las mismas etiquetas <script Language="text/javascript">....<script>, o También si la función se encuentra en un bloque <SCRIPT> anterior (por encima de la llamada) al bloque donde está la llamada.

Si llamamos a una función desde un bloque, y la función que llamamos se encuentra en un bloque inferior al bloque de la llamada, nos dará error.
Estructura de una función:

// Estructura de función

// ----------------- JavaScript ------------------ 

	
// La palabra reserbada va 'function' detrás del nombre de la función
// El nombre de la función ha de ser coerente según hagan sus instrucciones
// Por ejemplo si la instrucción de una función es ejecutar varias operaciones,
// podemos llamarla operacionesVarias o olgo más abreviado, pero siempre 
// ha de ser consecuente con las instrucciones que se realizan dentro de ella.  
function sumar(){
  
  // Instrucciones de función 
  var sum_1 = 4;
  var sum_2 = 2;   
  var suma = sum_1 + sum_2;
  
  // Insertar resultado dentro del párrafo con ID 'demoSuma' 
  document.getElementById('demoSuma').innerHTML = 
  					sum_1 + " + " + sum_2 + " = " + suma;
  
}

// ----------------- HTML ------------------ 
	
	
<form>

  <input value='Sumar' onclick='sumar();' type='button'>
  </input>

</form>


<!-- ESPACIO RESERVADO PARA EL RESULTADO --> 
<p id='demoSuma '></p>

Prueba, estructura de función:

Para invocar a una función, podemos invocarla desde cualquier parte de la página, para que se ejecuten las instrucciones dentro de las llaves "{ }".

Invocar una función desde dentro del código:

Simplemente escribimos el nombre de la función 'nombreDeLaFuncion' seguido de los dos paréntesis '( )', que son obligatorios. 

// Llamar a una función 
miFuncion();

Parámetros de una función:

Los parámetros nos servirán para indicar a la función con que valores queremos operar, (pasar o mandar parámetros, valores de entrada que reciben una función).

Cuando llamamos a una función con valores de entrada, tenemos que andar con cuidado ya que si la función tiene por ejemplo dos parámetros entre paréntesis, la llamada a esa función ha de tener el mismo número de parámetros, al faltar un parámetro o tener uno de más, la función no haría nada, o daría un error.

Cada parámetro va separado por una coma (,).

// Parámetros de una función 
	
// ----------------- JavaScript ------------------ 


function restar(a, b){ // Función con 2 parámetros

  // Si no se inicializaran los parámetros de la función, ésta
  // calcularia con los parámetros con la que ha sido invocada
  // es decir con el 4 y el 2.
  
  // Inicializar los parámetros de la
  // función con sus nuevos valores. 
  var a = 10; // Parámetro 'a' inicializado 
  var b = 4;  // Parámetro 'b' inizializado 
  var rslt = a - b; // Restar parámetros inizializados 

  // Insertar resultado dentro del párrafo con ID 'demoResta' 
  document.getElementById('demoResta').innerHTML = a + " - " + b + " = " + rslt);
  

}

// ----------------- HTML ------------------ 
	
	
<script type="text/javascript">

<!-- Llamada a la función -->
// Los parámetros de la llamada solo se calcularán si
// la función en sí, no contiene parámetros 
restar(4, 2); // Llamada con 2 parámetros 

</script>


<!-- ESPACIO RESERVADO PARA EL RESULTADO --> 
<p id='demoResta '></p>

Función invocada al cargar la página:

En la llamada a la función, se pasan dos parámetros (4 y 2), por lo que se espera (2) como resultado.
Esto no es así ya que los parámetros de la función se han inicializado con otros valores; (a = 10 y b = 4), por lo que el resultado es la resta de los nuevos valores que se les dan dentro de la función.
Recordar que: una variable puede cambiar constantemente su valor, a diferencia de las constantes.


Pasar un parámetro

/* PASAR UN PARÁMETRO */

// ----------------- JavaScript ------------------


// Variables a trabajar 
var x = 8;
var y = 6;
    
// Función con paso de un parámetro 
function uno(vale){
  
  var suma = vale + 2;
  var producto = vale * y;
  var division = x / vale;
    
  alert( 'Paso con un parámetro \n\n\t' 
  	  + vale + ' + ' + 2 + ' = ' + suma + '\n\n\t'
	  + vale + ' * ' + y + ' = ' + producto + '\n\n\t' 
	  + x + ' / ' + vale + ' = ' + division );

}

// ----------------- HTML ------------------ 
	
	
<form>

  <input value='Pasar un parámetro' onclick='uno(4);' type='button'>
  </input>

</form>

Prueba, pasar un parámetro, (4 ):



Función con múltiples parámetros

/* PASAR MÚLTIPLES PARÁMETROS */ 

// ----------------- JavaScript ------------------


var w = 'BUM';

function dos(r, s, t){
	
	var suma = r + s + t;
	var resta = (r - s) - t;
	var texto = w + t + s;
	
alert('Parámetros múltiples \n\n\t' 
      + r + ' + ' +  s + ' + ' +  t + ' = ' + suma + '\n\n\t
      (' + r + ' - ' + s + ') - ' + t + ' = ' + resta + '\n\n' 
      + w + ' + ' + t + ' + ' + s + ' = ' + texto);

}

// ----------------- HTML ------------------ 
	
	
<form>

  <input value='Múltiples parámetros' onclick='dos(5, 14, 20)' type='button'>
  </input>

</form>

Prueba, pasar múltiples parámetros, (4 ):



Abrir una ventana emergente con múltiples parámetros que indican el tipo de documento y las medidas de la ventana. 

/* OTRA FUNCIÓN CON MÚLTIPLES PARÁMETROS ------ */

// ----------------- JavaScript ------------------


// Variable global para poder cerrar la ventana 
var multiplesParam = null;

// Pasar parámetros de propiedades para enlaces que abran una 
// ventana con las dimensiones indicadas como parámetros. 
function multParam(vent, vert, horiz, menu){
		
  // Abrir nueva ventana con los parámetros indicados en su llamada. 
  multiplesParam = window.open(vent + '.html','',
				   'height=' + vert + ','
				   + 'width=' + horiz +
				   ',' +  'menubar='  + nenu); 
		
};


// Cerrar ventana emergente 
function closeMultParam(){
		
  multiplesParam.close();
	
};

// ----------------- HTML ------------------ 
	
	
<form>

  <input value='Abrir' onclick='multParam('Pag', 350, 280, 'no')' type='button'>
  </input>
  
  <input value='Cerrar ventana' onclick='closeMultParam()' type='button'>
  </input>

</form>

Prueba, otra función con múltiples parámetros:

       


Parámetros obligatorios y opcionales:

Obligatorio: Cuando tengamos declarada una función con dos parámetros, podremos preparar un bloque para que no se ejecute si no se le han pasado todos los parámetros.
Opcional: bloque preparado para que se ejecute tanto si tiene declarado uno, ninguno o los dos parámetros, pudiéndole asignar valores por defecto.

/* PARÁMETROS OBLIGATORIOS Y OPCIONALES --- */

// ----------------- JavaScript ------------------


// Variables a trabajar 
var suma, num1, num2;

function operacion(num1, num2){

/* Los parámetros se pasan en la llamada a la función.
En este caso los usuarios insertan los nº. para comprobar
por ellos mismos el resultado al insertar 
uno, ninguno o todos los parámetros. */ 
	num1 = prompt('Inserta un nº: ');
	num2 = prompt('Inserta otro nº: ');
	
  // Parámetros obligatorios 
  if(num1 == false && num2 == false){
	  
	alert('No se han pasado los parámetros necesarios!');
  
  // Parámetro opcional   
  }else if(num1 == false || num2 == false){
	  
	alert('Falta un parámetro!');
		
  }else{
	  
	num1 = parseInt(num1); / conversión explicita (Number) 
	num2 = parseInt(num2); // conversión explicita (Number) 
	  
	suma = num1 + num2;
	
	alert('Suma de los parámetros:\n\n\t\t' + suma);
	
  }
  
}

// ----------------- HTML ------------------ 


<form>

  <input value='Obligar parámetros' onclick='operacion(2, 4);' type='button'>
  </input>

</form>

Prueba, parámetros obligatorios y opcionales:



Subir

return, valores de retorno

return: Esta funcionalidad que proporcionan las funciones es útil para devolvernos un valor como resultado de las instrucciones de un bloque, mediante la palabra reservada return.

Para recoger el valor devuelto por la función hay que insertar una asignación haciendo que el operando de la derecha sea una llamada a una función.

function operar(num1, num2){
	
	Retorna el resultado de la operación 
	return num1 + num2;
   
}
	
	// Llamada a la función 
	document.write( operar(5, 2) ); // Retorna 7

Estructura:

/* RETURN, ESTRUCTURA */

// ----------------- JavaScript ------------------ 


var c = 2;

// Valores por defecto de la llamada ==> 8, 5 
function operar(num1, num2){
	
  // Insertar el resultado dentro del paráfo con ID 'demoEstruc' 
  return document.getElementById('demoEstruc').innerHTML = 
  	  'La suma de ' + num1 + ' y ' + num2 + ' es ' + (num1 + num2);
	
}

// ----------------- HTML ------------------ 


<form>

  <input value='8 + 5' onclick='operando(8, 5);' type='button'>
  </input>
  
  <input value='c + 8' onclick='operando(c, 8);' type='button'>
  </input>
  
  <p id='demoEstruc'><p>

</form>

Prueba, return, estructura:



// Valor de retorno
/* RETORNAR UN VALOR PARA DESPUÉS UTILIZARLO
   Y REALIZAR UNA OPERACIÓN SOBRE EL */
   
/* calculamos x2 (el cuadrado de un nº) en la función 
  "cuadrado(num)" y retornamos el resultado. */ 
function cuadrado(num){
     
  var c = num * num;
     
  // Retornamos el resultado 
  return c;
	   
}

function retornaUnParametro(){

  // Guardamos el valor del campo 
  var x = document.getElementById('cuadrado').value;
  
  // Invocamos a la función y pasamos el valor del campo para su cálculo 
  var almacen = cuadrado(x);
  
  // Devuelve el resultado y lo divide entre 2 
  document.getElementById('demoCuadrado').innerHTML = 
  		  "Cuadrado de " + x + " = " + almacen + "";
  
  var rslt = almacen / 2;
	  
  return document.getElementById('demoDividir').innerHTML = 
  		  "Dividido entre 2 = " + rslt + "";

	
}

// ----------------- HTML ------------------ 


<form>

  <input value='Cuadrado del número' onclick='retornaUnParametro();' type='button'>
  </input>
  
  <ul>
  
	<li id='demoCuadrado'></li>
	<li id='demoDividir'></li>
	
  </ul>
  
</form>

Prueba, valor de retorno:

Aberigua el cuadrado de un número:

     

Al devolver el valor mediante la sentencia return, la ejecución de la función se da por terminada, ignorando las líneas de código que le preceda.

Podemos utilizar la sentencia return sin ningún valor, provocando que la función termine sin devolver ningún resultado. Esto podría ser útil para cuando queramos que una parte del bloque no se ejecute, por ejemplo en función del valor de los parámetros recibidos.

/* VALOR DE RETORNO VACIO */

// ----------------- JavaScript ------------------ 


function precio(pvp){ 

  // Si parámetro supera la cantidad de 200, 
    // no imprimirá el resultado. 
  if(pvp <= 200){
	
	// Retorno vacio 
	return; 
	
  }
  
  // Insertar el resultado dentro del paráfo con ID 'demoReturnVacio' 
  return document.getElementById('demoReturnVacio').innerHTML = 'Valor' + pvp + '€';
  
}

// ----------------- HTML ------------------ 


<form>

  <input value='valor 250' onclick='precio(250);' type='button'>
  </input>
  
  <input value='valor 180' onclick='precio(180);' type='button'>
  </input>
  
  <p id='demoReturnVacio'><p>

</form>

Prueba, valor de retorno vacio:

Si el valor no supera 200, el retorno es vacio:



 

Ejemplo de sacar la media:

/* RETURN Sacar la media  */ 

// ----------------- JavaScript ------------------ 


function media(va1, va2){
 
  var rslt;
 
  va1 = prompt('La media de: ' + ' ');
  va2 = prompt('y de: ' + ' ');
  
  /* Sumo los valores y divido entre 2 para sacar la media */ 
  rslt = (parseInt(va1) + parseInt(va2)) / 2;
	 
  // Insertar resultado dentro del párrafo con ID 'demoMedia' 
  return document.getElementById('demoMedia').innerHTML = 
  			'La media de: ' + va1 + ' y ' + va2 + rslt;

}

// ----------------- HTML ------------------ 


<form>

  <input value='Valores de retorno' onclick='media(10, 5);' type='button'>
  </input>
  
  <p id='demoMedia'><p>

</form>

Prueba, return, sacar la media:



Otro ejemplo de retorno de valores

/* NÚMERO PAR O IMPAR */ 

// ----------------- JavaScript ------------------ 

	
function numPar(num){ 

num = prompt('¿Par o impar?' + '');

resto = num % 2; // Sacar el módulo para diferenciar pares de impares  

	if (resto == 0){ // Si módulo igual a '0' 
 
	  return alert(num + ' par'); // El nº es par 
		
	}else{ // Si módulo no es igual a '0' 
	
	  return alert(num + ' impar'); // El nº es impar 
		
    }
	
} 


// ----------------- HTML ------------------ 


<form>

  <input value='Retorna par o impar' onclick='numPar(8);' type='button'>
  </input>
  
  <p id='demoPar'><p>

</form>

Prueba, return, par o impar:



Múltiples valores de retorno: En una función, dentro de su bloque de instrucciones podemos necesitar tener varias condiciones para definir un resultado mas ajustado, pues bien también podremos introducir varias sentencias return, auque ya sabemos que cuando nos devuelva un return, finalizará la función, ignorando el resto de código.

Tendremos en cuenta que no es obligatorio recoger el valor devuelto por la función, así podemos hacer que sirva de forma directa como valor de un parámetro o podemos dejar que ese valor se pierda.

/* RECOGER VALOR RETORNO EN VARIABLE Y EN PARÁMETRO */

// ----------------- JavaScript ------------------ 

	
function alertProducto(num1, num2) { 
 
  return rslt = (num1 * num2); /* Multiplica los dos parámetros */ 

}

var rslt;  

function producto(num1, num2) { 

  // Recoger el valor de retorno en VARIABLE
  // Insertar el resultado dentro de la lista con ID 'demoReturnMulti' 
  rslt = document.getElementById('demoReturnMulti').innerHTML = 
  		'Recoge el valor de retorno en VARIABLE alertProducto(2, 8); // vale 16 
  

  /* Recoger el valor de retorno como PARÁMETRO 
	 directo y sin almacenarlo */  
  // Insertar el resultado dentro de la lista con ID 'demoReturnMulti_2' 
  return document.getElementById('demoReturnMulti_2').innerHTML = 
  	'Recoger el valor de retorno como PARÁMETRO ' + alertProducto(2, 7); // vale 14  
  
  // Pérdida del valor de retorno 
   // al no guardarse en variable. 
  alertProducto(2, 7);
  
}

// ----------------- HTML ------------------ 


<form>

  <input value='Retorno múltiple' onclick='producto(2, 8);' type='button'>
  </input>
  
	 <ul>
		 <li id='demoReturnMulti'> </li>
		 <li id='demoReturnMulti_2'> </li>
	 </ul>

</form>

Prueba, recoger valor de retorno en variable y en parámetro:


Otro ejemplo de Retorno de múltiples valores;:

// NÚMERO MAYOR

// ----------------- JavaScript ------------------ 


var rslt;

function alertNumMayor(a, z){
  
  if(a > z){
	
    // ... retorna a
	// Insertar resultado dentro del párafo con ID 'demoNumMas'
	return document.getElementById('demoNumMas').innerHTML = 
			 'El mayor entre ' + a + ' y ' + z + ' es ' + a;
	
  }else{
	
    // ... retorna z
	// Insertar resultado dentro del párafo con ID 'demoNumMas_2' 
	return document.getElementById('demoNumMas_2').innerHTML = 
			 'El mayor entre ' + a + ' y ' + z + ' = ' + z;
 
	
  }
  
}

// Llamar a la función que ejecuta el cálculo 
function numMayor(a, z){
 
  // Envia los valores a calcular 
  alertNumMayor(8, 10);
	
  // Envia otros valores a calcular 
  alertNumMayor(9, 5);
   
 
}



// ----------------- HTML ------------------ 


<form>

  <input value='Retorno múltiple' onclick='numMayor(2, 3);' type='button'>
  </input>
  
  // Espacio reservado para los resultados 	 
  <p id='demoNumMas'> </p>
  <p id='demoNumMas_2'> </p>

</form>

Prueba, número mayor:


Subir

Funciones predefinidas


Funciones predefinidas en JavaScript: JavaScript incluye una serie de funciones ya definidas que podemos utilizar con cualquier variable, valor directo u objeto.


Subir