I'm using codecademy to teach myself to code and am trying to load a JS file in an HTML doc. Obviously I cannot find info in google searches to help me understand what I'm doing wrong. This is my current HTML to have the JS file load. Can anyone help me understand what I'm doing wrong so I can have the .js file run when this the HTML file loads? According to the standards at codecademy, the JS file itself is written properly.
<body>
<h4 id="header">...Games...</h4>
<h2 id="list">pick from our unique selection of brand new games...</h2>
<script src="Cards.js"></script>
</body>
That should load fine, as along as your index.html and Cards.js files are in the same folder. If you put your Cards.js file in a /js/ folder, you will need to add /js/Cards.js to your path.
As a side note, I recommend downloading Firefox and the Web Developer and Firebug addons. It will show you if your files are loading and if they're generating any errors, and where the errors are located in the file.
Your script tag is supposed to be in the part of your html document. Make shure the file.js is in the same folder as your file.html or include the folder in the src-attribute as mentioned above.
Your code should loke like this, if you want your script to affect the whole page:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script type="text/javascript" src="file.js"></script>
</head>
<body>
#Your page tags
</body>
</html>
Hope this solved your problem! :-)
The html text you posted above should have a name (index.html or games.html) make sure the file type is .html
Make a folder on your computer, give it a name and put your saved html file in that folder. That folder is now your root or directory folder.
Add the javascript file "Cards.js" to the folder next to your html file.
In your text editor open those two files (index.html, Cards.js).
Run the html file in a browser, the "Cards.js" should load. Good luck, hope this helps.
Related
I am learning JS basics and trying to separate my js code from html file.
Looks like IDEA detects .js file correctly, but after launching - alert doesn't pop up.
If alert() is inside the script tag (without separate .js file) - everything works fine.
This is an educational project based on Java and TomCat server, so maybe the problem is there.
Can someone help?
My HTML file:
<!doctype html>
<html lang="en">
<head>
<title>RPG</title>
<link rel="stylesheet" href="/css/my.css">
</head>
<body>
<h1>RPG admin panel</h1>
<script src="app.js"> </script>
</body>
</html>
app.js file:
alert(1);
Screenshot of project hierarchy:
hierarcgy
Idea file detection:
file detected
UPD:
Try 1
differnet source
UPD 2
Found an error. Still no solution.
error msg
detailed error
I would like to make an input mask with javascript in Oracle Apex a bit prettier. How can I do that?
Is there any way I can upload and embed a .js file?
If so, how do you do it?
Can I style whole pages with js and then upload it?
I’m confused.
Thank you
Step 1 open Shared Components and upload your .js script into static application files
Step 2 Upload the js script into Static Application Files and copy the reference, this reference works exactly the same as an URL
Step 3 In shared components open User Interface Attributes
Step 4 Paste it into Javascript / File URLS
Your script .js will be available in all your app, also you can add .css files in Cascading Style Sheets option
You can upload files to use as application or workspace resources, but for most static files (images, js libraries, etc.) you will get much faster response if you serve them from a separate web server and just put the links in your APEX code. For example, if you are using Apache HTTP or nginx as a reverse proxy for APEX you can serve them from there.
Select a page.
Click Edit Attributes.
Scroll down to HTML Header.
Enter code into HTML Header and click Apply Changes.
For example, adding the following would test a function accessible from anywhere on the current page.
<script type="text/javascript">
function test(){
window.alert('This is a test.');
}
</script>
In Oracle Application Express you can reference a .js file in the page template. This approach makes all the JavaScript in that file accessible to the application. This is the most efficient approach since a .js file loads on the first page view of your application and is then cached by the browser.
The following demonstrates how to include a .js file in the header section of a page template. Note the line script src= that appears in bold.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>#TITLE#</title>
#HEAD#
<script src="http://myserver.myport/my_images/custom.js" type="text/javascript"></script>
</head>
<body #ONLOAD#>#FORM_OPEN#
I want to connect my .html to .js. I'm trying to run this simple program but it's not working. Below is the screenshot of my file path and files I'm working with.
Here's map.html:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
<script type="javascript" src="map.js"></script>
</html>
Here's map.js:
document.write("testing");
The problem is below. How can I render the .js file along with the .html file?
Here's views.py:
def map(request):
return render(request, 'personal/map.html')
A common CMS convention is to save JavaScript files in a static folder.
You save anything that you don't want your template engine messing with there: images, javascript, css, etc.
It looks like you may need to save map.js at this path:
mysite/personal/static/personal/js/map.js
After that, you'll need to update you script link in your HTML to something like:
<script src="static/js/map.js">
The src path here isn't relative to where you store the file on your computer, but to the URI that your web server associates with it.
Depending on how you've set things up, you'll need some portion of the new path.
Django has a few ways of linking to static resources, but I'm not familiar enough with the platform to tell you which option you should use.
Im trying to create code editor based on JavaFX WebView. I'm loading jquery to my .html file loaded by WebView like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Code editor</title>
<link type="text/css" rel="stylesheet" href="styles.css"/>
<script type="text/javascript" src="../libs/jquery-3.1.1.js"></script>
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<div id="content">
Loading...
</div>
</body>
</html>
So, this file is loaded to WebView, but jquery is not loaded! script.js loaded but jquery-3.1.1.js is not! I'm suggesting the problem lying somewhere in file system. My files is stored as jar-file resources, so my index.html path is like:
jar:file:/D:/Pe3oHaHc/YandexDisk/Projects/Mira/Mira/build/libs/Mira-0.0.1.jar!/windows/html/editor/scripts.js
I get it by this code in my scripts.js:
var scripts = document.getElementsByTagName("script");
alert(scripts[1].src);
So, scripts.js loaded, but jquery-3.1.1.js is not cause it is in upper folder! And i cannot use $ in scripts.js.
But if i put my jquery-3.1.1.js in the same folder as a index.html it loaded well. I guess its because the strange path inside jar file. Can you help me? I'm realy don't want to place jquery file into same folder to index.html.
The jar protocol does not allow for .. relative location specifiers.
A request to load a relative url from a resource loaded from a jar will use the same protocol as was used to load the original resource. In this case, because the original resource is loaded from a jar, the jar: protocol is used. You can find the definition of the jar protocol in the JarURLConnection class documentation.
You could use a different protocol to load the resources, e.g. http: or file:, in which case .. will work as those protocols understand ... To do so, you would need to extract the relevant resources from the jar file and host them on a web server or local file system. Which is probably not what you want.
A simpler solution is to not use .. in your html files, either by placing the items under a well-known root directory within the jar and using an absolute reference (e.g. /libs/jquery-3.1.1.js), or including the items in the same folder as the html or a subfolder of it (e.g. jquery-3.1.1.js or libs/jquery-3.1.1.js).
I know this is not the answer you wanted, but I don't have an exact solution to do precisely what you want.
Related question:
How to reach css and image files from the html page loaded by javafx.scene.web.WebEngine#loadContent?
I have below folder structure.
inside: webapp/WEB-INF/some.jsp i have
i have javascript file in the same webapp/WEB-INF/js/myform.js location
i referred it in some.jsp as below:
<script type="text/javascript" src="js/myform.js"></script>
But it is not finding javascript file. in viewsource i am getting below lines:
<title>Error 404 NOT_FOUND</title>
</head>
<body><h2>HTTP ERROR: 404</h2><pre>NOT_FOUND</pre>
<p>RequestURI=/js/myform.js</p><p><i><small>Powered by Jetty://</small></i></p><br/>
is my javascript link correct in jsp file?
Please correct me.
Thanks!
The WEB-INF folder is secure, meaning you can't access resources placed in it directly using a URL from the browser.
To work around it, place the JS under the webapp/js directory.
webapp/WEB-INF is not the root of your application, put your dir js in webapp rather than in webapp/WEB-INF