CODEWITHSUNDEEP
javascripthtml
Hero
Hero

Reputation: 35

Disadvantage of having inline JS

I was wondering what this paragraph actually meant?

It is taken from a website for disadvantages about inline scripts

Poor accessibility : When it comes to inline JavaScript code, such as in the above example, it’s applied to an element which doesn’t have any built-in fallback interaction handler

Link: https://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/

Upvotes: 2

Views: 670

Answers (2)

Parag Bhayani
Parag Bhayani

Reputation: 3330

<div style="width: 800px; margin: 1em auto; font: bold 1em/1.2 Verdana, Arial, Helvetica, sans-serif">
    <div style="float: left; width: 400px; padding: 1em 2em; font-size: 0.9em">
        <span id="get-shit" onclick="callSomeFunction()">News</span>
    </div>
</div>

He is saying that in above function if callSomeFunction, redirects a page to some other page... but for some reason(Due to network error it can't load) callSomeFunction isn't loaded in the page, then it will be a dead link which will do nothing, so rather it should be implemented in such a way that without javascript it should also work reasonably...

even browser provides a configuration to disable javascript for the user, so in that case above link will do nothing

So he is saying by using below code that,

<link rel="stylesheet" href="css/base.css" type="text/css" media="screen">
<script type="text/javascript" src="js/base.js"></script>

<div id="container">
    <div id="navigation">
        <a id="get-news" href="news-proper-url">News</a>
    </div>
</div>


/*
    CSS code, in separate file (base.css)
*/
#container {
    width: 800px;
    margin: 1em auto:
    font: bold 1em/1.2 Verdana, Arial, Helvetica, sans-serif;
}

#navigation {
    float: left;
    width: 400px;
    padding: 1em 2em;
    font-size: 0.9em;
}

/*
    JavaScript code, in separate file (base.js)
*/
window.onload = function () {
    document.getElementById("get-news").onclick = function () {
        // Get news through AJAX
    };
}

Here, If javascript is not loaded then clicking on "News" will redirect you to the new page,

If javascript is loaded then he will send an AJAX request and load the news in the same page

Which are the cases on unavailability of javascript are listed in the same page

Doesn’t Everyone Have JavaScript Nowadays?

First: no they don’t. Second: some people purposely turn it off (for instance, the NoScript Firefox extension has had 31 million downloads to this date). Third, very often is not up to the end user, but external circumstances that they don’t control, which will, to some extent or another, lead to JavaScript being unavailable. These factors are:

Antivirus programs and firewalls being a bit too harsh in their JavaScript security judgement. Company proxy servers filtering out code (for example, read An important lesson learned about AJAX and accessibility). Other company internet access settings preventing proper JavaScript execution.

Upvotes: 2

Quentin
Quentin

Reputation: 943569

Example With Progressive Enhancement

<a href="important-message.html" onclick="alert('Important message'); return false;">Click me</a>

Here, if the JavaScript fails, then the link works as normal and the important message is displayed by loading a new page from the server.

(If the JavaScript is successful the clicks default behaviour is canceled and the link isn't followed).

The built-in interaction handler of a link is "go to a URL". By layering JavaScript over it we can use that as a fallback.

Example Without Progressive Enhancement

<button type="button" onclick="alert('Important message');">Click me</a>

Here, if the JavaScript fails, then nothing happens at all. It's just a button that doesn't do anything.

This doesn't actually have anything to do with the JavaScript being inline. The same issues occur with modern JavaScript loaded from script elements and bound with addEventListener.

Upvotes: 2

Related Questions