Why order is necessary while adding multiple script tags? || jQuery

I was trying the below attached code using code editor, where i wrote the javascript's code in trial.js I am not getting why the jQuery's function in case 1 worked but not in case 2 case 1: <head> <script src="https://code.jquery.com/jquery-3.1.1.js"></script> <script src="trial.js"></script> </head> case 2: <head> <script src="trial.js"></script> <script src="https://code.jquery.com/jquery-3.1.1.js"></script> </head> code: https://code.sololearn.com/WsfK0Jgqtj9k

animation jquery multiple tag script oder

6th Nov 2018, 7:07 AM

Suraj Jha

11 Answers

+ 3

Suraj No... I said this... Try to imagine what do browser: * Case 1: - Browser load jquery lib - Browser load trial.js and because jquery is loaded, not error happen and all works right * Case 2: - Browser load trial.js BUT encounter a call to undefined function $ (remember at this point jquery is NOT loaded) - Browser load jquery BUT trial.js is been loaded with error then it have not effect

6th Nov 2018, 9:19 AM

KrOW

+ 2

KrOW, I got it.. thanks!!

6th Nov 2018, 9:20 AM

Suraj Jha

+ 1

Can you post full page (html/js) of NOT working case (linking it ob Code Playground)???

6th Nov 2018, 8:04 AM

KrOW

+ 1

Suraj And what is "trial.js"?

6th Nov 2018, 8:16 AM

KrOW

+ 1

Suraj Its normal... You use jquery functions BEFORE that its loaded. In normal case, all scripts are loaded sequentially, then, you can use jquery only AFTER jquery.js is loaded

6th Nov 2018, 8:23 AM

KrOW

+ 1

KrOW, so as expected in case 2 , after some time (when jQuery is also been loaded) that function should work??

6th Nov 2018, 8:31 AM

Suraj Jha

+ 1

Suraj you are welcome 👍👍👍

6th Nov 2018, 9:20 AM

KrOW

KrOW , the whole HTML,css,js code is same as the above in moving circle's code the only difference is about adding external script tag and external style tag in HTML file

6th Nov 2018, 8:15 AM

Suraj Jha

KrOW https://code.sololearn.com/WsfK0Jgqtj9k/?ref=app See the attached code HTML file is saved as trial.html Css part is saved as trial.css JS part is saved as trial.js And then I linked trial.css and trial.js to trial.html file

6th Nov 2018, 8:19 AM

Suraj Jha

KrOW, but if you look at the JavaScript code I have used document.ready() method also... Then shouldn't it work only when the whole document is been loaded

6th Nov 2018, 8:25 AM

Suraj Jha

Suraj You use $() function and because jquery is NOT loaded yet, browser cannot call that function (i talking about when script "trial.js" is placed before script "jquery.js")

6th Nov 2018, 8:28 AM

KrOW