Advanced Client-Side Scripting

Back to Front Page

Mircosoft Widnows [Wersion 6.1.4567]
Copyright © 2000BC Mircosoft Corporation. All rites reversed.
C:\>_

ftp>mput *_

C:\>ftp www.dirty-basement.com_

Connected to dirty-basement.com.
220---------- Welcome to Pure-FTPd [privsep] [TLS] ----------
220-You are user number 3 of 1000000000 allowed.
220-Local time is now . Server port: 21.
User (dirty-basement.com:(none)):_

User (dirty-basement.com:(none)): ghetto_dude

331 User ghetto_dude OK. Password required_

Password:

230 OK. Current restricted directory is /
ftp> cd /safebox785
250 OK. Current directory is /safebox
ftp> mput *
200 PORT command successful
150 Connecting to port 54585_

Please wait...
All your files are being copied to dirty-basement.com/safebox785...

30.248 Files successfully transferred_

Fake DOS Screen Show © 2015 by Armagan Tekdoner

This web page was a project for the course coded COMP 2112 at Georgian College, Barrie ON

Learning Outcomes

Your project has to meet these 5 expected learning outcomes:

  1. Apply the principles of unobtrusive client-side scripting techniques
    Un-obstructive JShttp://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript
  2. Implement Progressive Enhancement and Graceful Degradation for various browser support
    Progressive Enhancement and graceful degradation - http://www.sitepoint.com/progressive-enhancement-graceful-degradation-basics/
  3. Use (popular) frameworks to manipulate the DOM
    JavaScript libraries
    DOM manipulation - http://www.w3schools.com/js/js_htmldom.asp
  4. Use a combination of client-side and server-side scripting using various languages
    JSON and AJAXhttp://www.tutorialspoint.com/json/json_ajax_example.htm
  5. API integration for basic APIs such as Social Media, Video Streaming (i.e. YouTube) or Weather/News stream
Hello World Alert Screenshot

Above-listed criteria are handled in their respective sections linked under Learning Modules.

Signs indicate the very portions to be marked. All files are available at this fancy index.

Learning Modules

Unobstructive JS

Unobtrusive JavaScript defined

To make sure that your scripts do not inconvenience anyone, you should make sure your scripts do not make any assumptions.

Now, “not making assumptions” is a rather tall order. Fortunately we can break unobtrusiveness down into three catgeories: your script must be unobtrusive to users, browsers, and fellow programmers.

  1. Assumption: everybody's browser supports JavaScript. Not true: In order to be unobtrusive to users, taking away the script should not preclude them from using your site, even though their interaction will be far less rich than that of users whose browser does support JavaScript.
  2. Assumption: all browsers work the same. Not true: In order to be unobtrusive to browsers, your script should steer clear of plain errors and compatibility problems, and take special devices such as speech browsers or mobile phones into account.
  3. Assumption: everybody else will understand my code. Not true: In order to be unobtrusive to fellow programmers, your script should consist of clear, clean code and feature a lot of comments to say what your code is (supposed to be) doing.

Definition retrieved from the module's corresponding link.

Working Examples

I will be exemplifying 3 applications to demonstrate how the above-defined criteria are met.

These are not necessarily one-to-one answers but are rather addressing all criteria jointly, in all 3 solutions. Ideas are borrowed from the source article but codes are my own.

  1. Separation of structure and behaviour: My example avoids all inline codes that are difficult to maintain in large websites and when JavaScript is disabled in the users' browsers, it still displays the content.
  2. Form validation: I am aware that without server-side validations, no real precaution against malicious entries can be taken. Howewer, this course is focussed on client-side technologies and my codes will be performing both JavaScript and HTML5 validations.
  3. Popups: Keeping the site accessible even in the case of popups.

As for the clear, clean code, and comments criterion, please see the default.js page.


Example 1

When JavaScript works, the mouse over event will show the codes. When JavaScript is disabled, the user can always click the link and see the file. My JavaScript code is fully externalised and heavily commented. It can be easily maintained from within one file.

 PART 1/3 of MODULE 1: Show me the codes of showing codes in an iFrame


Example 2

