jueves, 2 de abril de 2015
Guía JavaScript
<!-- Guía JavaScript by dM -->
La sintaxis de JavaScript es muy similar a la de otros lenguajes de programación como Java y C.
Las normas básicas que definen la sintaxis de JavaScript son las siguientes:
-No se tienen en cuenta los espacios en blanco y las nuevas líneas: como sucede con XHTML, el intérprete de JavaScript
ignora cualquier espacio en blanco sobrante, por lo que el código se puede ordenar de forma adecuada para entenderlo mejor
(tabulando las líneas, añadiendo espacios, creando nuevas líneas, etc.)
-Se distinguen las mayúsculas y minúsculas: al igual que sucede con la sintaxis de las etiquetas y elementos XHTML.
Sin embargo, si en una página XHTML se utilizan indistintamente mayúsculas y minúsculas, la página se visualiza
correctamente, siendo el único problema la no validación de la página. En cambio, si en JavaScript se
intercambian mayúsculas y minúsculas el script no funciona.
-No se define el tipo de las variables: al crear una variable, no es necesario indicar el tipo de dato que almacenará.
De esta forma, una misma variable puede almacenar diferentes tipos de datos durante la ejecución del script.
-No es necesario terminar cada sentencia con el carácter de punto y coma (;): en la mayoría de lenguajes de
programación, es obligatorio terminar cada sentencia con el carácter ;. Aunque JavaScript no obliga a hacerlo, es
conveniente seguir la tradición de terminar cada sentencia con el carácter del punto y coma (;).
<script type="text/javascript">
-------------------------------------
//Comentarios de línea
/* Comentarios de
multiple línea*/
-------------------------------------
// Saber el largo de una cadena
"cadena".length
6
-------------------------------------
// Se pueden realizar operaciones aritmeticas en la consola de js
//El resultado es mostrado en la consola
2 + 2
3 + 7
8 * 4
10 / 3
-------------------------------------
//Estas cajas de diálogos pueden usarse para que los usuarios confirmen acciones.
//En la consola js se vera si es true o false la confirmacion, util para alertar
confirm("Estoy listo para continuar.");
confirm("El contenido será borrado")
confirm("Los cambios no han sido guardados")
-------------------------------------
//Pedir al usuario que ingrese datos mediante un prompt.
//Los datos introducidos se mostraran en la consola
prompt("Cual es su país");
prompt("Cual es su nombre?");
-------------------------------------
//Compara si la cadena es mayor que un numero
"Cadena de texto larga".length > 10
true
"Cadena".length > 10
false
-------------------------------------
//El comando console.log() toma lo que está entre paréntesis y lo registra en la pantalla debajo de tu código; ¡por eso es que se llama console.log() (registro de pantalla)!
//Realiza operaciones sin mostrar ninguna alerta o mensaje
console.log(2 * 5)
console.log("Hola")
-------------------------------------
var miPais="Venezuela" // Declará una variable en la línea 2 que se llame miPais y dale un valor de cadena.
console.log(miPais.length); //Usá console.log para mostrar el largo de la variable miPais
console.log(miPais.substring(0,3)); //Usá console.log para mostrar las tres primeras letras de miPais
-------------------------------------
##### Sintaxis básica #####
Declaración simple de variable:
var foo = 'Hola Mundo';
Los espacios en blanco no tienen valor fuera de las comillas:
var foo = 'hello world';
Los paréntesis indican prioridad:
2 * 3 + 5; // es igual a 11; la multiplicación ocurre primero
2 * (3 + 5); // es igual a 16; por lo paréntesis, la suma ocurre primero
La tabulación mejora la lectura del código, pero no posee ningún significado especial:
var foo = function() {
console.log('hello');
};
-------------------------------------
Operadores básicos
Los operadores básicos permiten manipular valores.
Concatenación
var foo = 'hello';
var bar = 'world';
console.log(foo + ' ' + bar); // la consola de depuración muestra 'hello world'
Multiplicación y división
2 * 3; 2 / 3;
Incrementación y decrementación
var i = 1;
var j = ++i; // incrementación previa: j es igual a 2; i es igual a 2
var k = i++; // incrementación posterior: k es igual a 2; i es igual a 3
Operaciones con números y cadenas de caracteres
En JavaScript, las operaciones con números y cadenas de caracteres (en inglés strings) pueden ocasionar resultados no esperados.
Suma vs. concatenación
var foo = 1;
var bar = '2';
console.log(foo + bar); // error: La consola de depuración muestra 12
Forzar a una cadena de caracteres actuar como un número
var foo = 1;
var bar = '2';
// el constructor 'Number' obliga a la cadena comportarse como un número
console.log(foo + Number(bar)); // la consola de depuración muestra 3
El constructor Number, cuando es llamado como una función (como se muestra en el ejemplo) obliga a su argumento a comportarse como un número. También es posible utilizar el operador de suma unaria, entregando el mismo resultado:
Forzar a una cadena de caracteres actuar como un número (utilizando el operador de suma unaria)
console.log(foo + +bar);
2.3.3. Operadores lógicos
Los operadores lógicos permiten evaluar una serie de operandos utilizando operaciones AND y OR.
Operadores lógicos AND y OR
var foo = 1;
var bar = 0;
var baz = 2;
foo || bar; // devuelve 1, el cual es verdadero (true)
bar || foo; // devuelve 1, el cual es verdadero (true)
foo && bar; // devuelve 0, el cual es falso (false)
foo && baz; // devuelve 2, el cual es verdadero (true)
baz && foo; // devuelve 1, el cual es verdadero (true)
El operador || (OR lógico) devuelve el valor del primer operando, si éste es verdadero; caso contrario devuelve el segundo operando. Si ambos operandos son falsos devuelve falso (false). El operador && (AND lógico) devuelve el valor del primer operando si éste es falso; caso contrario devuelve el segundo operando. Cuando ambos valores son verdaderos devuelve verdadero (true), sino devuelve falso.
Puede consultar la sección "Elementos Verdaderos y Falsos" para más detalles sobre que valores se evalúan como true y cuales se evalúan como false.
Nota
Puede que a veces note que algunos desarrolladores utilizan esta lógica en flujos de control en lugar de utilizar la declaración if. Por ejemplo:
// realizar algo con foo si foo es verdadero
foo && doSomething(foo);
// establecer bar igual a baz si baz es verdadero;
// caso contrario, establecer a bar igual al
// valor de createBar()
var bar = baz || createBar();
Este estilo de declaración es muy elegante y conciso; pero puede ser difícil para leer (sobretodo para principiantes). Por eso se explícita, para reconocerlo cuando este leyendo código. Sin embargo su utilización no es recomendable a menos que esté cómodo con el concepto y su comportamiento.
2.3.4. Operadores de comparación
Los operadores de comparación permiten comprobar si determinados valores son equivalentes o idénticos.
Operadores de Comparación
var foo = 1;
var bar = 0;
var baz = '1';
var bim = 2;
foo == bar; // devuelve falso (false)
foo != bar; // devuelve verdadero (true)
foo == baz; // devuelve verdadero (true); tenga cuidado
foo === baz; // devuelve falso (false)
foo !== baz; // devuelve verdadero (true)
foo === parseInt(baz); // devuelve verdadero (true)
foo > bim; // devuelve falso (false)
bim > baz; // devuelve verdadero (true)
foo <= baz; // devuelve verdadero (true)
Código condicional
A veces se desea ejecutar un bloque de código bajo ciertas condiciones. Las estructuras de control de flujo — a través de la utilización de las declaraciones if y else permiten hacerlo.
Control del flujo
var foo = true;
var bar = false;
if (bar) {
// este código nunca se ejecutará
console.log('hello!');
}
if (bar) {
// este código no se ejecutará
} else {
if (foo) {
// este código se ejecutará
} else {
// este código se ejecutará si foo y bar son falsos (false)
}
}
Elementos verdaderos y falsos
Para controlar el flujo adecuadamente, es importante entender qué tipos de valores son "verdaderos" y cuales "falsos". A veces, algunos valores pueden parecer una cosa pero al final terminan siendo otra.
Valores que devuelven verdadero (true)
'0'; // una cadena de texto cuyo valor sea 0
'any string'; // cualquier cadena
[]; // un array vacío
{}; // un objeto vacío
1; // cualquier número distinto a cero
Valores que devuelven falso (false)
0;
''; // una cadena vacía
NaN; // la variable JavaScript "not-a-number" (No es un número)
null; // un valor nulo
undefined; // tenga cuidado -- indefinido (undefined) puede ser redefinido
Variables condicionales utilizando el operador ternario
A veces se desea establecer el valor de una variable dependiendo de cierta condición. Para hacerlo se puede utilizar una declaración if/else, sin embargo en muchos casos es más conveniente utilizar el operador ternario. [Definición: El operador ternario evalúa una condición; si la condición es verdadera, devuelve cierto valor, caso contrario devuelve un valor diferente.]
El operador ternario
// establecer a foo igual a 1 si bar es verdadero;
// caso contrario, establecer a foo igual a 0
var foo = bar ? 1 : 0;
El operador ternario puede ser utilizado sin devolver un valor a la variable, sin embargo este uso generalmente es desaprobado.
Declaración switch
En lugar de utilizar una serie de declaraciones if/else/else if/else, a veces puede ser útil la utilización de la declaración switch. [Definición: La declaración Switch evalúa el valor de una variable o expresión, y ejecuta diferentes bloques de código dependiendo de ese valor.]
Una declaración switch
switch (foo) {
case 'bar':
alert('el valor es bar');
break;
case 'baz':
alert('el valor es baz');
break;
default:
alert('de forma predeterminada se ejecutará este código');
break;
}
Las declaraciones switch son poco utilizadas en JavaScript, debido a que el mismo comportamiento es posible obtenerlo creando un objeto, el cual posee más potencial ya que es posible reutilizarlo, usarlo para realizar pruebas, etc. Por ejemplo:
var stuffToDo = {
'bar' : function() {
alert('el valor es bar');
},
'baz' : function() {
alert('el valor es baz');
},
'default' : function() {
alert('de forma predeterminada se ejecutará este código');
}
};
if (stuffToDo[foo]) {
stuffToDo[foo]();
} else {
stuffToDo['default']();
}
Bucles
Los bucles (en inglés loops) permiten ejecutar un bloque de código un determinado número de veces.
Bucles
// muestra en la consola 'intento 0', 'intento 1', ..., 'intento 4'
for (var i=0; i<5; i++) {
console.log('intento ' + i);
}
Note que en el ejemplo se utiliza la palabra var antes de la variable i, esto hace que dicha variable quede dentro del "alcance" (en inglés *scope) del bucle. Más adelante en este capítulo se examinará en profundidad el concepto de alcance.*
Bucles utilizando for
Un bucle utilizando for se compone de cuatro estados y posee la siguiente estructura:
for ([expresiónInicial]; [condición]; [incrementoDeLaExpresión])
[cuerpo]
El estado expresiónInicial es ejecutado una sola vez, antes que el bucle comience. Éste otorga la oportunidad de preparar o declarar variables.
El estado condición es ejecutado antes de cada repetición, y retorna un valor que decide si el bucle debe continuar ejecutándose o no. Si el estado condicional evalúa un valor falso el bucle se detiene.
El estado incrementoDeLaExpresión es ejecutado al final de cada repetición y otorga la oportunidad de cambiar el estado de importantes variables. Por lo general, este estado implica la incrementación o decrementación de un contador.
El cuerpo es el código a ejecutar en cada repetición del bucle.
Un típico bucle utilizando for
for (var i = 0, limit = 100; i < limit; i++) {
// Este bloque de código será ejecutado 100 veces
console.log('Currently at ' + i);
// Nota: el último registro que se mostrará
// en la consola será "Actualmente en 99"
}
Bucles utilizando while
Un bucle utilizando while es similar a una declaración condicional if, excepto que el cuerpo va a continuar ejecutándose hasta que la condición a evaluar sea falsa.
while ([condición]) [cuerpo]
Un típico bucle utilizando while
var i = 0;
while (i < 100) {
// Este bloque de código se ejecutará 100 veces
console.log('Actualmente en ' + i);
i++; // incrementa la variable i
}
Puede notar que en el ejemplo se incrementa el contador dentro del cuerpo del bucle, pero también es posible combinar la condición y la incrementación, como se muestra a continuación:
Bucle utilizando while con la combinación de la condición y la incrementación
var i = -1;
while (++i < 100) {
// Este bloque de código se ejecutará 100 veces
console.log('Actualmente en ' + i);
}
Se comienza en -1 y luego se utiliza la incrementación previa (++i).
Bucles utilizando do-while
Este bucle es exactamente igual que el bucle utilizando while excepto que el cuerpo es ejecutado al menos una vez antes que la condición sea evaluada.
do [cuerpo] while ([condición])
Un bucle utilizando do-while
do {
// Incluso cuando la condición sea falsa
// el cuerpo del bucle se ejecutará al menos una vez.
alert('Hello');
} while (false);
Este tipo de bucles son bastantes atípicos ya que en pocas ocasiones de necesita un bucle que se ejecute al menos una vez. De cualquier forma debe estar al tanto de ellos.
break y continue
Usualmente, el fin de la ejecución de un bucle resultará cuando la condición no siga evaluando un valor verdadero, sin embargo también es posible parar un bucle utilizando la declaración break dentro del cuerpo.
Detener un bucle con break
for (var i = 0; i < 10; i++) {
if (something) {
break;
}
}
También puede suceder que quiera continuar con el bucle sin tener que ejecutar más sentencias del cuerpo del mismo bucle. Esto puede realizarse utilizando la declaración continue.
Saltar a la siguiente iteración de un bucle
for (var i = 0; i < 10; i++) {
if (something) {
continue;
}
// La siguiente declaración será ejecutada
// si la condición 'something' no se cumple
console.log('Hello');
}
Arrays
Los arrays (en inglés arrays) son listas de valores con índice-cero (en inglés zero-index), es decir, que el primer elemento del array está en el índice 0. éstos son una forma práctica de almacenar un conjunto de datos relacionados (como cadenas de caracteres), aunque en realidad, un array puede incluir múltiples tipos de datos, incluso otros arrays.
Un array simple
var myArray = [ 'hello', 'world' ];
Acceder a los ítems del array a través de su índice
var myArray = [ 'hello', 'world', 'foo', 'bar' ];
console.log(myArray[3]); // muestra en la consola 'bar'
Obtener la cantidad de ítems del array
var myArray = [ 'hello', 'world' ];
console.log(myArray.length); // muestra en la consola 2
Cambiar el valor de un ítem de un array
var myArray = [ 'hello', 'world' ];
myArray[1] = 'changed';
Como se muestra en el ejemplo Cambiar el valor de un ítem de un array es posible cambiar el valor de un ítem de un array, sin embargo, por lo general, no es aconsejable.
Añadir elementos a un array
var myArray = [ 'hello', 'world' ];
myArray.push('new');
Trabajar con arrays
var myArray = [ 'h', 'e', 'l', 'l', 'o' ];
var myString = myArray.join(''); // 'hello'
var mySplit = myString.split(''); // [ 'h', 'e', 'l', 'l', 'o' ]
Objetos
Los objetos son elementos que pueden contener cero o más conjuntos de pares de nombres claves y valores asociados a dicho objeto. Los nombres claves pueden ser cualquier palabra o número válido. El valor puede ser cualquier tipo de valor: un número, una cadena, un array, una función, incluso otro objeto.
[Definición: Cuando uno de los valores de un objeto es una función, ésta es nombrada como un método del objeto.] De lo contrario, se los llama propiedades.
Curiosamente, en JavaScript, casi todo es un objeto — arrays, funciones, números, incluso cadenas — y todos poseen propiedades y métodos.
Creación de un "objeto literal"
var myObject = {
sayHello : function() {
console.log('hello');
},
myName : 'Rebecca'
};
// se llama al método sayHello, el cual muestra en la consola 'hello'
myObject.sayHello();
// se llama a la propiedad myName, la cual muestra en la consola 'Rebecca'
console.log(myObject.myName);
Nota:
Notar que cuando se crean objetos literales, el nombre de la propiedad puede ser cualquier identificador JavaScript, una cadena de caracteres (encerrada entre comillas) o un número:
var myObject = {
validIdentifier: 123,
'some string': 456,
99999: 789
};
Funciones
Las funciones contienen bloques de código que se ejecutaran repetidamente. A las mismas se le pueden pasar argumentos, y opcionalmente la función puede devolver un valor.
Las funciones pueden ser creadas de varias formas:
Declaración de una función
function foo() { /* hacer algo */ }
Declaración de una función nombrada
var foo = function() { /* hacer algo */ }
Es preferible el método de función nombrada debido a algunas profundas razones técnicas. Igualmente, es probable encontrar a los dos métodos cuando se revise código JavaScript.
Utilización de funciones
Una función simple
var greet = function(person, greeting) {
var text = greeting + ', ' + person;
console.log(text);
};
greet('Rebecca', 'Hello'); // muestra en la consola 'Hello, Rebecca'
Una función que devuelve un valor
var greet = function(person, greeting) {
var text = greeting + ', ' + person;
return text;
};
console.log(greet('Rebecca','hello'));
Una función que devuelve otra función
// la función devuelve 'Hello, Rebecca',
// la cual se muestra en la consola
var greet = function(person, greeting) {
var text = greeting + ', ' + person;
return function() { console.log(text); };
};
var greeting = greet('Rebecca', 'Hello');
greeting(); // se muestra en la consola 'Hello, Rebecca'
Funciones anónimas autoejecutables
Un patrón común en JavaScript son las funciones anónimas autoejecutables. Este patrón consiste en crear una expresión de función e inmediatamente ejecutarla. El mismo es muy útil para casos en que no se desea intervenir espacios de nombres globales, debido a que ninguna variable declarada dentro de la función es visible desde afuera.
Función anónima autoejecutable
(function(){
var foo = 'Hello world';
})();
console.log(foo); // indefinido (undefined)
Funciones como argumentos
En JavaScript, las funciones son ciudadanos de primera clase — pueden ser asignadas a variables o pasadas a otras funciones como argumentos. En jQuery, pasar funciones como argumentos es una práctica muy común.
Pasar una función anónima como un argumento
var myFn = function(fn) {
var result = fn();
console.log(result);
};
myFn(function() { return 'hello world'; }); // muestra en la consola 'hello world'
Pasar una función nombrada como un argumento
var myFn = function(fn) {
var result = fn();
console.log(result);
};
var myOtherFn = function() {
return 'hello world';
};
myFn(myOtherFn); // muestra en la consola 'hello world'
</script>
-------------------------------------
<!-- Declaracion de variables, asignacion y reasignacion de valor -->
<html>
<meta charset="utf-8"/>
<body>
<script type="text/javascript">
var nombre; //declaramos la variable
nombre="Argenis"; //asignamos el valor Morris a la variable
document.write(nombre); //imprimimos la variable
document.write("<br />");
nombre="Rafael"; //asignamos otro valor a la variable
document.write(nombre); //imprimimos la variable
</script>
</body>
</html>
-------------------------------------
<!-- Escribir html en un documento a traves de js -->
<html>
<body>
<script type="text/javascript">
document.write("<h1>Encabezado</h1>");
document.write("<p>Parrafo 1</p>");
document.write("<p>Parrafo 2</p>");
document.write("<h3>Encabezado</h3>");
</script>
<script type="text/javascript">
document.write("hola mundo");
</script>
</body>
</html>
-------------------------------------
<!-- Mostrar alerta en la pagina, se muestra al cargar la pagina -->
<script type="text/javascript">
alert("Ejemplo de alerta con JavaScript");
</script>
-------------------------------------
<!-- Activar una funcion mostrando una alerta -->
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript">
function miFuncion() {
alert("Activaste la funcion miFuncion()");
}
</script>
</head>
<body>
<form>
<input type="button" onclick="miFuncion()" value="Activar Función">
</form>
<p>Presiona el botón y saldra una alerta contenida dentro de una función.</p>
</body>
</html>
-------------------------------------
<!-- Llamada de dos funciones diferentes -->
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript">
function miFuncion1() {
alert("Activaste la funcion 1");
}
function miFuncion2() {
alert("Activaste la funcion 2");
}
</script>
</head>
<body>
<form>
<input type="button" onclick="miFuncion1()" value="Activar Función 1">
<input type="button" onclick="miFuncion2()" value="Activar Función 2">
</form>
</body>
</html>
-------------------------------------
<!-- Activar 2 o mas funciones con un boton -->
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript">
function Funcion1() {
alert("Activaste la funcion 1");
}
function Funcion2() {
alert("Activaste la funcion Funcion 2");
}
function Funcion3() {
alert("Activaste la funcion Funcion 3");
}
</script>
</head>
<body>
<form>
<input type="button" onclick="Funcion1(),Funcion2(),Funcion3()" value="Activar Función">
</form>
<p>Presiona el botón y saldra una alerta contenida dentro de una función.</p>
</body>
</html>
-------------------------------------
<!-- Pasar parametros a una funcion -->
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript">
function sumar(a,b) {
var suma;
suma = a + b;
return suma;
}
function restar(a,b) {
var resta;
resta = a - b;
return resta;
}
//var operacion;
operacion = sumar(6,4); // Variable que le asignamos la llamada de la funcion y parametros
alert(operacion); // Mostramos el resultado en una alerta
operacion = restar(20,18);
alert(operacion);
</script>
</head>
<body>
</body>
</html>
-------------------------------------
<!-- Recoger un dato por teclado y visualizarlo -->
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
//var nom;
nom=prompt("Por favor escriba su nombre","nombre");
alert("Mucho gusto "+nom);
</script>
</body>
</html>
-------------------------------------
<!-- ciclo while con js -->
<html>
<meta charset="utf-8">
<body>
<script type="text/javascript">
var i= 0;
while (i<=5){
document.write("El número es " + i + "<br />");
i=i+1;
}
</script>
</body>
</html>
-------------------------------------
<!-- if en JS -->
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript">
if (1 < 2) {
alert("Verdadero");
}
else {
alert("Falso");
}
</script>
</head>
<body>
</body>
</html>
-------------------------------------
<html>
<meta charset="utf-8"/>
<body>
<script type="text/javascript">
confirm("Estoy listo para continuar.");
var edad;
edad = prompt("¡Cuántos años tienes?");
if (edad <= 13) {
//console.log("Juega! con cuidado...");
alert("Juega! con cuidado...");
}
else {
//console.log("Juega!!!");
alert("Juega!!!");
}
</script>
</body>
</html>
-------------------------------------
<!-- Ejempo de if -->
<html>
<meta charset="utf-8"/>
<body>
<script type="text/javascript">
var nombre; //declaramos la variable
var a = 3
function miFuncion(e) {
//alert("Activaste la funcion miFuncion()");
//if (1 > 2) {
if (a > 2) {
alert("Verdadero");
nombre="Argenis";
document.write(nombre);
}
else {
alert("Falso");
e.preventDefault();
}
}
</script>
<input type="button" onclick="miFuncion()" value="Activar Función 1">
</body>
</html>
-------------------------------------
<!-- Ejempo de if anidados -->
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript">
idioma=prompt("Por favor escriba su idioma");
var a="castellano", b="ingles", c="frances", d="alemán";
if (idioma === a) {
alert("Castellano!")
alert("Que bueno! "+idioma);
}
else
{
if (idioma === b) {
alert("Ingles!");
alert("Que bueno! "+idioma);
}
else
{
if (idioma === c) {
alert("Frances!")
alert("Que bueno! "+idioma);
}
else
{
if (idioma === d){
alert("Alemán")
alert("Que bueno! "+idioma);
}
else
{
//error('idioma no presente');
alert("idioma no presente")
alert("no conozco! el "+idioma);
}
}
}
}
</script>
</head>
<body>
</body>
</html>
-------------------------------------
<!-- Ejempo de if y else if -->
<html>
<meta charset="utf-8"/>
<body>
<script type="text/javascript">
respuestaUsuario = prompt("¿Guardar los datos? s/n");
if (respuestaUsuario === "s") {
alert("Datos guardados!");
}
else if (respuestaUsuario === "n") {
alert("Datos no guardados!")
}
else {
alert("Respuesta no valida!")
}
</script>
</body>
</html>
-------------------------------------
<!-- switch en JS -->
<!DOCTYPE html>
<html>
<body>
<script>
idioma=prompt("Por favor escriba su idioma");
switch (idioma) {
case 'castellano' :
alert("1")
break;
case 'ingles' :
alert("2")
break;
case 'frances' :
alert("3")
break;
case 'alemán' :
alert("4")
break;
default :
error ('Idioma no presente');
}
</script>
</body>
</html>
-------------------------------------
<!DOCTYPE html>
<html>
<body>
<script>
vocal=prompt("Introduzca una letra vocal");
switch (vocal) {
case 'a' :
alert("Se ha escrito una a");
break;
case 'e' :
alert("Se ha escrito una e");
break;
case 'i' :
alert("Se ha escrito una i");
break;
case 'o' :
alert("Se ha escrito una o");
break;
case 'u' :
alert("Se ha escrito una u");
break;
default :
//error ('Esa no es una vocal!');
alert("Esa no es una vocal!");
}
</script>
</body>
</html>
-------------------------------------
<!-- Definicion de un arreglo en JS -->
<!DOCTYPE html>
<html>
<body>
<script>
a = new Array(1,2,3,4,5);
alert(a);
//alert(a[0]);
//alert(a[1]);
//alert(a[2]);
//alert(a[3]);
//alert(a[4]);
//dias = new Array('lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes');
//alert(dias);
//alert(dias[0]);
//alert(dias[3]);
</script>
</body>
</html>
-------------------------------------
<html>
<meta charset="utf-8"/>
<body>
<script type="text/javascript">
a = new Array(1,2,3,'casa',"perro");
document.write(a,"<p />");
document.write(a[0],"<br />");
document.write(a[1],"<br />");
document.write(a[2],"<br />");
document.write(a[3],"<br />");
document.write(a[4],"<br />");
</script>
</body>
</html>
-------------------------------------
<!--Concatenacion de una cadena y de un arreglo -->
<html>
<meta charset="utf-8"/>
<body>
<script type="text/javascript">
var saludo = "Buenos ";
var hola = saludo.concat("días");
alert(hola);
//-------------
a = Array (1,2,3,4);
b = Array (3,4,5,6)
c = a.concat(b);
alert(c);
</script>
</body>
</html>
-------------------------------------
<!-- Mostrar un saludo con la hora del sistema -->
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript">
function saludar(){
var tiempo = new Date();
var hora, cad="son las ";
with (tiempo){
hora = getHours();
//minuto = getMinutes();
//segundo = getSeconds();
cad += hora + ":" + getMinutes()+":"+getSeconds();
//cad += hora + ":" + minuto + ":" + segundo;
}
if (hora < 12)
cad = "Buenos días, "+ cad;
else if (hora < 18)
cad = "Buenas tardes, "+ cad;
else
cad = "Buenas noches, " + cad;
return cad
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(saludar());
</script>
</body>
</html>
-------------------------------------
<!-- Mostrar un saludo con la fecha y hora del sistema -->
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript">
function saludar() {
var date = new Date();
var dd = date.getDate();
var mm = date.getMonth()+1;
var yyyy = date.getFullYear();
var hora, cad=" y son las ";
var hoy = "hoy es ";
with (date) {
hora = getHours();
minuto = getMinutes();
segundo = getSeconds();
if (minuto < 10)
minuto='0'+minuto
cad += hora + ":" + minuto;
}
if(dd<10) {
dd='0'+dd
}
if(mm<10) {
mm='0'+mm
}
dates = dd+'/'+mm+'/'+yyyy;
if (hora < 12)
cad = "Buenos días, "+ hoy + dates +cad + " am";
else if (hora < 18)
cad = "Buenas tardes, "+ hoy + dates + cad + " pm";
else
cad = "Buenas noches, " + hoy + dates + cad + " pm";;
return cad
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(saludar());
</script>
</body>
</html>
-------------------------------------
<!-- Validar direccion e-mail -->
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript">
function checkemail(email) {
var ind1, ind2, ind3;
ind1 = email.indexOf('@');
ind2 = email.indexOf('.');
ind3 = email.lastIndexOf('@');
if ((ind1<=0) || (ind2<ind1) || (ind3 != ind1)) {
return "Correo invalido!";
}
else
{
return "Correo valido!";
}
}
</script>
</head>
<body>
<script type="text/javascript">
correo = "admin@admin.com";
document .write(correo+" "+checkemail(correo),'<br />');
correo= "admin.com";
document.write(correo+" "+checkemail(correo));
//correo=prompt("Por favor escriba su email");
//alert(correo+" "+checkemail(correo));
</script>
</body>
</html>
-------------------------------------
<!-- Validar direccion e-mail 2 -->
<html>
<meta charset="utf-8"/>
<script type="text/javascript">
function checkMail(cadena) {
var plant = /[^\w^@^\.^-]+/gi
if (plant.test(cadena)) {
alert(cadena + " contiene caracteres extraños.");
}
else {
plant =/(^\w+)(@{1})([\w\.-]+$)/i
if (plant.test(cadena)) {
alert(cadena + ", direccion valida!");
}
else {
alert(cadena + ", no es válido!");
}
}
}
</script>
<body>
<form name="form1" method="post" action="">
e-mail: <input type="text" name="email">
<input type="button" name="Button" value="Validar" onclick="checkMail(this.form.email.value)">
</form>
</body>
</html>
-------------------------------------
<!-- Comprobar si una cadena contiene ciertos caracteres o palabras -->
<html>
<head>
<script>
function myFunction() {
var str = "abecedario12";
var patt = /ab/g;
var result = patt.test(str);
var patt2 = /1/g;
var result2 = patt2.test(str);
document.getElementById("site").innerHTML = result + "<br>" + result2;
}
</script>
</head>
<body>
<button onclick="myFunction()">Probar</button>
<p id="site"></p>
</body>
</html>
-------------------------------------
<!-- Creacion de un modal grande -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal grande</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Abrir el modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg"> <!-- modal-sm para que sea pequeño -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Cabecera del Modal </h4>
</div>
<div class="modal-body">
<p>Contenido del modal</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Boton cerrar</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
-------------------------------------
<!-- Creacion de un modal pequeño -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal pequeño</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Abrir el modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-sm"> <!-- modal-lg para que sea grande -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Cabecera del Modal </h4>
</div>
<div class="modal-body">
<p>Contenido del modal</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Boton cerrar</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
-------------------------------------
<!-- Capturar y escribir los datos enviados por un formulario en JS -->
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<script type="text/javascript">
function escribe() {
escribir = document.getElementById("caja")
miusuario = "<p>" + document.rellenar.usuario.value + "</p>"
mipass = "<p>" + document.rellenar.pass.value + "</p>"
micoment = "<p>" + document.rellenar.coment.value + "</p>"
escribir.innerHTML = miusuario + mipass + micoment
}
window.onload = function() {
document.rellenar.guardar.onclick = escribe
}
</script>
<body>
<form name="rellenar" action="#" method="get">
<h2>Acceder</h2>
<p> USUARIO : <input name="usuario" type="text"/> </p>
<p>PASSWORD: <input name="pass" type="password" /></p>
<p>Comentario</p>
<p><textarea name="coment"></textarea></p>
<p><input name="guardar" type="button" value="Enviar" />
</form>
<br />
<div id="caja">
</div>
</body>
</html>
-------------------------------------
<!-- Eventos en JS -->
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
//EVENTOS EN javascript
function hacer_click() {
alert("Usando la funcion onclick!");
}
function hacer_hover() {
alert("Usando la funcion onmouseover!");
}
function salir_del_hover() {
alert("Usando la funcion onmouseout");
}
function cargar_pagina() {
alert("Ya se ha cargado el sitio web");
}
//onmouseout="salir_del_hover()" Este evento se lanza cuando pasamos el mouse(puntero) sobre un elemento del html, para especificar gatillo de este evento en un elemento del DOM debe usarse el atributo “onmouseover”.
//onmouseover="hacer_hover()" "onmouseout" se dispara cuando el puntero sale del area de un elemento del DOM.
//onclick="hacer_click()"" Se ejecuta cuando damos click a un elemento del DOM en nuestro sitio, no necesariamente este debe ser un boton, puede ser un <div> u otro tag de html. Para incorporarlo en HTML basta con utilizar el atributo “onclick” en un elemento HTML y especificar el codigo o funcion de javascript a ejecutar.
//onload="cargar_pagina()" Este evento se ejecuta cuando el DOM, es decir todos los elementos html del sitio web han sido cargados correctamente en el cliente, se usa mucho para asegurar la ejecución de codigo cuando se es necesario que la página este completamente cargada para la ejecución correcta de nuestros programas en javascript. Lo ideal es colocarlo unicamente en el tag “<body>” de nuestros sitios web.
</script>
</head>
<body onload="cargar_pagina()">
<form>
<input type="button" value="Hacer click" onclick="hacer_click()"/>
<input type="button" value="Posar cursor" onmouseover="hacer_hover()" />
<input type="button" value="Posar y quitar cursor" onmouseout="salir_del_hover()" />
</form>
</body>
</html>
-------------------------------------
<!-- Crear una clase y un objeto en Js -->
<!--En Javascript las clases se crean utilizando las funciones. Es por ello que, si queremos crear una clase, lo único que tenemos que hacer es crear una función.-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Objeto Persona</title>
</head>
<body>
<h1>Objeto Persona</h1>
<script type="text/javascript">
function persona(nombre,apellido,edad) { //Usando una funcion se puede crear una clase
this.nombre = nombre; // Atributos de la clase persona
this.apellido = apellido; // Los atributos se referencian mediante this
this.edad = edad;
}
var p1 = new persona("Argenis","Osorio",25); //Para instanciar un objeto de una clase utilizaremos la sentencia new
var p2 = new persona("Maria","Perez",33);
//alert(p1.nombre + "-" + p1.edad);
//alert(p2.nombre + "-" + p2.edad);
//document.write(p1.nombre + p1.apellido + p1.edad + "<br />");
document.write(p1.nombre + " " + p1.apellido + " " + p1.edad + "<br />"); //Escribiendo en el documento HTML
document.write(p2.nombre + " " + p2.apellido + " " + p2.edad + "<p />");
document.write("<b>Nombre: </b>" + p1.nombre + "<br />");
document.write("<b>Apellido: </b>" + p1.apellido + "<br />");
document.write("<b>Edad: </b>" + p1.edad + "<br />");
</script>
</body>
</html>
-------------------------------------
<!-- Creando una clase, metodo y un objeto en Js -->
<html>
<head>
<title></title>
<script type="text/javascript">
function rectangulo(base,altura) {
this.base = base;
this.altura = altura;
this.calcularArea = function () { // Método creado para realizar el calculo del area
return this.base*this.altura;
};
}
var r1 = new rectangulo(3,8); // Creando el objeto y pasandole parametros
document.write(r1.calcularArea()); // Llamada del metodo de la clase
</script>
</head>
<body>s
</body>
</html>
-------------------------------------
<!--Creando una clase, una función para calcular fuera de la clase y un objeto en Js -->
<html>
<head>
<title></title>
<script type="text/javascript">
function rectangulo(base,altura) {
this.base = base;
this.altura = altura;
this.calcularArea = getArea; // Asignamos a una variable (calcularArea) una funcion externa (getArea)
}
function getArea() { // Funcion para calcular el area, declarada fuera de la clase
return this.base*this.altura;
}
var r1 = new rectangulo(3,9); // Creando el objeto y pasandole parametros
document.write(r1.calcularArea()); // Llamada del metodo de la clase
</script>
</head>
<body>
</body>
</html>
-------------------------------------
<!--Rotador de texto, texto cambiante -->
<html>
<head>
<title></title>
<meta charset="UTF-8" />
</head>
<script type="text/javascript">
var indice = 0;
frases = new Array();
frases[0] = "'Tenemos que ser creativos continuamente, creativos; hay que buscar la teoría, no hay revolución sin teoría revolucionaria; no lo olvidemos' Hugo Chávez."
frases[1] = "'Amor con amor se paga, y yo no tengo más nada que darles que amor, entrega, trabajo; mi vida entera se las regalo' Hugo Chávez."
frases[2] = "'Todo revolucionario debe ser un profundo autocrítico' Hugo Chávez."
indice = Math.random()*(frases.length);
indice = Math.floor(indice);
function rotar() {
if (indice == frases.length) {indice = 0;}
document.getElementById("rotando").innerHTML = frases[indice];
indice++;
setTimeout("rotar();",8000);
}
</script>
<body>
<div id="rotando" style="height:120px;margin:0px auto;font-weight:bold;color:red;">
</div>
<script type="text/javascript">rotar();</script>
</body>
</html>
-------------------------------------
<!--Rotador de texto, texto cambiante 2 -->
<html>
<head>
<title></title>
<meta charset="UTF-8" />
</head>
<style type="text/css">
#frases {
color: red;
}
.gallerycontroller {
/*width: 250px*/
}
.gallerycontent {
/*width: 250px;
height: 200px;*/
/*border: 1px solid black;*/
/*background-color: #DFDFFF;*/
/*padding: 3px;*/
/*display: block;*/
}
</style>
<script type="text/javascript">
/***********************************************
* Advanced Gallery script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
var tickspeed=8000 //ticker speed in miliseconds (2000=2 seconds)
var displaymode="auto" //displaymode ("auto" or "manual"). No need to modify as form at the bottom will control it, unless you wish to remove form.
if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.gallerycontent{display:none;}\n')
document.write('</style>\n')
}
var selectedDiv=0
var totalDivs=0
function getElementbyClass(classname){
partscollect=new Array()
var inc=0
var alltags=document.all? document.all.tags("DIV") : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
partscollect[inc++]=alltags[i]
}
}
function contractall(){
var inc=0
while (partscollect[inc]){
partscollect[inc].style.display="none"
inc++
}
}
function expandone(){
var selectedDivObj=partscollect[selectedDiv]
contractall()
selectedDivObj.style.display="block"
if (document.gallerycontrol)
temp.options[selectedDiv].selected=true
selectedDiv=(selectedDiv<totalDivs-1)? selectedDiv+1 : 0
if (displaymode=="auto")
autocontrolvar=setTimeout("expandone()",tickspeed)
}
function populatemenu(){
temp=document.gallerycontrol.menu
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<totalDivs;i++){
var thesubject=partscollect[i].getAttribute("subject")
thesubject=(thesubject=="" || thesubject==null)? "HTML Content "+(i+1) : thesubject
temp.options[i]=new Option(thesubject,"")
}
temp.options[0].selected=true
}
function manualcontrol(menuobj){
if (displaymode=="manual"){
selectedDiv=menuobj
expandone()
}
}
function preparemode(themode){
displaymode=themode
if (typeof autocontrolvar!="undefined")
clearTimeout(autocontrolvar)
if (themode=="auto"){
document.gallerycontrol.menu.disabled=true
autocontrolvar=setTimeout("expandone()",tickspeed)
}
else
document.gallerycontrol.menu.disabled=false
}
function startgallery(){
if (document.getElementById("controldiv")) //if it exists
document.getElementById("controldiv").style.display="block"
getElementbyClass("gallerycontent")
totalDivs=partscollect.length
if (document.gallerycontrol){
populatemenu()
if (document.gallerycontrol.mode){
for (i=0; i<document.gallerycontrol.mode.length; i++){
if (document.gallerycontrol.mode[i].checked)
displaymode=document.gallerycontrol.mode[i].value
}
}
}
if (displaymode=="auto" && document.gallerycontrol)
document.gallerycontrol.menu.disabled=true
expandone()
}
if (window.addEventListener)
window.addEventListener("load", startgallery, false)
else if (window.attachEvent)
window.attachEvent("onload", startgallery)
else if (document.getElementById)
window.onload=startgallery
</script>
<body>
<div id="frases" class="gallerycontent">
"Tenemos que ser creativos continuamente, creativos; hay que buscar la teoría, no hay revolución sin teoría revolucionaria; no lo olvidemos" Hugo Chávez.
</div>
<div id="frases" class="gallerycontent">
"Amor con amor se paga, y yo no tengo más nada que darles que amor, entrega, trabajo; mi vida entera se las regalo" Hugo Chávez.
</div>
</body>
</html>
-------------------------------------
<!-- Agregar estilos CSS a elementos HTML con JS -->
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<script>
function x() {
document.getElementById("p2").style.color = "blue";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "larger";
//alert("sssssssss");
}
</script>
</head>
<body>
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<br />
<input type="button" onclick="x()" value="Activar Función">
</body>
</html>
-------------------------------------
<!-- Estilos CSS con JS inscrustados en elementos HTML -->
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<style type="text/css">
div {
border: ridge 1px;
}
</style>
</head>
<body>
<a href="javascript:void(document.body.style.fontSize='20px')">Aumenta el tamaño de la fuente de toda la página</a> <br />
<a href="javascript:void(document.body.style.fontSize='16px')">Tamaño normal</a> <br />
<a href="javascript:void(document.body.style.backgroundColor='yellow')">Cambia el color del fondo</a> <br />
<a href="javascript:void(document.body.style.backgroundColor='#CDCDCD')">Color normal</a> <br />
<div id="ejemplo">
<a href="javascript:void(document.getElementById('ejemplo').style.fontSize='20px')">Aumenta el tamaño de la fuente solo de esta sección</a> <br />
<a href="javascript:void(document.getElementById('ejemplo').style.fontSize='16px')">Tamaño normal</a> <br />
<a href="javascript:void(document.getElementById('ejemplo').style.backgroundColor='yellow')">Cambia el color del fondo de esta sección</a> <br />
<a href="javascript:void(document.getElementById('ejemplo').style.backgroundColor='white')">Color normal</a> <br />
</div>
</body>
</html>
-------------------------------------
<!-- Agregadndo estilos CSS con funciones JS en elementos HTML -->
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
label {
color: maroon;
display:block;
padding:5px;
}
</style>
<script type="text/javascript">
function cambiarAspecto(elemento) {
var elementosObtenidos = document.getElementsByTagName(elemento);
elementosObtenidos[0].style.backgroundColor = '#FF6633';
elementosObtenidos[1].style.backgroundColor = '#FF9933';
elementosObtenidos[2].style.backgroundColor = '#FFCC33';
}
</script>
</head>
<body>
<div style="width:450px;">
<form name ="formularioContacto" class="formularioTipo1" method="get" action="accion.html" onclick="cambiarAspecto('label')">
<p>Si quieres contactar con nosotros envíanos este formulario relleno:</p>
<label for="nombre"><span>Nombre:</span> <input id="nombre" type="text" name="nombre" /></label>
<label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos" /></label>
<label for="email"><span>Correo electrónico:</span> <input id="email" type="text" name="email" /></label>
<label>
<input type="submit" value="Enviar">
<input type="reset" value="Cancelar">
</label>
</form>
</div>
</body>
</html>
-------------------------------------
<!-- Alerta, con boton aceptar y cancelar -->
<html>
<head>
<title></title>
<meta charset="utf-8">
<script language="Javascript">
function confirmar(){
confirmar=confirm("¿Enviar datos?");
if (confirmar)
// si pulsamos en aceptar
alert('Has dicho que si');
else
// si pulsamos en cancelar
alert('Has dicho que no');
}
</script>
</head>
<body>
<form action="#" method="get">
Nombre: <input type="text" name="nombre"> <br />
Cédula: <input type="text" name="cedula"> <br />
<input type="submit" value="Enviar" onclick="confirmar()">
<input type="reset" value="Borrar">
</form>
</body>
</html>
-------------------------------------
<!-- Confirmación de envío de formulario con alert, boton aceptar, cancelar -->
<html>
<head>
<title></title>
<meta charset="utf-8">
<script language="JavaScript">
function pregunta(){
if (confirm('¿Estas seguro de enviar este formulario?')){
document.formulario.submit()
}
else {
alert("!Datos no enviados¡");
}
}
</script>
</head>
<body>
<form action="#" name=formulario method="get" >
Nombre: <input type="text" name="nombre"> <br />
Cédula: <input type="text" name="cedula"> <br />
<input type="button" value="Enviar" onclick="pregunta()">
<input type="reset" value="Borrar">
</form>
</body>
</html>
-------------------------------------
<!-- Uso de Pestañas para contenidos con JS y CSS-->
<html>
<head>
<title>tab_javascript</title>
<script type="text/javascript">
function tab(tab_id) {//funcion tab que recibe el parametro del id
var tab_contenido = document.getElementsByTagName("div");//definimos el elemento que sera devuelto
for(var x=0; x<tab_contenido.length; x++) {//almacenamos los elementos divs
name = tab_contenido[x].getAttribute("name");//recibimos el nombre de la clase
if (name == 'tab_contenido') {//comparamos el valor del nombre
if (tab_contenido[x].id == tab_id) {//comparamos el numero de contenido
tab_contenido[x].style.display = 'block';//mostramos el contenido correspondiente
}
else {
tab_contenido[x].style.display = 'none';//ocultamos los otros contenidos.
}
}
}
}
</script>
<style>
/*----clase pra las pestañas---*/
#tab {
text-transform: uppercase;
padding:5px;
text-decoration:none;
color:#ccc;
font: 14px/100% Arial, Helvetica, sans-serif;
background: #4162a8;
border: 1px solid #19253f;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
/*----clase para las pestañas activadas----*/
#tab:active {
/*color:#000;*/
background:#ccc;
}
/*----clase para el contenido------*/
.tab_contenido {
text-align:left;
padding: 8px;
display:none;
width:550px;
height: 250px;
color:#000;
background:#ccc;
border: ridge 1px;
}
</style>
</head>
<body>
<!--pestañas de la tab-->
<a id="tab" href="javascript:tab('tab_contenido1');" >Contenido 1</a>
<a id="tab" href="javascript:tab('tab_contenido2');" >Contenido 2</a>
<a id="tab" href="javascript:tab('tab_contenido3');" >Contenido 3</a>
<!--contenidos de la tab-->
<div name="tab_contenido" id="tab_contenido1" class="tab_contenido"style="display: block;">
Contenido1 Contenido1 Contenido1 Contenido1<br />
Contenido1 Contenido1 Contenido1 Contenido1<br />
</div>
<div name="tab_contenido" id="tab_contenido2" class="tab_contenido">
Contenido2 Contenido2 Contenido2 Contenido2<br />
Contenido2 Contenido2 Contenido2 Contenido2<br />
</div>
<div name="tab_contenido" id="tab_contenido3" class="tab_contenido">
Contenido3 Contenido3 Contenido3 Contenido3<br />
Contenido3 Contenido3 Contenido3 Contenido3<br />
</div>
</body>
</html>
-------------------------------------
<!-- Comprobar que las contraseñas/passwords sean iguales -->
<html>
<head>
<title></title>
<meta charset="UTF-8">
<script>
function comprobarClave() {
clave1 = document.f1.clave1.value
clave2 = document.f1.clave2.value
if (clave1 == clave2)
alert("Las dos claves son iguales")
else
alert("Las dos claves son distintas")
}
</script>
</head>
<body>
<form action="#" method="get" name="f1">
Contraseña: <input type="password" name="clave1" size="20"> <br />
Repite contraseña: <input type="password" name="clave2" size="20"> <br />
<input type="button" value="Enviar" onClick="comprobarClave()">
</form>
</body>
</html>
--- Forma completa con submit ---
<html>
<head>
<title></title>
<meta charset="UTF-8">
<script>
function comprobarClave() {
clave1 = document.formulario.clave1.value
clave2 = document.formulario.clave2.value
if (clave1 == clave2)
//alert("Las dos claves son iguales")
document.formulario.submit()
else
alert("Las contraseñas deben ser idénticas ")
}
</script>
</head>
<body>
<form action="#" method="get" name="formulario">
Nombre: <input type="text" name="nombre"> <br />
Cédula: <input type="text" name="cedula"> <br />
Contraseña: <input type="password" name="clave1" size="20"> <br />
Repite contraseña: <input type="password" name="clave2" size="20"> <br />
<input type="button" value="Enviar" onClick="comprobarClave()">
</form>
</body>
</html>
-------------------------------------
<!-- Cargar en modal una pagina web o html externa, con boton cerrar -->
<!-- Crear el archivo x.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Bootstrap 3 Modals with Remote URL</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="bs-example">
<!-- Button HTML (to Trigger Modal) -->
<a href="y.html" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#myModal">Launch Demo Modal</a>
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- Content will be loaded here from "remote.php" file -->
</div>
</div>
</div>
</div>
</body>
</html>
<!-- Crear el archivo y.html-->
<div align="center">
<span style="text-align:right">
<button type="button" class="close" data-dismiss="modal">×</button>
</span>
XXXXXXXXXXXXXXXX <br />
XXXXXXXXXXXXXXXX <br />
XXXXXXXXXXXXXXXX <br />
XXXXXXXXXXXXXXXX <br />
XXXXXXXXXXXXXXXX <br />
<span style="text-align:right">
<button type="button" class="btn btn-default" data-dismiss="modal">Boton cerrar</button>
</span>
</div>
-------------------------------------
<!-- Copiar texto de una caja de texto a otra -->
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<script type="text/javascript">
function copiar() {
document.getElementById("text2").value=document.getElementById("text1").value;
}
</script>
</head>
<body>
<input type="text" name="text1" id="text1" onkeyup="copiar()">
<input type="text" name="text2" id="text2">
</body>
</html>
-------------------------------------
<!-- Descargar en un .txt el contenido de un area de texto -->
<html lang="es">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
window.onload = function() {
var txt = document.getElementById('txt');
txt.value = window.onload + '';
document.getElementById('link').onclick = function(code) {
this.href = 'data:text/plain;charset=utf-8,'
+ encodeURIComponent(txt.value);
};
};
</script>
</head>
<body>
<textarea id="txt"></textarea>
<br />
<a href="#" id="link" download="contenido.txt">Descargar el contenido del textarea</a>
</body>
</html>
-------------------------------------
<!-- Confirmación, validar envío de formulario en js-->
<!-- alerta sobre el envio del formulario-->
<html>
<head>
<title>Confirmación de envío de formulario</title>
<meta charset="UTF-8">
<script language="JavaScript">
function pregunta() {
if (confirm('¿Estas seguro de enviar este formulario?')){
document.tuformulario.submit()
}
}
</script>
</head>
<body>
<form name=tuformulario method="get" action="">
<label for="nombre">Nombre:<input id="nombre" type="text" name="nombre" /></label> <br />
<label for="apellidos">Apellidos:<input id="apellidos" type="text" name="apellidos" /></label> <br />
<input type=button onclick="pregunta()" value="Enviar">
</form>
</body>
</html>
-------------------------------------
<!-- Confirmación, validación de que los datos del formulario fueron enviados -->
<!-- mediante una alerta -->
<html>
<head>
<title>Confirmación de datos enviados</title>
<meta charset="UTF-8">
<script language="JavaScript">
function return_validacion() {
alert("Acceso concedido");
}
</script>
</head>
<body>
<!--form action="#" method="get"-->
<form action="" method="" id="" name="" onsubmit="return_validacion()">
Usuario: <input type="text" name="user" > <br />
Contraseña: <input type="password" name="contrasena"> <br />
<input type="submit" value="Enviar">
<input type="reset" value="Borrar">
</form>
</body>
</html>
-------------------------------------
<!-- Validar que los campos no estén vacios, form-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8" />
<style type="text/css">
</style>
<script type="text/javascript">
function formulario(f) {
if (f.user.value == '') {
alert ('El Usuario es obligatorio');
f.nombre.focus(); return false;
}
if (f.pass.value == '') {
alert ('El Password es obligatorio');
f.email.focus(); return false; } return true;
}
</script>
</head>
<body>
<form method="get" action="" onsubmit="return formulario(this)">
Usuario: <input type="text" name="user"> <br />
Contraseña: <input type="password" name="pass"> <br />
<label><input type="submit" value="Enviar"><input type="reset" value="Cancelar"></label>
</form>
</body>
</html>
-------------------------------------
<!-- Validar que los campos no estén vacios, si estan vacios
no envia los datos Es comun que al validar un string se
escriba if(campo == "") alert("Error");
Si el campo contiene " " entonces la validacion no funciona
-->
<html>
<head>
<title>Confirmación de envío de formulario</title>
<meta charset="utf-8" />
<script language="JavaScript">
function validar() {
if (document.formulario.username.value == '' && document.formulario.password.value == '') {
alert("Campos obligatorios");
}
else {
if (document.formulario.username.value == '') {
alert("El campo Usuario es obligatorio");
}
else {
alert("Datos enviados");
document.formulario.submit()
}
}
/*if (document.formulario.password.value == '') {
alert("El campo Contraseña es obligatorio");
}*/
/*else {
alert("Datos enviados");
document.formulario.submit()
}*/
}
</script>
</head>
<body>
<form name="formulario" action="#">
Usuario: <input type="text" name="username"> <br />
Contraseña: <input type="password" name="password"> <br />
<input type="button" onclick="validar()" value="Enviar">
</form>
</body>
</html>
-------------------------------------
<!-- Validar claves con javascript -->
<!doctype html>
<html>
<head>
<title></title>
<script type="text/javascript">
window.addEventListener('load', inicio, false);
function inicio() {
document.getElementById("formulario1").addEventListener('submit', validar, false);
}
function validar(evt) {
var cla1 = document.getElementById("clave1").value;
var cla2 = document.getElementById("clave2").value;
if (cla1!=cla2) {
alert('Las claves ingresadas son distintas');
evt.preventDefault();
}
//else
//{
// alert('Correcto');
//}
}
</script>
</head>
<body>
<form method="GET" action="#" id="formulario1">
Ingrese clave: <input type="password" id="clave1" name="clave1" size="20" required> <br>
Repita clave: <input type="password" id="clave2" name="clave2" size="20" required> <br>
<input type="submit" id="confirmar" name="confirmar" value="Confirmar">
</form>
</body>
</html>
-------------------------------------
<!-- Validar campos con javascript -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8" />
<style type="text/css">
label {
display:block;
padding:5px;
}
</style>
<script type="text/javascript">
window.onload = function () {
document.formularioContacto.nombre.focus();
document.formularioContacto.addEventListener('submit', validarFormulario);
}
function validarFormulario(evObject) {
evObject.preventDefault();
var todoCorrecto = true;
var formulario = document.formularioContacto;
for (var i=0; i<formulario.length; i++) {
if(formulario[i].type =='text') {
if (formulario[i].value == null || formulario[i].value.length == 0 || /^\s*$/.test(formulario[i].value)){
alert (formulario[i].name+ ' no puede estar vacío o contener sólo espacios en blanco');
todoCorrecto=false;
}
}
}
if (todoCorrecto ==true) {formulario.submit(); }
}
</script>
</head>
<body>
<form name ="formularioContacto" class="formularioTipo1" method="get" action="">
<p>REGISTRARSE</p>
<label for="nombre"><span>Nombre:</span> <input id="nombre" type="text" name="nombre" /></label>
<label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos" /></label>
<label for="email"><span>Correo electrónico:</span> <input id="email" type="text" name="email" /></label>
<label><input type="submit" value="Enviar"><input type="reset" value="Cancelar"></label>
</form>
</body>
</html>
-------------------------------------
<!-- Validar campos vacios de formulario, mostrar texto de alerta con estilo
junto a la caja de texto -->
<html>
<head>
<title>Confirmación de envío de formulario</title>
<meta charset="utf-8" />
<style type="text/css">
span.mensaje_error_color {
color: red;
}
</style>
<script language="JavaScript">
function validar() {
if (document.formulario.username.value == '') {
//alert("El campo Usuario es obligatorio");
document.getElementById("mensaje_error").innerHTML = "El Usuario es obligatorio";
}
if (document.formulario.password.value == '') {
//alert("El campo Usuario es obligatorio");
document.getElementById("mensaje_error2").innerHTML = "La Contraseña es obligatoria";
}
else {
//alert("Datos enviados");
document.formulario.submit()
}
}
</script>
</script>
</head>
<body>
<form name="formulario" action="#">
*Usuario: <input type="text" name="username">
<span id="mensaje_error" class="mensaje_error_color"></span> <br />
*Contraseña: <input type="password" name="password">
<span id="mensaje_error2" class="mensaje_error_color"></span> <br />
<input type="button" onclick="validar()" value="Enviar">
</form>
</body>
</html>
-------------------------------------
<!-- Validar el envio de datos del formulario segun la condición, este es el caso de que el campo
no este vacío -->
<html>
<head>
<title>Confirmación de envío de formulario</title>
<meta charset="utf-8" />
<script type="text/javascript">
function enviar(){
var formulario = document.getElementById("formulario");
var dato = formulario[0];
if (dato.value != ""){
alert("Se envió");
formulario.submit();
return true;
}
else {
alert("No se envió");
return false;
}
}
</script>
</head>
<body>
<form id="formulario" action="#" onsubmit="return enviar();">
Usuario: <input type="text" name="username"> <p />
<button>Enviar</button>
</form>
</body>
</html>
-----
<!-- Ejemplo original, solo envía si la cadena a enviar coincide con la condición -->
<html>
<head>
<title>Confirmación de envío de formulario</title>
<meta charset="utf-8" />
<script type="text/javascript">
function enviar(){
var formulario = document.getElementById("formulario");
var dato = formulario[0];
if (dato.value=="enviar"){
alert("Enviando el formulario");
formulario.submit();
return true;
} else {
alert("No se envía el formulario");
return false;
}
}
</script>
</head>
<body>
<form id="formulario" action="#" onsubmit="return enviar();">
*Usuario: <input type="text" name="username"> <p />
<button>Enviar</button>
</form>
</body>
</html>
-------------------------------------
<!-- Crear elementos de formulario html dinámicamente con javascript -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>clone demo</title>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<!--script src="https://code.jquery.com/jquery-1.10.2.js"></script-->
<script type="text/javascript">
var contador = 1;
var limite = 3;
var cont_name = 1;
function addInput(divName){
if (contador == limite) {
alert("Exedíste el límite de adición (" + contador + ") campos");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Nombre: "/* + (contador + 1) */+ "<input type='text' name='nombre"+cont_name+"'>";
document.getElementById(divName).appendChild(newdiv);
contador++;
cont_name++;
}
}
</script>
</head>
<body>
<form method="get">
<div id="campo_dinamico">
Nombre: <input type="text" name="nombre">
</div>
<br />
<input type="button" value="Agregar campo" onClick="addInput('campo_dinamico');">
</form>
</body>
</html>
-------------------------------------
<!-- abrir enlace en nueva ventana usando un enlace-->
<a href="javascript:window.open('http://www.as.com/','','width=600,height=400,left=50,top=50,toolbar=yes');void 0">Nueva nueva ventana</a> <p />
<!-- abrir enlace en nueva ventana usando un boton-->
<input type="button" value="Nueva ventana" onclick="javascript:window.open('http://www.as.com/','','width=600,height=400,left=50,top=50,toolbar=yes');" /> <p />
<p />
<a onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;" href="http://www.as.com/">Vinculo para abrir la página en otra ventana</a>
-------------------------------------
JSON es una notación de objetos basada en JavaScript, utiliza una sintaxis que nos permite crear objetos de manera rapida y simple, estos objetos pueden ser utilizados de la manera que queramos y la notación se utiliza muy comúnmente para crear servicios REST, objetos, e incluso fue adoptada por algunas bases de datos como lo es MongoDB. A continuación el siguiente video tutorial demuestra una introducción. Codigo ejemplo puedes encontrarlo posteriormente.
Sintaxis de JSON
Para escribir JSON debemos tener en cuenta lo siguiente:
La creación de los objetos JSON implica escribir datos, para ello:
Losdatos estan separados por comas.
los datos se escriban en pares, siendo primero el nombre o atributo del mismo y luego el valor del dato.
Los objetos JSON estan rodeados por llaves “{}”
Llaves cuadradas [] guardan arreglos, incluyendo otros objetos JSON
Ejemplo de un objeto JSON que guarda un usuario y password:
var objetoJSON = {"usuario":"user","password":"123456"};
<!-- Escribiendo en el DOM los datos de un JSON -->
<!DOCTYPE html>
<html>
<body>
<h3>JSON Object Creation in JavaScript</h3>
<p id="caja"></p>
<script type="text/javascript">
var json = '{ "nombre":"Pedro Camejo", "pais":"Venezuela", "telefono":"12345678" }';
var obj = JSON.parse(json);
document.getElementById("caja").innerHTML =
obj.nombre + "<br>" +
obj.pais + "<br>" +
obj.telefono;
</script>
</body>
</html>
-------------------------------------
<!-- -->
-------------------------------------
<!-- -->
-------------------------------------
<!-- -->
-------------------------------------
<!-- -->
-------------------------------------
<!-- -->
-------------------------------------
<!-- -->
-------------------------------------
Suscribirse a:
Enviar comentarios (Atom)
No hay comentarios:
Publicar un comentario