Converting Inline-javascript to Javascript

[Paul_Wilkins]

@asasass

How do I add this:

  (function iife() {
    "use strict";

 }());

To the below code?

• Remove “use strict”; from all of the functions (except for the iife function)
• Put all of the code inside the iife function, just below the "use strict"; line

JSLint tends to have two main types of issues with code. One is layout issues, and the other is syntax issues.

After you add that code in to the iife function, you’ll need to indent all of the code, which is another layout issue. That’s easy to fix with JavaScript Beautifier

The code can then be copied from there to JSLint, and you’ll only have mostly syntax issues to worry about.

[Paul_Wilkins]

I and most programmers use a special coding program to make my life easier. Mine has JSLint built inside of it which warns me immediately when something is wrong. Programming then becomes a mini-game of making any errors go away as fast as you can.

There’s also a programming technique called TDD (Test Driven Development) or BDD (Behaviour Driven Development) where you:

• create a test that expects a certain value from a function when you give is a certain input
• write the code that makes that test pass
• without changing the apparent behaviour of the code, refactor and adjust the code to make it easier to work with

The test gives an error, writing code makes the test pass, and refactoring improves the code.
That is the heartbeat of TDD, and it’s a tight little cycle that lasts no longer than a minute or two.

There are several testing frameworks out there, so here’s an article that compares Jasmine vs. Mocha, Chai, and Sinon

[Paul_Wilkins]

@asasass

I don’t understand why it would say, unused, and how would it know?

It knows that playButton3 isn’t used, at least by the JavaScript code that you gave it, because it is pretty smart and can figure out that nothing in that code calls the playButton3 function.

Yes there is an inline event that uses it, so as long as you know that it is used somewhere, it’s fine to ignore that message.

A simple solution to that though is to use JavaScript instead to assign the function to the element, by putting this code below the function.

document.querySelector("#playButton3").addEventListener("click", playButton3);

And then remove the onclick="..." piece from the HTML code.

[asasass]

I fixed them all.

[asasass]

<script>
(function iife() {
    "use strict";
    function playButton4ClickHandler() {
        var button = document.querySelector(".playButton4");
        var player = document.querySelector("#player4");
        player.volume = 1.0;
        if (player.paused) {
            button.querySelector(".play").style.display = "none";
            button.querySelector(".pause").style.display = "inline-block";
            player.play();
        } else {
            button.querySelector(".play").style.display = "inline-block";
            button.querySelector(".pause").style.display = "none";
            player.pause();
        }
    }
    var playButton4 = document.querySelector(".playButton4");
    playButton4.addEventListener("click", playButton4ClickHandler);
}());
</script>

[asasass]

<script>


function getButton(el) {
    "use strict";
    while (el.nodeName !== "HTML" && el.nodeName !== "DIV") {
        el = el.parentNode;
    }
    return el;
}

function playButton3(event) {
    "use strict";
    var button = getButton(event.target);
    var player = button.querySelector("audio");
    var play = button.querySelector(".play");
    var pause = button.querySelector(".pause");
    button.classList.add("clicked");
    player.volume = 1.0;

    if (player.paused) {
        play.style.display = "none";
        pause.style.display = "inline-block";
        player.play();
    } else {
        play.style.display = "inline-block";
        pause.style.display = "none";
        player.pause();
    }
}

function showPause(event) {
    "use strict";
    var button = getButton(event.target);
    var player = button.querySelector("audio");
    player.isPlaying = function () {
        return player.paused === false;
    };
    if (player.isPlaying()) {
        button.querySelector(".pause").style.display = "inline-block";
    }
}

function showSpeaker(event) {
    "use strict";
    var button = getButton(event.target);
    var player = button.querySelector("audio");
    player.isPlaying = function () {
        return player.paused === false;
    };
    if (player.isPlaying()) {
        button.querySelector(".pause").style.display = "none";
    }
}

</script>

[Paul_Wilkins]

@asasass

It stopped working.

It stopped working because you didn’t end the embedded script in the HTML section with </script>

[Paul_Wilkins]

@asasass

I fixed them all.

That JSLint is known to being grown men to tears when dealing with more complex code, so well done.

[asasass]

I just need help with this, and that’s all, I fixed all the other codes.

[asasass]

I got the hang of it now.

[asasass]

strict is removed.

  (function iife() {
    "use strict";

function getButton(el) {
    while (el.nodeName !== "HTML" && el.nodeName !== "DIV") {
        el = el.parentNode;
    }
    return el;
}

function playButton3(event) {
    var button = getButton(event.target);
    var player = button.querySelector("audio");
    var play = button.querySelector(".play");
    var pause = button.querySelector(".pause");
    button.classList.add("clicked");
    player.volume = 1.0;

    if (player.paused) {
        play.style.display = "none";
        pause.style.display = "inline-block";
        player.play();
    } else {
        play.style.display = "inline-block";
        pause.style.display = "none";
        player.pause();
    }
}

function showPause(event) {
    var button = getButton(event.target);
    var player = button.querySelector("audio");
    player.isPlaying = function () {
        return player.paused === false;
    };
    if (player.isPlaying()) {
        button.querySelector(".pause").style.display = "inline-block";
    }
}

function showSpeaker(event) {
    var button = getButton(event.target);
    var player = button.querySelector("audio");
    player.isPlaying = function () {
        return player.paused === false;
    };
    if (player.isPlaying()) {
        button.querySelector(".pause").style.display = "none";
    }
}
}());

