Week 7 – Javascript and JQuery

Javascript

Javascript is a programming language, just like PHP. It is often used to create reactive websites with animations, effects, moving parts, and things like that.

Variables and functions are both used in javascript, just like in PHP.

Here is an example of the exact same thing being done in PHP, then Javascript, so you can see the difference:

<?php

//save my name and print it

$name = “Cassie”;

echo $name;

?>

<script type=”text/javascript”>

//save my name and print it

var name = “Cassie”;

document.write(name);

</script>

As you can see the same basic principles apply to javascript (functions, variables, etc, all exist, and are used in the same way) but the syntax, the way the code is written, is slightly different.

You can use both Javascript and PHP in one file, if you want to combine examples in your mashup. You can also use just Javascript and jQuery to read information without PHP – do whichever you find the most straightforward, or use both, in your own mashup. Base your work off of whichever examples are closest to your needs.

jQuery

jQuery is a javascript libarary that you can download and use. What that means is that jQuery is a file that contains a lot of already-written javascript, all enclosed inside a number of functions. You can use these functions to do all sorts of things that would be tricky or time consuming to do on your own.

To use it jQuery you just need to include the jQuery file in your page. Do that like this –

          <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js“></script>

From then on you can use jQuery functionality inside your javascript code. (If you copy and paste this directly you may have to retype the “s, WordPress does funny things to quotations marks)

jQuery can access elements inside the html of your page based on their class, id, or just type (eg, it could access all the p tags, all the p tags with class “quote”, etc.) After you have selected what item you wish to access, you type a “.” then the function you wish to apply to it. This looks like this:

$(this).hide() – hides current element.

$(“p”).hide() – hides all paragraphs.

$(“p.test”).hide() – hides all paragraphs with.

