[PAC1] El lenguaje JavaScript fue diseñado para poder incluir interactividad a las distintas páginas. En este caso, el usuario realiza alguna acción y la página, reacciona. En el momento en el que el usuario realiza algo, se produce un determinado evento. Aun así, van a existir una serie de eventos que no están relacionados de forma directa con las distintas acciones del usuario. Completa el siguiente código para que forme un elemento botón en HTML y ejecute la sentencia JavaScript cuando se haga un click encima del botón.
<input [1]="Aceptar" [2]="button" [3]="alert('Ilerna Online')" />
(Separa cada respuesta con un espacio).
[PAC1] Enlaza los distintos tipos de eventos con su definición: Se originan cuando el usuario hace uso del ratón para realizar una acción. Se originan cuando el usuario pulsa alguna tecla. Se producen cuando hay algún cambio en la página del navegador. Son los que se originan cuando existe algún cambio en la estructura de la página.
[PAC1] Enlaza los distintos tipos de eventos con su definición: Deseleccionar el elemento. Deseleccionar un elemento que se ha modificado. Pinchar y soltar el ratón. Pinchar dos veces seguidas con el ratón. Seleccionar un elemento. Pulsar una tecla (sin soltar). La página se ha cargado completamente. Seleccionar un texto. Se abandona la página (por ejemplo, al cerrar el navegador).
[PAC1] Rellena los huecos de la siguiente línea de código para que esta cumpla con los siguientes requisitos:
- Que el input sea de tipo botón.
- Que muestre como texto “Aceptar”.
- Que tenga un valor identificativo llamado “Boton1”.
- Que lance la función “resalta()” para que cumpla el case 'mouseover'.
function resalta(elEvento) {
var evento = elEvento || window.event;
switch(evento.type) {
case 'mouseover':
this.style.borderColor = 'black';
break;
}
}
<[1] type="[2]" id="Boton1" value="Aceptar" onclick="[3]" />
(Separa cada respuesta con un espacio).
[PAC1] Responde a cada una de las siguientes preguntas: ¿Qué evento utilizarías para lanzar una función en cuanto se cargará la página web? ¿Qué evento utilizarías para lanzar una función en cuanto se haga doble click sobre un botón determinado? ¿Qué evento utilizarías para lanzar una función en cuanto se pulse cualquier tecla en un campo input de tipo texto? ¿Qué evento utilizarías para lanzar una función en cuanto se seleccione un determinado texto?.
[PAC2] Los formularios que podemos encontrar dentro de un documento web nos ofrecen la posibilidad de crear un grupo de elementos capaces de incluirse dentro del propio cuerpo de la petición, de tal forma que vamos a tener la posibilidad de poder recuperar todos los datos después de recibir la petición en el servidor. Existen una serie de métodos con los que podemos contar a la hora de enviar los distintos formularios, como pueden ser POST, GET o HEAD, entre otros. Enlaza las propiedades del formulario con sus respectivas definiciones: URL a donde enviar la petición. Indica el método a utilizar para enviar el formulario al servidor. Conjunto de caracteres que el servidor puede procesar. Indica el tipo de contenido usado (MIME type) para enviar el contenido del formulario en la petición: - application/x-www-formurlencoded (por defecto) - multipart/form-data (para formularios con input type=file) - text/plain. Identifica el nombre del formulario. Indica dónde mostrar los resultados recibidos del formulario enviado. Indica la posibilidad de que el navegador rellene de forma automática los valores de ciertos controles de la página. A día de hoy NO se encuentra estandarizado. Indica si debe comprobarse o NO la validez del formulario.
[PAC2] Enlaza los diferentes métodos del formulario con sus respectivas definiciones: Envía el formulario según el método y formato del contenido definido en los atributos del formulario. Es posible utilizar un control para simular este comportamiento. Inicializa todos los controles del formulario. Es posible usar un control para simular este comportamiento. Envía los datos en una cadena "visible". Conveniente para enviar pocos datos. Envía los datos en forma "invisible". Conveniente para enviar una gran cantidad de datos.
[PAC2] Rellena los siguientes huecos del código para que formen un formulario de envío:
<form id="formulario" [1]="miWeb.html" method="[2]">
<input [3]="text" value="" id="nombre" />
<[4] type="number" value="" id="edad" />
<input type="[5]" value="Enviar" id="boton1" />
<input type="[6]" value="Cancelar" id="boton2" />
</form>
(Separa cada respuesta con un espacio).
[PAC2] Una vez llegamos al punto de validar el formulario, nos encontramos ante un proceso que debe estar centrado en chequear un formulario para comprobar que todos los datos se han introducido de forma correcta. Enlaza los siguientes conceptos de validación con sus respectivas definiciones: Realiza la comprobación de si existe o NO un determinado valor. Se encarga de que la distinta información SOLO contenga valores numéricos. Comprueba que los datos sigan un patrón determinado, como puede ser el formato de un e-mail, una fecha, un número de teléfono, un número de la seguridad social, etc.
[PAC2] Las expresiones regulares son unos patrones de búsqueda que podemos utilizar cuando deseemos encontrar un texto que coincida con un determinado patrón. También existen situaciones en las que tengamos que buscar cadenas que deben cumplir un patrón en vez de una cadena exacta. Enlaza los siguientes caracteres de expresiones regulares con la definición de las coincidencias que puede tener cada valor que es buscado: Al inicio de una cadena. Al final de la cadena. Coincide 0 o más veces. Coincide 0 o 1 vez. Coincide 1 o más veces. Coincide exactamente n veces. Coincide n o más veces.
[PAC2] Las expresiones regulares son unos patrones de búsqueda que podemos utilizar cuando deseemos encontrar un texto que coincida con un determinado patrón. También existen situaciones en las que tengamos que buscar cadenas que deben cumplir un patrón en vez de una cadena exacta. Enlaza los siguientes caracteres de expresiones regulares con la definición de las coincidencias que puede tener cada valor que es buscado: Coincide al menos n, y máximo m veces. Cualquier carácter excepto nueva línea. Coincide con un carácter que NO es un espacio en blanco. Un tabulador. Un retorno de carro. Coincide con caracteres del tipo (letras, dígitos, subrayados). Dígitos del 0 al 9.
[PAC3] El DOM (Modelo de Objetos del Documento) es esencialmente una interfaz de programación de aplicaciones (API) que proporciona un conjunto estándar de objetos para representar documentos HTML y XML, así como un modelo estándar sobre cómo pueden combinarse dichos objetos y una interfaz estándar para acceder a ellos y manipularlos. De las siguientes afirmaciones, indica cuáles son verdaderas: A través del DOM, los programas pueden acceder y modificar el contenido, la estructura y el estilo de los documentos HTML y XML. A través del DOM, NO podemos modificar los estilos de los elementos creados en la web. Con el DOM, podemos crear objetos HTML de forma dinámica. El DOM HTML es un estándar donde se define cómo acceder, modificar, añadir o borrar elementos HTML. El DOM es una interfaz que NO permite el acceso a sus elementos.
[PAC3] Enlaza los cinco tipos de nodos principales del DOM con sus respectivas definiciones: Es el nodo raíz y del que derivan todos los demás nodos del árbol. Con este tipo de nodos representamos los atributos de las etiquetas XHTML. Es decir, un nodo por cada atributo=valor. Es el nodo que contiene el texto encerrado por una etiqueta XHTML. Representa los comentarios incluidos en la página XHTML. Los otros tipos de nodos pueden ser: CdataSection, DocumentFragment, DocumentType, EntityReference, Entity, Notation y ProcessingInstruction. Representa cada una de las etiquetas XHTML. Es el único nodo que puede contener atributos y el único del que pueden derivar otros nodos.
[PAC3] Enlaza las diferentes funciones del DOM con sus respectivas definiciones: Esta función obtiene una colección, que contiene todos los elementos de la página XHTML cuyo atributo name coincida con el indicado como parámetro. Esta función devuelve una colección de elementos cuya etiqueta tag name del documento XHTML coincida con la que se pasa como parámetro. Esta función es la más utilizada, ya que nos permite acceder directamente al elemento por el ID.
[PAC3] Rellena los huecos para que el siguiente código cumpla las siguientes condiciones:
- Referencia al input nombre del formulario.
- Referencia al input edad del formulario.
<form id="formulario" action="miWeb.html" method="POST">
<input type="text" value="" id="nombre" />
<input type="number" value="" id="edad" />
<input type="submit" value="Enviar" id="boton1" />
<input type="reset" value="Cancelar" id="boton2" />
</form>
document.getElementById("[1]");
document.getElementById("[2]");
(Separa cada respuesta con un espacio).
[PAC3] Enlaza las distintas propiedades del DOM con sus respectivas definiciones: Nombre del nodo (NO está definido para algunos tipos de nodo). Referencia al primer nodo de la lista. Referencia al último nodo de la lista. Lista de todos los nodos hijo del nodo actual. Devuelve true si el nodo actual tiene uno o más nodos hijo. Añade un nuevo nodo al final de la lista childNodes. Elimina un nodo de la lista childNodes. Inserta un nodo antes de la posición del nodo.
[PAC4] Debemos de tener claro que sin eventos prácticamente NO hay scripts. En casi todas las páginas web que incorporan JavaScript, suele haber eventos programados que disparan la ejecución de dichos scripts. La razón es muy simple: JavaScript fue diseñado para añadir interactividad a las páginas. Es decir, el usuario realiza algo y la página reacciona. Enlaza los diferentes tipos de modelos de eventos disponibles en JavaScript con sus respectivas definiciones: Los eventos se añaden como un atributo más del objeto. Los eventos se asignan como una propiedad del objeto y fuera de la estructura HTML. Para asignar un evento, se usa: addEventListener(). En cambio, para eliminar dicho evento, se usa: removeEventListener(). Para asignar un evento, se usa: attachEvent(). En cambio, para eliminar un evento, se usa: detachEvent().
[PAC4] Rellena el hueco de la siguiente instrucción:
<a [1]="pagina.html" onClick="miFuncion()">Aceptar</a> type src submit href.
[PAC4] Rellena el hueco de la siguiente instrucción:
document.getElementById("mienlace").[1] = miFuncion(); function onclick event.
[PAC4] Rellena el hueco de la siguiente instrucción:
document.getElementById("mienlace").[1]('click',miFuncion,false); // Según W3C addEventListener eventAdded onclick.
[PAC4] Rellena el hueco de la siguiente instrucción:
document.getElementById("mienlace").[1]('onclick', miFuncion); // Según Microsoft addEvent addListener attachEvent.
[PAC4] Rellena los huecos del siguiente código, de tal forma que al pulsar el botón HTML lance la función de JavaScript que hemos generado:
<!DOCTYPE html>
<html>
<body>
<button id="boton">Aceptar</button>
<script>
[1].getElementById("[2]").addEventListener("click",[3]);
function miFuncion() {
document.[4]("boton").innerHTML = "Aceptar pulsado!";
}
</script>
</body>
</html>
(Separa cada respuesta con un espacio).
[PAC4] El siguiente código muestra dos tipos de eventos, ya que los eventos del modelo de registro según Microsoft NO funcionan en todos los navegadores. Rellena los huecos del siguiente código:
function ev (x,y,z) {
if (document.[1]) {
x.[2](y,z,false);
} else {
x.[3]('on'+y,z);
}
}
(Separa cada respuesta con un espacio).
|
