Why won't my .html file connect to .js file? - javascript

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.

Related

How can I include a .js script in Oracle Apex?

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#

JavaFX WebView does not load upper folder script in jar

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?

How to load a JS file in my HTML doc?

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.

HTML, calling JS (API)

I have few issues with calling chessboard.js (http://chessboardjs.com). I downloaded API and made new HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Super chess/title>
<meta charset="UTF-8"/>
<script src=":\path-to-js-file\jschessboard-0.3.0.js"></script>
</head>
<body bgcolor="lightgrey">
<div id="board" style="width: 400px"></div>
<script>
var board = new ChessBoard('board', 'start');
</script>
</body>
</html>
I tried to draw chessboard. What I'm doing wrong?
Thanks.
From what I can tell based on your code and the docs, you're missing two things:
1) Your title tag isn't closed on line 4 of your html file
2) After you've fixed that problem you'll get an error saying "$ isn't defined" in the chessboard.js file. I teased out that JQuery is a dependency for the chessboard.js file. If you include JQuery in your html (either download the file like you've done with chessboard.js or use a CDN).
You should be good after that!!
Update:
Tried almost everything, here is my local directory:
https://www.dropbox.com/sh/3unwsb8esh9100o/AADHEB8sojQy1PnpLyC8fmSLa?dl=0
I also downloaded jQuery to my local directory, but page still dosen't load. Dev tools in Chrome doesn't import anything.
And also tried with xampp (Apache server), because sometimes code doesn't work if you calling it from local directory.

node.js to serve web page with access to resources on node.js server

I have an html page which references a number of local script files, and in turn those script files reference other local resources. By local I mean local to the html file.
Is it possible to serve such a web page using a node.js server approach? So far as I've been able to work out so far, the node.js server can return html content, but when that is displayed in the user's browser, I can't easily see how it would be able to reference the various scripts, because the html isn't being served from a normal folder on the server, with relative access to the folders and resources around it.
Is there any way of doing this, or is it mad to even contemplate such an approach? Better just to stick the html and related resources on a standard server and be done with it?
EDIT: I should explain that the motivation for serving the html from node.js is that I'm already serving images from the node.js server, where those images are generated using the same scripts that the html will be using. So there are two ways for the user to get the same content: as a png file or as a web page, and in both methods the work is done by the same core scripts... one has an html front end and the other has a node.js front end. So it would be nice to be able to keep all the code in a single location, rather than having to duplicate stuff and have it in two places, and have to remember to update the code in the secondary location when I update it in the primary location.
EDIT to add folder structure to help debug this (see comments below):
mypage.html
myLibFile.js
/lib/*.js (various js resources including jquery)
/lib/modules/*.js (various js resources)
/lib/fonts/* (various resources)
/themes/*.js (various js resources)
In mypage.html I have:
<script type="text/javascript" src="/lib/jquery.1.9.1.min.js"></script>
<script type="text/javascript" src="/lib/libFile.js"></script>
<script type="text/javascript" src="/lib/modules/modFile.js"></script>
<link href="/lib/fonts/awesomefont.css" rel="stylesheet">
<script type="text/javascript" src="/myLibFile.js"></script>
<script type="text/javascript">
$(function () { // On DOM ready...
// ... code ...
});
</script>
and in my node.js I have attempted to set up express as follows:
self.app.use(express.static(__dirname));
self.app.use('/lib', express.static(__dirname + '/lib'));
self.app.use('/themes', express.static(__dirname + '/themes'));
Of course your relative paths will work when using your own custom built nodejs server, which can serve files, .html .css .js and such.
I assume you have some sort of public folder from where you serve your assets. If you don't use any special routing magic, and just reffer to structure of your public folder, then relative paths in your HTML, will work.
<link rel="stylesheet" href="styles/main.css">
Code above could load something like: public/styles/main.css

Categories