What Will I Learn?
Creating Your First App with jQuery
Requirements
- jQuery
- WYSIWYG Editor
Difficulty
- Basic
Tutorial Contents
- Getting Ready
- Your First JQuery App
Writing your first jQuery app - Part 1
If you've done any web development in the last decade or so, JavaScript is a part of your daily life, but possibly a very painful part. JQuery is a quick and easy answer to that. JQuery is an advanced wrapper around JavaScript that provides fixes for browser incompatibility as well as making things like handling button clicks and Ajax easy.
Getting Ready
This tutorial assumes you are an experienced developer, familiar with html, JavaScript and at least to some level, cascading style sheets (CSS). To get started with JQuery, you need a JavaScript compliant browser. If you've been living anywhere outside of a cave for the last ten years, you can use almost any one. Internet Explorer or later, Firefox, Opera, Chrome. Any one of them will do.
Next, you need to have a web server installed. I use internet information server 7 as it is included in multiple Windows versions. Ideally, all you need to do is create a new application in the IIS console and point it to the directory you want to use as your project home (detailed below). If you are unfamiliar with the process of creating a website or using a web server, there are plenty of great tutorials at Microsoft and many other sites. Explaining it here is outside the scope of this tutorial.
Now, go to http://code.jQuery.com . From there, grab the latest minimized download, currently 3.3.1. The complete URL is http://code.jquery.com/jquery-3.3.1.min.js. Why the minimized version? Unless you need to examine the underlying code, using the minimized version of JQuery will save download resources. The only difference between the minimized and regular version is that the minimized version has all spaces, tabs, comments and any other unnecessary text removed. Once you've downloaded this (it's a single JavaScript file) you are ready to get rolling.
Your First JQuery App
To get started, create a directory on your machine to store your projects in, such as c:\projects if you are using windows. Under this, create a subdirectory called JQuery-HW. Now, copy the JQuery file you downloaded above into this nice new directory you've just created. If you don't, nothing is going to work. Next, make sure that your web site or virtual directory is correctly pointing to this new path. If you are using a hosting provider, drop it in the appropriate directory. Using your favorite text editor, create a new file called "HelloJQuery.htm" and enter the following code just as listed:
<head>
<script src="jquery-3.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function() {
alert('Hello jQuery');
});
</script>
</head>
Now, save this file and open your browser. Navigate to the file (in IIS it looks like http://localhost/JQuery/JQueryHello.htm on my machine). If you did everything correctly, you should see a nice little message box with the words "Hello jQuery" in it.
Ok, so it is the most common programming example ever, but we have to start somewhere right? So let's examine the code above, line by line. While it is pretty simple, a lot of cool stuff is going on behind the scenes:
1 <head>
2 <script src="jquery-3.3.1.min.js" type="text/javascript"></script>
3 <script type="text/javascript">
4 $(document).ready( function() {
5 alert('Hello jQuery');
6 });
7 </script>
8 </head>
Lines 1 and 8 are boiler plate html. They can safely be ignored.
Line 2 is where we tell the browser that it needs to fetch the jQuery library we have stored locally. No magic here, except that it needs to be in its own script block or internet explorer will refuse to cooperate.
At line 3, we designate the beginning of our script block, and then we begin our first steps into the world of jQuery. Line 4 is composed of three important pieces: $() is an alias for jQuery, which is a method. $ may look strange, but it will become second nature after a while. The $() method is the heart of jQuery. $(document) means we are passing our old friend the document object, from the dom, into jQuery, where it can work its magic. The result is the document object, which is then used to access the "ready" event which fires when the page's structure finishes loading
I say page's structure because it doesn't wait until all the page's related objects, such as images, video, etc. finish loading before firing. It ensures that everything it needs to create the document object model has loaded, but anything it can wait on won't hold it up. This prevents the situation where it is already too late to do something because the page is already complete.
When the page load is complete and the event fire, the anonymous function containing the alert is executed. Note that this function is actually a parameter to the method ready, which sets up our event handler. As long as this is an empty method, we can use a named method as well, external or otherwise.
Another very important fact to be aware of is that we did not mix our JavaScript with our html. In fact, our example really doesn't have any html. No onload events calling our jQuery code. Nothing. This is referred to as unobtrusive JavaScript and it is a great idea. Now, we can take our jQuery code, package it up in a file, and reuse it anywhere we want. We are no longer bound directly to the html. Combine this with jQuery's incredible element location features and there is almost no end to what we can do.
Summary
This lesson got you set up and going. We set up an initial site and downloaded the latest minimized (compressed) version of jQuery. We then built and executed an incredibly basic "Hello World" example. Even with this basic example, there is a lot going on. The basic jQuery function $() is your gateway into the powerful, flexible, cross browser compatible library. In the next entry in this series we will look at the jQuery selector which is truly where the power of jQuery shines through.
Posted on Utopian.io - Rewarding Open Source Contributors