SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>?

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thx so much works fine.

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    <!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.

  5. #5
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


  6. #6
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kalon View Post
    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.

  7. #7
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    Though those characters do exist in UTF-8, it would just be a matter of re-mapping them.
    yep no problem

    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?

  8. #8
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    ... and here it is working... a few markup changes from the above post, but not many.

    http://www.cutcodedown.com/for_other.../template.html

    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.

  9. #9
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kalon View Post
    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.
    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)

  10. #10
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yep, ok thanks

  11. #11
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    Really appreciate you help.

    Cheers


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •