Tutorial : Fastest Way to Learn JavaScript - 2 Hours

1:43 PM 0 Comments



       Scripting languages are interpreted than compiled and are used for rich web development. There are two types of scripting languages in Web side; Client Side Scripting languages and Server Side Scripting Languages. Client side scripting language runs in the client’s browser. The Server Side Scripting language runs on the Server. JavaScript is a powerful one; it is a cross-platform scripting language. JavaScript is developed by Netscape Communications Corporation. It is simple to learn, easy to use, a good general purpose scripting language. JavaScript supports all major web browsers like IE, Firefox, Safari etc. The JavaScript Code goes between <script>…</script> tag. type attribute helps to specify you are writing JavaScript client side script.

 Fastest Way to Learn JavaScript - 2 Hours


What do I need to know about JavaScript?


  • It's simple!
  • It will not pop up any error on browsers.
  • Browser side scripting
  • JavaScript code is written into an HTML page.
  • The best language for the web.
  • JavaScript is easy to implement.
  • It helps to fix some CSS issues of browsers.
  • It's a prototyping language.
  • It supports Object Oriented Design.

Your First JavaScript Program 

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.writeln("Welcome to JavaScript Client Side Scripting");
</script>
</body>
</html>

             The Above Example will print ” Welcome to JavaScript Client Side Scripting ” on your web page. JavaScript follows Document Object Model. ‘document.writeln’ the statement is the standard command for printing output to a Web page. We can also define JavaScript code in <head>…</head> tag. For example JavaScript Function definition. The above code can be saved as .htm or .html file.(You can use your favourite text editor to write JavaScript like Notepad, Notepad++ etc).

Variables are used to store values in a program. The value of the variable may change during the execution of the program. if you don’t want to change value at run time, declares it as constant. A variable referred by its name. JavaScript has a strict protocol for declaring variables, a variable name must start with a letter or underscore(‘_’) you can use 0-9 digits or A-Z, a-b characters. Some of the examples are given below.

·    first_name Correct
·    _foo Correct
·    name007 Correct
·    #roll Incorrect
·    ?user Incorrect
·    9xuser Incorrect

    JavaScript is a case-sensitive language! In JavaScript, there is two level of scope variables, Global and Local variables. all the functions can access the global variable, it is declared as globally. it should be declared outside the function. The local variables are only accessible within that function they are declared inside a function. The local variables are declared inside a function. Let's write an example.
var total=3.254;,
var name="java is nice";
var _age=25;
Data Types in JavaScript
Data Types Specify the size and type of the values we need to store. There are a number of data types available in JavaScript.
•    Numbers : JavaScript supports both floating point numbers and integers . example :        1.256,453.9554,16,89,1254,10000 etc.
•    Boolean : Logical values, The possible Boolean values are one of the two values. true or false.
•    Strings – Number of characters enclosed in double quotes are referred as a string. JavaScript can perform various operations such as comparing, concatenation.
•    Null : A null value means no value at all. it must not be taken as zero.
Operators in JavaScript
You can perform operations like addition, subtraction, division etc using JavaScript.
Arithmetic Operators 
•    Addition(+) = a+b
•    Subtraction(-) = a-b
•    Multiplication(*) = a*b
•    Division(/) = a/b
•    Modulus(%) = a%b
•    Increment(++) = a++ =a=a+1
•    Decrements (–) = a– =a=a-1
Assignment Operators
•    = (a=b)
•    += (a+=b that is a=a+b)
•    -= (a-=b that is a=a-b)
•    *= (a*=b that is a=a*b)
•    /= (a/=b that is a=a/b)
•    %= (a%=b that is a=a%b)
Comparison Operators
A comparison operator compares its operands and return a logical value based on the comparison
•    === [is equal to , check both value and type]
•    == [is equal to]
•    != [not equal to]
•    >
•    <
•    >=
•    <=
Logical Operators
•    Logical AND [&&]
•    Logical OR [||]
•    Logical NOT [!]
String Operator 
The + operator is used for mathematical operations and join two strings. Consider JavaScript Strings
s1, s2,s3;

 var s1="tax";
 var s2="given";
 var s3="by James";
 var output=s1+s2+s3; 
