Where is external js file in html stored? Can I - javascript

Sorry, I don't have a good understanding of the web, but:
When you load in an external script file into an html document, where does it hold or cache that file? It doesn't put it in the index.html file.
<html>
<head>
<script src="name_of_file"></script>
</head>
.....
I ask because I'm working with node.js, and I'm wondering if I list an external script file under my index.html page, I can send the javascript file to the client.

the browser will recognize the "src"="http://xxx/xx.js" of your script tag,and check if the resources(identified with URI:"http://xxx/xx.js") has cached in browser local cache dir(every browser has its own dir)
if the file exist and cache is not expired,the browser will directly load this file,otherwise browser will download the script file,and execute them when download finish.

This question has no good answer. A JavaScript program can be located anywhere on a server, It's just linked to with <script src=SCRIPT></script> Where SCRIPT is the relative or absolute path to the .js file. Check out This site for more info.

It's wherever the file is being served from. With what you've given and default setup, the file will be in the same directory as your index.html file

Related

Flask Application not returning javascript contents in html

I have a little problem here with my flask application
i have this html file that i have linked to some javascript files and if i open the html file with a browser it works fine with the javascript codes.
Now if i use python flask and return the html file,only the html file is popped up while the JS part is not reflecting on the Web page?
I have linked my JS files to the html page and they are in the same folder
any solutions?
head>
<script src="jquery-1.11.3.min.js"></script>
<script src="video.js"></script>
<script src="zxing.js"></script>
</head>
You should create a new folder titled "Static". Inside that folder is where you store all your CSS files, JavaScript files, etc. So move your video.js, zxing.js and any other JavaScript file to the "Static" folder. Hope this helps, feel free to ask any questions!

Include a JavaScript library in a JSP file