The purpose of JavaScript is to add a layer of usability to your site. Note the "adding" bit: if the script is the entire usability layer (in other words, if the site is unusable without JavaScript), you've made a serious mistake and your script is not unobtrusive.

Built-in form validations of HTML5 is a brilliant novelty. Even before any client-side or server-side validations, it performs basic checks without allowing form submission.

The form below performs the built-in validations along with some basic regex, upon submit. Form will be both validated and submitted when filled properly, even when JavaScript is disabled. In other words no server-side or JavaScript validations done.
Just to compare how it works with and without JavaScript, I added JavaScript confirmations and a few jQuery-driven events AND a button to disable them.

 PART 2/3 of MODULE 1: Demo Form

The form below is NOT submitted to anywhere and has no database connection.

All fields are mandatory

Title:










 

Example 3

As another example, consider popup windows. Sometimes they're genuinely useful to have, and creating them is quite easy—if a browser supports JavaScript. However, if it doesn't, its users will not see the popup. How do you keep your site accessible while still giving JavaScript-enabled browsers a smoother interface?

The answer is the improved version of the question. It is more advanced than a window that opens onclick.

 PART 3/3 of MODULE 1: If "Custom Window" fails, go to the link.

Please see the dog below by going to its thumbnail.

Small Dog

Progressive Enhancement and Graceful Degradation

Graceful Degradation

The practice of building your web functionality so that it provides a certain level of user experience in more modern browsers, but it will also degrade gracefully to a lower level of user in experience in older browsers. This lower level is not as nice to use for your site visitors, but it does still provide them with the basic functionality that they came to your site to use; things do not break for them.

A simple example is the use of 24-bit alpha-transparent PNGs. Those images can be displayed on modern browsers without problems. IE5.5 and IE6 would show the image, but transparency effects would fail (it can be made to work if necessary). Older browsers that do not support PNG would show alt text or an empty space.

Developers adopting graceful degradation often specify their browser support level, e.g. level 1 browsers (best experience) and level 2 browsers (degraded experience).

Progressive Enhancement

Progressive enhancement is similar, but it does things the other way round. You start by establishing a basic level of user experience that all browsers will be able to provide when rendering your web site, but you also build in more advanced functionality that will automatically be available to browsers that can use it.

In other words, graceful degradation starts from the status quo of complexity and tries to fix for the lesser experience whereas progressive enhancement starts from a very basic, working example and allows for constant extension for future environments. Degrading gracefully means looking back whereas enhancing progressively means looking forward whilst keeping your feet on firm ground.

Clarification retrieved from the module's corresponding link.

Preface

This topic can become a PH degree thesis by itself and my tiny research here may be considered superficial and controversial. Still, I do not want to blindly follow the instructions. Learning how tos without understanding whys, is not my cup of tea.

Before doing some coding jobs to comply with the definitions above, I would like to provide some brief statistics about the browser usage, so that the so-called non-modern browsers are quantified. Although I fully agree with the essence of the material discussed here, I do not think coding for imaginary browsers that are not practically in use makes sense. Doubling the work for no real reason, is an overzealous approach to say the least. Browser usage in Ivory Coast has nothing to do with a pizza store trying to take online orders in Barrie. And if one expects an online order to be placed from an IE5 browser, I would just wish the best of luck.

Unless we draw a geographic boundary and we make at least a very high level definition of our audience, we can end up preparing online banking websites for regions with no Internet connection or jewellerry websites accessible by people dying of malaria.

