Lesson 6 -- Fucntions

Today we will learn about Functions in Javascript. If you are coming from a programming background you will be well versed with the concept. If you don't, well nothing to worry about. It's really a simple but very important aspect of Programming.

To define,

A JavaScript function is a block of code designed to perform a particular task. A JavaScript function is executed when "something" invokes it (calls it).

In layman terms,

A JavaScript Function is basically a mini-program written inside our Program which doesn't execute automatically. We have to call(invoke) it in order to do what it is supposed to do.

Still confused? Let's see an example to understand it in a better way.

I m sure you guys must have a Television (TV) at your home. So, to switch on the TV you press the Power button on the remote, right? So what it does is, when you press the Power button, it invokes a specific function (mini-program) to send the Signal to TV via infrared to Power On. Similarly when you press other buttons like Volume+/Volume-/Channel/Channel-, Remote is preconfigured to invoke only feature specific function and send it to TV in form of Signal.

I hope the example made you aware of how functions work. You can also relate it with example of Calculator where every button is assigned to do a task (function). 

Let's see the Syntax of a Function:

function <function_name>(<parameters>)
{
         <Statements>;
}

To understand it in a better way, let's see the following:

Code:

Output:

See! pretty awesome right? Now, you will ask how did we invoked it? Well you see that greetings( ); statement did the magic. Since the program executes from Top to Bottom, it went down from function declaration and did nothing, but when it reached the invoke part(known as calling the function), It will go back to the function (greetings( ); in this case) and will execute all the statements between it.

Now, Lets do some HTML magic ;) I told you in Lesson 0 that I will assume you have basic xHTML knowledge. So what we will do is, we will create a Button which will tell us "You are AWESOME!" everytime we will click it. Sounds amazing right? Let's see the code:

Code:

Output:

Click the Button

Voila!

Possibilities with the Functions are endless. It is one of the core concept of the Programming languages. Now here is one DIY for you.

#DIY-3

Make a function and use variables and strings along with buttons to print out your statements (invoke the function).

Just try it yourself and then you will get the concept of it. Functions are really easy to use and are very helpful to call repetitive statements just by invoking it. I hope, I didn't confuse you guys. Please try and post your doubts, if any. That's all for this lesson. Peace.

Lesson 5 -- Using Variables with Strings

Hey! What's up guys? Today we will be learning an awesome concept of How to use Variables with Strings in JavaScript. Trust me, you will be using this concept a lot in JavaScript programming.

So, let's suppose you want to print out a String! What will you do?
Yes you will use:

document.write("Hey! I am a String");

 and in another case you want to print the value of a Variable! You will use

var name = "Jatin";
document.write(name);

but what if you want to print both the String and the value of a Variable?

Let's consider the following.

Code:

Output:

So, here we see how we used Plus (+) symbol to concatenate both Strings and Variables in one print statement.

Syntax Explained:

• document.write("My name is " +name+" and I am "+age+" years old.");Here we are using '+' sign to concatenate both the variables (name,age) and the strings ("My name is", "and I am"..) in a single print statement i.e document.write( );
• document.write(breaking+bad+again);
  Same concept as above print statement but we are printing the value of 3 variables in a Single print statement instead of using it 3 times.

I hope this explains the concept well. We will be using it multiple times in advanced lessons. This is all for you guys for the day. I would recommend to try typing and executing the code yourself and also mess up with it, because that's what keep our mind interested. Try the following DIY exercise for same.

#DIY-2
Try it yourself to print out both strings and variables without using the Addition operator (+) aka Plus symbol and see what happens. Post your observation in comments.

Lesson 4 -- Variables (Advanced)

In this lesson, we will learn about the Types of Variables and how to use and manipulate them. In case you skipped or missed the last lesson about Introduction to Variables, please check it out first as I will assume you are well versed with the concept of Variables for this lesson.

So, let's see the types of Variables we can use by analysing the following code:

Code: 

Output:

Now, let's look up the explanation of All types of Variables one by one:

1. Integer (INT): As the name suggests, It is used to store the value of an Integer number (like 12,4,6..).
2. Float: It is also used to store a Number but with Decimal structure (like 0.02, 0.6, 13.5..).
3. String: A string is a variable which stores a series of characters like "John Doe". Strings are written with quotes.
4. Boolean: Booleans can only have two values: true or false. They are generally used as Flags/Switch.
5. Null: The value of a variable with no value is undefined. Variables can be emptied by setting the value to null. Note: Null is not equal to Zero (0).

