Difference Between ≪Script Src="Foo.Js"≫≪/Script≫ and ≪Script Src="Foo.Js"/≫

Difference between script / and script/script for importing multiple js file in HTML

Script tag requires both the starting and ending tag. From MDN:

Tag omission: None, both the starting and ending tag are mandatory.

document.createElement('script') vs script src=

The <script src=...> blocks the browser while document.createElement('script') loads the JavaScript asynchronously; this is the primary reason.

The <script src=...> tag blocks browser from displaying rest of the page until the script is loaded and executed. This ensures that scripts are executed in correct order and any document.write() in that script work as expected. However this creates a laggy browsing experience for the user.

When the script is loaded asynchronously, the browser can download the script without blocking the page display. This improves the browsing experience dramatically.

To load the scripts asynchronously one can use HTML markup:

<script src="..." async defer></script>

The async attribute was introduced in HTML5 while the defer attribute can be added as a fallback for older versions of IE. This document describes how async and defer attribute work.

Alternately, one can use JavaScript to build a script tag:

var s = document.createElement('script');
s.src = "...";
document.getElementsByTagName("head")[0].appendChild(s);

JavaScript generated script tags work in most browsers even if they do not understand the async attribute or .async = true property.

About schemeless URIs (//example.com/script.js): schemeless URIs seem to work almost everywhere (see this question).

About the Google Analytics example: both old and new code use JavaScript to detect the protocol then load http://www. or https://ssl. which is not possible via HTML markup.

jsp including CSS&JS %@ include % vs script

The difference is that <script src = "../js/someJavaScript.js"></script> puts that exact HTML in the output and the browser does another call to the server to fetch the JS file. While <%@include file = "../js/someJavaScript.js"%> puts the content of the JS file in the output, which means you need to wrap script tags around it: <script><%@include file = "../js/someJavaScript.js"%></script>. Its better to use the first method, since printing a bunch of Javascript in the HTML file itself is messy and doesn't look professional, and its a waste of bandwidth. When I say "HTML file itself" I mean the HTML returned by the main JSP to the browser. View your source in the browser to see the difference.

Does the CSS & JS file has to be outside of the WEB-INF folder?

Of course everything in WEB-INF is available to the server-side code. But nothing under WEB-INF is directly accessible to the client unless mapped in web.xml, so when you reference javascript/css in the way that requires the browser to do another call to fetch it (the preferable way) it will fail if you have the CSS/JS under WEB-INF.

The code of method _jspService(HttpServletRequest, HttpServletResponse) is exceeding the 65535 bytes limit

The error you got when trying to include the jquery library is because the JS file is really big. This is one reason it is preferable to reference the JS file and let the browser download it separately. Imagine if you literally included the text of a 65535 byte JS file in each page of your site! But if in each page you referenced the same and let the browser download it itself, the browser could cache it and not have to download it each time. It saves bandwidth.

Why don't self-closing script elements work?

The non-normative appendix ‘HTML Compatibility Guidelines’ of the XHTML 1 specification says:

С.3. Element Minimization and Empty Element Content

Given an empty instance of an element whose content model is not EMPTY (for example, an empty title or paragraph) do not use the minimized form (e.g. use <p> </p> and not <p />).

XHTML DTD specifies script elements as:

<!-- script statements, which may include CDATA sections -->
<!ELEMENT script (#PCDATA)>

Is it possible to refer to function or object from particular script tag in HTML file

Yes this is totally possible, but you should use a type other than text/javascript.

<script id='tag-1' type="myScriptHolder">
  function foo(){
    alert("this is foo-1");
  }
</script>

<script id='tag-2' type="myScriptHolder">
  function foo(){
    alert("this is foo-2");
  }
</script>

<script id='tag-3' type="myScriptHolder">
  function foo(){
    alert("this is foo-3");
  }
</script>

<script>
$.globalEval($('#tag-1').text();
</script>

Is ordering of link rel=stylesheet ... and script ... tags significant?

for performance, CSS first then JS...(but JS yields best performance at the end of the markup as noted in some of the other answers)

stylesheets should always be specified in the head of a document for better performance, it's important, where possible, that any external JS files that must be included in the head (such as those that write to the document) follow the stylesheets, to prevent delays in download time.

quote from Optimize the order of styles and scripts (from Google's "Make the Web Faster" Best Practices docs)

Javascript - inline vs external script - what's the difference?

There is little difference in using one or the other way. The real difference comes from the advantages/disadvantages that each one has.

Inline scripts

Are loaded in the same page so is not necessary to trigger another request.
Are executed immediately.
The async and defer attributes have no effect
Can be helpful when you are using a server-side dynamic rendering.

External scripts

Gives better separation of concerns and maintainability.
The async and defer attributes have effect so if this attributes are present the script will change the default behavior. This is not possible with inline scripts.
Once a external script is downloaded the browser store it in the cache so if another page reference it no additional download is required.
Can be used to load client code on demand and reduce overall download time and size.

Why split the script tag when writing it with document.write()?

</script> has to be broken up because otherwise it would end the enclosing <script></script> block too early. Really it should be split between the < and the /, because a script block is supposed (according to SGML) to be terminated by any end-tag open (ETAGO) sequence (i.e. </):

Although the STYLE and SCRIPT elements use CDATA for their data model, for these elements, CDATA must be handled differently by user agents. Markup and entities must be treated as raw text and passed to the application as is. The first occurrence of the character sequence "</" (end-tag open delimiter) is treated as terminating the end of the element's content. In valid documents, this would be the end tag for the element.

However in practice browsers only end parsing a CDATA script block on an actual </script> close-tag.

In XHTML there is no such special handling for script blocks, so any < (or &) character inside them must be &escaped; like in any other element. However then browsers that are parsing XHTML as old-school HTML will get confused. There are workarounds involving CDATA blocks, but it's easiest simply to avoid using these characters unescaped. A better way of writing a script element from script that works on either type of parser would be:

<script type="text/javascript">
    document.write('\x3Cscript type="text/javascript" src="foo.js">\x3C/script>');
</script>