Let us be more specific. We are talking about VERSIONS of Chrome, Firefox, IE, Opera, and Safari. (I even consider Yandex, which is no concern.) And the technologies we check against are mainly HTML5 and CSS3. All my argumentation is based on the data from Canada.

  1. Because Chrome updates itself, it is very hard to find a 3-year old version of it. Those theoretical older Chromes, I think, exist only in web developers' experimentation machinery.
    Beginning with version 4.0, Chrome has passed all aspects of the Acid3 test.
    Beginning with version 8.0, Chrome supported all HTML5 elements and CSS3 rules existed then, in 2010.
    Its most common version today is 46 and I really could not find the number of users of version 7 or less. I can see that version 27 is some 0.01% though.
    Currently, the usage of its modern versions, adds up to some 42% in Canada.
    As a conclusion, Chrome needs no special care today.
  2. Safari usage in Canada is high and it is a function of Apple users.
    In 2008, development versions of the Presto[18][19] and WebKit[17][20] layout engines (used by Opera and Safari respectively) scored 100/100 on the test and rendered the test page correctly.
    Beginning with version 5.0, Safari supported all HTML5 elements and CSS3 rules existed then, in 2010.
    The latest version is Safari iPad today and Mac users are not grandpas. Coding for old Safari users on Windows platforms means, coders coding for each other. Working for iPads that do not support HTML5 is like making crash tests for cars with no seatbelts.
    Currently, the usage of its modern versions, adds up to 22% and I can see some 0.04% of Safari 4 usage, which I doubt is real usage.
    As a conclusion, Safari needs no special care today.
  3. Because Firefox does NOT come pre-installed in any of the devices, it is not illogical to assume that those who chose to install it, can also update it time-to-time.
    Firefox 4 scored 100/100, as the SVG font tests were removed from Acid3.
    Beginning with version 4.0, apart from 3D-animations, Firefox supported all HTML5 elements and CSS3 rules existed then, in 2011.
    The most common version is 41 today and good luck with finding any users of version 3.5 or less. I can see some 0.02% version 6 usage, but I doubt if they are real users with that browser only.
    Currently, the usage of its modern versions, adds up to some 12% in Canada.
    As a conclusion, Firefox needs no special care today.
  4. Opera users in Canada, is a myth. I would not be surprised if those who have Opera installed proved to be the industry professionals only, wanting to see how Opera shows their own codes.
    In 2008, development versions of the Presto[18][19] and WebKit[17][20] layout engines (used by Opera and Safari respectively) scored 100/100 on the test and rendered the test page correctly.
    Beginning with version 12.0, apart from indexed database, Opera supported all HTML5 elements and CSS3 rules existed then, in 2012.
    The latest version is 34 today
    Currently, the usage of its modern versions, adds up to 1.5% and I wonder whose only browser is Opera.
    As a conclusion, Opera needs no consideration at all today.
  5. Internet Explorer is the real title of this entire topic. Adds up to some 22% of users.
    Beginning with version 9.0, IE stopped being the critically slow child of the family, though it remained not-too-clever. Supported some 50% of HTML5 elements and CSS3 rules existed then, in 2011.
    The latest version is Edge today, which is no big concern.
    Currently, the usage of IE6 or less, is some 0.05% and I doubt whether these are real users. I, for one, make frequent tests using older IE versions. Designing for IE6 is doing the same job once again. How meaningful is it?
    A serious description for this job could be doing something for IE8 (2.02%), partly for IE7 (0.12%) and a few codes for IE9 (2.02%). Actually, IE9 causes no vital problems.
    Ironically, the IE8 usage looks more than its fair share just because of the government departments who just do not update their network browsers. However, they do have Chrome installed as well.
    As a conclusion, the name of the only version that needs special attention today, is IE8. We are talking about 2.5% of Canadian users max, which are largely made up of state employees who also use Chrome in general, and when test browsers are excluded, one should not expect anything near to 1% who solely rely on these browsers.

A General Idea about Canadian Browser Market.

Screenshot of StatCounter Global Stats
StatCounter Canada Stats - Browser Market Share

However, the spirit of this section is in the details.

Screenshot of StatCounter Global Stats
StatCounter Canada Stats - Browser Version Market Share

Detailed Version Statistics DOWNLOAD

Concrete Examples

Example 1 Graceful Degradation

To address the non-recognised codes by earlier IE versions, many solutions were proposed. Remediation takes the forms of presenting separate stylesheets, using older JavaScript libraries, even redirecting users to different pages.


 PART 1/2 of MODULE 2: Here is the codes for taking care of old IE versions.

