Java Scrip

UNIDAD II DESARROLLO DE PAGINAS WEB DINAMICAS PROPOSITO DE LA UNIDAD Desarrollara paginas web dinmicas con acceso de BD empleando lenguajes
de programacin del lado del servidor para la gestin de informacin
PROGRAMACION EN LA WEB JAVASCRIPT
QUE ES JAVASCRIPT ?
JavaScript es un lenguaje de scripts desarrollado por Netscape para incrementar las funcionalidades del lenguaje HTML. Sus caractersticas ms importantes son: JavaScript es un lenguaje interpretado, es decir, no require compilacin. El navegador del usuario se encarga de interpretar las sentencias JavaScript contenidas en una pgina HTML y ejecutarlas adecuadamente. JavaScript es un lenguaje orientado a eventos. Cuando un usuario pincha sobre un enlace o mueve el puntero sobre una imagen se produce un evento. Mediante JavaScript se pueden desarrollar scripts que ejecuten acciones en respuesta a estos eventos. JavaScript es un lenguaje orientado a objetos. El modelo de objetos de JavaScript est reducido y simplificado, pero incluye los elementos necesarios para que los scripts puedan acceder a la informacin de una pgina y puedan actuar sobre la interfaz del navegador.
Como Introducir Javascript en Html

Bsicamente existen dos formas de introducir un script de JavaScript en una pgina HTML: Embebido en el cdigo HTML, entre las tags <script> y </script>. El siguiente cdigo muestra un ejemplo de cdigo JavaScript embebido en el HTML de una pgina. Como se observa, el cdigo JavaScript figura entre las marcas de comentario , para que no aparezca en la pgina. Adems, delante de la marca de cierre de comentario se insertan los caracteres //, de comentario en JavaScript, para que el intrprete JavaScript no d error por la lnea -->.
Como Introducir javascript en Html

<HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> <TITLE>Introduccin a JavaScript</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-function saludo() { window.alert('Bienvenido a JavaScript') } //--> </SCRIPT> </HEAD> <BODY onLoad="saludo()">
Como archivo .js que se carga con la pgina HTML. Para ello, debe indicarse en las tags anteriores el nombre y ubicacin del archivo .js que contiene el script JavaScript, como en este ejemplo:
<HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> <TITLE>Tutorial de JavaScript</TITLE> <SCRIPT LANGUAGE="JavaScript" SRC="scripts/fuente.js"></SCRIPT> </HEAD>
1. Introduccin de cdigo JavaScript en las pginas Para introducir cdigo JavaScript en una pgina HTML: <SCRIPT LANGUAGE="JavaScript"> <!-Programa JavaScript //--> </SCRIPT> Las lneas 2 y 4 se introducen para evitar que se generen errores en navegadores que no soporten JavaScript y para que estos navegadores no muestren el cdigo del script en la pgina.
Javascript
Comentarios en JavaScript Los comentarios se utilizan en todos los lenguajes de programacin para aadir explicaciones al cdigo. Cuando el intrprete de comandos (o compilador, segn el caso) encuentra estas lneas, las ignora. En JavaScript se utiliza el formato de comentarios propio de C/C++. As, si es para comentar una lnea: // comentario de una lnea Si el comentario ocupa varias lneas, se usan los carcteres /* (inicio de comentario) y */ (fin de comentario):
/* comentario de varias lneas */

Los bloques de cdigo que integran una unidad son encerrados entre los caracteres { y }. Por otra parte, JavaScript es sensible a maysculas y minsculas.
Javascript

