This question already has answers here:
What does "./" (dot slash) refer to in terms of an HTML file path location?
(12 answers)
Closed 3 years ago.
Given the following project structure:
/root
/static
script.js
page.html
This will 'import' script.js, into the HTML file:
<html>
<head>
<script src="/static/script.js"></script>
</head>
<body>
...
</body>
</html>
this will, as well:
<html>
<head>
<script src="./static/script.js"></script>
</head>
<body>
...
</body>
</html>
I am wondering:
Is one way preferred over the other?
Are there any cases, when / and ./, in she src attribute of <script> will behave differently?
Yes, They both are different.
You are not able to see as the index.html is already in your root directory.
If there is a .html file inside a directory. Then you can see the difference.
./ This gives a relative path from the file you are accessing it
/ This gives an absolute path from the root of your directory
If this is the directory structure
/root
/static
script.js
/page
index.html
Then, you won't be able to use ./ as it won't find script folder in the page folder
So, if you have a complex directory structure use ./ i.e. relative path, and if you have a plain structure / i.e. absolute path would be good. For better practice, the relative path is preferred over an absolute path.
Hope, this answered your question.
Now, I am not super experienced in JavaScript, but I'll let you know what I know.
[...]
<script src="./static/script.js"></script>
[...]
<!--This would reference files in the current folder (where the webpage itself is stored)-->
[...]
<script src="/static/script.js"></script>
[...]
<!--This would reference an absolute path within your webserver, and cannot change dynamically based on from where you load it.-->
Generally speaking, I'd go for ./ when you load it from a file in your current folder (and/or server), whilst doing / seems like an external reference to me, which is also not dynamic. If you happen to move the file (if it was in the same directory as your page), I think JavaScript would also reference the new file instead of complaining about the old one.
I cannot guarantee that any of the info above is correct as I am not a really good JS-Developer, but at least this should help you figure out the syntax a little more.
./ is a relative path or the current directory where your asset will be served.
/ is an absolute path or the root path from where your asset will be served.
./ is a relative path linking to the current directory.
/ is an absolute path linking to the root directory.
You can find more information here.
Related
My Javascript wont activate on dreamweaver. I attached it and everything but when i try to call it with script tags it does not appear on my live preview. i have it attached by this code
<script src="file:///C:/Users/Matthew/Desktop/Untitled-2.js" type="text/script"></script>
If someone could please help that would be awesome! :D
Live mode runs Your code in some virtual webserver and it cannot get local js file. Since browser may block resource from sharing (CORS). Think about putting js file to relative to html file and defining relative url to js file. Create js folder near to html file and put js file there and in Your html file define src="js/Untitled-2.js" – num8er 12 mins ago
Thanks Num8er
In my opinion, it is best practice to keep all files relative to the project. This means setting up a project folder and keeping files organised in sub-folders.
Consider this project structure:
Project folder
CSS folder
style.css
Javascript folder
script.js
Images folder
image.jpg
index.html
The sub-folders are directly children of the project folder, and inside each folder is the corresponding files.
The html file is also a direct child of the project folder (it's not in any other folder).
This means all the related files are relative to the html file.
So in your html file, you can link up these files easier.
<link href="CSS/style.css" rel="stylesheet">
<script src="Javascript/script.js" type="text/javascript"></script>
<img src="Images/image.jpg">
As you can see all the files are linked without a full path, this is called relative linking. Absolute linking is the opposite in which you specify the full path, such like you are doing at the moment:
<script src="file:///C:/Users/Matthew/Desktop/Untitled-2.js" type="text/script"></script>
This is good in certain places, however you should always try to aim for relative linking. If you follow this, you shouldn't have any more problems.
So Im trying to link a local copy of bootstrap (It works with a CDN). I have bootstrap.css installed in the same directory as index.ejs and yet I keep getting these 404 errors.
So the file path for bootstrap.css is /home/daniel/scheduler/doc_display/app/bootstrap.css
and index is: /home/daniel/scheduler/doc_display/app/index.ejs
Any help would be much apreciated
Your browser is going to look for the file relative to the location of the page it loads, so you need to make sure your path is correct.
Right now it's looking for it in the same folder as the index, which it looks like isn't where it's located.
I put the bootstrap.css file inside of my dist directory then included the new path inside the link tag. For some reason webpack seems to find paths when they are in the dist directory
I am facing difficulty in understanding relative path concept, I have seen a part of code written as
../../abc/file/images/picutre/down.gif
how the relative path is computed
A relative path is a path relative to the working directory. In other words the starting point to look for files is from the working directory.
The "../" in a relative path means to go up one directory.
So lets say you're referencing the relative path ../../abc/file/images/picutre/down.gif from an index.html page in the following structure :
http://someexampleurl.com/dir1/dir2/index.html
Your working directory when working from index.html is /dir2 so taking into account that you're going up two levels, the browser expects the file to be at:
http://someexampleurl.com/abc/file/images/picutre/down.gif
how the relative path is computed
Basically a relative path is a "map" from the directory that you are located to the file you need to include. Therefore, relative path is computed based on where you want to go.
For example you have a structure
/ (document root)
|--home.php
|--t.php
|--common
|--header.php
|--footer.php
|--support
|--index1.php
|--privacy
| |--index2.php
From home.php you need to include header and footer. Therefore your home code will look like
<?php
include("common/header.php"); // go one folder down (common) and grab the file header.php
include("common/footer.php"); // go one folder down (common) and grab the file footer.php
Now let say you are in index1.php in support and you need header.php and footer.php. You code will look like
<?php
include("../common/header.php"); // go one folder up (common) and grab the file header.php
include("../common/footer.php"); // go one folder up (common) and grab the file footer.php
Think folder inside folder as levels (level1, level2, etc)
Note: Be careful with relative paths something they are a pain.
it says go back up two level (parent directory) "../../" from current location.
So if we are on https://example.com/my/path/here and it loaded a file ../../abc/file/images/picutre/down.gif then we would go up 2 directories because of the 2 ../'s to https://example.com/my. Then we would go down to /abc/file/images/picutre/down.gif. So the final destination would be https://example.com/my/abc/file/images/picutre/down.gif
down.gif is present in the same directory
/ starts form root directory
../ one directory back from current directory
../../ two directory back from current directory
I'm sorry for simple question. I need determinate jquery in my project, actually when I used to insert direct link to <script>. It works:
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript">
But when I use relative path it doesn't work.
<script src="js/jquery-1.11.1.js" type="text/javascript" >
this is my directory:
Your main file and jquery file are in different folders.
Main file in scripts/ folder and jquery file in js/ folder.
Just change path to:
../js/jquery-1.11.1.js
../ directory means scripts/ folder.
So your code will be:
<script src="../js/jquery-1.11.1.js" type="text/javascript" >
Remember, file names in folders and in your code must be the same.
Hope it'll help :)
Your js folder should be in your public folder.
In your layout try this:
<?php echo $this->headScript()->appendFile($this->baseUrl().'/js/jquery-1.11.1.min.js'); ?>
Unless you have a compelling reason to use relative paths, I suggest using an absolute path. It will not break if your page moves to a new location:
<script src="/scripts/js/jquery-1.11.1.min.js" type="text/javascript" >
I have a website where I am referencing the CSS/JS in the root directory. I want to create a sub-section of the website under it's own directory. The problem is that I am referencing the
CSS/JS in the main directory and I want to know what the best way to reference the CSS/JS would be for the subdirectory.
If I just use the http address for the files it works, but I think there could be a better way to go about this. Does anyone have any opinion on the matter?
You can use ../ to specify the parent directory when using relative paths. So for example, if your file structure is something like this:
root
index.html
style.css
javascript.js
subdirectory
subpage.html
Then in your subpage.html file, use:
<link rel="stylesheet" href="../style.css">
<script src="../javascript.js"></script>