Javascript & jQuery From Scratch Part 1 – Getting Up and Running

For our very first lesson, we’re going to be working almost exclusively with Javascript. This first lesson will be pretty easy, but the concepts presented here will be crucial for all future articles. In this lesson, we’re going to be talking about the different ways that you can include Javascript in a page, and the pros & cons of each of those methods.

Before we dive in, this article (and all articles hereafter), assumes that you have a solid understanding of computers, opening/editing/saving files, code editors (I use Sublime Text, but any plain-text editor will do), and most importantly, HTML and CSS. If you are shaky on any of those things, I highly recommend that you get up to speed on those first, before attempting any of this stuff.

So with that disclaimer out of the way, let’s get started.

When it comes to adding Javascript and jQuery to your webpages, there are two main methods that you can use:

  1. The link method. This is the preferred method to adding Javascript & jQuery to your pages. This method involves writing all of your javascript/jQuery in its own file, saving it, and then liking to it using the <script> tag, with a SRC attribute (ie: <script type="text/javascript" src="javascript.js"></script>). You will typically put the script tag either between the <head> tags, or at just before the closing </body> tag.
  2. The embedded method. With this method, you include all of your javascript between two <script></script> tags (ie: <script type="text/javascript">alert("I'm Javascript");</script>) and place that somewhere within the HTML document. As with the example above, you will typically either do this somewhere between the <head> tags of your site, or just before the closing </body> tag. Technically, you can include Javascript or jQuery scripts anywhere in your HTML code, but these two locations are the most common, with the ideal location being at the bottom.

Let’s explore each of these methods in a little bit more detail.

The linked method

I am introducing this method first, because it is the preferred method of integrating Javascript and jQuery into your site. There are two main reasons for this being the preferred method (if pressed, I could probably come up with more – but come on. How geeky ARE you?)

  1. It enables your script to be reused on other pages of the site.
  2. It is cleaner, and keeps your code separate from everything else.

To implement this method, do the following:

  1. Create two new documents in your favorite code editor. If you aren’t sure which one to use, Sublime Text is nice 🙂
  2. In the first document, put the following:
    alert("Hello, I am linked Javascript");
  3. Save this file as javascript1.js.
  4. In the second document, put the following:
    <!doctype html>
    <html lang="en">
       <head>
          <title>Linked Javascript</title>
       </head>
       <body>
          <h1>My first Javascript Page</h1>
          <script type="text/javascript" src="javascript1.js"></script>
       </body>
    </html>
  5. Save this file as javascript1.html in the same location that you saved the other file.
  6. Open this HTML file in your browser.

With this example, we created a super simple javascript file, linked to it in our HTML, and it got executed once you loaded the page. Notice that we put the <script> tag as the last tag before the closing </body> tag. It is always recommended that you put your linked Javascript files at the end of your document, because this will help to ensure that the page is loaded before any scripts get run. It will also help to give your page the appearance that it is fast loading, as it doesn’t have to process all of your javascript first.

The embedded method

This next method of including Javascript into your pages is common enough, but not the ideal way to go about things. This method is ideal for quick scripts that you are writing just to test things out – but it is generally discouraged from relying on this method too much because you lose the ability to reuse scripts when you go this route. Additionally, it has a way of making your files “messy” and unnecessarily large. Never-the-less, we’ll cover it just for the sake of being thorough.

To see this method in action, do the following:

  1. Create a new document in your favorite text editor.
  2. Enter the following code:
    <!doctype html>
    <html lang="en">
       <head>
          <title>Embedded Javascript</title>
       </head>
       <body>
          <h1>Embedded Javascript Example</h1>
          <script type="text/javascript">
             alert("Hello, I am embedded Javascript");
          </script>
       </body>
    </html>
  3. Save the file as javascript2.html
  4. Open this file in your browser

This method is admittedly a more “convenient” way to get to the same result, as there is only one file involved with this particular example. However – I urge you to resist the urge to give in to convenience. The world will thank you.

You will also notice that once again, we put the <script> tags at the end of the document, just before the closing </body> tag. You should get in the habit of doing this from here on out.

Also – before I forget, if you’re wondering about the alert("Hello, I am embedded Javascript"); in these examples, don’t worry about that too much right now. We will be covering that, and other things in the next lesson in a bit more detail.

Adding jQuery to your page

Before I end this tutorial, let’s talk a little bit about jQuery. As I had mentioned in the introduction article, jQuery is NOT a separate language from Javascript. In fact, it is actually made WITH Javascript, as a means of working with Javascript and making certain tasks easier. When you get down to the brass tacks however, jQuery is nothing more than a Javascript file, just like we created earlier, in our first example. As such, we can include it into our pages the same exact way! By linking to the file. So before, I give you the answer, try to answer this yourself (you have all of the skills necessary, if you’ve been paying attention).

If I told you that the URL (read: SRC) to the jQuery script was: http://code.jquery.com/jquery-latest.min.js, how would you include it into your page? Try this challenge:

1. Create a new document, and put a basic HTML skeleton in. You can use this one if you don’t want to write your own:

<!doctype html>
<html lang="en">
   <head></head>
   <body></body>
</html>

2. Using the linking method, attempt to add jQuery to the site using the URL mentioned above.
3. In order to test jQuery out, using the embed method, add the following script to the page.

$(document).ready({
  $("body").append("I did it!");
});

4. Save the file as challenge1.html
5. Open the file in your browser (You will need to be connected to the internet – but that should be a given, if you’re reading this blog).
6. Jump for joy if, when you open the file in your browser you see “I did it!”.
7. Keep scrolling to see the answer if nothing happened when you loaded that page.

Hint: When you do this, make sure that the embedded script that you enter is BELOW the linked jQuery file.

*cue Jeopardy music*

Alright! How did it go? If you had trouble, see the following code to see how your file should look:

<!doctype html>
<html lang="en">
   <head></head>
   <body>
      <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
      <script type="text/javascript">
         $(document).ready(function(){
            $("body").append("I did it!");
         });
      </script>
   </body>
</html>

Conclusion

In this article we covered the core basics of implementing jQuery and Javascript into your pages. With this lesson out of the way, we can now finally dive in to learning some code. If you run into any issues, or have any questions, please don’t hesitate to get in touch. Until next time, Happy Javascripting!

Leave a reply:

Your email address will not be published.

Site Footer

Sliding Sidebar

About Me

About Me

32 y/o Christian guy, living in beautiful small-town Pennsylvania with my beautiful wife, and fluffy dog.

Books I’ve Read