javascript document ready function

Question

And once again I am stuck in the learning process. I am trying to animate a background of a site using the help provided here. But I am a little stuck. As I am teaching myself javascript (to replace basic actionscript). I like to write line by line instead of copying an pasting so I can understand how things work.

This is what I have so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>My Site</title>
<script type="text/javascript">
    $(document).ready(function(){
        window.alert("function started");
    });
    </script>
    </head>

    <body>
    </body>
    </html>

As you can see the alert window should pop up as the function is started, but it doesn't. Is there a reason why this happens or should I just set up a body onLoad function to handle what I want to do when the page loads?

You need to include a reference to jQuery, http://api.jquery.com/ready/ — Jonathan, Oct 24 '13 at 21:37
JavaScript doesn't have a "document ready" function. That's jQuery, which is a code library written in JavaScript. — Blue Skies, Oct 24 '13 at 21:41
Welcome to jQuery; you're about to become 1000 times more productive in JS. :D — nothingisnecessary, Oct 24 '13 at 22:12

nothingisnecessary · Accepted Answer · 2013-10-24T21:54:10.497

You forgot to include the jQuery javascript API in your page. It should be included before you use the $() function (which is an alias for the jQuery() function in this case.)

If you check your browser's Javascript console you probably have an exception for trying to use undefined $. (In IE a handy trick while doing web development is to enable the Advanced option for "Display a notification for every script error," but this can get annoying when visiting other sites because lots of developers are lousy about identifying and fixing unhandled JS exceptions! Modern browsers usually use 'F12' (in the US at least), to open the developer tools for debugging Javascript, etc.)

Corrected code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>My Site</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function ()
        {
            window.alert("function started");
        });
    </script>
</head>
<body>
</body>
</html>

This example uses the Google-hosted jQuery API, but you may also choose to download jQuery from http://jquery.com

score 0 · Answer 2 · answered Oct 24 '13 at 21:38

Demo

http://jsfiddle.net/dvADs/

You are missing library reference~! like this

<script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script>

Hope rest feeds your needs :)

Basics: http://jqfundamentals.com/chapter/jquery-basics

JQ CDN: http://jquery.com/download/

$(document).ready(function(){
    window.alert("function started");
});

score 0 · Answer 3 · answered Oct 24 '13 at 21:40

0

You are not first loading jQuery. jQuery is a library that you are trying to call by using the $. You can download it here: http://jquery.com/download/. Make sure you load jQuery before the javascript code.

answered Oct 24 '13 at 21:40

Paul

1,056
11
18

javascript document ready function

3 Answers3