Ejemplo S

UNIVERSIDAD SAN PEDRO
Objetivo: Introduccin al Java Script

1. Pagina HTML bsica.
<HTML>
<HEAD>
<TITLE>Insertando JavaScript</TITLE>
</HEAD>
<BODY>
<CENTER>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</CENTER>
</BODY>
</HTML>
2. Fecha y Hora del Servidor
<HTML>
<HEAD><TITLE>Ejemplo simple 5</TITLE></HEAD>
<%@ LANGUAGE=JScript %>
<BODY>
<%
Fecha = new Date ()
Dia = Fecha.getDate() + "/" + Fecha.getMonth() + "/" + Fecha.getYear()
Hora = Fecha.getHours() + "." + Fecha.getMinutes() + "." + Fecha.getSeconds()
%>
<%="Hola, hoy es da " + Dia + ", hora " + Hora %>
</BODY>
</HTML>
3. Script sin texto HTML
<HTML>
<HEAD><TITLE>Ejemplo simple 6</TITLE></HEAD>
<BODY>
<% Fecha = new Date ()
mes= Fecha.getMonth()
if ((mes == 6) || (mes == 7))
{
Texto="Aqu en Madrid, donde est el equipo servidor hace mucho calor en verano"
}
else
{
Texto="Qu importa el calor cuando tenemos vacaciones!"
} %>
<% = Texto %>
</BODY>
</HTML>
4. Bucle For
<html>
<head>
<title>Ejemplo simple 2</title>
</head>
<body>
Ing. CIP Franz Denis Vargas Morales
Texto HTML original <BR> <BR>

<% for (i=1; i<=3; i++) %> Texto generado en el ejemplo 2 <BR>
</body>
</html>
5. Suma de los 100 primeros numeros
<html>
<head>
</head>
<body>
<% Acumulador=0
for (Indice=1; Indice<=100; Indice++)
{
Acumulador=Acumulador+Indice
} %>
La suma de los 100 primeros enteros es: <%=Acumulador%>
</body>
</html>
6. Hola todos en un bucle
<HTML>
<HEAD>
<TITLE>
Ejemplo simple 3</TITLE>
</HEAD>
<BODY>
<% for (i=3; i<=7; i++)
{ %>
<FONT SIZE=<%=i%>>Hola a todos
</FONT> <BR>
<% } %>
</BODY>
</HTML>
7. Tabla de Multiplicar
<html>
<head>
</head>
<body>
Tabla de multiplicar sin cabeceras<BR> <BR>
<TABLE BORDER="1" WIDTH="70">
<% for (i=1; i<=10; i++)
{%>
<TR>
<% for (j=1; j<=10; j++)
{ %>
<TD> <% = j*i %> </TD>
<% } %>
</TR>
<% } %>
</TABLE>
</body>
</html>
8. Ejemplo de IF
<HTML>
<HEAD>
<TITLE>Estructuras de Control</TITLE>
</HEAD>
<BODY>
<CENTER>
<SCRIPT LANGUAGE ="JavaScript">

