Javascript Custom Objects

Let's have a look at custom objects.

First off we'll start by creating our object function:

This is a basic layout of a custom object. When creating the function, keep in mind that all the parameters which you want to store data in should be specified in the parentheses (). In this case each person will have their own name and surname, which is sufficient for this tutorial.

Fot those thinking 'whats with this.name = name;'. It doesn't make sense. This isn't as complicated as it looks. 'this' means the current object and because we have this.name, we are specifying the name of the current object and setting it to the name argument, which is found in the parenthesis: function person ( name, surname ). The surname works the same way.

To show how above works, lets initiate this function with different values:

Now we have created three person objects, each with it's own values.

Let's start with variable personOne. Because you set it equal to the person function with the two parameters: 'John' and 'Doe', the method initiates with John as name and Doe as surname.
Now inside the object you say that this. name, which is variable personOne. Thus the name for personOne is John and the surname is Doe.

The second and third objects work in the same manner. The values are sent to the object function and stored in the variables. It doesn't matter how many objects you create, they will all have their own values.

Now to test whether the data has been stored, I will be using alert popups:

As seen above, to display the values in the first popup, I used personOne.name. This will return the name variable inside object personOne object. The output for the first popup looks like so:

Which is what we expect as we sent the values John and Doe to the object function.

Next to check the output for the second popup, which should be the surname 'Bowen':

Lastly we want to output the both name and surname from object personThree:

Now we have created three different custom objects.

If anything is still unclear or if there is something you really want to know, leave a comment.

Javascript Objects

What would you say an Object is? An object is as the name implies. It is something with certain specifications, for example if you take a person. You have a name, surname, age, weight, length and so on. All of these are concidered a person's properties.

Now that we have concidered person as an object, the next part is to created your object:

Now that we have our object, we can start setting values. But as you will now see, you only need to specify a property name, and a value. The property will be created in the object with little effort.

Take this for example:

You have to clerify which object you're using, which is person. Seeing that we want to set properties for this object, you have to add a ., meaning you will go inside the object. thus we have ( person. ). Because we want to set the property name of person to Phillip for example, you do this as shown above.

After all the properties has been set, will should have the following:

Now we have created our object and set the properties. Now what we want to do is to return the values which have been stored inside the object. This is the same method as storing data inside the object. Let's say we want the person's name.
We will use

to access the name field inside of person.

Now I will display the name and Surname of the person object using:

The ouput for this is:

Thus we are able to access the properties of the given object. These propertiy values can be stored in variables if necessary.

Next we will have a look at Custom Objects:

Javascript functions - Basics

Hi there

This blog will sum up various methods of using JavaScript functions.

Firstly, what is a function?
It is a piece of code that is called by name. When it is called, the coding inside it will run. The purpose of this is to be able to call one method several times, if needed, without having duplicates of the same coding.

Example:

Lest say you have two close buttons( cancel and close button in top right corner ) on a popup.
They will both close the popup, but with some other code that may differ.

Here are the buttons calling different functions:

The functions which are being called are closePopup and cancelPopup.
The function looks as follows:

As you can see there are similarities between the two functions which is that both have the following:

Instead of using one line multiple times, you can take that line and put it in a seperate function, although for one line of coding, it's not worth the trouble, but when you have more code that is similar, you can do this.

In above method, if you call the hidePopup function, only the element with id popup will display as hidden. If you want the current object to hide or to change the styles, you can do the following:

As seen above, all the methods has an argument. That is merely the id of your clicked button. An argument is a value that is added into the functions parentheses to be used for some calculations.

Lets say I have

var x = 1;

Now I want to use that value in my method to return another value. The method will be called like this (Keep in mind that the variable name is x):

myFunction(x);


This function can either return a value or perform some actions. In the previous example where I used closePopup, they merely perform an action. With a return function, you can set a variable equal to the function like so:

As seen above, newVlaue is being set to function calculate. While you set this, the value x is sent to the function and is used inside the function as numberValue. In other words, when you're inside calculate, numberValue value is the same as the value of x. I have explained what the while loop does here.

