Including jquery in .js file - include

I am trying to clone an object using
var newObject = jQuery.extend(true, {}, oldObject);
as per John Resig's answer to What is the most efficient way to deep clone an object in JavaScript? .
All the information I can find on using libraries in javascript only show how to use a library within an html file... as in:
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
My code is in a .js file and i get the error that jQuery is not defined. How do I use jQuery within my .js file?
EDIT: I'm running this code in a server.js file on a node server. The server.js has an event handler that gives back the index.html file upon getting the "/" url. So the server.js file isn't included in the index.html file and therefore including jquery in the html file doesn't help me, if my understanding is correct.

You can't include it or link to it from within your .js file. You have to include it on the HTML page (<script src="/path/to/jquery"></script>), before you include your .js file.
Technically you could just copy and paste the jquery code above the code in your .js file, but it is usually a better idea to just include it on the page to avoid conflicts.

Related

Why does my website try to GET Sass file?

In my website, I am only including the .css files that are generated by SASS. However, when I inspect the Network tab in Chrome I can see the browser is trying to GET the .map and .scss files as well. The .map file works, but the .scss is failing because of the file type being not allowed in my server configuration.
Are these files supposed to be loaded as well? I would expect only the CSS is needed.. these others are just used in the compilation side.
Here is my line of code
<link rel="stylesheet" type="text/css" href="/mywebapp/SASS/maas.css" />
When I exclude it, the browser GETs none of these files, but adding it causes it to GET all 3... I'm very confused about what is initializing these requests.
If this is NOT supposed to happen by default then there must be something set up in our CMS that is forcefully requesting these files.
Try to find in your CSS something like this /*# sourceMappingURL=/mywebapp/SASS/maas.css.map */
maas.css.map tries to read you .scss
You can read - http://thesassway.com/intermediate/using-source-maps-with-sass

How to make sure custom js file loaded last in joomla

I am trying to include a custom JS file into my joomla site. What I did is to edit the template's index.php file, and add <script src='custom.js"></script> right before </head>. But when the page is loaded, there are two other JS files loaded after my custom JS file. I thought by inserting my script loading line right before the closing head tag, my JS file should be the last one to load. What could possibly load those 2 JS files after my JS file, and how?
Try this,
you can use addCustomTag option this will not load the JS file inside your head tag but it should be last (from where you are calling there it load.)
$stylelink .= '<link rel="stylesheet" href="../css/IEonly.css" />';
$document = JFactory::getDocument();
$document->addCustomTag($stylelink);
For more details
Hope it works..
There is an option to specify execution of the script after page has loaded (defer). This is a HTML feature and addScript() exposes this in its interface. Doc: https://docs.joomla.org/JDocument/addScript
Example:
$document = JFactory::getDocument();
$document->addScript('js/myscript.js', 'text/javascript', true);

How to use version.rb plugin in Jekyll static site generator

