Web development #6: Getting interactive with JavaScript

We’ve come pretty far by now! We’re almost there actually. After reading this post you should be able to create pretty awesome websites using the full web development stack! So what’s left for us to discover? We have seen we can build dynamic websites on the back end using PHP, but what about being dynamic once the page is loaded? Well that’s where JavaScript comes into play!

  1. Web development #1: Internet and the World Wide Web
  2. Web development #2: Our first website using HTML
  3. Web development #3: Styling our page with CSS 3
  4. Web development #4: PHP in the back
  5. Web development #5: User input with HTML Forms
  6. Web development #6: Getting interactive with JavaScript
  7. Web development #7: Dynamic page updates with AJAX
  8. Web development #8: Where to go from here

The websites we’ve build were all pretty amazing. We’ve started simple using just HTML, added some CSS, then we added some dynamic content and we could even upload our own content. I don’t know about you, but I think that’s pretty amazing. However, I still feel like our pages are missing a little… schwung! How about highlighting buttons, sliding content in and out of our page? Just some fancy visuals that will make our website stand out. JavaScript comes to the rescue.
As an added bonus we can make calls to our back end without refreshing the entire page using AJAX. More on that later, let’s look at some fundamentals first.

JavaScript fundamentals

JavaScript has been around since 1995. It’s easy to learn, but hard to master. I’m not going to spend a lot of time on the syntax because it looks (and behaves) a lot like PHP, including truthy and falsey). I’m just going to write code. Try to keep up. I’m still writing in Notepad++ by the way. We also won’t be needing XAMPP to run basic JavaScript in this post (we’ll be needing it later for AJAX though).

One thing you should know about JavaScript is that, like CSS, it can be embedded into your HTML. But we don’t want that. In my post about CSS we learned to keep HTML and CSS seperated, which makes it easier for you to remodel your page by simply replacing some CSS files. We’ll use the same approach for JavaScript.

So let’s take a look at our first example. Yes, it’s going to be Hello world! Not the most exciting example, but you’ll see JavaScript in action. So we start out by creating a very simple HTML file. Call it whatever you like.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My first JavaScript!</title>
        <script type="text/javascript" src="MyJS.js"></script>
    </head>
    <body>
        <button onclick="sayHello();">Press me!</button>
        <p id="output"></p>
    </body>
</html>

And now in the same folder create a file called MyJS.js. Inside it put the following code:

function sayHello () {
    var output = document.getElementById('output');
    output.innerHTML = 'Hello JavaScript!';
}

So let’s look at both the HTML and JavaScript. First in the header of the HTML you’ll notice I’ve added a script element. In this element I define the type and src attributes. Pretty straightforward I think. Your HTML now simply loads the specified JavaScript. In an actual server-client environment this means that the JavaScript files are sent to the client together with the HTML page.
Other than that we see a button element with an onclick event. Now whenever the user presses a button an event fires. An event is simply a notification you can subscribe to. In this case we subscribe by specifying onclick and telling it we want the function sayHello to be executed.

Now this function, sayHello, is defined in our MyJS.js file. It does the following. We declare a variable called ‘output’ using the var keyword. We assign it the result of a function called getElementById that takes a string as input parameter and is defined on something called document. Now your document is a variable that your browser gives to you and it represents your HTML content. So we’re almost literally saying “document, give me the element with id ‘output'” and guess what it returns? Yes, our p element with id ‘output’! Now that we have our paragraph we can alter it any way we see fit. In this case I’m simply going to give it the text “Hello JavaScript!”.
There’s more functions like getElementById, like getElementsByName() and getElementsByClassName(). Once you have an element you can get its child elements (using children()), its parent element (using parentElement()), its ‘neighbouring’ elements (using previousSibling() and nextSibling()) and much more. What we’re basically doing is traversing and altering the DOM (Document Object Model, or your HTML document).

