How to pass the html script to css?

Question

Some sites like the w3schools, when providing some code, keep the script on the same html code page.

How can I pass everything that is in the script below to my . jsp?

<div>
    <div class="container">
        <h2>Rubricas cadastradas</h2>
        <input class="form-control" id="myInput" type="text" placeholder="Pesquisar...">
        <table class="table table-sm">
            <thead class="thead-dark">
                <tr>
                    <th>Categoria</th>
                    <th>Rubrica</th>
                    <th>Valor</th>
                    <th>Excluir</th>
                </tr>
            </thead>
            <tbody id="myTable">
                <c:forEach items="${rubricas}" var="rubrica">
                    <tr>
                        <td> --- </td>
                        <td> ${rubrica.nome}</td>
                        <td> ${rubrica.getValorTotal()}</td>
                        <td style="width: 16%">
                            <form action="excluirProjeto" method="POST">
                                <input type="hidden" class="form-control" value="${projeto.id}" name="projeto_id">
                                <button type="submit" class="btn btn-link"> <img src="../img/excluir.png" alt="Logo" style="width:100%;"> </button>
                            </form> 
                        </td>
                    </tr>
                </c:forEach>
            </tbody>
        </table>
      </div>
</div>
<script>
    $(document).ready(function(){
        $("#myInput").on("keyup", function() {
            var value = $(this).val().toLowerCase();
            $("#myTable tr").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        });
    });
</script>

Answer 1

The best practice for working with scripts is to use an external file and call it within a tag script

The code below should be in a separate file. For example: script.js

$(document).ready(function(){
    $("#myInput").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#myTable tr").filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
    });
});

And in his html, you call the file as follows:

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="script.js"></script>

In the Attribute "src" should contain the path to your file .js

It is also good practice to call the script tag on the last line, before closing the tag </body>