Separating javascript from html

Hi all,

I have a question about putting html and javascript in 2 different files.

In the website I’m designing, http://www.cursos-chino.es at the bottom of each page I have 2 encrypted email addresses. The encryption was made with the tool offered by http://hivelogic.com/enkoder/form

Now the javascript looks quite heavy and it’s repeated in all pages, I was wondering if there is a way to put this javascript in a separate file and just make a call to this file on the html page.

Any help will be appreciated.

Cheers

can you put the js in a separate file and then just reference it in any page that needs it by using the src attribute of <script>?

Thx so much works fine.

Not entirely fine in the way you did it. The <!-- you left in is making it throw errors here…

The two lines at the start:
//<![CDATA[
<!–

and the two at the end:
//–>
//]]>

Should be removed when putting them into external files to prevent that. Technically the ones starting with // are treated as comments and do no harm, but the one lacking that is causing issues.

Though you’ve got all sorts of other oddities on the page – invalid heading orders, a whole slew of unnecessary div and ID’s, comment placement proven to trip IE rendering bugs, paragraphs around non-paragraph elements, headings around non-heading elements, drop-down menu that will likely never be able to function given the flash embed, inlined style attributes for nothing, that it’s invalid to say “px” on widths in the markup … and that’s before we talk the non-real world deployable XHTML 1.1 doctype with the XML prolog further increasing the IE headaches.

… or the width that’s not even 1024 user friendly and fixed metric (aka px) fonts on the content areas… and the total lack of image optimization resulting in 126k of images doing like 60k or less’ job.

I would really suggest cleaning up the markup and fixing all those issues – which in terms of the HTML would look something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="es"
	xml:lang="es"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="es"
/>

<meta
	name="description"
	content="Aprende chino y descubre la cultura china este verano en Taiw&aacute;n y China con los cursos de mandar&iacute;n KCS."
/>

<meta
	name="keywords"
	content="aprender, chino, andar&iacute;n, curso, taiwan, taiw&aacute;n, china, j&oacute;venes, jovenes"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Inicio - Cursos de chino KCS - Aprende mandar&iacute;n este verano.
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		KCS
		<small>Travel &amp; Discovery</small>
	</h1>

	<ul id="languageLinks">
		<li>
			<a href="index.html">
				<img
					src="images/flags/uk.jpg"
					alt="Browse English version"
				/>
			</a>
		</li><li>
			<a href="index.html">
				<img
					src="images/flags/es.jpg"
					alt="Navegue la Versi&oacute;n espa&ntilde;ola"
				/>
			</a>
		</li>
	</ul>

	<ul id="mainMenu">
		<li><a href="index.html">Inicio</a></li>
		<li><a href="aprender-chino.html">Aprender chino con KCS</a></li>
		<li><a href="seguridad-garantia.html">Seguridad y garant&iacute;a</a></li>
		<li><a href="informacion-curso.html">Informaci&oacute;n sobre los cursos KCS</a></li>
		<li><a href="corporativa.html">Información corporativa</a></li>
		<li><a href="contacto.html">Contacto</a></li>
	</ul><hr />

	<object
		classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
		codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"
		width="960" height="331"
		id="banner"
	>
		<param name="movie" value="xml/bcastr.swf?bcastr_xml_url=xml/bcastr.xml" />
		<param name="quality" value="high" />
		<embed
			src="xml/bcastr.swf?bcastr_xml_url=xml/bcastr.xml"
			quality="high"
			pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"
			type="application/x-shockwave-flash"
			alt="Fotogr&aacute;fias de Taiw&aacute;n"
			width="960" height="331"
		></embed>
	</object>

	<div class="imageTriad">

		<h2>CURSOS DE VERANO KCS (para j&oacute;venes de 13 a 17 a&ntilde;os)</h2>
		<p>Cursos de chino para j&oacute;venes en Taiw&aacute;n, China.</p>

		<div class="subSection">
			<a href="aprender-chino.html">
				<img
					src="images/navigation/jovenes-playa.jpg"
					alt="Chino para j&oacute;venes"
					height="138" width="287"
				/>
			</a>
			<h3>Aprender chino con <b>KCS</b> - J&oacute;venes</h3>
			<p>Aprende chino mandar&iacute;n con KCS.</p>
		<!-- .subSection --></div>

		<div class="subSection">
			<a href="informacion-curso.html">
				<img
					src="images/navigation/taichung.jpg"
					alt="Informaci&oacute;n destinos"
					height="138" width="287"
				/>
			</a>
			<h3>Aprender chino con <b>KCS</b> - Informaci&oacute;n</h3>
			<p>Detalles sobre los cursos de mandar&iacute;n KCS.</p>
		<!-- .subSection --></div>

		<div class="subSection">
			<a href="seguridad-garantia.html">
				<img
					src="images/navigation/estudiantes_de_chino.jpg"
					alt="Seguridad y Garant&iacute;a"
					height="138" width="287"
				/>
			</a>
			<h3>Aprender chino con <span style="color: #595959;">KCS</span> - Garant&iacute;a</h3>
			<p>Tu seguridad es nuestra prioridad.</p>
		<!-- .subSection --></div>

	<!-- .imageTriad --></div>

	<div id="footer">

		<div class="sectionWrapper">

			<div class="subSection">
				<h2>CURSOS KCS (Hong Kong)</h2>
				Unit B, 9/F, Milton House, 96 Nathan Rd.<br />
				Tsim Sha Tsui, HONG KONG.<br />
				<br />
				Tel: +852 6018 0567<br />
				Fax: +852 3106 4558<br />
				E-Mail: <script type="text/javascript" src="dirhk.js"></script>
			<!-- .subSection --></div>

			<div class="subSection">
				<h2>CURSOS KCS (España)</h2>
				c/ Lagasca 95, 28006 Madrid<br />
				Madrid, ESPAÑA.<br />
				<br />
				Número de información gratuito: 900 828 025<br />
				Tel: +34 91 423 09 77<br />
				Fax: +34 91 141 01 44<br />
				Email: <script type="text/javascript" src="direspana.js"></script>

			<!-- .subSection --></div>

			<div class="subSection">
				<ul>
					<li>
						<img
							src="images/navigation/logo-skype.jpg"
							alt="Contacto Skype"
							height="39" width="39"
						/>
						Skype: <b>kcs.travel</b>
					</li><li>
						<a href="formulario.html">
							<img
								src="images/navigation/logo-email.jpg"
								alt="email contact"
								height="39" width="39"
							/>
							¡Contáctenos!
						</a>
					</li>
				</ul>
			<!-- .subSection --></div>

		<!-- .sectionWrapper --></div>

		Copyright &copy; CURSOS KCS. Todos los derechos reservados. 2010.

	<!-- #footer --></div>

<!-- #pageWrapper --></div>

</body></html>

Drops back down to the best XHTML doctype for cross browser support (or should I say the only XHTML doctype designed for cross browser support?), and throws a good third of the markup away…

If I have time later I’ll toss together how I’d apply CSS to that… including making it 1024 friendly… Though I’d probably also swing an axe at the flash banner in an attempt to make it semi-fluid width.

Off Topic:

if you want your page to be validated by the w3c validator you will need to set another charset and not utf-8 because you have some not utf-8 characters with accents or whatever in your html.

Didn’t notice OP was using iso-8859-1.

Though those characters do exist in UTF-8, it would just be a matter of re-mapping them.

yep no problem :slight_smile:

I only found out by accident because out of curiosity I copied and pasted your re-worked html and uploaded it to the w3c validator and it “refused” to have anything to do with it until I deleted all the characters (there were about 6-7 chars.) it says are not in the utf-8 charset.

I don’t know how to go about re-mapping those characters.

Is there just a more appropriate charset to set in the <meta> instead?

… and here it is working… a few markup changes from the above post, but not many.

As with all my examples the directory:
http://www.cutcodedown.com/for_others/sebasforums/

is unlocked for easy access to the CSS and images – which I re-optimized all the images for best sizes cutting the overall page size by a third, and if you don’t count the rotating banner images by more than half (around 68k before those images). Valid XHTML 1.0 Strict, would be valid CSS2 if not for a couple of IE fixes and a pair of -moz to address FF2’s CSS2.1 shortcomings. Tested working IE 5.5 through 9, FF 2 and 3, and the latest flavors each of Safari, Chrome and Opera.

I replaced the flash with a simpler (but more cross-browser ready) javascript as well, throwing away 14k of flash for 2k of .js. It does not have the little selection boxes, but something like that could easily be added for about a k or so of code. (I recycled the script from another project). Using flash to load static jpegs using a XML file is just making it too complicated for it’s own good – and using .js makes it much more likely to work especially on things like the new iPad where crapple is intentionally trying to prevent third party plugins from working. It also gracefully degrades better since you get the first static image without he rotation when scripting is disabled.

I moved both of the eval e-mail encodes into the same library file as the image rotator so as to reduce the number of handshakes. Wrapping them in a pair of simple functions makes them easy enough to call in the code, and the entire .js revisons results in a LOT less code overall.

The html file was also changed to utf-8 which is better for dealing with languages other than English… which also let me axe a lot of the entities.

If I have time later I’ll document the choices made and CSS – though I’ve said that a lot lately and come up short.

The validator is always a bit #DDD about character sets… though under the “more options” you can typically set that manually.

If you try the link from my last post, that version validates just fine since I’m setting it in the mime-type and have the file properly encoded (UTF-8 w/no BOM)

yep, ok thanks :slight_smile:

Wow!!!

Thx so much for all your help!!!

Will definitelly check all this and try to learn from all the info you gave me.

In my defense I must say I have no IT background, and I just did the page by trying to follow a couple of web design books, so I expected the result to be quite bad :slight_smile:

Really appreciate you help.

Cheers