EverWeb Codebox

Javascript

Script Examples

Javascript is the most popular coding language. It is built into all web browsers and is used to make elements in a web page interactive.

Javascript can be placed anywhere in the HTML doc but is best placed in the footer just before the closing body tag - </body> - since interactivity is not usually required until the page content loads.

This is an example of a link to an external javascript file...

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js">

Any javascript code that is placed in the HTML document needs to be enclosed in script tags like this...

<script type="text/javascript">Script goes here</script>


Some examples are shown below...

<script type="text/javascript">

     setTimeout(function () {

       window.scrollTo(0, 1);

     }, 100);

     </script>

This script would be placed in the footer of a mobile website and causes the browser bar to roll up out of the way once the page content is loaded...

Website features such as slideshows, movies and audio players usually depend on an external script or two but also require some setup script which defines options. Here's an example for a slideshow using Galleria...

<script type="text/javascript">

            Galleria.loadTheme('themes/carousel/galleria.carousel.min.js');

            $("#gallery").galleria({

                autoplay: false,

                transition: 'fade',

                thumbnails: true,

                imageCrop: false,

                swipe: true,

                height: 0.75,

                showCounter: false,

                transitionSpeed: 1500,

                trueFullscreen: false

            });

        </script>

This can be loaded from an external bootstrap script if you have several slideshows on different pages. In most websites there will just one or two so it is more convenient to have it in the page document for making quick changes to the slider's behavior.

Script Loading Order

Browsers load scripts in the order in which they appear in the HTML doc so it's a good idea to think about where the various scripts should go in relation to how important they are.

Although scripts can go anywhere in the doc, most of them aren't actually required until the rest of the page content loads so the best place for them is right at the end - just before the closing body tag. This will help to speed up your page download time.

A javascript library script like jQuery is quite large so, unless it's absolutely necessary to have it load before the page content, the link should go in the footer.

There is a certain amount of controversy surrounding the placement of analytics code. A lot of instructions will encourage you to place this in the document head. Even Google is guilty of this!

Analytics have nothing to do with what the visitor sees and there is no logical reason for recording a page visit until after the page content has loaded and the visitor has had time to actually see it. If you disagree with this, put it in the doc head and suffer the consequence of poorer page download times!

Every rule has its exceptions. This code would definitely go before any others in the document head since it redirects visitors on mobile devices to a mobile version of the website...

<script type="text/javascript">

     <!--

     if (screen.width <= 640) {

     window.location = "http://mobile.domain-name.com/"; }

     //-->

</script>

Obviously this script needs to load and act before any of the page content appears!