ansaurus

Question

Can regular JavaScript be mixed with jQuery?

Answer 1

+26 A:

Yes, they're both JavaScript, you can use whichever functions are appropriate for the situation.

In this case you can just put the code in a document.ready handler, like this:

$(function() {
  var canvas = document.getElementById("canvas");
  if (canvas.getContext) {
    var ctx = canvas.getContext("2d");

    ctx.fillStyle = "rgb(200,0,0)";
    ctx.fillRect (10, 10, 55, 50);

    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    ctx.fillRect (30, 30, 55, 50);
  }
});

Nick Craver 2010-09-09 13:48:07

Answer 2

A:

yes you can mix both

Amit 2010-09-09 14:01:08

Answer 3

+6 A:

Yes we can!

Litso 2010-09-09 14:04:22

Answer 4

+2 A:

of course you can, but why to do this? You have to include additional file with jQuery libs, what generates one more request. Then you will load whole jQ object just for use one single function which, because of it's additional 'layer' between user and JS, will execute slower than 'pure' javascript code.

MichalBE 2010-09-09 17:14:16

Good point - for tiny things, the jQuery library may be overkill. As soon as you go into something more complex than "hide this on click", jQuery saves you (as a developer) quite a lot of hassle - simplifies working with the elements and provides baseline cross-browser compatibility (even for IE6 - before jQ, this was a source of endless frustration).At 17KB, it's not really a bandwith hog. Moreover, if you load the library from Google, people may already have it loaded, so no additional request is needed: http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/

Piskvor 2010-09-10 10:15:46

Answer 5

+14 A:

Really? Seriously? jQuery users, I know you copy and paste a lot - A LOT - but you might want to think a bit before you copy and paste something that basically informs the world that you think jQuery is a magical pony with wings that brings you rainbows of wide-eyed cut-n-paste-plugin happiness via some form of arcane automagic, instead of what it really is, a collection of JavaScript functions on an object. OMG seriously, are you serious.

Poetic license taken from Seth and Amy of SNL

csuwldcat 2010-09-09 20:49:12

In my opinion, jQuery is a magical winged unicorn - descended from the JavaScript pony :o) For people who have started building sites using jQuery, it's easy to ignore the fact that jQuery *is* JS.

Piskvor 2010-09-10 10:29:39

What makes me sad inside is the significant percentage of jQuery users who don't know the very basics about the actual language behind jQuery's abstraction.

csuwldcat 2010-09-17 21:21:50

Answer 6

+5 A:

There's a jQuery plugin for that. Just google for "jquery canvas mozilla tutorial onload", and you should find it.

Rakesh Pai 2010-09-09 22:48:45

what plugin??? the asker has not requested anything special here....All he wan'ts to know if he can use jquery with js side by side. n thats perfectly fine.

loxxy 2010-09-10 17:01:28

I think im going to write a plugin that can do this.

Chase 2010-09-15 22:11:16

Answer 7

+2 A:

Why is MichalBE getting downvoted? He's right - using jQuery (or any library) just to fire a function on page load is overkill, potentially costing people money on mobile connections and slowing down the user experience. If the original poster doesn't want to use onload in the body tag (and he's quite right not to), add this after the draw() function:

if (draw) window.onload = draw;

Or this, by Simon Willison, if you want more than one function to be executed:

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}

tagawa 2010-09-10 01:55:39

That kind of lower-level hacking around the DOM, messing with the inline handlers, *and cross-browser quirks thereof*, is precisely the reason jQuery was born. Yes, it is possible, and yes, you should (as a JS developer) know what it does and how; but the point of jQuery is to provide a convenient abstraction above that. While jQ is overkill for the first example, it is already perfectly appropriate in the second.

Piskvor 2010-09-10 10:08:30

OK, but I still think it's wrong to make the user download an entire library just to add a load function, however good the abstraction.

tagawa 2010-09-14 08:02:27

Piskvor - Im going to sue your ass for making me throw up a little bit in my mouth.

Chase 2010-09-15 22:13:17

Answer 8

+1 A:

Or no JavaScript load function at all...

<html>
<head></head>
<body>
    <canvas id="canvas" width="150" height="150"></canvas>
</body>
<script type="text/javascript">
    var draw = function() {
        var canvas = document.getElementById("canvas");
        if (canvas.getContext) {
            var ctx = canvas.getContext("2d");

            ctx.fillStyle = "rgb(200,0,0)";
            ctx.fillRect (10, 10, 55, 50);

            ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
            ctx.fillRect (30, 30, 55, 50);
        }
    }
    draw();

    //or self executing...

    (function(){
        var canvas = document.getElementById("canvas");
        if (canvas.getContext) {
            var ctx = canvas.getContext("2d");

            ctx.fillStyle = "rgb(200,0,0)";
            ctx.fillRect (50, 50, 55, 50);

            ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
            ctx.fillRect (70, 70, 55, 50);
        }
    })();
</script>
</html>

subhaze 2010-09-10 16:54:20

ansaurus

tags:

views:

answers:

Can regular JavaScript be mixed with jQuery?

related questions