Let say I have a page that has the following html:

<input type="button" id="clickme" value="Click Me" />

On the same page, I have the following script:

<script type="text/javascript">

    $('#clickme').click(function(){
        console.log("clicked");
});

</script>

Is it fine for the above to be inline on the page or is it better to have the console.log(...) in a libray, so it would be something like:

<script type="text/javascript src="external.js"></script>
<script type="text/javascript">

    $('#clickme').click(function(){
        LogToConsole("clicked");
});

</script>

To take it to the next level, is it even better to put the whole click function in an external library, so the code eventually bees something like:'

<script type="text/javascript src="external.js"></script>
<script type="text/javascript">

ClickMe("clicked");

</script>

The above still contains inline javascript or is my understanding of inline javascript incorrect because it seems that it is impossible to avoid?

Let say I have a page that has the following html:

<input type="button" id="clickme" value="Click Me" />

On the same page, I have the following script:

<script type="text/javascript">

    $('#clickme').click(function(){
        console.log("clicked");
});

</script>

Is it fine for the above to be inline on the page or is it better to have the console.log(...) in a libray, so it would be something like:

<script type="text/javascript src="external.js"></script>
<script type="text/javascript">

    $('#clickme').click(function(){
        LogToConsole("clicked");
});

</script>

To take it to the next level, is it even better to put the whole click function in an external library, so the code eventually bees something like:'

<script type="text/javascript src="external.js"></script>
<script type="text/javascript">

ClickMe("clicked");

</script>

The above still contains inline javascript or is my understanding of inline javascript incorrect because it seems that it is impossible to avoid?

• javascript

• You can put your entire JS code in an external script, avoiding inline JS code pletely. It's what I do. – user5734311 Commented Aug 30, 2016 at 2:03
• The term "in line" is not defined in a standard anywhere, it's jargon that typically refers to adding script in an element attribute like <button onclick="someFun(this)" ...>. It is avoided by adding script dynamically as you're doing, which is usually done in the head or just before the closing body tag. – RobG Commented Aug 30, 2016 at 2:15

3 Answers 3

How to avoid inline javascript?

One of the best ways that I can think of to avoid using inline JavaScript is to simply not script inline JavaScript.

That is, at the header/footer of your HTML doc, source an external JS file like so:

<script type="text/javascript" src="external.js"></script>

Then elsewhere in your HTML doc, put in the element to trigger your click function:

<input type="button" id="clickme" value="Click Me" />

Lastly, in external.js, put in the code to trigger your click:

$('#clickme').click(function() {
    LogToConsole("clicked");
}

By putting the JavaScript in an externel JS file, you are not writing JavaScript inline on your HTML doc. Your understanding of inline JavaScript, judging from your question, is indeed "incorrect". But by acknowledging that inline JavaScript simply means writing JS code within your HTML file, you now understand what it means to write (or not write) inline JS.

By the way, the <script> tag is not inline JS!!!! It's HTML.

To take it to the next level you can put everything in libraries and do:

<script type="text/javascript" src="external.js"></script>
<script type="text/javascript" src="clickme.js"></script>

Note that the above will work exactly the same as inline. That is to say, the code will work or not depending on where you put the script tag (think of it as the browser copy and pasting the external code to inline - that's basically what's happening).

You can take it to the next level after that: make the scripts independent of where they are located in the HTML. For most people this means make the script work even if they're included in the head:

<html>
  <head>
    <script type="text/javascript" src="external.js"></script>
    <script type="text/javascript" src="clickme.js"></script>
  </head>
  <body>
    <input type="button" id="clickme" value="Click Me" />
  </body>
</html>

But if you try to do this you'll run into a problem: The button "clickme" does not exist when you include the clickme.js file so the script won't work. To make it work you run the script on load or on DOM ready. jQuery makes this easy:

// clickme.js
$(document).ready(function(){
    // jQuery will wait until the document is loaded
    // before executing code inside here

    ClickMe("clicked");
});

I would remend using external JavaScript most of the time. Javascript files are difficult to debug when it is cluttered with html. Think about if you have hundreds of lines of javascript, scattered across a document. It would take a long time to debug BOTH html and javascript if this were the case.

The only exception to this rule is performance. External JavaScript files are cached by the browser, however they require an increased amount of HTTP requests, which slow down page loading times. It really depends on the amount of times your JavaScript external sheet is recycled (cached) by the browser. If you have a large amount of views per session, then it gets recycled a lot, and thus it makes sense to use external files, however for things like the homepage that do not have a high amount of views per sessions, and thus does not get recycled that much, it would make more sense to use inline.

For more information on performance, you can read: https://developer.yahoo./performance/rules.html#external=