Añadimos ejercicios de ventanas

lotusbaba · Nov 13, 2015 · 54a9a6f · 54a9a6f
1 parent 919e364
commit 54a9a6f
Show file tree

Hide file tree

Showing 6 changed files with 151 additions and 0 deletions.
diff --git a/AparienciaVentana/index.html b/AparienciaVentana/index.html
@@ -0,0 +1,24 @@
+<!--
+Crea la siguiente página Web (lo más dinámica posible) donde el botón crea una nueva ventana ubicada en la esquina superior izquierda de la pantalla (top = 0, left = 0) y con los tamaños indicados.
+Métodos a utilizar:
+	a. window.open()
+	b. document.write()
+Añade el esqueleto básico: html, head, title, body, ul...
+-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Elisa Navarro Zuara | Apariencia de una ventana</title>
+	<script type="text/javascript" src="js/aparienciaVentana.js"></script>
+</head>
+<body>
+	<noscript>
+		<p>La página que estás visualizando requiere para su correcto funcionamiento el uso de JavaScript. Si lo has deshabilitado, por favor activalo.</p>
+	</noscript>
+	<center>
+		<h1>Ejemplo de Apariencia de una Ventana</h1>
+		<input type="button" id="enviar" value="Abre una Ventana">
+	</center>
+</body>
+</html>
diff --git a/AparienciaVentana/js/aparienciaVentana.js b/AparienciaVentana/js/aparienciaVentana.js
@@ -0,0 +1,29 @@
+/**
+Crea la siguiente página Web (lo más dinámica posible) donde el botón crea una nueva ventana 
+ubicada en la esquina superior izquierda de la pantalla (top = 0, left = 0) y con los tamaños indicados.
+Métodos a utilizar:
+	a. window.open()
+	b. document.write()
+Añade el esqueleto básico: html, head, title, body, ul...
+*/
+
+function abrirVentana() {
+	var nuevaVentana = window.open("", "Nueva ventana", "width=300,height=200,top=0,left=0");
+	nuevaVentana.document.open();
+	nuevaVentana.document.write("\
+		<!DOCTYPE html>\
+		<html lang=\"en\">\
+		<head>\
+			<meta charset=\"UTF-8\">\
+			<title>Elisa Navarro Zuara</title>\
+			<script type=\"text/javascript\" src=\"js/aparienciaVentana2.js\"></script>\
+		</head>\
+		<body>\
+		</body>\
+		</html>");
+	nuevaVentana.document.close();
+}
+
+window.addEventListener("load", function() {
+	document.getElementById("enviar").addEventListener("click", abrirVentana);
+});
diff --git a/AparienciaVentana/js/aparienciaVentana2.js b/AparienciaVentana/js/aparienciaVentana2.js
@@ -0,0 +1,19 @@
+/**
+Crea la siguiente página Web (lo más dinámica posible) donde el botón crea una nueva ventana 
+ubicada en la esquina superior izquierda de la pantalla (top = 0, left = 0) y con los tamaños indicados.
+Métodos a utilizar:
+	a. window.open()
+	b. document.write()
+Añade el esqueleto básico: html, head, title, body, ul...
+*/
+
+// Crea el contenido de la ventana hija.
+function crearContenido() {
+	document.body.innerHTML = "<p>Se han utilizado las propiedades:</p>"
+							+ "<ul>" 
+							+ "<li>height=" + window.innerHeight + "</li>"
+							+ "<li>width=" + window.innerWidth + "</li>"
+							+ "</ul>";
+}
+
+window.addEventListener("load", crearContenido);
diff --git a/MultiplesVentanas/index.html b/MultiplesVentanas/index.html
@@ -0,0 +1,26 @@
+<!--
+Crea la siguiente página Web donde el botón crea cinco nuevas ventanas ubicadas en la esquina tal y como se muestran.
+Métodos a utilizar:
+	a. miVentana = window.open('','','width=200,height=200');
+	b. miVentana.document.open();
+	c. miVentana.document.write();
+		Añade el esqueleto básico: html, head, title, body, ul...
+	d. miVentana.document.close();
+-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Elisa Navarro Zuara | Múltiples ventanas</title>
+	<script type="text/javascript" src="js/multiplesVentanas.js"></script>
+</head>
+<body>
+	<noscript>
+		<p>La página que estás visualizando requiere para su correcto funcionamiento el uso de JavaScript. Si lo has deshabilitado, por favor activalo.</p>
+	</noscript>
+	<center>
+		<h1>Apertura de múltiples ventanas (5)</h1>
+		<input type="button" id="enviar" value="Abre múltiples ventanas...">
+	</center>
+</body>
+</html>
diff --git a/MultiplesVentanas/js/multiplesVentanas.js b/MultiplesVentanas/js/multiplesVentanas.js
@@ -0,0 +1,35 @@
+/**
+Crea la siguiente página Web donde el botón crea cinco nuevas ventanas ubicadas en la esquina tal y como se muestran.
+Métodos a utilizar:
+	a. miVentana = window.open('','','width=200,height=200');
+	b. miVentana.document.open();
+	c. miVentana.document.write();
+		Añade el esqueleto básico: html, head, title, body, ul...
+	d. miVentana.document.close();
+*/
+
+function abrirMultiplesVentanas() {
+	var miVentana;
+	for (var i = 0; i < 5; i++) {
+		miVentana = window.open("", "", "width=200,height=200,top="+(i*15)+",left="+(i*15)+"");
+		miVentana.document.open();
+		miVentana.document.write("\
+			<!DOCTYPE html>\
+			<html lang=\"en\">\
+			<head>\
+				<meta charset=\"UTF-8\">\
+				<title>Ventana "+(i+1)+"</title>\
+				<script type=\"text/javascript\" src=\"js/multiplesVentanas2.js\"></script>\
+			</head>\
+			<body>\
+				<p>Ventana "+(i+1)+"</p>\
+				<input type=\"button\" id=\"cerrar\" value=\"Cerrar\" />\
+			</body>\
+			</html>");
+		miVentana.document.close();
+	}
+}
+
+window.addEventListener("load", function() {
+	document.getElementById("enviar").addEventListener("click", abrirMultiplesVentanas);
+});
diff --git a/MultiplesVentanas/js/multiplesVentanas2.js b/MultiplesVentanas/js/multiplesVentanas2.js
@@ -0,0 +1,18 @@
+/**
+Crea la siguiente página Web donde el botón crea cinco nuevas ventanas ubicadas en la esquina tal y como se muestran.
+Métodos a utilizar:
+	a. miVentana = window.open('','','width=200,height=200');
+	b. miVentana.document.open();
+	c. miVentana.document.write();
+		Añade el esqueleto básico: html, head, title, body, ul...
+	d. miVentana.document.close();
+*/
+
+// Cierra una ventana.
+function cerrarVentana() {
+	window.close();
+}
+
+window.addEventListener("load", function() {
+	document.getElementById("cerrar").addEventListener("click", cerrarVentana);
+});