Sesión 4. Java Script
Implementación de Funcionalidades en la Página Web con JavaScript
Autora: Blanca Estévez Barriga
Como parte de la práctica de Sistemas de Comunicación Multimedia, añadiremos nuevas funcionalidades a la página web que desarrollamos antes, creando un archivo con extensión .js.
Puedes verla aquí:
Por problemas con W3, es posible, que no deje visualizar la página web, por ello, dejaré todos los códigos aquí:
Extensión 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('final.css')">Cambio a estilo1</button>
<button type="button" onclick="cambiarArchivoCss('final1.css')">Cambio a estilo2</button>
<button type="button" onclick="cambiarArchivoCss('final2.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 Blanca (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>
Extensión .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?";
}
}
}
Y los archivos css se pueden visualizar bien en la sesión 3.
Comentarios
Publicar un comentario