¿Cómo usar JS en html? – javascript html bootstrap

Pregunta:


Estoy haciendo un proyecto web en netbeans con jsp y nos pidieron darle diseño por lo que estoy usando bootstrap, entiendo como usar el css pero el js no sé cómo usarlo.

Tengo un código de js que quiero usar pero no sé cómo meterlo, sólo sé que tengo que llamarlo del html con el id

Código

$(function() {

    $('#login-form-link').click(function(e) {
        $("#login-form").delay(100).fadeIn(100);
        $("#register-form").fadeOut(100);
        $('#register-form-link').removeClass('active');
        $(this).addClass('active');
        e.preventDefault();
    });
    $('#register-form-link').click(function(e) {
        $("#register-form").delay(100).fadeIn(100);
        $("#login-form").fadeOut(100);
        $('#login-form-link').removeClass('active');
        $(this).addClass('active');
        e.preventDefault();
    });

});

Sé que se tiene que meter en una de las carpetas que trae bootstrap por defecto, pero no sé.

Preguntado por: callo33

Puedes meterlo dentro de un archivo distinto de bootstrap por ejemplo en un functions.js o bien en el mismo archivo que de tu html como lo muestro aquí abajo has la prueba.

En este nuevo archivo puedes poner esa función por ejemplo:

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <!-- Aqui el codigo que agregarias !-->
  <script>
    $(document).ready(function() {
      $("#btnSesion").click(function(e) {
        $("#formularioRegistro").delay(100).fadeIn(100);
        $("#formulario").fadeOut(100);
        $('#formulario').removeClass('active');
        $(this).addClass('active');
        e.preventDefault();
      });
      $("#btnRegistrar").click(function(e) {
        $("#formulario").delay(100).fadeIn(100);
        $("#formularioRegistro").fadeOut(100);
        $('#formularioRegistro').removeClass('active');
        $(this).addClass('active');
        e.preventDefault();
      });
    });
  </script>
</head>

<body>
  <form id="formulario">
    <input type="text" placeholder="Sesion" />

  </form>
  <br/>
  <form id="formularioRegistro">
    <input type="text" placeholder="Registro" />
  </form>
  <button id="btnSesion">Sesion</button>
  <button id="btnRegistrar">Registrar</button>
</body>

</html>

Puedes meterlo en el mismo archivo html donde están los elementos con los id que utiliza el script (i.e. aquellos que tienen #), ya sea en dentro del header o al final del archivo. Sólo debes meterlo dentro del tag script:

<script type="text/javascript">
$(function() {

    $('#login-form-link').click(function(e) {
          $("#login-form").delay(100).fadeIn(100);
          $("#register-form").fadeOut(100);
          $('#register-form-link').removeClass('active');
          $(this).addClass('active');
          e.preventDefault();
     });
     $('#register-form-link').click(function(e) {
          $("#register-form").delay(100).fadeIn(100);
          $("#login-form").fadeOut(100);
          $('#login-form-link').removeClass('active');
         $(this).addClass('active');
         e.preventDefault();
    });

});
</script>

Fuente

Add a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *