HTML5 using multiple Javascripts

embalse · 1 Jun 2013 at 17:12

Hi, am finally getting round to building a new website for myself, using HTML5, Javascript, jquery and CCS.

All so far working ok.

My question is I have 3 Javascripts which are linked to on my main HTML page as follows...

<script type="text/javascript" src="javascript/modernizr-1.7.js"></script>

<script type="text/javascript" src="javascript/jquery-1.10.1.min.js"></script>

<script type="text/javascript" src="javascript/slideshow_P1.js"></script>

Whilst this does work I wondered if this is the correct way to do it.

Any advice appreciated.

uniQ · 1 Jun 2013 at 17:46

Google hosts several js libraries:

https://developers.google.com/speed/libraries/

Code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

Depending on what they're used for it's good practice to put your js calls into the footer as well.

embalse · 1 Jun 2013 at 18:01

uniQ said:
Google hosts several js libraries:

https://developers.google.com/speed/libraries/

Code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

Depending on what they're used for it's good practice to put your js calls into the footer as well.

Thanks for the google tip. Will put my js calls in the footer.

Just wanted to know whether it was good practice to list my js calls as..

<script type="text/javascript" src="javascript/modernizr-1.7.js"></script>

<script type="text/javascript" src="javascript/jquery-1.10.1.min.js"></script>

<script type="text/javascript" src="javascript/slideshow_P1.js"></script>

or it should be done another way? Can you have too many js calls?

.

uniQ · 1 Jun 2013 at 18:07

I only declare type on js if I'm including js directly otherwise just link to the js:

Code:

<script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-XXXXXX-X']);
    _gaq.push(['_trackPageview']);
    _gaq.push(['_trackPageLoadTime']);

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
  </script>

Code:

<script src="javascript/modernizr-1.7.js"></script>
<script src="javascript/jquery-1.10.1.min.js"></script>
<script src="javascript/slideshow_P1.js"></script>

embalse · 1 Jun 2013 at 19:13

uniQ said:
I only declare type on js if I'm including js directly otherwise just link to the js:

Thanks...

.

GravyMonster · 1 Jun 2013 at 19:39

You should always declare the type parameter, regardless of where the source of the script - its in the standard.

uniQ · 1 Jun 2013 at 19:49

Not in HTML 5.

http://www.w3.org/TR/html5/scripting-1.html#the-script-element

When used to include dynamic scripts, the scripts may either be embedded inline or may be imported from an external file using the src attribute. If the language is not that described by "text/javascript", then the type attribute must be present, as described below.

The type attribute gives the language of the script or format of the data. If the attribute is present, its value must be a valid MIME type. The charset parameter must not be specified. The default, which is used if the attribute is absent, is "text/javascript".

If no type is defined then it defaults to text/javascript.

Which is why Google's examples don't include the type either:

https://developers.google.com/speed/libraries/devguide#jquery

BahBah · 1 Jun 2013 at 20:41

Code:

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script>window.jQuery || document.write('<script src="{{ STATIC_URL }}js/jquery-latest.min.js"><\/script>')</script>

Using the above code it will default to using an online hosted jquery and fallback to local. Can be useful in case the linked js is down for any reason.

embalse · 2 Jun 2013 at 08:53

BahBah said:
Code:

<script src="//code.jquery.com/jquery-latest.min.js"></script> <script>window.jQuery || document.write('<script src="{{ STATIC_URL }}js/jquery-latest.min.js"><\/script>')</script>

Using the above code it will default to using an online hosted jquery and fallback to local. Can be useful in case the linked js is down for any reason.

Nice tip.

.

embalse · 2 Jun 2013 at 10:54

OK, I joined Google Analytics to get an UA ID.
In my account in the "tracking Info it states to put this on my page....

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-41400435-1', 'michaelwinstone.com');
ga('send', 'pageview');

</script

I was expecting to see a script similar to what has been posted above by uniQ ...

uniQ said:

Code:

<script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-XXXXXX-X']);
    _gaq.push(['_trackPageview']);
    _gaq.push(['_trackPageLoadTime']);

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
  </script>

Have I missed something?...

.

zyfar · 2 Jun 2013 at 11:14

I believe the one you linked last is an older version, so you're one is just fine.

embalse · 2 Jun 2013 at 20:45

zyfar said:
I believe the one you linked last is an older version, so you're one is just fine.

Thanks for the confirmation. The last time I built a site was a few years ago and I used AS3/Flash so I am playing catch up as so much has changed.