Embed Size (px)
Citation preview
Javascript TrainingJavascript Training
Introduction to JavscriptIntroduction to Javscript 2 Hours2 HoursVariablesVariables 1 Hour1 HourOperatorsOperators 1 Hour1 HourStatementsStatements 1 Hour1 HourLoopsLoops 2 Hour2 HourFunctionsFunctions 2 Hour2 HourArraysArrays 1 Hour1 Hour
TotalTotal 10 Hours10 Hours
Introduction to JavascriptIntroduction to Javascript Javascript is the client side scripting language, developed by netscape, used Javascript is the client side scripting language, developed by netscape, used
along with HTML to build an efficient web site / webpage.along with HTML to build an efficient web site / webpage. In the beginning stages, web pages were developed only using html which In the beginning stages, web pages were developed only using html which
are nothing but static pages. User interaction and dynamic changes are not are nothing but static pages. User interaction and dynamic changes are not possible with html. With the advent of scripting languages, the problem was possible with html. With the advent of scripting languages, the problem was solved. There are two types of script languages - server side and client solved. There are two types of script languages - server side and client side.When a page is requested, the request is sent to the server and data is side.When a page is requested, the request is sent to the server and data is fetched and viewed in the browser.fetched and viewed in the browser.
If the dynamic changes in the webpage are caused in the client side (the If the dynamic changes in the webpage are caused in the client side (the browsers like mozilla / IE) it is called client side scripting language (E.g. - browsers like mozilla / IE) it is called client side scripting language (E.g. - Javascript).Javascript).
If the dynamic changes in the web page are caused in the server side (the If the dynamic changes in the web page are caused in the server side (the server checks the request and based on the data it makes changes in the server checks the request and based on the data it makes changes in the page before sending the data to the browser) it is called server side scripting page before sending the data to the browser) it is called server side scripting language (E.g. - php).language (E.g. - php).
Java script codes are embedded in HTML files. Whenever a browser requests Java script codes are embedded in HTML files. Whenever a browser requests for a webpage, the HTML file along with script is transferred to the browser. for a webpage, the HTML file along with script is transferred to the browser. This tutorial will give you an introduction and help you learn java script.This tutorial will give you an introduction and help you learn java script.
JavaScript is used to create dynamic changes, validate forms, detect visitor JavaScript is used to create dynamic changes, validate forms, detect visitor details, create/use cookies, etc.. JavaScript works in all major browsers such details, create/use cookies, etc.. JavaScript works in all major browsers such as Internet Explorer, Mozilla, Firefox, Netscape, Opera, Safari and more.as Internet Explorer, Mozilla, Firefox, Netscape, Opera, Safari and more.
Introduction to JavascriptIntroduction to Javascript
Script tag is the primary tag which identifies javascript. Any javascript code should be Script tag is the primary tag which identifies javascript. Any javascript code should be written in between the script tag. written in between the script tag.
<script language="javascript"><script language="javascript"></script></script>
Here the attribute language defines the language used.Here the attribute language defines the language used.For VBscript user it will be vbscript.For VBscript user it will be vbscript.The script tag can be written anywhere inside head or body tag of html. The script tag can be written anywhere inside head or body tag of html.
Example:Example:<html><html><head></head><head></head><body><body><script language=javascript><script language=javascript>//code comes here.....//code comes here.....//code comes here.....//code comes here.....//code comes here.....//code comes here.....</script></script></body></body></html></html>
Introduction to JavascriptIntroduction to JavascriptFirst Javascript program using document.write?First Javascript program using document.write?
We will begin with the in built method or function document.write() to code our first We will begin with the in built method or function document.write() to code our first javascript program. javascript program.
This method helps to write any given variable on the browser. This method helps to write any given variable on the browser.
Example:Example:<html><html><head></head><head></head><body><body>
<script language=javascript><script language=javascript>document.write("This is my first javascript program");document.write("This is my first javascript program");</script></script>
</body></body></html></html>
Introduction to JavascriptIntroduction to JavascriptHTML tags or code can also be added using document.write method. HTML tags or code can also be added using document.write method. i.e. Just use the html code as the argument for document.write or document.writeln functionsi.e. Just use the html code as the argument for document.write or document.writeln functionsdocument.write("-- bold red --");document.write("-- bold red --");
Example Code:Example Code:<script language=javascript><script language=javascript>document.write("-- <b>bold</b> <font color=red> red </font>--");document.write("-- <b>bold</b> <font color=red> red </font>--");</script></script>
Result:Result:-- bold red -- -- bold red --
Break line for .write method :Break line for .write method :document.write will append the string to the previous string.document.write will append the string to the previous string.i.e. if you call i.e. if you call document.write(" -- first line ---");document.write(" -- first line ---");document.write(" -- second line ---");document.write(" -- second line ---");the result will be as " -- first line --- -- second line ---";the result will be as " -- first line --- -- second line ---";
So in order to break the lines in the browser you have to use an additional code "<br>" at the end.So in order to break the lines in the browser you have to use an additional code "<br>" at the end.e.g: document.write(" -- first line --- <br>");e.g: document.write(" -- first line --- <br>");
Example Code:Example Code:<script language=javascript><script language=javascript>document.write(" -- first line --- <br>");document.write(" -- first line --- <br>");document.write(" -- second line --- <br>");document.write(" -- second line --- <br>");</script></script>
Result:Result:-- first line --- -- first line --- -- second line --- -- second line ---
Introduction to JavascriptIntroduction to Javascript
The in built function alert can be used for The in built function alert can be used for creating a alert or popup message.creating a alert or popup message.
Use the function with any string as Use the function with any string as argument.argument.
Example:Example: <script language=javascript><script language=javascript> alert("This is a test alert message");alert("This is a test alert message"); </script></script>
VariablesVariablesVariables are used to store values. Variables are used to store values.
i.e. for example if we have to add two numbers, we will declare two variables and assign the numbers to each variable and i.e. for example if we have to add two numbers, we will declare two variables and assign the numbers to each variable and add them to get the result.add them to get the result.
var a = 5;var a = 5;var b= 5;var b= 5;var c = a+b;var c = a+b;
Javascript can handle the following variable typesJavascript can handle the following variable typesa) Number (Integer and Float)a) Number (Integer and Float)b) Stringb) Stringc) Booleanc) Booleand) Nulld) Nulle) Undefinede) Undefined
In javascript all variable types are declared as var, only depending on how we assign the values the data type is defined.In javascript all variable types are declared as var, only depending on how we assign the values the data type is defined.var a = "as"; --> This is a string type variablevar a = "as"; --> This is a string type variablevar a = 2; --> This is a integer type variablevar a = 2; --> This is a integer type variablevar a = true; --> This is a boolean type variablevar a = true; --> This is a boolean type variableHere var defines it as a variable. Here var defines it as a variable. "a" is the variable name. "a" is the variable name. "as", 2, true are called values."as", 2, true are called values.
The variable name can have alphanumeric values. Any lowercase (a-z) or uppercase (A-Z) alphabets, numbers (0-9) or The variable name can have alphanumeric values. Any lowercase (a-z) or uppercase (A-Z) alphabets, numbers (0-9) or underscore(_).underscore(_).
VariablesVariablesString- E.g: "sdfesdfe"String- E.g: "sdfesdfe"For a variable to be a string type, the value assigned should be given in quotes. For a variable to be a string type, the value assigned should be given in quotes. A number given within quotes will be considered only as a string and not as an integer.A number given within quotes will be considered only as a string and not as an integer.i.e ifi.e ifvar a = "2";var a = "2";var b = "2";var b = "2";then a+b will give "22" and not 4.then a+b will give "22" and not 4.
Example Code: Example Code: <script language="javascript"><script language="javascript">var as = "this is \"a\" \'test\'";var as = "this is \"a\" \'test\'";document.write(as);document.write(as);</script></script>
Result:Result:this is "a" 'test'this is "a" 'test'
Number: Numbers can be used in two different types in javascript. They are integer and float.Number: Numbers can be used in two different types in javascript. They are integer and float.Integer- E.g: 2Integer- E.g: 2For a variable to be of int type just assign number with out any quotes. For a variable to be of int type just assign number with out any quotes. i.e ifi.e ifvar a = 2;var a = 2;var b = 2;var b = 2;then a+b gives 4.then a+b gives 4.
Float- E.g: 2.12Float- E.g: 2.12For a variable to be of float type just assign fractional number with out any quotes. For a variable to be of float type just assign fractional number with out any quotes. i.e ifi.e ifvar a = 2.12;var a = 2.12;var b = 2.12;var b = 2.12;then a+b gives 4.24then a+b gives 4.24
VariablesVariablesBoolean Data Type- E.g: trueBoolean Data Type- E.g: trueIt can have logical values true or false.It can have logical values true or false.Variable type Boolean should not have any quotes.Variable type Boolean should not have any quotes.
i.e. "true" is not equal to true, "true" will be considered as a string.i.e. "true" is not equal to true, "true" will be considered as a string.
var a = true;var a = true;var b = false;var b = false;
Boolean variable values are mostly used along with "if", "if else" statements and "while" loops.Boolean variable values are mostly used along with "if", "if else" statements and "while" loops.Example Code: Example Code: <script language="javascript"><script language="javascript">var a = true;var a = true;if(a == true)if(a == true){{document.write("this is true");document.write("this is true");}}</script></script>
Result:Result:this is truethis is true
Data Type Conversion: Data Type Conversion: The following data type conversions are possibleThe following data type conversions are possiblea) String to Integer (int)a) String to Integer (int)b) Float to Integer (int)b) Float to Integer (int)c) String to Floatc) String to Floatd) Integer (int) to Stringd) Integer (int) to Stringe) Float to Stringe) Float to String
a) Converting String to Integera) Converting String to IntegerTo convert a value from string to integer we have to use the function or method "parseInt(). Passing a correct argument to the function (e.g: "4") will return correct value To convert a value from string to integer we have to use the function or method "parseInt(). Passing a correct argument to the function (e.g: "4") will return correct value
else (e.g: "sd") 0 will be returned. else (e.g: "sd") 0 will be returned.
b) Converting Float to Integerb) Converting Float to IntegerTo convert a float value in to integer we have to use the function or method parseInt. To convert a float value in to integer we have to use the function or method parseInt.
parseInt(5.133) -> 5parseInt(5.133) -> 5
OperatorsOperators ExplanationExplanationAn operator is a symbol or sign used in javascript to An operator is a symbol or sign used in javascript to
identify a specific operation.identify a specific operation.
For example, when we want to define an expression for adding For example, when we want to define an expression for adding two numbers, we use 3+4. Here let us assume that we have two numbers, we use 3+4. Here let us assume that we have defined variable a and b for the number, so the expression will defined variable a and b for the number, so the expression will become a+b; The symbol "+" defines that the operands a and b become a+b; The symbol "+" defines that the operands a and b has to be added. So "+" is called as an operator.has to be added. So "+" is called as an operator.
TypesTypes::There a three type of operators based on operands used, namely There a three type of operators based on operands used, namely unary, binary, ternary.unary, binary, ternary.UnaryUnary - This works with one operand (e.g: a++, a will be - This works with one operand (e.g: a++, a will be incremented by 1),incremented by 1),BinaryBinary - This works with two operands (e.g: a+b), - This works with two operands (e.g: a+b),TernaryTernary - This works with three operands (e.g: condition? value - This works with three operands (e.g: condition? value 1 : value 2).1 : value 2).
OperatorsOperators
Arithmetic OperatorsArithmetic Operators: They are : They are operators or syntax used to do operators or syntax used to do arithmetic or math operations like arithmetic or math operations like addition, subtraction, multiplication, addition, subtraction, multiplication, division, increment, decrement, etc.. division, increment, decrement, etc.. These are some time misspelled as These are some time misspelled as arithmatic, arithematic.arithmatic, arithematic.
OperatorsOperatorsArithmetic Operators: They are operators or syntax used to do arithmetic or math operations like Arithmetic Operators: They are operators or syntax used to do arithmetic or math operations like
addition, subtraction, multiplication, division, increment, decrement, etc.. These are some time addition, subtraction, multiplication, division, increment, decrement, etc.. These are some time misspelled as arithmatic, arithematic.misspelled as arithmatic, arithematic.
++ Used for addition of two numbers Used for addition of two numbers-- Used for subtraction of two numbers Used for subtraction of two numbers** Used for multiplication of two numbers Used for multiplication of two numbers// Used for division of two numbers Used for division of two numbers%% Used to find the division remainder Used to find the division remainder++++ Used to increment a value Used to increment a value---- Used to decrement a value Used to decrement a value
Example Code: Example Code: <script language="javascript"><script language="javascript">var c = (2+4-2)*10;var c = (2+4-2)*10;document.write(" Arithmetic Operations -> "+c);document.write(" Arithmetic Operations -> "+c);</script></script>
Result:Result:Arithmetic Operations -> 40Arithmetic Operations -> 40
OperatorsOperatorsLogical Operators: There are used mainly for boolean operations.Logical Operators: There are used mainly for boolean operations.Operator SyntaxOperator Syntax Description Description&&&& Used for logical "and" operation, condition Used for logical "and" operation, condition|||| Used for logical "or" operation, condition Used for logical "or" operation, condition!! Used for logical "not" operation, condition Used for logical "not" operation, condition
Local operators or used along with if statements and while loops to check multiple criterias. Local operators or used along with if statements and while loops to check multiple criterias. example usage1: if a is animal && (and) b is man, print something.example usage1: if a is animal && (and) b is man, print something.example usage2: if a is tany || (or) a is ramani, say good morning.example usage2: if a is tany || (or) a is ramani, say good morning.
Example Code: Example Code: <script language="javascript"><script language="javascript">var a = "tany";var a = "tany";var b = "ramani";var b = "ramani";if(a == "tany" && b == "ramani")if(a == "tany" && b == "ramani"){{document.write(" Logical Operator AND '&&', OR '||', NOT '!' ");document.write(" Logical Operator AND '&&', OR '||', NOT '!' ");}}</script></script>
Result:Result:Logical Operator AND '&&', OR '||', NOT '!'Logical Operator AND '&&', OR '||', NOT '!'
OperatorsOperatorsComparison Operators: Comparison Operators: They are used to compare numerical (numbers), string or boolean values.They are used to compare numerical (numbers), string or boolean values.Operator-SyntaxOperator-Syntax Description Description==== validates the condition whether two numbers or string values are equal validates the condition whether two numbers or string values are equal!=!= validates the condition whether two numbers or string values are not equal validates the condition whether two numbers or string values are not equal>> validates the condition whether one numbers is greater than other validates the condition whether one numbers is greater than other<< validates the condition whether one numbers is less than other validates the condition whether one numbers is less than other>=>= compares the numbers and checks whether one numbers is greater than or equal to other compares the numbers and checks whether one numbers is greater than or equal to other<=<= compares the numbers and checks whether one numbers is less than or equals other compares the numbers and checks whether one numbers is less than or equals other====== used to compare and check whether two values are strictly equal used to compare and check whether two values are strictly equal!==!== used to compare and check whether two values are strictly not equal used to compare and check whether two values are strictly not equal
The main difference between "equal to (==)" and "strictly equal to (===)" is that the equality comparison takes place after type conversion for "equal to The main difference between "equal to (==)" and "strictly equal to (===)" is that the equality comparison takes place after type conversion for "equal to (==)" and before type conversion for "strictly equal to (===)".(==)" and before type conversion for "strictly equal to (===)".
i.e "5" == 5 i.e "5" == 5 and "5" !== 5 and "5" !== 5
Example Code: Example Code: <script language="javascript"><script language="javascript">var a = "5";var a = "5";var b = 5;var b = 5;if(a == b)if(a == b){{document.write(" Testing Comparative Operator for equals ");document.write(" Testing Comparative Operator for equals ");}}
if(a === b)if(a === b){{document.write(" Testing Comparison Operator for strictly equals ");document.write(" Testing Comparison Operator for strictly equals ");}}</script></script>
Result:Result:Testing Comparative Operator for equals Testing Comparative Operator for equals
OperatorsOperatorsAssignment Operators are use to assign a value to a variable.Assignment Operators are use to assign a value to a variable.
== used to assign a value on the right side to the variable of the left side of the operator.used to assign a value on the right side to the variable of the left side of the operator. b = 3; b = 3;
+=+= it adds the value on the right to the previous value of the variable on the left and assign the new value to the variable.it adds the value on the right to the previous value of the variable on the left and assign the new value to the variable.
b = 3;b = 3;b += 4;b += 4;
// Now b will become 7// Now b will become 7-=-= it subtracts the value on the right to the previous value of the variable on the left and assign the new value to the variable.it subtracts the value on the right to the previous value of the variable on the left and assign the new value to the variable.
b = 4;b = 4;b -= 2;b -= 2;// Now b will become 2// Now b will become 2*=*= it multiplies the operand on the right to the previous value of the variable on the left and assaigns the new value to the it multiplies the operand on the right to the previous value of the variable on the left and assaigns the new value to the
variable.variable. b = 4;b = 4;b *= 2;b *= 2;// Now b will become 8// Now b will become 8/=/= it divides the operand on the right to the previous value of the variable on the left and assaigns the new value to the it divides the operand on the right to the previous value of the variable on the left and assaigns the new value to the
variable.variable. b = 6;b = 6;b /= 2;b /= 2;// Now b will become 3// Now b will become 3<<=<<= The operand on the left is shifted left by the value on the right. The operand on the left is shifted left by the value on the right. <<=<<= A signed right shifted is performed on the left operand by the value on the right. A signed right shifted is performed on the left operand by the value on the right.
OperatorsOperatorsTernary Operator: Ternary Operator: As the name indicates ternary operators take three operands. The syntax is condition ? result1 : result2;.As the name indicates ternary operators take three operands. The syntax is condition ? result1 : result2;.
Here you use a condition before question mark (?) followed by result 1 and result 2 separated by a colon (:). Result1 is called Here you use a condition before question mark (?) followed by result 1 and result 2 separated by a colon (:). Result1 is called if the condition is satisfied else result2 is called.if the condition is satisfied else result2 is called.
Example 1:Example 1:<script language=javascript><script language=javascript>var b=5;var b=5;(b == 5) ? a="true" : a="false";(b == 5) ? a="true" : a="false";document.write(" --------------------------- "+a);document.write(" --------------------------- "+a);</script></script>
Result:Result:--------------------------- true --------------------------- true
Example 2:Example 2:<script language=javascript><script language=javascript>var b=true;var b=true;(b == false) ? a="true" : a="false";(b == false) ? a="true" : a="false";document.write(" --------------------------- "+a);document.write(" --------------------------- "+a);</script></script>
Result:Result:--------------------------- false --------------------------- false
StatementsStatements If statement is used to check or verify a condition and execute a set of statement only if the condition is true. This should be referred as a statement and If statement is used to check or verify a condition and execute a set of statement only if the condition is true. This should be referred as a statement and
not as a function.not as a function.
Syntax:Syntax:if(condition)if(condition){{ // set of statements that will be executed // set of statements that will be executed // only if the condition is true or satisfied// only if the condition is true or satisfied}}
Example Code: Example Code: <script language="javascript"><script language="javascript">var a = "if check";var a = "if check";if(a == "if check")if(a == "if check"){{document.write(" inside if statement ");document.write(" inside if statement ");}}</script></script>
Result:Result:inside if statementinside if statement
In the above example the condition is to check whether variable 'a' equals (==) the string "if check". As the condition satisfies, the statements inside the In the above example the condition is to check whether variable 'a' equals (==) the string "if check". As the condition satisfies, the statements inside the brackets are executed.brackets are executed.
Nested If: Nested If: Nested if statement is nothing but using an if statement inside another if statement. Nested if is used when we check a condition only when another Nested if statement is nothing but using an if statement inside another if statement. Nested if is used when we check a condition only when another
condition is true. For an example when we purchase a car, first we verify is the car looks good, only if it satisfies we go to the next condition color, condition is true. For an example when we purchase a car, first we verify is the car looks good, only if it satisfies we go to the next condition color, then next and so on..then next and so on..
Syntax: Nested ifSyntax: Nested ifif(condition 1)if(condition 1){{ if(condition 2) if(condition 2) {{ // set of statements that will be executed // set of statements that will be executed }}}}
StatementsStatements If else statement also has the same format as that of "if" statement. Only additional thing is that an else part is added to if If else statement also has the same format as that of "if" statement. Only additional thing is that an else part is added to if
statement. So if the condition satisfies the statements inside if part will be executed else the statement inside else part statement. So if the condition satisfies the statements inside if part will be executed else the statement inside else part will be executed.will be executed.
Syntax:Syntax:if(condition){if(condition){ // set of statements if condition satisfies // set of statements if condition satisfies }}else{else{ // set of statements if condition fails // set of statements if condition fails } }
Example Code: Example Code: <script language="javascript"><script language="javascript">var a = "1234abc";var a = "1234abc";if(a == "adcdefa"){if(a == "adcdefa"){ document.write(" inside if statement ");document.write(" inside if statement ");}else{}else{ document.write(" inside else part of statement ");document.write(" inside else part of statement ");}}</script></script>
Result:Result:inside else part of statementinside else part of statement
In the above example the condition is to check if variable 'a' equals (==) "abcdefa". The condition fails as we have assigned a In the above example the condition is to check if variable 'a' equals (==) "abcdefa". The condition fails as we have assigned a as "1234abc". So the else part is executed.as "1234abc". So the else part is executed.
StatementsStatements "with" statement is used when numerous function of an object is used or a function of an object is to be used numerous "with" statement is used when numerous function of an object is used or a function of an object is to be used numerous
times.times.
Syntax:Syntax:with(object)with(object){{ // Calling the functions or methods of the object// Calling the functions or methods of the object}}
For this example we will use the object "document" and its methods (functions) "write" and attribute "title".For this example we will use the object "document" and its methods (functions) "write" and attribute "title".Example Code: Example Code: <script language="javascript"><script language="javascript">with(document)with(document){{write(" inside with statement <br>");write(" inside with statement <br>");write(" using with(object) we can call its functions directly <br>");write(" using with(object) we can call its functions directly <br>");write (" TITLE -"+title);write (" TITLE -"+title);}}</script></script>
Result:Result:inside with statement inside with statement using with(object) we can call its functions directly using with(object) we can call its functions directly TITLE - With Statement Code - Javascript (JS) TutorialTITLE - With Statement Code - Javascript (JS) Tutorial
In the above example you can clearly see that the write function is executed numerous times with out calling In the above example you can clearly see that the write function is executed numerous times with out calling document.write() and also title (document.title) is called. You can use any objects with "with" statement. e.g: date, document.write() and also title (document.title) is called. You can use any objects with "with" statement. e.g: date, math, etc. math, etc.
LoopsLoopsfor LOOP: for LOOP: As we state it, for loop is a looping syntax.As we state it, for loop is a looping syntax.A set of statements are executed as a loop until a condition is satisfied, the condition is based on an incremental or decremental counter. In other words "Looping statements A set of statements are executed as a loop until a condition is satisfied, the condition is based on an incremental or decremental counter. In other words "Looping statements
in javascript are used to execute the same set of code a specified number of times".in javascript are used to execute the same set of code a specified number of times".
Syntax:Syntax:for(intialvalue; condition; increment)for(intialvalue; condition; increment){{ // set of statements that will be executed // set of statements that will be executed }}
As defined in the syntax, for loop takes three parameters, the initial value (e.g i=0), condition - the statements inside "for" will be executed until this condition is satisfied (e.g As defined in the syntax, for loop takes three parameters, the initial value (e.g i=0), condition - the statements inside "for" will be executed until this condition is satisfied (e.g i<7), increment - this is where we set the initial value to be increased or decreased after each loop.i<7), increment - this is where we set the initial value to be increased or decreased after each loop.
All the three parameters are separated by semicolon ";". All the three parameters are separated by semicolon ";".
For an example, we will consider a situation where we want to add all numbers between one and ten.For an example, we will consider a situation where we want to add all numbers between one and ten.Example Code: Example Code: <script language="javascript"><script language="javascript">var i=0; var total=0;var i=0; var total=0;for(i=1; i<11; i++)for(i=1; i<11; i++){{total = total+i;total = total+i;}}document.write("--------- The total ------: "+total);document.write("--------- The total ------: "+total);</script></script>
Result:Result:--------- The total ------: 45--------- The total ------: 45
The example worked as follows,The example worked as follows,a) Initially we created the for loop by setting variable i as 1. a) Initially we created the for loop by setting variable i as 1. b) then we set the condition that the loop should execute till i is less than 11 (i<11).b) then we set the condition that the loop should execute till i is less than 11 (i<11).c) We made the variable to be incremented at the end of each loop (i++)c) We made the variable to be incremented at the end of each loop (i++)
First loop: i=0, i<11 is true so the statement is executed, now the total becomes 0+1=1 and i is incremented to 2.First loop: i=0, i<11 is true so the statement is executed, now the total becomes 0+1=1 and i is incremented to 2.
Second loop: now i=1, i<11 is true so the statement is executed, now the total becomes 1+2=3 and i is incremented to 2.Second loop: now i=1, i<11 is true so the statement is executed, now the total becomes 1+2=3 and i is incremented to 2.
this continues till i=11this continues till i=11Last loop: now i=11, i<11 becomes false and the loop ends here.Last loop: now i=11, i<11 becomes false and the loop ends here.
Note: i++ increments the value at the end on the loop, while ++i to increase the value of i at the start of the loop. Note: i++ increments the value at the end on the loop, while ++i to increase the value of i at the start of the loop.
LoopsLoops Switch case is used to when a condition may have multiple results and a different set of operation is done based on each result..Switch case is used to when a condition may have multiple results and a different set of operation is done based on each result..
Syntax:Syntax:Switch(condition)Switch(condition){{case result1:case result1: // Operation for result1 // Operation for result1 case result2:case result2: // Operation for result2 // Operation for result2
default :default : // If result belongs to none of the case specified// If result belongs to none of the case specified}}
Example Code: Example Code: <script language="javascript"><script language="javascript">for(var i=1; i<5; i++)for(var i=1; i<5; i++){{switch(i)switch(i){{ case 1:case 1: document.write("message for case 1 <br>");document.write("message for case 1 <br>"); break;break; case 2:case 2: document.write("message for case 2 <br>");document.write("message for case 2 <br>"); break;break; case 3:case 3: document.write("message for case 3 <br>");document.write("message for case 3 <br>"); break;break; default:default: document.write("message for case default<br>");document.write("message for case default<br>"); break;break;}}}}</script></script>Result:Result:message for case 1 message for case 1 message for case 2 message for case 2 message for case 3 message for case 3 message for case defaultmessage for case defaultIn the above example we have used for loop to explain switch case statement. Here each time the value of i is different and increases as 1, 2, 3, 4. There are three case In the above example we have used for loop to explain switch case statement. Here each time the value of i is different and increases as 1, 2, 3, 4. There are three case
defined for 1, 2, 3. When value is 4, default is executed.defined for 1, 2, 3. When value is 4, default is executed.
LoopsLoops'while' loop is used to execute a set of statements repeatedly until a condition works true. The difference between 'for' and 'while' loop is that 'while' does not 'while' loop is used to execute a set of statements repeatedly until a condition works true. The difference between 'for' and 'while' loop is that 'while' does not
take counter as an argument. take counter as an argument.
Syntax:Syntax:while(condition)while(condition){{ // set of statements that will be executed // set of statements that will be executed }}
As defined in the syntax, while loop has only one parameter, condition to be validated. The statements inside "while" will be executed until this condition As defined in the syntax, while loop has only one parameter, condition to be validated. The statements inside "while" will be executed until this condition becomes false. becomes false.
For an example, we will consider a situation where we want to print first 5 number.For an example, we will consider a situation where we want to print first 5 number.Example Code: Example Code: <script language="javascript"><script language="javascript">var i=0;var i=0;while(i<5)while(i<5){{document.write("The value of i is - "+i+" ");document.write("The value of i is - "+i+" ");i++;i++;}}</script></script>Result:Result:The value of i is - 0The value of i is - 0The value of i is - 1The value of i is - 1The value of i is - 2The value of i is - 2The value of i is - 3The value of i is - 3The value of i is - 4The value of i is - 4The execution process is as,The execution process is as,a) The initialization of the variable "i" as 1 was done before starting the loop.a) The initialization of the variable "i" as 1 was done before starting the loop.b) In while loop, the condition was checked,b) In while loop, the condition was checked,the condition is satisfied (true) as i<5 and so the statements are executed.the condition is satisfied (true) as i<5 and so the statements are executed.c) In the last line of the statement we has increased or incremented the value of i by 1. So after the end of the loop the pointer goes back to the beginning of the c) In the last line of the statement we has increased or incremented the value of i by 1. So after the end of the loop the pointer goes back to the beginning of the
loop and checks the condition.loop and checks the condition.d) Now "i" will be 1 and i is less than 5. The condition satisfies and the statements are executed. This continues till i is 5.d) Now "i" will be 1 and i is less than 5. The condition satisfies and the statements are executed. This continues till i is 5.e) When i is five, the condition becomes false and the pointer comes out of the loop.e) When i is five, the condition becomes false and the pointer comes out of the loop.
Note: The very important thing to note here is the i++ statement. If i++ has not been included 'i' will always be zero, so the condition will always be true and the Note: The very important thing to note here is the i++ statement. If i++ has not been included 'i' will always be zero, so the condition will always be true and the loop becomes an infinite loop. This will cause memory issue or infinite loading of the page. loop becomes an infinite loop. This will cause memory issue or infinite loading of the page.
LoopsLoops 'do-while' loop is similar to while loop and the only difference here is that the set of statements are 'do-while' loop is similar to while loop and the only difference here is that the set of statements are
executed first and the condition is checked next.executed first and the condition is checked next.
Syntax:Syntax:dodo{{ // set of statements that will be executed // set of statements that will be executed }}while(condition)while(condition)
Here the statements are added under do loop and while condition is checked at the end of loop. In Here the statements are added under do loop and while condition is checked at the end of loop. In 'Do While' the statements are executed once even if the condition will fail. 'Do While' the statements are executed once even if the condition will fail.
An exampleAn exampleExample Code:Example Code: <script language="javascript"><script language="javascript">var i=0;var i=0;dodo{{document.write("Testing DO-While loop");document.write("Testing DO-While loop");}}while(i!=0)while(i!=0)</script></script>
Result:Result:Testing DO-While loopTesting DO-While loop
In the example the condition is 'i' should not be equal to zero. The statements are executed and the In the example the condition is 'i' should not be equal to zero. The statements are executed and the condition is checked. The condition failed. The pointer comes out of the loop. So the statements are condition is checked. The condition failed. The pointer comes out of the loop. So the statements are executed once even when the condition fails. executed once even when the condition fails.
LoopsLoops Break is a statement used to exit or terminate a loop in execution. It is used in "for, while, do-while" looping statements. Break is a statement used to exit or terminate a loop in execution. It is used in "for, while, do-while" looping statements.
Break statement is used mostly with a conditional statement inside the loop. When the condition satisfies the control Break statement is used mostly with a conditional statement inside the loop. When the condition satisfies the control breaks/terminates from the loop and moves to the next line below the loop.breaks/terminates from the loop and moves to the next line below the loop.
For an example, we will use a for loop that prints 1 to 5 but will use break or exit the loop iteration when i is 3.For an example, we will use a for loop that prints 1 to 5 but will use break or exit the loop iteration when i is 3.Example Code: Example Code: <script language="javascript"><script language="javascript">for(var i=0; i<5; i++)for(var i=0; i<5; i++){{ if(i == 3)if(i == 3) break;break; document.write("i is - "+i);document.write("i is - "+i);}}document.write(" --------- After Looping------ ");document.write(" --------- After Looping------ ");</script></script>
Result:Result:
i is - 0i is - 0i is - 1i is - 1i is - 2i is - 2--------- After Looping--------------- After Looping------
The example worked as follows,The example worked as follows,a) "for loop" has five iterations from i=0 to i=4. a) "for loop" has five iterations from i=0 to i=4. b) It executes document.write at every iteration for i=0,i=1,i=2.b) It executes document.write at every iteration for i=0,i=1,i=2.c) when i is 3 the condition above document.write becomes true and so it is called.c) when i is 3 the condition above document.write becomes true and so it is called.d) break statement exits or terminates the looping sequence and brings the control to the line next to the end of loop.d) break statement exits or terminates the looping sequence and brings the control to the line next to the end of loop.
LoopsLoops Continue statement is used to stop or terminate one iteration of the loop in execution. It is used in "for, while, do-while" Continue statement is used to stop or terminate one iteration of the loop in execution. It is used in "for, while, do-while"
looping statements. Continue statement unlike break statement does not completely terminate the loop. It stops looping statements. Continue statement unlike break statement does not completely terminate the loop. It stops processing for only one iteration and brings the control back to the beginning of the loop.processing for only one iteration and brings the control back to the beginning of the loop.
For an example, we will try to stop processing inside a for loop when i is 2.For an example, we will try to stop processing inside a for loop when i is 2.Example Code: Example Code: <script language="javascript"><script language="javascript">for(var i=0; i<5; i++)for(var i=0; i<5; i++){{ if(i == 2)if(i == 2) continue;continue; document.write("i is - "+i);document.write("i is - "+i);}}</script></script>
Result:Result:
i is - 0i is - 0i is - 1i is - 1i is - 3i is - 3i is - 4i is - 4
The example worked as follows,The example worked as follows,a) This for loop has five iterations from i=0 to i=4. a) This for loop has five iterations from i=0 to i=4. b) It executes document.write at every iteration.b) It executes document.write at every iteration.c) when i is 2 the condition above document.write becomes true and so it is called.c) when i is 2 the condition above document.write becomes true and so it is called.d) continue statement terminates the looping sequence and brings the control to the beginning of loop, starting the next d) continue statement terminates the looping sequence and brings the control to the beginning of loop, starting the next
iteration.iteration.e) Thus the print was not done for i as 2. e) Thus the print was not done for i as 2.
FunctionsFunctions A function is nothing but a group or block of statements doing a specific task.A function is nothing but a group or block of statements doing a specific task.
Syntax:Syntax:function name()function name(){{ // set of statements that will be executed // set of statements that will be executed }}
A function has to be defined in the above syntax. A function has to be defined in the above syntax. The name "function" followed by the name we choose for the function and then open and close brackets. The statements that will do the The name "function" followed by the name we choose for the function and then open and close brackets. The statements that will do the
specific operation are then group together under this name using braces. specific operation are then group together under this name using braces.
A function may or may not return a value. A function may or may not have parameters value.A function may or may not return a value. A function may or may not have parameters value.
Invoking a function:Invoking a function: The statements inside the function will not be executed automatically. We have to invoke or call the function to execute the The statements inside the function will not be executed automatically. We have to invoke or call the function to execute the
statements. Just calling the name of the function will invoke the function. i.e. if we write a function with the name "test" calling it as statements. Just calling the name of the function will invoke the function. i.e. if we write a function with the name "test" calling it as "test();" will invoke the function. "test();" will invoke the function.
Example Code: Example Code: <script language="javascript"><script language="javascript">function test()function test(){{ document.write(" ---- This is a test function ---- ");document.write(" ---- This is a test function ---- ");}}
test();test();</script></script>
Result:Result:---- This is a test function -------- This is a test function ----
FunctionsFunctionsfunction name(parameter 1,parameter 2,...)function name(parameter 1,parameter 2,...){{ // set of statements that will be executed // set of statements that will be executed }}
In many cases we pass parameters or arguments to functions, these arguments will be used inside the function for required calculations. For an example In many cases we pass parameters or arguments to functions, these arguments will be used inside the function for required calculations. For an example we will use two numbers to add, subtract using function.we will use two numbers to add, subtract using function.
Here we write separate function for each operations add, subtract.Here we write separate function for each operations add, subtract.
Example Code: Example Code: <script language="javascript"><script language="javascript">
function add(number1, number2)function add(number1, number2){{ var c = number1+number2;var c = number1+number2; document.write(" ---- This added value is ---- "+c;document.write(" ---- This added value is ---- "+c;}}
function sub(number1, number2)function sub(number1, number2){{ var c = number1-number2;var c = number1-number2; document.write(" ---- This subtracted value is ---- "+c;document.write(" ---- This subtracted value is ---- "+c;}}
var a = 7;var a = 7;var b = 3;var b = 3;add(a,b);add(a,b);sub(a,b);sub(a,b);</script></script>
Result:Result:---- This added value is ---- 10---- This added value is ---- 10---- This subtracted value is ---- 4---- This subtracted value is ---- 4
Here you can clearly see that the two functions where invoked as "add(a,b);" and "sub(a,b);" where a and b are defined variables. You can even call the function Here you can clearly see that the two functions where invoked as "add(a,b);" and "sub(a,b);" where a and b are defined variables. You can even call the function directly with the variables as say "add(9,1);". directly with the variables as say "add(9,1);".
A function can be invoked any number of times with any proper value.A function can be invoked any number of times with any proper value.
FunctionsFunctionsfunction name(parameter 1,parameter 2,...)function name(parameter 1,parameter 2,...){{ // set of statements that will be executed // set of statements that will be executed return thevalue;return thevalue;}}
A function can also return a value after doing the specified operations. To explain, we would consider a requirement where we have to calculate x2/2.A function can also return a value after doing the specified operations. To explain, we would consider a requirement where we have to calculate x2/2.We will calculate x2 in a function and return the result of x2. After getting the return value, we will divide it by 2.We will calculate x2 in a function and return the result of x2. After getting the return value, we will divide it by 2.
Example Code: Example Code: <script language="javascript"><script language="javascript">
function square(number1)function square(number1){{ var c = number1*number1;var c = number1*number1; // Now we will return the result// Now we will return the result return c;return c;}}
var x = 4;var x = 4;// Here we invoke the function and capture the result// Here we invoke the function and capture the resultvar des = square(x);var des = square(x);var res = des/2;var res = des/2;document.write(" The result - "+res);document.write(" The result - "+res);</script></script>
Result:Result:The result - 8The result - 8
In the above example we calculate x2 in the function "square(xxx)". We returned the result.In the above example we calculate x2 in the function "square(xxx)". We returned the result.
Getting the Result:Getting the Result:As the function is to return a value, while we invoke the function we assigned a variable to capture the result as "var des = square(xxxx);".As the function is to return a value, while we invoke the function we assigned a variable to capture the result as "var des = square(xxxx);".Now the result of x2 is assigned to the variable des. Now the result of x2 is assigned to the variable des. Using the variable 'des' further operations were completed.Using the variable 'des' further operations were completed.
Note: Once the return statement is called in a function it will break, i.e no further statements below it will be executed.Note: Once the return statement is called in a function it will break, i.e no further statements below it will be executed.
FunctionsFunctionsAn object is nothing but a class or file with a group of functions or methods. In An object is nothing but a class or file with a group of functions or methods. In
javascript strings are stored as string objects. We can declare a string in javascript strings are stored as string objects. We can declare a string in either of the two wayseither of the two ways
a) var sname = "testing string object";a) var sname = "testing string object";b) var sname = new String("testing string object");b) var sname = new String("testing string object");
Both results in the same string object. String object contains some predefined Both results in the same string object. String object contains some predefined function or methods that are extensively used in javascript.function or methods that are extensively used in javascript.
String object has the following functionsString object has the following functionsa)length()a)length()b)charAt()b)charAt()c)indexOf()c)indexOf()d)lastIndexOf()d)lastIndexOf()e)substring()e)substring()f)split()f)split()g)toLowerCase()g)toLowerCase()h)toUpperCase()h)toUpperCase()
FunctionsFunctionsObject: StringObject: String
Method or Function: lengthMethod or Function: length
Description: This will count the total number of characters (length or size) present in the string and Description: This will count the total number of characters (length or size) present in the string and returns the value. returns the value.
Example Code:Example Code:<script language=javascript><script language=javascript>var ss = "a character count - size test ";var ss = "a character count - size test ";var result = ss.length;var result = ss.length;document.write(result);document.write(result);</script></script>
Result: 30 Result: 30
Explanation:Explanation:In the above example,In the above example,the string is stored in a variable ss.the string is stored in a variable ss.then the function is called as "ss.length".then the function is called as "ss.length".the method counts the total characters in the string and returns it.the method counts the total characters in the string and returns it.the result is of variable type, integer.the result is of variable type, integer.
ArraysArraysThey are special type of javascript objects. It is used to store data's in contiguous manner. In other words arrays help you to store similar data's under one They are special type of javascript objects. It is used to store data's in contiguous manner. In other words arrays help you to store similar data's under one
name in a defined order.name in a defined order.
Syntax:Syntax: var varname = new Array(3);var varname = new Array(3);
In the above syntax we have declared a new array of size 3 under the name varname. We can create new array only using the syntax new Array. It is In the above syntax we have declared a new array of size 3 under the name varname. We can create new array only using the syntax new Array. It is case sensitive and so "Array" should not be defined as "array". case sensitive and so "Array" should not be defined as "array".
The size of the array is set as 3. So, we can store 3 variables in the array varname. It can be declared with any size according to our requirement. The size of the array is set as 3. So, we can store 3 variables in the array varname. It can be declared with any size according to our requirement.
Assigning Vales:Assigning Vales: Arrays always start from 0th index or position. If we have set the size as 3, the array will have 3 position 0,1 & 2. We can assign values as follows,Arrays always start from 0th index or position. If we have set the size as 3, the array will have 3 position 0,1 & 2. We can assign values as follows,
varname[0] = "testing array";varname[0] = "testing array"; varname[1] = "position 2";varname[1] = "position 2"; varname[2] = "position 3";varname[2] = "position 3";
To assign a value in to an array, we have to call the variable name on which the array was created, followed by the position [where we want to store the To assign a value in to an array, we have to call the variable name on which the array was created, followed by the position [where we want to store the value] and then assign the value.value] and then assign the value.
Retrieving Values:Retrieving Values: To retrieve a value from an array is very simple. Just calling the array with its position will retrieve the value at that position.To retrieve a value from an array is very simple. Just calling the array with its position will retrieve the value at that position.E.g: var val = varname[0]; E.g: var val = varname[0];
Example Code: Example Code: <script language="javascript"><script language="javascript">var varname = new Array(2);var varname = new Array(2);varname[0] = "testing array";varname[0] = "testing array";varname[1] = "position 2";varname[1] = "position 2";document.write("Result of array is - "+varname[1]);document.write("Result of array is - "+varname[1]);</script></script>
Result:Result:Result of array is - position 2Result of array is - position 2
The above example shows how to create a new array of size two, add values in to it and retrieve them. The above example shows how to create a new array of size two, add values in to it and retrieve them. In next tutorial chapter, you will learn dense and dynamic array..In next tutorial chapter, you will learn dense and dynamic array..
ArraysArrays Array has the following predefined methods.Array has the following predefined methods.
toString()toString() join()join() reverse()reverse() sort()sort()
Method: toString() :Method: toString() : This method is used to convert the array elements in to a string. The string will have each element in the array separated by comma(,).This method is used to convert the array elements in to a string. The string will have each element in the array separated by comma(,).Example Code: Example Code: <script language="javascript"><script language="javascript">var varname = new Array();var varname = new Array();varname[0] = "testing to string 1";varname[0] = "testing to string 1";varname[1] = "testing to string 2";varname[1] = "testing to string 2";document.write("toString -- "+varname.toString());document.write("toString -- "+varname.toString());</script></script>
Result:Result:toString -- testing to string 1,testing to string 2toString -- testing to string 1,testing to string 2
Method: join() :Method: join() : This method is used to join the elements in the array separated by a separator. This function is much similar to toString method. Here we can specify This method is used to join the elements in the array separated by a separator. This function is much similar to toString method. Here we can specify
the delimiter or separator that comes instead of comma.the delimiter or separator that comes instead of comma.Example Code: Example Code: <script language="javascript"><script language="javascript">var aarray = new Array();var aarray = new Array();aarray[0] = "element 1";aarray[0] = "element 1";aarray[1] = "element 2";aarray[1] = "element 2";var xx = aarray.join(" +++ ");var xx = aarray.join(" +++ ");document.write("join() -- "+xx);document.write("join() -- "+xx);</script></script>
Result:Result:join() -- element 1 +++ element 2join() -- element 1 +++ element 2
