Informá(ca General2019Cátedra:
Valeria Drelichman | Pedro PaleoLeonardo Nadel | Norma Morales
Segundo cuatrimestre
• Funciones• Formularios • Arrays
• TP1 : Portfolio JavaScript
Segundo cuatrimestre
• HTML y CSS• Elementos de desarrollo web• Frameworks CSS y JavaScript• Servidores
• TP2 : SiBo web
Práctica !!!
• Hacer un programa para jugar con la computadora a adivinar el número.
• La computadora sortea un número al azar entre 1 y 100.
• El usuario ?ene 10 intentos para adivinarlo. • En cada intento que no adivina la
computadora le dice si el número sorteado es menor o mayor al número elegido.
Prác%ca !!!
• Hacer un programa para administrar las notas de los alumnos de una materia. Hay 6 alumnos.
• El programa permite cargar la nota, cambiar la nota cargada, calcular el promedio de las notas y calcular la can%dad de notas mayores al promedio.
Administrar notas
Alumno 1
Alumno 2
Alumno 3
Alumno 4
Alumno 5
Alumno 6
Calcular promedio del curso
Calcular can0dad de notas mayores al promedio
Objetos del navegador
• Son los objetos que están disponibles en JavaScript para controlar cualquier elemento presente en la página web.
• Cuando se carga una página, el navegador crea una jerarquía de objetos en memoria que sirven para controlar los dis>ntos elementos de dicha página.
Jerarquía de objetos del navegador
Objetos del navegador
• Todos los objetos comienzan en un objeto que se llama window.
• Además de ofrecer control, el objeto window da acceso a otros objetos o nodos como el documento (la página web).
• Para acceder a cualquier otro objeto de la jerarquía deberíamos empezar por el objeto window.
• JavaScript enDende que la jerarquía empieza en window aunque no se escriba.
Jerarquía de objetos del navegador
• Las propiedades de un objeto pueden ser a su vez otros objetos.
• El objeto document, por ejemplo, con<ene todas las propiedades y métodos necesarios para controlar muchos aspectos de la página.
Algunas propiedades del objeto window
• location• outerHeight• outerWidth
• Se puede recargar un página:location.reload();
Algunos métodos del objeto window
• alert(texto)• history.back() • close() • open() • print()• prompt()
Objeto document
• Con el objeto document se controla la página web y todos los elementos que contiene.
• El objeto document es la página actual que se está visualizando en ese momento.
Algunas propiedades del objeto document
• document.title• document.body• document.characterSet
• document.forms• document.images• document.links
Formularios HTML
• Permiten al usuario interactuar con aplicaciones web– En buscadores– En formularios de contacto– En menúes de navegación– Como elementos de interacción
Formularios
<form> </form>• El tag form encierra todos los elementos del
formulario– Botones– Cuadros de texto– Listas desplegables– Etc.
Formularios
<form ac-on="url" method="post"></form>• Atributos– ac-on (url indica la URL que se encarga de
procesar los datos del formulario)–method="post" o "get" (la forma en que se envían
los datos)– enctype="applica-on/x-www-form-urlencoded" o
"text/plain" o "mul-part/form-data"
label
<label>Título del campo</label>• Para definir el título de un campo• Atributos– for="id_de_elemento" (indica a qué campo hace
de título)
input
<input type="text" name="nombre" id="nombre">• Atributos– type="text | password | checkbox | radio | submit
| reset | file | hidden | button | image"– name="nombre"– id="nombre"
input
• Atributo type, nuevos valores en HTML5– email | url– number | range
• Se determinan restricciones con los atributos max, min, step
– color | search | tel– date | datetime-local | time | month | week
input
• Otros atributos de input– value="texto" (valor inicial)– size="nro de caracteres" (solo para text y
password)–maxlength="nro de caracteres" (text y password)– checked (preselecciona checkbox y radio)– tabindex="nro orden"
input
• Nuevos atributos de input en HTML5– placeholder="texto" (valor de referencia)– required (determina que es obligatorio completar
el campo)– autofocus (pone el foco en el campo cuando se
carga la página)– pattern="regexp" (el valor que se complete tiene
que coincidir con la expresión regular especificada)
input type="text"
<label for="nombre">Nombre</label><input type="text" id="nombre" name="nombre" size="40" maxlength="100">
• El atributo placeholder permite poner un valor de referencia, pero no se envía. Si se usa el atributo value, el valor se envía, se guarda o se controla por programación.
input type="password"
<label for="contrasena">Contraseña</label><input type="password" id="contrasena" name="contrasena" size="40" maxlength="8">
• No se puede ver lo que se escribe en el campo
input type="checkbox"<input type="checkbox" name="rojo" id="rojo"> <label for="rojo">Rojo</label> <input type="checkbox" name="verde" id="verde"><label for="verde">Verde</label><input type="checkbox" name="azul" id="azul"><label for="azul">Azul</label>
• Para acAvar y desacAvar varias opcionesrelacionadas pero no excluyentes
input type="radio"
<input type="radio" name="radio" id="si" value="si"><label for="si">Sí</label><input type="radio" name="radio" id="no" value="no"><label for="no">No</label>• Permite selccionar sólo una opción• Se usa el atributo name para indicar que
pertenecen al mismo grupo de opciones
input type="submit"
<input type="submit" name="enviar" id="enviar" value="Enviar">
• Envia los datos del formulario según lo especificado en el action
input type="reset"
<input type="reset" name="borrar" id="borrar" value="Borrar">
• Borra los datos ingresados en el formulario
textarea
<label for="comentarios">Comentarios</label> <textarea name="comentarios" id="comentarios" cols="45" rows="5"></textarea>
• Para permi<r ingresar gran can<dad de texto
select
<label for="cantidad">Cantidad</label><select name="cantidad" id="cantidad">
<option value="uno">Uno</option><option value="dos">Dos</option><option value="tres">Tres</option>
</select>
• Para listas o menues de opciones
select / option
• Atributos para select– size="nro" (filas de la lista que se muestran)–multiple (permite seleccionar más de una opción)
• Atributos para option– selected (seleccionado por defecto)
fieldset / legend
• La e.queta <fieldset> agrupa los campos del formulario y la e.queta <legend> asigna un nombre a cada agrupación.
Formularios en JavaScript
• El objeto form depende en la jerarquía de objetos del objeto document.
• De un formulario dependen todos los elementos que hay dentro, como pueden ser campos de texto, cajas de selección, áreas de texto, botones de radio, etc.
Formularios en JavaScript
• Para acceder a un formulario desde el objeto document podemos hacerlo de dos formas.– A partir de su nombre, asignado con el atributo
NAME de HTML.–Mediante la matriz de formularios del objeto
document, con el índice del formulario al que queremos acceder.
Formularios en JavaScript<form name="formulario1">
<input type="text" name="campo1" id="campo1"><input type="text" name="campo2" id="campo2">
</form>
• Podremos acceder con su nombre:document.formulario1 • O con su índice, si es el primero: document.forms[0]
Formularios en JavaScript
• De similar manera accedemos a los elementos de un formulario, que dependen del objeto form. – A par<r del nombre del objeto asignado con el
atributo NAME de HTML.–Mediante la matriz de elementos del objeto form,
con el índice del elemento al que queremos acceder.
Formularios en JavaScript<form name="formulario1">
<input type="text" name="campo1" id="campo1"><input type="text" name="campo2" id="campo2">
</form>
• Para acceder al campo1:document.formulario1.campo1 document.forms[0].campo1document.formulario1.elements[0]document.forms[0].elements[0]
Formularios en JavaScript
• También podemos acceder a cualquierelemento con el método getElementById()
• Recordar que el ID debe ser único en la página.
Formularios en JavaScript
<form name="formulario1" id="formulario1"> <input type="text" name="campo1" id="campo1"><input type="text" name="campo2" id="campo2">
</form>
Formularios en JavaScript
• Se puede usar JavaScript para enviar un formulario (equivale a hacer click en un botóndel ;po “submit”).
document.formulario1.submit();
document.getElementById("formulario1").submit();
Formularios en JavaScript
• Se puede usar JavaScript para hacer reset de un formulario (equivale a hacer click en un botón del ;po “reset”).
document.formulario1.reset();
document.getElementById("formulario1").reset();
Formularios en JavaScript
• Se puede recuperar el contenido de un campo indicando que estamos accediendo al valor (“value”) del mismo.
contenido = document.formulario1.campo1.value;
contenido = document.getElementById("campo1").value;
Formularios en JavaScript
• Asimismo, se puede modificar el contenido de un campo indicando que estamos alterando el valor (“value”) del mismo.
document.formulario1.campo1.value = contenido;
document.getElementById("campo1").value = contenido;
Campos deshabilitados
• Un campo o un botón de un formulario puedeestar desahabilitado si se u6liza el atributo“disabled”.
<input type="text" name="campo1" id="campo1" disabled>
Formularios en JavaScript
• Se puede habilitar o deshabilitar un campo o un botón u7lizando JavaScript.
document.formulario1.campo1.disabled = false;
document.formulario1.campo1.disabled = true;
Informática General2019Cátedra:
Valeria Drelichman | Pedro PaleoLeonardo Nadel | Norma Morales