Sunday, June 10, 2018

Java Script Tutorial 1


Learn JavaScript Quickly
Introduction: -
            Welcome to Learn JavaScript Quickly tutorial series.
As you know that there are a lot of tutorial there to teach you Java Script in detail which will take a lot of your time. And you are having low amount of time to spend. Here you will learn JavaScript Quickly. So without wasting much time let’s start learning JavaScript Quickly.
            JavaScript is a client side language in website design and development. JavaScript runs in a web browser. Java script is usually used for client side validation, interaction with html and many other client side works. In this tutorial of JavaScript Quickly series you will learn Basic Variables, Loops, Writing on webpage and displaying messages. One thing to remember is that in this tutorial no HTML will be included which will make this tutorial easy to learn. We will make HTML file to run our script only.

Writing something on webpage using JavaScript:-
document.write(); function is used to write anything on web page. You will pass text to this function to display on document.
Example:-
<script>
            document.write(‘Learn JavaScript Quickly’);
</script>
This save this file as .html and open this in browser. This will display “Learn JavaScript Quickly”
“<script></script>” are html tags for adding JavaScript in html document. Always remember to surround your JavaScript with these tags. You should always add “;” at the end of JavaScript line.
Exercise:-
You should write your name using this function you have learned.

Displaying Messages:-
alert(); function is used to display messages in webpage. You will pass text to this function to display message box.
Example:-
<script>
            alert(“Learn JavaScript Quickly”);
</script>
Above code will display message “Learn JavaScript Quickly”. Run this and see result.
Exercise:-
Write your name using alert 3 times.

Basic Variables:-
This section will teach you only basic variables and their usage. Variable is a section of memory which is reserved for storing any data. To store anything JavaScript uses var for variable declaration. Syntax of declaration is var myVar; and value is added as myVar = 10 etc. Here value is 10.
Example1:-
<script>
var myVar;
myVar = 10;
document.write(myVar);
</script>
Example2:-
<script>
var myVar;
myVar = “Learn JavaScript Quickly”;
document.write(myVar);
</script>
In this code myVar is a variable which is used for storing alphabets and numbers.
Exercise:-
Write your name on document by adding it into a variable. You should also display message showing value of your variable.

Loops:-
If we want to repeat some set of commands, actions or conditions loops are used. Syntax is “for(Condition){}”, “while(Condition){}” and “do{}while(Condition)”. Loop is terminated on certain condition.
Example for Loop:-
<script>
            for(var i=0; i<10; i++)
            {
                        document.write(“Learn JavaScript Quickly”);
}
</script>
Explanation:-
We have made a variable i and added value of 0 to it. Then checking i<10;. i++ is used here to increase i by 1. Which will repeat document.write(“Learn JavaScript Quickly”); 10 times which will display “Learn JavaScript Quickly” 10 times.
Example while loop:-
<script>
            var i = 0;
            while(i<10)
            {
                        document.write(“Learn JavaScript Quickly”);
                        i++;
}
</script>
Explanation:-
In while loop we can’t make variable, add value to them and increase them like for loop. We have to declare variable separately check for condition as while(i<10) then in body we can increase variable like i++.
In this example we have made a variable var i=0; then checked it as while(i<10) then increased it as i++;. With this document.write(“Learn JavaScript Quickly”); will be repeated 10 times to display  “Learn JavaScript Quickly” 10 times.

Example do while loop:-
<script>
            var i = 0;
            do
            {
                        document.write(“Learn JavaScript Quickly”);
                        i++;
}
            while(i<10)
</script>
Explanation:-
This loop works same a while loop. It has one main thing that it executes at least once. In this example we have created a variable var i=0; then we have to write do{} to start our do while loop. After body { } we check for condition of do while loop as while(i<10). In body i will increased as i++;. When the loop will execute it will repeat document.write(“Learn JavaScript Quickly”); ten Times to display “Learn JavaScript Quickly” 10 times.
Exercise:-
Display 7 messages box displaying anything using for loop, while loop and do while loop.
The End
Keep visiting for more instructive posts.