Split css, JavaScript

User avatar
agibsonsw
SilverLounger
Posts: 2403
Joined: 05 Feb 2010, 22:21
Location: London ENGLAND

Split css, JavaScript

Post by agibsonsw »

Hello.

In my page I've moved all CSS to an internal stylesheet and 'most of'' my JavaSript is within a <script> tag. I would like to attach these as separate files to do things 'properly'.

Where should I place my 'window.onload = MyFunc;' statement? Can I just place it following all my functions in my attached .js file?

Can I be sure that the HTML will load before any JavaScript runs? In which case, should I move my 'onclick=' HTML attributes (currently attached to buttons in a form) into the .js file, or is this a step too far?

Thank you for any general guidance on these points. Andy.
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.

User avatar
jscher2000
2StarLounger
Posts: 148
Joined: 26 Dec 2010, 18:17

Re: Split css, JavaScript

Post by jscher2000 »

agibsonsw wrote:Where should I place my 'window.onload = MyFunc;' statement? Can I just place it following all my functions in my attached .js file?

Can I be sure that the HTML will load before any JavaScript runs? In which case, should I move my 'onclick=' HTML attributes (currently attached to buttons in a form) into the .js file, or is this a step too far?
Yes, you can place window.onload in an external .js file.

I'm not one to follow best practices, but there does seem to be a movement toward putting some script tags at the end of the <body> so the browser doesn't pause rendering to load large scripts that don't immediately affect page rendering. If there is any concern that the HTML might not load first, putting the script at the end solves that.

I sometimes attach event handlers in an external script file, e.g., with photo slide shows that get the "Lightbox" treatment. But I suppose there is a risk that someone will click a button in your form before the document finishes loading, so it probably makes sense to keep the event handlers inline in the elements and put the <script src="myfile.js" type="text/javascript"></script> block in the head.

User avatar
agibsonsw
SilverLounger
Posts: 2403
Joined: 05 Feb 2010, 22:21
Location: London ENGLAND

Re: Split css, JavaScript

Post by agibsonsw »

Hello and thank you.

I was looking at putting my button onclick attributes into the .js file, but a lot of them supply arguments:

Code: Select all

onclick="DoThis(this.form);"

onclick="AndThis($('some'),$('other'));"
(These are not the actual names :grin: )

I discovered that I could supply these arguments with helper functions (using closures) which are called/attached with addEventHandler(s). But this seems a step too far (and complicated). It's the buttons that call the JS functions, and it seems only 'fair' that they should be able to pass arguments to these functions. Besides, if I put ALL of the JS in a separate file then it's more difficult to understand how the two files work together.Some rules need to be broken for a peaceful life? Thanks again, Andy.
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.