How should I include Jquery functions into a project?

Question

Currently I have several Jquery functions in script tags just above my page footer.

<script>
    //several Jquery functions in here..
</script>
        <footer>
                <p>Copyright &copy</p>
        </footer>
    </body>
</html>

What is the common practice for including Jquery functions into a project?

Should I put them into another folder/file and include them in my header?

Uhm ... you just include them via <script src="jquery.js"></script>, that's all you do. jQuery is clientside, while php is serverside. So there is nothing to take care of. — Realitätsverlust
– Realitätsverlust, Commented Mar 19, 2015 at 14:16
Yes, I know how one is server side, and other client side. I am just curious the proper way of including several jquery functions into a project. So in your quick example, you're saying I should put them all into a file jquery.js and then include them within a script tag, would that script tag be in my html header? — BRBT
– BRBT, Commented Mar 19, 2015 at 14:19
Try to put all these jquery function in a common file and then put it in your project and then call it as in normal HTML file we are calling script. which is <script src = "your script path"></script>. but if you want to include in php file then on very upside of that file, write include_one('js file path') — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Mar 19, 2015 at 14:20

BRBT · Accepted Answer · 2015-03-19 14:40:23Z

1

Generally where you put your javascript includes is up to you but the bulk of includes usually go before the closing body tag (because it helps the page to load faster). However it is common with sites built on wordpress and other platforms that you see a lot of JS includes at the top.

It all depends on how you design your web system.

Now... the problem you might find if your functions are in the footer is that if you try to call them before they've been defined, then the JS will throw an error. So ideally you don't want to use things like <a id="btn" onclick="foo()"> within your HTML but instead have this in JS:

$('a#btn').click(foo);

For basic sites you can probably get away with a single script file.

        <script src="/js/jquery.x.x.min.js"></script> <!-- jquery lib -->
        <script src="/js/scripts.js"></script>        <!-- your custom scripts -->
    </body>
</html>

Separation of Concerns

It's deemed best practice to keep your code separated where possible. So all JavaScript code should be in .js files, much like how inline CSS is frowned upon and should be in .css files. This keeps your code clean and easier to manage.

edited Mar 19, 2015 at 14:40

BRBT

1,4809 gold badges28 silver badges49 bronze badges

answered Mar 19, 2015 at 14:16

diggersworld

13.1k25 gold badges87 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BRBT Over a year ago

Sorry I fixed my question to a little more clear to what I was asking. However you have answered my questions. Thanks!

Collectives™ on Stack Overflow

How should I include Jquery functions into a project?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related