Inclusin de ficheros externos con cdigo JavaScript
Los scripts que queramos utilizar en una pgina suelen escribirse en la misma pgina, normalmente entre las etiquetas <head> y </head>. Determinados scripts pueden aparecer entre las etiquetas <body> y </body> (por ejemplo, gestores de eventos, o scripts que escriben cdigo on-line), pero lo normal es que la mayora de las funciones estn en la cabecera de la pgina. Otra posibilidad es la inclusin del cdigo JavaScript en ficheros externos, de extensin .js. Estos ficheros son enlazados desde la pgina HTML donde se utilizan con este cdigo (que deber ir tambin entre <head> y </head>): <SCRIPT LANGUAGE="JavaScript" SRC="fichero.js"></SCRIPT> Este cdigo es ignorado automticamente por los navegadores que no soportan JavaScript. Por otra parte, esta forma de enlazar con ficheros externos con cdigo JavaScript no est soportada por las versiones 2.x del Netscape Navigator.
Javascript
Escritura de cadenas de texto en la pgina Para escribir la cadena Texto en la pgina HTML: document.write("Texto") Para escribir la cadena Texto en la pgina HTML ms un retorno de carro: document.writeln("Texto") Caracteres especiales a utilizar en cadenas de texto: CaracterSignificado \nNueva lnea \t Tabulador \r Retorno carro \f Alimentacin de formulario \b Retroceso de un espacio
Javascript
<HTML> <HEAD> <TITLE>Ejemplo 2.1: escritura de cadenas de texto</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-document.write('<IMG SRC="imagen.gif">') document.write("<BR><H1>Bienvenido a JavaScript</H1>") //--> </SCRIPT> </BODY> </HTML>
Javascript
La manera ms sencilla consiste en utilizar el mtodo alert() del objeto window: alert("Texto") Por ejemplo: alert("Bienvenido!\n\n\tEsta Web est dedicada a JavaScript.") Este tipo de ventanas de dilogo muestra un botn Aceptar que el usuario deber pulsar para continuar. Existen otros tipos de ventanas de dilogo que interactan con el usuario. El mtodo prompt() del objeto window muestra una caja de texto en la que el usuario puede introducir contenidos. Tambin muestra dos botones, Aceptar y Cancelar. Ejemplo: prompt("Su color favorito es: ","Azul") El segundo parmetro es el valor predeterminado para la caja de texto, que el usuario podr modificar. Este cuadro de dilogo permite capturar datos introducidos por el usuario y realizar una accin en base a ellos. Por ejemplo, podemos pedirle al usuario que introduzca su nombre, y despues mostrarlo:
Cuadros de dilogo
Javascript
<HTML> <HEAD> <TITLE>Ejemplo 2.2: pgina que pide el nombre</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-var nombre = prompt("Introduzca su nombre:","") document.write("<H2>Bienvenido, " + nombre + "</H2>") //--> </SCRIPT> <P>Aqu va el resto de la pgina...</P> </BODY> </HTML>
Javascript

Veamos ahora un ejemplo completo que utiliza este cuadro de dilogo: Variable = Confirm(cMensaje) // devuelde v o f <HTML> <HEAD> <TITLE>Ejemplo 2.3: pgina que pide confirmacin</TITLE> </HEAD> <BODY> <H1>Pgina sobre sellos</H1> <SCRIPT LANGUAGE="JavaScript"> <!-var entrar = confirm("De verdad desea entrar en esta pagina?") if ( !entrar ) self.close() //--> </SCRIPT> <P>Aqu va el resto de la pgina...</P> </BODY> </HTML>
Javascript
Definicin de una funcin function nombre_funcion(argumentos) { bloque de comandos } El nombre de la funcin es sensible a maysculas y minsculas. Puede incluir el caracter "_" y empezar con una letra. Ejemplo: function ImprimeNombre(nombre) { document.write("<HR>Tu nombre es <B><I>") document.write(nombre) document.write("</B></I><HR>") }
Javascript

<HTML> <HEAD><TITLE>Calculo del cubo</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-//DEFINICION DE LA FUNCION cubo() function cubo() { //VARIABLES LOCALES var solucion = 0 var valor = prompt("Introduzca un valor Numerico ","0") var numero = eval(valor) //COMPRUEBA EL RESULTADO return ( numero * numero * numero ) } //--> </SCRIPT></HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-//EJECTUA LA FUNCION var resultado = cubo() document.write("El cubo es ") document.write(resultado) //--> </SCRIPT> </BODY></HTML>
Javascript - Objetos

Creacin de objetos Para crear objetos, primero es necesario definir su tipo (o clase): function empleado(nombre, edad, puesto) { this.nombre = nombre this.edad = edad this.puesto = puesto } En JavaScript, la partcula this se refiere al objeto en el que se utiliza. Una vez definida la clase, podemos crear variables (instanciar objetos) de esa clase de la siguiente manera:
empleado_1 = new empleado("Pedro", 26,"Programador")
Javascript - Objetos
Dentro de la definicin de la clase o tipo del objeto, pueden incluirse funciones que accedan a sus propiedades. Estas funciones reciben el nombre de mtodos. Un mtodo se define de la siguiente manera: function mostrarPerfil() { document.write("Nombre: " + this.nombre + "<BR>") document.write("Edad: " + this.edad + "<BR>") document.write("Puesto: " + this.puesto + "<BR>") }
function empleado(nombre, edad, puesto) { this.nombre = nombre this.edad = edad this.puesto = puesto this.mostrarPerfil = mostrarPerfil }
Javascript