So, here we go. This lesson was to make you understand different types of Variables and how to use them.

#DIY-1

Now I have a DIY(Do-it-yourself) for you guys. I want you to write the code to print out an exciting Story using all the types of variables. It can be any story from a fictional one to your own personal experience. You can post the following in the comment section.

Once you are comfortable with your understanding of Different types of variables in JavaScript, you can move on to the next lesson where we will learn how to use both the strings and variables together in a single statement. Till then, See you guys.

Lesson 3 -- Variables

Hello guys! Variables is one of the most important concept of Programming and we will be learning today to use variables in JavaScript.

Let's drift back to memories of our Elementary Math education where we first learnt about variables(remember dreadful x? Anyone?) in our Algebra class. If you guys cant remember, here is a little example for some help.

In variables we basically take something like letter 'x' and equate it to some value:

x = Jatin 

So whenever we will say: 

x is a good boy. //Statement 1

It will actually mean that:

Jatin is a good boy.

So, here we see the logical interpretation of Statement 1. "x" is replaced by it's value which is "Jatin".
That is all what a variable is, it is just a fancy name for a placeholder. I hope you got the point, even if not, then also you will be clear soon when we will try to create an example and execute and then you will get the concept.

So the syntax to use variables in JavaScript is:

var <variable_name> = <value>;

So, let's go ahead and see a program to understand the usage of variables and then we will see the code and analyse it.

Code:

Now let's Compile it. You know the shortcut Ctrl+Alt+Shift+R ;)

Output:

Perfect, so we can see in the output windows that our variable(x,y) are replaced by their values(23,17). So this was the basic exercise for you guys. 

Syntax Explained:

• var x = 23;
  here:
  x   : name of the variable
  =   : assignment operator
  23 : the value of our variable 'x'
• document.write(x);
  here it is used to print out the value of our variable x.

So, here we go, this was basic of Variables. In next lesson we will learn about types of variables, and how to implement them in a more advanced manner.

See you guys in the next lesson. Peace!

Lesson 2 -- Comments and Statements

Let's us suppose, You are given a 10 page Code of a Program/Module (be it in any programming language) and you are asked to understand and explain the same in 30 minutes or even few hours. Can you do it? Trust me if you don't have any documentation or help from the Programmer who coded it, you will be in deep trouble as you will have to review the whole code line by line to understand the flow of control and how variables and functions/methods are used to achieve the functionality.

This is where Comments come in. 

Comment
It is basically a Line of text which your browser ignores completely while executing the JavaScript code.

The benefits of Comments in JavaScript are: 

• JavaScript comments can be used to explain the code, and make the code more readable.
• JavaScript comments can also be used to prevent execution, when testing alternative code.

We have 2 types of Comments in Javascript: 

Single Line Comments

Single line comments start with //.

Any text between // and the end of a line, will be ignored by JavaScript (will not be executed).

Multi-line Comments

Multi-line comments start with /* and end with */.

Any text between /* and */ will be ignored by JavaScript.

and now coming on the second basic part;

Statements

Guys let me tell you one very basic thing about Programming. In basically any programming language our computer basically follows a set of Instructions also known as Statements.These statements are arranged in chronological order of execution, basically step by step. 

For ex : Let's say you want to tell a friend, how to make tea. Here's how you will tell him :

Step 1 : Boil Water in a pan.

Step 2 : Put some Tea Leaves in the pan.

Step 3 : Put some Sugar in the pan.

Step 4 : After 5 mins, Pour some Milk in the pan.

Step 5 : Now let it boil for few mintues.

Step 6 : Tea is ready to serve.

So, see similar concept is used in the programming too. We need to provide the code in form of Step or as we say Statements. Each statement is followed by a Semi-colon (;). Now we already saw this in last lesson where we printed "Hello World" using the document.write(); statement. 

So if we have multiple instructions statements in the code, we will use Semi-colon to separate them, so that our Browser can Interpret them easily and show us the output.

Let's see the following example with implementation of both Comments and Statements :

Code:

Output: (Ctrl+Alt+Shift+R)

Breaking Bad! - Big fan here :)

See! That was easy. Wasn't it? So go ahead and practice writing your own JavaScript code today and tell your own story using document.write() and post your code and output in comments below.Note: You must have noticed that instead of copy pasting the Sample code, I decided to simply use the Screenshots. This is because, if someone is following my journey and want to learn, in my opinion it is much much better if he/she types the code manually instead of copy and pasting to ensure effective learning :)