Installing and using JQuery in Brackets.io (mac) - javascript

I am working on a project that I want to use JQuery for since many people have recommended learning JQuery while learning Javascript and CSS to help enhance your programming abilities.
I looked into JQuery and downloaded both the compressed and uncompressed versions as well as the addition map files and notes, but I am semi-stuck on what to do next.
I understand that I must somehow import the script and implement it into my code, but I was reading online that Brackets.io may not support JQuery extensions or something about an issue with JSLint errors and files? I have no clue what any of this really means and I am just looking for a quick way to get JQuery plug-ins and code working in my current project.
I moved all the JQuery related files to my programming folder. What should I do next?

In your HTML document head, insert the following tag:
<script src="jquery-1.11.3.min.js"></script>
replacing the jQuery version with the version you downloaded.
Then jQuery will be available from any script running from within that html document. You will need to include this line in the head of every document you plan to use jQuery with.
To add jQuery plugins, add additional script tags below the jQuery script tag, with each src pointing to the .js file of the plugin.

Related

How to use script tags in a Gatsby blog post

I've just started moving my blog to Gatsby but have run in to a problem.
I have many markdown pages where I have javascript demos and I need to include the javascripts using <script src="..."> tags.
These don't seem to work which I'm guessing is because of the way Gatsby renders things.
Any ideas how I could make this work? It's going to be too much effort to go back and modify all these too much. They all require different versions of loads of different libraries.
For instance in one markdown post I need to include JQuery, part of three.js and two other scripts.
I did work out how to get the inline scripts working (https://stackoverflow.com/a/50336890/170239) but would be nice to be able to load externally too.

What does the script tag do

Yo everyone. I am Admin's relative. Just a beginner in javascript. I would like to ask what is the following line, its purpose, what it does, where you put it and so on. My question might be simple but it would be really much appreciated if anyone can give good explanation to this question.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Thank you very much.
As you can see, this loading jQuery library from the CDN.
what is the following line
This will include jQuery library on your page
its purpose, what it does
As you might have read jQuery Tag WiKi on SO,
jQuery (Core) is a cross-browser JavaScript library (created by John Resig) which provides abstractions for common client-side tasks such as DOM traversal, DOM manipulation, event handling, animation and Ajax.
You might want to visit jQuery homepage.
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. If you're new to jQuery, we recommend that you check out the jQuery Learning Center.
where you put it
You can put this in head or at the end of body tag. You just need to add this before any jQuery plugin.
I'll highly recommend you to take this tutorial.
This line loads jQuery, a javascript library (see http://jquery.com for details on jQuery), in to your page. It is customary to put it in the <head> tag of your page, and as you're just beginning I would recommend that.
There are some cases, however, where you want to optimize your page load time and it may be better to put it at the end of the <bod> tag, right before </body>. But for now I'd put it in the <head>.
The src tells the script tag where to load the file from. In this case, it's from a CDN (content delivery network) which hosts the files, and is used for slightly faster download times (not something you'll need to worry about at this point).
And welcome to stackoverflow!
This line is usually placed in the header section of a webpage, but can always be placed anywhere depending on your need.
What the code does is it loads the javascript codes found at the link, onto the page.
This avoids having lengthy javascript codes within your webpage.
It is a link to an external script. It basically copies and pastes the code from that location into the file where you write it. You usually put it at the top of the file where you need it.
<script> tag is used for importing a script. (can be java script or vbscript.)
jQuery is a framework for JavaScript.
So the line you mentioned is to invoke the jQuery script code in your code.
Now, you can do it in two ways, either download it, and then give the src, or use it from cdn. The src in this line is from the CDN. For more details of how to use jQuery, the minimal you can read is: this.
It will load the content of the external script file. In this way you can better organise your code and reuse code libraries in different projects.
It is best practise to load the script files last in order for the browser to load the html first.

Registering a Widget Javascript Dependency on Sitefinity

I'm trying to see if there is a way like Wordpress's enqueue script to properly include scripts onto the footer. I looked up the documentation, but all I could find was a way to do it for Widget Designers. I am looking for the ways to include the script properly and I'm using MVC.
I dug this up from the forums: http://www.sitefinity.com/developer-network/forums/developing-with-sitefinity-/where-to-store-mvc-widget-css-and-javascript-and-how-to-link-it
You could also include the js reference in your master page, which I know isn't ideal if the widget isn't used on every page. You could always bundle and minify site wide scripts to reduce the overhead a bit.
You could also try using a the Sitefinity js widget on the page the widget is used, there is an option to refrence a file and include it before the closing body tag: http://www.sitefinity.com/documentation/documentationarticles/user-guide/widgets/scripts-and-styles-widgets-group/configuring-the-java-script-widget

HTML5 Boilerplate build scripts doesn't replace script tags in index.html

I am just getting started with the HTML5 boilerplate build script and I am having some problems. Basically all my scripts are minified and compressed as I would hope, but all of the original <script> tags are left in the output index.html. What I need is for it to replace these tags with a reference to the minified js file. I thought this should happen by default. Maybe I am doing something wrong?
I ended up rolling my own build script with rake and the javascript closure compiler. It was pretty easy actually.
I guess the code responsible for replacing is in the build.xml file target -usemin especially this code.
If it is so then it searches for comment region marked with //-beg- concat_js and //-end- concat_js as is described as must-have in the quick start section.
Also make sure that you have set the file.root.script property in the project.properties file to the script you really use (default value expects main.js)
Running ant -debug >log.txt helps me a lot.
You can find helpful answer by searching through existing issues at GitHub, especially the article https://github.com/h5bp/ant-build-script/wiki/How-to-bypass-the-automatic-script-concatenation seems to be roblarsen's final answer to script concatenation problems.
I ended up with my custom Node.js build script that runs wintersmith and HTML5 Boilerplate build script, does some configuration of those tools and it works.

How to download jQuery js plugin?

I am confused about js file of jQuery which one i have downloaded just now.
downloaded a zipped folder contains a lot of folder and files inside it. How can i know which one js file exactly is for particular plugin?
Lets say, i have to downloaded for Dialog and i download from this page by selecting Model under Widget section. It downloads a zip folder and has many folder and files inside it.
When you've configured your download you just need to use the 2 folders: js and css.
You need to reference
jquery.js
jquery-ui-1.8.13.custom.min.js
jquery-ui-1.8.13.custom.css
I import this folder development-bundle\ui\i18n as well when I need the localized datetime-picker.
You have to look at the demos to see how they work and then go from there. This is like the Matrix. No one can tell you how jQuery UI works, you have to see if for yourself.
Also this is jQuery UI and not straight jQuery which is a single js file which you will find in the download.
Basically find out which stylesheets, js files you need, how to implement that (demos on the website will help with this) and then test it out on your own site.
As an alternative to download and host jQuery yourself, you can use googles cdn.
They serve a lot of different javascript frameworks, including jQuery and jQuery UI.
If you for example want to enable your site with jQuery all you structly have to do is include this in your html code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
You can find the different js frameworks that they host on this page: http://code.google.com/intl/no/apis/libraries/devguide.html
The thing that you have downloaded is JQUERYUI. Its a UI customisation and enhancement library based on the Jquery library. But you have specified in the question as JQUERY library. This can be downloaded here: jquery.com
this post does a pretty nice job:
jquery from cdn
They include a failsafe incase the CDN doesn't load properly...here's the code excerpt from the post
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.5.1.min.js">\x3C/script>')</script>
this could be modified for various plugins too, like jqueryUI
(also referenced from http://html5boilerplate.com/ as noted in linked post)
Basically you have to include three things in the following order,
jquery API placed under js folder(something like jquery-1.5.1.min.js)
jquery UI library placed under js folder (something like jquery-ui-1.8.13.custom.min.js)
jquery ui css file placed under css\ui-lightness folder (something like jquery-ui-1.8.13.custom.css).
You can even refer the first two js files from any CDN.

Categories