I'm curious, usually this is a way I'd call plugin on a page:
<script type="text/javascript" src="plugin.js"></script>
<script>
//apply plugin to elements / call plugin
</script>
but wouldn't it make more sense and perhaps save some lines of code to call plugins like this?
<script type="text/javascript" src="plugin.js">
//apply plugin / call plugin
</script>
Honestly I don't think I have seen this done before, and I am curious why? I'm new to jQuery and JavaScript so don't judge ;)
<script type="text/javascript"></script> does nothing. It is an empty script element.
Based on your question title, I assume you mean:
<script src="plugin.js"></script>
<script>
// Use functions defined in plugin.js
</script>
compared to:
<script src="plugin.js">
// Use functions defined in plugin.js
</script>
If so: The latter won't work. A script element loads one script which can be from the text node inside the element or a URL.
The specification describes the content of a script element as:
If there is no src attribute, depends on the value of the type attribute, but must match script content restrictions. If there is a src attribute, the element must be either empty or contain only script documentation that also matches script content restrictions.
Assuming by your title that you are asking why we don't include the script in the same tag we use the src attribute on.
https://developer.mozilla.org/en-US/docs/HTML/Element/script
src
This attribute specifies the URI of an external script; this can be used as an alternative to embedding a script directly within a document. script elements with an src attribute specified should not have a script embedded within its tags.
This is because browsers may ignore the contained script when you use a src attribute.
What is good practice depends on a lot of things.
If you're going for performance, the absolute fastest way is to have all your scripts in-line and have only just the ones you need.
If you're looking at multiple requests (ie. a user browsing your website) using includes allows you to take advantage of caching.
The other extreme is where you're building a large JavaScript application. Here you might want to load all JavaScript at once, or use some lazy-loader to load modules that you might not need.
There is no one solution for all scenarios. Think about your use case and pick the strategy that is best for you.
src?scripttag, which doesn't do anything.