What is this jquery file I’m linking to?

Jquery is a javascript library that has been created to make your life easier. There are certain functions that Jquery has built in to let you easily select elements, do animations, and much more.

What is a variable?
A variable is data that you want to define, manipulate, or store for later use.

so x = 5 would store the value of five in x.
y= “hello”  would store the value of “hello” in y

if you wanted to access the information of these variables, simply refer to them

so x = x +2 would equal seven
and alert(y); would put an alert box on screen that said hello

What’s this about variable types?
In programming, you need to define the type of data your variable you will be storing. Think of them as moving boxes. You would put books in the box marked books and knives and forks in a box marked kitchen stuff. Because computers are more anal than movers this has to happen.

There are a couple of data types that we are interested in:
Strings: This means text. When referring to text in javascript, it is put in quotes.
So if you wanted to assign text to a variable it would go like this

var myText =”hello”;

if you didn’t have the quotes, javascript would try to assign the value of myText to a non existent variable named hello.

Integers: These are whole numbers. You do not need quotes to assign numbers to integers

var myNumber = 5;

if you had quotes around it, then it would be treated as a string and you wouldn’t be able to do math on it.

Floats. Same as integers, but have decimal points eg, 3.14

Booleans: Either true or false, or 0 or 1. Usually used to see if something is on or off.

var myBoolean = false;

When you assign data to a variable, it takes on the most appropriate datatype. I don’t think we’ll need to explicitly define data types, but be aware that this happens and that datatypes can be changed.

What’s this parseFloat thing we did in class?
parsefloat is a built in javascript function that takes all of the string data out of a variable and returns a float. We did this because the value we were trying to get at was originally 16px and we just wanted 16
for more info see here http://www.w3schools.com/jsref/jsref_parseFloat.asp

Javascript functions, jquery functions, functions?? Wtf?

There are three types of functions we will be working with

Javascript – like parseFloat, these are functions that return a value, or do something like display an alert box. This value usually is assigned to a variable. These are build into javascript.

Jquery – The jquery functions sit on top of javascript functions to make complicated tasks in javascript much easier to program. For example the first() function finds the first specified element within the container element. You’d have to write a lot of javascript to do this, which is why jquery has this function built in.

Your own function – The functions we write on document.ready and other events. These functions do what we decide to do when we call them.

What is the syntax for writing a function?
function functionname() {

}
Note there is no semicolon, this helps javascript decipher between a function or if statement and a line of code that is to be executed.

What is the syntax for calling a function?
functionName();

How come this looks nothing like what we’ve done so far?
Well, It kinda does. If we break down the $(document).ready(function(){}); it actually breaks down into a bunch of functions being called and one being written.

$(document) – selects the html document we are working with
.ready(); Is a property of document that means when the document is done loading. This allows you do something between the brackets, in this case we are writing a function
function(){} – this is how traditional functions are written

writing code is a lot like doing algebra, you have to make sure things are in the right brackets and you don’t have any overlap.
What’s an if statement?
An if statement is a way to evaluate current conditions and make decisions based on that. It is a basic logic structure. Imagine you are either a vegetarian or a carnivore and you’re at a restaurant offering salad or steak. Lets say we have a variable you which gets assigned either “vegetarian” or “carnivore” and we wanted to call the ordering functions for either diet. The logic would go like this:

if (you == vegetarian) {
orderSalad();
}
else if (you == carnivore) {
orderSteak();
}

the syntax is pretty easy

if (condition) {
do something;
}
else if (other condition) {
do something else;
}
else {
//this is where the default behavior is determined if none of the conditions above are met
}
Your conditions that you are testing are always in the parentheses. You can have as many else if’s as you like, but only one if and one else.

How do i check to see if one thing is equal to annother?
Use the comparisons built into the language
All comparisons are here http://www.w3schools.com/js/js_comparisons.asp

How do I add or subtract stuff?
Use the operators built into the language
All operators are here http://www.w3schools.com/js/js_operators.asp

Can I use jquery with lightbox?
Yes and no. You can’t use the version I showed you before, you need the jquery lightbox plugin
http://leandrovieira.com/projects/jquery/lightbox/

Does it matter if I load my styles first, or my css?
No, as long as you use  $(document).ready(function(){}); your code will load after everything else is done loading.

These explanations suck, where can I get more info?
Start here and work your way through JS Basic on the left http://www.w3schools.com/js/default.asp

Advertisements