Esta semana ponemos en práctica nuevas aplicaciones de JavaScript. En la entrada anterior usamos este lenguaje en el
archivo.html, y no es del todo correcto, ya que el
archivo.html debe de contener la información de la página web, así como los
archivos.css los utilizamos para los diferentes estilos para la página. Por este motivo, debemos de crear un
archivo.js donde se encontrarán todas las funciones que queremos crear. Este archivo debe de ser mencionado en el
archivo.html para que, a la hora de llamar a estas funciones, estas funcionen correctamente en nuestra web.
¿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:
<script src="javascript.js"></script>
- 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.
