Java Script Tutorial 11 : JavaScript For Loop

When you write code, you want the same block of code to run over and over again in a row. Instead of adding several almost equal lines in a script we can use loops to perform tasks. There are two different kind of loops, we use in JavaScript, these are as follows :

1. for 
2. while

We discuss only for loop in this tutorial.


The for Loop :
The for loop is used when you know in advance how many times the script should run. Syntax of for loop is as follow :


for ( variable = startvalue; variable<endvalue;variable = variable + increment)
  {
       code to be executed
  }


For example


for (i=0; i<3; i++)
  {
  y=y + "The number is " + i + "<br />";
  }


This for loop runs 3times, and write results in every new line. The result of above code will be :


The number is 0
The number is 1
The number is 2

Java Script Tutorial 10 : JavaScript Popup Boxes

There are three kind of popup boxes in JavaScript

• Alert box
• Confirm box
• Prompt box

Alert Box :
An alert box is often used if you want to make sure information comes through to the user. When an alert box pops up, the user will have to click "OK" to proceed. Syntax of Alert Box is as follows :

Javascript alert box.

For example

Javascript alert box in html.

Confirm Box :
A confirm box is often used if you want the user to verify or accept something. When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed. If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false. Syntax of Confirm Box is as follows :

Javascript confirm box.

For example

Javascript confirm box in html.

Prompt Box :
A prompt box is often used if you want the user to input a value before entering a page. When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value. If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null. Syntax of Prompt Box is as follows :

Javascript prompt box.

For example

Javascript prompt box in html.

To display line breaks inside a popup box, use a back-slash followed by the character n. For example

Javascript alert box.

Java Script Tutorial 9 : JavaScript Switch Statement

The switch statement are used to perform different action based on different conditions. The switch statement can be replaced by performing many if-then-else-if conditions, but when the answer of an evalution can give you many different answers, the switch-case statement can be more efficient. Syntax of switch statement is as follow :


switch(x)
{
case 1:
  execute code block 1
  break;
case 2:
  execute code block 2
  break;
default:
  code to be executed if x is different from case 1 and 2
}


The value of the variable x will be compared with the values for each case in the structure. If there is a match, the block of code associated with that case is executed. Use break to prevent the code from running into the next case automatically. For example


switch ( day )
{
case 0:
  y="Sunday";
  break;
case 1:
  y="Monday";
  break;
case 2:
  y="Tuesday";
  break;
}


If the value of variable day is 0 then result will be "Sunday", and result will be "Monday" and "Tuesday" if values will be 1 and 2 respectively.


We use the default keyword to specify what to do if there is no match. For example, there is no value equal to 0, 1 or 2, then write a default message, for example write "friday".


switch ( day )
{
case 0:
  y="Sunday";
  break;
case 1:
  y="Monday";
  break;
case 2:
  y="Tuesday";
  break;
default:
  y="Friday";
}


If there is no match found then result will be "friday".

Java Script Tutorial 8 : If Else Statements

Conditional statements are used to perform different actions based on different conditions. In JavaScript we have the following conditional statements.

• if statement
• if...else statement
• if...else if....else statement
• switch statement

If Statement :
We use the if statement to execute some code only if a specified condition is true. Syntax of if statement is as follow :


if (some condition)
  {
  code to be executed if condition is true
  }


For example


if (number<33)
  {
  x="failed";
  }


If value of variable number is less then 33 then result will be "failed".


If  .. else Statement :
We use the if  else statement to execute some code if a condition is true and another code if the condition is not true. Syntax for this is as follows :


if (some condition)
  {
       code to be executed if condition is true
  }
else
  {
       code to be executed if condition is not true
  }


For example


if ( number < 33 )
  {
  y="failed";
  }
else
  {
  y="passed";
  }


If the value of variable number less then 33 then result will be "failed", otherwise result will be "passed".


If .. else if  .. else Statement :
We use the if  else if  else statement to select one of several blocks of code to be executed. Syntax for this is as follow


if (condition 1 here)
  {
       code to be executed if condition1 is true
  }
else if (condition 2 here)
  {
       code to be executed if condition2 is true
  }
else
  {
       code to be executed if neither condition1 nor condition2 is true
  }


For example


if (number>90)
  {
  y="Passed : Excellent Result";
  }
else if (number<33)
  {
  y="failed";
  }
else
  {
   y="passed";
  }

If the value of variable number will be greater then 90 then result will be "Passed : Excellent Result". if value will be less then 33 then result will be "failed", otherwise (when value will be between 33 and 90 ) result will be "passed".

Java Script Tutorial 7 : Comparison and Logical Operators