<HTML><HEAD><TITLE>Empleados</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-//DEFINE EL METODO mostrarPerfil function mostrarPerfil() { document.write("<H1>Perfil del empleado " + this.nombre + "</H1><HR><PRE>") document.writeln("Edad: " + this.edad) document.write("</PRE>") } //DEFINE EL OBJECTO EMPLEADO function empleado() { this.nombre = prompt("Introduzca el nombre del empleado: ", "Nombre") this.edad = prompt("Introduzca la edad de " + this.nombre, "00") this.mostrarPerfil = mostrarPerfil } nuevoEmpleado = new empleado() //--> </SCRIPT> </HEAD><BODY><SCRIPT LANGUAGE="JavaScript"> <!-nuevoEmpleado.mostrarPerfil() //--> </SCRIPT> </BODY></HTML>
Javascript - Eventos

Eventos en JavaScript En JavaScript, la interaccin con el usuario se consigue mediante la captura de los eventos que ste produce. Un evento es una accin del usuario ante la cual puede realizarse algn proceso (por ejemplo, el cambio del valor de un formulario, o la pulsacin de un enlace). Los eventos se capturan mediante los manejadores de eventos. El proceso a realizar se programa mediante funciones JavaScript llamadas por los manejadores de eventos.
Ejemplo de evento:
<INPUT TYPE="text" onChange="CompruebaCampo(this)">
En este ejemplo, CompruebaCampo() es una funcin JavaScript definida en alguna parte del documento HTML (habitualmente en la cabecera del mismo). El identificador this es una palabra propia del lenguaje, y se refiere al objeto desde el cual se efectua la llamada a la funcin (en este caso, el campo del formulario).
Mtodos de evento disponibles en JavaScript Los siguientes mtodos de evento pueden utilizarse en JavaScript: Mtodos de eventoFuncin que realizan blur() Elimina el foco del objeto desde el que se llame click() Simula la realizacin de un click sobre el objeto desde el que se llame focus() Lleva el foco al objeto desde el que se llame select() Selecciona el rea de texto del campo desde el que se llame submit() Realiza el envo del formulario desde el que se llame
<HTML> <HEAD><TITLE>Eventos</TITLE> <SCRIPT> <!-function Reacciona(campo) { alert("Introduzca un valor!") campo.focus() } //--> </SCRIPT></HEAD> <BODY> <FORM METHOD=POST> CADENA DE TEXTO : <BR> <INPUT TYPE=text NAME=campo onFocus="Reacciona(this)"> </FORM> </BODY> </HTML>
<HTML> <HEAD><TITLE>Eventos</TITLE> <SCRIPT> function procesar() { var num var cubo num = document.formulario.entero.value num = eval(num) cubo= num * num * num document.formulario.cubo.value = cubo } </SCRIPT> </HEAD>
Calculo del Cubo
<BODY Onload="alert('bienvenidos')" > <FORM name="formulario" METHOD=POST> ENTERO : <INPUT TYPE="text" NAME="entero"><BR> CUBO : <INPUT TYPE="text" NAME="cubo"> <INPUT TYPE="button" NAME="bt1" value="CUBO" onClick="procesar()"> </FORM> </BODY> </HTML>
<html> <head> <script language="javascript"> function suma() { var x = document.f1.a.value var y = document.f1.b.value var z = x + y document.f1.c.value = eval(x)+eval(y) } </script> </head> <body>
<form name="f1">
Calculadora
valor 1 <input type="text" name="a"> valor 1 <input type="text" name="b"> <input type="button" value="SUMAR" onclick="suma()"> <br> resultado<input type="text" name="c"> </form> </body> </html>
<html> <head> <script language="javascript"> function vcadena(texto) { if ( texto.value == "" ) { return ( false ); } return true; } function vformu(form) { if ( vcadena(form.ced) == false ) { alert('la cedula esta vacia '); return(false); } if ( vcadena(form.nom) == false ) { alert('el nombre esta vacio '); return(false); } return ( true ); } </script> </head>
Validando Formularios
<body> <form name="f1" onsubmit="return vformu(this)" action="cuerpo1.htm" > No.Cedula: <input name="ced" type="text" size="10"> <br> Nombre: <input name="nom" type="text" size="30"> <br> <input type="submit value="Enviar"> </form> </body> </html>
<html> <head> <script language="javascript"> var n=0; vnombre = new Array(10); vnota = new Array(10); function guardar() { vnombre[n] = document.formu.nom.value vnota[n] = document.formu.not.value document.formu.nom.value = " " document.formu.not.value = " " n++ alert(" Registro incluido ") } function listado() { var i=0; for(i=0;i<n;i++) { document.write("<br> "+vnombre[i]+" , "+vnota[i]); } } </script></head>
Vectores
<body> <form name="formu">
Nombre : <input type="text" size="30" name="nom"> <br> Nota : <input type="text" size="6" name="not"> <br> <input type="button" name="incluir" value="Incluir" OnClick="guardar()"> <input type="button" name="listar value="Listar" OnClick="listado()"> </form> </body> </html>
Manejo del Objeto Select

