How to avoid inline javascript?

Question

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 becomes 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?

You can put your entire JS code in an external script, avoiding inline JS code completely. It's what I do. — user5734311
– 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
– RobG, Commented Aug 30, 2016 at 2:15

8protons · Accepted Answer · 2016-08-30 02:30:10Z

8

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.

answered Aug 30, 2016 at 2:30

8protons

4,0476 gold badges37 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

xaisoft Over a year ago

Thanks for this. I understand the script tag is HTML, sorry for the confusion. Your last code piece helped me out. I did not know I could just put the whole click even in an external file. I was thinking I had to pass the element to bind the click to the click event if that makes sense

8protons Over a year ago

@xaisoft That makes complete sense.

slebetman · Accepted Answer · 2016-08-30 02:29:52Z

1

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");
});

answered Aug 30, 2016 at 2:29

slebetman

115k19 gold badges147 silver badges180 bronze badges

1 Comment

xaisoft Over a year ago

Thanks, your sample helped me a lot.

the12 · Accepted Answer · 2016-08-30 02:43:11Z

I would recommend 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.com/performance/rules.html#external=

Collectives™ on Stack Overflow

How to avoid inline javascript?

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related