¿Lo ponemos en práctica? A continuación:
Para que se entienda mejor, pondré las funciones en azul y el uso de las funciones en el archivo.html en rosa
- Primerio, hacer referencia al archivo javascript que vamos a usar. Por ejemplo:
- Cambiar los estilos de nuestra página web:
//función para cambiar los estilos de nuestra página web
function cambiarArchivoCss(archivo) {
document.getElementById("estilo").href=archivo;
}
<!--Cambiar el estilo de las páginas-->
<button type="button" onclick="cambiarArchivoCss('final.css')">¡Original!</button>
<button type="button" onclick="cambiarArchivoCss('final2.css')">¡Aumenta 10%!</button>
<button type="button" onclick="cambiarArchivoCss('final3.css')">¡Aumenta 15%!</button>
- Cambiar el color del "content" en todos los estilos de la página web, usando un botón:
//función que cambiará el estilo del elemento identificado por "demo" en la página web
function myFunctiondemo() {
var x = document.getElementById("content");
x.style.color = "black";
}
<!--Cambiar el color del cuerpo-->
<button type="button" onclick="myFunctiondemo()">Cambia el color del cuerpo</button>
- Cambiar el color del "sidebar" en todos los estilos de la página web, usando un botón:
//función que cambiará el estilo del elemento identificado por "demo" en la página web
function myFunctiondemo1() {
var x = document.getElementById("sidebar");
x.style.color = "black";
}
<!--Cambiar el color del menú-->
<button type="button" onclick="myFunctiondemo1()">Cambia el color del menú</button>
- Crear una alerta al pulsar el botón de ¡INFORMACION!
//función que abre una ventana de alerta con el título "Esta página sera actualizada cada semana"
function myFunctionalert() {
alert("Esta página será actualizada cada semana");
}
<!--Mensaje de alerta, INFORMACION-->
<button type="button" onclick="myFunctionalert()">¡INFORMACION!</button>
- Crear una alerta que se iniciará automáticamente a los 5 segundos de que la página sea cargada:
//función que mostrará un mensaje a los 5 segundos de...
function Bienvenido(){
setTimeout("alert('Bienvenid@ a mi página Web, soy Victoria Estévez');",5000);
}
<!--Funcion de bienvenida, que se actualiza automaticamente-->
<body onLoad="Bienvenido();">
- Crear una función que visualizará un mensaje al introducir un texto en una ventana de alerta, pero esta ventana no podrá ser cerrada hasta que se introduzca el texto:
//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 y Apellidos");
if (person != null)
{
x.innerHTML="Hola " + person + "! Cómo estás hoy?";
}
}
}
<!--Funcion de selecionar el texto-->
Selecciona algo del texto: <input type="text" value="¿Cómo te llamas?" onselect="myFunction2()">
<p id="nombre">Bienvenido</p>
- Por último, para poner una llamada de atención para ir directamente al blog:
<!--Poner texto llamativo para dirigirse al blog-->
<script type="text/javascript">
window.setInterval (BlinkIt, 500);
var color = "red";
function BlinkIt () {
var blink = document.getElementById ("blink");
color = (color == "#ffffff")? "purple" : "#ffffff";
blink.style.color = color;
blink.style.fontSize='40px';}
</script>
<div id="blink" onclick="parent.location='http://scm-victoriaet2017.blogspot.com.es/'">
¡El Blog de Victoria!</div>
¿Queréis ver el resultado?
Visitar mi Web.
No hay comentarios:
Publicar un comentario