Lastly we see the code return numberValue; What this does is it send back the final value, where it is then stored in newValue. Thus the line
var newValue = calculate(x);
can be read as
var newValue = 16;

For further questions or if you want a tutorial for something, leave a comment or send me an email.

Css, Javascript - Change styles on window resize

Hi there

In this blog I will show you how to optimize your css styles according to different browser sizes.

What I will be using is Javascript/jQuery and CSS to achieve above mentioned.

For the purpose of using jQuery, you need to add the following in your head tags:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

or you could get download the jQuery libraries and link them like so:

<script src='assets/js/jquery.min.js'></script>, which is the way I am doing it.

This can be found on https://developers.google.com/speed/libraries/devguide with along with other JavaScript libraries.

I have created all files needed, which are: index.html, script.js and class.css.

Now I will apply some styles to the divs, wrapper, header, content and footer.

Below is the html page which was opened in a browser.

To start off, what I have done is to give the wrapper a width and set margin-left and margin-right to auto, which centers the div. But remember, to achieve the centering using this method, you have to remember to give the div a width.

Next I added a width of 100% to class 'bodypart', which the three divs, header, content and footer, all have. Because these divs are inside the wrapper div, the 100% will be the width of the parent div, which is the wrapper div, which in this case in 900px;

Next I set background colors for each of the divs seperately. For those who do not know, using background: rgba allows you to change the background color while adding opacity to the background only. The opacity is not applied to the content of that element.

Next I will be changing the heights of these divs, just to get the basic layout of a webpage and as you can see below, there is a small white space above the wrapper div:

This space is actually the default margin that is placed on the body, thus to remove this, this is all that's needed and I will also set a background image to the background:

Now to set the Heights and color of the text of the different body divs:

After these changes have been made, the page looks like so:

I just resized everything to show as an example, but keep your sizes the same.

Now it's time to implement some JavaScript/jQuery to check the browser size and change classes accordingly.

Let's start with adding the jQuery . ready method to our .js files:

This event will only fire once all elements have been loaded on your document. 

Now we can create some methods inside the above method. The first method is the resize method to check whether your browser size changes.

Now inside this method, we will be using an if statement, to compare the browser width to change styles according to the width.

If you look at above image, the  $(window).width() returns the width of the browser as you resize it and checks whether that values is smaller than 600. If it is, I set the wrapper width to 100%, thus the child divs' width will also be 400px, as their width is set to 100% of their parents' width which is 400px. 

If the width is bigger, it will revert to the original size. 

Instead of just changing one property, you can also change classes inside the if statement. They can change the size, background, or even add elements or rearrange elements if need be.

Let's say I created a class oldMobile:

Here I make slight changes, but for this tutorial this should be sufficient. Now to apply the class to the divs on resize:

This have been tested in all browsers and it works. 

For any questions or if there is something you want to be able to do, feel free to leave a comment.

JavaScript Basics

Hello everyone, this blog will contain some of the basics of using Javascript.

To start off, JavaScript is an interpretive programming language, which can interact with html code, enabling dynamic content on sites.

There are various ways Javascript coding can be linked with a webpage. The two main methods are using internal and external Javascript.

When you want to use internal JavaScript, special tags are needed to interpret the code as JavaScript.
See below:

Whereas when using external Javascript files, it can be linked by placing like so:

The above method is usually placed inside of the <head></head> tags like so:

Then there are ways to use Javascript inline as well. When for example using the html onclick mehtod:

Let's start using Javascript.

To start off, let's say we want to create variables with Javascript. 
This can easily achieved. The question you want to ask yourself is 'What do I want to save in the variable?' or even 'What is a variable?'.

Lets start with what is a variable is:
A variable is merely a container for data.
There are various types of variables. These are called Data Types. Here is the list with examples of each in brackets: String ( "Hello World" ), number ( 343 ) , boolean(which is either 0[true] or 1[false]), Arrays (This consists of a group of values like so [ 2,3,4,5,6 ]. This array example consists of 5 values) and lastly objects ( var person = { name : "Phillip", surname: "van der Berg", age: 23 }; ), but I will go into more depth on a later stage.

