Translate

Kamis, 14 Februari 2013

Java Script Tutorial



Now we will talk about Java Script with a simple explanation and great example.
And this I have an Java Script Tutorial for beginner. I've copied this Tutorial from http://www.devinrolsen.com/learning-basics-of-javascript/. So if you want read more detail than my artikel, you can go to that website.
And now is time to learn, check it out. (you can translate this artikel with press the translator on top of my blog, beside my blog title)
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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript 101</title>
<script type="text/javascript">

</script>
</head>

<body>
</body>
</html>
Notice that in the above blank documents header tags we have script tags(<script type=”text/javascript”></script>). 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 xvariable, 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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript 101</title>
<script type="text/javascript">
function firstFunction()
{
  var firstVaribile = 10;
  var secondVaribile = 6;
  var difference = firstVaribile - secondVaribile;

  alert(difference);
}
</script>
</head>

<body>
<input type="button" value="Click Me" onclick="firstFunction()"/>
</body>
</html>
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”.
<input type="button" value="Click Me" onclick="firstFunction('10','6')"/>
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.

Source : http://www.devinrolsen.com/learning-basics-of-javascript/

0 komentar:

Poskan Komentar

Tolong beri komentar untuk membangun blog ini menjadi lebih baik lagi dan semakin bermanfaat. Terimakasih

 

Popular Posts

Popular Posts this month

Popular Posts this week