Comparison operators are used in logical statements to determine equality or difference between variables or values. Comparison operators can be used in conditional statements to compare values and take action depending on the result. There are many Comparison operators used in javascript, some of these are below :

Operator Symbol	Uses/Description
= =	is equal to
= = =	is exactly equal to (value and type both)
! =	is not equal
>	is greater than
<	is less than
> =	is greater than or equal to
< =	is less than or equal to

Logical operators are used to determine the logic between variables or values. We can use following logical operators in java script.


&& ( and  )
|| ( or )
! ( not )


conditional operator : JavaScript contains conditional operator that assigns a value to a variable based on some condition. Syntax of this conditional operator is as below.


somevariablename = (put condition here) ? value1 : value2


If condition meets then output 'll be 'value1', and if condition doesn't meet then output 'll be 'value2'.

Java Script Beginner Tutorial 6 : JavaScript Operators

JavaScript operators are used to perform operations on JavaScript variables. The assignment operator = is used to assign values to JavaScript variables. The arithmetic operator + is used to add values together. For example


x = 3;
y = 4;
z = x + y;


The output 'll be equal to 7. 


Arithmetic operators are used to perform arithmetic between variables and/or values. There are many arithmetic operators, we use in JavaScript, for example


+  ( used for addition),                -  ( used for subtraction ), 
*  ( used for multiplication ),        /  ( used for division ), 
%  ( used for modulus ),             ++  ( used for increment ) and 
--  ( used for decrement )


Assignment operators are used to assign values to JavaScript variables. These assignments operators can be used in JavaScript :


= ,  += ,  -= ,   *= ,   /=   and   %=


The + operator can also be used to add string variables or text values together. For example


str1 = "This is ";
str2 = "a fox";
str3 = str1 + str2;


The output 'll be "This is a fox."
If you add a number and a string, the result will be a string. For example 


x = "this is a string" + 10 ;


The output 'll be "this is a string10".

Java Script Beginner Tutorial 5 : Java Script Variables

JavaScript variables are used to hold values or expressions. A variable can have a short name e.g x or y etc, or it can have more descriptive name, for example firstname or city. There are some rules for naming JavaScript variables, these are below.

• Variable names are case sensitive, y and Y are two different variables. (as JavaScript is case-sensitive, so variable names are also case-sensitive.)
• Variable names must begin with a letter, the $ character, or the underscore character.

JavaScript Variables Declaration :
Creating new variable in JavaScript is most often referred to as "declaring" a variable. Variables are declared in JavaScript using var keyword, e.g var cityname; To assign a value to the variable, we use the  =  sign, e.g cityname="NYC"; However, we can also assign a value to the variable when we declare it, e.g var cityname="NYC";


To assign a text value to a variable, put quotes around the value. While assigning a numeric value to a variable, do not put quotes around the value, if you put quotes around a numeric value, it will be treated as text. If you redeclare a JavaScript variable, it will not lose its value.


If you assign values to variables that have not yet been declared, the variables will automatically be declared as global variables. e.g cityname="NYC"; will declare the variable carname as a global variable if it does not already exist.


Local JavaScript Variables :
A variable declared within a JavaScript function becomes local and can only be accessed within that function. Local variables can be with the same name in different functions, because local variables are only recognized by the function in which they are declared. Local variables are deleted as soon as the function is completed.


Global JavaScript Variables :
Variables declared outside a function, become Global, and all scripts and functions on the web page can access it. Global variables are deleted only when you close the page.


JavaScript Arithmetic :
You can do arithmetic operations with JavaScript variables ( as we do with algebra ). For example


y=3;
x=y+4;

Java Script Beginner Tutorial 4 : Java Script Comments

JavaScript comments can be used to make the code more readable. Comments are not executed by JavaScript. There are two ways for commenting JavaScript Code. These are as follows


Single line comments :
Single line comments start with //. For example, we use single line comments to explain the code.


// Edit paragraph on page load
document.getElementById("Parag").innerHTML="This paragraph added using JS.";


Single line comment can be used to prevent the execution of one of the code lines, for example


//document.getElementById("p1").innerHTML="paragraph 1 text here";
document.getElementById("p2").innerHTML=" paragraph 2 text here ";


First code line 'll not be executed by browser.

JavaScript Multi-Line Comments :
Multi line comments start with /* and end with */.
For example


/*
The JS code below will 
Edit paragraph,
having id "parag".
*/
document.getElementById("Parag").innerHTML="This paragraph added using JS.";


Multi-line comments can used to prevent the execution of a code block. For example


/*
document.getElementById("p1").innerHTML="paragraph 1 here";
document.getElementById("p2").innerHTML=" paragraph 2 here ";
*/


Comments can be placed at the end of a code line as well. For example