</SCRIPT>
</CENTER>
</BODY>
</HTML>
9. Bucle FOR
<HTML>
<HEAD>
</HEAD>
<BODY>
<CENTER>
document.write("<H3>Nmeros pares entre 1 y 100...</H3>");
for (i=1 ; i<=100; i++){
if (i%2==0) {
document.write(i+", ");
}
if (i%10==0) { document.write("<BR>"); }
}
</SCRIPT>
</CENTER>
</BODY>
</HTML>
10. Bucle WHILE
<HTML>
<HEAD>
</HEAD>
<BODY>
<CENTER>
var i=1;
document.write("<H3>Nmeros pares entre 1 y 100...</H3>");
while ( i<=100 ){
if (i%2==0) {
}
i++;
}
</SCRIPT>
</CENTER>
</BODY>
</HTML>
11. Bucle - DO WHILE
<HTML>
<HEAD>
</HEAD>
<BODY>
<CENTER>
var k=0;
document.write("<H3>Nmeros pares entre 1 y ...</H3>");
do {
k=k+50;
for (i=k+1-50 ; i<=k; i++){
if (i%2==0) {
}
}
} while (confirm("Deseas ver los 25 prximos pares?"));
</SCRIPT>
</CENTER>
</BODY>
</HTML>
12. Sentencia WITH
<HTML>
<HEAD>
</HEAD>
<BODY>
<CENTER>
with (document) {
write("<H3>Utilizando la sentencia \"WITH\" ...</H3>");
write("ttulo: \"" + title +"\"<BR>");
write("<BR>");
write("color de fondo: " + bgColor + "<BR>");
write("color de primer plano: " + fgColor + "<BR>");
write("color de los enlaces visitados: " + vlinkColor + "<BR>");
write("color de los enlaces no visitados: " + alinkColor + "<BR>");
write("<H3>...Hecho</H3>");
}
</SCRIPT>
</CENTER>
</BODY>
</HTML>
13. Sentencia SWITCH
<HTML>
<HEAD>
</HEAD>
<BODY>
<CENTER>
var usuario="";
document.write("<H3>Utilizando la sentencia \"SWITCH\" ...</H3>");
usuario=prompt("Introduce el usuario de acceso:","");
switch (usuario.toUpperCase()){
case "CARLOS": document.write("Bienvenido Carlos...<BR>");
break;
case "JUAN": document.write("Bienvenido Juan...<BR>");
break;
case "PEPE":
document.write("Bienvenido Pepe...<BR>");
break;
default: document.write("No eres un usuario autorizado...<BR>");
break;
}
</SCRIPT>
</CENTER>
</BODY>
</HTML>
14. Utilizando Funciones

