so id like to link a refernce to a couple js files if possible, but im not sure i could go about doing this so i can use it
<script type=text/javascript src=http://mylinkedjs></script>
and call i from my jquery.
Anyone know how this is possible?
Let me try to rephrase your question.
I want to include some JavaScript files from another server on my page, and call functions from those files in my own jQuery code. Is this possible?
That’s certainly possible. Once you’ve included a JavaScript file on your web page (like you did in the question), the global variables it creates are accessible to any other JavaScript running on that page, regardless of which server the JavaScript file was loaded from.
This is often how jQuery itself is included on pages: by linking to a copy of jQuery on a big CDN, e.g.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
See http://docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQuery
<script type="text/javascript" src="http://wherever.com/linked.js">
Related
I am new to javascript and programming in general. I have been working on a web app that solves simple algebraic equations. I am using two libraries, algebra.js and katex.js. How do I use both libraries in my script? I would like to keep this as a client-side application.
I have looked at node.js but my understanding is that node is for server-side development. I have looked at RequireJS but that doesn't seem to handle directories well. Recently I found Enderjs which seems to use npm and allow for client-side development and still make use of require().
What should I use to make a web app like this? Please let me know if there is anymore information that is needed.
The most basic way to do this is to include multiple script tags at the top of your html file. So:
<head>
<script src="path/to/library1.js"></script>
<script src="path/to/library2.js"></script>
<script src="path/to/my/javascript.js"></script>
</head>
<body>
<button onclick="myFunction()">Click me</button>
</body>
This will load more than one onto the page. The order might matter - be wary of which dependencies your chosen libraries have. For example, some will depend on jQuery, so you should load jQuery first then those that depend on it. Order is top down.
In my example, if we pretend library2 depends on library1, then the example would work. However if library1 depended on library2, it would not.
The simplest way is to include the script tags directly in your html file like so (this assumes that you have the algebra.js file in the same folder as your html file):
<script src="algebra.js"></script>
If you are loading the library from the internet you have to use the full web path in the src attribute, for example loading the jQuery library from a cdn (content distribution network):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
I have ASP.NET (4.0) web site which in turn has some JavaScript on it. As time goes I include more and more JS files into my aspx and ascx files. Usually I just add
<script type="text/javascript" src="/js/script1.js"></script>
That works fine for small add-ons, but in some cases script1 references to script2 and I need to add one more reference IN EACH PLACE where script1 is used.
Is that the proper way to include JS files? Or I would better load script2.js from script1.js (How do I include a JavaScript file in another JavaScript file?) that will guarantee it will be always included?
Could you please recommend references on the "best practice" with regards to this topic. I've googled for some, but found way too many links and really sank...
Thank you for your help!
The best way I can think of is to base your forms on a MasterPage and then reference all of your js file in the head section of your MasterPage.
Lets say my site is: example.com
I am unable to get access to edit css files and add additional files.
Lets say I install a module on exampleTWO.com...is it possible to use that site's slider for example.com?
Yes, you can link to external resources. I've seen this done most commonly with JQuery, but the same rules apply to other resources. See this link here for more info: http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/
All you need to do is rather than have something like:
<script type="text/javascript" src="/js/sliderModule.js"></script>
You include the entire external address like so:
<script src="http://exampleTWO.com/js/sliderModule.js" ></script>
As far as CSS is concerned, I believe it will work the same way. I have never actually tested this though, so someone feel free to correct me if I am wrong in that assumption. If you cannot link to external CSS files, then simply include the CSS you'd like in the HTML between <style> tags.
I'm trying to load a single javascript in pieces by calling the javascript from external separate files, and was wondering the best way to go about doing this. Specifically, this is a just a basic google maps page, and I want to organize the code a little better. I'm hoping to split the marker variables up into groups and store those groups of variables in separate files, then call those files within the main javascript header of the page. I want to restrict this code to just html and javascript to maintan its simplicity for the purpose of future updates by individuals less than knowledgeable in this area. I don't do a whole lot of coding with JavaScript so, if there already is a built-in function for this, that would be great. This is purely aesthetic, just to make the code a little cleaner. Any help or suggestions would be appreciated. Thanks.
If I understand you right, you don't want to call one JavaScript files from several another JavaScript files. You want just save some groups of variables. Well, you can save it - with a server-side database or, may be, with http://www.w3.org/TR/webstorage/ or http://www.w3.org/TR/IndexedDB/
You can add references to external files:
<html>
<head>
<script type="text/javascript" src="colorGradient.js"></script>
<script type="text/javascript" src="xpath.js"></script>
<script type="text/javascript" src="kml2.js"></script>
<style type="text/css"> ... </script>
</head>
<body>
....
</body>
</html>
You can try a "feature loading" and/or "on-demand javascript loading" framework. Since you're trying to use Google maps, I would recommend you use the Google Loader API which works very closely to what you're seeking.
for example: With a simply JS you can do the following....
<script type="text/javascript">
google.load("search", "1");
google.load("jquery", "1.4.2");
google.load("jqueryui", "1.7.2");
</script>
... and it will load the multiple files.
Splitting up you code for your development is a good idea. There for, there are a lot of frameworks to help you organize your code with the help of MVC and psudo MVC models.
Try:
http://maccman.github.com/spine/
or
http://documentcloud.github.com/backbone/
But what prevents you from having everything in one file on the production environment?
Its easier on the server requests. And you want to integrate this in your build process anyway...
But if you insist in on adding them to the DOM you can do this of course:
document.write(unescape('%3Cscript src="yourfile.js"%3E%3C/script%3E'))
this will add
<script src="yourfile.js"></script>
to your dom
If I understand your question correctly, you would like to split up a single script into multiple .js files. As far as I know, this should work fine as long as you include a tag to load each file. You may need to load the files in order (i.e. don't include a file that calls a function that has not been difeined yet).
However, be aware that splitting up your script will result in more calls to the server, which will slow down page load. In most cases, just including a few scripts won't even make a noticible difference in load time.
I am learning jQuery and have a created several plug ins.
Unfortunately due to my company's coding practices they want all javascript code to be extract out to js files. This for me poses two challenges:
Can i extract the actual $(document).ready(..) call to a js file? So far with my limited knowledge I have not figured if this at all possible. If not, I welcome any suggestions to make this cleaner and more acceptable way to include this code.
There are too many javascript includes for each asp.net page header since I may be using several plugins. Is there a way to reduce the potential costly server trips that I would need to make each time I need these files?
Any suggestions, corrections are greatly appreciated
thanks
1. Absolutely.
Just add a script reference to your html like this:
<script type='text/javascript' src='js/yourfile.js'></script>
Then just start your .js file with
jQuery(function() {
foo;
...
bar;
});
or any other shortcut ways of starting the jQuery code block.
2. You should run your scripts through something like Minify before sending them off to the user. This will combine the files and pack them in nicely, so that they take up less space.
Using $(document).ready () in an external javascript file is fine - it will work exactly the same :) In fact - not only will it work, but it is good practice as it helps to seperate the content (HTML) from the behaviour (Javascript).
In response to your section question - you can combine all of your plugins into a single javascript file and link to that one inside the <head>. You could also try minifying the scripts, although this is normally a bit overkill until the site goes live.
When I use jQuery, I normally use this kind of structure:
<html>
<head>
<!-- html tags such as title, link, meta etc -->
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/plugin.js"></script>
<!-- more plugins included if required -->
</head>
<body>
<!-- html here -->
<!-- script is the last thing before the ending body tag (increases performance) -->
<script type="text/javascript" src="/path/to/your_jQuery_code.js"></script>
</body>
</html>
I think worrying about server trips for javascript includes is premature optimization. Do you have any evidence that these pages are loading slowly? The browser should be caching the javascript files.
If you do have evidence that this is a problem, you could
-combine the jquery code and any plugins into one file
-write an .net content handler to do this for you (probably overkill)
Then you can add a custom js file per page to handle page specific properties.
You can most definitely put your document.ready and all other JavaScript code in an external file.
Typically I have 2 calls - one for jQuery itself, and one minified global.js file that combines and minifies all of my individual files.
Personally, I like to use front end blender for this, but there are many other options available as well.
there's nothing wrong w/putting the document.ready call in an external file. in fact, it's what i do to separate my js from my html. if you're concerned about certain functions running on certain pages, you may sift through them with a
var path = window.location.pathname;
if (path == "/yourdir/yourpage.html") {
//do something for this page only
}
or you can just include certain files only on certain pages.