[asasass]

Unused 'showPause'.

[asasass]

These are still showing up again in JSLInt

Unused ‘playButton3’.
function playButton3(event) {
29.13

Unused ‘showPause’.
function showPause(event) {

40.13
Unused ‘showSpeaker’.
function showSpeaker(event) {

[Paul_Wilkins]

@asasass

Showing up again in JSLInt

Unused ‘playButton3’.

Check yourself to see if the function is being used on any HTML inline event attributes. They quite likely will be.
If they are being used there, then the code should still work.

We can though go through moving them out of the inline event attributes down to proper scripting code if you want.

[asasass]

When I add this to jslint, none of the above shows at all.

function getButton(el) {
    "use strict";
    while (el.nodeName !== "HTML" && el.nodeName !== "DIV") {
        el = el.parentNode;
    }
    return el;
}

function playButton3(event) {
    "use strict";
    var button = getButton(event.target);
    var player = button.querySelector("audio");
    var play = button.querySelector(".play");
    var pause = button.querySelector(".pause");
    button.classList.add("clicked");
    player.volume = 1.0;

    if (player.paused) {
        play.style.display = "none";
        pause.style.display = "inline-block";
        player.play();
    } else {
        play.style.display = "inline-block";
        pause.style.display = "none";
        player.pause();
    }
}

function showPause(event) {
    "use strict";
    var button = getButton(event.target);
    var player = button.querySelector("audio");
    player.isPlaying = function () {
        return player.paused === false;
    };
    if (player.isPlaying()) {
        button.querySelector(".pause").style.display = "inline-block";
    }
}

function showSpeaker(event) {
    "use strict";
    var button = getButton(event.target);
    var player = button.querySelector("audio");
    player.isPlaying = function () {
        return player.paused === false;
    };
    if (player.isPlaying()) {
        button.querySelector(".pause").style.display = "none";
    }
}

[Paul_Wilkins]

You’ll find that http://jsbeautifier.org/ is useful to pre-process the code when you have a large amount of code to check.

One issue though is in terms of anonymous functions, which are functions that have no name.
JSBeautifer removes the space before the () when there is no name

    player.isPlaying = function() {
        return player.paused === false;
    };

Yet JSLint says, Expected one space between 'function' and '('.

The better solution than adding a space, is to give that function a meaningful name.

    player.isPlaying = function playerIsPlaying() {
        return player.paused === false;
    };

That gives three main benefits:

• it tells you what the function does
• the code can be passed through jsBeautifier and in the JSLint again and be free of problems
• if the function grows larger, it’s easier to move it out to a separate function

[asasass]

Once this is added:

(function iife() {
    "use strict";

All of those show.

[asasass]

That error doesn’t come up when I put the code in without the iife code.

The iife code is what’s causing those errors to appear.

function getButton(el) {
    "use strict";
    while (el.nodeName !== "HTML" && el.nodeName !== "DIV") {
        el = el.parentNode;
    }
    return el;
}

function playButton3(event) {
    "use strict";
    var button = getButton(event.target);
    var player = button.querySelector("audio");
    var play = button.querySelector(".play");
    var pause = button.querySelector(".pause");
    button.classList.add("clicked");
    player.volume = 1.0;

    if (player.paused) {
        play.style.display = "none";
        pause.style.display = "inline-block";
        player.play();
    } else {
        play.style.display = "inline-block";
        pause.style.display = "none";
        player.pause();
    }
}

function showPause(event) {
    "use strict";
    var button = getButton(event.target);
    var player = button.querySelector("audio");
    player.isPlaying = function () {
        return player.paused === false;
    };
    if (player.isPlaying()) {
        button.querySelector(".pause").style.display = "inline-block";
    }
}

function showSpeaker(event) {
    "use strict";
    var button = getButton(event.target);
    var player = button.querySelector("audio");
    player.isPlaying = function () {
        return player.paused === false;
    };
    if (player.isPlaying()) {
        button.querySelector(".pause").style.display = "none";
    }
}

[asasass]

@asasass

(function iife() {
“use strict”;

As soon as I add that to it, all those errors show.

[Paul_Wilkins]

@asasass

When I add this to jslint, none of the above shows at all.

The difference there is that the functions are globally accessible functions. The linter doesn’t know if other code will be calling global functions, and so doesn’t warn about that.

When the code is inside a function, such as the iife which protects the global namespace, the functions can’t be accessed from anywhere else except from inside of the iife, therefore JSLint knows for sure that nothing else can call those functions.

You want to be warned about potential problems like that, instead of just ignoring them.