java script(diapositivas)
Post on 11-Jul-2015
1.239 Views
Preview:
TRANSCRIPT
JavaScript
Integrantes
Jonathan Roberto Mejía CoronaGerardo Gil Villareal
Salvador flores ChávezJuan Carlos Brígido Albino
Índice1. Introducción2. Un primer ejemplo3. Constantes y variables4. Tipos de datos5. Operadores6. Estructuras de control7. Funciones y eventos8. Objetos
JavaScript es un lenguaje de programación creado por Netscape que se integra dentro de HTML y nos permitirá
crear páginas interactivas.
1. Introducción
JavaScript ≠ JAVA
JavaScript es un lenguaje que funciona como extensión HTML y que es interpretado por el navegador, es independiente del servidor donde está alojado.
JAVA es un lenguaje independiente no necesita HTML para funcionar. El código no se interpreta en el navegador
Al ser (JavaScript) interpretado en el navegador, una vez cargado el código se puede ejecutar cuantas veces sea necesario sin acceder al servidor.
Por ejemplo, podemos crear una función que compruebe un campo fecha de un formulario. Si el usuario introduce una fecha incorrecta, saldrá un mensaje de error sin tener que cargar una nueva página.
Como ocurre con CSS la interpretación que cada navegador hace de un código puede ser muy particular.
Iexplorer soporta una especie de JavaScript llamado jscript, que es muy similar a JavaScript, pero no es compatible 100%. Por este motivo debemos comprobar el código que realicemos en distintos navegadores, sobre todo en este último, al ser el más extendido.
En una misma página podemos insertar distintos trozos de código JavaScript, cada uno de ellos encerrado entre las directivas:
<SCRIPT languaje=“JavaScript”>
Y
</SCRIPT>
1. Inserción en HTML
<HTML><HEAD>
código HTML de cabecera<SCRIPT>
código JavaScript</SCRIPT><BODY>código HTML<SCRIPT>
código JavaScript</SCRIPT>código HTML<SCRIPT>
código JavaScript</SCRIPT>código HTML
El atributo “languaje” de la etiqueta SCRIPT indica el lenguaje que vamos a utilizar, que por defecto es JavaScript, por lo que podemos omitirlo.
Ejercicio: Lo siguiente es código JavaScript. Insértalo en una página HTML de manera correcta y observa el resultado:
alert(“Esto es una nota informativa”);
Nota importante: JavaScript es un lenguaje sensible a las mayúsculas (Case Sensitive) por lo que los siguientes nombres de variables son diferentes:
ResultadoRESULTADOresultado
Al igual que CSS podemos crear un fichero externo que contenga código JavaScript.
Su extensión será .js
Para llamarlo utilizaremos el atributo src de la etiqueta SCRIPT
1. Inserción en HTML. Archivo Externo
TEMA 2. Hojas de Estilo
Ejercicio: dado el código JavaScript ejecutarlo mediante una llamada a un fichero externo:
Var hoy=new Date();Dia=hoy.getDate();Mes=hoy.getMonth()+1;Anio=hoy.getYear();alert(“Hoy es “+Dia+” del “+Mes+” de “+Anio); Resultado
Se pueden introducir de dos formas distintas:
// Comentarios en una sola línea
/* En varias líneas: todo lo que escribamos entre estos dos símbolos no será tenido en cuenta por el navegador*/
Comentarios
Podemos encerrar cualquier trozo de código entre llaves. Más adelante veremos que el código de una función va encerrado entre llaves {}
Llaves
Punto y coma ;
El símbolo ; se utiliza para separar sentencias. Pondremos uno al finalizar cada línea de instrucción. Si la instrucción es larga y ocupa más de una línea, no pondremos uno en cada línea, sino de la misma forma, al finalizar la instrucción.
<html><body><script language="JavaScript">imagen1=new Imageimagen1.src="imagenes/dedo.jpg"imagen2=new Imageimagen2.src="imagenes/dedo1.jpg"var i=1;function cambio_icono() { if (i == 1) { document.images['icono'].src=imagen2.src; i=2; } else { document.images['icono'].src=imagen1.src; i=1; } }</script><div align="center"><img src="imagenes/dedo.jpg" name="icono" onMouseover="cambio_icono()" onMouseOut="cambio_icono()"></div></body></html>
2. Un primer ejemplo
Resultado
Son elementos que se utilizan en todos los lenguajes y sirven para almacenar datos temporalmente.A la hora de asignar un nombre a una variable tenemos que tener en cuenta lo siguiente: • Primer carácter: letra ó _• Resto caracteres: letras, números ó _ sin espacios intermedios• No utilizar palabras reservadas• Diferencia entre mayúsculas y minúsculas. Conviene seguir una norma.
3. Variables y constantes
Variables
ResultadoSuma, Resultadosuma y resultadosuma son tres variables distintas.
En los navegadores antiguos era necesario declara las variables antes de usarla. En los actuales no.
Para declarar una variable basta con poner “var” y seguidamente su nombre:
var nombre1;
En JavaScripts las constantes se tratan como una variable a la que no se le cambia nunca el valor.
Constantes
Existen distintos tipos de variables:
•De cadena: son aquellas que contienen una cadena de texto. Se definen mediante comillas simples o dobles. Existen una serie de caracteres especiales que podemos usar en ellas: \n, \t, \\, \”, \’ Ejemplo:<script>var cadena1=“\n\tEjemplo de \ncadena”;alert (cadena1);</script>
Tipos de Variables
4. Tipos de datos
•Numérica: son aquellas que conienen números.
Ejemplos: var numero=100;var numero=-100;
•Booleanas: son aquellas que solo tienen dos valores posibles, verdadero o falso (true / false).var abierta=true;
•Undefined: son aquellas que han sido declaradas pero no tienen ningún valor asignado:
En JavaScript los operadores se dividen en varios grupos:
•Aritméticos• Lógicos• De Comparación• Condicionales• Bit a Bit• De asignación• Especiales
5. Operadores
Son aquellos que se encargan de realizar los operaciones básicas como suma, resta, multiplicación, división, módulo, incremento, decremento,…
Operadores Aritméticos
Ejemplo:var v1, v2;var suma, division, modulo;
v1=2;v2=11;
suma=v1+v2;division=v2/v1;modulo=???
document.write("suma: "+suma+"<br>");document.write("division: "+division+"\n");document.write("modulo: "+modulo+"\n");
Incremento y decremento son operadores que suman o restan una unidad a una variable.
La sintáxis es la siguiente:variable++;
Ejercicio: crea el siguiente código:• Declara una variable cualquiera• Asígnale un valor cualquiera• Muestra su valor en la página• Increméntalo con este operador• Muestra de nuevo su valor
Son los que operan con datos booleanos y son los siguientes.
&& “y lógico”
|| “o lógico”
! “negación”
Operadores Lógicos
Ejercicio: Tabla de verdad de && . Rellena los siguientes valores:
true && true =true && false =false && true =false && false =true || true =true || false =false || true =false || false =!false =!true =
Crea 10 variables, una para cada operación y asigna cada operación a su variable. Muestra el resultado mediante alert
Sirven para comparar valores y siempre devuelven “true”o “false”. Son los siguientes:Igualdad (a==b): Devuelve “true” si los a y b son igualesNo igualdad (a!=b): Devuelve “true” si a y b son distintosMayor que (a>b): Devuelve “true” si a es mayor que bMenor que (a<b): Devuelve “true” si a es menor que bMayor o igual que (a>=b): Devuelve “true” si a es mayor o igual que bMenor o igual que (a<=b): Devuelve “true” si a es menor o igual que b
Operadores de comparación
Ejemplos: Indica el valor de result en cada caso:
<script>var var1,var2,result;var1=5; var2=10;
result=(5==var1);
result=(5!=var1);
result=(var2==var1);
result=(var1>var2);
result=(var1<=var2);
</script>
Ejemplos: Indica el valor de result en cada caso:
<script>var var1,var2,result;
var1=5; var2=10;var3=5;var4=8;
result=(5==var1&&var2==var4);
result=(5==var1||var2==var4);
result=(var1<var2&&var3>=var1);
</script>
Es una forma de expresar una instrucción condicional:
(condicion)?instruccion1:instruccion2;
Ejemplo:
var i,texto;
i=prompt(“Escribe una calificación");
(i<5)?texto=“superado":texto=“no superado”;
document.write(“El examen está: "+texto+"<br>");
Operadores condicionales
Son los que operan con los datos a nivel de bit. Algunos de estos operadores son:
& operación AND| operación OR~ operación NOT
Calcular el resultado de las siguientes operaciones utilizando estos operadores:
3&5=3|5=
Operadores bit a bit
Solución:
var result;
result=3&5;
document.write("resultado de 3&5: "+result+"<br>");
result=3|5;
document.write("resultado de 3|5: "+result);
Ya hemos visto la más sencilla de ellas que es la siguiente:
v1=v2;
Existen otras como:
v1+=v2;
v1-=v2;
Ejercicio: comprueba qué efecto tienen estas dos operaciones sobre v1.
Operadores de asignación
Existen otros operadores que no están incluidos en ninguno de los grupos anteriores. Algunos de ellos son:
instanceof – indica si un objeto es de un tipo determinado, por ejemplo:
var result,fecha;fecha=new Date();result=fecha instanceof Date;document.write("resultado de 'instanceof': "+result);
new – crea una instancia de un objeto, por ejemplo:
fecha =new Date();
Operadores especiales
Nos van a servir para tomar decisiones según ciertas condiciones y para ejecutar un mismo código repetidas veces variando algún dato.En JavaScript disponemos de las siguientes instrucciones de control:
if => instrucción condicionalforwhile => instrucciones de repeticióndo whileswitch => instrucción de selección múltiple
6. Estructuras de control
Instrucción if - else
Se utiliza para ejecutar un conjunto de instrucciones si se cumple una condición y otro conjunto de instrucciones diferente si no se cumple.La sintaxis es la siguiente:
if(condicion){ instrucciones A;}else{ instrucciones B;}
El bloque else no es obligatorio, en ese caso la instrucción quedaría de la siguiente forma:
if(condicion){ instrucciones;}
La condición es una operación que devuelve un resultado booleano, true o false, para ello utilizaremos los operadores lógicos, los de comparación e incluso operadores especiales como instanceof.
Solución:
<html><head><script>function cambiafondo(){
if(document.bgColor=="#ff0000"){ document.bgColor="#008000";}else{ document.bgColor="#ff0000";}
}</script></head><body>
<img src="boton.JPG" onclick="cambiafondo()"></body></html>
Ejercicio:
Escribe un código que solicite que escribas tu nombre con el comando prompt. A continuación solicita que escribas tu primer apellido con otro prompt, almacenándolo en variables distintas.Si tu nombre es Alberto Ruíz, aparecerá un mensaje indicando que tienes permiso para entrar en la página. De lo contrario, aparecerá un mensaje indicando que no puedes entrar.
Solución:
<script>
var nombre,apellido;
nombre=prompt("Escribe tu nombre");apellido=prompt("Escribe tu primer apellido");
if(nombre=="alberto" && apellido=="ruiz"){ alert("puedes pasar");}else{ alert("no puedes pasar");}
</script>
Las instrucciones que introducimos dentro del bloque de instrucciones también pueden ser instrucciones de control, incluida la instrucción if (if anidados). Ejemplo:
var nombre;nombre=prompt("Escribe tu nombre","");if(nombre=="Pepe"){ alert("Bienvenido/a "+nombre+". Puedes pasar");}else{ if(nombre=="Francisca")
{ alert("Bienvenido/a "+nombre+". Puedes pasar");
}else{ alert("Lo siento. No puede pasar");}
}
Ejercicio: modificar el código anterior de manera que haga lo mismo, pero utilizando solo una estructura if
Instrucción for
Nos va a servir para ejecutar un mismo código un número determinado de veces. Para ello hay que establecer tres parámetros:• Valor inicial del contador• Condición, que hará que el bucle pueda llegar en algún momento a su fin• Incremento del contador
La sintaxis de esta instrucción es la siguiente:
For(valor incial; condicion; incremento){ instrucciones;}
Ejemplo:
var cont;
for(cont=1;cont<11;cont++){ document.write(cont+"<br>");}
¿Qué hace este código?
Ejercicio:
Modificar el código anterior para que escriba los números impares que hay entre el 1 y el 20
Ejercicio:
Crear un código que pida un número al usuario y repita una frase tantas veces como indique ese número
Solución:
var cont,n;
n=prompt("escribe un número","");document.write("Voy a escribir hola "+n+" veces<br>");
for(cont=0;cont<n;cont++){ document.write(cont+" hola<br>");}
Ejercicio:
Crear un código que pida tres veces un número al usuario y escriba si cada uno de esos números es mayor, menor o igual a 10.
Solución:var cont,n;document.write("<u><b>Mayor o menor<br></u></b>");for(cont=1;cont<4;cont++){ n=prompt("Escribe un número: ","");
if(n > 10){ document.write("El numero es mayor que
10"+"<br>");}else{ if(n == 10)
{ document.write("El número es 10"+"<br>");
}else{ document.write("El número es menor que
10"+"<br>");}
}}
Ejercicio:
Con la siguiente instrucción se almacena en n un número del 1 al 10:
n=Math.ceil(Math.random()*10);Utilizad esta instrucción para crear un juego en el que el usuario tiene que adivinar el número indicado. Máximo se permiten 5 intentos.
Solución:var cont,n,p;n=Math.ceil(Math.random()*10);for(cont=0;cont<5;cont++){ p=prompt("Introduce un número: ","");
if(p == n){ alert("enhorabuena!!! Has acertado!!!");
cont=5;}else{ if(n > p)
{document.write("El número es mayor que "+p+"<br>");
}else{ document.write("El número es menor que
"+p+"<br>");}
}}alert("El número correcto era: "+n);
Instrucción while
Sirve para ejecutar un conjunto de instrucciones mientras se cumpla una condición dada.
La sintaxis es la siguiente:
while(condicion){ instrucciones;}
Ejemplo:
var i=0;while(i<11){ alert(“Valor de i: “+i+”<br>”);
i++;}
Importante:
Hay que prestar mucha atención a la condición, ya que si se cumple indefinidamente el bucle nunca finaliza y la ejecución quedará bloqueada.
Ejemplo: en el código anterior, si por error olvidamos incrementar la variable, siempre se cumplirá la condición:
var i=0;while(i<11){ alert(“Valor de i: “+i+”<br>”);
i++;}
Ejercicio:
Solicitar una clave y comprobar si es correcta. Si no lo es, debe seguir pidiéndola hasta que sea correcta.
Ejercicio:
1.- Crear un programa que solicita un nombre de un alumno y tres notas diferentes. Debe calcular la nota media e imprimirla junto con el nombre en forma de tabla:
nombre NotaMedia
2.- Modificar el código anterior de manera que solicite el número de alumnos al principio y repita el código para cada uno de los alumnos creando una tabla con todos ellos
Solución:
var i,nombre,n1,n2,n3,media;n1=0;n=prompt("Introduce el número de alumnos","");document.write("<table border=2><tr><td>Nombre</td><td>Media</td></tr>");for(i=1;i<=n;i++){ nombre=prompt("Nombre: ","");
n1=parseInt(prompt("Nota1",""));n2=parseInt(prompt("Nota2",""));n3=parseInt(prompt("Nota3",""));media=(n1+n2+n3)/3;
document.write("<tr><td>"+nombre+"</td><td>"+media+"</td></tr>");}
document.write("<table>");
Esta instrucción no existía en versiones antiguas de JavaScript, por lo que puede que no funcione en navegdores antiguos.
Es muy similar al bucle while, la única diferencia es que antes de evaluar por primera vez la condición ejecuta el bloque de código, por lo que siempre se ejecuta al menos una vez.
Sintaxis:do{ instrucciones;}while(condición);
Código con while:var i=0;while(i<0){ alert(“Mensaje”);}
Código con do while:var i=0;do{ alert(“Mensaje”);}while(i<0);
Una función es un conjunto de instrucciones que ejecutan una tarea concreta.
Debemos diferenciar entre definición de la función y llamada a la función. La definición es la descripción de la función en sí y que será ejecutado cuando sea llamada.
7. Funciones y eventos
Partes de una función
Una definición de función consta de las siguientes partes:• Palabra clave function• Nombre de la función. Las reglas para crear este nombre son las mismas que para crear nombres de variables• Argumentos. Son los valores que pasamos a una función cuando la llamamos y que pueden ser utilizados en su código. Los argumentos se separan entre sí por comas y se encierran entre llaves. La lista de argumentos puede ser vacía.• Instrucciones. Van encerradas entre llaves
Sintáxis:function nombre_funcion(argumentos){ instrucciones;}
La definición de las funciones se suele situar en la cabecera del documento.
La función no se ejecuta hasta que es llamada por su nombre de la siguiente forma:
nombre_funcion();
Ejemplo: <head><script>function saludo(){ document.write(“HOLA”);}</script></head><body><script>
saludo();</script></body>
Argumentos
Los argumentos son los valores que se pasan en la llamada y se podrán utilizar en las instrucciones de la función.Ejemplo:
<head><script>function saludo(nombre){ document.write(“HOLA ”+nombre);}</script></head><body><script>
n=prompt(“Nombre”,””);saludo(n);
</script>
Valor de una función
Las funciones también pueden devolver valores. Esto se hace con la instrucción return de la siguiente forma:
function Mitad(valor){ return valor/2;}
La llamada a esta función sería por ejemplo;
n=Mitad(10);
Después de ejecutar la instrucción el valor de n es 5.
Eventos
Los eventos son sucesos que ocurren cuando el usuario realiza una acción, como por ejemplo pulsar un botón o pasar sobre una imagen.
Los eventos se están asociados a elementos HTML, no a elementos JavaScript.Para asociar el evento a un conjunto de instrucciones, creamos una función y la llamamos cuando se produzca el evento utilizando los atributos de evento de las etiquetas HTML.
Eventos
Ejemplo:
<script>function saludo(){ alert("Hola");}</script>
<img src=boton.jpg onmouseover=saludo() >
Un objeto es algo que tiene unas características y un comportamiento particular. Es un conjunto de propiedades y funciones (llamadas métodos).
8. Objetos
Ejemplo:Una persona tiene unas características o propiedades : pelo corto, altura, color de pelo, peso,...Además de propiedades una persona también tiene un comportamiento, ejecuta ciertas acciones: comer, dormir,...El conjunto de propiedades y acciones/funciones definen un objeto.
En JavaScript existen una serie de objetos predefinidos, con sus propiedades y funciones (métodos), algunas de las cuales ya hemos utilizado.
Uno de los objetos más importantes es el objeto Window, que contiene a su vez otros objetos, estructurados en forma de árbol.
La estructura es la siguiente:
windowwindow
selfself
documentdocument
navigatornavigator
ScreenScreen
LocationLocation
HistoryHistory
FormsForms
Objetodocument
Objetodocument
Para hacer uso de las propiedades y métodos de un objeto debemos poner el nombre del objeto seguido de un punto y la propiedad o el método a continuación, por ejemplo:
window.status=“mensaje”;
Los métodos son funciones que podemos ejecutar y las propiedades son simplemente variables que podemos asignar o leer.
Ahora veremos algunos ejemplos de propiedades y métodos de los objetos más utilizados
Objeto window
La propiedad status del objeto window indica el mensaje que aparece en la barra de estado.
Ejercicio:Crea una página que contenga un hipervínculo.
Al pasar por encima aparece la dirección de destino en la barra de estado.
Añade el código JavaScript necesario para que al pasar por encima aparezca el mensaje “Estás sobre el enlace” en la barra de estado.
Cuestión: ¿Funciona en todos los navegadores?
El método open abre una ventana nueva con las propiedades que le indiquemos.La sintaxis es:
ventana=open(“URL”,”nombre”,”opciones”)
donde opciones será una lista separada por comas de las siguientes propiedades:
toolbar locationdirectories
status menubar scrollbarsresizable width height
Ejemplo:
ventana=open(“URL”,”nombre”,”toolbar=no,menubar=no,status=yes,width=200,height=200,resizable=yes);
Ejercicio:Crea una página que contenga un botón que al pulsarlo (evento onclick) abra una página en las que no aparezca ninguna barra salvo la de estado y no se pueda redimensionar y además ponga un mensaje en la barra de estado.(prueba en distintos navegadores)
Otros métodos del objeto window son:
alertpromptconfirmclosePrintsetIntervalsetTimeout
Ejercicio: utilizando la ayuda de Internet pon un ejemplo con cada uno de ellos
<script>var edad=prompt("Indica tu edad");while(!confirm("Tu edad es: "+edad)){ edad=prompt("Indica tu edad");}if(edad < 18){ alert("Eres menor de edad, aún no puedes desayunar en el Hollywood");}else{ alert("Eres mayor de edad, ya puedes desayunar con los profes");}setTimeout("cerrar()",5000);document.write("Esta página se autodestruirá en 5 segundos (solo si tienes explorer)");function cerrar(){ window.close();}</script><br><a href="javascript:window.print()">Imprimir esta página</a>
Ejercicio: crea una página con un botón y que al pulsarlo la ventana tome el tamaño 600x400 píxeles y se coloque en la posición 100,100. de la pantalla
Objeto navigator
El objeto navigator permite obtener datos del navegador que estamos utilizando.
Por ejemplo, la propiedad appName facilita el nombre del navegador utilizado, y la propiedad languaje el lenguaje del mismo:
alert("Navegador: "+navigator.appName);alert(“Idioma : "+navigator.language);
Estas propiedades son solo de lectura
Podemos utilizar estas propiedades para hacer uso de la versión de Javascript que más se ajuste el navegador del cliente. Aunque debemos tener en cuenta que no son datos muy fiables.
Ejercicio:
Instala el componente “User Agent Switcher” de Firefox y averigua para qué sirve.
Objeto location
Este objeto contiene información sobre la página que se está visitando en ese momento. Algunas de las propiedades de este objeto solo tienen validez si la página está alojada en un servidor, no si está almacenada localmente.
Algunas de sus propiedades son:href → dirección completaprotocol → protocolo utilizado (http, ftp,…)host → nombre del servidor y puerto utilizadoshostname → solo nombre del servidor
Estas dos últimas no sirven para archivos locales
search → almacena los argumentos de llamada a la página, lo que acompaña a ‘?’ (cuando existe) en la barra de direcciones
Algunos de sus métodos son:reload() → recarga la páginareplace(url) → carga la página que se indique entre los paréntesis. Para ello hay que indicar la dirección completa, incluyendo el protocolo, por ejemplo:
location.replace('file:///D:/ejemplos/status.html')
Objeto history
Contiene información sobre las páginas ya visitadas.
La propiedad length indica el número de páginas visitadas desde esa ventana.
Los métodos de los que disponemos son los siguientes:
back() → carga la página anterior
forward() → carga la página siguiente
go(n) → salta a la página indicada por n, ejemplos:go(-1) → salta a la página anteriorgo(1) → salta a la página siguientego(-2) → retrocede dos páginas
Objeto history
Ejercicio:
crea una página con cuatro botones:
Uno para retroceder a la página anterior
Otro para avanzar a la página siguiente
Otro para retroceder dos páginas
Otro para avanzar dos páginas
Indica al cargar la página cuántas páginas se han visitado en esta ventana.
Acceso a css desde Javascript
El atributo style es un atributo más de los elementos HTMl, por lo tanto podremos acceder a él de la misma forma.
Ejemplo:
var imagen = document.getElementById("imagen");alert(imagen.style.margin);
Nombre de las propiedades del objeto style
La transformación del nombre de las propiedades CSS compuestas consiste en eliminar todos losguiones medios (-) y escribir en mayúscula la letra siguiente a cada guión medio.
Ejemplos: ▪ font-weight se transforma en fontWeight ▪ line-height se transforma en lineHeight ▪ border-top-style se transforma en borderTopStyle ▪ list-style-image se transforma en listStyleImage
Ejemplo:document.getElementById("enlace").style.textDecoration="none";
Ejemplo<a href=http://wwws.google.com id=enlace onmouseover=camba() onmouseout=camba()>Enlace a google</a>
<script>function camba(){
if(document.getElementById("enlace").style.color!="red"){ document.getElementById("enlace").style.color="red";
document.getElementById("enlace").style.textDecoration="none";}else{ document.getElementById("enlace").style.color="blue";
document.getElementById("enlace").style.textDecoration="underline";}
}</script>
Descripción:Al pasar sobre el enlace cambiará de color y desaparece el subrayado. Al salir vuelve a su estado anterior. Similar a la pseudoclase hover.
Objeto document
Hace referencia al contenido del documento HTML. Es el nodo raíz del DOM.
Algunas de las propiedades son:bgColor: color de fondofgColor: color del textovlink: color de los enlaces visitadosalink: color de los enlaces activos
Uno de los métodos más utilizados es write(), que ya conocemos de sobra para qué sirve.
Para utilizar el dato del cuadro de texto nombrePropietario debemos escribir:
document.getElementById(“nombrePropietario”).value
Si quisiéramos copiar el dato que el usuario ha escrito en el cuadroo nombreInquilino tendremos que usar la siguiente instrucción de asignación:
document.getElementById(“nombreInquilino”).value=document.getElementById(“nombrePropietario”).value
Ejercicio: completa el código de la página para que al pulsar el botón se copien los datos de nombre y apellidos de propietario a los del inquilino
Ejercicio:
Crea un formulario con dos cuadros de texto. Nombre y edad. Al pulsar el botón, se debe comprobar que ninguno de ellos sea vacío y que además, la edad sea un número entre 16 y 65. Si ésto se cumple, llamaremos al método sumbit() del objeto formulario, para que pase a la siguiente página. De lo contrario aparecerá un solo “alert” indicándonos que hay algo mal y no saltará a ninguna página.
<form action=datos.html id=formulario method=get>nombre:<input type=text id=nombre><br>edad:<input type=text id=edad><br><input type=button onclick=comprueba() value=Aceptar>
<script>function comprueba(){ var n=document.getElementById("nombre").value;
var e=document.getElementById("edad").value;if(n =="" || e==""){ alert("Algún campo vacío");}else{ if(e<66 && e>15)
{document.getElementById("formulario").submit();
}else{ alert("Edad incorrecta");}
}}</script>
Otros objetos
Otros objetos:
String: sirve para manejar cadenasMath: para realizar operaciones matemáticasDate: para manejar fechasArray: para manejar matrices
Objeto Math
abs(): Devuelve el valor absoluto de un número. El valor después de quitarle el signo.
ceil(): Devuelve el entero igual o inmediatamente siguiente de un número. Por ejemplo, ceil(3) vale 3, ceil(3.4) es 4.
floor(): Lo contrario de ceil(), pues devuelve un número igual o inmediatamente inferior.
max()Retorna el mayor de 2 números.
random(): Devuelve un número aleatorio entre 0 y 1. Método creado a partir de Javascript 1.1.
Ejercicio:
Crea una página en javascript que genere un número aleatorio entre 1 y 100, y pida al usuario que lo adivine (puedes utilizar el método prompt)..
Seguirá preguntando hasta que el número sea adivinado.
Cada vez que el usuario introduzca un número se debe indicar si el número secreto es mayor o menor.
<script>
var x=Math.ceil(Math.random()*100);
var a;
do{ a=prompt("Adivina un número del 1 al 100");
if(a<x){ alert("El número es mayor");
}else
if(a>x){ alert("El número es menor");
}else
alert("Acertaste!!!");}while(x!=a);</script>
<script>
var x=Math.ceil(Math.random()*100);
var a,min,max;min=1;max=100;do{ a=prompt("Adivina un número del "+min+" al "+max);
if(a<x){ alert("El número es mayor");
min=a;}else
if(a>x){ alert("El número es menor");
max=a;}else
alert("Acertaste!!!");}while(x!=a);</script>
Objeto String
length: Longitud de la cadena
split(separador): Sirve para crear un array a partir de una cadena en el que cada elemento es la parte de la cadena que está separada por el separador indicado por el parámetro.
substring(inicio,fin): Devuelve el substring que empieza en el carácter de inicio y termina en el carácter de fin.
ToLowerCase(): Pasa todos los caracteres de una cadena a minúsculas.
toUpperCase(): Pone todas los caracteres de un string en mayúsculas.
Ejemplo:
<form action=datos.html id=formulario method=get>nombre:<input type=text id=nombre name=nombre><br>
<input type=button onclick=may() value=Aceptar>
<script>function may(){ var n=document.getElementById("nombre").value;
document.getElementById("nombre").value=n.toUpperCase();
}</script>
top related