How to properly link Javascript to html page

Question

I have javascript that was once inserted directly into my html page. It got to large and I decided to move it to a separate file. But I am not sure how to link the two. I attempted to do so but the javascript won't work.

This is the link I use in my html header

<script src="js/index_slide.js"></script>

And this is my javascript for the file index_slide.js

 <script type="text/javascript">
$(document).ready(function() {


    $('#bottom_logo').click(function(event) {
        event.preventDefault();

            var position = $('#main_div_wide_wrapper').position().left;
            var width = $( document ).width();
            var slide = ($('#main_div_wide_wrapper').position().left/$( document ).width()) *-1;


            if ( slide == '0') {

        }
        if ( slide == '1') {
            $('#main_div_wide_wrapper').animate({
                'left' : '+=100%' //moves left
                });
        } 
        if ( slide == '2') {
            $('#main_div_wide_wrapper').animate({
                'left' : '+=200%' //moves left
                });
        } 
        if ( slide == '3') {
            $('#main_div_wide_wrapper').animate({
                'left' : '+=300%' //moves left
                });
        }
        if ( slide == '4') {
            $('#main_div_wide_wrapper').animate({
                'left' : '+=400%' //moves left
                });
        }



    });//end bottom_logo

     $('#about').click(function(event) {
     event.preventDefault();

            var position = $('#main_div_wide_wrapper').position().left;
            var width = $( document ).width();
            var slide = ($('#main_div_wide_wrapper').position().left/$( document ).width()) *-1;

            if ( slide == '0') {
                $('#main_div_wide_wrapper').animate({
                'left' : '-=100%' //moves left
                });

        }
        if ( slide == '1') {

        } 
        if ( slide == '2') {
            $('#main_div_wide_wrapper').animate({
                'left' : '+=100%' //moves left
                });
        } 
        if ( slide == '3') {
            $('#main_div_wide_wrapper').animate({
                'left' : '+=200%' //moves left
                });
        }
        if ( slide == '4') {
            $('#main_div_wide_wrapper').animate({
                'left' : '+=300%' //moves left
                });
        }

    });//end about

    $('#services').click(function(event) {
        event.preventDefault();

            var position = $('#main_div_wide_wrapper').position().left;
            var width = $( document ).width();
            var slide = ($('#main_div_wide_wrapper').position().left/$( document ).width()) *-1;


            if ( slide == '0') {
                $('#main_div_wide_wrapper').animate({
                'left' : '-=200%' //moves left
                });

        }
        if ( slide == '1') {
            $('#main_div_wide_wrapper').animate({
                'left' : '-=100%' //moves left
                });
        } 
        if ( slide == '2') {

        } 
        if ( slide == '3') {
            $('#main_div_wide_wrapper').animate({
                'left' : '+=100%' //moves left
                });
        }
        if ( slide == '4') {
            $('#main_div_wide_wrapper').animate({
                'left' : '+=200%' //moves left
                });
        }



    });//end services

    $('#designs').click(function(event) {
        event.preventDefault();

            var position = $('#main_div_wide_wrapper').position().left;
            var width = $( document ).width();
            var slide = ($('#main_div_wide_wrapper').position().left/$( document ).width()) *-1;


            if ( slide == '0') {
                $('#main_div_wide_wrapper').animate({
                'left' : '-=300%' //moves left
                });

        }
        if ( slide == '1') {
            $('#main_div_wide_wrapper').animate({
                'left' : '-=200%' //moves left
                });
        } 
        if ( slide == '2') {
            $('#main_div_wide_wrapper').animate({
                'left' : '-=100%' //moves left
                });
        } 
        if ( slide == '3') {

        }
        if ( slide == '4') {
            $('#main_div_wide_wrapper').animate({
                'left' : '+=100%' //moves left
                });
        }



    });//end designs

    $('#contact').click(function(event) {
        event.preventDefault();

            var position = $('#main_div_wide_wrapper').position().left;
            var width = $( document ).width();
            var slide = ($('#main_div_wide_wrapper').position().left/$( document ).width()) *-1;


            if ( slide == '0') {
                $('#main_div_wide_wrapper').animate({
                'left' : '-=400%' //moves left
                });

        }
        if ( slide == '1') {
            $('#main_div_wide_wrapper').animate({
                'left' : '-=300%' //moves left
                });
        } 
        if ( slide == '2') {
            $('#main_div_wide_wrapper').animate({
                'left' : '-=200%' //moves left
                });
        } 
        if ( slide == '3') {
            $('#main_div_wide_wrapper').animate({
                'left' : '-=100%' //moves left
                });
        }
        if ( slide == '4') {

        }



    });//end contact


});
</script>

How can I get the javascript to work when in another file?

Answer 1

You can remove the

 <script type="text/javascript">

and the bottom </script> from the .js file

Answer 2

1) You have to link jquery
2) Remove the script tags in *index_slide.js*
3) Don't forget to put the jQuery link before your script.