Entries:
Comments:
Posts:

Loading User Information from Channel 9

Something went wrong getting user information from Channel 9

Latest Achievement:

Loading User Information from MSDN

Something went wrong getting user information from MSDN

Visual Studio Achievements

Latest Achievement:

Loading Visual Studio Achievements

Something went wrong getting the Visual Studio Achievements

Getting Started with jQuery - 14

Download

Right click “Save as…”

We've said several times how jQuery helps smooth over JavaScript's rough edges. In this lesson, Bob shows how to include and reference the jQuery library in your web page as well as explaining how to get a reference to the jQuery object, demonstrating the use of the .ready method as a means of bootstrapping the onload event, and more.

Tag:

Follow the Discussion

  • Another great video, thanks. 

  • AndyAndy

    Where are the source downloads? It is not here at the C9 site.

    Thanks!

  • @Andy: Take a look at the "series" page:

    http://channel9.msdn.com/Series/Javascript-Fundamentals-Development-for-Absolute-Beginners

    ... specifically, under the text paragraph: "Download the entire series source code."   Hope that helps!

  • renarena

    Hello Bob,
    Thank you for the great video series. While following you on the video 14, I included the reference
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.min.js"></script> in my html file, yet it gives me an error when i run it:

    SCRIPT5009: 'jQuery' is undefined
    script14.js, line 1 character 1

    I wonder if that's something related to not downloading the jQuery. So I tried to download the minimized version of jQuery from jQuery.com, but i keep getting the error:

    'window' is undefined

    I could not figure out what it meant. I appreciate for any help in this regard.

  • renarena

    Hello Bob,

    I was able to get this into work. Just incase if anybody else runs into same problem:: I saved the min.js file and copied the code into another .js file and referenced it in the html file.

    Thanks much!!!

  • @rena: Good to hear you got it sorted out!

  • Oldemiro Baloiwdownload Never Mind

    Hello Bob I a, having issue with append and prepend it doesn't works i downloaded the latest version of jquery and i am using dreamwaver CS5 with html5 pack i did as same you did 

    $first("#first").append("<h2>This is what happen after</h2>");
    });

    thanks for help

  • Roberto DelgadoRoberto Delgado

    Hellow Bot , I follow your Videos and they are a good example of a good teaching.

    I learned a lot of your Videos


    Thanks

    Roberto Delgado

  • @wdownload: Sorry for the delay ... I may need to see more of your code to uncover the issue.  Can you post it?

  • Stephanie HughesStephanie Hughes

    Thanks Bob for again providing an excellent course.

    As was the case HTML5 and CSS3 and JS. This is also a great course on jQ.

    I use full Adobe CS6 apps inc Dreamweaver CS6 and prefer to use DW as my main dev environment! As you can tell I am a graphic designer/web designer.

    Thanks for all that you do!

    Stephanie

  • SashiSashi

    Great article. I struggled for some time setting JQuery up and running on my machine, but then I quickly found that there are some great online tools that would help you get started.

    here is how I did it.
    use online tool called JSFiddle at http://jsfiddle.net/
    It has 4 windows on the screen HTML, CSS, JS and the last window to render your results
    I copy/pasted all your examples right into these windows (you dont need to make a reference of your code .js file, since it assumes its right within the code.
    rest of it works like a charm. This is especially good for newbees to get started quickly.

    Hope this is helpful

  • @Sashi: Great advice.  I think I use JSFiddle later in this series ... near the end.  It's a helpful workbench for experimenting.

  • Bob DanielsBob Daniels

    Hi Bob,

    I come from the Ruby world and Im a somewhat new programmer. Having just gone through learning Ruby programming from the ground up, and after watching 14 of your videos, I just wanted to drop you a note to compliment you. I WISH I had videos like this to learn Ruby. You are a great online teacher; I especially appreciate how you are very thorough about explaining syntax and the little quirky things that can trip up new programmers. Your explanation of arrays, hashes, strings, etc. were fantastic. Thanks again for putting this all together as I feel I am really understanding Javascript and can't wait to finish the series.

  • @Bob Daniels: Ah, very nice feedback ... thank you for the compliments.  I think I may try my hand at learning Ruby someday (like most developers, I have a list a mile long of things I would love to learn).  Honestly, there's so much opportunity here in the C# / .NET space that in 18 years I've never needed to venture far from Microsoft's ecosystem.  Hope you continue to enjoy this series!

  • IbaIba

    Dear Bob.
    By trying to download jQuery, it gave a warning ("This type of file could harm your computer"). How can you help ? Thank you again.

  • Bob,

    Thanks for the labor of love you provide. It doesn't go unnoticed.

  • @Iba:  The gas pipe running into my house could harm me and my family if I break off the valve and light a match.  Smiley  jQuery will not harm your computer unless you do something crazy.  If you're still worried, do this: http://jsfiddle.net/

  • @jonbrwn: Thank you!  Let's hope it doesn't go unnoticed by some crazy rich investor someday.  Tongue Out

  • Re-opening this closed thread ...

  • I'm still confused about single quote and double quote. I see in the previous lessons, we can use it interchangeably. What's the most difference  between them?

  • @Minowar: You can use them interchangeably.  I prefer double quotes in most cases, but I accidentally use either one.  I know it's confusing ... just pick one and use it consistently!  (Do as I say not as I do.  Smiley

    Check this out:

    http://stackoverflow.com/questions/242813/when-to-use-double-or-single-quotes-in-javascript

  • WillWill

    hi Bob,

    great course! am v. new to web development and think i'm finally getting the hang of it thanks to you're videos.

    got a question: i'm using Visual Studio Express 2012 to complete the examples... up to now
    (on HTML/CSS3 course and Javascript course so far) the VS's been offering an auto-completion list for most
    inputs but it doesnt seem to do so for jQuery objects - is there a way of fixing that? i believe it
    may have something to do with the IntelliSense function of Visual Studio but dont want to mess around with
    VS without guidance.

    Cheers!
    Will

  • @Will:  Try this:

    http://stackoverflow.com/questions/11488208/intellisense-doesnt-work-for-js-in-vs2012

  • DharmaRaoDharmaRao

    Nice to have videos to learn Jquery. Its amazing demonstration by Bob

  • HemimaHemima

    Hi BobTabor

    Excellent videos from scratch ,for beginners will be very useful thanq soo much

  • Only problem I had was my pop up blocker  was preventing the "This works" box from coming up on IE10

  • @starforce: I think that's a good point ... JavaScript / jQuery does have it's limitations insomuch that there might be other factors on the user's computer that could prevent it's proper function.  Therefore, it is always best on real websites to limit its use to "nice to have features" and not "must have features".  The exception would be a jQuery-based app.

  • johnjohn

    Thanks for the great videos Bob. Was having some trouble getting JQuery to work and did some googling ... Found out that I need to be referencing the JQuery library first for it to work. Not sure if you mentioned that or if I just missed it. Anyway, thanks again for the great instruction.

  • Steve LarsonSteve Larson

    Hi Bob,
    Thanks for the great videos on JavaScript. I tried the download link for the code files, and was not able to access them. I am now a member of LearnVisualStudio.Net, and tried to access the files there, but no luck. Can you perhaps forward them to my email address? Additionally, can I access the JavaScript lessons from LVS.Net? Thanks, Steve :)

  • @john: I can't recall either, but that is a good point.  It has to be BEFORE your code.

    @Steve Larson: Please try this link (from this series' home page):  Download the entire series source code.

  • MattMatt

    Hi Bob,
    Firstly, greatly appreciate the videos - very clear and help even for a beginner like me.
    I'm am looking for some guidance installing a homepage slideshow using javascript jquery and feel I have gotten about 90% of the way there but have hit a wall getting it fully functional. In the lesson above you speak about the CDN which is where I suspect my problem is stemming from (not having it properly installed, that is). My question is how do I know which jquery library I need to be using (I downloaded the external file from the website I got the slideshow from and it says 1.3.js - do I need to match up the library to this one I suppose? Greatly appreciate the help

  • @Matt: The first 90% is always easy ... it's that last 90% that's hard.  Smiley

    When I face these sorts of things, I always try to revert back and get the author's example to work in my own environment.  Can you get THEIR examples working?

    It's possible that it's simply not working LOCALLY but would work when deployed to a live URL somewhere.  I circumvent this by using a local web server mapping a live domain like www.example.com to 192.168.1.1 via my hosts file.

    Most of the CDNs have *all* the old versions of jQuery to be backwards compatible, even if they don't advertise it.

    And finally, there are dozens of slideshow plugins for jQuery.  If I can't easily get one working, I bolt and try another.

    If you have any other specifics, I might be able to help further.  Any progress?

  • DavidDavidDilley Keepin' On

    I realize you are trying to keep it simple and not mix it with ASP.NET so all the GUI control you use in your examples are basic HTML, but I am wondering how you would access an ASP.NET or AJAX web GUI control. Although I have not tried it from code yet, I am guessing that the way to access ASP.NET and AJAX controls on the DOM is by using the attr property of the jquery object with something like:
    $('#aspnet_textbox_id').attr("text" ,"Put this text in the control");
     Would that be correct?

     

  • I am loving these courses, thank you! Smiley

    I think I found an error on C9JS_15.html, the unordered list tag is not closed:

    http://j.mp/14cAQhr

  • Clint RutkasClint I'm a "developer"

    @csaborio: just looked at the series' ZIP file with all the samples, it is closed.

  • Clint RutkasClint I'm a "developer"

    @DavidDilley: This is a pure JavaScript series aimed at beginners.  For questions like that, I suggest heading over to channel 9 forums, www.stackoverflow.com or http://www.asp.net/ or look at some of the samples on ASP.NET.  Sorry

  • MaartenMaarten

    Hi

    First of all: thanks for the very informative series :)

    Second: when I try to execute your code around the 27:26 mark (and I changed #myFirstParagraph into #first (because there was no tag with the ID myFirstParagraph as far as I could tell), I couldn't get it to work. The browser only showed the popup, not the fading.

    How can this problem be solved?

    Thank you !

  • MaartenMaarten

    Regarding my last comment:

    when I insert all these 'actions' into a function (like here under) it works.

    $(function() {

    $('#first').fadeOut(500).fadeIn(500);
    }
    );

    Does this mean that it is necessary to insert all statements into a function that gets executed when the document is ready? ($ = $(document).ready , not?)

    Thanks.

  • @Maarten: Hi Maarten, I'm not sure I completely understand your question.  You put code in that structure that you want to execute when the page loads.  Sometimes, you are REGISTERING an event that the user may kick off later somehow (like a click event, but there are many other possibilities).  There are techniques where you can attach a method call AFTER the page load (again, in response to some user action) but I don't talk about those in depth in this series (actually, honestly, it's been a couple of years since I recorded this so my memory is foggy on exactly what I do talk about in this series) but for more information check this out:

    http://api.jquery.com/category/events/event-handler-attachment/

    Did that answer your question?  If not, could you rephrase and I'll take another pass at answering.  Smiley

  • MaartenMaarten

    Hi

    Thanks for taking the time to answer.

    What I meant was that if I make a .js file, with just the following line of code in it (like you do in this video around the 27:30 mark), it doesn't work:


    jQuery('#first').fadeOut(500).fadeIn(500);


    Does that mean that, if you want something to execute on your page, you have to write it as follows (or in a similar way, but with another event), or did I do something wrong?

    $(function() {
    jQuery('#first').fadeOut(500).fadeIn(500);
    }
    );

    Could it be that you forgot to do that or is it not necessary at all?

    I hope this is clearer :)

    Thank you,

    Maarten

  • @Maarten: Yes, JavaScript needs to be triggered by something.  Otherwise, it just sits there and never gets executed.  Don't take my word for it ... try it yourself.  Big Smile

Remove this comment

Remove this thread

close

Comments Closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.