var str="My name is Waqas."; // declare a variable and assign a value to it
str= str + "I am JS developer"; // concatenate string to variable.

Java Script Beginner Tutorial 3 : Where to place JS

There are different ways, we can place Java Script code inside web page. These are as follows
JavaScript in <body>
JavaScript in <head>
Using an External JavaScript


JavaScript in <body> :
Java Script code can be placed in <body> tag. It is placed at the bottom of the page to make sure all the elements are loaded completely. If Java Script code executed before entire page loaded then it may cause problem, e.g trying to change content of some element ( say <p> ) , which is not loaded yet, can cause problem. For example


<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="content">A Paragraph</p>
<script type="text/javascript">
document.getElementById("content").innerHTML="Edited using JavaScript";
</script>
</body>
</html>


If we place <p> tag after Java Script code then definitely it cause problem.


JavaScript Functions and Events :
If we want to execute a JavaScript when an event occurs, such as when a user clicks a button then we 'll put the script inside a function. Functions are normally used in combination with events. For example, in following code, JS function named "myFunction" 'll be called on button click event. ( This is also example of Java Script in <head> )


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function myFunction()
{
document.getElementById("content").innerHTML="Edited using JavaScript Function";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="content">A Paragraph</p>
<button type="button" onclick="myFunction()">Click Me !!!</button>
</body>
</html>


You can place an unlimited number of scripts in your document, and you can have scripts in both the body and the head section at the same time. It is a common practice to put all functions in the head section, or at the bottom of the page. This way they are all in one place and do not interfere with page content.


Using an External JavaScript :
JavaScript can also be placed in external files. External JavaScript files often contain code to be used on several different web pages. External JavaScript files have the file extension .js. To use an external script, point to the .js file in the "src" attribute of the <script> tag. For example


<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="myScript.js"></script>
</body>
</html>


The script will behave as it was located in the document, exactly where you put it.

Java Script Beginner Tutorial 2 : How To Use

JavaScript is typically used to manipulate existing HTML elements. The HTML "id" attribute is used to identify HTML elements. The document.getElementById() method will access the HTML element with the specified id. For Example, in following code, the browser will access the HTML element with id="content", and replace the content with "Edited using JavaScript ".


<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="content">My First Paragraph</p>
<script type="text/javascript">
document.getElementById("content").innerHTML="Edited using JavaScript";
</script>
</body>
</html>


The HTML <script> tag is used to insert a JavaScript into an HTML document. Inside the <script> tag use the type attribute to define the scripting language (e.g type="text/javascript"). The <script> and </script> tells where the JavaScript starts and ends. The lines between the <script> and </script> contain the JavaScript and are executed by the browser:


Browsers that do not support JavaScript, will display JavaScript as page content. To prevent them from doing this, and as a part of the JavaScript standard, the HTML comment tag should be used to "hide" the JavaScript. Add an HTML comment tag <!-- before the first JavaScript statement, and a --> (end of comment) after the last JavaScript statement, as follows


<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
<!--
document.getElementById("content").innerHTML="Edited using JavaScript";
//-->
</script>
</body>
</html>


The two forward slashes at the end of comment line (//) is the JavaScript comment symbol. This prevents JavaScript from executing the --> tag.


The following example writes a <p> element into the HTML document:


<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<script type="text/javascript">
document.write("<p>Added using JavaScript</p>");
</script>
</body>
</html>


The problem here is that, the entire HTML page will be overwritten if document.write() is used inside a function. So we must use document.getElementById() to avoid overwritten entire HTML page.

Java Script Beginner Tutorial 1 : Introduction

Introduction :
JavaScript is the most popular scripting language on the internet, and works in all major browsers. It can be used without purchasing a license. 


JavaScript was designed to add interactivity to HTML pages. It is a scripting language. A scripting language is a lightweight programming language. JavaScript is usually embedded directly into HTML pages.


Java and JavaScript :
Java and JavaScript are two completely different languages in both concept and design. Java is a powerful and much more complex programming language , such as C and C++. 
Java is server side language while Java Script is client side language.


Usage of Java Script :
Java Script is used for following purposes.

1. Java Script gives HTML designers a programming tool.
2. Java Script can react to events.
3. Java Script can manipulate HTML elements.
4. Java Script can be used to validate data.
5. Java Script can be used to detect the visitor's browser.
6. Java Script can be used to create cookies.

What is ECMAScript :
JavaScript is an implementation of the ECMAScript language standard. ECMA-262 is the official JavaScript standard.
JavaScript was invented by Brendan Eich at Netscape, and has appeared in all browsers since 1996.
The official standardization was adopted by the ECMA organization in 1997.
The ECMA standard was approved as an international ISO (ISO/IEC 16262) standard in 1998.