I'm trying to use JavaScript functions from the a JavaScript library in my JSP file to display the result on a web-browser page, but it seems like the inclusion didn't work.
I actually put the .js file corresponding to the library in the WEB-INF folder and added the following line in the JSP file to include it in it :
<script type="text/javascript" src="./jsgl.min.js"></script>
I successfully managed to use the library in a simple HTML file, that's why I don't understand why this doesn't work.
EDIT :
TLDR
Put the JS file in a folder under web content (but not WEB-INF) like [WebContent]/js/jsgl.min.js, and use the following in the JSP:
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jsgl.min.js"></script>
Explanation
JSP files are compiled by the server, then processed to send data (typically HTML) back to the web browser. A <script> tag is a HTML tag that gets interpreted by the browser, not by the servlet container. So the browser sees that in the HTML then makes a new request to the server for the JavaScript file in the src attribute.
The src attribute is relative to the URL that the browser asked for, not to the path of the JSP on the server.
So as an example, let's say:
The browser asks for a page at http://example.com/SomeWebApp/some-resource
The servlet container internally forwards the request to a JSP at /WEB-INF/jsp/somepage.jsp
The response sent to the browser contains the script tag <script type="text/javascript" src="./jsgl.min.js"></script> (as in your question)
The browser sees the URL ./jsgl.min.js and resolves it relative to the URL it has asked the server for (which in this case was http://example.com/SomeWebApp/some-resource - note there is no trailing '/') so the browser will request the JS file from http://example.com/SomeWebApp/jsgl.min.js*. This is because the relative URL in the script tag's src attribute starts with a '.'.
Another answer suggested putting the JS file in a 'js' folder and changing the script tag to <script type="text/javascript" src="/js/jsgl.min.js"></script>. Using the same original page URL as in the example above, the browser would translate this src URL to http://example.com/js/jsgl.min.js. Note that this is missing the "/SomeWebApp" context path.
The best solution therefore is indeed to put the JS file in a static folder like /js/jsgl.min.js, but to use the following in the JSP script tag:
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jsgl.min.js"></script>
The JSP will translate the ${pageContext.request.contextPath} bit into the current context path, making the code portable (if you redeploy the webapp with a different context path, it will still work). So the HTML response received by the browser will be (again, sticking with our example above):
<script type="text/javascript" src="/SomeWebApp/js/jsgl.min.js"></script>
The browser will now resolve that relative URL to the correct target.
__
*If the original URL had a trailing slash = i.e., was http://example.com/SomeWebApp/some-resource/, the JS URL would be http://example.com/SomeWebApp/some-resource/jsgl.min.js
Static resources should be put outside the WEB-INF folder (as you would typically not allow web access to its content).
You could put the file under webapp/js/, then change your script import to:
<script type="text/javascript" src="/js/jsgl.min.js"></script>
In addition to being good practice, this is good as it is not relative to the location of the JSP file.
Files in WEB-INF are inaccessible.
You may put them under webapp and try accessing as mentioned above.

How to run the .html file in browser?

I have just wrote a javascript file which I ran the via intelliJ using a few different browsers e.g. Google Chrome. This works fine as it runs locally e.g. http://localhost://.
However I want to be able to send it to someone so they just click on the .html file (packaged in correct folder) and it appears on their browser. Is there anyway I can do this? Right now the url points locally e.g. file:///Users/**/project/file.html.
Use a relative path. If your HTML file is in the same folder as the JS file, this means simply including it like so:
<script src="jsfile.js"></script>
If it's in a subdirectory, include all the folders necessary to get there:
<script src="subdirectory1/subdirectory2/jsfile.js"></script>
If it's up a directory, use the .. path:
<script src="../anotherfolder/jsfile.js"></script>
Or just include it in the HTML page itself:
<script>
// your code here
</script>

jQuery file not being retrieved from server

For some reason my html file's request for my jquery.js file fails, however when I enter that exact url into a new tab in the browser, I get the exact jquery.js file I am trying to get when the website loads.
My code is as such:
<script src="js/jquery.js"></script>
and my website is here. If you append jquery.js to the root, you will see the exact file.
Can anyone explain why the file isn't properly retrieved when the website loads?
Any help is greatly appreciated.
At the beginning of your HTML file is this:
<!DOCTYPE html>
<html manifest="appcache.appcache">
The appcache.appcache refers to the file appcache.appcache whose content is:
CACHE MANIFEST
# V1.65 1-18-2013 10:15 PM
# cache
index.html
about.html
services.html
contact.html
css/signika.css
css/mq.css
css/index.css
css/about.css
css/services.css
css/contact.css
assets/signika_400.woff
assets/signika_600.woff
js/html5.js
js/index.js
js/mq.js
js/services.js
mail.php
images/chicken.png
images/salad.png
images/soup.png
images/steak.png
images/wontons.png
As you can see jQuery.js is not there. I suggest you to add js/jQuery.js into a new line and try again.
I figured this out by:
Running the Fiddler software side by side with Chrome (on Windows).
Loading your website in Chrome with Developer Tools (Ctrl+Shift+I on Windows, Command ⌘+Option ⌥+I on Mac), then go to the Network tab.
Then I see that Chrome loads appcache.appcache from the second time onwards and there's an error when loading jQuery.js.
The manifest attribute refers to the HTML5 cache manifest file.
Tutorial:
http://www.html5rocks.com/en/tutorials/appcache/beginner/
More references:
http://caniuse.com/#search=manifest (browser compatibility)
http://en.wikipedia.org/wiki/Cache_manifest_in_HTML5 (wiki)
https://www.google.com/search?q=html5+manifest
It's probable that the HTML file containing the script header in question is not in the "root" but perhaps in the same JS folder or somewhere else.
So technically this should work:
<script src="/js/jquery.js"></script>
Just keep in mind that this path is relative.

Edit external JavaScript file after breakpoint is hit

In the VS2010 IDE when a breakpoint (or an error) is hit, it opens a read-only [dynamic] version of the external JavaScript file I referenced. My workflow would be vastly improved if I could immediately edit this file, and refresh the browser. That is as opposed to digging up the original JS file opening it, finding the correct line and editing there.
I only know that this is possible because I was able to do this on my old work computer configuration, but for the life of me I can't duplicate it at home.
Has anyone made this work? Perhaps an extension? or maybe it has to with the way the files are referenced, or my basehref tag, or url rewriting.
This happens when the base href specifies a domain other than localhost. My issue was that to enable a local environment for Facebook JS, I need my domain in the url. So I set up my host file to remap localhost.mydomain.com to localhost.
When the Visual Studio IDE encounters a file reference which is something other than localhost, it does not attempt to grab the local file since it assumes (correctly in most cases) that it is being served from another site. In these cases it loads a file as [dynamic] and readonly.
Here is the test case:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://localhost.mydomain.com/virtual-directory/" />
<script type="text/javascript" src="test.js"></script>
</head>
<body>
</html>
Any breakpoint within test.js will result in opening a readonly dynamic file.
how are you referencing your files? whenever a script block is written inside the html or is dynamically inserted the debugger will open the instance of the page where the code stops. If you reference the script using tags vs should open the original script file (at least that's what it does on my machine). could you upload an example of your current structure?

Categories

Resources