RSS

Manejo de javascript en proyecto Java Web

04 Jun

Requisitos:

NetBeans IDE
Java
jquery-1.7.1.js

JavaScript …

Repaso de Javascript, historia, conceptos bàsicos, DOM y eventos.

Descarga de JQuery

Descargar la biblioteca JQuery:
http://code.jquery.com/jquery-1.7.js

Documentación:
http://docs.jquery.com/Main_Page

Tutoriales en español:
http://docs.jquery.com/Tutorials#Tutoriales_en_espa

Creando un Proyecto Web …

Crear un nuevo proyecto en NetBeans, en File->New Proyect->Java Web->Web Aplication.
ProjectName: Laboratorio4 , click en siguiente.

Elegir Tomcat como Server, click en siguiente.

No utilizar frameworks, click en Finish.

Se genera la siguiente estructura:
– Web Pages
– Source Pages
– Libraries
– Configuration Files

Crear un nuevo directorio llamado js/ donde se debe copiar la biblioteca JQuery, dentro
del directorio Web Pages.

Crear dos archivos jsp, index.jsp y cuenta.jsp.

El primero debe tener lo siguiente:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <script src="js/jquery-1.7.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
               $("span#numeroPalabras").text("Número de palabras: ");
               $("#send").click(function(){
                   var texto = $("#texto").val();
                   $.ajax({
                       type: "POST",
                       url: "cuenta.jsp",
                       data: "texto="+texto,
                       success: function(msg){
                           $("span#resultado").text(msg);
                       },
                       error: function(xml,msg){
                           $("span#resultado").text(" Error");
                       }
                   });                                           
               });
           });
        </script>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP y JQuery</title>
    </head>
    <body>
        <p> <span id="numeroPalabras"></span>
            <span id="resultado"></span>
        </p>
        <div>
            <label>Introduce el texto: </label>
            <br><br>
            <textarea id="texto" cols="40" rows="7"></textarea>
            <br><br>
            <input id="send" type="button" value="Enviar"/>
    </body>
</html>

En el archivo cuenta.jsp:

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<%
    if (request.getParameter("texto")!=null){
        String texto = request.getParameter("texto");
        texto = texto.replace("\n", " ");
        out.print(texto.split(" ").length);
    }
%>

Ejecutar el proyecto …

 
Deja un comentario

Publicado por en 4 junio, 2012 en Código, Java, javascript

 

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: