JavaScript Manual de Referencia

Funciones básicas

*/Problema 1 Desarrollar un programa que permita ingresar un vector de 8 elementos, e informe:

El valor acumulado de todos los elementos del vector.

El valor acumulado de los elementos del vector que sean mayores a 36.

Cantidad de valores mayores a 50.*/

Analizar!

<html>

<head>

</head>

<body>

function cargar(elementos){

for (var i=0; i<elementos.length; i++) {

var x = prompt ('Ingrese el elemento: ','');

elementos[i]=parseInt(x);

}

function sumar(elementos){

for (var i=0; i<elementos.length; i++) {

var suma=0;

suma+=elementos[i];

}

document.write("Suma total de los elementos: " + suma);

document.write('<br>');

}

function sumaMayor36(elementos){

for (var i=0; i<elementos.length; i++) {

var mayor = 0;

if (elementos[i]>36) {

mayor+=elementos[i];

}

document.write("Suma mayores a 36: " + mayor);

document.write('<br>');

}

function sumaMayor50(elementos){

for (var i=0; i<elementos.length; i++) {

var masgde = 0;

if (elementos[i]>50) {

masgde+=elementos[i];

}

document.write("Suma mayores a 50: " + masgde);

document.write('<br>');

}

var elementos = new Array(8);

cargar(elementos);

sumar(elementos);

sumaMayor36(elementos);

sumaMayor50(elementos);

</script>

</body>

</html>

*/Problema 2 Realizar un programa que pida la carga de dos vectores numéricos. Obtener la suma de los dos vectores, dicho resultado guardarlo en un tercer vector del mismo tamaño. Sumar componente a componente.

El tamaño del vector es a elección.*/

<html>

<head>

</head>

<body>

function cargar(x,y) {

for (var i=0 ; i<x.length ; i++) {

var n1 = prompt ('ingrese primer número: ','');

x[i] = parseInt (n1);

}

for (var i=0 ; i<y.length ; i++) {

var n2 = prompt ('ingrese segundo número: ','');

y[i] = parseInt (n2);

}

function sumar(x,y, suma) {

for (var i=0 ; i<suma.length ; i++) {

suma[i]= x[i]+y[i];

document.write(suma[i] + ' ');

}

var x = new Array(5);

var y = new Array(5);

var suma = new Array(5);

cargar(x,y);

sumar(x,y, suma);

</script>

</body>

</html>

Clase Math volver al indice

*/ Problema 1 Confeccionar un programa que solicite el ingreso de un número y nos muestre dicho valor elevado a la tercera potencia.*/

<html>

<head>

</head>

<body>

var x = prompt('Ingrese un número','');

x = parseInt (x);

var pot = Math.pow(x,3);

document.write('Su número elevado a la tercera potencia es: ' + pot);

</script>

</body>

</html>

*/ Problema 2 Ingresar por teclado un valor y luego mostrar la raíz cuadrada de dicho valor.*/

<html>

<head>

</head>

<body>

var x = prompt('Ingrese un número','');

x = parseInt (x);

var raiz = Math.sqrt(x);

document.write('La raiz cuadrada de su número es: ' + raiz);

</script>

</body>

</html>

Clase String volver al indice

Funciones básicas

*/ Problema 1 Ingresar una serie de nombres por teclado hasta que se cargue la palabra Fin, y mostrar cuántos nombres se ingresaron.*/

<html>

<head>

</head>

<body>

var i=0;

do {

var nom = prompt('Ingrese nombre: ','');

i++;

} while (nom != "Fin");

//para descontar la palabra Fin

i--;

document.write('Se ingresaron ' +i+' nombres');

</script>

</body>

</html>

*/ Problema 2 Igual al anterior, pero que termine la aplicación sin contemplar mayúsculas ni minúsculas. Es decir que para salir se pueda teclear fin, Fin o FIN.*/

<html>

<head>

</head>

<body>

var i=0;

do {

var nom = prompt('Ingrese nombre: ','');

var nom2 = nom.toLowerCase();

i++;

} while (nom2 != "fin");

//para descontar la palabra Fin

i--;

document.write('Se ingresaron ' +i+' nombres');

</script>

</body>

</html>

*/ Problema 3 Realizar la búsqueda de un string clave en un string fuente. Se deberá ingresar una frase o texto (fuente) y luego la clave a buscar. En caso de encontrarla, imprimir la posición, de lo contrario una leyenda.*/

<html>

<head>

</head>

<body>

var fuente = prompt('Ingrese una frase: ','');

var palabra = prompt('Ingrese una palabra','');

if (fuente.indexOf(palabra)!=-1)

document.write('Se ingresó la palabra '+ palabra + ' en el texto');

else

document.write('No se ingresó la palabra '+ palabra + ' en el texto');

</script>

</body>

</html>

*/ Problema 4 Ingresar una palabra o texto por teclado y determinar si es o no una palabra palíndromo. (Palabra que se lee de igual manera de adelante hacia atrás, que de atrás hacia delante)*/

<html>

<head>

</head>

<body>

var texto = prompt('Ingrese una oración o palabra:','');

var letras = texto.split("");

if (letras == letras.reverse()) {

document.write("Esta palabra o frase es palíndromo");

}else {

document.write("Esta palabra o frase NO es palíndromo");

}

document.write('<br>');

document.write("De adelante hacia atrás" + texto);

document.write('<br>');

letras.reverse();

for (var i=0; i<letras.length; i++) {

document.write("De atrás hacia adelante" + letras[i]);

}

</script>

</body>

</html>

*/ Problema 5 Realizar un programa que permita cargar una dirección de mail e implementar una función que verifique si el String tiene cargado el carácter @.El alert se lo agregué después, puede servir en algún formulario*/

<html>

<head>

</head>

<body>

var mail = prompt('Ingrese su dirección de email:','');

function verificar(){

var verif;

if (mail.indexOf('@')!=-1)

{ verif = true; }

else

{ verif = false;

alert('el mail ingresado es incorrecto')

}

document.write(verif);

}

document.write(mail);

document.write('<br>');

verificar(mail);

</script>

</body>

</html>

*/ Problema 6 Cargar un String por teclado e implementar las siguientes funciones:

a) Imprimir la primera mitad de los caracteres de la cadena.

b) Imprimir el último carácter.

c) Imprimirlo en forma inversa.

d) Imprimir cada carácter del String separado con un guión.

e) Imprimir la cantidad de vocales almacenadas.*/

<html>

<head>

</head>

<body>

var texto = prompt('Ingrese una oración o palabra:','');

//imprimir la mitad de los caracteres de la cadena

var mitad = texto.length/2;

mitad = parseInt(mitad);

var medio = texto.substring(mitad);

document.write(medio);

document.write('<br>');

//imprimir el último carácter

var ultimo = texto.length-1;

ultimo = parseInt(ultimo);

var caracterFinal = texto.substring(ultimo);

document.write(caracterFinal);

document.write('<br>');

//imprimirlo en forma inversa

var letras = texto.split("");

letras.reverse();

for (var i=0; i<letras.length; i++) {

document.write(letras[i]);

}

document.write('<br>');

//imprimir cada carácter del String separado con un guión

var letras = texto.split("");

for (var i=0; i<letras.length; i++) {

document.write(letras[i] + "-");

}

document.write('<br>');

//imprimir la cantidad de vocales almacenadas

var letras = texto.split("");

