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