Get started with Web coding. Part 2: JavaScript and jQuery

See all posts in this series.

I’ve been thinking for a long time about how to write this post. This is the second in a series about coding, for journalists. It’s taken a while to get to this second post because I’m still feeling conflicted about exactly what to say.

In the first post, I wrote about HTML and CSS. I have no qualms about urging journalism educators to teach some HTML and CSS in journalism courses. I even say it should be required — not as a whole course with nothing else in it, but as part of some normally required journalism course such as editing or publication design.

I’m not willing to say every journalism student needs to learn JavaScript. But I believe strongly that journalists and educators and students need to understand how the Web works, and what must happen before you see something you can interact with — on a mobile phone or a tablet or a website.

So that’s how I’m going to start — with something simple and basic that you should understand.

When you see things that move or react to your clicking and typing in any Web-based story or feature or app, that’s probably JavaScript making it all happen. Only JavaScript. Even the control buttons on an audio player or a video player — now that Flash is far out of favor, even those little buttons are created with a combination of CSS and JavaScript.

Logo: MDN JavaScript Reference

How JavaScript works

“JavaScript is a cross-platform, object-oriented scripting language” (learn more here). It’s not a small thing — JavaScript is powerful and can do most of the things that any full-fledged programming language can do. In general, it works hand-in-hand with Web pages in a very direct way, and that makes it different from all other scripting/programming languages.

In the past, we used to embed bits of JavaScript directly into our HTML, like this:

<a href="javascript:alert('Hello, World!');">Alert</a>

Or like this:

<script language="javascript">
alert('Hello, World!');
</script>

That is no longer considered good professional practice. (In fact, it’s been frowned upon for several years already.) I’ll say more about that in the next section.

So usually we make a separate file — a separate text document — and write the JavaScript code there. For any HTML page that needs to use that JavaScript code, we link the JS file to the HTML file by placing the URL of the JS file inside a <script> tag in the header of the HTML file. Okay, I know that might have been too much information for some readers. Just think of two separate text documents on your own computer. One contains all HTML. One contains all JavaScript. And the two files work together to make things happen.

What kinds of things? An example of something that everyone has used is a registration form. When you register for a website or a service, you fill in a form. The boxes you type into are made with HTML. The button you click to submit the form is made with HTML. But if the form tells you your password is too weak, and forces you to choose a different password — that’s JavaScript. If the form tells you that you did not type a valid email address — that’s JavaScript. JavaScript is testing the contents of the box (the form field) and determining whether they are valid. If not, JavaScript sends you a message.

Form validation is not very sexy, of course. JavaScript is also responsible for pretty much anything that slides, moves, unfolds, fades, hides or reveals — on any Web page. And that usually involves jQuery.

Logo: jQuery.com

jQuery is JavaScript

jQuery is a JavaScript library. All that means is, it’s a big JavaScript file. Remember those text files I mentioned above? jQuery is one. It’s just a really big text file, full of JavaScript code. The filename is jquery.js or, more properly and completely, jquery-1.9.1.js (you can download the latest version here).

One of the best arguments for learning jQuery: It can do beautiful things with data tables. But I’m getting ahead of myself.

Beginners making Web pages can download and use various jQuery plugins — among the most popular are “lightbox” plugins (see an example), which usually display photos in an overlay, fading the rest of the page beneath a semi-transparent gray screen. Increasingly popular is the jQuery UI library, which includes all kinds of readymade pretty things such as pop-up dialog boxes. You can also use ThemeRoller to create a whole interface where everything matches and looks perfectly professional.

Some jQuery code

jQuery looks like JavaScript when you are writing (or using) functions, variables, and other standard programming structures. But it also includes syntax that was completely unfamiliar to me until I started digging into jQuery, and that syntax gives you the power to change dynamically what your HTML contains.

You can make things move. You can change the order of data (as you can see in the tables example linked above). You can change colors and styles. You can make anything respond to clicking or dragging or mouse movements. You do this by using CSS styles and selectors embedded in your HTML (which means you need to know CSS to use jQuery well).

But how can we learn these?

Ah, there’s the rub. In the first post in this series, I recommended Codecademy for an introduction to HTML and CSS. Codecademy has a JavaScript track, and it’s pretty good — but I have to say I do not consider it suitable for code beginners. In fact, I think JavaScript is daunting for anyone who has never learned any programming language before, and that’s largely why I found it hard to write this post.

Some JavaScript code

Programming languages have lots of things in common — variables, loops, if statements, Booleans. They work basically the same way (especially all the object-oriented languages). If you have ever learned even one programming language — then go to Codecademy today and start learning JavaScript!

If not — do you give up? Well, no. I would never suggest that.

But I am going to suggest that you start with another language — not JavaScript. That will be the subject of my next post in this series.

If you’re proficient with HTML and CSS, you could probably start with JavaScript. Journalism students, however, are seldom proficient. Even after creating a couple of small Web projects, they tend to use both the structure (HTML) and the design elements (CSS) in a haphazard manner. The exceptions are students who fall in love with designing and problem solving and start thinking about making a career in Web development or design. Not surprisingly, those students are not plentiful in a journalism department.

Next steps

Be aware there’s a lot (really a lot!) of old, non-optimal JavaScript code and jQuery plugins out there on the Web. Searching with Google can do more harm than good when it comes to this stuff. You should check for jQuery plugins at the jQuery Plugin Registry, and you should check JavaScript syntax and methods at Mozilla Developer Network (MDN).

Two very excellent books have answered most of my questions about these things:

  • Eloquent JavaScript (free online version has a built-in code editor!)
  • jQuery: Novice to Ninja (the clearest text with the most useful, practical examples; there’s a new second edition) Update: According to a post from SitePoint staffer Simon Mackie on Feb. 8, 2012, the changes in the second edition include “a fairly substantial addition to Chapter 9” regarding jQuery Mobile, as well as updates for jQuery 1.7 (first edition covered 1.4).

As always, please post a comment here if you have a correction or a question.

Oh, and by the way — never say “Java” when you mean JavaScript. Java is a whole different language. Not the same at all.

4 Comments on “Get started with Web coding. Part 2: JavaScript and jQuery

  1. Pingback: Mindy McAdams | Journalismus im Netz

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.