WP.com JS Assistance please

Good evening,

Apologies, I am new to JavaScript.

I am assisting on a WordPress.com hosted page.

The page uses Woody PHP Snippets.

I am looking to implement a downloaded script to create a page where the pictures have shadows on hover.

The JS is currently at the bottom of the script, the last code before closing body tag:

<!– /#wrap –>

<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.8.3.js”></script&gt;
<script type=”text/javascript”>
$(function(){
// See if this is a touch device
if (‘ontouchstart’ in window)
{
// Set the correct body class
$(‘body’).removeClass(‘no-touch’).addClass(‘touch’);

// Add the touch toggle to show text
$(‘div.boxInner img’).click(function(){
$(this).closest(‘.boxInner’).toggleClass(‘touchFocus’);
});
}
});

Would I be correct in thinking that I should be removing it and adding the following into the plugin as:

jQuery(document).ready(function( $ ){
$(function(){
// See if this is a touch device
if (‘ontouchstart’ in window)
{
// Set the correct body class
$(‘body’).removeClass(‘no-touch’).addClass(‘touch’);

// Add the touch toggle to show text
$(‘div.boxInner img’).click(function(){
$(this).closest(‘.boxInner’).toggleClass(‘touchFocus’);
});
}
});
});

Then should I be setting to Internal/Footer/In frontend?

Should my code then automatically pick it up from the page?

Apologies again.

Many Thanks