MarketingLogic360

Our team of specialists consistently delivers outstanding results combining creative ideas with our vast experience. We can help you build a sustainable, meaningful relationship with your clients by engaging them with your brand using social media.


Call Now! 954 – 828 – 0145
admin@marketinglogic360.com

Unobtrusive Scripting Of Your Web Pages

Unobtrusive Scripting Of Your Web Pages

When scripting your web pages there are three basic technologies you should learn are: HTML5, CSS3, and JavaScript.

HTML5 is the backbone of any website. It represents the structure of a document that will ultimately take the shape of the website you desire to have.

CSS3 represents the visual part of the web site. It’s the language used for adding beauty to the website. You want an image in website to have a flowery-patterned frame? You add that using CSS. You want to display a tooltip on an any element on your web page? CSS is the answer to your troubles. What about changing the font size and the font of your document to make your writing look more beautiful and accessible to your audience? Again comes up CSS. CSS is the makeup of the web. Without it, our web pages may do what we want and display the information we want them to display but they would look rather ugly (like make-my-eyes-bleed ugly).

What about JavaScript? JavaScript is the programming language used for adding interactivity to the web. If HTML5 represents the structure part and CSS the visual part, JavaScript would be the behavior part. So, what exactly is the role of JavaScript (from now on referred to as “JS” in this noble blog post) when we say it’s used to script a document? Well, scripting a document means using JS to dynamically update, modify or create new elements in parts of an HTML document (or even creating whole new documents) when the user does something like clicking a button or scrolling the page for example.  Scripting a document using JS is different nowadays than it used to be several years ago. Mixing the content (HTML) with the presentation (CSS) or the behavior (JS) is now considered to be bad practice (some may even say diabolical)  for the following reasons:

  1. Having a clear separation between HTML, CSS and JS shows more organization in a web page.
  2. More organization in a web page makes it easier to change different parts of it without having to rewrite other parts since there is a clear separation of content and behavior.
  3. When you have your content neatly separated from your JS, in case the script fails to execute for any reason, you will still be able to gracefully degrade the user experience.

So, what does obtrusive JavaScript looks like? It looks like this:

<button onclick=”alert(‘this is obtrusive JS‘)”>Click me</button>

The code above shows a button on a web page with the text click me. If you click the button, an alert message box displays with the text “this is obtrusive JS”. What makes the code above obtrusive is the fact that the HTML (<button> element) has JS code inside it (onclick=”alert(‘this is obtrusive JS’);”).

What would the same version of the code look like if it were rewritten to be unobtrusive? It would look like this:What would the same version of the code look like if it were rewritten to be unobtrusive? It would look like this:

<button>Click me</button>

The code above is more clean. It doesn’t have any events (onclick) associated with it. There’s not JavaScript code inside it (alert(‘this is a message’)). There’s a clear separation between the <button> element and the behavior. Now, we can include the JavaScript code in a different and separate part of the document and still associate it with the click of that button like this:

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

<title>Test page</title>

</head>

<body>

<button>Click me</button>

 

<script>

var button = document.getElementsByTagName(‘button’)[0];

button.onclick = function(){alert(‘This is a message’);}

</script>

</body>

</html>

Granted, there’s more code involved (and trust me; that’s not the shortest way the write this example); but this is just a trivial example where just a message is shown. What if you would like to create a beautiful animation? Or maybe display several pictures in a slider? Those are two examples where more organization will definitively payoff when you need to update the code or debug it.

No Comments
Post a comment