JavaScript and raw HTML in Joomla?

[rinjin07]

Hey all,

I'm a total IT beginner and have been trying to figure out how to put raw html with css and javascript in the header on an article in Joomla 1.7? I heard about this JCE thing but no idea how it works. If someone could explain it to me in complete layman's terms that would be awesome. Here's the code I want to use, for the record. Would appreciate any assistance whatsoever!

Thank you!

<style type="text/css">
h1.infoWindow {
	margin: 0;
	font-size: 11pt;
	font-family: verdana,arial;
}
#map_canvas {
	width: 690px;
	height: 400px;
	border: 1px solid #000;
}
#description {
	width: 650px;
        padding-left:17px;
        padding-right: 17px;
        padding-top: 20px;
	font-size: 10pt;
	font-family: verdana,arial;
	text-align:justify;
}
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
//General purpose ajax utility
function ajaxRequest(url, successFn, failFn) {
	var xhr = null;
	try { xhr = new XMLHttpRequest(); }// code for IE7+, Firefox, Chrome, Opera, Safari
	catch(e) {
		try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); }// code for IE6, IE5
		catch(e) { return false; }
	}
	xhr.onreadystatechange = function() {
		try {
			if (xhr.readyState==4) {
				if (xhr.status==200 || xhr.status==0) {
					successFn(xhr.responseXML);
				}
				else if(failFn) failFn(xhr.status);
			}
		}
		catch(e) { if(failFn) failFn(e.message); }
	}
	xhr.open("GET", url, true);
	xhr.send();
	return xhr;
}

//Specialised constructor for google.maps.InfoWindow
function InfoWindow(map, callbacks) {//functions in the callbacks object determine external behaviour
	var infoWindow = new google.maps.InfoWindow({ content: '' });
	google.maps.event.addListener(infoWindow, 'closeclick', callbacks.closeFn);
	this.attachToMarker = function(p) {
		google.maps.event.addListener(p.marker, 'click', function() {
			infoWindow.setContent(callbacks.formatterFn(p));
			infoWindow.open(map, this);
			callbacks.openFn(p);
		});
	};
}

//Specialised constructor for google.maps.Map
function Map(canvas, point, zoom, template, msgContainer, type) {
	//validate formal variables.
	if(!canvas && canvas.getElementById) { return false; }
	zoom = (typeof zoom == 'undefined') ? 9 : zoom;
	type = (typeof type == 'undefined') ? 'HYBRID' : type;
	//variables and callback functions for infowindow
	var infoWindowOpen = function(p) {//callback for infoWindow
		if(msgContainer) { msgContainer.innerHTML = p.desc || ''; }//action on infoWindow open
	};
	var infoWindowClose = function() {//callback for infoWindow
		if(msgContainer) { msgContainer.innerHTML = ''; }//action on infoWindow close
	};
	var formatter = function(p) {
		return template.replace('%s0', p.title);
	};
	var callbacks = {formatterFn:formatter, openFn:infoWindowOpen, closeFn:infoWindowClose};
	//create google maps objects
	var options = {
		zoom: zoom,
		center: new google.maps.LatLng(point.lat, point.lng),
		mapTypeId: google.maps.MapTypeId[type]
	};
	var map = new google.maps.Map(canvas, options);
	var infoWindow = new InfoWindow(map, callbacks);//Make single InfoWindow, opened by all markers.
	//public methods
	this.addMarkers = function(points) {
		for (i=0; i<points.length; i++) {
			if(points[i].lat && points[i].lng) {
				latlng = new google.maps.LatLng(Number(points[i].lat), Number(points[i].lng));
				points[i].marker = new google.maps.Marker({position:latlng, map:map, title:points[i].title});
				infoWindow.attachToMarker(points[i]);
			}
		}
	};
}

onload = function() {
	var canvas = document.getElementById("map_canvas");
	var msgContainer = document.getElementById("description");

	var template = '<h1 class="infoWindow">%s0<h1>';//template for infoWindow text

	if (canvas) {
		ajaxRequest('/wordpress/partners.xml', function(xmlDoc){
			var xmlPartners = xmlDoc.getElementsByTagName("partner");
			var	partners = [], p;
			for(var i=0; i<xmlPartners.length; i++) {
				p = xmlPartners[i];
				partners.push({
					lat:    p.getAttribute("lat"),
					lng:    p.getAttribute("lng"),
					title:  p.getAttribute("title"),
					desc:   p.getAttribute("desc"),
					marker: null//markers are added later
				});
		}
			var map = new Map(canvas, partners[0], 1, template, msgContainer);
			map.addMarkers(partners);
		}, function(msg) {
			alert("Failed to get xml file\n" + msg);
		});
	}
}
</script>

<div id="map_canvas"></div>
<div id="description"></div>