Website can be divided in three layer.

Structure Layer:

Structure Layer consists with css code. CSS stands for making structure and decoration of web site .

Content Layer

Content Layer consist with content matter only. It should not make structure and decoration any more.

Behaviour

Behaviour is the action through event handler . For example : onclick, double click, etc. Behavious should not act as structure layer and content layer. It should be use only for interactive. For example : Javascript should not display/hide content matter and should not specify decoration for html element.

Seperating of structure, content and behaviour is philosophy rather than technique for using JavaScript in its context:usable, accessible, standards-compliant web pages

Seperation of structure,  content and behaviour

  • Seperation them
  • Connect them

Seperation them

Seperation of html and css

Here, separation means separation content and structure in html and css

Wrong Way

Html :

<div  style=”color:#ff0000”>Content Goes Here</div>

In this code content and structure is not separated . Because inline css is attached in structure . Inline css is bad habit of web designer and mostly programmers use this inline css.

Right Way

Html :

<div  id=”content”>Content Goes Here </div>

Css Code :

#content{

    Color:#ff0000;

  }

One of the most advantage of separating structure and content is flexibility . It is flexible to edit and update structure.

Seperation of html and javascript

Here separation consist separation content and behaviour about html and javascript effect

Wrong Way

Html :

<div  onmouseover=”action()”>Content Goes Here</div>
<div  onmouseover=”alert(‘my alert’)”>Content Goes Here</div>

Inline javascript is not a systematic way for behaviour.

Right Way

Html :

<div  id=”action”>Content Goes Here</div>

Javascript :

$('action').onmouseover  =
  function  () {
  doSomething();
  }

Separation of html and JavaScript is technically more advantage  so that programmer can update and edit separately for behavior such as mouse over, mouse click, key press, onload etc. It is more easy to do write  inline JavaScript Code on htm element for programmer because it is quick  and easy for small  behavior, but it is bad habit to do inline JavaScript.

Advantage of Having Separate content, behavior and structure

  • Easy to maintenance
  • The CSS and JavaScript layers can be edited simultaneously

Connect  them

Connect content, behaviour and structure

ID

Behaviour

var  el = document.getElementById('special');
  if  (el) {
  el.onmouseover  = doSomething;
  }

Find if there is element Id and ready for behavior,

CLASS

var els =  document.getElementsByClassName('special')
  if (els.length) {
  // go through all  elements and do something
  }

Behaviour is done if there is class with “special” name. If not then stop behaviour.

Connect content and structure

Content(HTML) :

<input type="submit" name="Submit"  value="Submit" class=”submit” />

Structure (css) :

.submit {
       // Presentation Layer
  }

JavaScript is always available & Everybody uses a mouse is nonsense

  • Primitive cell phones don’t support it (sufficiently)
  • Search Engine robot does not accept and read javascript code
  • Speech browsers’ support may be spotty
  • Company networks may filter out <script> tags

Make your brain ready that you can show content and navigation without javascript. Because all user agent does not support javascript.  One of the most advantage of displaying content without javascript is Web Content Accessible.

It does not means that you are required to avoid javascript . Now a days client are more likely to have user-friendly web site. Without javascript web page is ideal and less user friendly .

Every body use mouse – Nonsense

Javascript

var dropdown = {
  setEventHandlers: function (obj) {
  obj.onmouseover = this.over;
  obj.onmouseout = this.out;
  },
  over: function () {
  // code
  },
  // etc
  }

If user use another device rather than mouse then, above behavior will not occur. So, we need to show behaviour through keyboard activity too. Blur and focus event handlers

Javascript for keyboard and mouse event

MOUSE OVER, MOUSE OUT, CLICK

 var dropdown = {
  setEventHandlers: function (obj) {
  obj.onmouseover=obj.onfocus = this.over;
  obj.onmouseout =obj.onblur= this.out;
  },
  over: function () {
  // code
  },
  // etc
  }

Overally, what you need to understand is every html elements must be able to gain the keyboard focus with tab index.

untitled-1Keyboard user need more action than mouse user. Keyboard user can identify html element through tab index pressing tab button . In above image border is dotted border can be seen . Through this outline, keyboard user can identify the position of tab index. Personally I would like to suggest not to specify none value for outline in css , because it is not accessible for keyboard user.

Mouse Movement (Drag and drop)

Drag and Drop event through mouse

How to accessible for drag and drop event ?

By arrow keys can do set behaviour of drag and drop as mouse does. Key down event is use to have behaviour of drag and drop

Javascript :

obj.onmousemove = obj.onkeydown = moveElement;

Mousemove expects mouse coordinates.The layer moves to these coordinates.

Example of drag and drop event through both keyboard and mouse event

http://quirksmode.org/js/dragdrop.html

Importing Javascript

Wrong way of using javascript

<head>
      <script language=”javascript”>
        // Javascript code goes here
      </script>
</head>
<body>
      <script  language=”javascript”>
      // Javascript code goes here
      </script>
</body>

Showing JavaScript Functionality Code  in html page is not systematic . It would better to have separate file and include it in the page.

Right way of using javascript

<head>
      <script language=”javascript”  src=”js/import.js”></script>
</head>
<body>
      <script language=”javascript”  src=”js/config.js”></script>
</body>

Conclusion

  • Separating content, behavior and structure
  • Web Site should be fully accessible thorough keyboard also.
  • Inline CSS and JavaScript should be avoid.
  • Make separate file for JavaScript Code rather than display javascript code in body or head element.

Credits

http://www.quirkmode.org.

Advertisements