In parts one and two, we've covered a few of the primary web development languages: PHP, SQL, HTML, and CSS. Let's get into a few of the more advanced languages. Explanations of these will be brief as some of the concepts here can be difficult to grasp until you are actually developing and need them.
XML and JSON :: The MOUTHS of Web Development
XML is the language that HTML is based on. It is structure, structure, structure when it comes to data! XML quite simply defines ownership, relationship, and type for data.
Huh? Ok, here's an example using vehicles. You have four vehicles, two are cars, one is a glider, and one is a motorcycle. Let's assign some attributes to these vehicles using XML (JSON has a different look to it, but the structure and concepts are the same)...
See the Pen Example Embed 5 by Skoti-Alain Elliott (@swinginsam) on CodePen.
So what we have here is a set of data structured to show its relationship to other data. We also have some attributes that relate to the data object that it is describing. So, for a car, we have manual and automatic transmissions, but we don't have wings - that would be invalid as cars don't have wings. True, too is the fact that there are no gliders with transmissions, so that attribute is not even available.
Because XML and JSON are so semantically precise, they are most often used in web development to transmit data from one application to another. The structure part is vital in telling the receiving computer what the data means and what it represents - that way you don't end up with a bunch of flying cars.
Javascript :: The MUSCLE of Web Development
Javascript is another logical language like PHP and, in fact, is written and structured in a very similar way. But javascript, unlike PHP is a client-side language.
As an example, let's make a simple colour changer...
See the Pen Example Embed 6 by Skoti-Alain Elliott (@swinginsam) on CodePen.
By selecting a colour from the pull-down, we are changing the background colour of the box below it. The decision as to what colour to change the box to is being made on your computer by taking the value from one existing element (the pull-down) and applying it to another existing element (the box.)
You see these types of decisions being made all the time in web development. Forms use them all the time. Javascript is used, for instance, to validate information that you enter into a text box. Let's say that you are on a website that has a "subscribe to our newsletter" form. This very simple form requires you to enter your email address into a text box and click the 'submit' button. Well, Javascript will be the language used to (1) make sure that you have actually entered something into the box; and (2) make sure that what you entered is actually an email address and not, say, a telephone number.
So Javascript looks at what you entered, designs@swinginsam.com, to make sure that there is a name followed by the @ sign, followed by a domain, followed by the domain type (.com, .org, .net.). Without going into how we do this (booooooring!) suffice it to say that +1(917) 555-1212 will not pass the test and javascript will respond with something like "Please enter a valid email address."
jQuery and Various Variations on Themes
Well, we're coming to the end here, but we can't finish without mentioning a few of the other languages that are absolutely vital, uber-powerful, but a bit too advanced to really get into. These languages are helper languages that speed up the processes of a website and completely change the way that you interact with the interface. It is very often possible, from a development level, to achieve most of an application or website's functionality without these languages but at a huge cost in speed, flexibility, style, compatibility, etc., blah blah. Let's look at a simple jQuery instance ('cause jQuery is so awesome) and stop there before I go on and on.
jQuery is a framework (or a set of tools) that bridges CSS, Ajax, and Javascript together into a powerful set of tools that modifies and greatly enhances the way javascript works.
Take, for instance, a set of six picture boxes. Each time you run your mouse over a box, it changes the colour of the border of the box. When you 'mouse-out' it resets the border colour, and finally, when you click the image, it opens a page or performs some function. So there are three functions for each link (mouse-over, mouse-out, and click) - times six, that's eighteen actions to take care of.
Let's look at the HTML for just one of those boxes with the standard javascript calls for each action (html4 style)...
<a id="link_1" href="javascript:ex_function('click','http://www.swinginsam.com')" onmouseover="javascript:ex_function('over',this);" onmouseout="javascript:ex_function('over',this);">
<img src="images/my_pic.jpg" title="My Picture" alt="My Picture">
</a>
That's just ONE box! And I'm using a single function to handle all of the different actions. Can you imagine if I used a separate function to deal with the mouse-overs, the mouse-outs, and the clicks? How about if we had twelve boxes instead of six? or twenty-four?! We'd be here all day! And then there's the javascript function - I'm not even going to bother writing that simply because...
Bah-ba-daa-duuum! jQuery to the rescue! With jQuery, I can simply assign a specific class to these boxes and perform a single, simple function to dynamically assign functionality to each box object. I can even assign width and height CSS to the box. First, let's re-write our single box...
<a class="box" href="http://www.swinginsam.com"> <img src="images/my_pic.jpg" title="My Picture" alt="My Picture"> </a>
Just look how much smaller that is. And it is easier to read and understand. Now, let's assign our width, height, mouse-over, mouse-out, and click functionality to it with jQuery...
See the Pen dvoqgx by Skoti-Alain Elliott (@swinginsam) on CodePen.
Ok, sure, that really does look like code, but in those few lines we have inserted 25 links into the page. We have assigned behaviours for the mouse-over and mouse-outs, and we have told each box what to do when they are clicked. In fact, these few lines don't care if there are 25 boxes or 25,000 boxes. As long as it is a link with a class of "box" it will perform these functions. We are talking about hours and hours of web development code-time saved and hundreds of lines of code eliminated, making the page load just that much faster.
Well, that does it for Internet Linguistics. I could have gone into Ajax, Regex, Perl, cURL, and the like but I think that is a little beyond the scope here. I know I tend to go on a bit, but I hope that there was at least something in here that was helpful. One thing is for sure, now you know just enough to be totally dangerous.
*3 - There is actually a server-side version of javascript that is a fairly powerful language, but, for various reasons, it is no longer widely used (sorry James) and, for clarity, simpler not to mention.