Why can't I put JS code between <script src="...">CODE</script>? - javascript

I'm trying the following but it doesn't appear to be working:
<script src="/script.js">
alert(hello);
</script>
Script.js simply contains var hello = "world".
Can you not put code between <script src="...">CODE RIGHT HERE</script>?
If I skip src it works:
<script src="/script.js"> </script>
<script>
alert(hello);
</script>

You can specify the src attribute or include the code as the content of the script tag. As you've discovered, you can not do both simultaneously.
Here's what Mozilla Developer Network has to say about the src attribute (emphasis at the end added):
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.
You can also come to the same conclusion by carefully reading the W3C Recommendation at http://www.w3.org/TR/html5/scripting-1.html but I don't see it stated so concisely. (Correction welcome! Maybe I'm just not seeing it.) You have to follow along the steps to preparing a script.

Technically it can be done but only if the script you're referencing with the src attribute evaluates the contents using something like:
eval(document.currentScript.textContent);
However I would advise against doing this as it violates standards.

Related

Linkup javascript in HTML file

we can link a CSS file in HTML file. But how can I link JavaScript file in an html file?
Suppose if we link a CSS file we write
Like that how can I link a JavaScript file?
Use a <script> tag.
<script src="/some/server/resource.js"></script>
Note that the type attribute is no longer necessary. You used to write it as:
<script type="text/javascript" src="/a/b/c.js"></script>
Bear in mind that where you put the <script> tag can impact how the JavaScript behaves as it can block the DOM while loading if added to the <head>. The differences about what placement changes what is an entirely different question.
you can link a javascript file in a HTML document using the script tag.
Here is an example:
<script src="myscripts.js"></script>
Here is some more information about this: http://www.w3schools.com/tags/att_script_src.asp
You can also write javascript inside script tags like normal.
Add a <script src="url_to_your_script.js"></script> tag to your html file, preferably in the head tag.
For more information, visit https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
<script src="your_file_name.js"></script>
Add this code at the end of your body tag.
Happy Coding:)

Html script tag - can script be added when src is used [duplicate]

This question already has answers here:
Why am I seeing 'function not defined' on my error console when I'm sure my function IS defined?
(3 answers)
Closed 4 months ago.
I'm using an html script tag with the src attribute as follows:
<script src="http://...">
</script>
I need to also put a bit more code to redirect the page after the script has run - is it valid/acceptable to add the script between the existing script tags or should I add another script on the end?
This:
<script src="http://...">
...do something else he
</script>
Or:
<script src="http://...">
</script>
<script>
...my other code here
</script>
No it can't.
Use the bottom one.
The long answer…
w3c states
“The SCRIPT element places a script within a document. This element may appear any number of times in the HEAD or BODY of an HTML document.
The script may be defined within the contents of the SCRIPT element or in an external file. If the src attribute is not set, user agents must interpret the contents of the element as the script. If the src has a URI value, user agents must ignore the element's contents and retrieve the script via the URI.”
Source: http://www.w3.org/TR/html401/interact/scripts.html
Oh, boy. you can't write code inside the script tag having src tag.
You have to use different script tags.
As js loads top to bottom. Your code will work fine.
If a script element has a src attribute, the content must be ignored, any other behaviour is non-conformant.
It has been suggested in blogs (as a hack) to put content in the element knowing that it won't be evaluated, then use DOM methods to get the content as a string and either eval it or insert it in a new script element. Neither of these are a good idea.
So better add another script tag after the initial script tag with the src in it.
I've just tried this and the code in between the script tags wont run,
I imagine this is because as soon as you add a 'src' attribute the code within the script tags is ignored.
However if you simply want to redirect the page after the script is run you just need
window.location = "../YourRedirectPage";
At the end of the code in the external file

why does jquery's .load() ignore <script>?

I have a every common page a.html which looks like this:
<html>
<head>
<script type="text/javascript" src="xyz.js" > </script>
</head>
<body>
<div> ... </div>
</body>
</html>
In b.html, I use jquery's .load() function to a div.
$("#myDiv").load("a.html")
It works. The xyz.js's content is loaded along with a.html. But why isn't there a <script> tag? I open firebug to see the source. There is a's but no a's <script>.
I want the <script> because I need it to find relative path.
(this question)
Edit: I tried to use .get() and .html(). Didn't help.
Edit2: The title is not very appropriate. The xyz.js runs. But no <script>.
The .load() function purposefully strips out <script> tags from the loaded content. When you give it a plain URL to load, it will execute the scripts after loading the content and adding it to the DOM. However, if you use the trick of adding a selector after the URL in the first argument:
$('#foo').load("http://some.domain.com/blah #special-div");
then it strips the <script> tags but it does not execute them.
Why? I don't know.
Now, please note that loading an entire page from the <html> tag on down into an element of another page is going to result in some sort of Frankenstein monster of a DOM, if a browser will do it at all. Generally, when you use ".load()" to grab fragments of content to update a page, your server should respond with a piece of a page, not the whole thing. The jQuery deal with allowing a selector after the actual URL is intended to let you strip out a chunk of a page, which is really cool, but it has that drawback that the scripts won't be executed in that case.
Because, it cannot run the script inside the <SCRIPT> tag. jQuery has .getScript() to call for scripts only. Check here

What does it mean when your javascript is rendered like this?

I was looking at the page source for an ASP.NET page I wrote and noticed that my javascript was being rendered like this:
<script type="text/javascript">
// <![CDATA[
document.write('<script src="/_layouts/myProject/js/jquery.min.js?rev=sEo7zNI93reYIUNwemPM%2BQ%3D%3D"></' + 'script>');
// ]]>
</script>
Does anyone know :
Why there are commented out CDATA
tags around my script include? Do these even do anything?
Why it's using a document.write inside of the script tag to include... another script tag?
Because text nodes in XML that may contain HTML (but shouldn't be parsed as such) should be in CDATA blocks. Because the block definition is not valid JavaScript, it is commented out.
I'm not sure why. I don't think they are downloaded any differently (I imagine a JavaScript disabled browser won't ever download JavaScript files anyway).
Basically the commented CDATA tag is for browsers which doesn't support javascript and for the second one its inserting another javascript file to the page.

Including JavaScript file into main document

I have a jquery-code which using selectors (from current document). Now I want to move this code into another file(js) and just include from this document. Could I do it without any editing? So, will jquery-code works right?
<script src="jquery.js"></script>
<script src="main.js"></script>
in the head or right before the end body tag will do. If this is in the head then make sure you're using $(document).ready( fn ).
Yes, all the selectors you currently use are relative to the DOM of the web page/document that you are working on. Whether the javascript code that produces and uses these selectors is embedded in the html page or included from an external js file is not relevant. (Though this latter layour is much preferable approach for other reasons)
To quote and expand on meder's answer
<script type="text/javascript" src="/SCRIPT_DIR/jquery.js"></script>
<script type="text/javascript" src="/SCRIPTS_DIR/main.js"></script>
Would be a better way to declare the javascript. Note the script type is specified and the src URL starts with a / character which specifies an absolute reference to the script file, which is good practice for nested pages.

Categories