<!-- makes IE8 and lower versions recognise HTML5 elements, uses an earlier jQuery version AND has a separate stylesheet -->
<!--[if lte IE 8]>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/html5shiv.min.js"></script>
<script type="text/javascript" src="js/selectivizr-min.js"></script>
<link rel="stylesheet" type="text/css" href="css/ie8.css" />
<![endif]-->
<!-- there is even a stylesheet Google provides for IE6 or lower, will overwrite the stylesheets above anyway -->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" media="screen, projection" href="http://universal-ie6-css.googlecode.com/files/ie6.0.3.css" />
<![endif]-->

<link rel="stylesheet" type="text/css" href="css/normalize.css" media="screen" />

Codes and purposes explained:

    An IF statement in the comments says the files below itself will be added, if the browser is LESS THAN IE9. 
    Otherwise, those files are NOT added and page load time does not suffer.
    Non-IE browsers do not even read these lines.
    First, an older version of jQuery is used, so that the older IEs will see the jQuery methods they were used to.
    When combined, the second and third files make the old IEs "understand" many new HTML5 elements and CSS rules.
    There is a dedicated CSS file for IE8 which essentially manages the container width that was given through media queries.
    Google provides an IE6 fix! I added that as well.
    
    normalize.css file resets all default browser values, helping them to act in a more standardised way.
    

Here is a basic example of an application that considers a user who disabled JavaScript, but still wants to print something. Print this page

A message appears above, when JavaScript is disabled. Try disabling js to see the message or check the source code please.

However, there are hundreds of unique cases that still need manual action. It all depends on the target audience. Here, I will list the 5 problems I think are important.

  1. SVG — All svg files should have their png alternatives. These can be conditionally presented after browser detection. IE8 and lower do not recognise svg extension. Please hover the cat.
  2. VIDEO — The old object element can be conditionally presented after browser detection. IE8 and lower do not recognise video element. But this is a concern if videos are locally stored. YouTube has already taken care of it, the following video shows much better than this page does on IE7.
  3. @media queries — The alternative stylesheets can be linked from within the html file, instead of the CSS file. Please see bullet 1 above.
  4. HTML5 form features — IE9 or lower do not recognise these. Our forms should already have both client-side and server side validations anyway.
  5. CSS Gradients — IE9 or lower do not play it. Just add a fallback option. In the ie8.css file, all box-shadows and gradients are either removed or replaced. These properties can be used in the css file as well.
              
    /* IE 8 */
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    
    /* IE 5-7 */
      filter: alpha(opacity=50);
    

Example 2 Progressive Enhancement

The idea of establishing a base-level of user experience is great but the suggested base level given by the source text, which has a publication date of September 22, 2009, is the actual issue here. HTML 4.01??

So, I checked more recent sources. Graceful degradation versus progressive enhancement proved to be a more up-to-date and reliable resource. The quotatation of this module is from there.

 PART 2/2 of MODULE 2: Although this is not exactly starting from the base and going to the edge, I think it is an alternative. Here is the highlights about how to proceed.

  1. Create versions of your website in XHTML and HTML5 with different sets of CSS files and jQuery libraries. Modernising does not work fully, no matter what.
  2. Let .htaccess determine the user's browser. Even the oldest ones cannot resist this!
  3. Show the version that is best displayed by that browser.

If all the modernising software out there are not good enough, (in the case of this page they were not, I had to create a separate CSS file) here is a redirection demo:
Please check test.html both using IE8 or less and using a modern version to test .htaccess redirection, codes of which are provided below!

RewriteEngine On
# browser detection as condition
RewriteCond %{HTTP_USER_AGENT} "MSIE [6-8]" [NC]
# old page to new page
RewriteRule ^test.html/?$ $1/morgue.html$2 [R=301,L]


JavaScript Libraries — DOM Manipulation

What is jQuery?

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

Definition retrieved from jquery.com.

Angular JS

HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

Introduction retrieved from angularjs.org.

This is a "written less, done more" module.


 PART 1/4 of MODULE 3: jQuery. Please evaluate the TABS of this page as a part of the job.

