Módulo “Creación de estructuras de sitios web” - ANEXOS 1 RUTINAS JAVASCRIPT Para la introducción de rutinas JavaScript en nuestros códigos HTML, debemos tener en cuenta que: • Deben estar escritas exactamente igual al modo propuesto. • Que deben situarse en el head y/o body según nos indiquen. Nota: las etiquetas <head></head> y <body></body> han sido indicadas en color rojo para una mejor localización visual de dónde debemos pegar los scripts. En color verde hemos indicado los elementos del script que pueden ser modificados para poder personalizarlos o bien porque indiquen una ruta propia. 1.- Calcular la letra del NIF Calcula la letra del NIF al introducir un número de DNI. <head> <script> function averigua() { cadena="TRWAGMYFPDXBNJZSQVHLCKET" posicion = formulario.dni.value % 23 letra = cadena.substring(posicion,posicion+1) document.write("Nif: "+formulario.dni.value+" - "+letra) } </script> </head> <body> <form name="formulario"> DNI:<br> <input type="text" name="dni" maxlenght="9" size="9"> <input type="button" value="Ok" language="JavaScript" onclick="averigua()"> </form> </body>
Transcript
Módulo “Creación de estructuras de sitios web” - ANEXOS
1
RUTINAS JAVASCRIPT Para la introducción de rutinas JavaScript en nuestros códigos HTML, debemos tener en cuenta que:
• Deben estar escritas exactamente igual al modo propuesto. • Que deben situarse en el head y/o body según nos indiquen.
Nota: las etiquetas <head></head> y <body></body> han sido indicadas en color rojo para una mejor localización visual de dónde debemos pegar los scripts. En color verde hemos indicado los elementos del script que pueden ser modificados para poder personalizarlos o bien porque indiquen una ruta propia. 1.- Calcular la letra del NIF Calcula la letra del NIF al introducir un número de DNI. <head> <script> function averigua() { cadena="TRWAGMYFPDXBNJZSQVHLCKET" posicion = formulario.dni.value % 23 letra = cadena.substring(posicion,posicion+1) document.write("Nif: "+formulario.dni.value+" - "+letra) } </script> </head> <body> <form name="formulario"> DNI:<br> <input type="text" name="dni" maxlenght="9" size="9"> <input type="button" value="Ok" language="JavaScript" onclick="averigua()"> </form> </body>
Módulo “Creación de estructuras de sitios web” - ANEXOS
2
2.- Convertir Pesetas a Euros Script para incorporar una calculadora de Pesetas a Euros. Cambiando los valores pertinentes en el script, puede servir para cualquier a otro tipo de monedas. <body> <div align="center"> <form name="formulario" method="get"> <table border="1" cellpadding="2" cellspacing="0" bgcolor="#f5f5dc" bordercolor="#999999"> <tr> <td width="90"> <div align="center"> <font face="Verdana"><strong>Pesetas</strong></font></div> </td> <td> <div align="right"> <p><font face="Verdana"><strong><input type="button" value="-->" onclick="aEuros(document.formulario.pts.value);"></strong></font></p> </div> </td> <td> <p><input type="button" value="<--" onclick="aPts(document.formulario.euros.value);"></p> </td> <td width="90"> <div align="center"> <font face="Verdana"><strong>Euros</strong></font></div> </td> </tr> <tr> <td rowspan="2" colspan="2"> <div align="center"> <p><input type="text" name="pts" size="15"><br> <a href="javascript:borrar(1);"><font face="Verdana" size="1">Borrar</font></a></p> </div> </td> <td rowspan="2" colspan="2"> <div align="center"> <p><input type="text" name="euros" size="15"><br>
Módulo “Creación de estructuras de sitios web” - ANEXOS
3
<a href="javascript:borrar(2);"><font face="Verdana" size="1">Borrar</font></a></p> </div> </td> </tr> <tr></tr> </table> <script language="JavaScript"> function borrar(n){ if (n==1)document.formulario.pts.value=''; if (n==2)document.formulario.euros.value='';} function aEuros(valor){ if (valor=='')return true; document.formulario.euros.value=valor/166.386; // Este valor es editable if (document.formulario.euros.value=='NaN')document.formulario.euros.value='Error!';} function aPts(valor){ if (valor=='')return true; document.formulario.pts.value=valor*166.386; // Este valor es editable if (document.formulario.pts.value=='NaN')document.formulario.pts.value='Error!';} // --></script> </form> </div> </body> 3.- Mensaje en la barra de estado que aparece gradualmente En la barra de estado, nos irá apareciendo el mensaje que le indiquemos. <head> <script language="JavaScript"> var speed = 100 var pause = 3000 var timerID = null var bannerRunning = false var ar = new Array() ar[0] = ">>>> Mensaje personalizado <<<<" ar[1] = " Aquí puedes colocar toda la informacion, ....." ar[2] = "....... que quieras que aparezca en tu barra de estado, ....." ar[3] = "..... como por ejemplo la direccion de una pagina, ....." ar[4] = "..... o un mensaje, ....." ar[5] = "..... una cita, un pensamiento o ....." ar[6] = "..... una direccion web http://www.campusesine.com ....." var currentMessage = 0
Módulo “Creación de estructuras de sitios web” - ANEXOS
4
var offset = 0 function stopBanner() { if (bannerRunning) clearTimeout(timerID) bannerRunning = false } function startBanner() { stopBanner() showBanner() } function showBanner() { var text = ar[currentMessage] if (offset < text.length) { if (text.charAt(offset) == " ") offset++ var partialMessage = text.substring(0, offset + 1) window.status = partialMessage offset++ // IE sometimes has trouble with "++offset" timerID = setTimeout("showBanner()", speed) bannerRunning = true } else { offset = 0 currentMessage++ if (currentMessage == ar.length) currentMessage = 0 timerID = setTimeout("showBanner()", pause) bannerRunning = true } } startBanner(); // --> </script> </head> 4.- Simula una máquina de escribir El mensaje que le indiquemos irá escribiéndose en nuestra pantalla de forma similar a una máquina de escribir. <head> <script language="JavaScript"> <!-- var isIE4 = (navigator.appVersion.charAt(0)>=4 && (navigator.appVersion).indexOf("MSIE") != -1); var isNN4 = (navigator.appVersion.charAt(0)>=4 && (navigator.appName).indexOf("Netscape") != -1);
Módulo “Creación de estructuras de sitios web” - ANEXOS
5
tID = 0; i = 0; spd = 50; str= "Aquí ponemos el mensaje que queremos que nos aparezca de una manera similar en la que se escribiria con una maquina de escribir.” function typeLayer() { if(i > str.length){ clearTimeout(tID); } else { msg = str.substring(0,i); if(isNN4 == true){ document.layers['layer1'].document.write('<font face="Arial" color="#004080">'+msg.fontsize(2)+'</font>'); document.layers['layer1'].document.close(); } if(isIE4 == true){ layer1.innerHTML = '<strong><font face="Arial" color="#004080">'+msg.fontsize(2)+'</font></strong>'; } i++; tID = setTimeout("typeLayer()",spd); } } //--> </script> <span id="layer1" style="position: absolute; left: 10px; top: 20px"></span> </head> <body onload="typeLayer()" onunload="clearTimeout(tID)"> </body> 5.- Muestra un mensaje en la barra de estado <head> <script Language="JavaScript"> <!-- stcnt =0; msg = "Escribe el texto que quieras en la barra de estado"; blnk = " "; str = blnk + blnk + blnk + msg; function scroller() { window.status = str.substring(stcnt++,str.length+1); if (stcnt>str.length) stcnt=0; setTimeout("scroller()",200); } // -->
Módulo “Creación de estructuras de sitios web” - ANEXOS
6
</script> </head> <body onload="scroller()"> </body> 6.- Muestra un reloj y un calendario en la barra de estado <head> <script language="javascript"> function time() { hoy = new Date(); ann = hoy.getFullYear(); mes = hoy.getMonth()+1; dia = hoy.getDate(); hor = hoy.getHours(); min = hoy.getMinutes(); seg = hoy.getSeconds(); if (min < 10) min = "0"+min if (seg < 10) seg = "0"+seg window.status = dia+"/"+ mes+"/"+ ann+" "+ hor+":"+ min+":"+ seg setTimeout('time()',1001); } </script> </head> <body onLoad="time()"> </body>
7.- Efectos 3D en textos sin utilizar imágenes <head> <title>Letras 3D</title> <style> body { background:silver; font-family:Arrus BT,Garamond,Times New Roman; } div { position:absolute; } </style> <head> <body> <style> .info { font-family:Times New Roman; positon:relative;} .light { top:-1; left:-1; color:white;} .shade { top:+1; left:+1; color:pink; }
Módulo “Creación de estructuras de sitios web” - ANEXOS
Módulo “Creación de estructuras de sitios web” - ANEXOS
9
<script languaje="JavaScript"> var mydate=new Date() var year=mydate.getYear() if (year < 1000) year+=1900 var day=mydate.getDay() var month=mydate.getMonth() var daym=mydate.getDate() if (daym<10) daym="0"+daym var dayarray=new Array("Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sabado") var montharray=new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre") document.write("<small><font color='000000' face='Verdana'>"+dayarray[day]+" "+daym+" de "+montharray[month]+" de "+year+"</font></small>") </script> </body> 9.- Muestra la hora actual AM - PM <head> <title> Hora actual </title> </head> <body onLoad="show5()"> <span id="liveclock" style="position:absolute;left:0;top:0;"></span> <script language="JavaScript"> <!-- function show5(){ if (!document.layers&&!document.all) return; var Digital=new Date(); var hours=Digital.getHours(); var minutes=Digital.getMinutes(); var seconds=Digital.getSeconds(); var dn="AM"; if (hours>12){ dn="PM"; hours=hours-12; } if (hours==0) hours=12; if (minutes<=9) minutes="0"+minutes;
Módulo “Creación de estructuras de sitios web” - ANEXOS
10
if (seconds<=9) seconds="0"+seconds; myclock="<font size='5' face='Verdana' ><b><font size='2'>Ahora mismo son las: </font>"+hours+":"+minutes+":" +seconds+" "+dn+"</b></font>"; if (document.layers){ document.layers.liveclock.document.write(myclock); document.layers.liveclock.document.close(); } else if (document.all) liveclock.innerHTML=myclock setTimeout("show5()",1000) } //--> </script> </body> 10.- Validar campos del formulario (incluyendo e-mail) <head> <script LANGUAGE="JavaScript"> function Validar(form) { if (form.Nombre.value == "") { alert("Por favor ingrese su nombre"); form.Nombre.focus(); return; } if (form.Email.value == "") { alert("Por favor ingrese su dirección de e-mail"); form.Email.focus(); return; } if (form.Domicilio.value == "") { alert("Por favor ingrese su domicilio"); form.Domicilio.focus(); return; } if (form.Telefono.value == "") { alert("Por favor ingrese su número de teléfono"); form.Telefono.focus(); return; } if (form.Empresa.value == "") { alert("Por favor ingrese el nombre de su empresa"); form.Empresa.focus(); return; } if (form.NumeroTarjeta.value == "") { alert("Por favor ingrese los números de su tarjeta de crédito"); form.NumeroTarjeta.focus(); return; } if (form.Codigo.value == "") { alert("Por favor ingrese el código de su tarjeta de crédito"); form.Codigo.focus(); return; } if (form.NombreTitular.value == "") { alert("Por favor indique el nombre del titular de la tarjeta de crédito"); form.NombreTitular.focus(); return; } if (form.Email.value.indexOf('@', 0) == -1 ||
Módulo “Creación de estructuras de sitios web” - ANEXOS
Módulo “Creación de estructuras de sitios web” - ANEXOS
16
<body> <form> <p><select class="whiteSelect" size="1"> <option>select one </option> <option class="optionYellow">option one</option> <option class="optionRed">option two</option> <option class="optionGreen">option three</option> <option class="optionYellow">option four</option> <option class="optionRed">option five</option> <option class="optionGreen">option six</option> </select> </p> </form> </body> 12.- La imagen cambia al hacer click sobre ella En ejemplos como éste, en el que se hace referencia a unas imágenes (imagen01.gif e imagen02.gif) debemos cambiar los nombres por los de las imágenes que nosotros tengamos (indicando su ruta si no está en la misma carpeta donde se encuentra nuestro archivo HTML) <head> <script language="javascript"> imagen1=new Image imagen1.src="imagen01.gif" imagen2=new Image imagen2.src="imagen02.gif" var i=1; function cambiar() { if (i == 1) { document.images['ejemplo'].src=imagen2.src i=2; } else { document.images['ejemplo'].src=imagen1.src; i=1; } } </script> </head> <body> <img src="imagen1.gif" name="ejemplo" onMousedown="cambiar()"> </body>
Módulo “Creación de estructuras de sitios web” - ANEXOS
17
13.- Deshabilita el botón derecho sobre las imágenes de una página <body> <script language="JavaScript1.2"> var clickmessage="Right click disabled on images!" function disableclick(e) { if (document.all) { if (event.button==2||event.button==3) { if (event.srcElement.tagName=="IMG"){ alert(clickmessage); return false; } } } else if (document.layers) { if (e.which == 3) { alert(clickmessage); return false; } } else if (document.getElementById){ if (e.which==3&&e.target.tagName=="IMG"){ alert(clickmessage) return false } } } function associateimages(){ for(i=0;i<document.images.length;i++) document.images[i].onmousedown=disableclick; } if (document.all) document.onmousedown=disableclick else if (document.getElementById) document.onmouseup=disableclick else if (document.layers) associateimages() </script> </body> 14.- Las imágenes cambian aleatoriamente al ingresar a la página En ejemplos como éste, debemos cambiar los nombres de las imágenes que se han incluido por los de las imágenes que nosotros tengamos (indicando su ruta si no está en la misma carpeta donde se encuentra nuestro archivo HTML)
Módulo “Creación de estructuras de sitios web” - ANEXOS
18
<body> <script language="javascript"> <!-- function VecImagenes() { n=0; this[n++]="imagen1.jpg"; this[n++]="imagen2.jpg"; this[n++]="imagen3.jpg" this.N=n; } var Imagenes=new VecImagenes(); src= Imagenes[ Math.floor(Math.random() * Imagenes.N) ] ; document.write("<IMG SRC="+src+">"); //--> </script> </body> 15.- Muestra las imágenes estilo slideshow
<head> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin NewImg = new Array ( "imagen1.jpg", "imagen2.jpg", "imagen3.jpg" ); var ImgNum = 0;
Módulo “Creación de estructuras de sitios web” - ANEXOS
19
var ImgLength = NewImg.length - 1; //Time delay between Slides in milliseconds var delay = 2000; var lock = false; var run; function chgImg(direction) { if (document.images) { ImgNum = ImgNum + direction; if (ImgNum > ImgLength) { ImgNum = 0; } if (ImgNum < 0) { ImgNum = ImgLength; } document.slideshow.src = NewImg[ImgNum]; } } function auto() { if (lock == true) { lock = false; window.clearInterval(run); } else if (lock == false) { lock = true; run = setInterval("chgImg(1)", delay); } } // End --> </script> </head> <body> <img src="imagen1.jpg" name="slideshow"> <table> <tr> <td align="right"><a href="javascript:chgImg(-1)">Anterior</a></td> <td align="center"><a href="javascript:auto()">Auto/Stop</a></td> <td align="left"><a href="javascript:chgImg(1)">Siguiente</a></td> </tr> </table> </body> 16.- Un tipo de Menú
Módulo “Creación de estructuras de sitios web” - ANEXOS
Módulo “Creación de estructuras de sitios web” - ANEXOS
22
this.version = null; ua = navigator.userAgent; s = "MSIE"; if ((i = ua.indexOf(s)) >= 0) { this.isIE = true; this.version = parseFloat(ua.substr(i + s.length)); return; } s = "Netscape6/"; if ((i = ua.indexOf(s)) >= 0) { this.isNS = true; this.version = parseFloat(ua.substr(i + s.length)); return; } // Treat any other "Gecko" browser as NS 6.1. s = "Gecko"; if ((i = ua.indexOf(s)) >= 0) { this.isNS = true; this.version = 6.1; return; } } var browser = new Browser(); //---------------------------------------------------------------------------- // Code for handling the menu bar and active button. //---------------------------------------------------------------------------- var activeButton = null; // Capture mouse clicks on the page so any active button can be // deactivated. if (browser.isIE) document.onmousedown = pageMousedown; else document.addEventListener("mousedown", pageMousedown, true); function pageMousedown(event) { var el; if (activeButton == null) return; if (browser.isIE) el = window.event.srcElement; else el = (event.target.tagName ? event.target : event.target.parentNode); if (el == activeButton) return; if (getContainerWith(el, "DIV", "menu") == null) { resetButton(activeButton); activeButton = null; }
Módulo “Creación de estructuras de sitios web” - ANEXOS
23
} function buttonClick(event, menuId) { var button; if (browser.isIE) button = window.event.srcElement; else button = event.currentTarget; button.blur(); if (button.menu == null) { button.menu = document.getElementById(menuId); menuInit(button.menu); } if (activeButton != null) resetButton(activeButton); if (button != activeButton) { depressButton(button); activeButton = button; } else activeButton = null; return false; } function buttonMouseover(event, menuId) { var button; if (browser.isIE) button = window.event.srcElement; else button = event.currentTarget; if (activeButton != null && activeButton != button) buttonClick(event, menuId); } function depressButton(button) { var x, y; button.className += " menuButtonActive"; x = getPageOffsetLeft(button); y = getPageOffsetTop(button) + button.offsetHeight; if (browser.isIE) { x += button.offsetParent.clientLeft; y += button.offsetParent.clientTop; } button.menu.style.left = x + "px"; button.menu.style.top = y + "px"; button.menu.style.visibility = "visible"; } function resetButton(button) { removeClassName(button, "menuButtonActive"); if (button.menu != null) {
Módulo “Creación de estructuras de sitios web” - ANEXOS
24
closeSubMenu(button.menu); button.menu.style.visibility = "hidden"; } } function menuMouseover(event) { var menu; if (browser.isIE) menu = getContainerWith(window.event.srcElement, "DIV", "menu"); else menu = event.currentTarget; if (menu.activeItem != null) closeSubMenu(menu); } function menuItemMouseover(event, menuId) { var item, menu, x, y; if (browser.isIE) item = getContainerWith(window.event.srcElement, "A", "menuItem"); else item = event.currentTarget; menu = getContainerWith(item, "DIV", "menu"); if (menu.activeItem != null) closeSubMenu(menu); menu.activeItem = item; item.className += " menuItemHighlight"; if (item.subMenu == null) { item.subMenu = document.getElementById(menuId); menuInit(item.subMenu); } x = getPageOffsetLeft(item) + item.offsetWidth; y = getPageOffsetTop(item); var maxX, maxY; if (browser.isNS) { maxX = window.scrollX + window.innerWidth; maxY = window.scrollY + window.innerHeight; } if (browser.isIE && browser.version < 6) { maxX = document.body.scrollLeft + document.body.clientWidth; maxY = document.body.scrollTop + document.body.clientHeight; } if (browser.isIE && browser.version >= 6) { maxX = document.documentElement.scrollLeft + document.documentElement.clientWidth; maxY = document.documentElement.scrollTop + document.documentElement.clientHeight; } maxX -= item.subMenu.offsetWidth; maxY -= item.subMenu.offsetHeight;
Módulo “Creación de estructuras de sitios web” - ANEXOS
25
if (x > maxX) x = Math.max(0, x - item.offsetWidth - item.subMenu.offsetWidth + (menu.offsetWidth - item.offsetWidth)); y = Math.max(0, Math.min(y, maxY)); item.subMenu.style.left = x + "px"; item.subMenu.style.top = y + "px"; item.subMenu.style.visibility = "visible"; if (browser.isIE) window.event.cancelBubble = true; else event.stopPropagation(); } function closeSubMenu(menu) { if (menu == null || menu.activeItem == null) return; if (menu.activeItem.subMenu != null) { closeSubMenu(menu.activeItem.subMenu); menu.activeItem.subMenu.style.visibility = "hidden"; menu.activeItem.subMenu = null; } removeClassName(menu.activeItem, "menuItemHighlight"); menu.activeItem = null; } function menuInit(menu) { var itemList, spanList var textEl, arrowEl; var itemWidth; var w, dw; var i, j; if (browser.isIE) { menu.style.lineHeight = "2.5ex"; spanList = menu.getElementsByTagName("SPAN"); for (i = 0; i < spanList.length; i++) if (hasClassName(spanList[i], "menuItemArrow")) { spanList[i].style.fontFamily = "Webdings"; spanList[i].firstChild.nodeValue = "4"; } } itemList = menu.getElementsByTagName("A"); if (itemList.length > 0) itemWidth = itemList[0].offsetWidth; else return; for (i = 0; i < itemList.length; i++) { spanList = itemList[i].getElementsByTagName("SPAN") textEl = null arrowEl = null;
Módulo “Creación de estructuras de sitios web” - ANEXOS
26
for (j = 0; j < spanList.length; j++) { if (hasClassName(spanList[j], "menuItemText")) textEl = spanList[j]; if (hasClassName(spanList[j], "menuItemArrow")) arrowEl = spanList[j]; } if (textEl != null && arrowEl != null) textEl.style.paddingRight = (itemWidth - (textEl.offsetWidth + arrowEl.offsetWidth)) + "px"; } if (browser.isIE) { w = itemList[0].offsetWidth; itemList[0].style.width = w + "px"; dw = itemList[0].offsetWidth - w; w -= dw; itemList[0].style.width = w + "px"; } } function getContainerWith(node, tagName, className) { while (node != null) { if (node.tagName != null && node.tagName == tagName && hasClassName(node, className)) return node; node = node.parentNode; } return node; } function hasClassName(el, name) { var i, list; list = el.className.split(" "); for (i = 0; i < list.length; i++) if (list[i] == name) return true; return false; } function removeClassName(el, name) { var i, curList, newList; if (el.className == null) return; newList = new Array(); curList = el.className.split(" "); for (i = 0; i < curList.length; i++) if (curList[i] != name) newList.push(curList[i]); el.className = newList.join(" "); } function getPageOffsetLeft(el) {
Módulo “Creación de estructuras de sitios web” - ANEXOS
27
var x; x = el.offsetLeft; if (el.offsetParent != null) x += getPageOffsetLeft(el.offsetParent); return x; } function getPageOffsetTop(el) { var y; y = el.offsetTop; if (el.offsetParent != null) y += getPageOffsetTop(el.offsetParent); return y; } </script> </head> <body> <div class="menuBar" style="width:80%;"> <a class="menuButton" href="" onclick="return buttonClick(event, 'fileMenu');" onmouseover="buttonMouseover(event, 'fileMenu');">File</a> <a class="menuButton" href="" onclick="return buttonClick(event, 'editMenu');" onmouseover="buttonMouseover(event, 'editMenu');">Edit</a> <a class="menuButton" href="" onclick="return buttonClick(event, 'viewMenu');" onmouseover="buttonMouseover(event, 'viewMenu');">View</a> <a class="menuButton" href="" onclick="return buttonClick(event, 'toolsMenu');" onmouseover="buttonMouseover(event, 'toolsMenu');">Tools</a> <a class="menuButton" href="" onclick="return buttonClick(event, 'optionsMenu');" onmouseover="buttonMouseover(event, 'optionsMenu');">Options</a> <a class="menuButton" href="" onclick="return buttonClick(event, 'helpMenu');" onmouseover="buttonMouseover(event, 'helpMenu');">Help</a> </div> <!-- Main menus. --> <div id="fileMenu" class="menu" onmouseover="menuMouseover(event)"> <a class="menuItem" href="blank.html">File Menu Item 1</a> <a class="menuItem" href="" onclick="return false;" onmouseover="menuItemMouseover(event, 'fileMenu2');" ><span class="menuItemText">File Menu Item 2</span><span class="menuItemArrow">▶</span></a> <a class="menuItem" href="blank.html">File Menu Item 3</a> <a class="menuItem" href="blank.html">File Menu Item 4</a> <a class="menuItem" href="blank.html">File Menu Item 5</a> <div class="menuItemSep"></div> <a class="menuItem" href="blank.html">File Menu Item 6</a>
Módulo “Creación de estructuras de sitios web” - ANEXOS
28
</div> <div id="editMenu" class="menu" onmouseover="menuMouseover(event)"> <a class="menuItem" href="blank.html">Edit Menu Item 1</a> <div class="menuItemSep"></div> <a class="menuItem" href="blank.html">Edit Menu Item 2</a> <a class="menuItem" href="" onclick="return false;" onmouseover="menuItemMouseover(event, 'editMenu3');" ><span class="menuItemText">Edit Menu Item 3</span><span class="menuItemArrow">▶</span></a> <a class="menuItem" href="blank.html">Edit Menu Item 4</a> <div class="menuItemSep"></div> <a class="menuItem" href="blank.html">Edit Menu Item 5</a> </div> <div id="viewMenu" class="menu"> <a class="menuItem" href="blank.html">View Menu Item 1</a> <a class="menuItem" href="blank.html">View Menu Item 2</a> <a class="menuItem" href="blank.html">View Menu Item 3</a> </div> <div id="toolsMenu" class="menu" onmouseover="menuMouseover(event)"> <a class="menuItem" href="" onclick="return false;" onmouseover="menuItemMouseover(event, 'toolsMenu1');" ><span class="menuItemText">Tools Menu Item 1</span><span class="menuItemArrow">▶</span></a> <a class="menuItem" href="blank.html">Tools Menu Item 2</a> <a class="menuItem" href="blank.html">Tools Menu Item 3</a> <div class="menuItemSep"></div> <a class="menuItem" href="" onclick="return false;" onmouseover="menuItemMouseover(event, 'toolsMenu4');" ><span class="menuItemText">Tools Menu Item 4</span><span class="menuItemArrow">▶</span></a> <a class="menuItem" href="blank.html">Tools Menu Item 5</a> </div> <div id="optionsMenu" class="menu"> <a class="menuItem" href="blank.html">Options Menu Item 1</a> <a class="menuItem" href="blank.html">Options Menu Item 2</a> <a class="menuItem" href="blank.html">Options Menu Item 3</a> </div> <div id="helpMenu" class="menu"> <a class="menuItem" href="blank.html">Help Menu Item 1</a> <a class="menuItem" href="blank.html">Help Menu Item 2</a> <div class="menuItemSep"></div> <a class="menuItem" href="blank.html">Help Menu Item 3</a> </div> <!-- File sub menus. --> <div id="fileMenu2" class="menu"> <a class="menuItem" href="blank.html">File Menu 2 Item 1</a>
Módulo “Creación de estructuras de sitios web” - ANEXOS
29
<a class="menuItem" href="blank.html">File Menu 2 Item 2</a> </div> <!-- Edit sub menus. --> <div id="editMenu3" class="menu" onmouseover="menuMouseover(event)"> <a class="menuItem" href="blank.html">Edit Menu 3 Item 1</a> <a class="menuItem" href="blank.html">Edit Menu 3 Item 2</a> <div class="menuItemSep"></div> <a class="menuItem" href="" onclick="return false;" onmouseover="menuItemMouseover(event, 'editMenu3_3');" ><span class="menuItemText">Edit Menu 3 Item 3</span><span class="menuItemArrow">▶</span></a> <a class="menuItem" href="blank.html">Edit Menu 3 Item 4</a> </div> <div id="editMenu3_3" class="menu"> <a class="menuItem" href="blank.html">Edit Menu 3-3 Item 1</a> <a class="menuItem" href="blank.html">Edit Menu 3-3 Item 2</a> <a class="menuItem" href="blank.html">Edit Menu 3-3 Item 3</a> <div class="menuItemSep"></div> <a class="menuItem" href="blank.html">Edit Menu 3-3 Item 4</a> </div> <!-- Tools sub menus. --> <div id="toolsMenu1" class="menu"> <a class="menuItem" href="blank.html">Tools Menu 1 Item 1</a> <a class="menuItem" href="blank.html">Tools Menu 1 Item 2</a> <div class="menuItemSep"></div> <a class="menuItem" href="blank.html">Tools Menu 1 Item 3</a> <a class="menuItem" href="blank.html">Tools Menu 1 Item 4</a> <div class="menuItemSep"></div> <a class="menuItem" href="blank.html">Tools Menu 1 Item 5</a> </div> <div id="toolsMenu4" class="menu" onmouseover="menuMouseover(event)"> <a class="menuItem" href="blank.html">Tools Menu 4 Item 1</a> <a class="menuItem" href="blank.html">Tools Menu 4 Item 2</a> <a class="menuItem" href="blank.html" onclick="return false;" onmouseover="menuItemMouseover(event, 'toolsMenu4_3');"><span class="menuItemText">Tools Menu 4 Item 3</span><span class="menuItemArrow">▶</span></a> </div> <div id="toolsMenu4_3" class="menu"> <a class="menuItem" href="blank.html">Tools Menu 4-3 Item 1</a> <a class="menuItem" href="blank.html">Tools Menu 4-3 Item 2</a> <a class="menuItem" href="blank.html">Tools Menu 4-3 Item 3</a> <a class="menuItem" href="blank.html">Tools Menu 4-3 Item 4</a> </div> </body>
Módulo “Creación de estructuras de sitios web” - ANEXOS
30
17.- Agrega un enlace del sitio a los favoritos del navegador <head> <script LANGUAGE="JavaScript"> function agregar(){ if ((navigator.appName=="Microsoft Internet Explorer") && (parseInt(navigator.appVersion)>=4)) { var url="http://www.campusesine.com” var titulo="Nombre del Sitio"; window.external.AddFavorite(url,titulo); } else { if(navigator.appName == "Netscape") alert ("Presione Crtl+D para agregar este sitio en sus Bookmarks"); } } </script> </head> <body> <!-- Copiar dentro del tag BODY --> <input type="button" value="Agregar a mis favoritos" onClick="javascript:agregar();"> </body> 18.- Imprimir una página <body> <a href="javascript:window.print();">Imprime esta página</a> </body> 19.- Convierte una página en la página de inicio <body> <!-- Copiar dentro del tag BODY --> <a class="chlnk" href onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.pekados.net');" style="CURSOR: hand">Página de inicio</a> </body> 20.- Redirecciona a los navegantes a otra página web <body> <script LANGUAGE="JavaScript"> var pagina="http://www.campusesine.com"
Módulo “Creación de estructuras de sitios web” - ANEXOS
31
function redireccionar() { location.href=pagina } setTimeout ("redireccionar()", 1000); </script> </body> 21.- Meta tag que redirecciona a los navegantes a otra página web <head> <meta HTTP-EQUIV="Refresh" CONTENT="3; URL=http://www.campuesine.com"> </head> 22.-Cuenta los días que lleva un sitio en Internet <body> <script> var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec") function countup(yr,m,d){ var today=new Date() var todayy=today.getYear() if (todayy < 1000) todayy+=1900 var todaym=today.getMonth() var todayd=today.getDate() var todaystring=montharray[todaym]+" "+todayd+", "+todayy var paststring=montharray[m-1]+" "+d+", "+yr var difference=(Math.round((Date.parse(todaystring)-Date.parse(paststring))/(24*60*60*1000))*1) difference+=" días" document.write("Este Sitio lleva "+difference+" en Internet desde su creación!") } //cambiar la fecha countup(2001,01,03) </script> </body> 23.- Cuenta los días que faltan para un evento <body> <script languaje="javascript"> //cambiar el texto
Módulo “Creación de estructuras de sitios web” - ANEXOS
32
var before="mi cumpleaños" var current="Hoy es mi cumpleaños!" var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec") function countdown(yr,m,d){ var today=new Date() var todayy=today.getYear() if (todayy < 1000) todayy+=1900 var todaym=today.getMonth() var todayd=today.getDate() var todaystring=montharray[todaym]+" "+todayd+", "+todayy var futurestring=montharray[m-1]+" "+d+", "+yr var difference=(Math.round((Date.parse(futurestring)-Date.parse(todaystring))/(24*60*60*1000))*1) if (difference==0) document.write(current) else if (difference>0) document.write("Faltan "+difference+" días para "+before) } //cambiar la fecha countdown(2002,2,10) </script> </body> 24.- Enviar e-mail con destinatario, asunto y cuerpo del mensaje <body> <script language="javascript"> function mailpage() { mail_str = "mailto:[email protected]?subject=Ejemplo: " + document.title; mail_str += "&body=Te recomiendo que visites esta página (www.campusesine.com) -- " + document.title; mail_str += ". Enlace: " + location.href; location.href = mail_str; } </script> <a HREF="javascript:mailpage()">E-mail This Page</a> </body> 25.- El scroll de noticias de la red
Módulo “Creación de estructuras de sitios web” - ANEXOS
Módulo “Creación de estructuras de sitios web” - ANEXOS
34
this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight this.newsScroll=newsScroll; this.moveIt=b_moveIt; this.x; this.y; this.obj = obj + "Object" eval(this.obj + "=this") return this } function b_moveIt(x,y){ this.x=x;this.y=y this.css.left=this.x this.css.top=this.y } function newsScroll(speed){ if(this.y>-this.scrollHeight){ this.moveIt(0,this.y-pr_step) setTimeout(this.obj+".newsScroll("+speed+")",speed) }else if(loop) { this.moveIt(0,lstart) eval(this.obj+".newsScroll("+speed+")") } } function newsScrollInit(){ oNewsCont=new makeObj('divNewsCont') oNewsScroll=new makeObj('divNewsText','divNewsCont') oNewsScroll.moveIt(0,lstart) oNewsCont.css.visibility='visible' oNewsScroll.newsScroll(speed) } onload=newsScrollInit; </script> </head> <body> <div id="divNewsCont"> <div id="divNewsText"> <p><font face="Arial" size="3"><b>Scroll de noticias:</b></font><br><br> <font face="Arial" size="2"><b>Creado por ti</b> - Un excelente script que nos permite desplazar texto por nuestras páginas.<br></font></p> <p> <font face="Arial" size="2"> <b>Pruebalo</b> - poniendo lo que quieras<br></font></p> <p><font face="Arial" size="3"><b><i> <A HREF="http://www.campusesine.com">CLICK AQUI PARA DESCARGAR EL PROGRAMA!</a></b></i></font></p> </div> </div> </body>
Módulo “Creación de estructuras de sitios web” - ANEXOS
35
26.- Abre una ventana popup en base al tamaño de una imagen <head> <script LANGUAGE="JavaScript"> <!-- function CargarFoto(img, ancho, alto){ derecha=(screen.width-ancho)/2; arriba=(screen.height-alto)/2; string="toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=1,width="+ancho+",height="+alto+",left="+derecha+",top="+arriba+""; fin=window.open(img,"",string); } // --> </script> </head> <body> <!-- imagen.jpg es el nombre del archivo, 240 es el ancho de la imagen y 350 el alto --> <a href="javascript:CargarFoto('imagen.jpg','240','350')">Abrir imagen</a> </body> 27.- Escribe tags en una ventana pop-up <body> <script language="javascript"> var win = window.open("", "win", "width=300,height=200"); var doc = win.document; doc.open("text/html", "replace"); doc.write("<HTML><HEAD><TITLE>New Document</TITLE></HEAD><BODY>Hello, world!</BODY></HTML>"); doc.close(); </script> </body> 28.- Permite abrir una ventana pantalla completa <head> <script LANGUAGE="JavaScript"> function pantallaCompleta(pagina) { window.open(pagina, '', 'fullscreen=yes, scrollbars=auto'); } </script> </head>
Módulo “Creación de estructuras de sitios web” - ANEXOS
36
<body onLoad="pantallaCompleta('tu-pagina.htm');"> </body> 29.- Abrir URL en ventana popup <head> <SCRIPT LANGUAGE="JavaScript"> <!-- function popUp(URL) { day = new Date(); id = day.getTime(); eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=320,height=240');"); } // --> </script> </head> <body> <!-- SEGUNDO PASO: Utilizar el siguiente link para abrir la ventana --> <A HREF="javascript:popUp('tu-pagina.htm')">Abrir Ventana Pop Up</A> </body> 30.- Lluvia El fondo de pantalla se llena de puntos cayendo de forma similar a gotas de lluvia. <body> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin var no = 50; var speed = 10; var ns4up = (document.layers) ? 1 : 0; var ie4up = (document.all) ? 1 : 0; var s, x, y, sn, cs; var a, r, cx, cy; var i, doc_width = 800, doc_height = 600; if (ns4up) { doc_width = self.innerWidth; doc_height = self.innerHeight; } else if (ie4up) {
Módulo “Creación de estructuras de sitios web” - ANEXOS
37
doc_width = document.body.clientWidth; doc_height = document.body.clientHeight; } x = new Array(); y = new Array(); r = new Array(); cx = new Array(); cy = new Array(); s = 8; for (i = 0; i < no; ++ i) { initRain(); if (ns4up) { if (i == 0) { document.write("<layer name=\"dot"+ i +"\" left=\"1\" "); document.write("top=\"1\" visibility=\"show\"><font color=\"blue\">"); document.write(",</font></layer>"); } else { document.write("<layer name=\"dot"+ i +"\" left=\"1\" "); document.write("top=\"1\" visibility=\"show\"><font color=\"blue\">"); document.write(",</font></layer>"); } } else if (ie4up) { if (i == 0) { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: "); document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: "); document.write("visible; TOP: 15px; LEFT: 15px;\"><font color=\"blue\">"); document.write(",</font></div>"); } else { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: "); document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: "); document.write("visible; TOP: 15px; LEFT: 15px;\"><font color=\"blue\">"); document.write(",</font></div>"); } } } function initRain() { a = 6; r[i] = 1; sn = Math.sin(a); cs = Math.cos(a); cx[i] = Math.random() * doc_width + 1; cy[i] = Math.random() * doc_height + 1; x[i] = r[i] * sn + cx[i];
Módulo “Creación de estructuras de sitios web” - ANEXOS
Módulo “Creación de estructuras de sitios web” - ANEXOS
39
// End --> </script> </body> 31.- Cambiar el color del fondo de las celdas Al pasar por las celdas, éstas cambian de color. Para ello siguen los siguientes pasos: <head> <script> function mOvr(src,clrOver) { if (!src.contains(event.fromElement)) { src.style.cursor = 'hand'; src.bgColor = clrOver; } } function mOut(src,clrIn) { if (!src.contains(event.toElement)) { src.style.cursor = 'default'; src.bgColor = clrIn; } } function mClk(src) { if(event.srcElement.tagName=='TD'){ src.children.tags('A')[0].click(); } } </script> </head> <body> <table> <tr> <td onclick="mClk(this);" onmouseout="mOut(this,'#475B70');" onmouseover="mOvr(this,'#729233');" vAlign="center" width="171" style="border-bottom: 1px solid rgb(0,0,0); padding-left: 6; padding-top: 1; padding-bottom: 1" bgcolor="#475B70" height="12"><a style="COLOR: rgb(255,255,255); TEXT-DECORATION: none" href="ver.asp?temav=javascript"><font face="Verdana" size="1">Artículos de JavaScript</font></a></td> </tr> <tr> <td onclick="mClk(this);" onmouseout="mOut(this,'#475B70');" onmouseover="mOvr(this,'#729233');" vAlign="center" width="171" style="border-bottom: 1px solid rgb(0,0,0); padding-left: 6; padding-top: 1; padding-bottom: 1" bgcolor="#475B70" height="1"><a style="COLOR: rgb(255,255,255); TEXT-DECORATION: none" href="ver.asp?temav=asp"><font face="Verdana" size="1">Artículos de ASP</font></a></td> </tr> </table> </body> Nota: #475B70: es el color de fondo principal (bgcolor=".."). Cuando el mouse se para sobre la celda cambia de color y al quitarlo (onmouseout...) vuelve al original. #729233: es el color de fondo secundario, el cual aparecerá al pasar el cursor del mouse sobre la celda (onmouseover...). 32.- Entrada con contraseña <head> <TITLE>pagina contraseña</TITLE> <SCRIPT LANGUAGE ="JavaScript"> <!-- se oculta la información de los navegadores antiguos function informar(){ var mensaje = "Usuario no autorizado..."; var usuarios = new Array(3);
Módulo “Creación de estructuras de sitios web” - ANEXOS
Módulo “Creación de estructuras de sitios web” - ANEXOS
41
33.- Mensaje automático
<head> <script language="javascript"> function AutoMensaje() { setTimeout("MuestraMensaje('¡Bienvenido!')", 5000) } function MuestraMensaje(mensaje) { alert(mensaje) } </script> </head> <body> <body onLoad="AutoMensaje()"> </body> 34.- Confirmación antes de entrar a un página Este sencillo script ilustra el uso del método confirm() del objeto window. Este método muestra un cuadro de confirmación con los botones de "Aceptar" y "Cancelar", y devuelve verdadero (true) o falso (false) en función del botón que pulse el usuario. Una aplicación práctica es ésta: se presenta un cuadro de confirmación antes de cargar la página, y si el usuario pulsa sobre "Cancelar" (no desea continuar), se hace un history.go(-1) para volver a la página anterior. Es útil para páginas con contenidos restringidos a adultos o que pueden herir la sensibilidad. <head> <script language="javascript"> function siono() { if (!confirm("AVISO: ¿Deseas entrar a este sitio?")) history.go(-1) return " " }
Módulo “Creación de estructuras de sitios web” - ANEXOS
42
document.write(siono())</script> </head> 35.- Visor de Imágenes
<head> <script language="javascript"> //retardo entre imagenes en la reproduccion automatica (milisegundos) var retardo_rotacion = 1000 //indice imagen inicial actual = 0 //ir a la siguiente imagen function siguiente() { if (document.formulario.imagen[actual+1]) { document.images.visor.src = document.formulario.imagen[actual+1].value document.formulario.imagen.selectedIndex = ++actual } else inicio() } //ir a la imagen anterior function anterior() { if (actual-1 >= 0) { document.images.visor.src = document.formulario.imagen[actual-1].value document.formulario.imagen.selectedIndex = --actual } else ultimo() } //ir a la primera imagen function inicio() { actual = 0 document.images.visor.src = document.formulario.imagen[0].value document.formulario.imagen.selectedIndex = 0 } //ir a la ultima imagen
Módulo “Creación de estructuras de sitios web” - ANEXOS
43
function ultimo() { actual = document.formulario.imagen.length-1 document.images.visor.src = document.formulario.imagen[actual].value document.formulario.imagen.selectedIndex = actual } //cambia a modo reproduccion automatica function repAuto(text) { document.formulario.automatico.value = (text == "Detener") ? "Reproducir" : "Detener" reproducir() } function cambiaLista() { actual = document.formulario.imagen.selectedIndex document.images.visor.src = document.formulario.imagen[actual].value } //realiza reproduccion automatica function reproducir() { if (document.formulario.automatico.value == "Detener") { actual = (actual == document.formulario.imagen.length-1) ? 0 : actual+1 document.images.visor.src = document.formulario.imagen[actual].value document.formulario.imagen.selectedIndex = actual window.setTimeout("reproducir()", retardo_rotacion) } } </script> </head> <body> <!-- Este formulario muestra el visor y los controles --> <form name=formulario> <table cellspacing=1 cellpadding=4 bgcolor="#000000"> <tr> <td align=center bgcolor="white"> <b>Visor de imágenes</b> </td> </tr> <tr> <td align=center bgcolor="white" width=200 height=150> <img src="imagen1.jpg " name="visor"> </td> </tr> <tr> <td align=center bgcolor="#C0C0C0"> <select name="imagen" onChange="cambiaLista();"> <option value="imagen1.jpg" selected>Primera imagen <option value="imagen2.jpg">Segunda imagen <option value="imagen3.jpg">Tercera imagen
Módulo “Creación de estructuras de sitios web” - ANEXOS