Lets say you have a textbox and want to save the user's input in a variable. Following is an example of each Data Type:

As seen above, the 'var' is merely how you declare a variable. Whatever comes after the equals sign (=) is what decides what type of variable it will be.

Now we move on to using for, while and do while loops.
1. A for loop can be used when you want to run certain code for a specific number of times of when you want to read date stored in Arrays or Objects.
Below is the basic structure of a for loop:

Now what does this mean?
First of all, the 'for' initializes the for loop with the perameters inside the parentheses. The 'var' merely declares the number variable 'x'. Then we look at x = 0; What this means is that we will start counting from 0, and x < 10 means that we don't want the value to become more than 10. Lastly, the x++ means the variable x will be incremented by 1. It can also be written as x = x + 1.  If the value of x was to be printed out in the for loop, you will have the output of 0 1 2 3 4 5 6 7 8 9. Although it only goes up to 9, there are 10 values as it starts at 0.

Next there is a While loop. What this does, it runs the code in the body until the condition is met, for example:

As seen above, the variable x is declared, and in the while loop, it checks if x is equal to 2.
Fisrtly x is equal to 0, thus is not equal to 2, so the code inside will run. You will get the popup alert, after which x will increment by 1. Now it goes through the loop another time, with x = 1. Again the popup alert shows, because x is not equal to 2 and is yet again incremented. Now x is equal to 2, thus the condition is met, so this ends the while loop. Now the second alert will run.

Lastly we have a do while loop which looks like so:

 








 
The only difference between this and the while loop is that with a do while loop, the code is run before it checks whether x is equal to 2. What I have done is to change the x value to 3 and the while condition to check whether x is smaller than 2. Seeing that 3 is not smaller than 2, the while loop won't execute, but with the do while, because the condition isn't checked yet, the alert will execute and x will be incremented, then the condition will see that x is not smaller than 2, thus exiting the do while loop.

The last thing regarding the basics is if and else if statements.

Lets start with an if statement:

It is similar to a while loop only that it checks if a condition is met. In this case if the condition is met, the code inside will run, unlike the while loop. 
First I set the variable x equal to 3. Now the if statement checks whether x is equal to 3 which is true in this case. Thus the code will run.

Next we have  the if else statement. This is the same as the if statement, but uses an else with it:
  

As you can see, it checks whether the condition is met in the if statement, if it's not it goes to the else if statement to check whether that condition is met, and because it is, it will skip the last else statement. 

How this works is it checks if condition is met, otherwise, it goes to the else if and if it is met, the coding inside that statement is run, otherwise it will go to the lase else statement, after which the code will run, if none of the conditions were met.




As seen above we say x = 3; This is how we set a variable to a given value. And if we look at the if statement's condition, we see x == 3. This checks whether the value of x is equal to 3. If you accidentally use only one '=' in the if statement, x will be set to 3 in this case, and the code will run, which you don't want. 

Other than ==, you can use >, <, !=, <=, >=, ===, !==.

These are called Comparisson Operators. One reason they are used is to compare values of variables. 

Next we have Conditional operators, which can also be used with an if statement.
These are &&, || and !

&& / and can be used to check multiple conditions at the same time, but when && is used, all conditions must meet. For example:

As seen on the left, we have 2 if statements. In the first on it checks whether x is smaller than 10 and whether girls is bigger than 10. Seeing that 10 (boys) is not smaller than 10, the condition is not met, as they both have to be correct.

In the second if statement, it checks if boys is smaller than 20, which is correct, and if girls if bigger than 10, which is also correct. Now the code will run.




|| / or works similar to the &&, except that with or, either of the conditions can be met for the code to run. Only one condition has to be met.

Lastly !/not.
I mostly use this for boolean variables, but can be used with other variables. Here is an example of both

For the first one, !x will return true  because x = false. It will return the opposite of the x value.

In the second if statement, I created 2 conditions to show the difference, which are basically the same. They both check if x is not equal to 10. Just the different ways it can be used.





If anything is unclear, don't hesitate to ask. I will be adding more advanced tuotials during the new few weeks, so don't be scarse.