Here is the plugin code...
module Jekyll
module VersionFilter
def versioned_url(input)
"#{input}?#{Time.now.to_i}"
end
end
end
Liquid::Template.register_filter(Jekyll::VersionFilter)
I am trying to cache bust/version control my .css file. I am new to Liquid. I am having trouble figuring out this basic plugin. Any help?
You need to put version.rb into the _plugins/ directory in the root of your Jekyll site. If you don't have a _plugins/ directory, create one.
For usage - it looks like it gives a new filter that you can apply to text - so you'd use it in your templates to filter the references to your CSS files, adding the query string so that they aren't cached - but I'm sure there's more info on that wherever you got the code from.
For what it's worth, breaking caches with querystrings isn't the best solution. It'd probably be better to write a plugin that adds a new string to the actual filename, and then adds that string to the urls where those assets are included in the templates - but that is a bit more complex.
If using an existing plugin for static asset versioning is an option for you, try jekyll-minibundle.
Assuming you keep non-stamped CSS files in _styles (note the _, because you don't want these to be exported to the production site) and want the stamped CSS files to appear in css, do the following:
<link href="{% ministamp _styles/site.css css/site.css %}" rel="stylesheet" media="screen, projection">
That works fine in combination with compass, just make compass export to _styles.

Spring web development images

Can anybody tell me or give me a link to go to which can tell me how to implement and display images step by step (I'm only beginning) on a webpage from a spring project
I'm using IntelliJ
Thanks
What's the URL of the page? The one that appears in the location bar of your browser?
That is the URL to which relative locations are resolved in the HTML code. So, if the URL is http://localhost/MyApp/foo.html, and the URL of the CSS inside the HTML code is ../../css/style.css, the absolute URL where the browse will try to find the CSS will be http://localhost/MyApp/../../css/style.css, which doesn't make sense.
I prefer always using absolute paths for images and CSS files (and other resources). Using JSTL, that makes it like
<link href="<c:url value='/css/style.css'/>" ...
The <c:url> tag takes care of prepending the application context (/MyApp) to the path.
Note that relative paths inside CSS files are not resolved relative to the page URL, but relative to the location of the CSS file itself. So the path in your CSS file is correct.

How to hide the image tag src attribute?

I have a question about the <img> tag src attribute.
Is it possible to hide the <img> tag src attribute when viewing the source in a browser?
If it is possible, how? Please tel me if you have any reliable sources.
No, it's not possible.
You can set them dynamically with JS, but you can't hide them. You can store them as base64 encoded strings, and then decode them on the fly which will "hide" them from your page's source.
However, this is still utterly pointless as in the end, the browser still makes an HTTP request to fetch the image.
Simply spoken: This is impossible.
You might try to obfuscate your image src attributes (JS, Base64, etc), but for the browser to be able to show an image, you'll always end up exposing the image URI.
Which, in turn, means that everyone who knows their firebug will be able to see where your cute kitteh image comes from.
Alternative:
Generate One-Time URIs for your images (quite expensive).
Another good feature is to hide the location paths of your important scripts. I found a great npm plugin for this https://www.npmjs.com/package/location-hide
This works also for php href, src, content it will use everything inside src=""
You need only node.js for creating the exported files. It´s easy to use even if you don´t know node.js
It turns
<script src="test/folder/sample.js" type="text/javascript"></script>
<link href="test/stylesheet/perfect-scrollbar.css" rel="stylesheet">
into
<script src="TNANIuTOLZfmLYwaPDIYhcZDVOWKodqYhysaTeQHFPDhYlDLCOtxZqYmkKAhaSwSgbsYOWlpBzVSBtMZKSfwRqvPSqWVlBBuzHR" type="text/javascript"></script>
<link href="gyXeFnOEvZbgTjLvdZRnsyrfhaXqffkDjcdATTouqpIenCalLRXKamuXEtiKbPGCsNrdQIaqTMTNWsLyLFuxygKytaruWzSjKYMq" rel="stylesheet">
And it generate new jquery include codes like this to include your scripts with javascript in a external file
$('[src=\'TNANIuTOLZfmLYwaPDIYhcZDVOWKodqYhysaTeQHFPDhYlDLCOtxZqYmkKAhaSwSgbsYOWlpBzVSBtMZKSfwRqvPSqWVlBBuzHR\']').attr("src", "test/folder/sample.js")
$('[href=\'gyXeFnOEvZbgTjLvdZRnsyrfhaXqffkDjcdATTouqpIenCalLRXKamuXEtiKbPGCsNrdQIaqTMTNWsLyLFuxygKytaruWzSjKYMq\']').attr("src", "test/stylesheet/perfect-scrollbar.css")
Also I would suggest you that you include all of your external javascript codes in 1 single js file. This file you place in the root of your index file that you can make this
<script src="./allinone_external_file.js" type="text/javascript"></script>
Then make right htaccess that nobody can acces this file. You can also make a fake import script for the source code that every body can see. But this file is only a redirect for the real external js file. you make this multiple times as example + use other obfuscation tools. This will protect you from people searching exploits with your javascript codes. I know its no big deal and maybe you can see the jquery include codes if you know how. But anyway its a great protection.

Resources