for (var i=0; i<letras.length; i++) {

if (letras[i]=='a'||letras[i]=='e'||letras[i]=='i'||letras[i]=='o'||letras[i]=='u') {

document.write( letras[i] );

}

*/ Problema 7 Codifique un programa que permita cargar una oración por teclado, luego mostrar cada palabra ingresada en una línea distinta.

Por ejemplo si cargo:
La mañana está fría.
Debe aparecer:
La
mañana
está
fría.*/

<html>

<head>

</head>

<body>

var texto = prompt('Ingrese una oración o palabra:','');

var dividir = texto.split(" ");

for (var i=0; i<dividir.length; i++) {

document.write( dividir[i] + "<br>" );

}

</script>

</body>

</html>

Formularios y eventos volver al indice

form <form> ... </form>
text <input type="text">
password <input type="password">
textarea <textarea> ... </textarea>
button <input type="button">
submit <input type="submit">
reset <input type="reset">
checkbox <input type="checkbox">
radio <input type="radio">
select <select> ... </select>
hidden <input type="hidden">

Ejemplo onClick con form buttons (ref. to htmlgoodies)

<FORM>

<INPUT TYPE="button" VALUE="BACK"

onClick="history.go(-1)">

<INPUT TYPE="button" VALUE="FORWARD"

onClick="history.go(1)">

</FORM>v

explicación

Value="---" denotes what will be written on the button.
onClick= denotes that the event will activate when clicked on.
"history.go(##)" is JavaScript that denotes movement through your history file. That's the file that keeps a record of everywhere you've been during that particular surfing jaunt: (1) sends it forward one step, (-1) sends you backward one step.
If you'd like, you could raise or lower those numbers. Setting it to (-4) will take your user back four pages if he or she has that many page in their history file. If not, then the button will not function.

*/ Problema Crear un formulario con tres botones con las leyendas “1”, “2”, “3”. Mostrar un mensaje indicando qué botón se presionó. Lo de los colores fue cosa mía*/

<html>

<head>

</head>

<body>

function button1()

{ document.bgColor='gray';

alert('Ud ha presionado el botón 1');

}

function button2()

{ document.bgColor='blue';

alert('Ud ha presionado el botón 2');

}

function button3()

{ document.bgColor='red';

alert('Ud ha presionado el botón 3');

}

</script>

<form>

</form>

</body>

</html>

Controles FORM, BUTTON y TEXT volver al indice

*/ Problema 1 Crear un programa que permita cargar un entero en un text y al presionar un botón nos muestre dicho valor elevado al cubo (emplear la función alert)*/

<html>

<body>

function cubo() {

var entero = document.getElementById("entero").value;

var cubo = Math.pow(entero,3);

alert ('El valor del número ' + entero + ' elevado al cubo nos da: '+ cubo);

}

</script>

<form>

<p>Ingrese un número entero:</p>

</form>

</body>

</html>

*/ Problema 2 Cargar dos números en objetos de tipo text y al presionar el botón mostrar el mayor*/

<html>

<body>

function calcular(){

var n1 = document.getElementById('primero').value;

n1 = parseInt (n1);

var n2 = document.getElementById('segundo').value;

n2 = parseInt (n2);

if (n1 > n2) {

alert ('El número mayor es... ' + n1)

} else {

alert ('El número mayor es... ' + n2)

}

</script>

<form>

<h1>Ingrese dos número y le diremos cuál de los dos es mayor</h1>

<p>Ingrese un número:</p>

<p>Ingrese otro número:</p>

</form>

</body>

</html>

*/ Problema 3 Cargar un nombre y un apellido en sendos text. Al presionar un botón, concatenarlos y mostrarlos en un tercer text (Tener en cuenta que podemos modificar la propiedad value de un objeto TEXT cuando ocurre un evento)

<html>

<body>

function concatenar(){

var nombre = document.getElementById('nombre').value;

var apellido = document.getElementById('apellido').value;

document.getElementById('resultado').value=(nombre+' '+apellido);

}

</script>

<form>

<h1>Identificación por favor... :</h1>

<p>Ingrese su nombre:</p>

<p>Ingrese su apellido:</p>

</form>

</body>

</html>

Control PASSWORD volver al indice

Variante del tipo TEXT. Sólo muestra asteriscos al ingresar

*/ Problema 1 Disponer dos campos de texto tipo password. Cuando se presione un botón mostrar si las dos claves ingresadas son iguales o no (es muy común solicitar al operador el ingreso de dos veces de su clave para validar si las escribió correctamente, esto se hace cuando se crea una password para el ingreso a un sitio o para el cambio de una existente).

Tener en cuenta que podemos emplear el operador == para ver si dos string son iguales.Lo de los colores fue cosa mIa*/

<html>

<head>

</head>

<body>

function verif() {

var cl1 = document.getElementById('clave').value;

var cl2 = document.getElementById('clave2').value;

if (cl1 == cl2){

document.bgColor='lightblue';

alert ('las dos claves son correctas');

}else {

document.bgColor='red';

alert ('ERROR ERROR ERROR ERROR...');

}

</script>

<form>

Ingrese una clave:

<br>

Ingrese nuevamente la clave:

<br>

</form>

</body>

</html>

Control SELECT volver al indice

Representa una lista dropdown en un formulario HTML

Permite al usuario seleccionar una opción de la lista.

Por cada <select> tag in el formulario HTML, un objeto Select es creado.

Se puede acceder al objeto Select buscando un array de los elementos del form; o usando document.getElementById()

selectObject.options

The options collection returns a collection of all the options in a dropdown list.

Note: There will be one array element for each <option> tag - starting at 0.

Propiedades

length devuelve el numero de option elements in la colección.

selectedIndex (almacena la posición del string seleccionado de la lista, numerando a partir de cero).

Metodos

[index]	An integer that specifies the element to retrieve (starts at 0)
[add(element[,index])]	Adds an option element into the collection at the specified index. If no index is specified, it inserts the option element at the end of the collection
item(index)	Returns the element from the collection with the specified index
namedItem(name)	Returns the element from the collection with the specified name (name or id attribute)
remove(index)	Removes the element with the specified index from the collection

*/ Problema 1 Confeccionar una página que muestre un objeto SELECT con distintos tipos de pizzas (Jamón y Queso, Muzzarella, Morrones). Al seleccionar una, mostrar en un objeto de tipo TEXT el precio de la misma.*/

<html>

<head>

</head>

<body>

function precios() {

var selec = document.getElementById('pizza');

document.getElementById('precio').value = selec.options[selec.selectedIndex].value

}

</script>

<form>

<option>--Pizza--</option>

<option value="$1.5">Jamón y Queso</option>

<option value="$1.7">Muzzarella</option>

<option value="$1.6">Morrones</option>

</select>

<br>

<p>Precio de las pizzas: </p>

</form>

</body>

</html>

*/ Problema 2 Generar un presupuesto de un equipo de computación a partir de tres objetos de tipo SELECT que nos permiten seleccionar:

Procesador (Intel I3 - $400, Intel I5 $600, Intel I7 $800).

Monitor (Samsung 20' - $250, Samsung 22' - $350, Samsung 26' - $550)

Disco Duro(500 Gb - $300, 1 Tb - $440, 3 Tb - $500)

Para cada característica indicamos string a mostrar (Ej. Intel I3) y el valor asociado a dicho string (Ej. 400).

Al presionar un botón "Calcular" mostrar el presupuesto en un objeto de tipo TEXT.*/

<html>

<head>

</head>

<body>

function calcular() {

var precioProcesador = document.getElementById('Procesador');

var procesador = precioProcesador.options[precioProcesador.selectedIndex].value

procesador = parseInt(procesador);

var precioMonitor = document.getElementById('Monitor');

var monitor = precioMonitor.options[precioMonitor.selectedIndex].value

monitor = parseInt(monitor);

var precioDiscoDuro = document.getElementById('Disco Duro');

var discoduro = precioDiscoDuro.options[precioDiscoDuro.selectedIndex].value

discoduro = parseInt(discoduro);

document.getElementById('Presupuesto').value =('$' + (procesador + monitor + discoduro));

}

</script>

<form>

<option value="0">--Procesador--</option>

<option value="400">Intel I3</option>

<option value="600">Intel I5</option>

<option value="800">Intel I7</option>

</select>

<option value="0">--Monitor--</option>

<option value="250">Samsung 20'</option>

<option value="350">Samsung 22'</option>

<option value="550">Samsung 26'</option>

</select>

<option value="0">--Disco Duro--</option>

</select>

<br>

</form>

</body>

</html>

*/ Problema 3 Confeccionar una página que permita seleccionar una pizza y la cantidad de unidades. Luego al presionar un botón calcular el importe a pagar.

Utilizar un objeto de la clase SELECT para la selección de la pizza, pudiendo ser:

Queso: $ 4.

Jamón y queso: $ 6.

Especial: $ 10.

A la cantidad de pizzas cargarla en un objeto de la clase TEXT y en otro objeto de la clase TEXT mostrar el importe total a abonar.onFocus se lo agregué para que quede más prolijo*/

<html>

<head>

</head>

<body>

function calcular(){

var tipo = document.getElementById('pizza');

var precio = tipo.options[tipo.selectedIndex].value;

precio = parseInt(precio);

var cantidad = document.getElementById('cantidad');

var num = cantidad.value;

num = parseInt(num);

document.getElementById('importe').value = precio*num;

}

</script>

<form>

<option value="0">--Pizza--</option>

<option value="4">Queso</option>

<option value="6">Jamón y queso</option>

<option value="10">Especial</option>

</select>

<br>

</form>

</body>

</html>

*/ Problema 4 Confeccionar una página que permita tomar un examen múltiple choice. Se debe mostrar una pregunta y seguidamente un objeto SELECT con las respuestas posibles. Al presionar un botón mostrar la cantidad de respuestas correctas e incorrectas (Disponer 4 preguntas y sus respectivos controles SELECT)*/

<html>

<head>

</head>

<body>

function resultados() {

var corr=0;

var incorr=0;

var suma = document.getElementById('suma');

var respSuma = suma.options[suma.selectedIndex].value

if (respSuma == "true") {corr+=1;}

else {incorr+=1;}

var split = document.getElementById('split');

var respSplit = split.options[split.selectedIndex].value

if (respSplit == "true") {corr+=1;}

else {incorr+=1;}

var nest = document.getElementById('nest');

var respNest = nest.options[nest.selectedIndex].value

if (respNest == "true") {corr+=1;}

else {incorr+=1;}

var script= document.getElementById('script');

var respScript = script.options[script.selectedIndex].value

if (respScript == "true") {corr+=1;}

else {incorr+=1;}

document.getElementById('correctas').value = corr;

document.getElementById('incorrectas').value = incorr;

}

</script>

<form>

<h1>Cuánto sabés de javaScript?</h1>

<p>document.write(x);</p>

<option> resultado? </option>

<option value="false">Error output</option>

</select>

<p>var jig = "JavaScript is good";</p>

<p>var result = jig.split(" ");</p>

<p>document.write(result);</p>

<option> resultado? </option>

<option value="false">JavaScript</option>

<option value="true">JavaScript,is,good</option>

<option value="false">JavaScriptisgood</option>

</select>

<p>Is it possible to nest functions in JavaScript?</p>

<option> resultado? </option>

<option value="false">false</option>

</select>

<p>document.write(navigator.appCodeName);</p>

<option> resultado? </option>

<option value="true">get code name of the browser of a visitor</option>

<option value="false">set code name of the browser of a visitor</option>

<option value="false">None of the above</option>

</select>

<br>

<p>Respuestas correctas <input type="text" id="correctas"</p>

<p>Respuestas incorrectas <input type="text" id="incorrectas"</p>

</form>

</body>

</html>

Control CHECKBOX volver al indice

Puede tener dos estados (seleccionado o no)

//seleccionado

document.getElementById(‘’).checked

/* Problema Confeccionar una pagina que muestre tres checkbox que permitan seleccionar los deportes que practica el usuario (Fútbol, Básquet, Tenis) Mostrar al presionar un botón los deportes que ha elegido*/

<html>

<head>

</head>

<body>

function mostrar(){

var a="";

var b="";

var c="";

if (document.getElementById('futbol').checked) {

a = " futbol ";}

if (document.getElementById('basquet').checked) {

b = " basquetbol ";}

if (document.getElementById('tenis').checked) {

c = " tenis ";}

document.getElementById('respuesta').value = a + b + c;

}

</script>

<form>

<h1>A qué deporte juegas?</h1>

a <input type="checkbox" id="futbol">Fútbol

<br>

b <input type="checkbox" id="basquet">Basquetbol

<br>

c <input type="checkbox" id="tenis">Tenis

<br>

<input type="button" value="mostrar" onClick="mostrar()"

<br>

</form>

</body>

</html>

Control RADIO volver al indice

*/ Problema Confeccionar una página que muestre dos objetos de la clase RADIO solicitando que seleccione si es mayor de 18 años o no. Al presionar el botón mostrar un alert indicando si puede ingresar al sitio o no*/

<html>

<head>

</head>

<body>

function procesar(){

if (document.getElementById('radio1').checked){

alert ("bienvenido al nuevo tutorial para aprender a manejar");

}

if (document.getElementById('radio2').checked){

alert ("disculpá, necesitás ser mayor de edad");

}

</script>

<h1>Querés aprender a manejar?</h1>

<form>

<input type="radio" id="radio1" name="manejo">Sí, ya soy mayor de 18.

<br>

<input type="radio" id="radio2" name="manejo">No puedo, todavía no tengo 18.

<br>

</form>

</body>

</html>

Control TEXTAREA volver al indice

En el ejercicio utilizo ‘\n’ como separador de líneas, para que quede más prolijo. Equivale al <br> de HTML.

*/Problema Confeccionar una página de visitas a un sitio, solicitar ingresar el nombre de una persona, su mail y los comentarios (TEXTAREA). Mostrar luego llamando a la función alert los datos ingresados.*/

<html>

<head>

</head>

<body>

function mostrar(){

var nombre = document.getElementById('nombre').value;

var mail = document.getElementById('mail').value;

var comment = document.getElementById('comentario').value;

alert (nombre +'\n'+'\n'+ mail +'\n'+'\n'+ comment);

}

</script>

<h1>Bienvenido a RESOLVIENDO PROBLEMAS JAVASCRIPT</h1>

<h4>Por favor, ingrese sus datos y cuéntenos su problema</h4>

<form>

Ingrese su nombre: <input type="text" id="nombre">

<br>

Ingrese su email: <input type="text" id="mail">

<br>

Comentarios:

<br>

<br>

</form>

</body>

</html>

Eventos onFocus y onBlur volver al indice

*/ Problema Solicitar que se ingrese el nombre y la clave de un usuario. Mostrar una ventana de alerta si en la clave se ingresan menos de 7 caracteres o más de 20.*/

<html>

<body>

function liberar(texto)

{

texto.value='';

}

function chequear(texto)

{

if (texto.value.length<7 || texto.value.length>20)

alert('Debe ingresar más de 7 dígitos y menos de 20');

}

function mensaje()

{

alert('has ingresado los valores correctamente, puedes continuar aprendiendo');

}

</script>

<form>

Ingrese su nombre:

Ingrese su mail:

<br>

</form>

</body>

</html>

Eventos onMouseOver y onMouseOut volver al indice

ejemplo:

<a href="http://web.cruzjurado.com" onMouseOver="alert('Hello there, you’re going to...')">webpage</a>

ejemplo2:

<a href="http://web.cruzjurado.com" onMouseOver="parent.location="/cd"">webpage</a>

hidden link:

<a onMouseOver="parent.location='http://web.cruzjurado.com/cd'">hidden link</a>

document.bgColor:

<a href='' onMouseOver="document.bgColor='lightblue'" onMouseOut="document.bgColor=''">document.bgColor</a>

/*Dos formas de resolver lo mismo. La primera es mi versión.*/

<html>

<body>

<tr>

<td onMouseOver="bgColor='red'" onMouseOut="bgColor='white'"><a href="http://www.gmail.com"> gmail</a> </td>

<td onMouseOver="bgColor='green'" onMouseOut="bgColor='white'"><a href="http://www.hotmail.com"> hotmail</a> </td>

<td onMouseOver="bgColor='blue'" onMouseOut="bgColor='white'"><a href="http://www.yahoo.com"> yahoo</a> </td>

</tr>

</table>

</body>

</html>

/*la segunda.. es más larga pero más completa. Se pueden hacer más cambios ya que se invoca una función*/

<html>

<body>

function pintar(objeto,col)

{

objeto.bgColor=col;

}

</script>

<tr>

<a href="http://www.hotmail.com">Hotmail</a>

</td>

<a href="http://www.yahoo.com">Yahoo</a>

</td>

<a href="http://www.gmail.com">GMail</a>

</td>

</tr>

</table>

</body>

</html>

Eventos onLoad volver al indice

/* Problema Confeccionar una página que muestre un mensaje con la función alert inmediatamente después que se cargue.*/

<html>

<head>

</head>

function alertar()

{

alert ('Bienvenido a esta página, navegue con cuidado de no mojarse');

}

</script>

<h1>Pagina de botes</h1>

<p>compre su bote preferido y le regalamos otro</>

</body>

</html>

El objeto window volver al indice

Ej:
valor=window.prompt("Ingrese valor","");
o
valor=prompt("Ingrese valor",""); //sin el window. Funciona igual, sólo que más cortito de escribir...

métodos:

alert muestra diálogo de alerta con un mensaje

prompt muestra diálogo para la entrada de un valor de tipo string

confirm muestra un diálogo de confirmación con botones Confirmar y Cancelar

open abre una ventana del navegador

close cierra ...

[variable (var) = ] [window.] open ( URL, nombre, propiedades);

optativo optativo opcional

algunas de las propiedades:

/* Problema Confeccionar una página que permita abrir otra ventana cuando se presiona un botón. Dicha ventana debe tener como ancho 600 pixeles y alto 300 pixeles.*/

<html>

<body>

function nuevaVentana()

{

var ventana = open('','',"width=600, height=300");

ventana.document.write('Usted acaba de abrir una ventana, pero tenía que abrir la otra...');

}

</script>

El botón le permitirá abrir otra ventana a un nuevo mundo

<br>

<form>

<br>

</form>

</body>

</html>

Propiedad location del objeto window volver al indice

*/ Problema Confeccionar una página que tenga un hipervínculo. Cuando se presione dicho hipervínculo generar un valor aleatorio entre 0 y 2. Si se genera el 0 llamar al webmail de hotmail, si se genera un 1 llamar a gmail en caso de generarse un 2 llamar a yahoo.

Para generar un valor aleatorio utilizar la función random del objeto Math. Lo de la confirmación se lo agregué dp.

var num;
num=Math.random()*3; //se guarda en num un valor comprendido entre 0.00001 y 2.99999
num=parseInt(num); //guardamos solo la parte entera de la variable num
if (num==0)
window.location='http://www.hotmail.com';
.....*/

<html>

<head>

</head>

<body>

function alea()

{

var num = Math.random()*3;

num = parseInt(num);

if (num==0)

{ if (window.confirm('Desea salir del sitio e ingresar a hotmail?'))

{

window.location='http://www.hotmail.com';

}

else

{

window.alert('No hay problema');

}

if (num==1)

{ if (window.confirm('Desea salir del sitio e ingresar a gmail?'))

{

window.location='http://www.gmail.com';

}

else

{

window.alert('No hay problema');

}

if (num==2)

{ if (window.confirm('Desea salir del sitio e ingresar a yahoo?'))

{

window.location='http://www.yahoo.com';

}

else

{

window.alert('No hay problema');

}

</script>

<h1>Ruleta de mails</h1>

Ud. generará un valor aleatorio entre 0 y 2. <br>

Si genera el 0 será redireccionado a hotmail <br>

Si genera el 1 será redireccionado a gmail <br>

Si genera el 2 será redireccionado a yahoo <br>

<br>

<a href="javascript:alea()">Generar</a>

</body>

</html>

Propiedad History del objeto window volver al indice

Propiedad Screen del objeto window volver al indice

Resumen: nos da info del monitor del usuario (donde se está ejecutando el navegador)

Las ppales propiedades son:

availHeight : El alto de la pantalla en pixeles disponible para el navegador.
availWidth : El ancho de la pantalla en pixeles disponible para el navegador.
colorDepth : Representa el número de bits usados para representar los colores.
height : El alto de la pantalla en pixeles.
width : El ancho de la pantalla en pixeles.

/*Problema Confeccionar un programa que al presionar un botón aparezca una ventana que ocupe todo el ancho del monitor y la mitad de su altura.*/

<html>

<head>

</head>

<body>

function newV()

{

var x=screen.width;

var y=screen.height/2;

open(",","width=x, height=y");

}

</script>

<input type="button" value="Abrir otra ventana" onClick="newV()";

</body>

</html>

algo no está andando como debiera. revisar esto...

Propiedad Navigator del objeto window volver al indice

/* Problema Una vez que se cargue la página mostrar un alert indicando si el navegador tiene activas las cookies.*/

<html>

<head>

</head>

<body>

alert("cookies enabled: " + navigator.cookieEnabled);

</script>

</body>

</html>

Archivo JavaScript externo (*.js) volver al indice

Programación orientada a objetos volver al indice

/* Problema Confeccionar una clase llamada suma, que contenga dos atributos (valor1, valor2) y tres métodos: cargarvalor1, cargarvalor2 y retornarresultado. Implementar la clase suma.

La definición de un objeto de la clase que deben plantear es:

var s=new suma();
s.primervalor(10);
s.segundovalor(20);
document.write('La suma de los dos valores es:'+s.retornarresultado()); */

<html>

<head>

</head>

<body>

var salto = "<br>"

function Suma (valor1, valor2)

{

this.valor1=valor1;

this.valor2=valor2;

this.cargarValor1=cargarValor1;

this.cargarValor2=cargarValor2;

this.retornarResultado=retornarResultado;

}

function cargarValor1(valor1)

{

this.valor1=valor1;

}

function cargarValor2(valor2)

{

this.valor2=valor2;

}

function retornarResultado()

{

return this.valor1 + this.valor2;

}

var s=new Suma(4,3);

document.write('La suma de los dos valores es: '+ s.retornarResultado() + salto);

s.cargarValor1(10);

s.cargarValor2(20);

document.write('La suma de los dos nuevos valores es: '+s.retornarResultado());

</script>

</body>

</html>

Definición de varias clases volver al indice

/* Problema Plantear una clase persona (que permita cargar por teclado su nombre y edad).

Por otro lado crear una clase empresa que tenga como atributos el nombre y la edad tope para que una persona pueda ingresar como trabajador en la misma.

Confeccionar un pequeño programa en JavaScript que defina 3 objetos de la clase persona y 1 de la clase empresa. Mostrar cuántas de esas personas están inhabilidadas para ingresar como trabajadores de acuerdo a la edad tope. */

function Empresa(nombre_empresa, edad_tope)

{

this.nombre = nombre_empresa;

this.edad_tope = edad_tope;

}

function verificar(x, y){

if (x > y)

return true;

else

return false;

}

var persona_1 = new Persona();

var persona_2 = new Persona();

var persona_3 = new Persona();

var empresa_1 = new Empresa("Arcor", 50);

if (verificar(persona_1.edad, empresa_1.edad_tope))

{

document.write(persona_1.nombre + " no está habilitado para trabajar en " + empresa_1.nombre + "<br>");

}else

{

document.write(persona_1.nombre + " está habilitado para trabajar en " + empresa_1.nombre + "<br>");

}

if (verificar(persona_2.edad, empresa_1.edad_tope))

{

document.write(persona_2.nombre + " no está habilitado para trabajar en " + empresa_1.nombre + "<br>");

}else

{

document.write(persona_2.nombre + " está habilitado para trabajar en " + empresa_1.nombre + "<br>");

}

if (verificar(persona_3.edad, empresa_1.edad_tope))

{

document.write(persona_3.nombre + " no está habilitado para trabajar en " + empresa_1.nombre + "<br>");

}else

{

document.write(persona_3.nombre + " está habilitado para trabajar en " + empresa_1.nombre + "<br>");

}

</script>

</body>

</html>

Esta es una forma más elegante(y más corta) de resolver el mismo problema

<html>

<head>

</head>

<body>

function Persona()

{

this.nombre = prompt("Ingrese su nombre: ", "");

this.edad = prompt("Ingrese su edad: ", "");

}

function Empresa(nombre_empresa, edad_tope)

{

this.nombre = nombre_empresa;

this.edad_tope = edad_tope;

}

function verificar(Persona, Empresa){

if (Persona.edad > Empresa.edad_tope)

{

document.write(Persona.nombre + " no está habilitado para trabajar en " + Empresa.nombre + "<br>");

}else

{

document.write(Persona.nombre + " está habilitado para trabajar en " + Empresa.nombre + "<br>");

}

var persona_1 = new Persona();

var persona_2 = new Persona();

var persona_3 = new Persona();

var empresa_1 = new Empresa("Arcor", 50);

verificar(persona_1, empresa_1);

verificar(persona_2, empresa_1);

verificar(persona_3, empresa_1);

</script>

</body>

</html>

Vectores con componentes de tipo objeto volver al indice

/* Problema Confeccionar una clase persona que permita almacenar el nombre y la edad. Luego definir un vector de 4 componentes de tipo persona. Imprimir el nombre de la persona de mayor edad; decir también si hay más de una persona con la edad mayor.*/

<html>

<head>

</head>

<body>

function Persona(nombre, edad)

{

this.nombre = nombre;

this.edad = edad;

this.estaPersona = estaPersona;

}

function estaPersona()

{

document.write("La persona " + this.nombre + " tiene " + this.edad + " años." + "<br>");

}

var equipo = new Array (4);

equipo[0]= new Persona("Coco",34);

equipo[1]= new Persona("Caco", 67);

equipo[2]= new Persona("Quico",41);

equipo[3]= new Persona("Cuco",67);

var mayor = 0;

for (var i = 1 ; i < equipo.length ; i++)

{

if (equipo[i].edad > equipo[mayor].edad)

{

mayor = i;

}

document.write ("Personas de mayor edad: ");

for (var i = 0 ; i < equipo.length ; i++)

{

if ( equipo[i].edad == equipo[mayor].edad)

{

equipo[i].estaPersona();

}

</script>

</body>

</html>

Creación de objetos literales volver al indice

/* Problema Crear un objeto que represente los datos de un participante de un juego. Definir las propiedades

nombre
puntos

y las funciones:

imprimir (mostrar el nombre de jugador y los puntos actuales)
aumentarpuntos (permite incrementar la cantidad de puntos actuales del jugador)
verificarsigano (mostrar un mensaje si los puntos superan a 1000). */

<html>

<head>

</head>

<body>

var participante1 = {

nombre : "Coco",

puntos : 0,

imprimir : function ()

{

document.write("El nombre del jugador es: " + this.nombre + "<br>");

aumentarpuntos: function (puntos_nuevos)

{

this.puntos = this.puntos+puntos_nuevos;

verificarsigano : function()

{

if (this.puntos > 1000)

{

document.write ("El jugador " + this.nombre + " ha ganado!!!");

}

};

participante1.imprimir();

participante1.aumentarpuntos(1001);

participante1.verificarsigano();

</script>

</body>

</html>

Array: diferentes formas de crearlos volver al indice

/* Problema Confeccionar un programa que defina dos array, en uno almacenar los días de la semana y en otro los nombres de los meses. Emplear dos sintaxis diferentes para crear e inicializar sus componentes.*/

<html>

<head>

</head>

<body>

var diasSemana = new Array (7);

diasSemana[0] = "Domingo";

diasSemana[1] = "Lunes";

diasSemana[2] = "Martes";

diasSemana[3] = "Miércoles";

diasSemana[4] = "Jueves";

diasSemana[5] = "Viernes";

diasSemana[6] = "Sábado";

var meses = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];

var salto = "<br>";

document.write("Los días de la semana son: " + salto);

for (var i=0;i<diasSemana.length;i++)

{

document.write(diasSemana[i] + "<br>");

}

document.write(salto);

document.write("Los meses del año son: " + salto);

for (var i=0;i<meses.length;i++)

{

document.write(meses[i] + "<br>");

}

</script>

</body>

</html>

Array densos volver al indice

/* Problema Crear un vector con 10 valores aleatorios comprendidos entre 1 y 500. Luego crear otros dos vectores y copiar los elementos menores a 250 en el segundo vector y los mayores o iguales a 250 en el tercer vector. Imprimir los tamaños del segundo y tercer vector. Imprimir los tres vectores.*/

<html>

<head>

</head>

<body>

var vector1 = new Array();

for (var i=0;i<10;i++)

{

var num = parseInt(Math.random()*500)+1;

vector1[i]=num;

}

var vector2 = new Array();

var vector3 = new Array();

var f=0;

var g=0;

for(var i=0;i<10;i++)

{

if (vector1[i] < 250)

{

vector2[f]=vector1[i];

f++;

}else

{

vector3[g]=vector1[i];

g++;

}

document.write( "Tamaño del segundo vector: " + vector2.length + "<br>");

document.write( "Tamaño del tercer vector: " + vector3.length + "<br>");

document.write("Vector 1: " + vector1 + "<br>");

document.write("Vector 2: " + vector2 + "<br>");

document.write("Vector 3: " + vector3 + "<br>");

</script>

</body>

</html>

Array: no densos o dispersos volver al indice

/* Problema Crear un vector disperso que representen premios de una rifa. Las posiciones indican los números que tienen premio. Almacenar en dichas posiciones los premios. Genera 10 premios con los montos 1000,2000,3000 etc.

La cantidad de números de la rifa son 1000.

Generar valores aleatorios para los números con premio.

Imprimir Los números con premio y los montos de los mismos.*/

<html>

<head>

</head>

<body>

var numPremiados = [];

for(var i=0;i<10;i++)

{

var num = parseInt(Math.random()*1000)+1;

numPremiados[i]=num;

}

var premio=[1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 9000, 10000];

for(var f=0;f<numPremiados.length;f++)

{

if (numPremiados[f] !== undefined)

{

document.write(numPremiados[f] + ": " + premio[f] + '<br>');

}

</script>

</body>

</html>

Array: métodos push and pop volver al indice

Definición y ejemplos

/*Crear un vector con 5 valores aleatorios comprendidos entre 1 y 1000. Luego extraer los dos últimos elementos sumarlos y mostrarlos. Imprimir también el tamaño final del vector.*/

<html>

<head>

</head>

<body>

var vec = [];

for(var i=0;i<5;i++)

{

var num = parseInt(Math.random()*1000)+1;

vec[i] = num;

}

var a = vec.pop();

parseInt(a);

var b = vec.pop();

parseInt(b);

document.write("Ultimo número: " + a + "<br>");

document.write("Penúltimo número: " + b + "<br>");

document.write("Suma: " + (a + b) + "<br>");

document.write("Tamaño final del vector: " + vec.length);

</script>

</body>

</html>

otra forma de resolverlo…

<html>

<head>

</head>

<body>

var vec=[];

var f;

for(f=0;f<5;f++)

{

var nro=1+(Math.random()*1000);

vec.push(parseInt(nro));

}

for(f=0;f<vec.length;f++)

{

document.write(vec[f]+'<br>');

}

var sumaultimos=vec.pop()+vec.pop();

document.write('La suma de las dos últimas componentes es:'+sumaultimos+'<br>');

document.write('Tamaño final del vector'+vec.length+'<br>');

document.write('Elementos restantes del vector<br>');

for(f=0;f<vec.length;f++)

{

document.write(vec[f]+'<br>');

}

</script>

</body>

</html>

Array: métodos unshift and shift volver al indice

unshift: agrega un elemento al ppio

shift: lo saca.

/* Problema Ingresar valores por teclado. Los valores menores a 100 ingresarlos al principio del vector y los mayores o iguales a 100 ingresarlos al final. Se finaliza la carga de datos al ingresar el cero. Cuando sale del do/while extraer el último valor ingresado que es el cero del vector. Imprimir el vector en la página*/

<html>

<head>

</head>

<body>

var vec=[];

do{

var nro = prompt("Ingrese un número (para finalizar 0): ", "");

nro = parseInt(nro);

if(nro < 100)

{

vec.unshift(nro);

}

else

{

vec.push(nro);

}

}while (nro !=0);

vec.shift();

document.write("El vector resultante es: " + vec);

</script>

</body>

</html>

Array: instrucción delete volver al indice

delete nombredelvector[posicion];

delete vector[3];

Con el comando anterior estamos eliminando la componente de la posición 3 del vector. Cuando se elimina una componente no se modifica la propiedad length y el vector se convierte en no denso. Si luego tratamos de acceder a dicha posición el resultado es el valor undefined.

Array: métodos sort y reverse volver al indice

Ordena alfabeticamente si son strings. Ejemplo vector.sort();

Para que ordene números hay que pasarle una función

Ejemplo:

vector.sort(function (a,b){

if (a > b)

return 1;

else

return 0;

});

El 0 queda antes -a la izquierda-, por lo cual se ordena de menor a mayor

si queremos invertirlo usaremos vector.reverse();

/* Problema Cargar los sueldos de un conjunto de empleados. Finalizar la carga al ingresar cero. Mostrar por pantalla los sueldos ordenados de mayor a menor.*/

<html>

<head>

</head>

<body>

var vec=[];

do{

var num = prompt("Cargue el sueldo: ","");

num = parseInt(num);

vec.push(num);

}

while (num != 0);

vec.pop();

document.write('Vector "sueldos" antes de ordenarlo<br>');

for(f=0;f<vec.length;f++)

{

document.write(vec[f]+'<br>');

}

vec.sort(function(v1,v2) {

if (v1>v2)

return 1;

else

return 0;

});

document.write('Vector "sueldos" después de ordenarlo de menor a mayor<br>');

for(f=0;f<vec.length;f++)

{

document.write(vec[f]+'<br>');

}

document.write('Vector "sueldos" después de ordenarlo de mayor a menor<br>');

vec.reverse();

for(f=0;f<vec.length;f++)

{

document.write(vec[f]+'<br>');

}

</script>

</body>

</html>

Array: método splice volver al indice

para borrar el primer parámetro es desde donde borramos y el segundo es cuántos parámetros borramos.

vector.splice(3,4); va a borrar desde la posición 3 -contando desde 0- 4 elementos.

si queremos guardar el vector que borramos...

var vector2 = vector.splice(3,4);

si pasamos el primer parámetro negativo, cuenta desde el final del vector

vector.splice(-3,2); borrará de los 3 últimos elementos del vector los primeros 2.

el vector [1,2,3,4,5,6,7,8,9] quedará [1,2,3,4,5,6,9]

para insertar usamos mín 3 parámetros y el segundo es 0 -porque no queremos borrar ningún elemento-

vector.splice(3,0,40,’a’,4,”ultimo”); ingresa desde la posición 3-contando desde 0-, sin borrar ninguno, los valores 40, a… etc.

el vector anterior quedará [1,2,3,40,a,4,ultimo,4,5…]

para borrar e insertar funciona igual que para insertar pero el segundo parámetro indicará cuántos elementos queremos borrar.

vector.splice(3,3,’a’,’b’,’c’); desde la posición 3 borrará 3 elementos y agregará otros 3

el vector [1,2,3,4,5,6,7,8,9] quedará [1,2,3,a, b, c,9]

para vector.splice(-4,3,’a’,’b’,’c’); cuenta 4 posiciones desde el final, borra 3 y agrega 3.

/* Problema Crear un vector con una lista de valores. Luego borrar las componentes donde hay un 2 y al mismo tiempo insertar dos elementos con el valor 1.*/

<html>

<head>

</head>

<body>

var vector = [3,6,4,2,6,3,9,5,2];

document.write("Vector original: "+vector+"<br>");

for(var i=0; i < vector.length; i++)

{

if (vector[i]=="2")

{

vector.splice(i,1);

}

document.write("Vector sin los 2: "+vector+"<br>");

vector.splice(1,0,1,1);

document.write("Vector final con los 1: "+vector+"<br>");

</script>

</body>

</html>

Array: método slice volver al indice

/* Problema Crear un vector de 10 elementos con valores aleatorios comprendidos entre 0 y 1000. Buscar el menor y luego generar otro vector a partir de dicha posición hasta el final.*/

<html>

<head>

</head>

<body>

var vector = [];

var i;

for (i=0;i<10;i++)

{

vector[i]= parseInt(Math.random()*1001);

}

document.write("Vector de 10 elementos entre 0 y 1000:<br>");

for (i=0;i<10;i++)

{

document.write(vector[i]+"<br>");

}

var menor = vector[0];

pos=0;

for (i=1;i<vector.length;i++)

{

if (vector[i]<menor)

{

menor=vector[i];

pos=i;

}

document.write("El elemento menor del vector es: "+menor+"<br>");

var vector2 = vector.slice(pos);

document.write("El nuevo vector es:<br>");

for (i=0;i<vector2.length;i++)

document.write(vector2[i]+"<br>");

</script>

</body>

</html>

Array: método join volver al indice

/* Problema Crear un vector con los datos de 5 personas. Luego imprimir por pantalla uno abajo de otro utilizando el método join para generar un string y agregarle entre elementos la marca html <br>.*/

<html>

<head>

</head>

<body>

var personas = ['Juan', 'Alfredo', 'Adolfo', 'Rodrigo', 'Cora'];

var mostrar = personas.join('<br>');

document.write(mostrar);

</script>

</body>

</html>

Array: método concat volver al indice

Array: método tostring volver al indice

/* Problema Crear un vector de 10 elementos. Inicializar los valores del vector cuando se crea. Inicializar dos variables que resulten de llamar primero al método toString() y la segunda variable inicializarla llamando al método join() sin parámetros. Mostrar un mensaje si el resultado de la ejecución de los dos métodos retorna el mismo valor (empleando un if para comparar los string)

<html>

<head>

</head>

<body>

var vector = [1,2,3,4,5,6,7,8,9,10];

var cadena = vector.toString();

document.write(cadena+"<br>");

var juntando = vector.join();

document.write(juntando+"<br>");

if (cadena == juntando)

document.write("Los dos métodos retornan el mismo valor");

</script>

</body>

</html>

Array: distintas formas de recorrerlo volver al indice

for(var f=0;f<vec.length;f++) = for(var f in vec)

Funciones: objeto arguments volver al indice

Confeccionar una función que reciba un conjunto de string y genere dentro de la página una lista ordenada (<ol>). La función debe recibir en el primer parámetro el id de un div.

<html>

<head>

window.onload=iniciar;

function iniciar()

{

generarLista('lista1','uno', 'dos', 'tres', 'cuatro', 'cinco');

}

function generarLista()

{

var s='<ol>';

for(var i=1;i<arguments.length;i++)

{

s=s+'<li>'+arguments[i]+'</li>';

}

s=s+'</ol>'

var elem = document.getElementById(arguments[0]);

elem.innerHTML=s;

}

</script>

</head>

<body>

</body>

</html>

/* Problema Confeccionar una función que obtenga y retorne el mayor valor de una lista de enteros que le pasamos como parámetros.*/

<html>

<head>

</head>

<body>

window.onload=iniciar;

function iniciar()

{

mayor(23,67,23,87,4,9);

}

function mayor()

{

var m=arguments[0];

for(var i=1; i<arguments.length;i++)

{

if (arguments[i]>m)

m=arguments[i];

}

document.write(m);

}

</script>

</body>

</html>

Funciones: variables locales y variables globales volver al indice

‘use strict’; o “use strict”; al ppio del script nos obliga a siempre tener que escribir var antes de crear la variable, con lo cual nos evitamos crear variables globales por error dentro de una función.

Funciones: caracteres válidos para su nombre volver al indice

se usa escribir la primer palabra en minúscula y la/s siguiente/s en mayúscula

Funciones anidadas volver al indice

/* Problema Confeccionar una función que reciba un parámetro y defina una variable local. Definir dentro de la función que acabamos de crear una función anidada que contenga un parámetro.

En la función anidada imprimir el parámetro de la función que la contiene, el parámetro que tiene la función anidada y el valor de la variable local de la función principal.*/

<html>

<head>

function principal(x)

{

var z = 10;

function imprimir(y)

{

document.write('param de la f que la contiene: '+ x + "<br>");

document.write("param de la f anidada: "+ z + "<br>");

document.write("valor de la variable local de la f ppal: "+ y + "<br>");

}

imprimir("elefantes");

}

principal("mirando");

</script>

</head>

<body>

</body>

</html>

Funciones: parámetros de tipo función volver al indice

-Podemos asignar una función a una variable:

var f1=function(x,y)

{

codigo

}

Para llamar a la función en la variable > f1(3,5)

-Una función puede recibir como parámetro otra función y llamarla desde dentro de sí misma.

function calcular(x,y,fu)
{
var resu=fu(x,y);
return resu;
}

var s1=calcular(10,5,function (v1,v2) {
return v1+v2;
});

document.write(s1+'<br>');

Eventos volver al indice

Uno de los usos principales de JavaScript es la implementación de algoritmos que reaccionan a eventos que se producen en una página web, eventos que nos informa el navegador y nosotros podemos capturarlos y hacer un algoritmo a nuestra medida.

3 formas de tomar los eventos que pasa el navegador:

Eventos definidos directamente en la marca HTML [Se usó entre 1990 y 2000. Ej: onsubmit=”validar();” la función se llama desde dentro de un formulario. ]

Eventos definidos accediendo a propiedades del objeto [Esta metodología todavía se usa mucho. Ej: al formulario le doy un ID=”formulario1” y lo llamo desde el script (document.getElementById(“formulario1”).onsubmit=...). De esta forma el script puede estar en un archivo externo .js]

Modelo de eventos definido por W3C [Un método para todos los objetos, nos permite registrar eventos. La sintaxis:

addEventListener(‘evento a inicializar’, método a ejecutar, false);

ej: document.getElementById(‘elementID’).addEventListener(“click”, nombre_de_la_función, false);

En el ejemplo anterior:

window.addEventListener(‘load’,inicio, false); == addEventListener(‘load’,inicio, false);

document.getElementById(“formulario1”).addEventListener(‘submit’, validar, false);

El código de la función validar se modifica. Como parámetro se hace referencia a un evento > validar(evt) y llamamos al método preventDefault > evt.preventDefault(); si queremos que no se envíen los datos al servidor.

Este modelo de eventos está siendo aceptado por los browsers modernos. Pero IE8 -y para abajo- no lo implementan…]

Eventos: click y dblclick volver al indice

/* Problema Realizar un programa que muestre en un div el número 2. Cada vez que se hace doble clic sobre el mismo duplicar el valor contenido en el div.*/

<html>

<head>

</head>

<body>

addEventListener('load', inicio, false);

function inicio()

{

document.getElementById('numero').addEventListener('dblclick', duplicar, false);

}

function duplicar()

{

numero.innerHTML = Number(numero.innerHTML)*2;

}

</script>

</body>

</html>

en lugar de document.getElementById(‘numero’) usé numero

Otra opción sería:

<html>

<head>

addEventListener('load',inicio,false);

function inicio()

{

document.getElementById('numero').addEventListener('dblclick',duplicar,false);

}

function duplicar()

{

var valor=document.getElementById('numero').innerHTML;

valor=parseInt(valor);

var resultado=valor*2;

document.getElementById('numero').innerHTML=resultado;

}

</script>

</head>

<body>

</body>

</htm>

Eventos: mousedown y mouseup volver al indice

/* Problema Elaborar un programa que muestre un div de color rojo. Cuando se presione cambiar el color a amarillo y luego de soltar el botón del mouse volver a pintar de rojo.*/

<html>

<head>

</head>

<body>

addEventListener('load', inicio, false);

function inicio()

{

color.addEventListener('mousedown', yellow, false);

color.addEventListener('mouseup', red, false);

}

function yellow()

{

color.style.backgroundColor = "yellow";

}

function red()

{

color.style.backgroundColor = "red";

}

</script>

</body>

</html>

Otra resolución

<html>

<head>

addEventListener('load',inicio,false);

function inicio()

{

document.getElementById('recuadro1').addEventListener('mousedown',presion1,false);

document.getElementById('recuadro1').addEventListener('mouseup',presion2,false);

}

function presion1()

{

document.getElementById('recuadro1').style.backgroundColor='#ffff00';

}

function presion2()

{

document.getElementById('recuadro1').style.backgroundColor='#ff0000';

}

</script>

</head>

<body>

</div>

</body>

</html>

Eventos: mouseover y mouseout volver al indice

/* Problema Shift+Cmd+V*/

<html>

<head>

addEventListener('load',inicio,false);

function inicio()

{

document.getElementById('titulo1').addEventListener('mouseover',cambio,false);

document.getElementById('titulo1').addEventListener('mouseout',fuera,false);

}

function cambio()

{

document.getElementById('titulo1').style.backgroundColor='#ffff00';

document.getElementById('titulo1').style.color='#ff0000';

}

function fuera()

{

document.getElementById('titulo1').style.backgroundColor='#ccc';

document.getElementById('titulo1').style.color='#ff0000';

}

</script>

</head>

<body>

<h1 style="color:#ff0000;background:#ccc" id="titulo1">Este es el título

</h1>

</body>

</html>

Otra resolución

<html>

<head>

addEventListener('load',inicio,false);

function inicio()

{

document.getElementById('titulo').addEventListener('mouseover',entrada,false);

document.getElementById('titulo').addEventListener('mouseout',salida,false);

}

function entrada()

{

document.getElementById('titulo').style.color='#ff0000';

document.getElementById('titulo').style.backgroundColor='#ffff00';

}

function salida()

{

document.getElementById('titulo').style.color='#000000';

document.getElementById('titulo').style.backgroundColor='#ffffff';

}

</script>

<style>

body {

background:#ffffff;

}

</style>

</head>

<body>

<h1 id="titulo">Titulo principal</h1>

</div>

</body>

</html>

Evento: mousemove volver al indice

Concepto(Shift+Cmd+V) volver al indice

Definición y ejemplo

/* Problema Shift+Cmd+V*/

Eventos: keydown, keyup y keypress volver al indice

Evento: change volver al indice

/* Problema Confeccionar un formulario que muestre un checkbox que cuando se tilde active un botón (el checkbox debe mostrar un mensaje que diga : "Confirma los términos y condiciones?")*/

Agregué la opción de que se oculte el botón cuando se desactive el checkbox

<html>

<head>

</head>

<body>

addEventListener('load', inicio, false);

function inicio()

{

document.getElementById('checkbox1').addEventListener('change', activarBoton, false);

}

function activarBoton()

{

if (document.getElementById('checkbox1').checked)

{

document.getElementById('boton1').style.display="block";

}else

{

document.getElementById('boton1').style.display="none";

}

</script>

Confirma los términos y condiciones?:

</br>

</body>

</html>

Eventos: focus y blur volver al indice

El ejemplo se puede simplificar de la siguiente manera...

<html>

<head>

addEventListener('load',inicio,false);

function inicio()

{

document.getElementById('text1').addEventListener('focus',tomarfoco,false);

document.getElementById('text2').addEventListener('focus',tomarfoco,false);

document.getElementById('text1').addEventListener('blur',perderfoco,false);

document.getElementById('text2').addEventListener('blur',perderfoco,false);

}

function tomarfoco()

{

this.style.color='#ff0000';

}

function perderfoco()

{

this.style.color='#000000';

}

</script>

</head>

<body>

<br>

</body>

</html>

Parámetro del método asociado al addEventListener volver al indice

/* Problema Shift+Cmd+V*/

Evento: submit volver al indice

/* Problema Shift+Cmd+V*/

Operadores de igualdad y desigualdad (==, ===, !=, !==) volver al indice

/* Problema Shift+Cmd+V*/

Función isNaN volver al indice

/* Problema Shift+Cmd+V*/

Función isFinite volver al indice

/* Problema Se ingresan por teclado dos números (emplear parseFloat para convertirlos) mostrar un mensaje si alguno de los dos no es un número (isNaN). Luego si son valores numéricos proceder a multiplicarlos y verificar si el resultado es finito (isFinite) para mostrar el resultado.*/

<html>

<head>

</head>

<body>

addEventListener ('load',inicio, false);

function inicio()

{

var num1 = parseFloat (prompt("ingrese un número: ", ""));

var num2 = parseFloat (prompt("ingrese otro número: ", ""));

if (isNaN(num1) || isNaN(num2))

{

document.write("alguno de los dos num ingresados no es un valor numérico");

document.write("<br>");

} else

{

var prod = num1 * num2;

if (isFinite(prod)) {

document.write("El prod tiene un valor finito que es: " + prod);

document.write("<br>");}

else {

document.write("El prod no tiene un valor finito, el resultado es: " + prod);}

}

</script>

</body>

</html>

Funciones setInterval, clearInterval, setTimeout y clearTimeout volver al indice

/* Problema Connfeccionar una página que luego de 10 segundos redireccione a otro sitio empleando para ello la función setTimeout.*/

Lo del contador es agregado mío...

<html>

<head>

</head>

<body>

addEventListener ('load', inicio, false);

var cronom;

function inicio()

{

cronom= setInterval(cuenta,1000);

limite= setTimeout(linkear, 5000);

}

function cuenta()

{

var num=parseInt(document.getElementById('counter').innerHTML);

num--;

document.getElementById('counter').innerHTML=num;

}

function linkear()

{

window.location='http://web.cruzjurado.com';

}

</script>

<style>

#counter {

font-size:50px;

color:red;

padding:20px;

}

</style>

<h1>Esta pagina se redireccionará en: </h1>

</body>

</html>

Operador condicional ?: volver al indice

El operador ternario tiene la siguiente sintaxis:

condición ? instrucción 1 : instrucción 2;

La condición siempre debe generar un resultado de tipo boolean (true/false)

Si la condición se verifica verdadera se ejecuta la instrucción 1, que es la que se encuentra a la izquierda del carácter ":", en cambio si la condición se verifica false se ejecuta la instrucción 2.

/* Problema Ingresar el sueldo bruto de un trabajador. Si supera a 10000 aplicar un descuento del 10%, en caso contrario el descuento es del 5%.*/

<html>

<head>

</head>

<body>

var sueldo = parseInt(prompt("Ingrese sueldo bruto: ", ''));

sueldo>10000 ? sueldo=sueldo-(sueldo*.1) : sueldo=sueldo-(sueldo*.05);

document.write("sueldo con el descuento: " + sueldo);

</script>

</body>

</html>

Expresiones regulares volver al indice

Definición y ejemplo (javascriptya)

Definición y ejemplo (Developer.mozilla.org) más completo, en ingles

Expresiones regulares: (^ principio $ fin) de cadena volver al indice

Expresiones regulares: [] conjunto de caracteres opcionales volver al indice

El signo ^ dentro y fuera de los corchetes tiene distinto significado:

var patron=/[aeiouAEIOUáéíóú]$/; indica palabra que termina con vocal

var patron=/[^aeiouAEIOUáéíóú]$/; indica palabra que NO termina con vocal

var patron=/^[aeiouAEIOUáéíóú]/; indica palabra que empieza con vocal

Expresiones regulares: cuantificadores o repeticiones {x} {x,y} {x,} volver al indice

/* Problema 1 Validar que se ingrese un número de 3 dígitos enteros, el carácter punto y 2 dígitos decimales*/

<html>

<head>

</head>

<body>

var oracion=prompt('Ingrese una oración que contenga 3 enteros seguidos de punto y otros 2 enteros $antes y despues debe haber espacio$','');

var patron=/\s[0-9]{3}.[0-9]{2}\s/;

if (patron.test(oracion))

alert('validacion correcta');

else

alert('No cumple los requisitos');

</script>

</body>

</html>

/* Problema 2 Solicitar el ingreso de la coordenada de un punto. El formato a ingresar por teclado es: (999,999)

Los números pueden tener entre 1 y 3 dígitos.*/

<html>

<head>

</head>

<body>

var coord = prompt('Ingrese su coordinada: ', '');

var patron = /$[0-9]{1,3},[0-9]{1,3}$/;

if (patron.test(coord))

document.write("El codigo ingresado es correcto");

else

document.write("codigo incorrecto");

</script>

</body>

</html>

Exp reg: metacaracteres de cuantificadores alternativos * ? + volver al indice

? busca cero o una ocurrencia en el string nos sirve para algo opcional

remplaza a {0,1}

* busca cero o más ocurrencias en el string

remplaza a {0,}

+ busca una o más ocurrencias en el string al menos tiene que haber 1

remplaza a {1,}

ejemplos1: palabra que contenga al menos una vocal

var patron=/[aeiou]+/;

ejemplo2: numero entero con opcion de +/- adelante

var patron=/^[\+\-]?[0-9]+$/;

ejemplo3: numero obligatorio, punto opcional, y termine en numero.

var patron=/^[0-9]+\.?[0-9]+$/;

Expresiones regulares abreviadas: \d \w \s \D \W volver al indice

Abreviaciones:

\d [0-9]

\D [^0-9]

\w [a-zA-Z0-9_]

\W [^a-zA-Z0-9_]

\s espacio en blanco

d (for decimal), w (for word), s (for space)

ejemplo1: ingresar exactamente 5 dígitos

var patron=/^\d{5}$/; ...es lo mismo que...

var patron=/^[0-9]{5}$/;

/* Problema Validar si un string contiene 4 números de 3 dígitos cada uno separados por coma.*/

<html>

<head>

</head>

<body>

var oracion=prompt('Ingrese una oracion que contenga 4 números de 3 dígitos cada uno separados por coma.','');

var patron=/\s?\d{3},\d{3},\d{3},\d{3}\s?/;

if (patron.test(oracion))

document.write('cumple los requisitos');

else

document.write('no cumple los requisitos');

</script>

</body>

</html>

Expresiones regulares: alternancia | volver al indice

ejemplo1: (numero de factura) que empiece con a, b o c y tenga al menos un digito

var patron=/^[a|b|c]\d+$/;

/* Problema Confeccionar una expresión regular que valide el ingreso del nombre de un día de la semana y un número de 1 o 2 dígitos.*/

<html>

<head>

</head>

<body>

var oracion = prompt("Ingrese el día de la semana (en minúsculas y con acentos) y el número: ",'');

var patron = /[lunes|martes|miércoles|jueves|sábado|domingo]\s?\d{1,2}$/;

if (patron.test(oracion))

document.write(oracion + " cumple los requisitos");

else

document.write(oracion + " No cumple los requisitos");

</script>

</body>

</html>

Si agrego ^ para indicar que la oración comience con algun día de la semana, me deja de funcionar…

Expresiones regulares: metacarácter punto volver al indice

Coincide con cualquier carácter (menos salto de línea)

ejemplo1: palabra de 5 caracteres que empiece y termine con a

var patron=/^a...a$/;

var patron=/^a.{3}a$/;

recordar, si queremos el punto como dato, escaparlo \.

ejemplo2: que tenga el formato 999.99

var patron=/^\d{3}\.\d{2}$/;

Expresiones regulares: agrupación en subpatrones () volver al indice

ejemplo: validar un día del mes

<html>

<head>

</head>

<body>

var dia=prompt('ingrese un número de 1 o 2 dígitos menor a 31:','');

var patron=/^(\d|0[1-9]|1\d|2\d|3[0-1])$/;

if (patron.test(dia))

alert('Correcto');

else

alert('Incorrecto');

</script>

</body>

</html>

Es importante marcar el principio ^ y fin $, porque sino un número de más dígitos lo puede contener...

/* Problema Validar el ingreso de una hora con el formato hh:mm:ss o hh:mm*/

<html>

<head>

</head>

<body>

var hora=prompt('ingrese una hora con el formato hh:mm:ss $los segundos opcionales$:','');

var patron=/^(0\d|1\d|2[0-3]):([0-6]\d)(:[0-6]\d)?$/;

if (patron.test(hora))

alert('Correcto');

else

alert('Incorrecto');

</script>

</body>

</html>

Expresiones regulares: métodos test y exec del objeto RegExp volver al indice

el método test nos da true si el string que le pasamos cumple el valor propuesto.

El método exec nos da un vector con más datos si el string cumple el valor propuesto, en caso contratio nos da null.

El método exec nos permite analizar un patrón que ocurre más de una vez en una oración.

El vector devuelto tiene dos propiedades:

- index devuelve la posicion del string donde se cumple el patron

- input almacena la cadena que se está analizando

var oracion='saliendo de la casa que esta en la montaña';
var patron1=/la/;
var vector1=patron1.exec(oracion);
document.write(vector1.index); nos devuelve la posición 12, index de “l”a
document.write('<br>');
document.write(vector1.input); nos devuelve la oración
document.write('<br>');
var patron2=/lax/;
var vector2=patron2.exec(oracion);
document.write(vector2); nos devuelve “null”. (si en vez de lax hubieramos escrito “esta” eso es lo que nos devolvería, ya que no especificamos ninguna de las 2 propiedades.

Expr reg: modificadores i (insensitive) g (global) m (multiline) volver al indice

Nota: También se les llama “banderas” o “flags” a i, g y m...

/* Problema Indicar las posiciónes de la palabra “el” (mayúscula o minúscula) en la frase “El corcel de Manuel es un rebelde”*/

<html>

<head>

</head>

<body>

var src = "El corcel de Manuel es un rebelde.";

var patron = /el/gi;

var vector;

while ( (vector = patron.exec(src)) != null)

document.write(vector.index + "<br>");

</script>

</body>

</html>

Exp reg: métodos search, replace, split, match del objeto String. volver al indice