Learning Basic JavaScript Faster Than Ever!

Before we begin to learn and practices with JavaScript, it’s going to make things a lot smoother if we are all using the same document setup. so for this tutorial I recommend you to practice with the following blank document.





JavaScript 101%MINIFYHTML0c99edd85fab8977e6100d99552fcc4c4%

%MINIFYHTML0c99edd85fab8977e6100d99552fcc4c5%%MINIFYHTML0c99edd85fab8977e6100d99552fcc4c6%%MINIFYHTML0c99edd85fab8977e6100d99552fcc4c7%

Notice that in the above blank documents header tags we have script tags(). This area is where we will be practicing all our JavaScript, so please reference this area as our JavaScript only area.

Let’s begin shall we?

Basiclly there are three areas that JavaScript can be broken down into for one to gather a great grasp of just the basics. The three areas are as follows:

– Variables

– Functions

– Conditions

Variables

A variable is a place to store information. You can store numbers or text in a JavaScript variable. Remember back in middle school when we learned basic algebra and worked on stuff like this?

5 + 5 = x

x is obviously equal to 10, so in JavaScript we can basically stored this number of 10 into a variable called x that we can reference to and use later on. Once we have stored the number of 10 into a variable called x, we could use it in another formula like this.

x-5 = y

Oh no, we now have two variables!

We have x variable that stores our number of 10, and now another variable called y that uses our x variable, minuses 5, equaling 5. So again we have two variables one called x that has a number of 10 stored in it, and now another called y that has a number of 5 stored in it.

Ok let’s stop looking at creepy math shall we, I never liked it anyways. All I want to do is really drive the point home that with JavaScript variables we can store information into them so we may use the stored information at a later time.

Great, so what’s a JavaScript variable look like?

In JavaScript you must always state that you are about to create a variable by using:

var

var” stands for variable and again every time we want to store some kind of information into a variable, we must start with “var“.
Next we give our variable a name, this name is how we can reference to the variable at a later time by simply calling only its name.

var firstVariable

Ok now that we have created a new variable, and given this newly created variable a name, we have to store some sort of information into it. Storing information into a variable is called assigning values and here is what it would look like.

var firstVariable = "This is my first JavaScript varible!";

Here we simply use the equals sign to equal our varible to this little bit of text.

Text is called a string of text, in JavaScript strings of text must always be surrounded by quotes while numbers do not. Ok last thing is that we ALWAYS close off our variables with a semi-colon “;” to end our statement of “var“.

That wasn’t so bad now was it?

Functions

A function is like a processor that uses our variables to perform desired results. You can think of a JavaScript function like this.

We as humans, always have ideas and thoughts, and these ideas or thoughts would be like JavaScript variables. A function is like the computer, we use the computer to process these ideas and thoughts out for us. So again functions are always being fed variables or working with them to perform or process results out to us. Simple as that.

So what would a function look like? Functions, like variables must also be stated in order to be created but using “function” like so.

function firstFunction()
{

}

After “function” we assign our function a name followed by parentheses. This is a standard way to set up a function and these parentheses are for extending our functions “variable flow” that we will talk about here in a moment.

After our parentheses, we have an open and close curly bracket and in here is where we use our variable to perform or rather process out our results.

Let’s come up with something we can process with our first function. Let’s make two variables and store some numbers in them.

function firstFunction()
{
  var firstVariable = 10;
  var secondVariable = 6;
}

Great now let’s try and find the difference between these two numbers, how would we go about doing this?

Simple, yet another variable.

function firstFunction()
{
  var firstVariable = 10;
  var secondVariable = 6;
  var difference = firstVariable - secondariable;
}

Our third variable is called “difference” and its equaling its self to ( firstVariable – the secondVariable).

Ok, now that we have fed our function all the information it needs to process out some results, how do we relay these results back out to the user?

One way to output results is to use the built-in feature of JavaScript called “alert”. The “alert” feature will take a variable or string of text and alert it out to a user in a pop-up box.

Let try using the “alert” feature to relay our processed variables out to us.

function firstFunction()
{
  var firstVaribile = 10;
  var secondVaribile = 6;
  var difference = firstVariable - secondVariable;

  alert(difference);
}

We have added the “alert” declaration to our function, then parentheses that contains a reference to our “difference” variable followed by a semi-colon.

