JAVASCRIPT
En esta sesión creamos una página web interactiva en la que podemos cambiar el estilo de la página accionando botones, sin tocar el código. Esta página también interactúa con el usuario con alertas y con un campo de input.
En las siguientes imágenes se puede observar el funcionamiento de la página así como los distintos estilos.
 |
| Funcionamiento del botón de alerta |
 |
| Funcionamiento del cambio de cabecera |
 |
| Estilo líla |
 |
| Estilo rosa |
 |
| Estilo verde |
Para la creación de esta página, es necesario un archivo HTML , uno .js (java sript) y tantos .css como estilos diferentes queramos aplicar a nuestra página.
. ARCHIVO HTML .
<!doctype html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
<title>Página de prueba de la asignatura doble columna, encabezado y pie</title>
<link href="estilo1.css" rel="stylesheet" type="text/css" id="estilo">
</head>
<body onLoad="Bienvenido();">
<!—referencia al archivo javascript que vamos a usar-->
<script src="javascript.js"></script>
<script type="text/javascript">
window.setInterval (BlinkIt, 500);
var color = "red";
function BlinkIt () {
var blink = document.getElementById ("blink");
color = (color == " #ffffff")? "red" : " #ffffff";
blink.style.color = color;
blink.style.fontSize='36px';}
</script>
<div id="blink" onclick="parent.location='http://scm-cum.blogspot.com.es/'">
Click Me!</div>
Selecciona algo del texto: <input type="text" value="Hola clase!" onselect="myFunction2()">
<p id="nombre">Bienvenido</p>
<button type="button" onclick="cambiarArchivoCss('estilo1.css')">Cambio a estilo1</button>
<button type="button" onclick="cambiarArchivoCss('estilo2.css')">Cambio a estilo2</button>
<button type="button" onclick="cambiarArchivoCss('estilo3.css')">Cambio a estilo3</button>
<button type="button" onclick="myFunctiondemo()">Pulsame cambio header</button>
<button type="button" onclick="myFunctionalert()">Pulsame alert!</button>
<button type="button" onclick="myFunctiondemo1()">Pulsame otro cambio header</button>
<div id="demo">
<div id="container">
<div id ="header">
<h1>Sitio web de Halina (SCM)</h1>
</div> <!--fin de header-->
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Sobre mi</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="http://scm-cum.blogspot.com.es">Mi Blog</a></li>
</ul>
</div> <!-- fin de menu-->
<div id="mainContainer">
<div id ="content">
<h2>Contenido 1</h2>
<p>Información del bloque Contenido 1</p>
<h2>Contenido 2</h2>
<p>Información del bloque Contenido 2</p>
</div> <!--fin del content-->
<div id="sidebar">
<h3>Menu</h3>
<ul>
<li>Menu opcion 1</li>
<li>Menu opcion 2</li>
<li>Menu opcion 3</li>
</ul>
</div> <!-- fin de sidebar-->
<div id="footer">
<p> Sistemas de comunicación Multimedia</p>
</div> <!-- fin de footer-->
<!-- fin de container-->
</div>
</body>
</html>
. ARCHIVO .js .
//función para cambiar los estilos de nuestra página web
function cambiarArchivoCss(archivo) {
document.getElementById("estilo").href=archivo;
}
//función que cambiará el estilo del elemento identificado por "header"
//en la página web
function myFunctiondemo() {
var x = document.getElementById("header");
x.style.fontSize = "25px";
x.style.color = "white";
}
//función que cambiará el estilo del elemento identificado por "header"
//en la página web
function myFunctiondemo1() {
var x = document.getElementById("header");
x.style.fontSize = "20px";
x.style.color = "black";
}
//función que abre una ventana de alerta con el título "Hola Clase!"
function myFunctionalert() {
alert("Hola Clase!");
}
//función que mostrará un mensaje a los 5 segundos de...
function Bienvenido(){
setTimeout("alert('Bienvenido a esta página, este mensaje ha salido a los 5 segundos');",5000);
}
//función que visualizará un mensaje, seguirá el mensaje mientras se quiera cerrar y no //se introduzca algo
function myFunction2() {
var x=document.getElementById("nombre");
var person=null;
while (person==null)
{
person = window.prompt("Introduce tu nombre", "Nombre Apellidos");
if (person != null)
{
x.innerHTML="Hola " + person + "! Cómo estás hoy?";
}
}
}
Comentarios
Publicar un comentario