Factors to consider.

  1. User-observable features:
    1. Displays its content
    2. Hides the page intro and banner
    3. Cannot be clicked twice
    4. Tab being visited is indicated both by colour and text decoration change
    5. Inserts a back button to the top left which brings back the presentation page
    6. Performs animation
  2. Codes are heavily commented
  3. It is jQuery-driven
  4. Works even with IE7, though not styled properly

 PART 2/4 of MODULE 3: jQuery. Please evaluate the fake DOS show on the front page.

Factors to consider.

  1. User-observable features:
    1. Lines never step out of their stage
    2. Indicates real local time
    3. Fonts are very convincing
  2. A closer look will reveal that Fake Codes posted there are REAL DOS codes, they just are not on the shell
  3. Each and every line of its codes are heavily commented
  4. They are jQuery-driven
  5. It is 100% mine: the scenario, the DOS codes, and the layout. Not a single line borrowed
  6. Thanks to its unique location, it is using 100% DOM selectors
  7. Works even with IE7, though not styled properly



PART 3/4 of MODULE 3: Angular JS

Angularjs is to Javascript what Bootstrap is to CSS. I personally think both of them are made up of HTML classes only and none of these 2 requires more than basic coding skills. Just using classes without having an idea about how they make things work, does not require extensive education. Alas, Angularjs is a sought-after keyword and here is an example to that as well.

As there is not much room for creativity in Angularjs and since it was intended for quick solutions, here is an example doing just that. Code borrowed from angularjs.org.

 A basic example.

First name: {{person.firstName}}
Last name: {{person.lastName}}
Full name: {{person.getFullName()}}



PART 4/4 of MODULE 3: Angular JS

 A typical example. Please open Part 4 Module 3 page to see the job as this page cannot handle any refresh requests.


By the way, Nu Html Checker does not like Angularjs at all! Here is one of the sentences generated after Angularjs:

	Attribute ng-app not allowed on element div at this point.              
              

JSON and AJAX

JavaScript Object Notation

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. It is based on a subset of the JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999. JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others. These properties make JSON an ideal data-interchange language.

Definition retrieved from json.org.

What is AJAX?

AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

Definition retrieved from w3schools.com.

JSON versus XML

Having alternatives is always a desirable thing and JSON is an option too. When "XML versus" is typed as the search term, Google suggests "json" as the continuation!


PART 1/3 of MODULE 4  A basic JSON example.


Here is the code.
// modified code from http://www.w3schools.com/json/json_intro.asp
var text = '{"student":"Armagan Tekdoner","course":"COMP 2112","exercise":"Part 1 Module 4"}';
// json works here
var parsedText = JSON.parse(text);

// stores the data in a variable
var collectedData = parsedText.student +' '+ parsedText.course +' '+ parsedText.exercise;

// appends the data variable defined above inside the exercise
$( '#job4 > article:nth-of-type(2) > p:nth-of-type(2)' ).after( collectedData );


PART 2/3 of MODULE 4  Another example — JSON Http

These are working links to pages of my current website.


AJAX is a developers dream, because you can:

  1. Update a web page without reloading the page
  2. Request data from a server - after the page has loaded
  3. Receive data from a server - after the page has loaded
  4. Send data to a server - in the background
retrieved from: https://www.w3schools.com/js/js_ajax_intro.asp

PART 3/3 of MODULE 4   A superb AJAX example.

The source XML file is locally hosted, which was retrieved from Informatics Homepages Server, The University of Edinburgh


API Integration

JAVASCRIPT WEB APIS

An open API, sometimes referred to as a public API, is an application program interface that provides a developer with programmatic access to a proprietary software application.

Definition retrieved from searchcloudapplications.techtarget.com.

Maps, Geolocation,

PART 1/3 of MODULE 5   Basic example: Google Maps is an API

No one can say that I own a satellite or this map is a pic!

But, what all users will see here is this same Hawaii map, no matter where they see it from.


PART 2/3 of MODULE 5   HTML5 Geolocation: Permission Required

An easy way to locate user is using the HTML5/JavaScript-powered tool. But the catch is that it requires user permission and does not work for old browser versions.

The button below will display your location on the map, IF you grant permission when prompted.


PART 3/3 of MODULE 5   Video Streaming

Here is a gallery that shows videos from Vimeo, from a user called maiamedia.