Menu
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?
722
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.
100
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");
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