Now that we have our function ready to be executed we have to add a button or some sort of way to actually execute our function. So add this button to our document.





JavaScript 101%MINIFYHTML0c99edd85fab8977e6100d99552fcc4c9%




Ok so in this new button, we have an attribute called “onclick” and we equal it to our firstFunction(). This is one of many ways of how to declare your function to being to process and executed. Save this document and run it, and click the button.

Awesome you have created your first script folks!!

Now, remember how when we created this function we created two parentheses that I said I would cover in a bit. Let talk more about these parentheses and how they can help us.

In our firstFunciton() we created our variables and alerted our results out, but this is a very liner method to use functions. Meaning, our function can be provided variables that reside outside of our function to then still process out results to us. Being able to send variables to a function is a vital part of a function, simply because it literally makes the data flow a two-way street instead of a liner avenue of variables and results.

How the heck can we send variables to a function?

Simple, in our parentheses you state the variables name that we are going to want to use down in our curly brackets. Then any element acting as our trigger for executing our function, would be where we pass a value or rather information into our awaiting variable and function.

Lets tweak our firstFunction() just a bit to better see what I am talking about.

function firstFunction(firstVariable, secondVariable)
{
  var difference = firstVariable - secondVariable;
  alert(difference);
}

Ok because we are now sending our variables to our function form another source, the variables them self do not need to be using the “var” simply because this method creates a temporary storing location, not a true storing location for variables.

Ok lets tweak our html documents button “onclick”.

If you haven’t noticed, in our “onclick” we still point to our firstFunction() but here we assign these external variable values to our awaiting function. Here the number ten represents the variable “firstVariable” and the number six still represents the variable “secondVariable” Now the values are no longer residing within our actual function so you can send many different values to our function to receive many diffrent results. You can test it if you like, play with the number values in the “onclick” too.

Conditions

Ok so we have learned that we can create variables and store information in them. Also we learned that functions are constantly being fed our variables to process out desired results. We even learned how to process variables within a function or send variables to a function. Logically we must ask out self, “How can we give our functions even more room to process our results of any given situation not just value?”.

There are plenty of built-in features to JavaScript that really expand the diversity of how information is process in a function, but most widely use is called conditional statements.

Giving conditions to functions means we get to be a bit more divers in how our variables are in fact being processed, a clause if you will.

Basically a simple conditional statement will look like the following.

if()
{}
else
{}

If something meets or fails our requirements do this, else do that, is what a conditional statement is saying. A conditional statement must always begin with the “if” clause followed by parentheses that will hold our deciding factor and then a pair of curly brackets.

In this first set of curly brackets we begin to process our variables and results “if” we either meet or fail our deciding factor depending on how the factor is set up. However there is always two sides to any deciding factor, so this is where the else portion comes in and gives an alternative process to our deciding factor. First stating “else” and then another pair of curly brackets is the second half of a conditional statement. In this second pair of curly brackets we hold the flip side to our deciding factor and how our variables will be processed. Ok let’s make a quick conditional statement in our firstFunction().

function firstFunction(firstVariable, secondVariable)
{
  var difference = firstVariable - secondVariable;
  if(difference == 4)
  {
    alert(difference);
  }
  else
  {
    alert("Sorry we expected something diffrent!");
  }
}

Ok so in our conditional statement you can see that we make our deciding factor to be.

If the variable “difference” is = to the number 4, then alert out the “difference” to our user, else alert our a sorry message”.

So if in our clicked button, we change any of the two variables we will get alerted this sorry message. Try it out yourself.

One last thing to talk about is the conditional statement before wrapping up this lesson is the alternative ways of using the conditional statements.

What do you do if your one function needs to have a whole array of conditions of how data might be processed? Well we are allowed two ways, one is nesting statements like so.

var difference = firstVariable - secondVariable;

if(difference == 4)
{
alert(difference);
}
else
{
      if(difference == 6)
      {
        alert(difference);
      }
      else
      {
              if(difference == 8)
              {
                alert(difference);
              }
              else
              {
                alert("Sorry we expected something different!");
              }
      }
}

Here we have nested two conditional statements within our “else” clauses, to meet an array of deciding factors for different numbers our “difference” variable is expected to be. Again if our “difference” variable will not meet any of the deciding factors will get alerted our sorry message.

The other method and more standard is not to nest your statements, but harness something called the “else if“. Here are the same conditions as above, but now using the “else if”.