Now here’s why I like and dislike JavaScript. It took me about fifteen minutes to get this example running… Fifteen!? Yes. Why? Because I spelled ‘innerHTML’ as ‘innerHtml’ and what does JavaScript do? You might say it gives us an error saying innerHtml does not exist. Wrong, what it actually does is create innerHtml on the ‘output’ variable (or more precisely the object it references). It doesn’t do anything with it, it just sits there. But in the meantime innerHTML remains empty, my page doesn’t show “Hello JavaScript!” and I’m not getting an error of any kind.
So with JavaScript you can actually alter already existing objects! How cool is that? Pretty cool, but it can lead to very subtle and hard to troubleshoot bugs, so be careful. That is also why you should always use the var keyword when creating variables. Failing to do so will work fine, but will actually create a property on your this object (the object, or context, you’re currently operating in).

And that’s actually all I’m going to tell you about basic JavaScript. The standard library is actually pretty difficult to work with and you’ll often deal with bugs like the one I just described. To top it off different browsers can behave differently using the same JavaScript code. Luckily (and also a bit unlucky) there are literally thousands of libraries and frameworks that do all the hard stuff for us. One of those libraries has become so popular that it has become the de facto standard when working with the DOM, I’m talking about jQuery.

Getting started with jQuery

There are two ways to get jQuery included in our page. One we have already seen. We get the jQuery files from jQuery.com, put them on our server (or during development our local machine) and get them in our page using the HTML script element. There are two versions you can get, the regular or the minimized version. The regular version is great for development as it is easier to debug. The minimized version has all unnecessary characters like spaces, meaningful variable names, white lines etc. removed from the file, making them practically unreadable, but making the file a little smaller in size making it to load a bit faster on our webpage. A lot of libraries have regular and minimized versions.

For this example we’re going to use the second method to get jQuery in our page though, which is through a CDN, or Content Delivery Network. A CDN is just some host providing you with popular files you might need, like jQuery. A possible benefit of using a CDN is that they might have servers across the globe, which means that if someone in America is using our website hosted in Europe they could still get jQuery from a server near them. Another possible benefit is that you don’t have to host the file yourself. So if you can, use a CDN.
Popular CDNs are Microsoft and Google, so let’s go with the Google CDN.
One word of caution though. Whenever your website requests a file from any CDN the host of that CDN may track the users of your page (they’re making a request after all). So while this is probably no problem for your personal website, it may be an issue for corporate environments where privacy and security are of bigger importance.

Let’s have a look at how our header looks with jQuery from a CDN.

<head>
    <meta charset="utf-8">
    <title>My first JavaScript!</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="MyJS.js"></script>
</head>

So you see, it actually looks the same, but we’re putting a link in the src attribute. Also notice that I put jQuery above MyJS because MyJS is going to need jQuery to run. Now let’s rewrite that sayHello function we had so it uses jQuery.

function sayHello() {
    var output = $('#output');
    output.text('Hello jQuery!');
}

Looks weird? $ is actually a perfectly valid function name in JavaScript and jQuery is utilizing it. $ is also called the jQuery function and alternatively you could’ve used jQuery(‘#output’). Now notice what we pass as a parameter to the jQuery function. It’s a CSS selector! Yes, you can get ANY element (or elements) on the page using CSS selectors. That’s great because we already know CSS. And when we have our output element we set the text (the part between the opening and the closing tags) to ‘Hello jQuery!’.

Now remember that I said we shouldn’t have JavaScript in our HTML? Well, we still have our onclick event in the button tag, so I guess I lied. JavaScript doesn’t really have a simple elegant solution to this problem. But jQuery does (they made it simple)! First of all let’s change our button tag so it doesn’t hard wire that onclick event.

<button id="btn">Press me!</button>

And next let’s take a look at our JavaScript.

$(document).ready(function () {
    $('#btn').on('click', sayHello);
});

function sayHello() {
    var output = jQuery('#output');
    output.text('Hello JavaScript!');
}

As you can see I’ve added a $(document).ready(function) call to our JavaScript page. That might look arcane, but it’s really simple actually. We call the jQuery function and pass it our document. We’re getting something back which obviously has a ready function that takes a function as parameter. This function, also called a callback function, is called when the document is ready (the HTML has loaded and is ready for traversal and manipulation). We then create an anonymous function to be called. It’s really the same as our sayHello function, except that we don’t give it a name. So in this anonymous function we get our button element and then call the on function on the result. With the on function we can hook up events to our elements. In this case we want the click event and we specify a function to be called when the click event fires (the button is clicked).
Here’s an alternative way of writing the above. I’m using a shorthand notation for $(document).ready by simply passing an (anonymous) function directly to the jQuery function.

$(function () {
    $('#btn').on('click', function () {
        $('#output').text('Hello jQuery!');
    });
});

Let that sink in. Study the syntax and compare the two examples. Take a look at how I rewrote the sayHello function to an anonymous function in particular, it may help understanding what’s going on. You may also want to try rewriting this using no anonymous functions.

There’s a whole lot to jQuery that I cannot show you in this blog, but the jQuery documentation is actually pretty good, so be sure to use it!

Now I’m going to show you another trick with which you can create beautiful pages using classes and CSS. First create a CSS file called MyStyle.css and add the following style to it:

.hovering {
    color: white;
    background-color: blue;
}

Now let’s create a single paragraph we want to light up once you hover your mouse over it. Don’t forget to link your stylesheet!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My first JavaScript!</title>
        <link rel="stylesheet" type="text/css" href="MyStyle.css">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script type="text/javascript" src="MyJS.js"></script>
    </head>
    <body>
        <p id="p">Try hovering over me!<br>
        An extra line<br>
        so it's easier<br>
        to hover...</p>
    </body>
</html>

Nothing special there. Now for our JavaScript:

$(function () {
    $('#p').hover(function () {
        $(this).addClass('hovering');
    }, function () {
        $(this).removeClass('hovering');
    });
});

So we get out p element and then call the hover function which takes two functions as input. One function is called when your mouse enters the paragraph and the other function is called when your mouse leaves the paragraph (moving your icon over an element is called hovering). Now in this function we call the jQuery function and pass it this. The this keyword is a little difficult in JavaScript. This is the context in which you are currently operating, so this can refer to the window object (the ‘general context’), to an object in which you are currently operating, or in this case the HTML element on which the hover event is fired. So when we pass the p element (this) to the jQuery function we get a jQuery object on which we can call jQuery functions, such as text or addClass and removeClass. So we’re dynamically adding classes. But since our CSS applies a certain style to those classes we now get dynamic styling on our page!

jQuery UI

I want to show another quick example of how powerful JavaScript, and jQuery in particular, really is. For this we’re going to need jQuery UI. Another library that’s made by the jQuery people and uses jQuery, but adds functionality specifically for your UI (User Interface). Next to a JavaScript file the jQuery UI library makes use of a CSS file too. We can get both from the Google CDN we’ve used earlier. So here is the HTML. It looks large, but it’s quite simple.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My first JavaScript!</title>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
        <script type="text/javascript" src="MyJS.js"></script>
    </head>
    <body>
        <div id="accordion">
            <h3>Page 1</h3>
            <div>
                <p>Some content...</p>
            </div>
            <h3>Page 2</h3>
            <div>
                <p>More content...</p>
            </div>
            <h3>Page 3</h3>
            <div>
                <p>Lots of content...</p>
            </div>
        </div>
        <br>
        <div id="tabs">
            <ul>
                <li><a href="#page1">Page 1</a></li>
                <li><a href="#page2">Page 2</a></li>
                <li><a href="#page3">Page 3</a></li>
            </ul>
            <div id="page1">
                <p>Some content...</p>
            </div>
            <div id="page2">
                <p>More content...</p>
            </div>
            <div id="page3">
                <p>Lots of content...</p>
            </div>
        </div>
    </body>
</html>

And now for some amazingly difficult JavaScript…

$(function () {
    $('#accordion').accordion();
    $('#tabs').tabs();
});

So check out the result with and without those two lines of JavaScript. You’ll be amazed! And that’s the power of JavaScript.

So in this post we’ve become familiar with JavaScript and jQuery. You can build amazing websites using JavaScript. There are literally thousands of JavaScript (and CSS) libraries and frameworks. Some, like jQuery, are pretty all-round, but some are really specific about doing one particular thing. In a later blog post I’ll point out some of the more popular ones.
Try to play around a bit with JavaScript. We’ve only scratched the surface. I haven’t even mentioned prototype, which is vital in fully understanding JavaScript. You can start getting your JavaScript skills up to date with a free ebook from SyncFusion: JavaScript Succinctly. Now as luck would have it there’s also a free jQuery ebook from SyncFusion: jQuery Succinctly. So I recommend creating a free account and downloading these sweet free resources (and no, I’m not affiliated with SyncFusion, I just like the Succinctly series).

JavaScript also adds functionality to get data from or send data to our server without having to refresh our entire page. This technology, called AJAX, is what I will talk about in my next blog post.

Stay tuned!

Web development #3: Styling our page with CSS 3

This is the third installment of a blog series about web development. You can find other blogs here:

  1. Web development #1: Internet and the World Wide Web
  2. Web development #2: Our first website using HTML
  3. Web development #3: Styling our page with CSS 3
  4. Web development #4: PHP in the back
  5. Web development #5: User input with HTML Forms
  6. Web development #6: Getting interactive with JavaScript
  7. Web development #7: Dynamic page updates with AJAX
  8. Web development #8: Where to go from here

In this part of the ongoing series on web development we’re going to apply some style to the web page we created in the previous blog post. So if you haven’t read that one please do, or at least get the page’s HTML at the bottom of that post.

About CSS

CSS stands for Cascading Style Sheet and is used to apply styles to your web page (for example setting backgrounds or changing fonts) and create a layout (position elements relative to each other). CSS, like HTML, has a history of incompatibilities and non-supportive browsers too. While CSS 1 (actually level 1) has been around since 1996 it wasn’t until 2010 that most browsers fully (and more or less correctly) supported CSS. Again, each browser renders web pages differently, making it important to test your CSS in different browsers.

We’re currently at CSS (level) 3. What’s different from CSS 3 compared to it’s predecessors (CSS 1, CSS 2 and CSS 2.1) is that it’s divided into modules like Color, Font and Animations (there’s actually over fifty modules *gasp!*). This allows for various styling options to be developed independently. As a result various modules have various statuses and only a few are actual recommendations (as opposed to draft or work in progress).

Now why is CSS so important? It clearly seperates your content from your visuals. It’s basically what do you want to convey vs. how do you want to convey it. The ‘what’ goes into your HTML and the ‘how’ goes into your CSS. And having seperated this it’s easy to create a new page for your website without having to worry about styling. Or you may want to give your website a cosmetical make-over without having to change it’s contents. As a bonus both your HTML and your CSS documents will look cleaner and be easier to read!

Syntax of CSS

So enough with all those history lessons already! Let’s look at some CSS. There are actually three ways to apply CSS to your HTML. The first is inline, meaning you’re defining it in your HTML elements with a style attribute, which we just said we don’t want to do. The second way is to embed your CSS into your HTML’s head section. That already sounds better than inline, but it’s still not good enough (we’d still have to edit our HTML file for style changes). The third method, and the one we will use, is to define your styling in a seperate file.

So simply start up your text editor (again Notepad or Notepad++) and save it as “mystyle.css” (where “mystyle” is a name of your choosing). The first thing you need to do when applying a style is thinking to what you want to apply the style. Let’s say we want our headers (more specifically our h1 elements) to have a red text color. You’d start by writing a selector. In this case the selector is simply h1. Notice that a comment (for human readers) is started with /* and ended with */.

h1 {
    /* Your style here... */
}

Easy as that. Now inside the curly braces (you know them from C, C++, C#, Java, etc.) we’re going to define the style, which will be applied to our h1 elements. This looks like “property: value;”. So let’s define the red color.

h1 {
 color: red;
}

That’s deceptively easy. Yes, CSS can be that easy, but once your layout gets a bit more complicated… So does your CSS. You can put multiple properties in a single selector too. So save your document (for now preferably in the same folder as your HTML document, or you’ll have to change the path in the href attribute below). We’re going to apply this style to our HTML document (the one from the previous blog). Open up the HTML and add the following line of code to your header (for example at the bottom, just above your </head> closing tag):

<link rel="stylesheet" type="text/css" href="mystyle.css">

I’m not going to elaborate on the link element any further. We’ll see it again when we’re going to use JavaScript. Now open your HTML document and you’ll notice that your header is actually colored red! Pretty awesome.

Selectors

So we just started by writing a selector, in our case the selector for h1. Selectors can be pretty tricky though. Remember that HTML elements can be nested? In our page we have an aside element containing an h2 element and some p(aragraph) elements. Let’s say way want to target that h2 element and make it blue. If we used h2 as our selector all h2 elements would be blue (go on, try it out). We can target elements within elements by combining them in the selector.

aside h2 {
    color: blue;
}

This will make all our h2 elements within aside elements blue. And you can keep combining this. I should mention that any h2 element within the aside element, even when it’s nested into other elements, is now blue. But suppose you only want the h2 elements that are directly parented to the aside element. You can now use a context selector by using the > symbol.

aside > h2 {
    color: blue;
}

Now what if you had two aside elements, both containing a h2 element, and you only wanted one of the two to be blue. For this we have two choices and both requires us to go back to our HTML. The first is working with IDs and the second is working with classes. We’ll look at them both.

Every HTML element can have at least the following two attributes: id and class. We can use them in our CSS (and later JavaScript) to group and/or identify specific elements on our page. In the next example I have modified a piece of our page so it contains some IDs and classes.

<h1 id="title">Our first webpage!</h1>
    <p><abbr class="info" title="HyperText Markup Language">HTML</abbr> stands for <b id="HTMLfull" class="info">HyperText Markup Language</b>.</p>
    <p>The language consists of <i class="info">tags</i> that describe the content of a document.
 For example, a tag can indicate that a certain text belongs to a single paragrah,
 that certain text is more important, less important, that an image should be displayed, or that a new line must be inserted.</p>

As you can see the h1 element has the ID “title” and the b element has ID “HTMLfull”. Furthermore I’ve added the “info” class to the abbr, b and i elements. Now let’s style them in our CSS. Let’s say we want everything that’s “info” to be light blue and we want the text HyperText Markup Language to be bigger too.

.info {
    color: lightblue;
}

#HTMLfull {
    font-size: 150%;
}

Give your IDs and elements a descriptive name, for example “info”, instead of “lightblue”, “lightblue” says something about your style, while “info” says something about your meaning. So in this example I’ve shown you how you can use IDs and classes and even combine them (in case of the b element which is now lightblue and big). Another tip, keep your IDs unique, even though HTML and CSS don’t enforce it.

Now let’s say you want all i elements of class “info” to be purple. No problem!

.info {
    color: lightblue;
}

i.info {
    color: purple;
}

But in this case we have a conflict! The i element should be lightblue, because it has the info class. However, it should also be purple, because it is an i element with the info class. As you can see CSS applies some rules of precedence. As a rule of thumb the most specific selector take precedence over less specific selectors. In this case an i element with class info is more specific than every element with class info, so the i element gets a purple color.

Last, but not least, you can use a * as a wildcard to specify any element. For example, you want every element in an element (let’s say an aside) to have a specific style, but exclude the aside itself. You can use the following.

aside * {
    /* Your style here... */
}

Layout

Now let’s make our page more fancy. Let’s add some layout. First we want our page to only cover a part of the screen, let’s say 50%. We also want to center it in the middle of the screen. That’s a bit tricky, but we’ll have to work with margins (the area around an element). So we’ll define a margin of 0 and let our browser figure it out. We’re also going to put some background picture on our page. I’ve taken a picture from Google and decided to use it as a background (be sure you’re not using any copyrighted stuff!). So we’re going to apply this style to our entire page, which is the body element.

body {
    background-image: url(http://p1.pichost.me/i/24/1475865.jpg);
    width: 50%;
    margin: 0 auto;
}

Wow! Our page is already beginning to look quite nice! Now remember that aside element we had? I want it to stand out a bit. Let’s put a (solid 1 pixel) border around it. I also want it to have a sort of semi-transparent white-y background, if you know what I mean (and if you don’t you’ll see for yourself). Here’s the CSS for our aside element.

aside {
    border: 1px solid black;
    background-color: rgba(255, 255, 255, 0.6);
    padding: 3px;
}

I put the padding there to create some distance between the border and the text. The padding is like the margin we used earlier, but where margin defines the space outside the element padding defines the space inside the element. 3 pixels proved to be enough space (found through a little experimenting).

I’m also still not satisfied with the h2 element within the aside element. I’ve added some extra styling.

aside h2 {
    color: blue;
    border: 2px solid black;
    width: 25%;
}

Blocks

As a finishing touch I want our image to be centered horizontally. Unfortunately that’s not as easy as it sounds. I haven’t mentioned this before, mainly because this is where it matters most, but HTML has two kinds of elements: block elements and inline elements. Basically, block elements represent a significant item that represents a rectangular block of space on a page. Examples of such elements are the p elements, h* elements and ul and ol elements (unordered list and ordered list respectively). Inline elements are smaller items on a page that reside within block elements. Examples are the a, u, em and strong elements.

So far, when we wanted to change the position of an element, they were block elements (the body and h2 elements). The img element, however, is an inline element. That means browsers usually just render them on the same line as their surrounding content and inline position jumps are just a bit weird. So we’ll have to let CSS know to treat the img as a block element before we can reposition it. Luckily that’s pretty easy! We can reposition the image the same way we repositioned the body, using the margin.

img {
    display: block;
    margin: 0 auto;
}

Now look what happens when you alter your paragraph as follows (remember that HTML actually ignores line breaks, so the below example shows the text and image on the same line by default).

<p>HTML 5 is awesome!<br>
Text before the image! 
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_128.png" alt="The HTML 5 Logo" title="The HTML 5 Logo">
Text after the image!</p>

Now try turning display: block; on and off (by removing the CSS). See the difference? Also notice that the margin does nothing for the image when it’s not treated as a block element. Now suppose we really need that text on the same line as the image, but we want the image in the center. In this case we can use float to lift up the image and take it out of the normal content flow. You can do this for all block elements and it’s specifically handy to create a menubar on the left or right side of the screen.

img {
    display: block;
    float: right;
    margin-right: 50%;
}

Notice that I float to the right side of the screen and then use the right margin. I do this because if I floated to the left the text would be placed behind the image instead of at the beginning of the line. The float property can also mess up your layout, try using the clear property on adjacent blocks to fix this.

We’ve just seen a small part of CSS. There’s many more properties that you can use to create awesome styles and layouts. Like with HTML CSS is pretty forgiving, meaning that if you made a type your browser will probably figure out what you meant and display your page correctly. Again I advise you to follow the standards and validate your CSS against the W3C CSS Validation Service. Try experimenting with HTML and CSS to get the hang of it and learn new things. Also, don’t miss the next blog!

Stay tuned!