Code Perspective

I have just completed my first freelance site! It’s looking pretty great! I learnt a lot on this project and am really excited with the result. The full site can be found here. I’ll be posting this site in a portfolio page when I get that up and running but for now here are a few screenshots.

Home Page…

Portfolio Page…

Contact Form…

This is part 3 in a series of JQuery tutorials. I strongly recommend at least reading Part 1 before continuing with this tutorial. Part 2 is optional but would also be a great background before we get started. As for this tutorial, I will be going over creating an executing functions to make your code more efficient.

Often when writing JQuery code(especially for plugins) there are times when you need to execute the same block of code multiple times. Instead of writing them all out individually and making our code really terrible process wise, we can use functions and function calls to call the same block of code over and over.

Creating Functions

You can create a function in 2 different places. The first is in the same script tags, but not inside the document ready function. Or second, you could create a brand new script file and then reference that script file in your header. Inside this script file you could create your method and it would be able to be accessed by the main file.

To create a function, the syntax looks like this…

function nameOfFunction()
{
	//your code here
}

This tells the browser that there is a function called nameOfFunction that is not being passed any parameters. Passing parameters is something I’ll get into a little bit later. Now say you wanted to alert the user with a javascript pop-up box every time this function was run. You could add some code into the function to allow a dialog box to appear like so.

function nameOfFunction()
{
	alert("We are now alerting the user!");
}

Executing Functions

Now that we have a function created, we need to somehow call that function to execute. That’s where our javascript method calls come in. Let’s say we wanted to execute the previous function. The code would look like this.

$(document).ready(function(){
	nameOfFunction();
});

Of course this would call the function immediately after the page was ready. You can use a function call in JQuery in any function. So if you wanted to add it inside of a .click function you could do that as well. That’s all you need to do to execute functions in JQuery.

Passing Arguments to Functions

Let’s say you wanted a function to work with a piece of data from a form, but you didn’t want the function to retrieve that piece of data inside the function. You can use a piece of code called an argument to pass to the function. This allows you to pass values to a function so they can be used. To create a function with an argument then all you need to do is add the argument into the brackets in the function header. It looks like this.

function nameOfFunction(argument)
{
	//your code here
}

Now obviously since we have that argument in the argument ready to do something with it, we may also want to return a value back to the original function so that we can maybe display the result of a calculation or something like that. If we want to return a value all we have to do is insert a return value into our function.

function nameOfFunction(argument)
{
	var total = 10 + argument;
 
	return total;
}

This function will now accept a value, add 10 to that value and return it to the original function call. This way if we need to manipulate some data quite a few times, we could use a function to do that display the result.

Function Calls with Arguments

Now that we have a function made that’s accepting an argument and returning a value, we can use a function call and pass an argument to the function so it can do the calculation and we can then display the result. The function call looks something like this.

$(document).ready(function(){
	alert("The total is = " + nameOfFunction(10);
});

In our JQuery ready function we are now just displaying an alert. Inside the alert we are actually making the function call and passing a value of 10 to our function. The function is then going to add 10 to our passed argument and return a value of 20. The alert therefore is going to display – “The total is = 20″. And that’s all for basic functions and function calls.

I’ve decided to use a new site design until I have time to re-design my own. Thank you to Michael Tyson for supplying such an awesome design free of charge. I have to say I especially enjoy the photo border around all the photos.

Cheers

1. Do your homework – I can’t stress how important this is. There are plenty of websites out there dedicated to displaying the best websites for design on the net. Looking at different sites that are designed beautifully can help you out in designing yours the same way. Now I’m not saying to copy their sites directly or at all for that matter, but you should at least take into consideration the layout, graphic work and typography that went into creating that beautiful site.

2. Learn Photoshop – I can’t tell you how much of a difference this makes. Yes you can design a spectacular website in just CSS and HTML, but sometimes it’s just easier to do it as a picture in photoshop. This being said, doing up a photoshop mockup first can be extremely helpful to get the layout down before any coding actually starts getting done.

3. Keep up with up and coming trends in web design. Websites like http://www.webdesignerwall.com/ have entire sections dedicated to keeping up with up and coming web design trends. Using these trends can help your website get all that it deserves.

4. Javascript isn’t a language from the past, it’s a language of the future(at least for now) so embrace it in your websites. Fancy sliders, menu’s and picture effects add pizzazz to your site and will increase user traffic. Using frameworks like JQuery or Prototype can give your site the ‘pop’ it needs.

Cheers