<html> <head> <script language="javascript"> function tabla() { var x = eval(document.f1.t1.value); var i=0; var c; // para asignar el total de elementos a insertar document.f1.lista.length = 10; // nro. de elementos que puede mostrar document.f1.lista.size = 10; for( i=0 ; i<=10; i++) { c = x * i; document.f1.lista.options[i].value= c; document.f1.lista.options[i].text = c; } } </script> </head> <body> <form name="f1"> numero : <input type="text" name="t1"> <br> <input type="button" value="Imprimir" Onclick="tabla()"> <br> TABLA DE MULTIPLICAR: <select name="lista"> </select> </form> </body> </html>
Manejo dinmico de listas

<html> <head> <script language="javascript"> // variable que cuenta los elementos que van el vector var n=0; // vectores paralelos vnombre = new Array(10); vnota = new Array(10); // funcion para guardarelementos dentro del vector function guardar() { vnombre[n] = document.formu.nom.value vnota[n] = document.formu.not.value document.formu.nom.value = " "; document.formu.not.value = " "; n++; alert(" Registro incluido "); document.formu.nom.focus(); } // imprime los elementos dentro del select function listado() { var i=0; // para asignar el total de elementos a insertar document.formu.lista.length = n; // nro. de elementos que puede mostrar document.formu.lista.size = 10; for(i=0;i<n;i++){ document.formu.lista.options[i].value=vnombre[i]+"|" +vnota[i]; document.formu.lista.options[i].text= vnombre[i]+" | " +vnota[i]; } } // envia a los text el elemento seleccionado function escoge() { // para obtener la cadena que se esta seleccionando opcion = document.formu.lista[document.formu.lista.selectedIndex].val ue ; // separa en vectores la cadena obtenida // se usa el caracte '|' como separador vector = opcion.split("|"); // envia los valores del vector a los textos document.formu.nom.value = vector[0]; document.formu.not.value = vector[1]; } </script> </head>
<body> <form name="formu"> Nombre : <input type="text" size="30" name="nom"> <br> Nota : <input type="text" size="6" name="not"> <br> <input type="button" name="incluir" value="Incluir" OnClick="guardar()"> <input type="button" name="listar" value="Listar" OnClick="listado()"> <select name="lista" size="1" onChange="escoge()" > <br> </select> </form> </body> </html>

Java Scrip

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Java Scrip

Cargado por

Copyright:

Formatos disponibles

UNIDAD II DESARROLLO DE PAGINAS WEB DINAMICAS PROPOSITO DE LA UNIDAD Desarrollara paginas web dinmicas con acceso de BD empleando lenguajes

de programacin del lado del servidor para la gestin de informacin

PROGRAMACION EN LA WEB JAVASCRIPT

Como Introducir Javascript en Html

Como Introducir javascript en Html

Como Introducir javascript en Html

Como Introducir javascript en Html

/* comentario de varias lneas */

Inclusin de ficheros externos con cdigo JavaScript

empleado_1 = new empleado("Pedro", 26,"Programador")

Calculo del Cubo

Manejo del Objeto Select

Manejo dinmico de listas

También podría gustarte