<HTML>
<HEAD>
<TITLE>Una Primera Funcin</TITLE>
function saludo(){
document.write("!Hola Mundo");
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
document.write("Vamos a llamar a una Funcin .. <BR>");
saludo();
document.write("<BR> ... Hecho");
</SCRIPT>
</CENTER>
</BODY>
</HTML>
PARTE II
Objetivo: Modelo de Objetos y Eventos en JavaScript
1. Pulsando Un Objeto
<HTML>
<HEAD>
<TITLE>Manejando Eventos</TITLE>
function saludo(){
alert(" Has pulsado... \""+document.miFormulario.miBoton.name+"\" !");
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<H1>Manejando Eventos</H1>
<BR>
<FORM NAME="miFormulario">
<INPUT TYPE="BUTTON" NAME="miBoton" VALUE="Plsame" onClick="saludo()">
</FORM>
</CENTER>
</BODY>
</HTML>
2. Enviando Y Limpiando Un Formulario
<HTML>
<HEAD>
function confirmar_reset(){
return confirm(" Deseas Limpiar el formulario... ?");
}
function confirmar_submit(){
return confirm(" Deseas enviar el formulario... ?");

}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<FORM NAME="miFormulario" onSubmit="return confirmar_submit()"
onReset="return confirmar_reset()">
<P><B>Por favor introduzca los siguientes datos:</B></P>
<TABLE>
<TR>
<TD ALIGN=RIGHT>Nombre:</TD>
<TD ALIGN=LEFT COLSPAN=3><INPUT TYPE="TEXT" NAME="nombre"
SIZE=10></TD>
</TR>
<TR>
<TD ALIGN=RIGHT>Apellidos:</TD>
<TD ALIGN=LEFT COLSPAN=3><INPUT TYPE="TEXT" NAME="apellidos"
SIZE=30></TD>
</TR>
<TR><TD ALIGN=CENTER COLSPAN=4><HR></TD></TR>
<TR>
<TD ALIGN=RIGHT>Direccin:</TD>
<TD ALIGN=LEFT COLSPAN=3><INPUT TYPE="TEXT" NAME="calle" SIZE=30></TD>
</TR>
<TR>
<TD ALIGN=RIGHT>Ciudad:</TD>
<TD ALIGN=LEFT><INPUT TYPE="TEXT" NAME="ciudad" SIZE=10></TD>
<TD ALIGN=RIGHT>Cod.Postal:</TD>
<TD ALIGN=LEFT><INPUT TYPE="TEXT" NAME="codigo" SIZE=5
MAXLENGTH=5></TD>
</TR>
</TABLE><BR>
<INPUT TYPE="SUBMIT" VALUE="Enviar">
<INPUT TYPE="RESET" VALUE="Limpiar">
</FORM>
</CENTER>
</BODY>
</HTML>
3. Modificando La Informacin
<HTML>
<HEAD>
}
}
function aMayusculas(campo){
campo.value=campo.value.toUpperCase();
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<TABLE>
<TR>
<TD ALIGN=LEFT COLSPAN=3><INPUT TYPE="TEXT" NAME="nombre" SIZE=10
onChange="aMayusculas(this)"></TD>
</TR>
<TR>
<TD ALIGN=LEFT COLSPAN=3><INPUT TYPE="TEXT" NAME="apellidos" SIZE=30
</TR>
<TR>
<TD ALIGN=LEFT COLSPAN=3><INPUT TYPE="TEXT" NAME="calle" SIZE=30
</TR>
<TR>
<TD ALIGN=LEFT><INPUT TYPE="TEXT" NAME="ciudad" SIZE=10
<TD ALIGN=LEFT><INPUT TYPE="TEXT" NAME="codigo" SIZE=5 MAXLENGTH=5></TD>
</TR>
</TABLE><BR>
</FORM>
</CENTER>
</BODY>
</HTML>
4. Recibiendo El Foco (Onfocus)
<HTML>
<HEAD>
}
}
}
function cambiaEstado(texto){
window.status=texto;
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<TABLE>
<TR>
onFocus="cambiaEstado('Nombre...')"
</TR>
<TR>
onFocus="cambiaEstado('Apellidos...')"
</TR>
<TR>
onFocus="cambiaEstado('Direccin habitual...')"
</TR>
<TR>
onFocus="cambiaEstado('Ciudad de residencia...')"
<TD ALIGN=LEFT><INPUT TYPE="TEXT" NAME="codigo" SIZE=5 MAXLENGTH=5
onFocus="cambiaEstado('Cdigo postal de su ciudad...')"></TD>
</TR>
</TABLE><BR>
</FORM>
</CENTER>
</BODY>
</HTML>
5. Perdiendo El Foco (Onblur)
<HTML>
<HEAD>
}
}
}
}
function compruebaCodigo(campo){
if (isNaN(campo.value)||(campo.value.length<5)){
alert("Debe introducir\nun cdigo numrico\nde 5 cifras");
campo.focus();
campo.select();
}
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<TABLE>
<TR>
</TR>
<TR>
</TR>
<TR>
</TR>
<TR>
onFocus="cambiaEstado('Cdigo postal de su ciudad...')"
onBlur="compruebaCodigo(this)"></TD>
</TR>
</TABLE><BR>
</FORM>
</CENTER>
</BODY>
</HTML>
6. Movimientos Del Raton
<HTML>
<HEAD>
}
}
}
10
}
campo.focus();
campo.select();
}
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<TABLE>
<TR>
</TR>
<TR>
</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE><BR>
<INPUT TYPE="SUBMIT" VALUE="Enviar" onMouseOver="this.value='Enviar el
formulario'"
onMouseOut="this.value='Enviar'">
<INPUT TYPE="RESET" VALUE="Limpiar" onMouseOver="this.value='Limpiar el
formulario'"
onMouseOut="this.value='Limpiar'">
</FORM>
</CENTER>
</BODY>
</HTML>
7. Carga Y Descarga De Un Documento
<HTML>
<HEAD>
11