var difference = firstVariable - secondVariable;

if(difference == 4)
{
  alert(difference);
}
else if(difference == 6)
{
  alert(difference);
}
else if(difference == 8)
{
  alert(difference);
}
else
{
  alert("Sorry we expected something different!");
}

Ok so this is a lot cleaner if you ask me, and easy to maintain. Just like a regular conditional statement you have the opening if-clause and ending else clause, but here we introduce between the two the “else if” conditions to break out of our nested habits.

Ok so today we not only learned what a variable is and what it is for, but also how to feed it to a function. We learned about functions and receiving variables in functions and a JavaScript feature called alert to present our results to our viewers. We even learned about conditional statements and how they extend our ability’s to be more diverse in our functions processing.

And that’s your JavaScript 101 crash course everyone!

Thanks.

Devin R. Olsen

Lesson Two: Learning Intermediate JavaScript Faster Than Ever!

Devin R. Olsen

Located in Portland Oregon. I like to teach, share and dabble deep into the digital dark arts of web and game development.

More Posts

Follow Me:
TwitterFacebookGoogle Plus

37 Responses to “Learning Basic JavaScript Faster Than Ever!”

  1. swetha says:

    Thank u so very much.The title justifies it. This is the easiest n fastest way anyone could learn.
    That was absolutely amazing.can u plz give us a tutorial on arrays n objects.

  2. Ri says:

    I liked your tutorial a lot. I would recommend you do a super easy tutorial on Javascript arrays and objects as they are really important in the programming world. There are so many tutorials online on that but all of them have failed miserably in that they try to cover too much in one go instead of breaking it down step by step. You should do a simple tutorial on Javascript arrays and objects so that people feel more confident when tackling the more complicated Javascript tutorials. And yes, I do believe Javascript will end up replacing ruby and other programming languages in the future. People will argue that, but Javascript is the future. You don’t need ruby when you can just do it with Node.js__ also don’t forget that you can also combine with a powerful framework like Angular.js – – if that’s not enough, you can also use Javascript for phone applications. I would say Javascript can do the job in all areas of Web Development and app development. If you want to use a powerful tool for building Web apps and don’t want to use Javascript too much, then go for ASP.NET MVC 4 – – there are a lot of jobs with those set of skills under your belt(Javascript, ASP.NET).

  3. Gill F says:

    Really good tutorial but for some reason this one is not working for me and I cannot spot anything wrong. Hope you can help.

    function firstFunction(firstVariable, secondVariable)
    {
    var difference = firstVariable – secondVariable;

    if(difference == 4)
    }
    alert(difference);
    }
    else if(difference == 6)
    {
    alert(difference);
    }
    else if(difference == 8)
    {
    alert(difference);
    }
    else
    {
    alert(“Sorry we expected something different!”);
    }

    • Randy says:

      Two Curly brace mistakes i see..

      1)You need a opening curly “{” after the “if” condition,I see you put a closing brace instead.

      2. you need to put a closing brace “}” for your “firstFunction”..I only see you only put a opening brace before ” Var difference”

      function firstFunction(firstVariable, secondVariable)
      { <—you need to close this function (see below)
      var difference = firstVariable – secondVariable;
      if(difference == 4)
      } <— change to opening brace "{"
      alert(difference);
      }
      else if(difference == 6)
      {
      alert(difference);
      }
      else if(difference == 8)
      {
      alert(difference);
      }
      else
      {
      alert(“Sorry we expected something different!”);
      }
      <—add another closing curly brace for close your firstFunction

    • swetha says:

      Hi gill f
      I think u posted it long time ago that, the code is not working for some reason. Im new just joined today. Ur code isnt working bcoz after the first if statement u used a closing bracket.

  4. KB says:

    Keep it going Devin you rock my man !!!

  5. Rajiv Kumar says:

    This is very good idea.

  6. babar zaman says:

    it is really very precise and accurate knowledge which you have delivered in this site… its actually what i wanted for….. although m beginner but it is just like a teacher , who come to the ground level to let his student to understand himself…… great!!!!

  7. Hugh Chiyambiro says:

    The best javascript tutorial ever so precise and straight to the point.

    I will keep myself attached to you; keep it up!

  8. Magnus says:

    I agree with all the positive comments and I’d also like to add that it’s a good thing that you include the complete code, not just parts of it. For a newbie that’s great.
    On some sites you see people post part of the code and assume that people know it should be preceeded by &”*/”(/%*@£€@$&”!/%/””#¤&/&|@@£${//” like it’s the most natural thing in the world.
    Great job!

  9. Jacob Gregory says:

    This is an awesome toutorial… Very easily layed out for the beginner and even me as an intermediate user found this great to just re-hash things i already knew.

    The way that you laid it all out made it very easy for anyone to just pick it up and learn if they wanted to.

    A+ on effort mate you deserve it.

    -Jacob

  10. Marv says:

    Been trying to get my head around javascript for ages and your guide is the only one i have understood, the penny has dropped for me. Thanks so much Devin. Top work.

  11. Darlene A says:

    I’ve been struggling to re-learn Javascript after being away from it for so long, but this short tutorial made absolute sense to me and now I’m able to finally get back to finishing my website! Thanks Devin! If you’re teaching any other scripting languages, sign me up :-)

  12. Beto says:

    Damn this made sense. Thanx

  13. Steve says:

    Great article. I feel like this really took the basic logic of javascript and put it into simple terms you could learn and understand. Thanks!

  14. Harshal says:

    Thanks, that was easy. I liked it.

  15. Brenda says:

    Thank you. I took a class and could not pick up javascript. You made everything I struggled with in class EASY! If you are a teacher, your students are lucky because everyone cannot teach this and simplify it the way you did. Great job and thanks again!

  16. Nits says:

    Nice for beginers

  17. Matt says:

    I am 12 and i got this good job.

  18. Andy Weinstock says:

    I am now a die hard fan!!! Way To Go!

  19. broken home says:

    Hey There. I found your blog the use of msn. That is a really well written article. I will be sure to bookmark it and return to learn extra of your helpful information. Thanks for the post. I will definitely comeback.

  20. shrey says:

    great tutorial i have to make a website for a competition and it is helping a lot.Plz post some examples and applications on my mail if you have any xyzxyz123@123abc.com
    thanks in advanced

  21. Nick says:

    Thanks dude! I have an exam in a few hours and I need to know html, javascript, and CSS :(…two down….one to go! Great Job! :D

  22. jav says:

    Good job keep it up .we are waiting for next lesson

  23. Pavan Kondapuram says:

    this will help learners a lot. keep up.

  24. […] Schau dir Javascript ganz kurz an: Learn Basic JavaScript Fast Than Ever | Devin R. Olsen Web Developer […]

  25. Roselia Gambino says:

    I like your post. Your blog is fantastic.

  26. Hey, I came across this article while searching for help with JavaScript. I’ve recently changed browsers from Chrome to Mozilla Firefox 3.1. After the change I seem to have a problem with loading JavaScript. Every time I browse site that requires Javascript, the page doesn’t load and I get a “runtime error javascript.JSException: Unknown name”. I can’t seem to find out how to fix it. Any help is greatly appreciated! Thanks

  27. Jimmy K. says:

    This was a pretty good beginners tutorial! I was expecting an introduction to switch as an alternative to if else statements, but I suppose that can be covered in an intermediate tutorial.

  28. Daya says:

    this is great!!!! Simple

  29. huwaw69 says:

    This is quite hard to learn, i guess? javascript is so much different than HTML, its like C/C it can store variables and make functions and if statements…

  30. Frank says:

    This is just what I needed to get a grasp of Javascript. I know there is much to learn, but I can proceed with more confidence now.

  31. bob says:

    Devin, great stuff. Please post a follow-up episode, I’d love to learn more and you’re a good teacher. Cheers

  32. Devin R. Olsen says:

    Hi Ashley Hyatt-Ince, I am glad you enjoyed this tutorial. It, like my CSS tutorials will be extended into an intermediate and then advanced version and I plan to release the intermediate version this weekend. On the topic of email, I really think its time this site begins a monthly news letter any thoughts everyone?

  33. Ashley Hyatt-Ince says:

    In a nut shell absolutly amazing tutorial devin please post more if ever so email me at ash(at)ashleyhyattince.com

  34. Smoke says:

    Nice Tut� Keep Going

  35. Ashley M. says:

    Thanks for the tutorial Devin, I’m awaiting the next part!

  36. Devin R. Olsen says:

    I always enjoy feedback from my readers!

Leave a Reply