I am new to JS and I've tried many different ways to try and get this to work but to no avail. (I looked at the other posts but their solution didnt work for me)
My project folder is organized as follows:
+-+ project
+-- css
+-+ js
| +-- index_js.js
+-- index.html
I have got it to work with the index_js.js file outside of the js folder by assigning the script tag src to src="index_js.js". But when I try to assign it to src="../js/index_js.js" while it is in the js folder it doesn't work and won't give me an alert. I have also tried to assign src="/js/index_js.js" but it still does not work.
My index.html is:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript" src="../js/index_js.js"></script>
</body>
</html>
My index_js.js is:
alert("inside of the js folder");
That needs to be:
<script type="text/javascript" src="js/index_js.js"></script>
Or even:
<script type="text/javascript" src="./js/index_js.js"></script>
By specifying ../js, you're searching for a js directory which is on the same level as your project directory.
Your index.html should be like this :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript" src="js/index_js.js"></script>
</body>
</html>
Using
src="../js/index_js.js"
in the code will look for the "index_js.js" the parent folder of "project".
../ refers to up one level.
In the given code, you are at /project/index.html
When you do ../ you are moving to the parent folder i.e /root/project/
Now, when you give
src="../js/index_js.js"
it looks for the js file at:
/root/js/index_js.js
The correct code would be:
<body>
<script type="text/javascript" src="./js/index_js.js"></script>
</body>
or
<body>
<script type="text/javascript" src="js/index_js.js"></script>
</body>
By expressing "../" you will quit your current project folder an move to the root folder. Your script then tries to find the subfolder "js" and the file in a directory that does not exist. Your correct code would be:
<script type="text/javascript" src="/js/index_js.js"></script>
Since, you have the js folder on the same directory as your index.html file, you don't need to use any backslashes.
<script type="text/javascript" src="js/index_js.js"></script>
Now make sure;
You have js folder and index.html file both in the same
directory.
The folder name js is as you have mentioned.
The file name is correctly placed i.e index_js.js and it is inside the js folder.
Related
I'm using Aurelia CLI (v1.2.0) with webpack (v4.41.0). Running the command au build --env prod works well and all necessary files are placed in a dist folder relative to the project's root as expected. However, a problem I'm seeing is the following in the generated .html file:
...
<body aurelia-app="main">
<script type="text/javascript" src="/runtime~app.66066bc9a3f8c86e3d5a.bundle.js"></script>
<script type="text/javascript" src="/vendor.bluebird~01be3b92.3dbcbc269195ad05c865.chunk.js"></script>
<script type="text/javascript" src="/vendor.setimmediate~a1c951f6.42ef81a6d814b4bc894f.chunk.js"></script>
<script type="text/javascript" src="/vendor.process~16c59945.ef28f3259f949d41518b.chunk.js"></script>
<script type="text/javascript" src="/vendor.moment~399b027d.9b9b0283b72b7237fb27.chunk.js"></script>
...
You see the src="/file_name_here" part in these script tags is not going to work as it's looking for files at the root of the main hard disk, not relative to the HTML file. If I add src="../file_name_here" then all works fine. Am I missing a webpack configuration somewhere?
Thanks for the assistance.
in your project, you have a webpack.config.js file.
there you should find the baseUrl property. change it to whatever suits you best.
for example: I want the bundle files to be in the same directory of the index.html file, regardless of their respective path on the server. (they will not always be in the root of my server).
so I just change the default '/' to '' (empty string.)
After building a project with Angular CLI, I keep getting 404:Cannot GET with my inline, styles bundle.js, and main bundle.js.
At the bottom of my index.html:
<script type="text/javascript" src="inline.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
The files are in the same folder as index.html, with all of the angular 2 goodies. When I copy the text into the corresponding script tags, it works just fine.
Thanks #Johan Blomgren for the answer. Adding this fixed it:
<base href="index.html">
There's an app I have been building, and as it grows, so does the <script> tag grows in the index.html
index.html
<html>
<head></head>
<body>
<script src="angular.js"></script>
<script src="a.js"></script>
<script src="b.js"></script>
...
</body>
</html>
Is it possible to include all of these <script> into an external html and then load it into index.html to use it? Like so.
index.html
<html>
<head></head>
<body>
<script src="angular.js"></script>
[**Include jsInclude.html here**]
</body>
</html>
jsIncude.html
<script src="a.js"></script>
<script src="b.js"></script>
...
If so, what are some of the proper methods of performing such a task?
I have read online that I can use Grunt or RequireJS to load JS files dynamically.
However, I wish to avoid lazy loading, I want to load all of the JS files at once on startup.
Will using RequireJS or Grunt able to achieve this? Or is there another way to achieve this?
You could use webpack or browserify to compile all of your JS files into 1 JS file.
https://webpack.github.io/
http://browserify.org/
Grunt is just a task runner, it won't be able to do this task on its own. You can set up a task in Grunt to run browserify/webpack
Yes, it should be that way only. Load app.js first and then follow other files that include controllers, factories and so on in your HTML (index.html)
I'm just starting out with typescript. I wanted to try working with this mankala example from within Visual Studio. Eventually I got it working but I had to include all of the .js files that were generated from .ts files in my default.htm file. The .htm file in the example only included one file - the one that contained the entry point. I'm guessing that there's something set wrong in my configuration that I'm compensating for by the multiple .js includes. Can anyone tell me what I'm doing wrong?
More details follow...
Here's what the original .htm file looked like:
<!DOCTYPE html>
<html>
<head>
<title>Mankala</title>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<script type="text/javascript" src="game.js"></script>
<link rel="stylesheet" type="text/css" href="play.css"/>
</head>
<body id="bod" onload="Mankala.testBrowser()">
<div class="hscore">Human: <span id="humscore">0</span></div>
<div class="cscore">Computer: <span id="compscore">0</span></div>
</body>
</html>
And this is what my modified .htm file looked like:
<!DOCTYPE html>
<html>
<head>
<title>Mankala</title>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript" src="Driver.js"></script>
<script type="text/javascript" src="Features.js"></script>
<script type="text/javascript" src="Game.js"></script>
<script type="text/javascript" src="geometry.js"></script>
<script type="text/javascript" src="Position.js"></script>
<link rel="stylesheet" type="text/css" href="play.css"/>
</head>
<body id="bod" onload="Mankala.testBrowser()">
<div class="hscore">Human: <span id="humscore">0</span></div>
<div class="cscore">Computer: <span id="compscore">0</span></div>
</body>
</html>
To create the project I created a default ( not quite empty ) typescript project, deleted the automatically created app.ts file from that project and then added 6 new .ts files with the same names as the .ts files in the example. Then I copied the .ts files from the example over the new .ts files that were created by VS. I replaced the automatically generated app.css file with the play.css file from the example and replaced the contents of the automatically generated default.htm file with the contents of the play.htm from the sample. This didn't run but after I added the additional .js files to default.htm it did.
I'm using Visual Studio 2012 Express for the Web and the typescript 0.8.3.1 VS extension. I'm using the Chrome browser on windows7.
The difference here is how the compiler got invoked.
When you build the Mankala sample, assuming you read the README, you ran
tsc Driver.ts -out game.js
The -out flag tells the compiler to concatenate the compilation into one big .js file. However, the default behavior in Visual Studio projects is to build side-by-side, i.e. base.ts creates base.js, Features.ts creates Features.js, etc.
You can fix your project file by adding a <TypeScriptOutFile>game.js</TypeScriptOutFile> element to the project in the same <PropertyGroup> as the other TypeScript settings (near line 57 in a default new project). Be sure to add to both the Debug and Release PropertyGroup elements if you want the same behavior in both compilation settings, or create a new non-conditional PropertyGroup.
I'm having some trouble with the following code within my Index.html file:
<SCRIPT LANGUAGE="JavaScript" SRC="clock.js"></SCRIPT>
This works when my Index.html file is in the same folder as clock.js. Both Index.html and clock.js are in my root folder.
But when my index.html is in these different directories clock.js does not load:
/products/index.html
/products/details/index.html
What can I put as the 'SRC' so that it will always look for clock.js in the root folder?
Try:
<script src="/clock.js"></script>
Note the forward slash.
Use an relative path to the root of your site, for example:
If clock.js is on http://domain.com/javascript/clock.js
Include :
<script language="JavaScript" src="/javascript/clock.js"></script>
If it's on your domain root directory:
<script language="JavaScript" src="/clock.js"></script>
The common practice is to put scripts in a discrete folder, typically at the root of the site. So, if clock.js lived here:
/js/clock.js
then you could add this code to the top of any page in your site and it would just work:
<script src="/js/clock.js" type="text/javascript"></script>
This works:
<script src="/clock.js" type="text/javascript"></script>
The leading slash means the root directory of your site. Strictly speaking, language="Javascript" has been deprecated by type="text/javascript".
Capitalization of tags and attributes is also widely discouraged.
Piece of cake!
<SCRIPT LANGUAGE="JavaScript" SRC="/clock.js"></SCRIPT>
src="/clock.js"
be careful it's root of the domain.
P.S. and please use lowercase for attribute names.
If you have
<base href="/" />
It's will not load file right. Just delete it.
As you haven't specified, I don't know if you are working with flask (Python), but if you are, you have to put the JavaScript file in a directory called static. It should look something like this:
/ProjectName
/static
clock.js
/templates
index.html
main.py
And then refer to the js file as following:
<script src="/static/clock.js"></script>
As your clock.js is in the root, put your code as this to call your javascript in the index.html found in the folders you mentioned.
<SCRIPT LANGUAGE="JavaScript" SRC="../clock.js"></SCRIPT>
This will call the clock.js which you put in the root of your web site.