CSC

How Scripting Languages Improve Functionality

Scripting languages (such as javascript) on the web are interpreted by a web browser and are used to improve functionality on a web page. Scripting languages are there to provide interaction with the user in the form of validation, dynamic interfaces and animations. Client Side Customisation relies (or did rely) heavily on scripting languages such as javascript for dynamic features such as animations or transitions etc, however with the advent of newer versions of HTML (HTML5) and CSS3 the requirements for javascript to do many things has been reduced. The benefit of using CSS3 animations versus JavaScript (JQuery Library) is the speed of which it executes, making for a smoother user experience, especially on low end devices such as netbooks and ARM devices such as mobile phones and tablets.

Validation

Validating forms can be done using two methods; HTML5 Validation or javaScript. On the Contact Us page I have created two similar forms which both do the same thing - allow you to contact me, however one form uses JavaScript and the other uses HTML5. I will let you decide which method is “better” (cough cough HTML5) however for the sake of relevancy I will talk about JavaScript validation. To start with, below is a form using JavaScript validation, and below that is the source - which i will reference to using those handy line numbers. There are four main validation points looked at when validating a form:

  1. Has the user left required fields empty?
  2. Has the user entered a valid email address?
  3. Has the user entered a valid date?
  4. Has the user entered text in a numeric field?

The first thing we want to check for is blank fields - what’s the point in sending no data at all? When the user clicks “Submit” the browser will run a script called contact.js. This script will put the content of the name, email and message fields into their own variables (lines 2, 3, 4) and then run through some if statements to see if they are blank or not, if a field is blank then it will alert the user that it is so (lines 6 - 25).

The second relevant check is “Has the user entered a valid email address”. After we have checked for blanks the script goes on to check and see if the email is in a valid format - it can’t check to see if it is a real email address so this is as close as it can get to validating it through seeing if theres an @ symbol and no incorrect characters (lines 39 - 42).

function validateForm(){
 var name = document.getElementById("jsname").value;
 var email = document.getElementById("jsemail").value;
 var comment = document.getElementById("jsmessage").value;
 
 if (name == "")
 {
alert("Please Enter a Name")
 document.getElementById("jsname").select();
 document.getElementById("jsname").focus();
 return false;
 }
 else if (email == "")
 {
alert("Please Enter an Email Address")
 document.getElementById("jsemail").select();
 document.getElementById("jsemail").focus();
 return false;
 }
 else if (comment == "")
 {
alert("Please Enter a Message")
 document.getElementById("jsmessage").select();
 document.getElementById("jsmessage").focus();
 return false;
 }
 if (!checkEmail(email))
 {
 alert('Email address is invalid');
 return false;
 }
 else
 {
 // alert("Your Message Has Been Sent")
 }
 return true;
}
 
function checkEmail(inputvalue) {
 var pattern = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
 return pattern.test(inputvalue);
}
				

And also the HTML for the contact form.

*
*

Below is the HTML for the HTML5 validation counterpart, as you can see just by defining the type as text, email or number etc and adding the required property it is doing all the validation for me.

*
*

Interactivity

JavaScript can also be used to make a web page interactive through the use of dynamic content and the like. For example a simple JavaScript calculator (link) is a perfect example of how easy it is to use javascript to create dynamic content. This calculator is very basic and simply allows the user to enter numbers and symbols to the main input (acting as the calculators “screen” if you like) and on the click of “=” it will calculate the answer. This calculator is VERY basic however and has no validation, therefore is likely to fall over if theres an error.

Another example of dynamic content is a clock. Clocks on websites have very limited use as most operating systems will have a clock on display - so why the need for another? to be honest I don’t know, but heres an example of one anyway. This clock uses JavaScript and CSS3 to achieve its goal of appearing to be a digital BCD clock - thinking about it I should have made a binary clock - would’ve been something different.

Libraries

The awesome thing about JavaScript isn’t the simplicity, it isn’t the cross platform compatibility nor the fact it doesn’t fall over every time you forget a semi-colon. No. The awesome thing about javascript is the libraries and extensions; introducing JQuery, AJAX, JSON etc. JQuery is an excellent library to make everything in JavaScript easier for the developer. Don’t believe me? Go ahead and grab the side of the web page and resize the webpage to mobile size (assuming of course you’re a desktop user). Now forgetting about the fact the whole webpage resized itself (thats CSS3 media query magic and not relevant to the point I’m making) concentrate your focus on the header and nav bar - disappeared right? Now do me a favour and click on the menu icon () at the top there. Sparkly responsive design made easy - and that should be copyrighted.

You maybe wondering how many lines of code must be required to make the slidey animation and how horribly complex it must be to control JavaScript at different resolutions, well thankfully due to the JQuery Library and the Enquire Library all that was (for me at least) only 33 lines of code, and so simple my dog Nell could understand it.

$(document).ready(function(){

   enquire.register("screen and (max-width:949px)", function() {

    $("#show").slideDown("1");
    $("#hide").hide();
    $("#rule").slideDown("1");
    $("header").slideUp("1");


    $("#hide").click(function(){
      $("header").slideUp("1");
      $("#hide").hide();
      $("#show").show();
      $("#rule").show();
    });

    $("#show").click(function(){
      $("header").slideDown("1");
      $("#show").hide();
      $("#hide").show();
      $("#rule").hide();
    });
   });

  enquire.register("screen and (min-width:950px)", function() {
    $("header").slideDown("1");
    $("#show").hide();
    $("#hide").hide();
    $("#rule").hide();
  });

});
				

comments powered by Disqus