$(“#test”).hide() – hides the element with id=”test”.

What you’re doing is selecting an element (this is called a document selector) and applying a function to it (these are functions that are built into jQuery). You can find the details of all these functions in the JQuery documentation. hide() is just one example.

jQuery code should go inside a document ready function. This means the jQuery code executes once the page is ready, once every element on it has loaded. If you try to access an element before the entire page is loaded, it can fail and cause problems, which is why we use this function. You can put jQuery code in separate code blocks throughout your html, like with php and javascript, but it is best practice to keep it inside a document ready function. Even though all your jQuery code should go inside this one block, you can still use it to add and change content on your page in any place, by using document selectors to make changes to specific parts of your document. Keeping all your code in the one place also makes it easier to write your html code and read it later without confusing code in the way.

Follow along, here is the complete example code: Basic jQuery Fun (comment out and uncomment various lines of code to see what they all do. There’s a lot more than just this if you check the jQuery documentation for ideas.)

Interactive mashup stuff with jQuery and Ajax – YouTunes

You can use jQuery to get added interactivity quite easily. This example takes us through reading a pipe with javascript and jQuery, allowing the user to select from a drop down list. Ajax is another technology that jQuery is making use of here – don’t worry too much about the specifics, because jQuery handles that all for you!

Pipe: http://pipes.yahoo.com/pipes/pipe.edit?_id=34067198a12660aecbb80cffe8be02d3 

YouTunes example

jQuery plugins

People have made a number of jQuery plugins. These are more pieces of Javascript people have written based on stuff inside jQuery. There tends to be things like gallerys, etc, which you can use for yourself quite easily. Here are some examples:

Javascript resources: 

jQuery resources:

Loads of plugins –

Reminder

Don’t overcomplicate your own mashups, wherever you can just base your work of the examples we’ve showed you. If you’re doing something beyond what we’ve showed you, make sure you do your own research and thoroughly analyse exactly what kind of work you have to do and whether it’s feasable within the time constraints of this unit. We’d prefer an elegant and functional mashup that actually works over an extremely complex mashup idea that does not work. Focus on creating a good user experience and working within the constraints of what data is available.

If you have problems or are unsure how to proceed with your mashups, don’t hesitate to email me – there’s nothing worse than marking an assignment and finding out someone got stuck on a problem I could have helped them solve if they just told me about it! My email address is on the blackboard contact page.

Things some of you might find useful:

Week 5: Intro to programming and PHP

HTML and CSS are not programming languages. HTML is a markup language and CSS is a style sheet language. They dictate where things go and how they should look, but they can’t actively do things.

PHP is a server side scripting language. It can be used to actually do things. When you’re writing PHP, you’re really programming!!

But! You need a server to run PHP. PHP, as a scripting language, needs to be executed by a server. If you write PHP into your website and then just open the file in a browser, it won’t work. The server does all the legwork – PHP is just a set of instructions to tell the server what to do.

Using the QUT Server Space

When logged in to a computer at QUT, you can access your public_html folder from windows explorer or finder. In here you can change files and immediately see the results by visiting student.ci.qut.edu.au/~yourusername.

  • You access your public_html file on a mac by opening Finder, pressing command-k, and typing in smb://cif-smb.qut.edu.au .
  • In windows, just type \\cif-smb.qut.edu.au into the address bar in explorer.

Testing your PHP code at home

You can simulate a server space at home using :

Introduction to Programming Concepts:

Programming today is based around the concept of Object Oriented Programming.

This indicates that your software is made up of objects – the building blocks of any logical system. These objects are Functions and Variables. Once you have declared a function or a variable, you can use it throughout your code. These principles apply to basically every programming language you’re ever likely to use.

Variables

A variable is a stored piece of information. It could be a number (an integer or floating point number) a word or series of words (a string), or a yes/no value (a boolean). A variable has both a value and a name. For example, I might have a variable called firstName with a value of “Cassie.” Or a variable called visitorCount with a value of 10. Once I have a variable, I can use it as if it were the value. For example, I could say something like:

$visitorCount = 10;

$newNumber = $visitorCount +1;

then the variable newNumber would equal 11.

In PHP variables always have a $ in front. Different languages have different conventions for using variables. In some languages you have to specifically say whether your variable is an integer, string, boolean, etc. In PHP, you don’t!

Functions

A function is a piece of code that does something. It will change something, or return a value. Functions have names. Once you define a function, you can use its name to call it at any time.

A function has a name and a body. The body of a function consists of the lines of code that actually do whatever it is you want to do. For example, I might have a function like:

function sayHello() {

echo “hello”;

}

If I wanted to use this function anywhere in my code, because I have defined it with the name sayHello(), I can simply write printHello() and the code in the body of the function will execute. Even though in this example the function is simple, this is good because a function may consist of multiple lines of code which you obviously don’t want to write and re-write many times – instead you can just use the name. This is a function call.

A function can have parameters and a return value. Parameters are variables that can be given to a function, in order for it to do something with them. A return value is a variable it might return when it is complete. It can have many parameters or no parameters, it can have no return value or one return value. A function cannot have multiple return values, however.  For example:

function increaseVisitorCount($currentCount){

$newCount = $currentCount+1;

return $newCount;

}

were I to call this with increaseVisitorCount($visitorCount);, I would get a number back. So if I wanted to use a value to get a number, I could write something like:

$visitorCount = 1;

$visitorCount= increaseVisitorCount($visitorCount);

This would set the variable visitorCount to be the return value of increaseVisitorCount – in this example, it would become the number 2.

Built in Functions

Various programming languages have built in functions. For example, I can say print(“Hello”);, print() is a built in function of php. I don’t have to define a new function called print(), because one already exists. That being said, it also means I should be careful not to define my own function named print(). print() is already taken, so it won’t work. You should always give your functions specific names so you know what they do and so they don’t clash with any built in functions.

Those are the basic structures behind programming. 

We will step through examples of how these work in class.

Some specific examples are in this file: PHP Beginner Examples. (right click and save file as)

General programming resources

PHP Resources: