Painting… colours… so beautiful. Art however has multiple forms. Let’s look at metalworking or carpenters. They also build beautiful things but they also build tools that help them. Let’s say that we want to build a chair and we have only a saw blade. How… we can try to cut directly but we better get ourselves a cutting table first. Nice, now we can cut way better. We should also make some kind of tool first that allows us to cut straight lines without cutting our fingers… yea, that would speed things up.

See, in order to reach our goal easier, to deliver something that looks better and is safer we have build ourselves a “framework” composed by different tools that we mix together for the end result.

That is jQuery. It is a framework for JavaScript. It does everything that JS does but much more, much easier and with less code.

What’s better, just like with the wooden pieces, we can always use either JS or jQuery in any moment as we see fit.

Like when we were building our wood cutting framework, we need to do a bit of setup and building first.

How can we make jQuery work for us?

Search on the internet for “jQuery CDN” or go to http://code.jquery.com – CDN = content delivery network. It means that some computers around the world have the file and you will get it the fastest from the closest computer to you.

Select the newest version – minified if possible.
Minified = the smallest possible from which you cannot understand anything but works perfectly.
Uncompressed = the version that also has the code visible. It also works perfectly.

Click on it

In the HTML file write
<script type=”text/javascript” language=”javascript” src=”https://code.jquery.com/jquery-2.1.4.min.js”></script> where the last part “http://code.jquery.com/jquery-2.1.4.min.js” is the URL you got on point number 3

Save the HTML file and refresh

Now, this is how we add jQuery into our HTML. Note that we already this this with our JS and CSS files previously. As stated above, jQuery is not something super super complicated. It is just some JS code written by a team which allows us to write less and do things faster.

How to play with an element?

Let’s use the same JS code as above document.querySelector(“#first_leaf”) and we will change it’s colour just to see that the code works. Let’s add .style.backgroundColor=”red” to our JS selector. Finally, the code will look like this

document.querySelector(“#first_leaf”).style.backgroundColor=”red”;

We can observe here that JavaScript uses the “.” to navigate between the available functions of each function. Note that in the last sentence the word function has been used twice. It is not a mistake. JavaScript is a language based mostly on functions. At the end of the functions there are properties and those properties accept values. Exactly in the same way as the CSS accepts values for its properties. Do you remember how we have said that HTML is mostly based on tags. Same concept, just a different language.

Since we know that jQuery will help us write less but achieve the same result we can write the above code as:

The first line of text is the preparation required that we spoke about previously. From now on, jQuery will be represented by the “$” sign.

The second row is us sending our CSS selector to jQuery and when the results comes back asking jQuery again to change the background colour of our element to red.

Tomorrow we will learn how to see if jQuery works and where we can see the errors because it would be really difficult to create anything without knowing if it works or not. It like painting as a blind man.

Sadly today’s article will have to be a bit more technical because it is one of the key things of JavaScript. If you understand this you can literally read any JS book and start looking for a job.

One of the particularities of JS is the fact that it relies on functions. In the lesson How does JavaScript functions we have learned that the JS code is read once, from top to bottom and everything that it is read it is executed. Now… this is great and not so great in the same time.

Why not so great?

When we paint together, among the things that we should do is sell the painting. What if after I hand you the colours I go and sell the painting? That would be stupid, that would totally ruin our team work.

This is why we should not rely our JS code to do everything when it is read.

Why is great?

Let’s consider that we work on the painting, I give you the colours and then I wait long enough for you to finish. Then we sell it. This is great, this is how it should be done… but… it has happened like this by luck. If I would have waited less it would have been too soon. If I would have waited longer we would have been stuck. So, this is great but not so great.

How can we stop this from happening?

Functions.

Instead of placing all the code in the file and make it look like this:
draw the horizon line
draw a tree
paint the sky with blue
paint the bark with brow
….
sell the painting

Let’s make it somewhat like this:

function draw_sky(){
if the horizon line does not exist draw it;
paint the sky in blue;
}

function draw_tree(){
draw a tree;
paint the bark with brow;
….
}

function sell_painting(){
…
}

This will split our code into functions and although the functions are read by the browser when they are received they are not run until we call them. What’s even better is the fact that we can dictate the order very easily.

Between

function draw_sky();
function draw_tree();
function sell_painting();

and

function draw_tree();
function draw_sky();
function sell_painting();

it is just a line changed. What’s even better is that now we can draw 2 trees without copying everything again! Just imagine how easy it is to just call functions to do the work wherever you need them to.

But where do we actually call them?

Now that’s a great question! There are multiple answers to this question:

In HTML when an action is performed, like this:
<div class=”red leaf” id=”second_leaf” onclick=”draw_tree()”>second leaf</div>
The onclick is called an event. More events can be found here.

When the page is loaded. This is more difficult to understand but easier to use. What we need is something that embraces our code and knows what to call for when the user performs events on the HTML tags used. We will call this thing “jQuery”.

Practical example:

In the JS file write only the following code
function draw_tree(){
alert(“I don’t know how to draw a tree but I have this nice message”);
}

This we also know, through CSS selectors. They are the ones we have learned about in “Adding colour” . What we need to do is write document.querySelector(“#first_leaf”) . This points to the first leaf. Sadly, this bit of JS code will not do much except allowing us to access the first_lead element.

If we want to select all the elements that fall under a certain selector there is document.querySelectorAll(“”).

Tomorrow we will learn about functions because we will need them in order to play with our elements.

Let’s go back to our paintings. We, together, must make a work of art because that’s how the browser and the developer are working together. The browser is very good at drawing and the developer is the one providing the instructions. See, teamwork! You are the browser, I am the developer.

So, we should paint on wood. But I am not that good, I am learning. You, the artist are good but you cannot pick your own colours.

I accept all the colours that I find because I don’t know anything about them.

I must read all the paint labels and pick the one that is fit for wood.

Mix the paint with oil as stated on the label.

Now that I have sorted the colours for wood I must look at the labels and pick the desired colour.

That’s about how the browser and JavaScript works.

First the browser accepts the file because it trust us.

Reads the file. This step also ensures that our file is correct and can be run (note#1)

Executes all the code that does not belong to a specific function (note#2)

Creates a list of actions that must be executed in order for every element that it is targeted.

Tomorrow we will learn about pointing JavaScript to our HTML elements.

In the previous post we have learned that there are two types of animations. Right now and in the next post we will touch the animations through JavaScript.

Before we start, please, never say that JavaScript and Java have something in common. There was some some marketing involved at some point, that’s all, absolutely nothing, different companies, different way of working. All you might get from mixing those 2 words is being labeled that you know less than you might actually do.

How is JavaScript added to an HTML page?

Phew, thanks for asking. Gladly we already know how this works without knowing it. Do you remember how in the lesson “How to link CSS to our HTML?” we have used the tag <link> to link our CSS. For JavaScript (JS), we will use <script>.

There are some small differences though. We will learn about them a bit later in this post.

Colouring elements is quite cool, but animating them… whooaaa, a whole new level. We can do things like the cool kids.

Before we dig in a bit deeper we should have in mind that there are 2 types of animations. One is made by CSS 3 and one by JavaScript. Now don’t get scared or intimidated by the “3”. There is nothing different from CSS 1 and CSS 2 (which did not really exist). The 3 means that some new attributes have been added and the browsers know what to do with them.
Do you remember how in the first lesson we were saying that the browser is stupid. Well, payback time, the browser is not THAT stupid. The browser knows how to read the CSS, link it to HTML and draw everything on the screen but since different companies create

Basic difference between the two comes in terms of what the browser knows what do with that bit of code.

JavaScript animations:

Are drawn much better in the same way on all the browsers

Can have more advanced way of controlling the animation

Slightly slower then CSS

CSS 3 animations:

Can look slightly different on a browser or another

Simple to use, very good for buttons or things that don’t move away

Faster then JavaScript

Now that we know about the differences next time we will learn a bit about JavaScript animations.

In this post we found out about classes and ids. Let’s put them to work!

In the HTML our example we have this line saying “<div class=”green leaf” id=”first_leaf”>first leaf</div>”.

We know that a tag can have as many classes as we want it to have and that those classes are put into different stacks. In order to add classes to a tag we need to write the word “class” after the tag’s name. Right after we add the “=” and between double commas we can add all the class names we want. There are no standard names and it does not matter how they are being called. We name them as we want. They are all split by space. So, in our example, our div tag has 2 classes “green” and “leaf”.

We also know that an element can have only 1 id and it needs to be unique. Like the class, we have to write “id=” and then between double commas the name of the id. Same as with the classes, it does not matter the name.

This is also a good time to learn that the word “class” and “id” are named “attributes”. There are way more but those are the ones we know.

Let’s open our HTML editor and our CSS file.

Here, in order to point to a class we use the “.” sign and in order to refer to an id we use “#”.

Let’s make all our green elements truly green.

Put the following text into the css file
.green { background-color: green; }

Save the file

Open the HTML file in your browser or refresh the page you already had opened

Be amazed!

All our div elements that had the class “green” actually became green.

The “background-color” it is called a property. and the “green” after the “:” sign is called the value of the property.

Let’s do something with the id as well.

Put the following text in the css file
#first_leaf{color:white;}

Save the file

Refresh the web page

Notice that the text has turned white. This is quite nice!

You can list multiple CSS properties one after each other and delimit them apart by “;”. For instance, let’s put a black border around all the tags with the green class.

Add border: 1px solid black; inside the “{” “}” of the tags from the green class.
Now it should look like
.green {
background-color: green;
border: 1px solid black;
}

Save and refresh

Note how we can split the CSS properties on multiple lines and how we can add as many as we want. On border we did cheat a bit, we have added 3 values to the border property in the same time. This was done just to see that it is possible.

For WAY more information about CSS properties please use http://www.w3schools.com/css/css_intro.asp and make sure you do not click on any of the commercials they have.

Play with it, break things and try to fix them back. Learning is all about experimenting.

You can learn more about HTML tags here http://www.w3schools.com/html/ . Again, make sure you don’t click on the commercials, you do not need any certification, quiz, class etc. Just select from the left menu the tags and read about them.

Two lessons ago we have discussed how we can include our CSS file in the HTML tree. Last lesson we have discussed how the browser knows which colours and distances to apply to which element. Also we found out how to ease his job by knowing when to use a class and when to use and id.

Today we will re-use the example from HTML Tree and tags . We will create a few leaves for our HTML tree and colour them a bit.

Before actually writing some CSS I will take some time and explain all those “div” branches of our tree.
Let’s do this exercise:

Take a piece of paper.

Cut it in 3. Do it!.

Take a second piece of paper.

Put the 3 parts on top of it.

The “div”-s for HTML are exactly as the papers are for you. They are transparent, one with the background but they exist there to hold information for you.

Let’s do the following exercise:

Take the first small piece of paper and write class=”green leaf” id=”first_leaf” on it

Take the second small piece of paper and write class=”red leaf” id=”second_leaf” on it

Take the third small piece of paper and write class=”green flower” on it

Flip the first piece of paper and write on it first leaf

Flip the second piece of paper and write on it second leaf

Flip the third piece of paper and write on it very very small flower

Put them back on the big piece of paper with the text upwards. Not the “class” and “id” non-sense, but with the nice human readable text.

Great job! This is what your browser sees.

Now we are ready to write our CSS file. Let’s play again:

Open your program with which you write text. If you are unsure what I mean please go to http://www.sublimetext.com , download, install and start this program. From now on this is our HTML editor.

Write into the HTML editor all HTML code from above.

Save the file into a directory/folder that you want and name the file “html_file.html”

Get back to sublime and go to File, New file

Save this new empty file into the same directory/folder as the “html_file.html” file and name it “mystyle.css”

That was all! Now you have your very own website. Yes, it takes some more work to make it visible to other people but you can see it locally by:

Go to the directory/folder you have used previously to save the html and css file

Double click on “html_file” or drag it on top of your browser

That’s all, if all went fine you should be able to see the text of your leaves in there. They should have the same text as your small pieces of paper. You see the resemblance now. The browser does no magic tricks. He just reads everything and splits the information is 2 piles. Information for him and information for you. Same as you pieces of paper. Information for the viewer, the nice text, and information for the programmer, the classes and ids from the back of the pieces of paper.

Let’s look at the square with thick black border positioned from the top underneath first row of white rectangles, the big red one. This was a bit slow and we are happy for the red colour, otherwise it would have been even slower. This is one way of writing a CSS selector, based on the elements that hold it.

Another way is if we put a number in each square, from the upper left corner to the upper right corner. Now we can say that we talk about the square number 5. This was way faster. This called an “id”. Each “id” must be unique, else we ruin all the speed and idea. An HTML tag can have 1 id.

Let’s try to locate the element which has “square black”. It went quite as fast as the “id”, maybe a bit slower, but still way faster then the first solution. This is called a class. An html tag can have any number of classes. The more they are the slower it becomes to knowing which one we select.

Adding a style to an element:

We have seen how selecting elements work, which is the fastest and which is the slowest. Let’s imagine how paining would work if we imagine ourselves as browsers. We will ignore the first try of selection because it is plain stupid to work like that.

Apply a border to the tags with id 1,2,3,4,5,6,7,8,9…19,20. This looks quite slow because you always have to go back and see if the tag with a specific “id” needs to have the border painted or not.

Apply the border to all the tags with class “black”. Hm…. this looks super fast if you already have all the tags split in piles. All the ones with “black” in the “black” pile. All the “squares” in their own pile and all the “rectangles” in the “rectangles” one.

This is how the browser finds tags and paints tags. We can easily see why the “id” is faster to find and why the “class” is faster to paint.

Next time we will add some colour to our small piece of HTML from the previous lessons.