SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 31
  1. #1
    SitePoint Enthusiast Angrypoonani's Avatar
    Join Date
    Mar 2011
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery, Javascript, or both?

    I've recently been pushing around the thought of whether I should be learning jQuery before I even attempt javascript or to drop jQuery and learn javascript first...
    Thoughts? Opinions?
    Anything to shed light on the subject of jQuery vs. Javascript

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Angrypoonani View Post
    I've recently been pushing around the thought of whether I should be learning jQuery before I even attempt javascript or to drop jQuery and learn javascript first...
    Thoughts? Opinions?
    Anything to shed light on the subject of jQuery vs. Javascript
    Javascript is jQuery.
    jQuery is really just a piece of code (mind you, a very useful piece of code) written in JavaScript. By learning JavaScript first, it will give you a deeper knowledge of how jQuery works, and jQuery's limitations. It can only perform tasks that JavaScript can; it just provides you with a more efficient syntax to perform JavaScript functions.

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I agree with Travis, except I'll fix this:

    jQuery is Javascript.
    jQuery is a bunch of pre-written Javascript, including cross-browser workarounds and shortcuts for developers (not for browsers).

    But agreed with Travis that you'll want to learn Javascript itself before landing in any library. That way, you can choose *any* library later and while you'll learn some new syntax stuff and prebuilt functions, any debugging or fixes you need to write yourself, you can. And learn other libraries when needed.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    jQuery lets you get up and running quickly, because a lot of the hard stuff in JavaScript is done for you in jQuery. So jQuery is handy for people who don't want to specialize in JS but still need to use it.

    As others have said, the ideal is to know as much as possible about what's going on, so that you have more flexibility—which means learning JavaScript. But that takes a while (I still haven't gooten very far with it.)

    If you only learn jQuery, you may end up using a gigantic amount of code (the whole jQuery library) to achieve what just a few lines of simple JS could do. So, although jQuery may be the quicker way to get something done, it's never the most efficient way to use JavaScript, as the user will always be downloading more code than needed.

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,833
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    So, although jQuery may be the quicker way to get something done, it's never the most efficient way to use JavaScript, as the user will always be downloading more code than needed.
    The benefit that jQuery has is that if you use one of the shared copies of jQuery such as the one Google supplies then a lot of people will already have that downloaded before they even get to your page and so provided that you are actually using the library correctly you can end up with a lot less code for them to actually download for your page to work.

    You do need a thorough understanding of JavaScript to use jQuery properly though. I have seen 20+ line scripts people have written using jQuery that could have been done in two or three JavaScript statements without jQuery.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    I knew someone would probably say that jQuery will be cached for most people anyway. I guess it's true, though I still find jQuery sites tend to be slower to load. But I haven't done any speed tests on this. Far too lazy.

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,833
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    though I still find jQuery sites tend to be slower to load.
    Possibly because only some of them actually bother to use one of the shared copies and so their visitors have to download the humongous script before the page can finish loading. If more people were to use the shared copy in their sites then there would be more people with it cached.

    Of course that still doesn't stop all those people who use jQuery unnecessarily where the corresponding JavaScript without jQuery is either shorter than the code needed to call jQuery to do it or where the JavaScript would only be slightly longer than the jQuery calls without the actual jQuery library.

    Personally I find that I can include everything I need for most web pages with less than 5% of the amount of code that jQuery uses simply by only including the pieces of code I actually need to use.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    One website at a time mmj's Avatar
    Join Date
    Feb 2001
    Location
    Melbourne Australia
    Posts
    6,282
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It's worth learning Javascript first, since you'll need to know Javascript anyway if you're going to use jQuery (because it *is* Javascript).

    I can recommend the book "Javascript: The Definitive Guide" by David Flanigan, and for follow-up reading, "Javascript: The Good Parts" by Douglas Crockford. See if your local library has any copies.

    As for jQuery, I think its online documentation is good (but it'll help if you know Javascript first).
    [mmj] My magic jigsaw
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    The Bit Depth Blog · Twitter · Contact me
    Neon Javascript Framework · Jokes · Android stuff

  9. #9
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In my opinion, if you want to just copy-paste scripts, learn JQuery. If you want to be albe to modify those script, learn (basic) Javascript first.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by lenny_h81 View Post
    In my opinion, if you want to just copy-paste scripts, learn JQuery. If you want to be albe to modify those script, learn (basic) Javascript first.
    You can learn to modify and write jQuery scripts quite effectively without knowing JS proper.

  11. #11
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,833
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You can learn to modify and write jQuery scripts quite effectively without knowing JS proper.
    Not based on a lot of scripts I have seen where there are 20 or 30 lines of jQuery to do the same thing as half a dozen lines of ordinary JavaScript.

    There are also lots of people trying to use jQuery who don't know JavaScript and who therefore spend a lot of time asking how to do the simplest of things where a single JavaScript command is all that is required.

    To be able to use JQuery you need to know at least the basics of how JavaScript works as otherwise its like trying to drive a road train with 6 trailers on when you never learnt how to drive a car.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Yes, my comment was really based on doing simple things with jQuery, as presented in a book like Novice to Ninja. When I look at scripts for sliding carousels etc., I realize that you still need to understand JS to write that stuff. So I guess it depends on how much you want to do with JS. jQuery is handy for designers who just need to be able to add scripts written by others, perhaps modify them a bit, or to write other simple scripts that rely on the library. It's certainly a far cry from actually knowing JS properly. (I keep trying to find the time to crawl down that rabbit hole properly.)

  13. #13
    SitePoint Addict capescafe's Avatar
    Join Date
    Dec 2004
    Location
    Bellevue, WA
    Posts
    222
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I just was searching for this very subject on whether or not to learn JavaScript or jQuery first and I found this thread. I took Kevin Yank's class a while back when it was first introduced here on Sitepoint called JavaScript Live. I started to grasp a few things about it but I have a really hard time understanding programming. HTML, CSS are much easier to learn. Does anyone have any recommendations on books for someone trying to learn JavaScript coming from a designer's perspective? Do you think it's possible for a designer to learn JavaScript? Or any other programming language? PHP? Is JavaScript better to learn first then move on to other ones like PHP? I figured if I could at least learn JavaScript though it would help.
    Carolyn (cape's cafe)
    Twitter | My Treehouse Profile | eBookFling

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by capescafe View Post
    Does anyone have any recommendations on books for someone trying to learn JavaScript coming from a designer's perspective? Do you think it's possible for a designer to learn JavaScript? Or any other programming language? PHP? Is JavaScript better to learn first then move on to other ones like PHP? I figured if I could at least learn JavaScript though it would help.
    I guess designer or not, if you are going to learn a programming language you have to tackle it as a programmer. Of course, jQuery is an easy alternative. Regarding whether to learn JS or PHP, it really depends on what skills you most need. In my (limited) experience, both have about the same learning curve.

    I am pretty much a beginner at both, but I can highly recommend Jeremy Keith's Dom Scripting book (which has recently been updated). It's an excellent intro to JS. Or, if you just want to be able to do cool stuff without learning the whole language, give jQuery Novice to Ninja a shot.

  15. #15
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Do you think it's possible for a designer to learn JavaScript?
    Absolutely. A designer mindset probably has to work harder at it. But designers can at least learn basic programming, if not also advanced.

    Or any other programming language? PHP? Is JavaScript better to learn first then move on to other ones like PHP? I figured if I could at least learn JavaScript though it would help.
    My husband, who started learning programming in Pascal in Delphi (Pascal was written to be a teaching language), later went through batches of C and C++, learned Assembly for the lawlz (and to build an emulator), and has been programming Perl for over 10 years now... told me I should expect to get frustrated simply by having Javascript (or Perl, as I was learning both as "first languages" at the time) as my first language. This would be partially because most Javascript that does anything is interacting with its API, the DOM. The DOM is buggy and inconsistent between browsers. Javascript itself has plenty of quirks compared to other languages (the biggest difference: no classes, but prototypes of objects... but also only has "float" as numbers, functions are first-class, everything's an object, C-style blocks without block scope... I think are the other biggies).

    Frankly, as someone starting out with pathetically-low math skills and learning programming for the first time, I would have trouble no matter what language it was. There are simply wholly new ideas and ways of thinking in programming that HTML and CSS (being non-programming languages) simply don't have (hint at in many places, but don't have).

    I'm not a designer really, though I draw and I can build entire markup+CSS structures in my head before actually sitting down to write them (meaning, I feel very comfortable with HTML/CSS), and here's my experience so far learning Javascript (I'm *still* a newbie after , what, 3 or 4 years now? But that's pretty much entirely due to me spending a crapload of time trying to do something in Javascript, and then months and months of having no time to touch it again... forgetting most of what I learned then):

    I actually started learning Perl, going through the Llama book ("Learning Perl"). Each chapter introduces basics of the language like variables and statements, blah blah. At the end of the chapter, there are a couple of exercises (and more if you buy a little companion workbook). It's meant to be used by teachers in a classroom who can further explain stuff.

    So okay I get through the first 2 chapters and then they get into loops. And while I thought I got the example, I could not do a single one of the exercises in the back. The answers are in the back, and I'm looking at them and I'm like, well I can *read* these, but why couldn't I come up with them?

    Later, suddenly had to do stuff with Javascript for the first time. Happened to have Simply Javascript book (the SitePoint book which the JavascriptLive course was based on... the main difference is, instead of using SitePoint's Core library to deal with IE, they used jQuery, which for me was awesome because now I can either use Core or I know how to integrate vanilla JS into jQuery better) laying around and went though that.

    Same things: variables, statements, loops, conditionals, functions. This time, it wasn't entirely new to me, because Perl was quite similar. Learned more, but missed stuff.

    Later, got more time to get back to the Llama. Found that the loops made more sense, and now I *could* do the exercises, and in more than one way. Which was very exciting (sad, excited by grokking loops, but, meh).

    When I next had to do something in Javascript, more made sense regarding functions and closures.

    I'd say it was beneficial to learn another language, or maybe it just helped that I had this other resource not written by Javascript people that also explained programming. I started writing in my Perl book what the equivalent Javascript would be for any particular Perl example.

    Certainly once you get over that "hump" of the concepts, and once you learn one programming language, learning more that aren't horribly different is much easier, or at least being able to get around and write stuff that works is easier (learning the details of a language would take way more time).

    If you think you're going to want to learn more languages, go ahead and start looking at one you're interested in now... esp since, with Javascript being prototyped, you may want early exposure to class-based languages and how they are different. PHP is class-based, as is Python, Ruby, etc. Maybe if you're interested in a back-end language, go ahead and read the flame-fest threads around teh internets where people scream out why one is better than the other. Sometimes there are good arguments in there, to help you get an idea of what you get from a language. The community is important!!! You don't learn in a vacuum and you likely won't develop alone, so a good online (and offline) community for your language is very good to have. Good documentation is also good... PHP is known for php.net which has lots and lots of documentation written in fairly plain English. Many applications for your language as well... for example, if you're using Linux and want to tinker with the desktop apps, Python is one clear choice. Lots of stuff in Gnome is written in Python. Also programs on Windows.

    I'm kinda glad if I want to make some object that's mostly the same as some other object plus whatever else I want, I don't have to go off and make some new Class first that does nothing but states the rules. In Javascript, you can just say "I want a new Object and I want it to inherit all these methods and properties from the other one" and it's done.

    Some people are talented in programming and maybe already have a mindset that works because they already think a certain way, but I'd say anyone can learn basically how to think that way and at least be able to write simple things that work. And just as importantly, be able to read complex things and know what they're doing (and why). I'm not there yet, but I believe I will be.

  16. #16
    SitePoint Addict capescafe's Avatar
    Join Date
    Dec 2004
    Location
    Bellevue, WA
    Posts
    222
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    ralph.m thanks for the recommendation on the books
    Stomme poes thanks for explaining in detail how you are learning that really helps. I guess I just need to stick with it and I'll eventually get it hopefully. I think I'm able to understand more by reading a script than actually being able to write my own at this point, but it's still very minimal what I can understand. But that's a start right? Well I've got Simply JavaScript the book already and I'm definitely gonna check out that Jeremy Keith book, didn't know he had written any JavaScript books. Good recommendation about the forums also, I've been coming to the forums more and more recently, because it really is super helpful to find out how others approach something or tap into their knowledge of something.
    Carolyn (cape's cafe)
    Twitter | My Treehouse Profile | eBookFling

  17. #17
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,151
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    DOM Scripting was one of the first JavaScript books I read and I highly recommend it.
    The only code I hate more than my own is everyone else's.

  18. #18
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    And also: as someone who reads reads reads, I agree wholly with those who say: write, write, write.

    Write code, write more code, write still more code. You learn stuff from these books, absolutely. You learn to know what you know from writing code.

    Go ahead and try out http://eloquentjavascript.net/chapter1.html it doesn't focus on DOM scripting til the end. It has a built-in console where you can try out your own code.

  19. #19
    SitePoint Addict capescafe's Avatar
    Join Date
    Dec 2004
    Location
    Bellevue, WA
    Posts
    222
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    And also: as someone who reads reads reads, I agree wholly with those who say: write, write, write.

    Write code, write more code, write still more code. You learn stuff from these books, absolutely. You learn to know what you know from writing code.

    Go ahead and try out http://eloquentjavascript.net/chapter1.html it doesn't focus on DOM scripting til the end. It has a built-in console where you can try out your own code.
    Very cool. I like that there's a built in console. I read the first chapter. I already don't understand the very first example. How does it come up with 55? When I run the script that's what I get in the Output window.
    Carolyn (cape's cafe)
    Twitter | My Treehouse Profile | eBookFling

  20. #20
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    How does it come up with 55? When I run the script that's what I get in the Output window.
    You know, I should figure out how to make Firebug work with his console. With any kind of debugging tool like Firebug, Dragonfly etc what you can do is set a breakpoint (a place where the program should pause) and then you can step through each step. In the Firebug/whatever console you'll see the variables like Total and Count in there, and each step through the loop you'll see what their values upgrade to. In his console all you see is the result of the final Print statement (after all the loops have finished). One thing you can do is, on his page, click on what looks like a bit of paper to load his code into the right side of the console, then change it: move the print statement to inside the loop, so you can see the result of Total after each loop run!
    Code:
    var total = 0, count = 1;
    while (count <= 10) {
      total += count;
      count += 1;
      print('Total is ' + total);  
      print('Count is ' + count); 
    }
    "Count" here is, as he'll later tell you, usually seen in loops as "i" (for incrementer), but for now he uses "count" just so you know what it is.
    So count starts at 1 and all it's doing is counting how many times to run the loop. The conditional (while count's number is less than, or equal to, 10— keep going). So how many times does the loop run? 10 times. 1-10. Later I think he introduces the more popular "count=0, while count < 10..." which is the same number of times, but starting with 0.

    total += count; <-- The longer version of this is, total= total+count. The += is a shortcut. Yes, there is a -= too.
    So to start:
    total=0 and count=1.
    Code:
    while (count <= 10) {
    1 is less than or equal to 10, so run the loop.
    Code:
    total += count;
    total = 0 + 1 (which is 1, so total is now 1)
    Code:
    count += 1;
    count = count + 1, or "increment count by 1". count was 1, +1 makes it now 2.

    Loop goes again, because 2 is still less than or equal to 10.
    total = 1 + 2 (so now 3)
    count = 2 + 1 (so now 3)

    Loop goes again, because 3 is still less than or equal to 10.
    total = 3 + 3 (original total + count, so now 6)
    count = 3 + 1 (so now 4...)

    etc. Count is going up by 1 number each time (which is good, to keep track of each loop), while total starts getting larger (I forget the name of this number sequence but it has a name).

    Code:
    Total starts at 0.
    1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 = 55, where total's values at each loop are 1, 3, 6, 10, 15, 21, 28, 36, 45, and 55
    Believe me, when I first went through his book, I missed a lot of it too. After watching loops in Firebug or (I started before I had Firebug) actually getting out a pencil and writing out each iteration of the loop (like I did above), they started to click.

    Programmers will tell you loops are easy and they are one of the most basic structures in programming. But that doesn't mean everyone just gets them the first time they play with them.

  21. #21
    SitePoint Addict capescafe's Avatar
    Join Date
    Dec 2004
    Location
    Bellevue, WA
    Posts
    222
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I see so it goes through that loop until the count reaches 10 adding each time it goes through the loop? Yeah once you wrote it out like that it made much more sense.

    If you ever do figure out how to use Firebug with that let me know. I've started using Chrome more recently (used to use Firefox)...but does Chrome have something similar to Firebug? I see Dragonfly is for Opera.
    Carolyn (cape's cafe)
    Twitter | My Treehouse Profile | eBookFling

  22. #22
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,833
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by capescafe View Post
    but does Chrome have something similar to Firebug? I see Dragonfly is for Opera.
    All browsers except FireFox have a debugger built into their developer tools. The Firefox Venkman extension provides an identical debugger for Firefox - plus they all look and work a lot more like the debuggers available for other programming languages than Firebug does - Firebug is aimed more at HTML and CSS than it is at JavaScript.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  23. #23
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by capescafe View Post
    does Chrome have something similar to Firebug?
    This video gives a really nice overview of what the Chrome dev tools can do.

  24. #24
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    jquery is fat bloated idiocy used by people who fail to grasp the point of javascript -- it results in even fatter bloated websites filled with nonsense I wouldn't even advise putting on a website in the first place in most cases!

    ... and if you bother to learn javascript you'll find that you don't need the goofy half-assed crutch... and in most cases can use 4k of real javascript to do what takes most people 30k of scripting BEFORE counting the fat-ass library on top of it.

    Jquery is responsible for flushing so many perfectly good websites down the toilet -- I still cannot fathom why anyone is DUMB ENOUGH to even WANT to use it.

    But I say the same thing about HTML5 so...

  25. #25
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by felgall
    The Firefox Venkman extension provides an identical debugger for Firefox
    Every time I checked Venkmann out, it was several released schedules behind and seemed people were working on it less and less. So I ended up never trying it. Esp. now with Mozilla's hurry-up-and-die release schedule. Bleh.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •