Add multiple JavaScript files to template header [duplicate]

Question

I have multiple JavaScript files that I want to load. Some of them in my header.php and the rest in the footer.php.

These are the files:

<?php
<script type="text/javascript src="/scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript src="/scripts/contact.js"></script>
<script type="text/javascript src="/scripts/jquery.easing.1.3.js"></script>
<script src="scripts/jsCarousel-2.0.0.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
    $('#carouselv').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: false, itemstodisplay: 3, orientation: 'v' });
        $('#carouselh').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, circular: true, masked: false, itemstodisplay: 3, orientation: 'h' });
        $('#carouselhAuto').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: true, itemstodisplay: 5, orientation: 'h' });

    });               
</script> ?>

Answer 1

You can't have <script> elements within your PHP like that. Either take them out of the PHP delimiters (<?php ?>) or use wp_register_script() and wp_enqueue_script() to get your scripts within WordPress.

Update

how can i use wp_enqueue_script() with multiple scripts ?

wp_register_script( 'jquery-1.8.2', get_template_directory_uri() . '/scripts/jquery-1.8.2.min.js' );
wp_register_script( 'contact', get_template_directory_uri() . '/scripts/contact.js' );
wp_register_script( 'easing-1.3', get_template_directory_uri() . '/scripts/jquery.easing.1.3.js' );
wp_register_script( 'carousel-2.0.0', get_template_directory_uri() . '/scripts/jsCarousel-2.0.0.js' );
wp_register_script( 'starter', get_template_directory_uri() . '/scripts/starter.js' );

wp_enqueue_script( 'jquery-1.8.2' );
wp_enqueue_script( 'contact' );
wp_enqueue_script( 'easing-1.3' );
wp_enqueue_script( 'carousel-2.0.0' );
wp_enqueue_script( 'starter' );

Then in the starter.js script you can put:

$(document).ready(function() {
    $('#carouselv').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: false, itemstodisplay: 3, orientation: 'v' });
    $('#carouselh').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, circular: true, masked: false, itemstodisplay: 3, orientation: 'h' });
    $('#carouselhAuto').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: true, itemstodisplay: 5, orientation: 'h' });
});