#52WeeksOfCode Week 1 – JQuery Effects

Week: 1

Language: JQuery

IDE(s): TextMate

Background:

The World Wide Web (does anyone still call it that?) was once a quiet, meditative place. After all, the protocols were originally designed as a cross-platform way that scientists could exchange research papers. (That’s right, kids. At one time ‘surfing the Web’ was otherwise known as ‘reading’.) Then, of course, the rest of us got hold of it and now it’s all about talking cats demanding fast food. Well, that’s progress for you.

At any rate, Web pages were originally static documents written using a relatively simple markup language known as HTML. You didn’t need any fancy tools or advanced knowledge to set up a Web site, a simple text editor worked just fine.

In 1995 Brendan Eich, a developer at Netscape decided that the Web needed to be a bit more interesting, so he developed a programming language that would run inside the browser. Originally called LiveScript, it was designed to add dynamic elements like buttons and text fields for online forms and was later renamed Javascript (which, despite the name, is not related to Sun Microsystem’s Java programming language). Now what was once just data was now mixed with active code. Some people had a problem with this.

I first encountered Javascript several years ago and at the time it was pretty easy to learn, particularly since I was already familiar with other programming languages. The main new thing I had to wrap my brain around was the idea of code running inside of a document. I haven’t used it since then and the language has evolved considerably due to its built-in extensibility. In addition, Javascript has moved beyond the Web browser to become more of a general purpose scripting language used in productivity software, digital media development and even game engines.

Extending JavaScript is actually quite easy. You simply create a JavaScript file  with the code you wish to be able to use and then tell your scripts where to find it. Reusable code like this is referred to as a ‘library’.(You’ll see this later when we get into our example code.)

JQuery is a library of prepackaged JavaScript code that works across multiple platforms and browsers and adds a lot of useful functionality to basic JavaScript, including functions to access Web 2.0 frameworks such as AJAX and easier ways of controlling animated elements on a Web page, which I’ll use in my demonstration code.

Setup: The best way to test Web software is with a Web server. I have several options for this but I wanted to set up a local environment so I could work without an Internet connection if I wanted. Once again, there are a lot of options for this but for me the easiest was MAMP.  This is Mac-based software that gives you a simple, turn-key solution for Web development (there are versions available for Linux and Windows as well.) It’s dead easy to install and set up so I was able to quickly set up my MacBook as a programming workstation.

(Before I get indignant emails, I do realize that Mac OS X has built-in Web and database services but with the latest release they’ve become more of a hassle to setup and manage. MAMP is pretty much plug-and-play as are its Windows and Linux versions.)

So I have my test server. How do I manage my code? I wanted to keep things simple, so I went old-school – a text editor. I used Textmate, the free cousin to BBEdit. BBEdit is one of the best standalone programming editors for the Mac and I’ve been using it for years.

(My favorite Windows editor is ConText and when I’m using Linux/Unix I just use vi but if I had to pick a feature-full GUI text editor for Linux both gedit and kedit are quite good.)

Coding: When I taught beginning programming, my students would often get stuck when starting a project. This is the advice I’d give them:

Don’t try to solve the entire problem – This is good advice in general but even more so when you’re trying to do or learn something new. Instead solve the smallest part of the problem you can manage and see where that takes you. So if you’re writing a program that is supposed to process text, start by writing just enough so you can open a file and print out its contents.

Start with what you know has to be there – Every programming language has a certain minimum amount of code that has to appear in every program. For basic JavaScript that means a Web page, like so:

<!doctype html>
<html>
<head>
<meta charset=”utf-8″ />
<title>Demo</title>
</head>
<body>
<script>

// Your code goes here.

</script>
</body>
</html>

However, we’re adding the JQuery library so we have to modify this a bit:

<!doctype html>

<html>

<head>

   <meta charset=”utf-8″ />

   <title>Demo</title>

</head>

<body>

   <script src=”jquery.js”></script>

   <script>

   // Your code goes here.

   </script>

</body>

</html>

 I put the JQuery package (jquery.js) in the same folder as my Web page and then added a line to tell the Web browser where to find the code when it processed my page.

Have a project already in mind – The best way to learn a programming language (or pick up any skill) is to have an idea of how you’d like to use it. If you’re planning a trip to Italy, for example, you’ll be much more motivated and focused while learning to speak Italian. Programming is the same. Fortunately the assignment for this week is very simple – use one or more of the JQuery Effects to animate some element of a Web page.

You don’t have to reinvent the wheel – There is plenty of sample code out there, in addition to code that you’ve written yourself for earlier projects so it’s a good idea to keep old code snippets handy for future occasions. The first place to check is the vendor documentation. You can also post your question to an appropriate discussion site.

According to hacker tradition, the first program you write should be some form of “Hello World”. In other words, write a program that outputs the stated phrase in some form or another.

So in the interest of keeping things simple, I wrote a quick script that will make the words Hello World slide down on to the Web page. The complete program is here. I adapted the sample code from the JQuery documentation. (Note that I gave them appropriate credit in my script.)

 As to what it looks like, I don’t yet have a public facing Web server set up but I can show you with this screen grab:

NOTE: I regret that this was a rather abbreviated entry. I got off to a late start on the coding challenge and wanted to keep to an ongoing deadline of midnight Tuesdays throughout the challenge. Future posts will be more detailed.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s