Tutorial : Fastest Way to Learn JavaScript - 2 Hours

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.

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";

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>

Tutorial : Fastest Way to Learn JavaScript - 2 Hours

What do I need to know about JavaScript?

Your First JavaScript Program

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

JavaScript Practice Example 2: Working with switch statement

Recent Posts

Tags

Facebook

Follow Us

Random Posts

Recent Posts