loading order of libraries

[Otto]

Good morning,
I have a question about loading order of libraries.

I found this: There is two jquery libraries :
1. Core
2. UI
Thus , the order is :

Load jquery.min.js (core)

Then :

Import bootstrap.min.js (Where you have Carousel)

Then ,

jquery.ui.js (UI) (Where you have accordion)

Anyway, we recommend to wrap all your code when document is ready :

$(function(){ // All your code here })

But how is this done to wrap all code?
How abour loading order of CSS files.


Best regards,
Otto

[Otto]

@Otto
The load order of CSS doesn't really matter unless you're doing stuff from Javascript that depends on the styles somehow being present.
the bootstrap JS doesn't need the styles, it's just a complement to them
I don't know about jQuery UI, but I believe it's the same
when I say load order doesn't matter I mean you won't get different results from loading them in a different order
unlike for JS
About wrapping the code:
by default JS code runs where you put the s cript tag
the HTML parser reads the HTML file,
and it it finds a <s cript> tag it'll stop the world and download it (if it has a src attribute) and then run it before moving on to the following HTML

that means that if you have a <s cript> tag in the document's <h ead>, you won't have access to anything in the <b ody>
j Query gives you an easy way to solve this by wrapping all of your code into a function, like this:

j Query(function($) {
// your code here, it can use `$` as the jquery object
});

and the code inside that function expression will be run after the page is completely loaded

[Otto]

Andreu, what happens if two function in different js files have the same name.
Andreu'); DROP TABLE users; -- 17:46 Uhr
@Otto If they're loaded as scripts rather than as modules (which is the default), and they're not defined inside a block scope or a function, the one which is loaded later shadows the other
If you need a separate "context" for different JS files, try using either the jQuery wrapper
or you can use a JS pattern called an IIFE (immediately invoked function expression):

(function() {
// your code here
})();

(bearbeitet)
but note that any functions you define inside the jQuery wrapper or inside an IIFE won't be available for code outside of the wrapper
if you need them to be available outside, you can use:

window.myFunction = function(arg1, arg2) {
// your code here
};