Redesigning Your Church Website—Part 6: JavaScript with jQuery

September 26, 2017 Rev. Bill Johnson

Redesigning Your Church Website—Part 6: JavaScript with jQuery

While HTML does content and CSS does formatting, JavaScript does interaction. If you’ve ever been on a site that reacted to where your mouse pointer moved or that allowed you to view new content without visiting a new page, you’ve probably encountered JavaScript.

JavaScript is a programming language based on ECMAScript, and it’s used on almost every website you visit. This article will NOT teach you JavaScript. Explaining JavaScript is beyond the scope of a blog post, and it will likely take you some time to learn the language. If you’re interested, though, I suggest some of the excellent tutorials at w3schools (free), codeacademy (paid), and, if you’re really serious about learning JavaScript, O’Reilly’s rhino book.

What Will I Learn Here?

Instead of focusing on learning all the ins and outs of JavaScript, we’ll focus on a very specific, very powerful library called jQuery. Like with many things in web development, though, we’re only going to be able to scratch the surface. We’ll look at how to use jQuery to manipulate your page in response to user actions and some basic methods for making your pages seem a bit more alive.

What Should I Know Before I Start?

You should know your CSS selectors pretty well. If you need a tutorial, see the previous article in this series. You should also understand that programs operate sequentially, which means that they execute one statement before moving on to the next. (Exceptions to this exist, especially in the realm of threaded applications, but they’re far more advanced than the scope of this introduction.)

Getting Your Head Straight

The first thing you’ll need to do is include the jQuery library in the <head> section of your page or template. You can do this easily by adding this line to the end of your <head>:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Making Things Do Things

Here’s an example. Let’s say we have this HTML snippet somewhere on our page:

<button id=”MyButton”>Blackout!</button>

As it stands, we’ll get a button, but the button won’t actually do anything. Let’s make it do just what it sounds like; we’ll change the background color to black and the text color to black as well.

The first thing we want to do is select the button we’re going to attach an action to. To do that, we’ll use a special jQuery function called $. Yes, in Javascript, “$” is a valid function name. (Experienced programmers may take a moment to weep, if needed.) In any case, $ is a function that essentially means “find this CSS selector on the page and return all elements that match”. So $(“body”) will select the main <body> tag. $(“p”) will select all paragraphs. $(“.MyClass”) will select all elements that have the class attribute “MyClass”. Basically, if you can use it in CSS, you can feed it to jQuery and get back what you’re looking for.

So let’s start by selecting our button.

<script type=”text/javascript”>
     $(“#MyButton”)
</script>

Having selected the button, though, we actually have to do something with it. We’ll use a method called “click,” which activates when the element is, well, clicked.

<script type=”text/javascript”>
     $(“#MyButton”).click()
</script>

Note that if you try this, you’ll get an error. That’s because .click() requires a parameter, which is what we want to have included when the element is clicked. To send that info, we’ll use an anonymous function (a function that we never bother to name). It ends up looking complicated, but just know that it means “when this element is clicked, execute this function”.

<script type=”text/javascript”>
     $(“#MyButton”).click(function() {
          $(‘body’).css(‘background-color’,’#000’);
          $(‘body’).css(‘color’,”#000 !important);
     }
</script>

Notice the use of the “css” method to change the document’s CSS rules on the fly. This can be used to resize or even reposition elements based on user input.

Phenomenal Cosmic Power . . .

There’s a lot you can do with jQuery, but there’s a definite investment of time in learning how the different methods work. You can see the current list of elements in the library at https://api.jquery.com/. The best way to learn jQuery is to experiment a little bit, and feel free to reach out to me if I can help with a particularly tricky function. Next time, we’ll move on from some of the techy pieces and focus instead on how to create good navigation for your audiences.

  • Analyze
    • Defining Your Audience and Message
  • Design
    • Choosing a Platform
    • Understanding Basic HTML, CSS and JavaScript
    • Finding Your Way Around Navigation
    • Picking Good Colors
  • Develop
    • Writing Good Code
    • Writing Good Content
  • Implements
    • Testing Your Site and Why It Matters
    • Getting Noticed
  • Evaluate
    • Analyzing Your Analytics
    • Feeding the Beast

Learn more about the use of technology in your church by subscribing to this blog!

Subscribe to the CTS Blog Technology & Your Ministry

Previous Article
5 Google Tools You Should Be Using on Your Church Website
5 Google Tools You Should Be Using on Your Church Website

Websites have a rather interesting history. At first, they were difficult to create and required...

Next Article
5 Reasons Why Your Facebook Page Doesn’t Replace Your Church Website
5 Reasons Why Your Facebook Page Doesn’t Replace Your Church Website

It’s a trend among some churches, especially smaller ones, to have only a Facebook page and no...