Waiting for jquery to load asynchronously before loading js

You can do it this way:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">    
    var google_ad_slot;
    var google_ad_width;
    var google_ad_height;
    var google_ad_client;

    $(document).ready(function() 
    {
        var adWidth = $(document).width();
        google_ad_client = "ca-pub-6777348526535979";
        if ( adWidth >= 768 ) {
           google_ad_slot    = "3870513647";
           google_ad_width   = 728;
           google_ad_height  = 90;
        } else {
           google_ad_slot    = "1127560842";
           google_ad_width   = 320;
           google_ad_height  = 50;
        }
        $("head").append('<script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></script>');
    });
</script>

After DOM will be ready and scripts (including jQuery) will be loaded, jQuery will call this $(document).ready() function, your values will be initiated and Google Ad script will be added to the head section of a document.

All modern browsers correctly load and run script after adding it to DOM.

Variables should be global to let Google script work with them. You can also try changing $(document).ready to $(window).load if it won't work to become absolutely sure it has been loaded.

I think what you're looking for is AMD. AMD (asynchronous module definition) is a specification that allows Javascript modules to explicitly declare their dependencies and load asynchronously.

Probably the most famous implementation of AMD is RequireJS. Basically, you move your code from the <script> tag and change it as follows:

require(['jquery'], function($){
    var adWidth = $(document).width();
    // And the rest of your code
});

Beware though, that jQuery doesn't support AMD very well, so you'll have to jump through some hoops. There are instructions on the RequireJS website to handle jQuery.