Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
4
respuestas

Javascript orientado a Objetos

Buenos dias. Resulta que cree un codigo html e intento realizar un script para el mismo (estoy utilizando como interprete Node js). Pero cuando trato de testear el codigo js. me arroja un error:

var clientes = document.querySelector(".cliente"); ^

ReferenceError: document is not defined at Object. (D:\Alura\Cuenta_Corriente\js\principal.js:2:19)

La sentencia en javasrcript es la siguiente:

var clientes = document.querySelector(".cliente");

Y el código html es: 
(la sentencia java esta referenciada  a la clase "cliente" del código html)

<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Banco del Plata</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">

</head>
<body>

    <header>
        <div class="container">
            <h1 class="titulo">Banco del Plata S.A.</h1>
        </div>
    </header>
    <main>
        <section class="container">
            <h2>Estado de Cuenta Corriente</h2>
            <table>
                <thead>
                    <tr>
                        <th>Nombre</th>
                        <th>DNI</th>
                        <th>Direccion</th>
                        <th>Cuenta Numero</th>
                        <th>Depositos</th>
                        <th>Extracciones</th>
                        <th>Saldo</th>
                    </tr>
                </thead>
                <tbody id="tabla-Clientes">
                    <tr class="cliente">
                        <td class="info-nombre">Pablo</td>
                        <td class="info-dni">14271922</td>
                        <td class="info-direccion">L.Maria Campos 152</td>
                        <td class="info-cuenta_numero">95</td>
                        <td class="info-depositos">1000</td>
                        <td class="info-extracciones">50</td>
                        <td class="info-saldo">950</td>
                    </tr>

                    <tr class="cliente">
                        <td class="info-nombre">Andrea</td>
                        <td class="info-dni">23456772</td>
                        <td class="info-direccion">Moldes 1526</td>
                        <td class="info-cuenta_numero">151</td>
                        <td class="info-depositos">2000</td>
                        <td class="info-extracciones">1000</td>
                        <td class="info-saldo">1000</td>
                    </tr>

                    <tr class="cliente">
                        <td class="info-nombre">Martin</td>
                        <td class="info-dni">17253662</td>
                        <td class="info-direccion">San Martin 1950</td>
                        <td class="info-cuenta_numero">98</td>
                        <td class="info-depositos">35000</td>
                        <td class="info-extracciones">10000</td>
                        <td class="info-saldo">25000</td>
                    </tr>

                    <tr class="cliente">
                        <td class="info-nombre">Anselmo</td>
                        <td class="info-dni">25336745</td>
                        <td class="info-direccion">Orellana 2756</td>
                        <td class="info-cuenta_numero">99</td>
                        <td class="info-depositos">4500</td>
                        <td class="info-extracciones">200</td>
                        <td class="info-saldo">4300</td>
                    </tr>

                    <tr class="cliente">
                        <td class="info-nombre">Marcos</td>
                        <td class="info-dni">45762335</td>
                        <td class="info-direccion">Entre Rios 556</td>
                        <td class="info-cuenta_numero">90</td>
                        <td class="info-depositos">22500</td>
                        <td class="info-extracciones">600</td>
                        <td class="info-saldo">21900</td>
                    </tr>
                </tbody>
            </table>
        </section>
    </main>
    <script src="js/principal.js"></script> 
</body>
Alguna idea al respecto?
Muchas gracias.
4 respuestas

Hola Matias, espero que estés bien! ¡Muchas gracias por su contribución! ¡Para cualquier duda, estoy disponible! ¡Vamos juntos! ¡No desanimes! :)

Si este post te ayudó, por favor, marca como solucionado ✓.

Matias, el objeto document está presente solo cuando usas Javascript en el navegador, por eso te da ese error.

Atte Leonardo

Pero debe haber una manera de que el navegador pueda "escuchar" el evento no?

Hola Matias.

En tu modelo planteado existen 2 capas distintas, que se pueden comunicar si pero de la forma en que lo estas intentando no es posible. El frontend (interfaz del navegador) puede llamar o ejecutar peticiones a la capa backend, pero el backend en ningún momento podrá acceder a elementos del frontend. Es el frontend que recibe una respuesta del backend y puede ejecutar acciones.

Existen frameworks que combinan ese proceso como React o Angular que ayudan bastante en el proceso de interacción de las 2 capas y que su base de lenguaje es javascript. Te invito a profundizar en esos temas para que puedas avanzar en tu conocimiento y lograr subsanar esta inquietud.