document.write(output);
Control Statements in JavaScript
JavaScript supports two types of control statements, Conditional statements and Loop Statements. The Conditional statements are used for taking decision under certain conditions.
if Statement
if statement is a decision making statement. This helps you to navigate the logic you given.
Example Snippet Syntax:
if (Condition) {

// if the condition true, then body of the statement will execute.

}
if .. else Statement
if (Condition) 

} else
 { // if the condition false control comes here and execute
 }

JavaScript Practice Example 1 : Check whether the number is odd or even.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
var num=2;
if(num%2==0)
{
document.write("Even Number");
}
else
{
document.write("Odd Number"); 
} 
</script>
</body>
</html>
if.. else if
if(condition1)
{ //it will execute if the condition1 is true
 } else if(condition2)
{ //it will execute condition 2 is true
 } else
{ executes if condtion1 and condition 2 are not true.
}
Switch Statement We use if condition to control the selection of a number of choices in a program, sometimes it makes complexity. We can use the switch instead of if statements.

 switch(value)
{
case case-value1:
block of statements
break;
case case-value2:
block of statements
break;
case case-value3:
block of statements
break;
case case-value4:
block of statements
break;
default:
statement
}

JavaScript Practice Example 2: Working with switch statement

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
<script type="text/javascript"> 
var num=1; 
switch(num) 
{
case 1: 
document.write("it is one");
break; 
case 2: 
document.write("it is two");
break; 
case 3: 
document.write("it is three");
break; 
case 4: 
document.write("it is four");
break; 
case 5: 
document.write("it is five");
break; 
case 6: 
document.write("it is six");
break; 
default: 
document.write("Wrong Number!"); 
} 
</script> 
</body> 
</html>
Loop Statements
Loops are used to execute the same block of code repeatedly;

 if the condition is true. for Syntax

for(initialization;Condition;Updation) 
{
 body of the loop; 
}

JavaScript Practice Example 3: Working with for Loop

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
var len=0;
for(len=0;len< 4; len+1)
{
document.write("welcome to nikisurf JS Tutorials");
}
</script>
</body>
</html>
While loop
Syntax 
while(condition)
 { //body of the loop

 }
JavaScript Practice Example 4: Working with while Loop
<!DOCTYPE html>
<html> 
<head> 
</head> 
<body> 
<script type="text/javascript"> 
var x=0; 
while(x < 3) 
{
document.write("nikisurf is good");
x=x+1; 
}
</script> 
</body> 
</html>
Do While Loop
Syntax
 for do while loop
 do {
 statements..

 } while(condition);
JavaScript Practice Example 5: Working with do while Loop
<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
<script type="text/javascript"> 
var x=0; 
do
{
document.write("nikisurf is good");
x=x+1; 
}while(x <3); 
</script> 
</body> 
</html>
Break and Continue in JavaScript

<!DOCTYPE html> 
<html>
<head>
</head>
<body>
<script type="text/javascript">
var x=0;
for(x=0;x<= 10; x++)
{
if(x==5)
{
break;
} 
document.write("The number is "+x);
} </script> </body> </html>
Continue Statement Example in JavaScript
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
var x=0;
for(x=0;x <= 10; x++)
{
if(x==5)
{
continue;
} 
document.write("The number is "+x);
} 
</script></body>
</html>

Functions in JavaScript

The function is a reusable code designed to work on the data and executed by an event or by a call to that function. We can define a function with arguments and without arguments.

JavaScript function without argument
<!DOCTYPE html> 
<html>
<head>
<script type="text/javascript">
function hello()
{
alert("Welcome to JavaScript"); 
}
</script>
</head>
<body onload="hello()">
</body>
</html>

JavaScript function with argument example


<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript"> 
function pi(r) 
{
var pi=3.14; 
var result=(r*r*pi); 
document.write(" "+result); 
alert("Value"+result); 
}
</script> 
</head> 
<body onload="pi(3)" > 
</body> 
</html>
Common Dialog Boxes in JavaScript
Alert Box in JavaScript
<!DOCTYPE html>
<html> 
<head> 
<script type="text/javascript"> 
function hello()
{
alert("Welcome to JavaScript");
}
</script> 
</head> 
<body onload="hello()"> 
</body> 
</html>
Prompt Example in JavaScript
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function hello()
{ 
var d;
d=prompt("Enter Your Name");
alert("Welcome"+d); 
}
</script>
</head>
<body onload="hello()">
</body>
</html>

Hi Nikinmon SK i like to share my knowledge !

0 comments: