JavaScript Inheritance

Inheritance in JavaScript is an interesting and important topic. But it can sometimes be a bit tricky to grasp because JavaScript is quite a bit different from class-based languages like C++ and Java. In what follows, we’ll look at how to do inheritance in JavaScript and some things to watch out for. Before you dive into this you should have a decent understanding of the basics of JavaScript and JavaScript objects. W3 Schools has a really good quick introductory overview of JavaScript (complete with examples and exercises that you can try yourself) that can be found here.

There are many different ways to create objects in JavaScript because, well, pretty much everything is an object. However, for our purposes here when we’re discussing objects we mean the generic “Object” in JavaScript, the dynamic type that we can throw any data that we want into in a collection of key-value pairs. And taking it a step further, when we say generic “Object” what we’re really talking mostly are functions and object literals. These will be the center of our focus when discussing inheritance in JavaScript.

An empty generic “Object” object can be created in JavaScript by doing the following…

var animal = new Object();

But objects are often initialized with data. This can be done using the Object literal approach as shown below…

var Animal = {
    color: "brown",
    size: "medium"
    age: 1,
    sound: function() {
        console.log('Grunt');
    }
    move: function() {
        console.log('Running');
    }
}

We can accomplish the same thing that we did above by creating a function and then assigning properties to the function…

function Animal() {
    this.color = "brown",
    this.size = "medium"
    this.age = 1,
    this.sound = function() {
        console.log('Grunt');
    }
    this.move = function() {
        console.log('Running');
    }
}

NOTE: The function and the object literal are actually not *exactly* the same. There *are* some differences between function Animal() { } and var Animal = function() { }; mainly having to do with how and when JavaScript executes these functions at runtime. You can, for example, call function Animal() elsewhere in your code before you declare the function, but you cannot call var Animal = function() { } before you declare it. You will get an error. It’s treated as the same situation as trying to use a variable before defining it. This is due to something called “hoisting” which I recommend doing a search for if you are interested in the technical side of it.

The benefit of using a function is that we can create a new instance of different Animals if we want.

var dog = new Animal();
var cat = new Animal();
console.log(dog.size);
console.log(cat.size);

There’s a problem with this though. All the animals that we create all have the same size, color, age, etc. We’re going to want our animals to all contain different types of data. To do that, we can slightly modify our function such that we pass arguments into the constructor.

function Animal(color, size, age, sound, move) {
    this.color = color,
    this.size = size
    this.age = age,
    this.sound = function() {
        console.log(sound);
    }
    this.move = function() {
        console.log(move);
    }
}

Read More »

JavaScript Events

Events are where all the magic happens in JavaScript. Whatever context you are working within (be it a browser window or on the system/server level using Node.js), it’s pretty safe to say that a lot of “stuff” is constantly happening… clicks, loads, mouseovers, AJAX requests and responses — these are the types of things your website or application will need to respond to. In this section we will take a look at how we can use events in JavaScript…

Adding Events in the DOM

Like with many things in software, there are many different ways to do things. In the past you may have often seen stuff like the following…

<script type="text/javascript">
function showMessage(){
   alert("Hello world!");
}
</script>
<input type="button" id="messageButton" value="Submit" onclick="showMessage()" />

Here we are adding an event to this button by calling a function in the onclick attribute. This code will work fine in all modern browsers (and even really really old browsers). However this is not exactly the best approach because it intermixes application/business logic (JavaScript) with our view (HTML). A better approach is to pull this code out of the view…

var b = document.getElementById("messageButton");
b.onclick = function(){
    alert("Hello World");
};
<input type="button" id="messageButton" value="Submit" />

Here we have created a separation of concern and our button is free from having business logic intermixed within it.

Read More »

Simple Social Sharing Links for WordPress Without a Plugin

Today I am going to show you how to create very simple social sharing links for your WordPress blog. We all know that there are a gazillion different WordPress plugins out there to handle social media, but these may not always give you the exact customization that you want. Maybe you want to have text-only “share” links and the plugin does not support this. Maybe you want to use different icons than the ones the plugin provides. Maybe you want to format/position these icons differently from how the plugin does it by default. If this describes your situation, this post will help you get off to a good start with that.

So below are some basic WordPress ready sharing links for some popular social media websites. Please note that these links will work at the time this post was written. Websites often change their APIs and it is possible that the URLs to share out content on these social sites may have changed since the writing of this post… so be sure to check that all of these examples still work. If any do not, consult the website of the social platform in question and look for any advice on blogs and forums on how to change the link to something that will work with an updated API. And please do let me know if any of these do not work as well. 🙂

I have just kept the format of the links as plain text since it’s the most basic HTML that most people probably understand best. All you have to do is simplly paste the following code into the index.php or single.php or any other .php file of your WordPress theme. From there you can format and style these links however you like.

<a href="https://facebook.com/sharer.php?s=100&p[title]=<?php the_title(); ?>&p[url]=<?php the_permalink(); ?>" target="_blank">Facebook</a>
<a href="https://twitter.com/home/?status=<?php the_title(); ?>%20<?php the_permalink(); ?>" target="_blank">Twitter</a>
<a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank">Google+</a>
<a href="https://digg.com/submit?phase=2&amp;url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>" target="_blank">Digg</a>
<a href="https://stumbleupon.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>" target="_blank">StumbleUpon</a>
<a href="https://delicious.com/post?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>" target="_blank">Delicious</a>
<a href="https://reddit.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>" target="_blank">Reddit</a>

And that’s all there is to it!