Tag Archives: javascript

Javascript

Javascript: Extract a specific character in a string

Came across this today and really liked it as a quick tip.

If you want to extract the ‘n-th’ character from a string in Javascript, you can do this:-

"MATTHEW"[n-1];

So, if you wanted to pull out the 4th character, you would do this:-

"MATTHEW"[3];

The reason for subtracting one is that Javascript arrays are zero-based – that is, they start at zero rather than one.

You could also do the same with a variable:-

var string = "MATTHEW";
alert(string[3]); //returns the second 'T'

Web Development Web Links

Beautiful parallax effects

Parallax effects on webpages can be awesome if done well.   I’m still pretty new to js and web development in the grand scheme of things, so haven’t figured out how to do them yet (I will though), but I think they’re very cool.

parallax

Parallax.js by Matthew Wagerfield is a ‘simple, lightweight parallax engine that reacts to the orientation of a smart device’, and, based on the demo here, it’s pretty impressive.  The graphics and animation used are beautiful and if you run it on your iPad or iPhone and move it about, the effects are pretty spectacular.  Do follow the link, as the picture above doesn’t do justice.  If you don’t have a mobile device you can move your mouse about to get an idea of the kind of effects you’ll get with motion.  It kind of reminds me of the effects in Little Big Planet.

I’d love to put something together like this one day.  The project GitHub page is here.

Web Development

How ajax works – a simple tutorial

ajax

Note: this post isn’t about the cleaning brand.

Whether you’re new to web development or not, no doubt you’ve heard of ajax somewhere on the web.  Often considered tricky or fiddly to implement, libraries like jQuery have made it not only accessible, but straightforward to use.

In this article I want to explain in the simplest terms the general concept of ajax and how it works in order to give you a good overall image of what is happening behind the scenes in pages that use the now seemingly ubiquitous concept.   Whilst a lot more does happen behind the scenes than I discuss here, I think the basics should be enough to begin with.

So, what is ajax exactly?   Ajax stands for Asynchronous Javascript And Xml, which nowadays I suppose is a bit of a misleading term, but the concepts are still sound.  It describes the fact that a request can be made via javascript code to another server asynchronously (ie, without any perceivable hangup in the browser) and the browser can deal with the returned data and even update the page you are looking at in real time without having to refresh.  That’s my simplified take on it, anyway.

AJAX these days is pretty much everywhere, from Google Maps to Twitter, and basically describes any action that does something with data that isn’t on the page you’re currently looking at.  Dynamically and without having to click the refresh button, new content can be added to the page and databases can be updated.  It’s one of the steps towards making web applications behave more like native desktop apps and is one of the technologies that makes applications like (for example) Google Spreadsheets work.

How does it work then?  Let’s start with webpages in general.  When you visit a URL, the following happens (at the simplest level):-

  1. Your browser sends a request to a url and awaits a response.
  2. The receiving server processes the request and sends back some content (likely html).
  3. This data/content is then received, parsed, processed and rendered on screen in the browser.

You don’t really see any of this happening, you just press enter, or click a link, and a few seconds later, you see some content on the page.  Next time you click a link imagine what is happening (at some speed, I must add) behind the scenes.  Fascinating stuff, isn’t it?

So.  On to ajax.  How does that work?

You probably won’t be surprised to hear that more or less the same thing happens, only in the background and without any movement away from the page you’re looking at.  Lets say you’re looking at a page with a button on that, when clicked, pulls the latest weather report from another site (such as  the BBC) and displays it on your page.

Here’s what happens (again, oversimplified):-

  1. You press the button
  2. Some javascript code reacts to the pushed button by sending a request to a url, after which it awaits a response.  You can still continue to use/view the page whilst this happens.
  3. The receiving server processes the request and sends back its response to the function that called it.  Again, this can be html, but could also be text, xml or another data format (such as JSON).
  4. The function that was called by the button press listens out for a successful response in answer to the request it made.  Once it has received this, it receives the data that has been sent back and does something with it.  In our example, it is some weather data.  If the response is an error, it can be programmed to react accordingly.
  5. Another part of the same function, or another one, processes the received data and dynamically displays something on the active webpage.  If an error occurred at some point, the function could display an error message in the same way.

Amazing stuff, isn’t it?  The general technology of ajax is driving much of the web today, from live updates on twitter to google maps.  Getting your head around the concepts of what is happening is the first step in being able to use it yourself.

Now you know the basics, the next thing is to learn how to use it.  As mentioned earlier in the article, there are a lot of pre-built javascript libraries that can abstract and simplify a lot of the complex code and make it easier to use and process the returned data.  jQuery is a great example and provides some extremely straightforward ways of dealing with ajax, especially if you are designing for browsers that might deal with ajax in subtly different ways.

In a future article I’d like to post more about ajax, including a couple of tutorials on how to implement it in your pages.  Until then, why not do a little research yourself on the web?

Comments and questions are, as always, very welcome.

Javascript

Javascript quick tip – returning urls

A few quick Javascript tips for you.  If you want to return or store the value of the current url of your page, try this:-

window.location.href

This will give you the entire url that is displayed in the address bar.

 

If you have a url containing a hash value (ie http://www.2toria.com/index.php#section1) and want to return the hash, then use this:-

window.location.hash

 

Want just the top-level domain name (eg www.2toria.com)?  Give this a whirl:-

window.location.hostname