I have a site hosted by GitHub Pages that uses Jekyll, and I've been successfully using an internally defined script in each layout that will generate a random tagline from an array of them.
I'm trying to move this script to an external tagline.js, but so far I've been unsuccessful.
Here's the basic tagline generating script, in case there's something in the code causing this (which I doubt, honestly, due to its simplicity; but it's always a possibility):
var tags = [ 'tag1', 'tag2', 'tag3' ];
function getTag() {
return tags[Math.floor(Math.random() * tags.length)];
}
$(document).ready(function() {
$("#tagline").text(getTag());
});
Like I said, it works fine when it's internal, but it doesn't when I try linking to external. I'm pretty sure it's just a case of where I'm pointing the <script> to: the HTML file containing the <script> is in _layouts/default.html, but the script is in scripts/tagline.js:
<script type="text/javascript" href="../scripts/tagline.js"></script>
The attribute you want to use for a script call is src instead of href. For example:
<script type="text/javascript" src="../scripts/tagline.js"></script>
I would also highly recommend using paths from the site root (aka docroot) instead of relative to the file. That way you can use the same call in multiple places and it will always hit the correct location. To use a docroot relative URL, you start the path with a /.
Assuming your script is located at http://example.com/scripts/tagline.js, the call you would make is:
<script type="text/javascript" src="/scripts/tagline.js"></script>
Without using the docroot, you will constantly have to adjust the path depending on where the HTML file calling the script is located in the tree. If all the files are in the same place, that's not a big deal, but it's a good habit to get into to avoid issues down the road.
Related
I see a lot of script adding Javascript to their webpages in different ways and am trying to figure out the correct way to do it. For example, in the header of one of the php scripts I use it has this:
<script type="text/javascript" src="/javascriptfile.js"></script>
<script type="text/javascript">
var stuff = "file.php";
var ip_add = '32.42.42.442';
</script>
What I don't understand is why would you ever put the full javascript code in the header instead of just including it within a file. For example, why not move the javascript mentioned about into it's own file and just just use this in your header:
<script type="text/javascript" src="/javascriptfile.js"></script>
<script type="text/javascript" src="/javascriptfile2.js"></script>
Are there certain times you should have the full javascript displayed in the page source instead of just linking to it in its own javascript file?
What I don't understand is why would you ever put the full javascript code in the header instead of just including it within a file.
It costs you caching. This is a long term penalty. The impact of that depends on how often the script will be used by the browser
It saves you an HTTP request. This is a short term bonus. It saves you a bit of time when loading the script in the first place.
This has nothing to do with PHP though. It applies to any HTML document.
Some of this is "legacy". At one point, you HAD to put <script> tags in the <head> portion of your markup, and so this is where most examples put it.
If you add a src reference to an external file, you can reuse the script as a resource on other pages that call for this. If you are using the same script all over the place, put it in a "js" directory and the browser won't fetch a new copy each time. This helps with bandwidth.
If, however, you add the raw script to your page, the whole page (minus images and other "embedded" content) will arrive in one thread. This helps with load times.
Unless you're expecting 10,000+ pageviews in a short space of time, I wouldn't worry too much either way.
Oh, and one other thing to consider: http://developer.yahoo.com/performance/rules.html#js_bottom -- why you should put your scripts at the bottom of your document.
I totally agree with #Quentin. Additionally I would suggest putting your scripts in seperate .js files and include them - for reasons of structuring - not only in large projects.
One thing that could lead you to put the JS code into a .php file however could be if you need to generate code using PHP or if you want to use information that is e.g. pulled from a database directly like this:
<?php
$foo = getSomeInformation();
?>
<script type="text/javascript">
var someVar = <?=$foo?>;
</script>
I have moved an large piece of JS code form my header file to it's own .js file.
I'm trying to include it with:
<script src="includes/js/test.js" type="text/javascript"></script>
The JS code is not loaded, what could be wrong?
One possible reason is that the path is wrong. Remember that the path as you've written it will be interpreted relative to the current URL. So if this code appears on a page that is accessed at
http://www.example.com/example1/index.html
then the browser will request the javascript file from
http://www.example.com/example1/includes/js/test.js
which may not be what you want. A better approach may be to use a link that is based on the root: that is, if you change it to
<script src="/includes/js/test.js" type="text/javascript"></script>
then it will always look in
http://www.example.com/includes/js/test.js
no matter where the link appears.
If I had to guess based on the information you've provided, I'd say there's probably a syntax error in the external .js file or the page isn't finding the file from the URL provided. That's usually the problem I experience when I move large pieces of code from one file to another.
I have an issue with relative paths whereby when the web app is running off subdirectory of the domain, the paths are not correct. e.g. http://www.example.com/webapp/
If I use #Url.Content("~/path/to/action") on the page it is fine. I can even embed the #Url.Content("") inside the javascript script. I want to clean up the page I wanted to put the javascript inside a js file and reference that. Now that the #Url.Content is being called inside the javascript file, it doesn't seem to work (probably for obvious reasons). How can I get around this issue?
I had a look at the <base /> but that doesn't seem to work.
Now that you moved everything into a separate js file, the file is being served as static content, and the Razor syntax is not being parsed.
If you need relative paths inside of your js which might change, then you should include a script in each page which sets a path var, and use #Url.Content(...) in this script, e.g.,
<script type="text/javascript">
pathToAction = "#Url.Content(...)";
</script>
Then, declare the pathToAction var in your js file, and use it as needed.
I have a project I'm working on called Natalie.
What it does, (twitter.com is a good example if you don't understand my explanation) is it uses the hash tag, to load a page via XHR, and then inserts it into the page, so you can have a generic look that doesn't change between pages, that doesn't need PHP or the like.
It has several configuration properties, the main ones being:
A selector to use to find the place you would like to insert the loaded page.
A folder path to use at the document root. (Think Apache configuration)
The page to load if there isn't a hash tag.
I currently have them in an object called Natalie.config but I would like to do something like <script src="Natalie.js" data-natalie-docroot="/Folder"></script>
Is there any way to tell which tag the script is running from, or do you have to search all script tags for these attributes?
I would much rather prevent something like this from happening if possible:
<script src="Natalie.js"></script>
<script data-natalie-docroot="/Folder"></script>
I'd simply put data-natalie-docroot="/Folder" on the <body> tag. The reason being that it is not directly associated to the script itself. Your approach also wouldn't work if someone wanted to load your script using a dynamic script loader.
I have created a string builder JavaScript object and I'm using it with many different .js files in my project.
Can I create this class in a separate .js file and call it from all the other scripts that instansiate it, just like a C# class file?
Is this possible, or do I continue copying and pasting it into the bottom of every .js file that uses it?
Yes, this should not be a problem. Just include the .js files in the correct order in your html pages.
If you include the file in your main HTML page with your other js, you can then use the "class" as you wish:
<script src="js1.js" type="text/javascript"></script>
<script src="js2.js" type="text/javascript"></script>
In the above example, you can now instantiate a new instance of an object from js1.js with the code in js2.js. To do this with pure javascript, you would have to add the script tag to the DOM, or use AJAX to fetch the script file and eval() it.
// Create a <script> element
var scriptEl = document.createElement("script");
scriptEl.src = "js2.js";
scriptEl.type = "text/javascript";
// Append it to the <head>
document.getElementsByTagName("head")[0].appendChild(scriptEl);
To be perfectly correct, it's not the order of inclusion that matter, but rather the order of executing code. In most cases, Andy's and Segfault's instructions are just fine, but sometimes including the class file before its consumers isn't sufficient. For example, if you use ExtJS and you happen to define your class inside an onReady handler like this:
Ext.onReady(function() {
myClass = ...
}.bind(this));
then it won't get executed by the time your second src file is included into the page and executed.
I know, the example is a bit far-fetched :) but just make sure that your code is executed in the right order, not just included in the right order.
I came across this question and I wanted to add something (which probably wasn't there a few years ago).
Even thought you can add every single script to your "index.html" it's not a very beautiful practice (imho). Especially if you consider that you may want to write a extension (~ framework). You don't want to annoy the user with a bunch of script tags he has to add to his code. What you want is a single line like this:
<script src="yourFramework" (...) />
However, with the use of RequireJS you are able to achieve this. You've the freedom to separate your code and "your user" still don't have to add a novel to his "script section".