Guia Laboratorio 06 Web1 23

ESCUELA PROFESIONAL
INGENIERÍA DE SISTEMAS E INFORMÁTICA
GUIA DE LABORATORIO: APLICACIONES WEB I
TEMAS A DESARROLLAR:
✓ DOM (DOCUMENT)
✓ VALIDACION DE FORMULARIOS
✓ OBJETOS
✓ EJERCICIOS
ESCUELA PROFESIONAL
GUÍA DE LABORATORIO: JAVA SCRIPT

Objeto string
1. Porpiedades y métodos de strign
PROGJS0701.HTML
<script>
var hola="Trabajando con string en Laboratorio" ;
var texto = "";
//largo del string
largo = hola.length;
document.write("String: "+hola+"<br>");
document.write("Largo del string: "+largo+ "<br>");
//-------------------
/*En la variable letra cargamos cada caracter del string
hola, en texto vamos sumando cada letra separada por
un guión*/
for (i=0;i<largo;i++) {
letra = hola.charAt(i);
texto = texto + letra +"-";
}
document.write("Texto separado por guiones:"+texto +"<br>");
//-------------------
//Dónde se encuentra la s?
ese = hola.indexOf("s");
document.write("La letra S se encuentra en el lugar: "+ese +
"<br>");
//--------------------------
//uso de replace
re=hola.replace("string","<b>texto</b>");
document.write("Se ha cambiado string por texto: " + re+"<br>")
//--------------------
//uso de substring
substr=hola.substring(5,10);
document.write("Se ha extraido el Subtexto: "+substr+"<br>");
//---------------------
//Paso todo a mayuscula
mayu = hola.toUpperCase()
document.write("Texto en mayuscula: "+mayu);
</script>
ESCUELA PROFESIONAL
2. Búsqueda de un caracter
PROGJS0702.HTML
<HTML>
<SCRIPT>
/* Programa que determina el número de "a" o "A" que
aparece en un texto */
var texto;
texto=prompt("Escribe el texto que quieras:","");
alert("Numero que aparece a y A = "+BuscaLetra(texto));
function BuscaLetra(x)
{
var numero=0;
for(i=0;i<x.length;i++)
{
if(x.charAt(i)=="a" || x.charAt(i)=="A")
numero++;
}
return numero;
}
</SCRIPT>
</HTML>
Objeto Math
3. Calculo de potencia y de la raíz enésima de un numero
PROGJS0703.HTML
<HTML>
<body>
<p><b>Potencia</b><p></p>
<script>
//potencia
neper = Math.E;
_pi = Math.PI;
document.write("Euler: "+neper+"<br>"+"PI:"+_pi+"<br>");
document.write("Usando pow elevamos 2 al
cubo:"+Math.pow(2,3)+"<br>")
document.write("Redondea 2.6: "+Math.round(2.6)+"<br>");
document.write("Redondea 2.4: "+ Math.round(2.4));
</script>

<p><b>Raiz cuadrada</b><p>
<p>Indice de la raiz : <input type='number' id='ind'><br></p>
<p>Radicando

<input type='text' id='rad'><br></p>
<input type='button' value='Calcular la raiz' onclick ='raiz()';><br>
ESCUELA PROFESIONAL
<p><input type="text" id="res" placeholder="Aqui veras el

resultado"></p>
<script>
function raiz(){
var ind,rad,resul
ind=parseFloat(document.getElementById("ind").value);
rad=parseFloat(document.getElementById("rad").value);
res=document.querySelector("#res");
resul=Math.pow(rad,1/ind);
res.value=resul;
//alert("resultado :"+resul);
}
</script>
</body>
</HTML>
Calcule las siguientes expresiones

raíz 5-ésima de 32
raíz 7-ésima de 4.7201
raíz 0.5-ésima de 2
Objeto document
4. Programa que muestra algunas propiedades de document.
PROGJS0704.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>04</title>
<SCRIPT>
function CambiarColorFondoDoc(RadioBtn) {
var i = 0, Enc = false;
while ( (i < RadioBtn.length) && !Enc ) {
if (RadioBtn[i].checked) Enc = true;
i++;
}
document.bgColor = RadioBtn[i-1].value;
}
function VerFechaUltimaModificacion() {
alert(document.lastModified); }
function VerTitulo() { alert(document.title); }
</SCRIPT>
</head>
<body>
<p>Quiero:</p>
ESCUELA PROFESIONAL
<OL>
<LI>Ver la <A HREF="javascript:VerFechaUltimaModificacion();">fecha
de la ultima modificacion</A> hecha al documento.
<LI>Cambiar el color de fondo:
<FORM>
<INPUT TYPE=RADIO NAME="Color" VALUE="silver" CHECKED>Plata<BR>
<INPUT TYPE=RADIO NAME="Color" VALUE="red">Rojo<BR>
<INPUT TYPE=RADIO NAME="Color" VALUE="lime">Lima<BR>
<INPUT TYPE=RADIO NAME="Color" VALUE="navy">Azul marino<BR>
<INPUT TYPE=RADIO NAME="Color" VALUE="white">Blanco<BR>
<INPUT TYPE=RADIO NAME="Color" VALUE="orange">Naranja<BR>
<INPUT TYPE=RADIO NAME="Color" VALUE="yellow">Amarillo<BR>
<INPUT TYPE=BUTTON VALUE="Cambiar Color"
onClick="CambiarColorFondoDoc(this.form.Color);">
</FORM>
<LI>Ver el <A HREF="javascript:VerTitulo();">titulo del
documento</A>
</OL>
</body>
</html>
PROGRAMACION VISUAL
5. Mensaje js al abandonar el foco de un cuadro de texto
PROGJS0705.HTML
<HTML>
<body>
<FORM>
ESCRIBE LO QUE QUIERAS:
<INPUT TYPE="text" SIZE="50" id="uno" onblur="ircaja()";>
<BR><BR>
PULSA TAB para pasar al siguiente cuadro de texto:
<BR><BR>
VUELVE A ESCRIBIR LO QUE TE VENGA EN GANA:
<INPUT TYPE="text" onBlur="alert('OK ESTUDIANTE');">
<BR>
<INPUT TYPE="text" VALUE="ESCRITO POR MI" id="caja">
</FORM>
<script>
function ircaja(){
x=document.querySelector("#uno");
document.querySelector("#caja").value=x.value
}
</script>
</body>
</HTML>
ESCUELA PROFESIONAL
6. Calculo del área de un triángulo usando el evento onblur.
PROGJS02V.HTML
<HTML>
<HEAD>
<SCRIPT>
function a(x,y)
{
return (parseFloat(x)*parseFloat(y)/2);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<BR>
Base: <INPUT TYPE="text" SIZE="5" NAME="bas">
<BR>
Altura: <INPUT TYPE="text" SIZE="5" NAME="alt"
onBlur="document.forms[0].result.value=a(document.forms[0].bas.value,this.valu
e);">
<BR>
<BR>
Area: <INPUT TYPE="text" SIZE="10" NAME="result">
</FORM>
</BODY>
</HTML>
PROGJS02V_B.HTML
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function a(x,y)
{
return (parseFloat(x)*parseFloat(y)/2);
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#0000FF">
<FONT COLOR="#FF0000">
<H1><P ALIGN="CENTER">Calculo del Area de un Triangulo</H1>
<HR>
</FONT>
<FONT COLOR="#FFFFFF"><P>
Escribe el los siguientes cuadros la base y la altura del triangulo.
Para pasar de un cuadro al siguiente pulsa la tecla de tabulacion
[Tab]. Al situarte en el ultimo cuadro, automaticamente aparecera
el valor del area. Para escribir un dato en decimales, debes utilizar el
"punto decimal", no la coma.
<BR>
<HR>
<FONT COLOR="YELLOW">
<FORM>
<P ALIGN="CENTER">
Base del triangulo: <INPUT TYPE="text" SIZE="5" NAME="bas">
<BR>
Altura del triangulo: <INPUT TYPE="text" SIZE="5" NAME="alt"
onBlur="document.forms[0].result.value=a(document.forms[0].bas.value,this.valu
e);">
<BR>
<BR><HR><P ALIGN="CENTER"><B>
Area del triangulo: <INPUT TYPE="text" SIZE="10" NAME="result">
<HR>
</FORM>
</FONT></B>
</BODY>
</HTML>
ESCUELA PROFESIONAL
7. Programa que responde con un scrip js al evento onclick de un boton
PROGJS03V.HTML
<HTML>
<HEAD>
function Saludo(nom)
{
alert("Hola "+nom);
}
</SCRIPT>
</HEAD>
<BODY>
<P ALIGN="CENTER">
<FORM>
Escribe tu nombre:
<INPUT TYPE="text" NAME="x">
<BR><BR>
<INPUT TYPE="button" VALUE="Hazme Clic" onClick="Saludo
(document.forms[0].x.value);">
</FORM>
</P>
</BODY>
</HTML>
8. Tabla de valores de la función
PROGJS04V.HTML
<HTML>
<HEAD>
function valores(x1,x2,paso)
{
var y;
var salida="";
x1=parseFloat(x1);
x2=parseFloat(x2);
paso=parseFloat(paso);
for(i=x1;i<=x2;i=i+paso)
{
y=i*i-5*i+10;
salida=salida+"x= "+i+" y="+y+"<BR>";
}
document.write("<P ALIGN='CENTER'><FONT COLOR='red'><B>"+salida);
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="GREEN"><FONT COLOR="YELLOW"><H1><P ALIGN="CENTER">
Tabla de Valores de la funcion: Y=X*X-5*X+10</H1>
<FORM>
Primer o minimo valor de X:<INPUT TYPE="text" NAME="min">
<BR>
Último o maximo valor de X:<INPUT TYPE="text" NAME="max">
<BR>
Incremento o Variacion entre los valores de X: <INPUT TYPE="text" NAME="incr">
<BR>
<HR><P ALIGN="CENTER">
<INPUT TYPE="button" VALUE="Tabla de Valores"
onClick="valores(document.forms[0].min.value,document.forms[0].max.value,docum
ent.forms[0].incr.value);">
<HR>
<BR>
</FORM>
</BODY>
</HTML>
ESCUELA PROFESIONAL
Ejercicio: al documento principal añada una caja de texto multilinea y en esta cajavisualice los resultados
de los valores de la funcion “valores”
9. Calculo del factorial de un numero
PROGJS05V.HTML
<HTML>
<HEAD>
function factorial(num)
{
var fact=1;
num=parseInt(num);
for(i=1;i<=num;i++) fact=fact*i;
return fact;
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#000000"><FONT COLOR="WHITE">
<H1><P ALIGN="CENTER">CALCULO DEL FACTORIAL DE UN NUMERO</H1>
<BR>
<H3>El factorial de un numero es el producto del numero por los sucesivos
enteros anteriores, hasta llegar a la unidad.
Es decir, el factorial de 5 sera 5*4*3*2*1 por lo tanto 120.</H3>
<HR>
<FORM>
<H2><P ALIGN="CENTER"><FONT COLOR="RED">
Escribe el numero:<INPUT TYPE="text" NAME="x">
<BR><BR>
<INPUT TYPE="button" VALUE="Calcular el Factorial"
onClick="document.forms[0].f.value=factorial(document.forms[0].x.value);">
<INPUT TYPE="button" VALUE="Otra vez"
onClick="document.forms[0].x.value='';document.forms[0].f.value='';">
<BR><BR>
<INPUT TYPE="text" NAME="f">
<BR><BR>
</FORM>
</BODY>
</HTML>
ESCUELA PROFESIONAL
10. Simplificación de una fracción
PROGJS06V.HTML
<HTML>
<HEAD>
function MCD(a,b)
{
var resto,aux;
if(a<b)
{
aux=a;
a=b;
b=aux;
}
if ((a%b)==0) resto=b;
while((a%b) !=0)
{
resto=a%b;
a=b;
b=resto;
}
return resto;
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="YELLOW"><FONT COLOR="RED">
<H1><P ALIGN="CENTER">SIMPLIFICACION DE FRACCIONES</H1>
<FORM><B>
<p align="center">Numerador : <input type="text" size="9"
name="num1"> <br>
Denominador: <input type="text" size="9" name="den1"
onblur="document.forms[0].num2.value=document.forms[0].num1.value/MCD(document
.forms[0].num1.value,this.value);document.forms[0].den2.value=this.value/MCD(d
ocument.forms[0].num1.value,this.value);">
<br>
</p>
<hr>
<p align="center"><br>
<input type="text" size="7" name="num2"> <br>
<input type="text" size="7" name="den2"> <br><br>
<INPUT TYPE="button" VALUE="Otra FracciOn"
onClick="document.forms[0].num1.value='';document.forms[0].den1.value='';docum
ent.forms[0].num2.value='';document.forms[0].den2.value='';">
</p>
</form>
</body>
</html>
ESCUELA PROFESIONAL
11. Este programa nos permite identificar el número de formularios y sus elementos en un documento, es decir
podemos acceder sin conocer sus nombres.
PROGJS07V.HTML
<HTML> <HEAD></HEAD>
<BODY>
<FORM ACTION="mailto:[email protected]" METHOD="POST" NAME="ElPrimero">
Hola, soy el primer formulario del documento. Tengo algunos elementos: <P>
Caja 1: <INPUT TYPE=TEXT SIZE="5" MAXLENGTH="10" NAME="Linea1"><BR>
Caja 2: <INPUT TYPE=TEXT SIZE="5" MAXLENGTH="10" NAME="Linea2"><BR>
Caja 3: <INPUT TYPE=TEXT SIZE="5" MAXLENGTH="10" NAME="Linea3">
</FORM> <P>
<FORM ACTION="mailto:[email protected]" METHOD="GET" NAME="ElSegundo">
Hola, soy el segundo formulario del documento. Tengo algunos elementos: <P>
<INPUT TYPE=RADIO NAME="Radio1" VALUE="a" CHECKED> Radio 1<BR>
<INPUT TYPE=RADIO NAME="Radio1" VALUE="b"> Radio 2<BR>
<INPUT TYPE=RADIO NAME="Radio1" VALUE="c"> Radio 3
</FORM> <P>
<SCRIPT LANGUAGE="JavaScript">  </SCRIPT>
</BODY> </HTML>
ESCUELA PROFESIONAL
Ejercicios
1. Escriba un programa que reste dos números de la siguiente forma.
- Dos cuadros de texto para introducir los dos números

- Un botón para ejecutar el programa
- Un cuadro de texto para el resultado
2. Escriba un programa que nos preguntaba el nombre y la edad y que nos dé por resultado los días vividos
hasta el momento de la siguiente forma:
- Dos cuadros de texto para introducir el nombre y la edad en años.
- Al pulsar [Tab] en el 2º cuadro de texto aparece en un tercer cuadro de texto el nombre introducido en
el primer cuadro y los días vividos hasta el momento.
Al presionar TAB
ESCUELA PROFESIONAL
3. Implemente la validación del formulario socioeconómico desarrollado en la guia02 (HTML y JavaScript).

ESCUELA PROFESIONAL
TEORIA BASICA
Objeto string
length: Esta clase solo tiene la propiedad length, que guarda el número de caracteres del string.
charAt(indice): devuelve el carácter que hay en la posición indicada por indice, las posiciones comienzan en
cero.
indexOf(carácter,desde): Devuelve la posición en que se encuentra el carácter , el segundo parámetro es

opcional ya que indica desde el lugar en que hará la búsqueda.
lastIndexOf(carácter,desde): Devuelve la posición en que se encuentra el carácter pero realiza la búsqueda

desde el final del texto, o sea de derecha a izquierda.
replace(texto_cambiar,nuevo_texto): Reemplaza el texto_a_cambiar por el nuevo_texto.
split(separador): Crea un vector a partir de un texto en el que cada elemento está separado por el separador
indicado por el parámetro
substring(lugar_comienzo,lugar_fin): devuelve el substring que se inicia en el carácter de lugar_comienzo y

termina en el lugar_fin (lugar_comienzo y lugar_fin son números).
toLowerCase(): Pasa todos los caracteres a minúscula.
toUpperCase(): Pasa todos los caracteres a mayúscula.
toString(): sirve para convertir cualquier objeto en cadenas de caracteres.
Objeto Math
Nos permite trabajar con funciones matemáticas.

Concretamente:
Math.log(x) = ln(x)
Math.exp(x) = ex
Math.sqrt(x) = raiz cuadrada de “x”
Math.pow(a, b) = ab
Math.floor(): número entero más cercano y menor
Math.ceil(): número entero más cercano y mayor
Math.round(): redondea al entero más próximo.
Math.random(): número aleatorio entre 0 y 1
Math.round(y-x)*Math.random()+x: número aleatorio entre “x” e “y”.
Math.sin(x)= sin(x) x en radianes
Math.cos(x)= cos(x) x en radianes
Math.tan(x)= tg(x) x en radianes
Math.atan(x)= arctg(x) resultado en radianes
Math.abs(x): valor absoluto de “x”
Math.max(a,b) : máximo valor de los dos
Math.min(a,b): mínimo valor de los dos.
ESCUELA PROFESIONAL
Objeto document
Propiedades del objeto document
alinkColor
Esta propiedad tiene almacenado el color de los enlaces activos
anchors
Se trata de un array con los enlaces internos existentes en el documento
applets
Es un array con los applets existentes en el documento
bgColor
Propiedad que almacena el color de fondo del documento
cookie
Es una cadena con los valores de las cookies del documento actual
domain
Guarda el nombre del servidor que ha servido el documento
embeds
Es un array con todos los EMBED del documento
fgColor
En esta propiedad tenemos el color del primer plano
forms
Se trata de un array con todos los formularios del documento. Los formularios tienen a su vez
elementos (cajas de texto, botones, etc) que tienen sus propias propiedades y métodos, y serán
tratados en el siguiente capítulo.
images
Array con todas las imágenes del documento
lastModified
Es una cadena con la fecha de la última modificación del documento
linkColor
Propiedad que almacena el color de los enlaces
links
ESCUELA PROFESIONAL
Es un array con los enlaces externos
location
Cadena con la URL del documento actual
referrer
Cadena con la URL del documento que llamó al actual, en caso de usar un enlace.
title
Cadena con el título del documento actual
vlinkColor
Propiedad en la que se guarda el color de los enlaces visitados
Métodos del objeto document
clear();
Limpia la ventana del documento
close();
Cierra la escritura sobre el documento actual
open(mime, "replace");
Abre la escritura sobre un documento. 'mime' es el tipo de documento soportado por el
navegador. Si ponemos "replace", se reusa el documento anterior en el historial.
write();
Escribe texto en el documento.
writeln();
Escribe texto en el documento, y además lo finaliza con un salto de línea
Programación visual
Para referirnos al contenido (valor) del cuadro de texto de nombre “bas”, utilizamos la sintaxis:
document.forms[0].bas.value
Para referirnos al contenido del cuadro activo, utilizamos la sintaxis: this.value

Guia Laboratorio 06 Web1 23

Transféré par

Droits d'auteur :

Formats disponibles

Guia Laboratorio 06 Web1 23

Transféré par

Informations du document

Description originale:

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Guia Laboratorio 06 Web1 23

Transféré par

Droits d'auteur :

Formats disponibles

ESCUELA PROFESIONAL

INGENIERÍA DE SISTEMAS E INFORMÁTICA

GUIA DE LABORATORIO: APLICACIONES WEB I

GUÍA DE LABORATORIO: JAVA SCRIPT

1. Porpiedades y métodos de strign

3. Calculo de potencia y de la raíz enésima de un numero

<p><input type="text" id="res" placeholder="Aqui veras el

Calcule las siguientes expresiones

4. Programa que muestra algunas propiedades de document.

5. Mensaje js al abandonar el foco de un cuadro de texto

6. Calculo del área de un triángulo usando el evento onblur.

7. Programa que responde con un scrip js al evento onclick de un boton

8. Tabla de valores de la función

9. Calculo del factorial de un numero

10. Simplificación de una fracción

1. Escriba un programa que reste dos números de la siguiente forma.

- Dos cuadros de texto para introducir los dos números

3. Implemente la validación del formulario socioeconómico desarrollado en la guia02 (HTML y JavaScript).

indexOf(carácter,desde): Devuelve la posición en que se encuentra el carácter , el segundo parámetro es

lastIndexOf(carácter,desde): Devuelve la posición en que se encuentra el carácter pero realiza la búsqueda

replace(texto_cambiar,nuevo_texto): Reemplaza el texto_a_cambiar por el nuevo_texto.

substring(lugar_comienzo,lugar_fin): devuelve el substring que se inicia en el carácter de lugar_comienzo y

toLowerCase(): Pasa todos los caracteres a minúscula.

toUpperCase(): Pasa todos los caracteres a mayúscula.

toString(): sirve para convertir cualquier objeto en cadenas de caracteres.

Nos permite trabajar con funciones matemáticas.

Propiedades del objeto document

Esta propiedad tiene almacenado el color de los enlaces activos

Se trata de un array con los enlaces internos existentes en el documento

Es un array con los applets existentes en el documento

Propiedad que almacena el color de fondo del documento

Guarda el nombre del servidor que ha servido el documento

Es un array con todos los EMBED del documento

En esta propiedad tenemos el color del primer plano

tratados en el siguiente capítulo.

Array con todas las imágenes del documento

Es una cadena con la fecha de la última modificación del documento

Propiedad que almacena el color de los enlaces

Es un array con los enlaces externos

Cadena con la URL del documento actual

Cadena con el título del documento actual

Propiedad en la que se guarda el color de los enlaces visitados

Métodos del objeto document

Limpia la ventana del documento

Cierra la escritura sobre el documento actual

Abre la escritura sobre un documento. 'mime' es el tipo de documento soportado por el

navegador. Si ponemos "replace", se reusa el documento anterior en el historial.

Escribe texto en el documento.

Escribe texto en el documento, y además lo finaliza con un salto de línea

Para referirnos al contenido del cuadro activo, utilizamos la sintaxis: this.value

Vous aimerez peut-être aussi