How to do integrate javascript in drupal way I want to integrate this Flex Slider code to drupal but without success. Please help.
here is the code

if($('#homeSlider').length &gt; 0) {

    var hIndex = 0;
    var $hCap = $('#homeSlider').find('.captions').children('li'), $hSlides, $hPrev, $hNext;

    $('#homeSlider').flexslider({
        animation: 'slide',
        animationLoop: true,
        slideshow: true,
        slideshowSpeed: 7000,
        smoothHeight: false,

        controlsContainer: $('#homeSlider').find('.thumbs'),
        keyboard: true,
        controlNav: false,
        start: function(e){

            $hPrev = $('#homeSlider').find('.flex-prev');
            $hNext = $('#homeSlider').find('.flex-next');
            $hSlides = $('#homeSlider').find('.slides').children('li');

            $hPrev.append('&lt;img src="' + $hSlides.eq(e.count).data('thumb') + '" /&gt;');
            $hNext.append('&lt;img src="' + $hSlides.eq(hIndex+2).data('thumb') + '" /&gt;');

            $hPrev = $hPrev.find('img');
            $hNext = $hNext.find('img');

        },
        before: function(e){

            $hCap.eq(hIndex).fadeOut(200);

            var prev = hIndex - 1 &lt; 0 ? e.count-1 : hIndex - 1;
            var next = hIndex + 1 &gt; e.count-1 ? 0 : hIndex + 1;

            hIndex = e.data('flexslider').animatingTo;
            $hCap.eq(hIndex).fadeIn(500);

            changeThumbs(prev, next);

        }
    });

    function changeThumbs(prev, next){
        $hPrev.prop('src', $hSlides.eq(prev).data('thumb'));
        $hNext.prop('src', $hSlides.eq(next+2).data('thumb'));
    }

}
The Managing JavaScript in Drupal 7 guide provides the information to add JavaScript to Drupal. The techniques presented there apply to both themes and (custom) modules:

Add a scripts[] = somescript.js to your module or theme's .info file
Use drupal_add_js() in your module or theme's code
Use the #attached['js'] property in a From API or renderable array.
Note that Drupal already include jQuery, jQuery UI and a bunch of other libraries so you don't, and shouldn't, add them yourself. Instead you should use drupal_add_library() or the #attached['library'] property.

The Working with CSS guide provides the information to add CSS to Drupal. Again, the techniques presented there apply to both themes and (custom) modules. With an exception: addition of style sheets from an .info files only works for a theme and not a module.

Add stylesheets[all][] = somestylesheet.css to a theme's .info file.
Use drupal_add_css() from module or theme's code.
Use #attached[css] property in a From API or renderable array.