var nueva_ventana;
}
}
}
}
campo.focus();
campo.select();
}
}
function abreVentanaInformativa(){
nueva_ventana=window.open("","ventanaInformativa","width=275,height=75,menubar
=no");
nueva_ventana.document.write("<TITLE>Manejando onLoad y onUnload</TITLE>");
nueva_ventana.document.write("<CENTER><BIG>En este Ejemplo manejaremos
los<BR>")
nueva_ventana.document.write("eventos bsicos de JavaScript</BIG></CENTER>");
}
function cierraVentanaInformativa(){
nueva_ventana.close();
}
</SCRIPT>
</HEAD>
<BODY onLoad="abreVentanaInformativa()" onUnload="cierraVentanaInformativa()">
<CENTER>
<TABLE>
<TR>
</TR>
<TR>
</TR>
<TR>
</TR>
<TR>
12
</TR>
</TABLE><BR>
<INPUT TYPE="SUBMIT" VALUE="Enviar" onMouseOver="this.value='Enviar el
formulario'"
onMouseOut="this.value='Enviar'">
<INPUT TYPE="RESET" VALUE="Limpiar" onMouseOver="this.value='Limpiar el
formulario'"
onMouseOut="this.value='Limpiar'">
</FORM>
</CENTER>
</BODY>
</HTML>
TIPS
Un ejemplo: el contador individualizado
Vamos a ver un ejemplo. Utilizaremos una galleta llamada VisitasAlCursoDeJavaScript para
guardar el nmero de veces que has visitado este curso:
cookies.txt
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY>
Por lo que veo,
<!-Contador();
// -->
</SCRIPT>
</BODY>
</HTML>
Formulario con validacin, que comprueba si la direccin de correo electrnico que
introduce el usuario es correcta:
<HTML>
<HEAD>
13
<TITLE>Ejemplo de formularios</TITLE>
function validar(direccion) {
if (direccion.indexOf("@") != -1)
return true;
else {
alert('Debe escribir una direccin vlida');
return false;
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="miFormulario"
METHOD="POST"
ACTION="mailto:yo@miproveedor.mipais"
ENCTYPE="text/plain"
onSubmit="return validar(this.email.value)">
Mandame tu e-mail: <INPUT NAME="email" TYPE="text"><BR>
<INPUT TYPE="submit" VALUE="Mandame tu e-mail">
</FORM>
</BODY>
</HTML>
Lista desplegable.
Como ejemplo, vamos a ver una lista desplegable que nos permita navegar por diversas
pginas. Cada etiqueta OPTION tendr como parmetro VALUE la direccin de la pgina web
e incluiremos un controlador del evento onChange (que se ejecuta cuando el usuario cambia
la opcin escogida en la lista) que llamar a una rutina.
select.html
<HTML>
<HEAD>
<TITLE>Ejemplo de Select</TITLE>
function irA(menu){
window.location.href = menu.options[menu.selectedIndex].value;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="formulario">
<SELECT NAME="menu" SIZE=1 onChange ="irA(this)">
<OPTION VALUE="">Visitar
<OPTION VALUE="http://www.ole.es">¡Olé!
<OPTION VALUE="http://www.ozu.es">Ozú
<OPTION VALUE="http://www.ozu.com">Otro ozú
<OPTION VALUE="http://www.es.lycos.de">Lycos
<OPTION VALUE="http://www.metabusca.com">Metabusca
</SELECT>
</FORM>
</BODY>
</HTML>
14

Ejemplo S

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Ejemplo S

Încărcat de

Drepturi de autor:

Formate disponibile

UNIVERSIDAD SAN PEDRO

Objetivo: Introduccin al Java Script

Ing. CIP Franz Denis Vargas Morales

UNIVERSIDAD SAN PEDRO

Texto HTML original <BR> <BR>

Ing. CIP Franz Denis Vargas Morales

UNIVERSIDAD SAN PEDRO

Ing. CIP Franz Denis Vargas Morales

UNIVERSIDAD SAN PEDRO

Ing. CIP Franz Denis Vargas Morales

UNIVERSIDAD SAN PEDRO

Ing. CIP Franz Denis Vargas Morales

UNIVERSIDAD SAN PEDRO

14. Utilizando Funciones

Ing. CIP Franz Denis Vargas Morales

UNIVERSIDAD SAN PEDRO

return confirm(" Deseas enviar el formulario... ?");

Ing. CIP Franz Denis Vargas Morales

UNIVERSIDAD SAN PEDRO

Ing. CIP Franz Denis Vargas Morales

UNIVERSIDAD SAN PEDRO

Ing. CIP Franz Denis Vargas Morales

UNIVERSIDAD SAN PEDRO

Ing. CIP Franz Denis Vargas Morales

UNIVERSIDAD SAN PEDRO

Ing. CIP Franz Denis Vargas Morales

UNIVERSIDAD SAN PEDRO

<SCRIPT LANGUAGE ="JavaScript">

Ing. CIP Franz Denis Vargas Morales

UNIVERSIDAD SAN PEDRO

Ing. CIP Franz Denis Vargas Morales

UNIVERSIDAD SAN PEDRO

Ing. CIP Franz Denis Vargas Morales

S-ar putea să vă placă și