7

I'm trying to understand how JSFiddle 'wraps' code in 'onLoad' based on this description: [1]: http://doc.jsfiddle.net/basic/introduction.html#javascript. I've seen onLoad being used in the HTML's BODY tag to load function(s). So does JSF (behind the scenes) wrap every call and every function I create int its JS window? AKA: 

onLoad = "myfunc1(),myfunc2,alert(1);"

If so then when I select jQuery as a framework, should I avoid using this format:

 $(document).ready(function(){
     myfunc1{(...)}
     myfunc1{(...)}
     ...

Apologize in advance if an armature question.

brooklynsweb
  • 817
  • 3
  • 12
  • 26

3 Answers3

10

They put all your JS inside <script> tags with the onLoad event code wrapped around it.

For example, if you choose to include jQuery and onLoad then this is what jsfiddle will use:

<script type="text/javascript">
    //<![CDATA[
        $(window).load(function(){ /* your js here */ });
    //]]>
</script>

If you don't include a library then they use:

<script type="text/javascript">
    //<![CDATA[
        window.onload=function(){ /* your js here */ }
    //]]>
</script>

I presume they also use other library specific load events depending on what you choose to include.

Using $(document).ready(function(){ }); isn't required when running your code in a fiddle.

Note: for a good explanation of what CDATA is take a look at this answer - https://stackoverflow.com/a/7092306/2287470

Community
  • 1
  • 1
Joe
  • 15,205
  • 8
  • 49
  • 56
4

It makes a new iframe to run your code in.

For the onload, they just put all your code in

window.onload = function () {
    // your code here
};

You can see this if you inspect the <script> tag in the <head> of the bottom-right iframe.

Nothing wrong with using $(document).ready(... but it's kinda useless when you enable the onLoad option in jsFiddle.

Joe Simmons
  • 1,828
  • 2
  • 12
  • 9
-1

if you are looking for source code formatting, then you should look for site like below. As to what jsfiddle use they might have their own plugins which does the same.

http://jsbeautifier.org/

http://www.javascriptbeautifier.com/

http://www.jspretty.com/

user1667253
  • 254
  • 2
  • 5